/* Consola de estudio: barra superior, panel de control a la izquierda, escenario de lectura a la derecha.
   Tema oscuro único a propósito (cabina de grabación). */
:root{
  --ink-0:#0c0e11; --ink-1:#14181e; --ink-2:#1c2129; --ink-3:#262c36; --line:#2c333e;
  --fg:#e7eaef; --mute:#8a93a1; --tally:#ff3b30; --cue:#ffb020; --ok:#34c759;
  --f-ui:"Archivo","Segoe UI",system-ui,sans-serif;
  --f-read:"Atkinson Hyperlegible","Verdana","Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"Consolas",monospace;
  --p-bg:#0b0c0e; --p-fg:#f2f4f7; --p-em:#ffc53d; --p-note:#7d8796; --p-shadow:none;
  --p-size:64px; --p-lh:1.45; --p-width:80%; --g-vis:35%;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:var(--ink-0);color:var(--fg);font-family:var(--f-ui);font-size:14px;overflow:hidden;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
button,input,select,textarea{font:inherit;color:inherit}
code{font-family:var(--f-mono);font-size:.92em}
:focus-visible{outline:2px solid var(--cue);outline-offset:2px}

.app{height:100%;display:grid;grid-template-columns:minmax(300px,360px) 1fr;grid-template-rows:auto 1fr}
.app.no-panel{grid-template-columns:0 1fr}
.app.no-panel .panel{display:none}

/* ---------- Barra superior ---------- */
.bar{grid-column:1/-1;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding-block:8px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  background:var(--ink-1);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.02em;margin-right:auto}
.brand .lens{width:22px;height:22px;border-radius:50%;border:2px solid var(--fg);display:grid;place-items:center}
.brand .lens::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--cue)}
.brand small{font-weight:500;color:var(--mute);letter-spacing:.08em;text-transform:uppercase;font-size:11px}
.tc{font-family:var(--f-mono);font-variant-numeric:tabular-nums;display:flex;gap:14px;align-items:baseline;font-size:15px}
.tc span{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1}
.tc label{font-family:var(--f-ui);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.tally{display:flex;gap:6px}
.chip{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;padding:4px 8px;border-radius:4px;border:1px solid var(--line);color:var(--mute);background:var(--ink-2)}
.chip.on.rec{background:var(--tally);border-color:var(--tally);color:#fff;animation:blink 1.2s steps(2) infinite}
.chip.on.live{background:#c81e5b;border-color:#c81e5b;color:#fff}
.chip.on.obs{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,var(--line))}
.chip.wait.obs{color:var(--cue)}
@keyframes blink{50%{opacity:.55}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 12px;border-radius:6px;border:1px solid var(--line);background:var(--ink-2);cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--ink-3)}
.btn.primary{background:var(--cue);border-color:var(--cue);color:#1a1200;font-weight:700}
.btn.primary:hover{filter:brightness(1.08)}
.btn.danger{border-color:color-mix(in srgb,var(--tally) 60%,var(--line));color:#ff8a82}
.btn.sm{padding:5px 9px;font-size:12px}
.btn[aria-pressed="true"]{border-color:var(--cue);color:var(--cue)}

/* ---------- Panel ---------- */
.panel{background:var(--ink-1);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;min-width:0}
.tabs{display:flex;border-bottom:1px solid var(--line)}
.tabs button{flex:1;padding:11px 8px;background:none;border:0;border-bottom:2px solid transparent;color:var(--mute);cursor:pointer;font-weight:600;letter-spacing:.04em}
.tabs button[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--cue)}
.tabpane{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:16px;min-height:0}
.group{display:flex;flex-direction:column;gap:10px}
.group h3{margin:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:600}
.row{display:grid;grid-template-columns:96px 1fr 52px;align-items:center;gap:10px}
.row label{color:var(--mute);font-size:13px}
.row output{font-family:var(--f-mono);font-size:12px;text-align:right;font-variant-numeric:tabular-nums}
input[type=range]{width:100%;accent-color:var(--cue)}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.check{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.check input{accent-color:var(--cue);width:16px;height:16px;flex:none}
select,.field{background:var(--ink-2);border:1px solid var(--line);border-radius:6px;padding:7px 9px;width:100%;min-width:0}
.fields{display:grid;grid-template-columns:1fr 90px;gap:8px}
.lib{display:grid;grid-template-columns:1fr auto auto;gap:6px}
textarea#script{flex:1;min-height:240px;resize:vertical;background:var(--ink-0);border:1px solid var(--line);border-radius:8px;padding:12px;
  font-family:var(--f-read);font-size:15px;line-height:1.55;color:var(--fg)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat{background:var(--ink-2);border:1px solid var(--line);border-radius:6px;padding:8px 10px}
.stat b{display:block;font-family:var(--f-mono);font-size:16px;font-variant-numeric:tabular-nums}
.stat small{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.syntax{font-size:12px;color:var(--mute);line-height:1.6;background:var(--ink-2);border-radius:6px;padding:10px 12px;border:1px dashed var(--line)}
.syntax code{color:var(--fg);font-size:11.5px}
.sections{display:flex;flex-direction:column;gap:4px}
.sections button{text-align:left;background:none;border:1px solid transparent;border-radius:5px;padding:6px 8px;cursor:pointer;color:var(--fg);display:flex;gap:8px}
.sections button:hover{background:var(--ink-2);border-color:var(--line)}
.sections button i{font-style:normal;color:var(--cue);font-family:var(--f-mono);font-size:12px;min-width:2ch}
.sections button.cur{border-color:var(--cue)}
.note-box{font-size:12.5px;line-height:1.55;color:var(--mute)}
.note-box b{color:var(--fg)}
.note-box ol{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.note-box p{margin:8px 0 0}
.urlbox{display:flex;gap:6px}
.urlbox input{flex:1;min-width:0;font-family:var(--f-mono);font-size:11.5px}
.status{font-size:12.5px;line-height:1.5;padding:8px 10px;border-radius:6px;background:var(--ink-2);border:1px solid var(--line)}
.status.ok{border-color:color-mix(in srgb,var(--ok) 50%,var(--line));color:var(--ok)}
.status.err{border-color:color-mix(in srgb,var(--tally) 50%,var(--line));color:#ff8a82}
.status.wait{border-color:color-mix(in srgb,var(--cue) 50%,var(--line));color:var(--cue)}
.btnrow{display:flex;gap:8px;flex-wrap:wrap}
.ver{font-size:11px;color:var(--mute);text-align:center;padding-block:8px}

/* ---------- Escenario ---------- */
.stage{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--ink-0)}
.viewport{position:relative;flex:1;overflow:hidden;background:var(--p-bg);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.viewport.dim{-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.32) 0,rgba(0,0,0,.32) calc(var(--g-vis) - 2.6em),#000 calc(var(--g-vis) - .9em),#000 calc(var(--g-vis) + 3.2em),rgba(0,0,0,.4) calc(var(--g-vis) + 7em),rgba(0,0,0,.32) 100%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.32) 0,rgba(0,0,0,.32) calc(var(--g-vis) - 2.6em),#000 calc(var(--g-vis) - .9em),#000 calc(var(--g-vis) + 3.2em),rgba(0,0,0,.4) calc(var(--g-vis) + 7em),rgba(0,0,0,.32) 100%)}
.viewport .mirror{position:absolute;inset:0;font-size:var(--p-size)}
.content{position:absolute;left:0;right:0;top:0;margin:0 auto;width:var(--p-width);will-change:transform;
  font-family:var(--f-read);font-size:var(--p-size);line-height:var(--p-lh);color:var(--p-fg);text-shadow:var(--p-shadow);font-weight:700;overflow-wrap:break-word}
.content.upper{text-transform:uppercase}
.content p{margin:0 0 .7em}
.content .sec{font-family:var(--f-ui);font-size:.42em;letter-spacing:.16em;text-transform:uppercase;color:var(--p-note);margin:1.2em 0 .6em;font-weight:600;display:flex;align-items:center;gap:.6em}
.content .sec::after{content:"";flex:1;height:2px;background:currentColor;opacity:.35}
.content .em{font-style:normal;color:var(--p-em)}
.content .note{font-weight:400;font-style:italic;color:var(--p-note);font-size:.62em}
.content .cue{font-family:var(--f-ui);font-weight:600;font-size:.45em;letter-spacing:.08em;text-transform:uppercase;vertical-align:.25em;
  border:2px solid var(--p-em);color:var(--p-em);border-radius:.3em;padding:.05em .45em;white-space:nowrap}
.content .pause{font-family:var(--f-ui);font-size:.42em;letter-spacing:.2em;font-weight:700;color:var(--p-em);margin:.4em 0 1em;display:flex;align-items:center;gap:.6em}
.content .pause::before{content:"";width:.9em;height:.9em;background:var(--p-em);border-radius:2px}
.content .end{font-family:var(--f-ui);font-size:.42em;letter-spacing:.3em;color:var(--p-note);text-align:center;margin-top:1.5em}
.content .empty{font-family:var(--f-ui);font-size:.4em;color:var(--p-note);font-weight:500}

.guide{position:absolute;left:0;right:0;top:var(--g-vis);height:0;pointer-events:none;z-index:2}
.guide::before,.guide::after{content:"";position:absolute;top:-14px;border:14px solid transparent}
.guide::before{left:0;border-left:22px solid var(--cue)}
.guide::after{right:0;border-right:22px solid var(--cue)}
.guide span{position:absolute;left:28px;right:28px;top:-1px;border-top:2px dashed color-mix(in srgb,var(--cue) 45%,transparent)}

.countdown{position:absolute;inset:0;display:grid;place-items:center;z-index:5;pointer-events:none}
.countdown b{font-family:var(--f-mono);font-size:min(38vh,30vw);color:var(--cue);text-shadow:0 0 40px rgba(0,0,0,.6);line-height:1}
.paused-flag{position:absolute;top:12px;right:14px;z-index:4;font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;
  padding:5px 9px;border-radius:4px;background:rgba(0,0,0,.55);color:#fff;pointer-events:none}
.progress{height:4px;background:var(--ink-2)}
.progress span{display:block;height:100%;width:0;background:var(--cue)}

.transport{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  padding-block:10px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  background:var(--ink-1);border-top:1px solid var(--line)}
.transport .cluster{display:flex;align-items:center;gap:6px;background:var(--ink-2);border:1px solid var(--line);border-radius:8px;padding:4px}
.transport .cluster .btn{border:0;background:none;padding:6px 10px}
.transport .cluster .btn:hover{background:var(--ink-3)}
.transport .val{font-family:var(--f-mono);font-size:13px;min-width:7ch;text-align:center;font-variant-numeric:tabular-nums;line-height:1.1}
.transport .val small{display:block;font-family:var(--f-ui);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.play{width:54px;height:54px;border-radius:50%;border:0;background:var(--cue);color:#1a1200;cursor:pointer;display:grid;place-items:center}
.play.on{background:var(--fg)}
.play svg{width:22px;height:22px}
.ico{width:16px;height:16px;fill:currentColor}

/* ---------- Ayuda y avisos ---------- */
.overlay{position:fixed;inset:0;background:rgba(5,6,8,.7);display:grid;place-items:center;z-index:50;padding:16px}
.dialog{background:var(--ink-1);border:1px solid var(--line);border-radius:10px;max-width:640px;width:100%;max-height:85vh;overflow:auto;padding:20px 22px}
.dialog h2{margin:0 0 14px;font-size:18px}
.keys{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:13.5px}
kbd{font-family:var(--f-mono);font-size:12px;background:var(--ink-3);border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:2px 6px;white-space:nowrap}
.toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink-3);border:1px solid var(--line);padding:9px 14px;border-radius:6px;z-index:60;font-size:13px;max-width:calc(100% - 32px)}

/* ---------- Salida limpia (#salida) para OBS / segunda pantalla ---------- */
html.salida .bar,html.salida .panel,html.salida .transport,html.salida .progress,html.salida .toast{display:none!important}
html.salida .app{grid-template-columns:1fr;grid-template-rows:1fr}
html.salida body,html.salida .stage{background:var(--p-bg);padding:0}
html.salida .viewport{cursor:none}

@media (max-width:860px){
  body{overflow:auto}
  .app,.app.no-panel{grid-template-columns:1fr;grid-template-rows:auto 62vh auto;height:auto;min-height:100%}
  .stage{grid-row:2}
  .panel{grid-row:3;border-right:0;border-top:1px solid var(--line)}
  .app.no-panel .panel{display:flex}
  .tabpane{overflow:visible}
  .tc{order:3;width:100%;justify-content:space-between}
}
@media (prefers-reduced-motion:reduce){.chip.on.rec{animation:none}}

/* ================= TomaYa v2 ================= */
.word{font-family:var(--f-ui);font-weight:800;letter-spacing:-.01em;font-size:17px}
.word b{color:var(--cue);font-weight:800}
.pro-badge{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;padding:3px 6px;border-radius:4px;background:var(--cue);color:#1a1200;font-weight:700}
.pro-tag{font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;padding:1px 5px;border-radius:3px;border:1px solid var(--cue);color:var(--cue);vertical-align:1px;font-weight:600}
html.is-pro .pro-tag{display:none}
.lang{width:auto;padding:6px 8px;font-size:12.5px}
.chip.on.mic{background:#2f6fed;border-color:#2f6fed;color:#fff}
.chip.rmt.on{border-color:var(--ok);color:var(--ok)}
.tabs button{padding:11px 4px;font-size:13px}
.btnrow.end{justify-content:flex-end;margin-top:10px}
.mt{margin:18px 0 8px;font-size:13px;color:var(--mute);font-weight:600}
.fields.wide{grid-template-columns:1fr auto}
.mono{font-family:var(--f-mono);font-size:12px}
.dialog.narrow{max-width:460px}
.cue-warn{font-size:12.5px;line-height:1.5;color:#ffcf7a;background:color-mix(in srgb,var(--cue) 10%,var(--ink-2));border:1px solid color-mix(in srgb,var(--cue) 40%,var(--line));border-radius:6px;padding:8px 10px}

/* marcas de OBS en el texto */
.content .cue.obs{border-style:dashed;opacity:.85}
.content .cue.obs::before{content:attr(data-ico);margin-right:.35em}
.content .cue.bad{border-color:#ff6b61;color:#ff6b61}
.content .cue.done{opacity:.35}
.content .ln{display:block}
.content .ln.vhere{text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--p-em) 60%,transparent);text-decoration-thickness:.06em;text-underline-offset:.18em}
.cue-flash{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:6;background:rgba(0,0,0,.7);color:#fff;font-family:var(--f-mono);font-size:13px;padding:6px 12px;border-radius:6px;pointer-events:none;white-space:nowrap;max-width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis}
html.salida .cue-flash{display:none!important}

/* tomas */
.takes{display:flex;flex-direction:column;gap:8px}
.take{background:var(--ink-2);border:1px solid var(--line);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.take-head{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.take-head b{font-size:13.5px}
.take-head span{font-family:var(--f-mono);font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums}
.take-path{font-family:var(--f-mono);font-size:11px;color:var(--mute);overflow-wrap:anywhere}
.take .btnrow{gap:6px}
.empty-note{font-size:12.5px;color:var(--mute);padding:10px;border:1px dashed var(--line);border-radius:6px}

/* diálogo Pro */
.pro-why{margin:0 0 10px;color:var(--cue);font-weight:600}
.pro-list{margin:0 0 12px;padding-left:18px;display:flex;flex-direction:column;gap:5px;font-size:13.5px;line-height:1.45}
.pro-price{margin:0 0 12px;font-size:14px}
.pro-price s{color:var(--mute)}
.pro-price b{color:var(--cue);font-size:18px}
a.btn{text-decoration:none}

/* QR */
.qr{display:grid;place-items:center;background:#fff;border-radius:8px;padding:14px;margin:12px auto;width:min(260px,100%);aspect-ratio:1}
.qr img,.qr canvas,.qr svg{width:100%;height:auto;image-rendering:pixelated}

/* ===== Vista remota (celular) ===== */
html.remote .app{display:none}
.remote{min-height:100%;display:flex;flex-direction:column;gap:14px;
  padding-block:16px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  max-width:520px;margin:0 auto}
html.remote body{overflow:auto}
.r-head{display:flex;justify-content:space-between;align-items:center}
.r-title{font-size:15px;font-weight:600;min-height:1.3em}
.r-prog{height:6px;background:var(--ink-2);border-radius:3px;overflow:hidden}
.r-prog span{display:block;height:100%;width:0;background:var(--cue)}
.r-sec{font-family:var(--f-mono);font-size:12.5px;color:var(--mute);min-height:1.3em}
.r-play{align-self:center;width:min(46vw,190px);aspect-ratio:1;border-radius:50%;border:0;background:var(--cue);color:#1a1200;display:grid;place-items:center;cursor:pointer;margin-block:6px}
.r-play.on{background:var(--fg)}
.r-play svg{width:38%;height:38%}
.r-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.r-btn{padding:16px 10px;border-radius:10px;border:1px solid var(--line);background:var(--ink-2);font-size:15px;font-weight:600;cursor:pointer;touch-action:manipulation}
.r-btn:active{background:var(--ink-3)}
.r-btn.wide{grid-column:span 1}
.r-btn.rec{color:#ff8a82;border-color:color-mix(in srgb,var(--tally) 50%,var(--line))}
.r-speed{text-align:center;color:var(--mute);font-size:13px}
.r-speed b{font-family:var(--f-mono);color:var(--fg)}