/* ============ VumiAir · Playout (manual de marca Vumi) ============ */
:root{
  --ink:#0E1116; --surface:#171B22; --surface-2:#1E232C; --line:#2A303A;
  --text:#F2F4F7; --muted:#8B93A1;
  --signal:#2EE59D; --peak:#FFB020; --clip:#FF4D4F; --info:#5B8CFF;
  --on-signal:#0E1116;
  --r:12px;
  --hdr:52px;
  --display:"Space Grotesk",system-ui,sans-serif;
  --body:"Inter",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{min-height:100%}
body{
  margin:0;background:var(--ink);color:var(--text);
  font:12.5px/1.45 var(--body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;overflow-y:auto;
}
button{font:inherit;color:inherit}
input{font:inherit}
svg{display:block}
.ic{width:14px;height:14px;flex:none}
.ic.big{width:16px;height:16px;color:var(--signal)}
.empty{color:var(--muted);text-align:center;padding:22px 12px;font-size:11.5px;line-height:1.7}
.empty b{color:var(--signal);font-weight:600}

@keyframes blink{50%{opacity:.55}}
@keyframes blinkRed{0%,100%{opacity:1}50%{opacity:.22}}
@keyframes glowPulse{
  0%,100%{box-shadow:0 0 0 1px rgba(46,229,157,.35),0 0 16px rgba(46,229,157,.16)}
  50%{box-shadow:0 0 0 1px rgba(46,229,157,.75),0 0 30px rgba(46,229,157,.35)}
}

/* ---------- botones icono ---------- */
.ibtn{
  width:28px;height:28px;display:grid;place-items:center;padding:0;
  background:var(--surface-2);border:1px solid var(--line);border-radius:8px;
  color:var(--text);cursor:pointer;transition:.15s;
}
.ibtn svg{width:15px;height:15px}
.ibtn:hover{border-color:var(--signal);color:var(--signal)}
.ibtn:active{transform:translateY(1px)}
.ibtn.accent{background:var(--signal);border-color:transparent;color:var(--on-signal)}
.ibtn.accent:hover{filter:brightness(1.08);color:var(--on-signal)}
.ibtn.danger:hover{border-color:var(--clip);color:var(--clip)}
.ibtn.big{width:34px;height:34px;border-radius:10px}
.ibtn.big svg{width:17px;height:17px}
.ibtn.stop{border-color:var(--line)}
.ibtn.stop.armed{background:var(--clip);border-color:transparent;color:#fff;box-shadow:0 0 10px rgba(255,77,79,.5);animation:blink 1s steps(2) infinite}
.ibtn.on{background:color-mix(in srgb,var(--signal) 22%,var(--surface-2));border-color:var(--signal);color:var(--signal);box-shadow:0 0 10px rgba(46,229,157,.28)}

input[type=range]{accent-color:var(--signal)}

/* ---------- cabecera delgada ---------- */
.topbar{
  display:flex;align-items:center;gap:14px;
  height:var(--hdr);padding:0 14px;
  background:var(--surface);border-bottom:1px solid var(--line);
  position:relative;z-index:5;
}
.brand{display:flex;align-items:center;gap:7px;flex:none}
.brand-iso{width:20px;height:20px}
.brand-name{font:700 14px var(--display);letter-spacing:-.02em}

.pill{
  display:inline-flex;align-items:center;gap:6px;
  font:600 9px var(--body);letter-spacing:.08em;text-transform:uppercase;
  padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted);
}
.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.pill.air{
  color:var(--signal);
  border-color:color-mix(in srgb,var(--signal) 40%,transparent);
  background:color-mix(in srgb,var(--signal) 12%,transparent);
}
.pill.air::before{animation:blink 1.1s steps(2) infinite}
.pill.stopped{
  color:var(--peak);
  border-color:color-mix(in srgb,var(--peak) 40%,transparent);
  background:color-mix(in srgb,var(--peak) 10%,transparent);
}

/* sonando / siguiente */
.onair{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.oa-item{display:flex;flex-direction:column;min-width:0;max-width:34ch;gap:1px}
.oa-label{font:500 8px var(--mono);letter-spacing:.18em;color:var(--muted)}
.oa-name{font:600 11.5px var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.oa-name.next{color:var(--peak);font-weight:500}
.oa-sep{width:1px;height:26px;background:var(--line);flex:none}

/* el tema sonando, más vistoso */
.oa-item.now .oa-label{color:var(--signal);letter-spacing:.22em}
.oa-item.now .oa-name{
  font:700 17px var(--display);letter-spacing:-.01em;color:var(--signal);
  text-shadow:0 0 16px rgba(46,229,157,.5);
}
.oa-item.now .oa-name.near{color:var(--clip);text-shadow:0 0 16px rgba(255,77,79,.6);animation:blinkRed .8s steps(2) infinite}

.top-right{display:flex;align-items:center;gap:12px;flex:none}
.clock{font:600 14px var(--mono);color:var(--muted);letter-spacing:.04em}
.vol{display:flex;align-items:center;gap:6px;color:var(--muted)}
.vol input{width:76px;height:3px}
.vol span{font:500 9.5px var(--mono);color:var(--text);width:36px;text-align:right}

/* ---------- layout: pantalla principal + scroll al EQ ---------- */
.grid{
  display:grid;
  grid-template-columns:minmax(250px,0.92fr) minmax(330px,1.3fr) minmax(280px,1fr);
  gap:12px;padding:12px;
  height:calc(100vh - var(--hdr));
}
.panel{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden;
}
.panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 11px;border-bottom:1px solid var(--line);
}
.panel-head h2{
  margin:0;font:500 10px var(--mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);
}
.head-note{color:#5a6675;letter-spacing:.04em;text-transform:none}
.panel-actions{display:flex;align-items:center;gap:6px}
.badge{
  background:var(--surface-2);border:1px solid var(--line);border-radius:999px;
  padding:1px 8px;font:500 10px var(--mono);color:var(--signal);
}
.panel-foot{
  display:flex;align-items:center;gap:7px;padding:8px 10px;
  border-top:1px solid var(--line);background:var(--ink);
}
.panel-foot.small{font:500 10px var(--mono);color:var(--muted)}
.foot-label{font:500 9px var(--mono);letter-spacing:.14em;color:var(--muted)}

/* ---------- playlist ---------- */
.playlist{flex:1;overflow-y:auto;padding:7px}
.playlist.drop-hint{outline:2px dashed var(--signal);outline-offset:-6px;background:color-mix(in srgb,var(--signal) 6%,transparent)}
.pl-row{
  display:grid;grid-template-columns:14px 22px 1fr auto;align-items:center;gap:7px;
  padding:5px 6px;border:1px solid transparent;border-radius:8px;
  background:var(--surface-2);margin-bottom:5px;cursor:grab;
  transition:border-color .15s,background .15s,box-shadow .2s;
}
.pl-row:hover{border-color:var(--line)}
.pl-row.dragging{opacity:.4}
.pl-row.drag-over{border-color:var(--signal);border-style:dashed}
.pl-row.nextup{border-color:color-mix(in srgb,var(--peak) 50%,transparent);background:color-mix(in srgb,var(--peak) 8%,var(--surface-2))}
/* tema sonando en la playlist: más vistoso */
.pl-row.current{
  border-color:var(--signal);
  background:linear-gradient(90deg,color-mix(in srgb,var(--signal) 18%,var(--surface-2)),color-mix(in srgb,var(--signal) 4%,var(--surface-2)));
  animation:glowPulse 1.7s ease-in-out infinite;
}
.pl-row.current .pl-name{color:#eafff6;font-weight:700;font-size:12.5px}
.pl-row.current .pl-idx{color:var(--signal);font-weight:700}
.pl-row.current .pl-sub{color:color-mix(in srgb,var(--signal) 70%,var(--muted))}
.pl-grip{width:12px;height:12px;color:#4a5666}
.pl-idx{font:500 10px var(--mono);color:var(--muted);text-align:right}
.pl-meta{min-width:0}
.pl-name{font:600 12px var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-sub{font:500 9.5px var(--mono);color:var(--muted);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-actions{display:flex;gap:3px}
.pl-actions .ibtn,.db-actions .ibtn{width:23px;height:23px;border-radius:6px}
.pl-actions .ibtn svg,.db-actions .ibtn svg{width:12px;height:12px}

/* ---------- playout centro ---------- */
.stage{
  position:relative;aspect-ratio:16/9;background:var(--ink);
  border-bottom:1px solid var(--line);overflow:hidden;min-height:150px;
}
.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--ink);visibility:hidden}
.stage[data-kind="video"] video.visible{visibility:visible}
.stage-empty{
  position:absolute;inset:0;display:grid;place-items:center;
  font:500 11px var(--mono);letter-spacing:.4em;color:#333c4a;
  background:repeating-linear-gradient(45deg,#0E1116 0 10px,#12161d 10px 20px);
}
.stage[data-kind="audio"] .stage-empty,.stage[data-kind="video"] .stage-empty{display:none}

.audio-card{
  position:absolute;inset:0;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;padding:16px;
  background:
    radial-gradient(60% 80% at 80% 100%,color-mix(in srgb,var(--signal) 16%,transparent),transparent),
    var(--ink);
}
.stage[data-kind="audio"] .audio-card{display:flex}
.audio-name{text-align:center;font:600 13px var(--body);color:var(--text);word-break:break-all;max-width:92%}
.eq-bars{display:flex;align-items:flex-end;gap:4px;height:52px}
.eq-bars i{width:6px;border-radius:3px;background:var(--signal);height:10px;animation:eqp 1s ease-in-out infinite}
.eq-bars i:nth-child(2n){animation-duration:.72s}
.eq-bars i:nth-child(3n){animation-duration:1.28s}
.eq-bars i:nth-child(4n){animation-delay:.18s}
.eq-bars i:nth-child(5n){animation-delay:.42s}
.eq-bars i:nth-child(8),.eq-bars i:nth-child(9){background:var(--peak)}
@keyframes eqp{0%,100%{height:8px}50%{height:48px}}
body:not(.is-playing) .eq-bars i{animation-play-state:paused;height:8px}

/* barra interior que DISMINUYE con el tiempo restante */
.stage-remain{
  position:absolute;left:0;right:0;top:0;height:7px;z-index:4;
  background:rgba(14,17,22,.75);border-bottom:1px solid rgba(42,48,58,.9);
}
.stage-remain-fill{
  height:100%;width:0%;background:linear-gradient(90deg,var(--signal),color-mix(in srgb,var(--signal) 55%,var(--peak)));
  transition:width .2s linear;box-shadow:0 0 8px rgba(46,229,157,.45);
}
.stage-remain.danger .stage-remain-fill{
  background:var(--clip);
  box-shadow:0 0 10px rgba(255,77,79,.6);
  animation:blinkRed .8s steps(2) infinite;
}

.stage-tools{position:absolute;top:12px;right:8px;display:flex;gap:6px;z-index:3}
.stage-tools .ibtn{background:rgba(14,17,22,.72);backdrop-filter:blur(4px)}

.now{padding:9px 11px 7px}
.now-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.now-name{font:600 12.5px var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.now-tags{display:flex;gap:5px;flex:none}
.tag{
  font:500 9px var(--mono);letter-spacing:.1em;border:1px solid var(--line);
  border-radius:5px;padding:1.5px 6px;color:var(--signal);
}
.tag.ghost{color:var(--muted)}

.progress{
  position:relative;height:13px;margin:8px 0 7px;border-radius:5px;cursor:pointer;
  background:var(--ink);border:1px solid var(--line);overflow:hidden;
}
.progress-bar{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--signal);opacity:.85;transition:width .1s linear}
.progress-head{position:absolute;top:0;bottom:0;width:2px;background:#fff;left:0;transition:left .1s linear}

.times{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.time{background:var(--ink);border:1px solid var(--line);border-radius:8px;padding:5px 6px;text-align:center}
.tlabel{display:block;font:500 8px var(--mono);letter-spacing:.18em;color:var(--muted)}
.tval{display:block;font:600 20px var(--mono);line-height:1.3;color:var(--signal)}
.tval.rest{color:var(--peak)}
.tval.dim{color:var(--muted);font-weight:500}
/* menos de 15 s: titila en rojo */
.tval.danger{color:var(--clip);border-color:color-mix(in srgb,var(--clip) 55%,transparent);animation:blinkRed .8s steps(2) infinite}

/* medidores led compactos */
.meters{padding:5px 11px;background:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#metersCanvas{display:block;width:100%;height:42px}

.transport{display:flex;align-items:center;gap:14px;padding:8px 11px;flex-wrap:wrap}
.fade-ctrl{display:flex;align-items:center;gap:7px;font:500 9px var(--mono);letter-spacing:.14em;color:var(--muted)}
.fade-ctrl input{width:96px;height:3px}
#fadeValue{font:500 10px var(--mono);color:var(--signal);width:44px}
.chk{display:flex;align-items:center;gap:6px;font:500 11px var(--body);color:var(--muted);cursor:pointer}
.chk input{accent-color:var(--signal)}
.chk .ic{color:var(--muted)}
.eq-link{
  display:inline-flex;align-items:center;gap:5px;text-decoration:none;
  font:500 9.5px var(--mono);letter-spacing:.1em;color:var(--signal);
  border:1px solid color-mix(in srgb,var(--signal) 35%,transparent);
  border-radius:7px;padding:3px 8px;transition:.15s;
}
.eq-link:hover{background:color-mix(in srgb,var(--signal) 12%,transparent);border-color:var(--signal)}
.eq-link.up{color:var(--muted);border-color:var(--line)}
.eq-link.up:hover{color:var(--signal);border-color:var(--signal)}
.hint{margin-left:auto;font:500 9.5px var(--mono);color:#5a6675;letter-spacing:.05em}

/* ---------- base de datos ---------- */
.tabs{display:flex;gap:3px;padding:5px 7px 0;border-bottom:1px solid var(--line);background:var(--ink)}
.tab{
  flex:1;padding:6px 3px 5px;background:transparent;border:0;border-bottom:2px solid transparent;
  color:var(--muted);font:500 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;display:flex;justify-content:center;align-items:center;gap:5px;transition:.15s;
}
.tab:hover{color:var(--text)}
.tab.active{color:var(--signal);border-bottom-color:var(--signal)}
.tab-n{
  background:var(--surface-2);border:1px solid var(--line);border-radius:999px;
  padding:0 5px;font-size:9px;color:var(--muted);letter-spacing:0;
}
.tab.active .tab-n{color:var(--signal);border-color:color-mix(in srgb,var(--signal) 40%,transparent)}

.db-tools{display:flex;align-items:center;gap:7px;padding:8px 10px;color:var(--muted)}
#dbSearch{
  flex:1;min-width:0;background:var(--ink);border:1px solid var(--line);
  border-radius:8px;padding:6px 9px;color:var(--text);font-size:12px;
}
#dbSearch::placeholder{color:#5a6675}
#dbSearch:focus{outline:none;border-color:var(--signal)}
.filebtn input,.ibtn input{position:absolute;inset:0;opacity:0;cursor:pointer}
.panel-actions .ibtn{position:relative;overflow:hidden}

.drop{
  margin:0 10px 7px;padding:10px;text-align:center;font:500 10.5px var(--body);color:var(--muted);
  border:1px dashed var(--line);border-radius:9px;background:var(--ink);transition:.15s;line-height:1.7;
}
.drop span{font:500 9px var(--mono);letter-spacing:.06em;color:#5a6675}
.drop.over{border-color:var(--signal);color:var(--signal);background:color-mix(in srgb,var(--signal) 7%,var(--ink))}

.db-list{flex:1;overflow-y:auto;padding:2px 7px 7px}
.db-row{
  display:grid;grid-template-columns:1fr auto;gap:6px;align-items:center;
  padding:5px 6px;border-bottom:1px solid var(--line);cursor:grab;
}
.db-row:hover{background:var(--surface-2)}
.db-row.dragging{opacity:.4}
.db-name{font:600 11.5px var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.db-sub{display:flex;gap:6px;align-items:center;font:500 9.5px var(--mono);color:var(--muted);letter-spacing:.03em}
.kind-pill{border:1px solid var(--line);border-radius:4px;padding:0 4px;font-size:8.5px;letter-spacing:.08em}
.kind-pill.audio{color:var(--signal);border-color:color-mix(in srgb,var(--signal) 35%,transparent)}
.kind-pill.video{color:var(--info);border-color:color-mix(in srgb,var(--info) 35%,transparent)}
.db-actions{display:flex;gap:3px}
.db-row.in-list .db-name{color:var(--signal)}

/* ---------- ecualizador 12 bandas (abajo, con scroll) ---------- */
.eq-section{
  border-top:1px solid var(--line);background:var(--surface);
  padding:16px 16px 30px;display:flex;flex-direction:column;gap:14px;
}
.eq-sec-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.eq-sec-head h2{margin:0;font:700 15px var(--display);letter-spacing:-.01em}
.eq-range{font:500 10px var(--mono);letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.eq-sec-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.eq-bands{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-start;
  background:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:14px 12px;
}
.eq-band{
  display:flex;flex-direction:column;align-items:center;gap:7px;width:52px;
  padding:10px 0 9px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;
  transition:border-color .15s;
}
.eq-band:hover{border-color:color-mix(in srgb,var(--signal) 40%,transparent)}
.eq-val{font:600 11px var(--mono);color:var(--muted);height:13px;line-height:13px}
.eq-val.on{color:var(--signal);font-weight:700}
.eq-val.neg{color:var(--info)}
.eq-slider{
  width:18px;height:104px;margin:0;cursor:pointer;
  -webkit-appearance:slider-vertical;appearance:slider-vertical;
  writing-mode:vertical-lr;direction:rtl;
  accent-color:var(--signal);
}
.eq-freq{font:600 10px var(--mono);letter-spacing:-.03em;color:var(--muted)}
.eq-note{margin:0;font:500 11px var(--body);color:var(--muted)}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:22px;transform:translate(-50%,16px);
  background:var(--surface);border:1px solid var(--signal);border-radius:10px;
  padding:8px 14px;font:500 12px var(--body);opacity:0;pointer-events:none;
  transition:.22s;z-index:50;box-shadow:0 12px 30px rgba(0,0,0,.5);max-width:80vw;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.err{border-color:var(--clip);color:#ffd9dc}

/* ---------- scrollbars ---------- */
.playlist::-webkit-scrollbar,.db-list::-webkit-scrollbar{width:8px}
.playlist::-webkit-scrollbar-thumb,.db-list::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}
.playlist::-webkit-scrollbar-track,.db-list::-webkit-scrollbar-track{background:transparent}
body::-webkit-scrollbar{width:11px}
body::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px;border:3px solid var(--ink)}
body::-webkit-scrollbar-track{background:var(--ink)}

/* ---------- responsive ---------- */
@media (max-width:1250px){
  .oa-item{max-width:22ch}
  .oa-item.now .oa-name{font-size:15px}
  .clock{font-size:13px}
}
@media (max-width:1080px){
  .grid{grid-template-columns:1fr;height:auto}
  .panel{min-height:320px}
  .topbar{flex-wrap:wrap;height:auto;padding:7px 12px}
  .onair{order:3;flex-basis:100%;padding-bottom:4px}
}