/* StagePlotTools440Pro · app styles (moved out of site/index.html iframe, v2.4.0) */
:root{
  --bg-0:#0c0e12;
  --bg-1:#14171d;
  --bg-2:#1b1f27;
  --bg-3:#232833;
  --border:#2e3440;
  --border-soft:#252a34;
  --accent:#1379c6;
  --accent-dim:#0d5c93;
  --text-0:#f2f3f5;
  --text-1:#c4c9d4;
  --text-2:#8891a1;
  --shadow:rgba(0,0,0,0.4);
  --focus-ring:#1379c655;
}

*{box-sizing:border-box;}
[hidden]{ display:none !important; }

.app{
  position:relative;
  z-index:1;
  color:var(--text-0);
  -webkit-font-smoothing:antialiased;
}

/* ---------- Watermark ---------- */
.watermark{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:min(70vw, 900px);
  z-index:0;
  opacity:0.045;
  filter:grayscale(100%);
  pointer-events:none;
  user-select:none;
}
.watermark img{
  display:block;
  width:100%;
  height:auto;
}

.btn{
  appearance:none;
  border:1px solid var(--border);
  background:var(--bg-2);
  color:var(--text-0);
  padding:10px 18px;
  border-radius:8px;
  font-size:0.9rem;
  font-weight:600;
  cursor:pointer;
  transition:background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.btn:hover{ background:var(--bg-3); border-color:#3a4150; }
.btn:active{ transform:translateY(1px); }

.btn-primary{
  background:linear-gradient(135deg, var(--accent), var(--accent-dim));
  border:none;
  color:#ffffff;
  box-shadow:0 2px 10px rgba(19,121,198,0.35);
}
.btn-primary:hover{ filter:brightness(1.08); background:linear-gradient(135deg, var(--accent), var(--accent-dim)); }

.btn-ghost{
  background:transparent;
}

.actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

.lang-switch{
  display:flex;
  background:var(--bg-2);
  border:1px solid var(--border);
  border-radius:8px;
  padding:2px;
  gap:2px;
}

.lang-btn{
  appearance:none;
  border:none;
  background:transparent;
  color:var(--text-2);
  font-family:inherit;
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.03em;
  padding:6px 10px;
  border-radius:6px;
  cursor:pointer;
  transition:background 0.15s ease, color 0.15s ease;
}
.lang-btn:hover{ color:var(--text-0); }
.lang-btn.active{
  background:linear-gradient(135deg, var(--accent), var(--accent-dim));
  color:#fff;
}

/* ---------- Page tabs ---------- */
.page-tabs{
  display:flex;
  gap:8px;
  margin-bottom:24px;
  border-bottom:1px solid var(--border-soft);
}

.page-tab{
  appearance:none;
  background:transparent;
  border:none;
  border-bottom:3px solid transparent;
  color:var(--text-2);
  font-family:inherit;
  font-size:0.9rem;
  font-weight:700;
  padding:10px 6px 12px;
  cursor:pointer;
  transition:color 0.15s ease, border-color 0.15s ease;
}
.page-tab:hover{ color:var(--text-0); }
.page-tab.active{
  color:var(--text-0);
  border-bottom-color:var(--accent);
}

.tab-page{ display:none; }
.tab-page.active{ display:block; }

.lists-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  align-items:start;
}

@media screen and (max-width:1000px){
  .lists-columns{ grid-template-columns:1fr; }
}

/* ---------- Header card (event info) ---------- */
.header-card{
  background:var(--bg-1);
  border:1px solid var(--border-soft);
  border-radius:14px;
  padding:22px;
  margin-bottom:28px;
  box-shadow:0 8px 24px var(--shadow);
  display:grid;
  grid-template-columns:repeat(4, 1fr) 132px;
  gap:16px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.field label{
  font-size:0.7rem;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--text-2);
  font-weight:600;
}

.field input[type="text"], .field input[type="date"]{
  background:var(--bg-2);
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 12px;
  color:var(--text-0);
  font-size:1rem;
  font-weight:600;
  width:100%;
  transition:border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input[type="text"]:focus, .field input[type="date"]:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--focus-ring);
}

/* ---------- Event logo upload ---------- */
.logo-field{ align-items:stretch; }

.logo-upload{
  position:relative;
  width:100%;
  height:100px;
  border-radius:10px;
  background:var(--bg-2);
  border:1.5px dashed var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
}

.logo-empty{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
}

.logo-btn{
  padding:8px 10px;
  font-size:0.7rem;
  white-space:normal;
  text-align:center;
  line-height:1.25;
}

.logo-preview{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px;
  cursor:pointer;
}

.logo-preview img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border-radius:4px;
}

.logo-remove{
  position:absolute;
  top:-7px;
  right:-7px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#c0392b;
  color:#fff;
  border:1.5px solid var(--bg-1);
  font-size:13px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
}

.logo-error{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  font-size:0.65rem;
  color:#e0645a;
  line-height:1.3;
  text-align:center;
}

/* ---------- Section headings ---------- */
.section{
  margin-bottom:36px;
}

.section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:12px;
  flex-wrap:wrap;
  gap:8px;
}

.section-head h2{
  font-size:1.05rem;
  margin:0;
  color:var(--text-0);
  letter-spacing:0.02em;
  display:flex;
  align-items:center;
  gap:10px;
}

.section-head h2 .tag{
  font-size:0.65rem;
  background:var(--bg-3);
  border:1px solid var(--border);
  color:var(--accent);
  padding:3px 9px;
  border-radius:999px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-weight:700;
}

.section-hint{
  font-size:0.78rem;
  color:var(--text-2);
}

/* ---------- Stage Plot Visual ---------- */
.stage-layout{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:20px;
  align-items:start;
}

.stage-frame{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.stage-edge-label{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:0.68rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:var(--text-2);
}

.stage-edge-label::before, .stage-edge-label::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--border);
}

.stage-canvas{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.055) 0 1px, transparent 1px 36px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.055) 0 1px, transparent 1px 36px),
    var(--bg-1);
  border:1px solid var(--border-soft);
  border-radius:14px;
  box-shadow:0 8px 24px var(--shadow);
  overflow:hidden;
  touch-action:none;
}

.stage-canvas.drag-over{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--focus-ring), 0 8px 24px var(--shadow);
}

.stage-canvas-empty-hint{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  color:var(--text-2);
  font-size:0.8rem;
  text-align:center;
  max-width:70%;
  pointer-events:none;
}

.placed-icon{
  position:absolute;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  transform:translate(-50%,-50%);
  cursor:grab;
  touch-action:none;
  user-select:none;
  z-index:2;
}

.placed-icon:active{ cursor:grabbing; z-index:3; }

.placed-icon-glyph{
  position:relative;
  width:42px;
  height:42px;
  border-radius:10px;
  background:var(--bg-3);
  border:1.5px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  line-height:1;
  box-shadow:0 3px 10px var(--shadow);
}

.placed-icon-glyph svg{ width:26px; height:26px; color:var(--text-0); }

.placed-icon-remove{
  position:absolute;
  top:-7px;
  right:-7px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#c0392b;
  color:#fff;
  border:1.5px solid var(--bg-1);
  font-size:12px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
}

.placed-icon-label{
  width:78px;
  background:rgba(0,0,0,0.35);
  border:1px solid var(--border);
  border-radius:5px;
  color:var(--text-0);
  font-size:0.62rem;
  text-align:center;
  padding:2px 3px;
  font-family:inherit;
}
.placed-icon-label:focus{
  outline:none;
  border-color:var(--accent);
}

/* ---------- Stage dimensions & unit switch ---------- */
.stage-dims-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}

.stage-dims-toolbar label{
  font-size:0.68rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--text-2);
  font-weight:600;
}

.stage-dims-toolbar input{
  width:60px;
  background:var(--bg-2);
  border:1px solid var(--border);
  border-radius:8px;
  padding:7px 8px;
  color:var(--text-0);
  font-size:0.85rem;
  font-family:inherit;
  text-align:center;
}
.stage-dims-toolbar input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--focus-ring);
}

.stage-dims-sep{ color:var(--text-2); font-size:0.8rem; }

.stage-dims-badge{
  position:absolute;
  top:10px;
  right:10px;
  background:var(--bg-3);
  border:1px solid var(--border);
  color:var(--text-0);
  font-size:0.72rem;
  font-weight:700;
  padding:4px 10px;
  border-radius:999px;
  z-index:3;
  pointer-events:none;
}

/* ---------- Riser ---------- */
.placed-riser{
  position:absolute;
  box-sizing:border-box;
  border:2px solid var(--accent);
  background:rgba(19,121,198,0.18);
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1;
  cursor:grab;
  touch-action:none;
}
.placed-riser:active{ cursor:grabbing; }

.riser-label{
  color:var(--text-0);
  font-size:0.68rem;
  font-weight:700;
  text-align:center;
  padding:2px 7px;
  background:rgba(12,14,18,0.55);
  border-radius:4px;
  pointer-events:none;
  white-space:nowrap;
}

.riser-resize-handle{
  position:absolute;
  right:-6px;
  bottom:-6px;
  width:16px;
  height:16px;
  background:var(--accent);
  border:2px solid var(--bg-0);
  border-radius:4px;
  cursor:nwse-resize;
  touch-action:none;
}

.riser-remove{
  position:absolute;
  top:-8px;
  left:-8px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#c0392b;
  color:#fff;
  border:1.5px solid var(--bg-1);
  font-size:12px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
}

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.6);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10000;
  padding:20px;
}

.modal-card{
  background:var(--bg-1);
  border:1px solid var(--border-soft);
  border-radius:14px;
  padding:24px;
  width:min(90vw, 340px);
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
}

.modal-card h3{
  margin:0 0 18px;
  font-size:1rem;
  color:var(--text-0);
}

.modal-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:14px;
}

.modal-field label{
  font-size:0.7rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--text-2);
  font-weight:600;
}

.modal-field input, .modal-field select{
  background:var(--bg-2);
  border:1px solid var(--border);
  border-radius:8px;
  padding:9px 11px;
  color:var(--text-0);
  font-size:0.95rem;
  font-family:inherit;
  width:100%;
}
.modal-field input:focus, .modal-field select:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--focus-ring);
}

.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:6px;
}

.icon-bank{
  background:var(--bg-1);
  border:1px solid var(--border-soft);
  border-radius:14px;
  box-shadow:0 8px 24px var(--shadow);
  overflow:hidden;
  max-height:560px;
  display:flex;
  flex-direction:column;
}

.icon-bank-head{
  padding:14px 16px 10px;
  border-bottom:1px solid var(--border-soft);
  flex-shrink:0;
}

.icon-bank-head strong{ font-size:0.85rem; }
.icon-bank-head p{
  margin:4px 0 0;
  font-size:0.7rem;
  color:var(--text-2);
}

.icon-bank-scroll{
  overflow-y:auto;
  flex:1;
}

.category-block{
  border-bottom:1px solid var(--border-soft);
}
.category-block:last-child{ border-bottom:none; }

.category-header{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:11px 14px;
  background:transparent;
  border:none;
  color:var(--text-0);
  font-family:inherit;
  font-size:0.8rem;
  font-weight:700;
  cursor:pointer;
  text-align:left;
}
.category-header:hover{ background:var(--bg-2); }

.category-header .count{
  font-weight:400;
  color:var(--text-2);
  font-size:0.68rem;
  margin-left:6px;
}

.category-header .chevron{
  flex-shrink:0;
  transition:transform 0.15s ease;
  color:var(--text-2);
  font-size:0.7rem;
}
.category-header.open .chevron{ transform:rotate(180deg); }

.category-items{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(64px, 1fr));
  gap:8px;
  padding:0 12px 12px;
}
.category-items[hidden]{ display:none; }

.bank-icon{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  background:var(--bg-2);
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px 4px;
  cursor:grab;
  touch-action:none;
  user-select:none;
  transition:border-color 0.15s ease, background 0.15s ease;
}
.bank-icon:hover{ border-color:var(--accent); background:var(--bg-3); }
.bank-icon:active{ cursor:grabbing; }

.bank-icon .glyph{ font-size:20px; line-height:1; height:24px; display:flex; align-items:center; justify-content:center; }
.bank-icon .glyph svg{ width:24px; height:24px; color:var(--text-0); }
.bank-icon .label{
  font-size:0.58rem;
  text-align:center;
  color:var(--text-1);
  line-height:1.15;
}

.glyph-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--accent-dim));
  color:#fff;
  font-size:0.52rem;
  font-weight:700;
  letter-spacing:0.01em;
}
.placed-icon-glyph .glyph-badge{ width:30px; height:30px; font-size:0.58rem; }

.drag-ghost{
  position:fixed;
  top:0; left:0;
  width:48px;
  height:48px;
  border-radius:10px;
  background:var(--bg-3);
  border:1.5px solid var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  pointer-events:none;
  z-index:9999;
  opacity:0.9;
  box-shadow:0 6px 18px rgba(0,0,0,0.5);
}
.drag-ghost svg{ width:28px; height:28px; color:var(--text-0); }

@media (max-width: 900px){
  .stage-layout{ grid-template-columns:1fr; }
  .icon-bank{ max-height:420px; }
}

/* ---------- Table ---------- */
.table-wrap{
  background:var(--bg-1);
  border:1px solid var(--border-soft);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 8px 24px var(--shadow);
}

.table-scroll{
  overflow-x:auto;
}

table{
  width:100%;
  border-collapse:collapse;
  min-width:640px;
}

thead th{
  background:var(--bg-2);
  color:var(--text-2);
  text-transform:uppercase;
  font-size:0.68rem;
  letter-spacing:0.1em;
  font-weight:700;
  text-align:left;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
}

thead th.col-num{
  width:56px;
  text-align:center;
}

tbody td{
  padding:0;
  border-bottom:1px solid var(--border-soft);
}

tbody tr:last-child td{
  border-bottom:none;
}

tbody tr:nth-child(even){
  background:rgba(255,255,255,0.015);
}

tbody tr:hover{
  background:rgba(19,121,198,0.08);
}

td.col-num{
  text-align:center;
  color:var(--accent);
  font-weight:700;
  font-size:0.85rem;
  padding:0 14px;
  vertical-align:middle;
}

td input[type="text"]{
  width:100%;
  background:transparent;
  border:none;
  border-radius:0;
  color:var(--text-0);
  font-size:0.88rem;
  padding:12px 14px;
  font-family:inherit;
}

td input[type="text"]:focus{
  outline:none;
  background:var(--bg-3);
  box-shadow:inset 0 0 0 1.5px var(--accent);
}

td input[type="text"]::placeholder{
  color:var(--text-2);
  opacity:0.6;
}

th.col-remove, td.col-remove{
  width:40px;
  padding:0 8px;
  text-align:center;
}

.row-remove-btn{
  width:22px;
  height:22px;
  border-radius:50%;
  background:transparent;
  color:var(--text-2);
  border:1.5px solid var(--border);
  font-size:13px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
  transition:background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.row-remove-btn:hover{
  background:#c0392b;
  border-color:#c0392b;
  color:#fff;
}

.table-actions{
  display:flex;
  justify-content:center;
  padding:14px;
  border-top:1px solid var(--border-soft);
}

/* ---------- Notes ---------- */
.notes-box{
  width:100%;
  min-height:180px;
  resize:vertical;
  background:var(--bg-1);
  border:1px solid var(--border-soft);
  border-radius:14px;
  padding:18px;
  color:var(--text-0);
  font-size:0.95rem;
  line-height:1.6;
  font-family:inherit;
  box-shadow:0 8px 24px var(--shadow);
}

.notes-box:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--focus-ring);
}

.save-indicator{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:0.75rem;
  color:var(--text-2);
}

.save-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#3ddc84;
  box-shadow:0 0 6px #3ddc8499;
}

footer.app-footer{
  text-align:center;
  color:var(--text-2);
  font-size:0.75rem;
  margin-top:30px;
  padding-top:20px;
  border-top:1px solid var(--border-soft);
}

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .header-card{
    grid-template-columns:1fr 1fr;
  }
  .logo-field{ grid-column:1 / -1; }
  .logo-upload{ height:90px; max-width:220px; }
  table{ min-width:560px; }
}

@media (max-width: 600px){
  .header-card{
    grid-template-columns:1fr;
  }
}

@media (max-width: 520px){
  .app{ padding:16px 10px 60px; }
  .actions{ width:100%; }
  .btn{ flex:1; justify-content:center; }
}

/* ---------- Print ---------- */
@media print{
  html,body{
    background:#fff !important;
    color:#000 !important;
  }
  .app{
    max-width:100%;
    padding:0;
    margin:0;
  }
  .no-print{
    display:none !important;
  }
  .watermark{
    opacity:0.16 !important;
    width:min(60vw, 700px) !important;
  }
  .tab-page{
    display:block !important;
  }
  #pageStage{
    page-break-after:always;
    break-after:page;
  }
  .lists-columns{
    grid-template-columns:1fr 1fr !important;
    gap:14px;
  }
  .lists-columns .section{
    margin-bottom:0;
  }
  .header-card{
    background:transparent !important;
    border:1px solid #999 !important;
    box-shadow:none !important;
    grid-template-columns:repeat(4, 1fr) 110px;
    page-break-inside:avoid;
  }
  .field label{ color:#333 !important; }
  .field input[type="text"], .field input[type="date"]{
    background:transparent !important;
    border:1px solid #999 !important;
    color:#000 !important;
    font-weight:700;
  }
  .logo-upload{
    background:transparent !important;
    border:1px solid #999 !important;
    height:80px;
  }
  .logo-empty{ display:none !important; }
  .logo-remove{ display:none !important; }
  .logo-preview{ cursor:default; }
  th.col-remove, td.col-remove, .table-actions{
    display:none !important;
  }
  .section-head h2{ color:#000 !important; }
  .section-head h2 .tag{
    background:transparent !important;
    border:1px solid #999 !important;
    color:#000 !important;
  }
  .section-hint{ color:#444 !important; }
  .table-wrap{
    background:transparent !important;
    border:1px solid #999 !important;
    box-shadow:none !important;
    page-break-inside:auto;
  }
  thead th{
    background:rgba(0,0,0,0.06) !important;
    color:#000 !important;
    border-bottom:1px solid #999 !important;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
  tbody tr:nth-child(even){ background:rgba(0,0,0,0.03) !important; }
  tbody tr:hover{ background:transparent !important; }
  tbody td{ border-bottom:1px solid #ddd !important; }
  td.col-num{ color:#000 !important; }
  td input[type="text"]{
    color:#000 !important;
    font-size:11px;
    padding:6px 8px;
    background:transparent !important;
  }
  .notes-box{
    background:transparent !important;
    border:1px solid #999 !important;
    color:#000 !important;
    box-shadow:none !important;
    min-height:auto;
  }
  table{ min-width:0; }
  .table-scroll{ overflow:visible; }
  tr{ page-break-inside:avoid; }
  .stage-layout{ grid-template-columns:1fr; }
  .icon-bank{ display:none !important; }
  .stage-frame{ page-break-inside:avoid; }
  .stage-edge-label{ color:#333 !important; }
  .stage-edge-label::before, .stage-edge-label::after{ background:#999 !important; }
  .stage-canvas{
    background:
      repeating-linear-gradient(0deg, rgba(0,0,0,0.08) 0 1px, transparent 1px 36px),
      repeating-linear-gradient(90deg, rgba(0,0,0,0.08) 0 1px, transparent 1px 36px),
      #fff !important;
    border:1px solid #999 !important;
    box-shadow:none !important;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
  .stage-canvas-empty-hint{ color:#666 !important; }
  .placed-icon-remove{ display:none !important; }
  .placed-icon-glyph{
    background:#f2f2f2 !important;
    border:1.5px solid #999 !important;
    box-shadow:none !important;
  }
  .placed-icon-glyph svg{ color:#000 !important; }
  .placed-icon-label{
    background:transparent !important;
    border:1px solid #bbb !important;
    color:#000 !important;
  }
  .stage-dims-toolbar{ display:none !important; }
  .stage-dims-badge{
    background:#fff !important;
    border:1px solid #999 !important;
    color:#000 !important;
  }
  .riser-resize-handle, .riser-remove{ display:none !important; }
  .placed-riser{
    background:rgba(0,0,0,0.04) !important;
    border:1.5px dashed #666 !important;
  }
  .riser-label{
    background:transparent !important;
    color:#000 !important;
  }
  * {
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
}

/* ---------- Update banner (service worker) ---------- */
#update-banner{
  position:fixed;
  left:16px;
  right:16px;
  bottom:16px;
  z-index:99999;
  background:linear-gradient(135deg, var(--accent), var(--accent-dim));
  color:#fff;
  border-radius:10px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  box-shadow:0 6px 20px rgba(0,0,0,0.35);
  font-size:0.86rem;
  max-width:420px;
  margin:0 auto;
}
#update-banner button{
  background:#fff;
  color:var(--accent-dim);
  border:none;
  border-radius:7px;
  padding:8px 14px;
  font-weight:700;
  font-size:0.82rem;
  cursor:pointer;
  white-space:nowrap;
  font-family:inherit;
}
@media print{
  #update-banner{ display:none !important; }
}

/* ---------- PAEZ 440 Vintage Audio Console ---------- */
:root{
  --bg-0:#05090d;
  --bg-1:#0b1118;
  --bg-2:#101a24;
  --bg-3:#172533;
  --border:#314659;
  --border-soft:#1e3040;
  --accent:#2298e6;
  --accent-dim:#0b5d94;
  --accent-pale:#8fd4ff;
  --metal-hi:#65717b;
  --metal-mid:#303a43;
  --metal-low:#111820;
  --lamp:#3ab9ff;
  --lamp-off:#17384b;
  --text-0:#eef7fc;
  --text-1:#c2d3df;
  --text-2:#7f98aa;
  --shadow:rgba(0,0,0,0.72);
  --focus-ring:#2298e655;
}

.app{font-family:"Arial Narrow","Roboto Condensed","Segoe UI",Arial,sans-serif;}
.watermark{opacity:.025;filter:grayscale(1) contrast(1.5) sepia(.25) hue-rotate(160deg);}

.header-card,
.section,
.modal-card{
  position:relative;
  background:
    linear-gradient(104deg,rgba(255,255,255,.045),transparent 18% 78%,rgba(255,255,255,.022)),
    repeating-linear-gradient(91deg,rgba(255,255,255,.012) 0 1px,transparent 1px 4px),
    linear-gradient(180deg,#18232c 0%,#0b1117 48%,#111a22 100%);
  border:1px solid #425361;
  border-radius:5px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -2px 5px rgba(0,0,0,.7),
    0 12px 30px rgba(0,0,0,.52);
}

.section::before,.section::after,.header-card::before,.header-card::after,.modal-card::before,.modal-card::after{
  content:"";
  position:absolute;
  width:9px;height:9px;border-radius:50%;
  background:
    linear-gradient(45deg,transparent 43%,#111 44% 55%,transparent 56%),
    radial-gradient(circle at 35% 30%,#a8b0b5 0 12%,#4c565d 28%,#151b20 70%);
  box-shadow:inset 0 0 2px #000,0 1px 1px rgba(255,255,255,.15);
  z-index:3;
}
.section::before,.header-card::before,.modal-card::before{top:8px;left:8px;}
.section::after,.header-card::after,.modal-card::after{right:8px;bottom:8px;transform:rotate(36deg);}


.actions{gap:9px;}
.save-indicator,.project-indicator{
  min-height:36px;padding:7px 11px;border:1px solid #273846;border-radius:3px;
  background:#071018;box-shadow:inset 0 1px 5px #000;
  text-transform:uppercase;letter-spacing:.08em;font-size:.68rem;
}
.save-dot{
  background:var(--lamp);box-shadow:0 0 4px #fff,0 0 12px var(--lamp),inset 0 -1px 2px #07507c;
  border:1px solid #bce9ff;
}
.save-indicator.save-error{color:#ff9b8f;border-color:#743a35;}
.save-indicator.save-error .save-dot{background:#d84a3d;border-color:#ffb2a9;box-shadow:0 0 10px rgba(216,74,61,.8);}
.project-indicator{display:flex;align-items:center;gap:7px;color:#9bb2c2;max-width:220px;}
.project-indicator::before{
  content:"";width:7px;height:7px;border-radius:50%;flex:0 0 auto;
  background:#d99b31;box-shadow:0 0 9px rgba(217,155,49,.7);
}
.project-indicator.active::before{background:var(--lamp);box-shadow:0 0 10px var(--lamp);}
#currentProjectName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.btn,.page-tab,.lang-btn,.category-toggle,.row-remove-btn{
  border-radius:3px;
  text-transform:uppercase;
  letter-spacing:.07em;
  font-weight:800;
}
.btn,.page-tab{
  color:#d5e2e9;
  border:1px solid #5a6974;
  background:linear-gradient(180deg,#4b5862 0%,#27323b 44%,#121a21 48%,#303b44 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -2px 1px rgba(0,0,0,.65),0 3px 0 #06090c,0 4px 8px rgba(0,0,0,.55);
  text-shadow:0 -1px 0 #000;
  transition:transform .08s ease,filter .16s ease,box-shadow .08s ease;
}
.btn:hover,.page-tab:hover{filter:brightness(1.16);border-color:#7790a1;}
.btn:active,.page-tab:active,.page-tab.active{
  transform:translateY(2px);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.85),inset 0 -1px 0 rgba(255,255,255,.1),0 1px 0 #05080a;
}
.btn-primary,.page-tab.active{
  color:#e7f8ff;border-color:#2a96d7;
  background:linear-gradient(180deg,#237fb8 0%,#125580 45%,#092c45 49%,#124f75 100%);
  box-shadow:inset 0 1px 0 rgba(185,230,255,.35),inset 0 -2px 1px rgba(0,0,0,.65),0 3px 0 #03131e,0 0 13px rgba(34,152,230,.22);
}

.lang-switch{
  position:relative;padding:4px;gap:3px;border:1px solid #5a6770;border-radius:3px;
  background:linear-gradient(180deg,#1d252c,#070b0e);
  box-shadow:inset 0 2px 5px #000,0 1px 0 rgba(255,255,255,.12);
}
.lang-btn{
  min-width:38px;height:29px;border:1px solid transparent;color:#6f7d86;background:transparent;
  box-shadow:none;text-shadow:0 -1px #000;
}
.lang-btn.active{
  color:#e8f7ff;border-color:#527485;
  background:linear-gradient(180deg,#77838b,#34424c 47%,#17222a 52%,#4b5b65);
  box-shadow:inset 0 1px rgba(255,255,255,.35),0 2px 0 #050708,0 0 9px rgba(34,152,230,.25);
}

.page-tabs{gap:8px;padding:0 10px;margin-bottom:18px;}
.page-tab{border-bottom:1px solid #5a6974;padding:12px 20px;display:inline-flex;align-items:center;justify-content:center;gap:9px;}
.page-tabs{flex-wrap:wrap;}
.tab-index{color:#708694;font-size:.68rem;font-weight:900;letter-spacing:.08em;}
.tab-selector{width:12px;height:12px;border-radius:50%;border:1px solid #52616a;background:#090d10;box-shadow:inset 0 1px 3px #000;}
.page-tab.active .tab-selector{border-color:#c7efff;background:#35b8ff;box-shadow:0 0 4px #fff,0 0 12px #31aeea,inset 0 -1px 2px #0b5d8b;}
.tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:42px;margin-left:7px;padding:3px 6px;border:1px solid #315a72;background:#071018;color:#82cdf5;font-size:.72rem;box-shadow:inset 0 1px 4px #000;}

.header-card{border-radius:5px;padding:24px 25px;margin-bottom:20px;}
.section{border-radius:5px;padding:22px;margin-bottom:20px;}
.section-head{border-bottom:1px solid #314250;padding-bottom:12px;margin-bottom:16px;}
.section-head h2,.modal-card h3{
  color:#d9e9f2;text-transform:uppercase;letter-spacing:.11em;font-size:1rem;
  text-shadow:0 1px #000;
}
.tag{
  border-radius:2px;background:#07141d;border:1px solid #246990;color:#63bff4;
  box-shadow:inset 0 1px 4px #000;text-transform:uppercase;letter-spacing:.08em;
}

.field label,.modal-field label{font-size:.72rem;color:#8ea8b9;letter-spacing:.12em;}
.field input[type="text"],.field input[type="date"],.modal-field input,.modal-field select,.project-editor input,.notes-box,td input[type="text"]{
  color:#e9f6fd;background:linear-gradient(180deg,#071018,#0c1922);
  border:1px solid #334b5d;border-radius:2px;
  box-shadow:inset 0 2px 7px rgba(0,0,0,.9),0 1px rgba(255,255,255,.04);
}
.field input[type="text"]:focus,.field input[type="date"]:focus,.modal-field input:focus,.project-editor input:focus,.notes-box:focus,td input[type="text"]:focus{
  border-color:#2d9dde;box-shadow:inset 0 2px 7px rgba(0,0,0,.9),0 0 0 2px rgba(34,152,230,.18),0 0 11px rgba(34,152,230,.2);
}

.logo-upload,.table-wrap,.icon-bank{
  border-radius:3px;background:#09121a;border-color:#344857;
  box-shadow:inset 0 2px 10px rgba(0,0,0,.72);
}
.stage-canvas{
  border-radius:3px;border:1px solid #4f6879;
  background-color:#07131d;
  background-image:
    linear-gradient(rgba(55,143,195,.105) 1px,transparent 1px),
    linear-gradient(90deg,rgba(55,143,195,.105) 1px,transparent 1px),
    radial-gradient(circle at center,rgba(19,87,126,.16),transparent 68%);
  background-size:24px 24px,24px 24px,100% 100%;
  box-shadow:inset 0 0 38px #020609,0 0 0 4px #101820,0 0 0 5px #3c4d59;
}
.stage-edge-label{color:#769cb3;letter-spacing:.18em;text-transform:uppercase;}
.stage-dims-badge{border-radius:2px;background:#07131b;border:1px solid #2878a8;color:#8cd4ff;box-shadow:0 0 12px rgba(34,152,230,.2);}
.bank-icon{
  border-radius:3px;border:1px solid #2c4354;background:linear-gradient(180deg,#152634,#09131c);
  box-shadow:inset 0 1px rgba(255,255,255,.05),0 2px 5px rgba(0,0,0,.35);
}
.bank-icon:hover{border-color:#2994d2;background:linear-gradient(180deg,#1c3c52,#0a1b27);}
.bank-icon .glyph,.placed-icon-glyph{color:#80cefa;filter:drop-shadow(0 0 4px rgba(35,158,226,.25));}
.placed-icon{border-radius:3px;background:linear-gradient(180deg,#182c3a,#08131b);border-color:#348fc3;box-shadow:0 5px 12px #000,0 0 10px rgba(34,152,230,.16);}
.placed-icon-label{border-radius:2px;background:#050c11;border-color:#294b60;color:#dceaf1;}
.riser{background:rgba(32,77,103,.28);border-color:#6095b2;box-shadow:inset 0 0 15px rgba(0,0,0,.5);}

thead th{background:linear-gradient(180deg,#1f2c36,#101820);color:#84a5b8;border-color:#3b4d5a;}
tbody tr:nth-child(even){background:rgba(24,78,111,.08);}
tbody tr:hover{background:rgba(34,152,230,.105);}
td.col-num{color:#72c8f8;text-shadow:0 0 7px rgba(34,152,230,.25);}

.modal-overlay{backdrop-filter:blur(5px);background:rgba(0,5,9,.78);}
.modal-card{border-radius:5px;max-width:540px;}
.project-modal-card{width:min(620px,calc(100vw - 24px));max-width:620px;}
.project-editor{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;margin:15px 0 18px;}
.project-editor input{min-width:0;padding:12px;}
.project-list{display:flex;flex-direction:column;gap:8px;max-height:310px;overflow:auto;padding:2px;}
.project-empty{padding:24px;text-align:center;color:#718a9b;border:1px dashed #314757;background:#081119;}
.project-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:10px;border:1px solid #304653;background:#08131b;box-shadow:inset 0 1px 5px #000;}
.project-row.active{border-color:#288fc9;box-shadow:inset 0 1px 5px #000,0 0 9px rgba(34,152,230,.18);}
.project-name{min-width:0;}
.project-name strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#dcebf3;}
.project-name small{color:#6f8a9c;}
.project-row .btn{padding:8px 10px;font-size:.68rem;}
.project-modal-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:16px;}

/* ---------- Vintage file/help strip + language lever ---------- */
.left-tools{display:flex;align-items:center;gap:8px;position:relative;z-index:8;}
.file-menu{position:relative;}
.file-menu-panel{
  position:absolute;top:calc(100% + 9px);left:0;width:250px;padding:9px;
  background:linear-gradient(180deg,#26333d,#090e13 24%,#111a21);
  border:1px solid #66737b;border-radius:3px;
  box-shadow:inset 0 1px rgba(255,255,255,.15),0 14px 30px rgba(0,0,0,.72);
  z-index:40;
}
.file-menu-panel::before{
  content:"";position:absolute;left:14px;top:-6px;width:10px;height:10px;
  transform:rotate(45deg);background:#26333d;border-left:1px solid #66737b;border-top:1px solid #66737b;
}
.file-command{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 11px;border:0;border-bottom:1px solid #263742;background:transparent;
  color:#d9e9f2;font:800 .72rem/1.2 inherit;text-transform:uppercase;letter-spacing:.08em;
  text-align:left;cursor:pointer;
}
.file-command:last-child{border-bottom:0;}
.file-command:hover,.file-command:focus{background:#12334a;color:#8bd7ff;outline:none;}
.file-command small{color:#6f8796;font-size:.61rem;}
.file-import-label{cursor:pointer;}
.commandbar{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 19px;margin:-6px 0 18px;
  background:linear-gradient(104deg,rgba(255,255,255,.04),transparent 20% 80%,rgba(255,255,255,.02)),linear-gradient(180deg,#18232c,#090f14 52%,#121c24);
  border:1px solid #425361;border-radius:5px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 -2px 5px rgba(0,0,0,.7),0 8px 20px rgba(0,0,0,.45);
}

.pro-badge,.fixed-free-badge{
  display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border:1px solid #8d6426;border-radius:2px;
  background:#241907;color:#efb952;font-size:.58rem;font-weight:900;letter-spacing:.09em;
}
.category-header{gap:8px;}
.category-meta{display:flex;align-items:center;gap:7px;}
.bank-icon.locked{position:relative;opacity:.5;filter:grayscale(.65);cursor:not-allowed;}
.bank-icon.locked::after{
  content:"PRO";position:absolute;right:5px;top:5px;padding:2px 4px;border:1px solid #9b6c22;
  background:#271b07;color:#ffc45b;font-size:.5rem;font-weight:900;letter-spacing:.08em;
}
.stage-dims-toolbar.free-locked input:disabled,.stage-dims-toolbar.free-locked button[aria-disabled="true"]{
  opacity:.72;cursor:not-allowed;color:#9eaab2;
}
.pro-notice{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:100;
  width:min(520px,calc(100vw - 24px));padding:14px 44px 14px 16px;
  border:1px solid #b17a29;border-radius:3px;background:linear-gradient(180deg,#33230b,#120d06);
  color:#ffe0a4;box-shadow:inset 0 1px rgba(255,255,255,.12),0 12px 30px #000;
  font-size:.82rem;line-height:1.35;
}
.pro-notice button{position:absolute;right:8px;top:8px;border:0;background:transparent;color:#ffe0a4;font-size:1.1rem;cursor:pointer;}
.project-list-title{margin:4px 0 9px;color:#8aa6b8;font-size:.7rem;text-transform:uppercase;letter-spacing:.11em;}
.project-row{grid-template-columns:minmax(0,1fr) repeat(3,auto);}
.project-row .download-project-btn{color:#8bd7ff;}
.project-indicator{cursor:pointer;}

#update-banner{border-radius:3px;border:1px solid #3c8fbe;background:linear-gradient(180deg,#173a50,#091924);box-shadow:0 8px 24px #000;}
#update-banner button{border-radius:2px;text-transform:uppercase;letter-spacing:.08em;}

@media (max-width:760px){
  .commandbar{align-items:stretch;flex-direction:column;padding:13px 14px;}
  .left-tools{flex-wrap:wrap;}
  .actions{display:grid;grid-template-columns:1fr 1fr;width:100%;}
  .lang-switch,.save-indicator,.project-indicator{grid-column:span 1;max-width:none;}
  .project-indicator{grid-column:1 / -1;}
  .header-card,.section{padding:19px 15px;}
  .project-editor{grid-template-columns:1fr 1fr;}
  .project-editor input{grid-column:1 / -1;}
  .project-row{grid-template-columns:minmax(0,1fr) auto auto;}
  .project-row .duplicate-project-btn{grid-column:auto;}
  .project-row .download-project-btn{grid-column:2;}
}

@media print{
  .project-indicator{display:none !important;}
  .header-card,.section,.modal-card{box-shadow:none !important;background:#fff !important;border-color:#999 !important;}
  .stage-canvas{background:#fff !important;box-shadow:none !important;}
}

/* ============================================================
   v2.4.0 · Rediseño interno (29-sep-2026)
   - Banner compartido (shared/ui/paez-global-banner) SIN orejeras:
     solo la placa central del 1U (996 de 1086 px) con sus 4 tornillos.
     El arte no se retoca: se recorta con CSS (45 px por lado).
   - Fondo: la pieza scroll oficial (rack/v1/assets/scroll) como un solo
     panel continuo. Alto mínimo = 6 × 2U (6 × 184 px a 1086 de ancho).
   - Paneles internos con el marco oficial ventana/VENTANA-PANTALLA-9SLICE.
   - Sin iframe: la app vive en la página y comparte un solo scroll.
   ============================================================ */
.stagePlotShell{overflow-x:hidden;overflow-x:clip}
/* Banner: regla del owner 30-sep (shared/ui/software-internal-chrome.css):
   en el navegador CON orejeras; instalada como app (PWA) SIN orejeras. */
.stagePlotFrame{
  min-height:calc(min(1180px, 100vw - 12px) * 1104 / 1086);
  padding:4.6% 4.4% 5.4%;
}
.stagePlotFrame > .app{max-width:none;margin:0;padding:0;}

/* Marco de ventana oficial (9-slice): esquinas con tornillos fijas, bordes repetidos, centro oscuro. */
.header-card,
.section,
.modal-card,
.icon-bank{
  border-style:solid;
  border-color:transparent;
  border-width:56px;
  border-radius:0;
  border-image:url("/shared/design-system/rack/v1/assets/ventana/VENTANA-PANTALLA-9SLICE.png") 56 fill / 56px round;
  background:transparent;
  box-shadow:none;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.45));
}
.header-card::before,.header-card::after,
.section::before,.section::after,
.modal-card::before,.modal-card::after{content:none;display:none;}
.header-card{padding:4px 6px;margin-bottom:18px;}
.section{padding:2px 6px 6px;margin-bottom:18px;}
.icon-bank{border-width:28px;border-image-width:28px;max-height:620px;filter:none;}
.icon-bank-head{padding:4px 6px 10px;}
.modal-card{padding:4px 8px 6px;}

/* La barra de comandos y las pestañas van directo sobre el panel scroll, sin chrome extra. */
.commandbar{background:transparent;border:0;box-shadow:none;padding:0 2px;margin:0 0 16px;}
.page-tabs{padding:0 2px;margin-bottom:16px;}
.save-indicator,.project-indicator{background:rgba(5,12,18,.82);}
.app-footer{color:#c9bba6;border-top-color:rgba(201,187,166,.25);}
/* Entrada y Salida apiladas: dos ventanas con marco no caben lado a lado sin cortar la tabla (en el PDF siguen en 2 columnas). */
.lists-columns{grid-template-columns:minmax(0,1fr);gap:0;}
.section,.header-card{min-width:0;}

/* Número de canal/salida editable: escribir otro número mueve (o intercambia) la fila. */
td.col-num{padding:0 4px;}
.row-number-input{
  width:40px;padding:6px 2px;text-align:center;border:1px solid transparent;border-radius:2px;
  background:transparent;color:#72c8f8;font:800 .85rem/1 inherit;text-shadow:0 0 7px rgba(34,152,230,.25);
}
.row-number-input:hover{border-color:#334b5d;}
.row-number-input:focus{outline:none;border-color:#2d9dde;background:#071018;}

/* Selector de canales al soltar un instrumento */
.channel-modal-card{width:min(560px,calc(100vw - 24px));max-width:560px;}
.channel-modal-hint{margin:6px 0 14px;color:#91a8b7;font-size:.8rem;line-height:1.4;}
.channel-options{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
.channel-options-drums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.channel-group{margin:0;padding:8px 10px 10px;border:1px solid #2c4354;border-radius:2px;background:rgba(5,12,18,.55);}
.channel-group legend{padding:0 5px;color:#8ea8b9;font-size:.68rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;}
.channel-option{display:flex;align-items:center;gap:9px;padding:6px 4px;color:#dcebf3;font-size:.86rem;cursor:pointer;}
.channel-option input{width:17px;height:17px;margin:0;accent-color:#2298e6;flex:0 0 auto;}

/* Ilustración real registrada (vista de planta, escala real). Sin cuadro de fondo: se ve la figura del objeto.
   En el escenario el ancho lo fija JS (% del ancho real de la tarima); aquí solo se acomoda glifo y etiqueta. */
.glyph-art{display:block;width:100%;height:100%;pointer-events:none;}
.glyph-art svg{display:block;width:100%;height:100%;overflow:visible;}
.bank-icon .glyph.has-art{width:46px;height:40px;--art-bg:#152634;color:#dcebf3;filter:none;}
.drag-ghost.has-art{background:transparent;border-color:transparent;box-shadow:none;--art-bg:transparent;color:#dcebf3;}
.drag-ghost .glyph-art{width:48px;height:48px;}
.placed-icon.has-art{display:block;gap:0;background:transparent;border-color:transparent;box-shadow:none;}
.placed-icon.has-art .placed-icon-glyph{width:100%;height:100%;border:0;border-radius:0;background:transparent;box-shadow:none;filter:none;--art-bg:#07131d;color:#dcebf3;}
.placed-icon.has-art .placed-icon-label{position:absolute;top:calc(100% + 3px);left:50%;transform:translateX(-50%);}
.placed-icon.has-art .placed-icon-remove{top:-9px;right:-9px;}

@media (max-width:760px){
  .stagePlotFrame{min-height:0;padding:6vw 4.4vw 7vw;}
  .header-card,.section,.modal-card{border-width:28px;border-image-width:28px;}
  .header-card,.section{padding:2px 2px 4px;}
  .icon-bank{border-width:22px;border-image-width:22px;}
  .channel-options-drums{grid-template-columns:1fr;}
}

@media print{
  .p440-official-site-banner,.p440-site-footer-v2,.singleToolFooter{display:none!important;}
  html,body{background:#fff!important;}
  .stagePlotShell{width:100%;margin:0;}
  .stagePlotFrame{background:none!important;padding:0!important;min-height:0!important;filter:none!important;}
  .header-card,.section,.modal-card{border:1px solid #999!important;border-image:none!important;filter:none!important;padding:10px!important;}
  .row-number-input{color:#000!important;text-shadow:none!important;border:0!important;}
  .placed-icon.has-art .placed-icon-glyph{color:#000!important;--art-bg:#fff;background:transparent!important;border:0!important;}
}
@media print{
  .placed-icon{background:transparent!important;border-color:transparent!important;box-shadow:none!important;}
}

/* ============================================================
   v2.5.0 · 30-sep-2026 (orden del owner)
   - Todos los íconos del escenario son símbolos de línea (sin tarjeta gris ni borde azul).
   - Etiqueta = texto limpio centrado bajo el símbolo; el borde solo aparece al pasar
     el mouse o al editar, y nunca en el PDF.
   - Botones de la librería aprobada: Button Package 07 (gráfico arriba, label abajo).
     Masters Gray/Green/Red en design-source/ui-controls (30-sep); copias web en assets/ui-controls/v2/.
   ============================================================ */
:root{
  /* Button Package 07 (masters en design-source/ui-controls): 2 cuadros, normal arriba / pulsado abajo */
  --p440-btn-gray:url("/assets/ui-controls/v2/pkg07-gray.webp");
  --p440-btn-green:url("/assets/ui-controls/v2/pkg07-green.webp");
  --p440-btn-red:url("/assets/ui-controls/v2/pkg07-red.webp");
  --p440-label:#c9bba6;
}

/* Etiquetas */
.placed-icon-label,
.placed-icon.has-art .placed-icon-label{
  width:auto;min-width:3ch;max-width:160px;padding:1px 4px;
  background:transparent;border:1px solid transparent;border-radius:2px;box-shadow:none;
  color:#e6eef3;font:700 .64rem/1.2 "Arial Narrow","Roboto Condensed",Arial,sans-serif;text-align:center;
  text-shadow:0 1px 2px #000,0 0 4px #000;
  field-sizing:content;
}
.placed-icon:hover .placed-icon-label,
.placed-icon-label:focus{border-color:rgba(201,187,166,.55);background:rgba(5,12,18,.75);outline:none;}
.placed-icon-remove{opacity:0;transition:opacity .15s ease;}
.placed-icon:hover .placed-icon-remove,.placed-icon:focus-within .placed-icon-remove{opacity:1;}
@media (hover:none){.placed-icon-remove{opacity:1;}}

/* Botones Button Package 07 */
.btn{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;
  min-width:64px;padding:0 2px;border:0;border-radius:0;background:none;box-shadow:none;transform:none;filter:none;
  color:var(--p440-label);font:800 .62rem/1.15 "Arial Narrow","Roboto Condensed",Arial,sans-serif;
  letter-spacing:.06em;text-transform:uppercase;text-shadow:0 1px 2px #000;white-space:normal;text-align:center;
}
.btn::before{
  content:"";display:block;width:42px;height:42px;flex:0 0 auto;
  background:var(--p440-btn-gray) center top/100% 200% no-repeat;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.6));transition:transform .08s ease,filter .12s ease;
}
.btn.btn-green::before{background-image:var(--p440-btn-green);}
.btn.btn-red::before{background-image:var(--p440-btn-red);}
.btn:hover,.btn-primary,.btn-primary:hover,.btn-ghost{background:none;border:0;box-shadow:none;filter:none;color:var(--p440-label);}
.btn:hover::before{filter:drop-shadow(0 3px 3px rgba(0,0,0,.6)) brightness(1.15);}
.btn:active,.btn:active::before{transform:none;}
.btn:active::before{background-position:center bottom;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6));}
.btn:focus-visible{outline:2px solid rgba(201,187,166,.6);outline-offset:3px;}
.btn[aria-disabled="true"]{opacity:.5;}
.project-row .btn{padding:0;font-size:.56rem;min-width:52px;}
.project-row .btn::before{width:32px;height:32px;}
.logo-btn{min-width:80px;}
.commandbar{align-items:flex-start;}
.commandbar .actions{align-items:flex-start;gap:14px;}
.table-actions{justify-content:center;}
.modal-actions{align-items:flex-start;gap:18px;}

/* Borrar (X): mismo pulsador de la librería, pequeño, con la X roja encima */
.row-remove-btn,.placed-icon-remove,.riser-remove,.logo-remove{
  width:24px;height:24px;padding:0;border:0;border-radius:50%;
  background:var(--p440-btn-red) center top/100% 200% no-repeat;box-shadow:none;
  color:#fff;font:900 12px/1 Arial,sans-serif;text-shadow:0 0 3px #000;display:flex;align-items:center;justify-content:center;
}
.row-remove-btn:hover,.placed-icon-remove:hover,.riser-remove:hover,.logo-remove:hover{background-color:transparent;filter:brightness(1.15);color:#fff;}
.row-remove-btn:active,.placed-icon-remove:active,.riser-remove:active,.logo-remove:active{background-position:center bottom;}

/* Orden de canales */
td.col-num{padding:0 2px;white-space:nowrap;}
.row-order{display:flex;align-items:center;justify-content:center;gap:3px;}
.row-number{min-width:2ch;text-align:center;color:#72c8f8;font-weight:800;}
.row-handle{
  width:14px;height:24px;padding:0;border:0;background:transparent;cursor:grab;touch-action:none;
  background-image:radial-gradient(circle,#7f98aa 1.2px,transparent 1.6px);background-size:6px 6px;background-position:center;
}
.row-handle:active{cursor:grabbing;}
.row-arrows{display:flex;flex-direction:column;gap:1px;}
.row-arrow{width:16px;height:12px;padding:0;border:0;background:transparent;color:#8ea8b9;font-size:8px;line-height:12px;cursor:pointer;}
.row-arrow:hover:not(:disabled){color:#e7c98a;}
.row-arrow:disabled{opacity:.25;cursor:default;}
tr.row-dragging{opacity:.55;}
tr.row-drop-target td{box-shadow:inset 0 2px 0 #e7c98a;}

@media print{
  .placed-icon-label,.placed-icon.has-art .placed-icon-label,.placed-icon:hover .placed-icon-label{
    border:0!important;background:transparent!important;box-shadow:none!important;color:#000!important;text-shadow:none!important;
  }
  .row-handle,.row-arrows{display:none!important;}
  .row-number{color:#000!important;}
}
@media print{
  /* PDF limpio: sin cajas de campo, sin textos de ejemplo */
  td input[type="text"],.field input[type="text"],.field input[type="date"],.notes-box{
    border:0!important;box-shadow:none!important;background:transparent!important;
  }
  input::placeholder,textarea::placeholder{color:transparent!important;}
  .logo-upload{border:0!important;}
  /* Marca de agua: logo oficial PNG transparente (el JPG anterior salía como un bloque gris) */
  .watermark img{content:url("/shared/design-system/banner/v1/assets/logo-paez440pro-metallic.png");filter:grayscale(1);}
  .watermark{opacity:.08!important;}
}

/* standalone-web-v2.css (otro frente, 30-sep) pone el pulsador a la IZQUIERDA del texto.
   La librería (docs/PAEZ440PRO_UI_CONTROL_LIBRARY.md, Button Package 07) dice: gráfico arriba,
   label abajo, centrado → en StagePlot manda la librería. Las pestañas quedan como las dejó ese CSS. */
html body[data-single-tool="stage-plot"] .stagePlotFrame .btn{
  display:inline-flex!important;flex-direction:column!important;align-items:center!important;gap:5px!important;
  padding:0 2px!important;min-height:0!important;text-transform:uppercase!important;
}
html body[data-single-tool="stage-plot"] .stagePlotFrame .btn::before{
  position:static!important;transform:none!important;width:42px!important;height:42px!important;aspect-ratio:auto!important;
  background:var(--p440-btn-gray) center top/100% 200% no-repeat!important;
}
html body[data-single-tool="stage-plot"] .stagePlotFrame .btn.btn-green::before{background-image:var(--p440-btn-green)!important;}
html body[data-single-tool="stage-plot"] .stagePlotFrame .btn.btn-red::before{background-image:var(--p440-btn-red)!important;}
html body[data-single-tool="stage-plot"] .stagePlotFrame .project-row .btn::before{width:32px!important;height:32px!important;}
html body[data-single-tool="stage-plot"] .stagePlotFrame .btn:active::before{transform:none!important;background-position:center bottom!important;}