/* ============================================================
   SHOWLY · Cancionero (heredado de Tributeros)
   Repertorio, ficha de canción, acordes, setlist, modo escenario y ensayos.
   Los colores salen de las variables de styles.css: cambiando la paleta ahí,
   el cancionero se pinta en la estética de Showly sin tocar este archivo.
   ============================================================ */
body.no-scroll{overflow:hidden}
.brand-txt b{font-family:'Anton';letter-spacing:.03em;font-size:20px;color:var(--cream)}
.brand-txt i{font-family:'Anton';font-style:normal;letter-spacing:.03em;font-size:20px;color:var(--olive-lite)}
.nav a{
  font-family:'Oswald';text-transform:uppercase;font-size:13px;letter-spacing:.04em;
  color:var(--cream-dim);padding:6px 10px;border-radius:8px;
}
.nav a:hover{color:var(--cream);background:var(--panel)}
.nav a.active{color:var(--bg);background:var(--olive-lite)}
.who select{
  background:var(--panel);color:var(--cream);border:1px solid var(--line);
  border-radius:8px;padding:5px 8px;font-size:13px;
}
.adm-input{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:8px;color:var(--cream);padding:10px;font-size:15px;margin-top:6px}
.rol-badge{font-family:'Oswald';text-transform:uppercase;font-size:9px;letter-spacing:.04em;background:var(--olive-soft);color:var(--cream);border-radius:20px;padding:1px 7px;vertical-align:middle;margin-left:4px}
.logo-badge img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.07)}
.hero .logo-badge{width:min(150px,36vw);aspect-ratio:1;margin-bottom:10px}
.lock .logo-badge{width:min(200px,52vw);aspect-ratio:1;margin-bottom:12px}
.hero-emblem{
  width:70px;height:70px;margin:0 auto 8px;border-radius:50%;
  display:grid;place-items:center;font-size:30px;color:var(--olive-lite);
  border:2px solid var(--olive-soft);background:radial-gradient(circle at 50% 35%, rgba(143,174,79,.18), transparent 70%);
}
.hero-title span{color:var(--cream)}
.hero-title em{font-style:normal;color:var(--olive-lite);display:block}
.hero-meta div{display:flex;flex-direction:column;align-items:center}
.hero-meta b{font-family:'Oswald';font-size:22px;color:var(--cream)}
.hero-meta span{font-size:12px;color:var(--cream-dim);text-transform:uppercase;letter-spacing:.05em}
.card.link{transition:.15s;display:block}
.card.link:hover{border-color:var(--olive);transform:translateY(-2px)}
.card h3{font-family:'Oswald';text-transform:uppercase;letter-spacing:.03em;font-size:16px;color:var(--cream)}
.card .big{font-family:'Anton';font-size:40px;color:var(--olive-lite);margin:6px 0 0}
.card .muted{color:var(--cream-dim);font-size:13px;margin:6px 0 0}
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.center{text-align:center}
.note.bad{border-color:var(--danger);color:#e8b8ad}
code{background:#0c0f08;padding:1px 5px;border-radius:5px;font-size:.92em;color:var(--olive-lite)}
.page-head h2{font-family:'Anton';font-size:30px;letter-spacing:.02em}
.back{color:var(--cream-dim);font-size:13px;font-family:'Oswald';text-transform:uppercase}
.btn-undo{background:color-mix(in srgb,#d9a441 16%,var(--panel));color:#f0d79a;border-color:#d9a441}
.btn-undo:hover{background:color-mix(in srgb,#d9a441 28%,var(--panel))}
.btn-round{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--cream);cursor:pointer;font-size:14px;line-height:1}
.btn-round:hover{border-color:var(--olive)}
.btn-round:disabled{opacity:.3;cursor:default}
.linklike{background:none;border:none;color:var(--olive-lite);cursor:pointer;font:inherit;text-decoration:underline;padding:0}
.filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.chk{display:inline-flex;align-items:center;gap:6px;color:var(--cream-dim);font-size:13px;cursor:pointer}
.chk.disabled{opacity:.4}
.search{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:8px 12px;color:var(--cream);font-size:14px;flex:1;min-width:120px}
.song-group{margin-bottom:22px}
.group-h .count{background:var(--panel);border:1px solid var(--line);color:var(--cream-dim);border-radius:20px;font-size:11px;padding:1px 8px}
.song-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--line);border-radius:11px;margin-bottom:7px;background:var(--panel);transition:.12s}
.song-row:hover{border-color:var(--olive);background:var(--panel2)}
.song-row.row-warn{border-left:3px solid #7a5a1a}
.song-main{display:flex;flex-direction:column;gap:5px;min-width:0}
.song-title{font-family:'Oswald';font-size:16px;color:var(--cream)}
.song-tags{display:flex;gap:5px;flex-wrap:wrap}
.tag{font-size:11px;color:var(--cream-dim);background:#0e1208;border:1px solid var(--line);border-radius:6px;padding:1px 6px}
.tag-pista{color:#e0cf7a;border-color:#4a4020}
/* se ve de un vistazo qué temas tienen los tiempos grabados y cuáles no */
.tag-tiempos{color:var(--olive-lite);border-color:var(--olive-soft)}
.tag-disco{color:var(--olive-lite);border-color:var(--olive-soft);font-style:italic}
.disco-lbl{color:var(--olive-lite);font-style:italic}
.sel-disco{flex:0 1 auto;max-width:100%}
.song-chips{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;max-width:52%}
.mchip{font-size:11px;padding:2px 8px;border-radius:20px;background:color-mix(in srgb, var(--c) 22%, #0c0f08);border:1px solid var(--c);color:var(--cream);white-space:nowrap}
.mchip.coro{opacity:.8;border-style:dashed}
.mchip.hueca{background:transparent;border-style:dashed}
.mchip.vacio{--c:#4a4a3a;color:var(--cream-dim);border-color:var(--line);background:none}
.rtag{font-size:9px;text-transform:uppercase;letter-spacing:.02em;font-style:normal;margin-left:5px;padding:0 5px;border-radius:6px;background:color-mix(in srgb, var(--c) 32%, transparent);color:var(--cream)}
.song-meta-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.metric{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:8px 14px;display:flex;flex-direction:column;align-items:center;min-width:64px}
.metric b{font-family:'Oswald';font-size:18px;color:var(--cream)}
.metric i{font-style:normal;font-size:11px;color:var(--cream-dim);text-transform:uppercase;letter-spacing:.04em}
.metric.link:hover{border-color:var(--olive)}
.metric.bad b{color:#e58e7a}
.metric.good b{color:#8fce6f}
.assign-bar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:10px 14px;margin-bottom:14px}
.assign-bar .lbl{font-family:'Oswald';text-transform:uppercase;font-size:11px;color:var(--cream-dim);margin-right:6px}
.assign-bar > div{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
/* Es la acción importante de esta barra y se perdía entre los chips: va suelta
   a la derecha, en lima y con un halo que la separa del resto. */
.assign-bar .assign-cta{margin-left:auto;flex:0 0 auto;text-transform:uppercase;letter-spacing:.04em;box-shadow:0 0 0 3px color-mix(in srgb, var(--lima) 20%, transparent);transition:transform .12s ease,box-shadow .12s ease}
.assign-bar .assign-cta:hover{transform:translateY(-1px);box-shadow:0 0 0 4px color-mix(in srgb, var(--lima) 28%, transparent)}
@media (max-width:640px){
  .assign-bar .assign-cta{flex:1 0 100%;margin-left:0;justify-content:center;padding-top:9px;padding-bottom:9px}
}
.chord-controls{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:12px}
.transpose{display:flex;align-items:center;gap:9px;color:var(--cream-dim);font-size:13px;font-family:'Oswald';text-transform:uppercase}
.transpose b{color:var(--olive-lite);font-size:16px;min-width:26px;text-align:center}
.secciones{display:flex;flex-direction:column;gap:14px}
.seccion{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.sec-name{font-family:'Oswald';text-transform:uppercase;letter-spacing:.05em;font-size:12px;color:var(--olive-lite);background:var(--panel2);padding:6px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sec-singer{font-size:10px;text-transform:none;letter-spacing:0;padding:1px 8px;border-radius:20px;background:color-mix(in srgb, var(--c) 24%, #0c0f08);border:1px solid var(--c);color:var(--cream)}
.seccion.tinted{border-left-width:4px;border-left-color:var(--sc)}
.seccion.tinted .sec-name{color:var(--sc);background:color-mix(in srgb, var(--sc) 14%, var(--panel2))}
.seccion.tinted .sec-name > span:first-child{color:var(--sc);font-weight:600}
.seccion.tinted .cp-line,.seccion.tinted .cp-text{color:var(--sc)}
.seccion.tinted .cp-chord,.seccion.tinted .cp-chordline{color:#ffffff}
.sec-corist{font-size:10px;text-transform:none;letter-spacing:0;padding:1px 8px;border-radius:20px;background:transparent;border:1px dashed var(--c);color:var(--c)}
.sec-coros-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#ffffff;font-weight:700;opacity:1;margin-left:2px}
.sec-juntos{font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--cream);background:var(--olive-soft);border-radius:20px;padding:1px 8px}
.seccion{position:relative}
.seccion.duo::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--c1),var(--c2))}
.seccion.duo .sec-name{background:var(--panel2)}
.asig-partes.coro .pchip.on{background:transparent;color:var(--olive-lite);border-style:dashed;border-color:var(--olive-lite)}
.line-coro{font-size:10px;padding:1px 8px;border-radius:20px;border:1px solid var(--c,#8fae4f);background:var(--c,#8fae4f);color:#11150b;margin-left:5px;font-family:'Oswald';text-transform:uppercase;letter-spacing:.04em;font-weight:600;vertical-align:middle;line-height:1.5}
.line-coro-p{background:transparent;color:var(--c,#8fae4f)}
.line-coro-p::before{content:"‹ ";opacity:.7}
.line-coro-p::after{content:" ›";opacity:.7}
.int{font-style:normal;font-weight:600;margin-left:5px;padding:0 5px;border-radius:6px;background:color-mix(in srgb, var(--c,#8fae4f) 30%, #0c0f08);color:var(--cream);text-transform:none;letter-spacing:0;font-size:.9em}
.line-coro .int{background:rgba(0,0,0,.22);color:inherit}
.line-coro-p .int{background:color-mix(in srgb, var(--c,#8fae4f) 24%, transparent);color:var(--c,#8fae4f)}
.int-row{display:flex;align-items:center;gap:7px;margin-top:7px}
.int-row .gtr-tipo,.int-sel{background:var(--panel);border:1px solid var(--line);border-radius:7px;color:var(--cream);padding:4px 8px;font-size:12px;min-width:0}
.coro-insert #coro-int{margin-right:4px}
.line-coro-x{--c:#c0563f;border-style:dotted;background:transparent;color:#e8b8ad}
.coro-insert{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:8px 0}
.coro-insert .coro-ins{border-color:var(--c);color:var(--cream)}
.coro-insert.fija{position:sticky;top:0;z-index:6;background:var(--panel2);border:1px solid var(--olive-soft);border-radius:10px;padding:8px 10px;margin:8px 0 12px;box-shadow:0 8px 16px rgba(0,0,0,.45)}
.coro-insert.fija.stuck::before{content:"";position:absolute;left:-20px;right:-20px;top:-18px;height:18px;background:var(--bg2)}
.coro-add{border-color:var(--olive-lite);color:var(--olive-lite);font-weight:600}
.coro-add:hover{background:var(--olive-lite);color:#14180d}
.coro-fix{margin-left:auto}
.coro-fix.on{border-color:var(--olive-lite);color:var(--olive-lite)}
.esc-sec .line-coro{font-size:16px;padding:2px 12px}
.esc-sec .cp-coros{margin:4px 0 2px}
.esc-sec .cp-blk{padding-left:22px}
.esc-sec .cp-blk.cp-voz::before{left:4px;width:6px;border-radius:4px}
.sec-body{padding:12px 14px;font-family:'DejaVu Sans Mono',ui-monospace,Menlo,Consolas,monospace;font-size:15px;line-height:1.5;overflow-x:auto}
.cp-line{white-space:pre-wrap;overflow-wrap:break-word}
.cp-chordline{white-space:pre-wrap;color:#ffffff;font-weight:700}
.cp-row{display:flex;flex-wrap:wrap;align-items:flex-end}
.cp-grp{display:flex;align-items:flex-end;flex-wrap:nowrap}
.cp-cell{display:inline-flex;flex-direction:column;justify-content:flex-end}
.cp-chord{color:#ffffff;font-weight:700;height:1.2em;line-height:1.2;white-space:pre}
.cp-cell.solo .cp-chord{padding-right:.6ch}
.cp-text{white-space:pre}
.cp-empty{color:var(--cream-dim);font-family:'Inter';font-size:13px}
.cp-center{width:max-content;max-width:100%;margin:0 auto}
.align-sw{display:flex;align-items:center;gap:7px}
.align-sw .seg{padding:5px 11px;font-size:14px;line-height:1}
.cp-blk{position:relative;padding-left:14px}
.cp-blk.cp-voz::before{content:"";position:absolute;left:2px;top:1px;bottom:1px;width:4px;border-radius:3px;background:var(--vg)}
.cp-blk.cp-voz1 .cp-text,.cp-blk.cp-voz1 .cp-line,
.seccion.tinted .cp-blk.cp-voz1 .cp-text,.seccion.tinted .cp-blk.cp-voz1 .cp-line,
.esc-sec.tinted .cp-blk.cp-voz1 .cp-text,.esc-sec.tinted .cp-blk.cp-voz1 .cp-line{color:var(--vt)}
/* varias voces en la línea (coro sobre la voz principal, unísono): letra en blanco */
.cp-blk.cp-juntos .cp-text,.cp-blk.cp-juntos .cp-line,
.seccion.tinted .cp-blk.cp-juntos .cp-text,.seccion.tinted .cp-blk.cp-juntos .cp-line,
.esc-sec.tinted .cp-blk.cp-juntos .cp-text,.esc-sec.tinted .cp-blk.cp-juntos .cp-line{color:var(--coro-juntos,#ffffff)}
.cp-coros{display:flex;gap:4px;flex-wrap:wrap;align-items:center;margin:2px 0 1px}
.cp-coros .line-coro{margin-left:0}
.cp-coro{padding-bottom:1px}
.escena{position:fixed;inset:0;z-index:100;background:#0a0d07;display:flex;flex-direction:column}
/*  El tamaño de TODOS los controles del escenario sale de --esc-ui. En una
    tablet en el atril, a un metro de distancia y con las manos ocupadas, los
    botones de 34 px del escritorio son inservibles: se falla el toque. La escala
    la fija el tipo de puntero (dedo o ratón) y el ancho, y además sube con el
    tamaño de letra que elige el músico (--esc-ui-mult, lo pone js/cancionero.js):
    quien agranda la letra porque está lejos también necesita botones más grandes. */
.escena{--esc-ui-base:1;--esc-ui-mult:1;--esc-ui:calc(var(--esc-ui-base) * var(--esc-ui-mult))}
.esc-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:calc(10px * var(--esc-ui)) calc(14px * var(--esc-ui));border-bottom:1px solid var(--line);background:rgba(13,17,9,.9);flex-wrap:wrap}
.esc-title{font-family:'Oswald';font-size:calc(15px * var(--esc-ui));color:var(--cream)}
.esc-title span{color:var(--olive-lite)}
.esc-tools{display:flex;gap:calc(6px * var(--esc-ui));flex-wrap:wrap}
.esc-tools button{background:var(--panel);border:1px solid var(--line);color:var(--cream);border-radius:8px;
  padding:calc(7px * var(--esc-ui)) calc(11px * var(--esc-ui));font-family:'Oswald';font-size:calc(12px * var(--esc-ui));
  min-height:calc(32px * var(--esc-ui));text-transform:uppercase;cursor:pointer}
.esc-tools .play.on{background:var(--olive-lite);color:#14180d}
.esc-tools .exit{border-color:#5a2a20;color:#e8b8ad}
.esc-scroll{flex:1;overflow-y:auto;overflow-x:auto;padding:20px 18px 40vh;scroll-behavior:auto}
/* Cuatro líneas de aire al principio y al final de la canción (4 × line-height,
   en em para que crezcan con el tamaño de letra del atril). Arriba: la canción
   no arranca pegada al borde de arriba. Abajo: el autoscroll sigue avanzando
   después de la última línea, así que la letra final se lee a media pantalla y
   no en el filo de abajo — que es donde peor se ve desde el atril.
   `escenaRecalcVel` mide `scrollHeight` del contenido, así que este aire entra
   solo en el recorrido y en el cálculo de la velocidad. */
.esc-content{max-width:820px;margin:0 auto;font-family:'DejaVu Sans Mono',ui-monospace,monospace;line-height:1.55;overflow-wrap:break-word;
  padding-top:6.2em;padding-bottom:6.2em}
.esc-sec{margin-bottom:26px}
.esc-sec h4{font-family:'Oswald';text-transform:uppercase;color:var(--olive-lite);font-size:.6em;letter-spacing:.08em;margin-bottom:8px;opacity:.9;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.esc-sec.tinted{border-left:5px solid var(--sc);padding-left:16px}
.esc-sec.tinted h4{color:var(--sc);opacity:1}
.esc-sec.tinted .cp-line,.esc-sec.tinted .cp-text{color:var(--sc)}
.esc-sec.tinted .cp-chord,.esc-sec.tinted .cp-chordline{color:#ffffff}
.esc-sec h4 .sec-singer{font-size:20px;padding:3px 14px;border-width:2px}
.esc-sec h4 .sec-corist{font-size:18px;padding:3px 12px;border-width:2px}
.esc-sec h4 .sec-juntos{font-size:15px;padding:3px 12px}
.esc-sec h4 .sec-coros-lbl{font-size:13px}
.esc-sec.duo{border-left:5px solid transparent;padding-left:16px;position:relative}
.esc-sec.duo::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,var(--c1),var(--c2))}
/* ---------- metrónomo del escenario ---------- */
/*  Va encima de la barra de velocidad, no dentro: se abre cuando hace falta
    (cuadrar el tempo antes de entrar) y el resto del tiempo no le quita letra
    a nadie. Los botones son grandes porque esto se toca de pie y a oscuras. */
.esc-metro{position:absolute;bottom:calc(80px * var(--esc-ui) + env(safe-area-inset-bottom,0px));right:calc(30px + env(safe-area-inset-right,0px));
  z-index:111;display:flex;flex-direction:column;gap:10px;background:rgba(20,26,15,.98);border:1px solid var(--olive-soft);
  border-radius:18px;padding:12px 14px;box-shadow:var(--shadow);font-family:'Oswald';color:var(--cream);max-width:min(94vw,520px)}
.esc-metro[hidden]{display:none}
.mt-fila{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mt-b{width:calc(40px * var(--esc-ui));height:calc(40px * var(--esc-ui));border-radius:50%;border:1px solid var(--line);background:var(--panel2);color:var(--cream);
  cursor:pointer;font-size:calc(20px * var(--esc-ui));line-height:1;touch-action:manipulation}
.mt-b:active{background:var(--olive-lite);color:#14180d}
.mt-bpm{display:flex;align-items:baseline;gap:5px;min-width:104px;justify-content:center}
.mt-bpm b{font-family:'Anton';font-size:calc(30px * var(--esc-ui));color:var(--olive-lite);line-height:1}
.mt-bpm span{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--cream-dim)}
/* la luz marca los TIEMPOS del compás, no cada clic: con tresillos parpadearía
   tan rápido que no diría nada */
.mt-luz{display:flex;gap:6px;margin-left:auto}
.mt-luz i{width:13px;height:13px;border-radius:50%;background:#2a3018;display:block;transition:background .06s}
.mt-luz i.on{background:var(--cream)}
.mt-luz.acento i.on{background:var(--olive-lite);box-shadow:0 0 10px var(--olive-lite)}
.mt-sel{display:flex;flex-direction:column;gap:3px;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--cream-dim)}
.mt-sel select{background:var(--panel2);border:1px solid var(--line);color:var(--cream);border-radius:9px;
  padding:calc(8px * var(--esc-ui)) calc(10px * var(--esc-ui));font:inherit;font-size:calc(13px * var(--esc-ui))}
.mt-vol{flex:1;min-width:120px}
.mt-vol input{width:100%;accent-color:var(--olive-lite)}
.mt-acciones{border-top:1px solid var(--olive-soft);padding-top:10px}
.mt-acciones .btn.on{background:var(--olive-lite);color:#14180d}
.esc-metro .btn.sm{font-size:calc(12px * var(--esc-ui));padding:calc(6px * var(--esc-ui)) calc(11px * var(--esc-ui))}
.mt-chk{font-size:calc(11px * var(--esc-ui))}
.mt-luz i{width:calc(13px * var(--esc-ui));height:calc(13px * var(--esc-ui))}
.mt-chk{display:flex;align-items:center;gap:6px;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--cream-dim);cursor:pointer}
.esc-tools button.metro.abierto{border-color:var(--olive-lite);color:var(--olive-lite)}
.esc-tools button.metro.on{background:var(--olive-lite);color:#14180d;border-color:var(--olive-lite)}
.esc-speed{position:absolute;bottom:calc(18px + env(safe-area-inset-bottom,0px));right:calc(30px + env(safe-area-inset-right,0px));z-index:110;display:flex;align-items:center;gap:10px;background:rgba(20,26,15,.97);border:1px solid var(--olive-soft);border-radius:34px;padding:7px 12px;font-family:'Oswald';text-transform:uppercase;font-size:11px;color:var(--cream-dim);box-shadow:var(--shadow)}
.esc-speed button,.esc-tools button{touch-action:manipulation;user-select:none;-webkit-user-select:none}
.esc-speed .play{width:calc(42px * var(--esc-ui));height:calc(42px * var(--esc-ui));border-radius:50%;border:1px solid var(--olive);background:var(--panel2);color:var(--cream);cursor:pointer;font-size:calc(18px * var(--esc-ui))}
.esc-speed .play.on{background:var(--olive-lite);color:#14180d;border-color:var(--olive-lite)}
.esc-speed .spd{display:flex;align-items:center;gap:10px}
.esc-speed .spd-b{width:calc(34px * var(--esc-ui));height:calc(34px * var(--esc-ui));border-radius:50%;border:1px solid var(--line);background:var(--panel2);color:var(--cream);cursor:pointer;font-size:calc(18px * var(--esc-ui))}
.esc-speed .spd-mid{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:calc(104px * var(--esc-ui));line-height:1.15}
.esc-speed .spd-val{font-size:calc(16px * var(--esc-ui));color:var(--olive-lite);font-weight:600}
.esc-speed .spd-info{font-size:calc(10px * var(--esc-ui));letter-spacing:.06em;color:var(--cream-dim);text-transform:uppercase}
.spd-mini{width:calc(28px * var(--esc-ui));height:calc(28px * var(--esc-ui));border-radius:50%;border:1px solid var(--line);background:var(--panel2);color:var(--cream-dim);cursor:pointer;font-size:14px;line-height:1;flex-shrink:0;margin-left:2px}
.spd-mini:hover{border-color:var(--olive);color:var(--cream)}
.esc-speed.mini{gap:0;padding:5px;border-radius:50%;overflow:visible}
.esc-speed.mini .spd,.esc-speed.mini [data-a="top"]{display:none}
.esc-speed.mini .spd-mini{position:absolute;top:-7px;right:-7px;width:24px;height:24px;background:var(--panel);border-color:var(--olive-soft)}
.esc-speed.mini .play{width:46px;height:46px;font-size:19px}
.card .big.big-sm{font-size:28px}
.cron-bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:linear-gradient(90deg,color-mix(in srgb,#e05c3f 16%,var(--panel)),var(--panel));
  border:1px solid #7a3a2a;border-radius:12px;padding:10px 14px;margin-bottom:16px;
}
.cron-acts{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cron-dot{width:10px;height:10px;border-radius:50%;background:#e05c3f;box-shadow:0 0 10px #e05c3f;animation:evpulse 1.4s infinite;flex-shrink:0}
.cron-txt{font-family:'Oswald';text-transform:uppercase;font-size:12px;letter-spacing:.04em;color:var(--cream-dim)}
.cron-txt b{font-family:'Anton';font-size:18px;color:var(--cream);margin-left:6px;letter-spacing:.02em}
.ens-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-bottom:20px}
.ens-stat{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--c);border-radius:12px;padding:11px 13px}
.ens-stat.cero{opacity:.55}
.ens-stat-h{display:flex;align-items:center;gap:7px;margin-bottom:4px}
.ens-stat-h b{font-family:'Oswald';font-size:15px}
.ens-yo{font-style:normal;font-size:9px;text-transform:uppercase;letter-spacing:.05em;background:var(--olive-soft);color:var(--cream);border-radius:20px;padding:1px 7px}
.ens-stat-big{font-family:'Anton';font-size:22px;color:var(--cream)}
.ens-stat.cero .ens-stat-big{font-family:'Oswald';font-size:14px;color:var(--cream-dim)}
.ens-bar{height:6px;background:#0e1208;border:1px solid var(--line);border-radius:20px;overflow:hidden;margin:7px 0 6px}
.ens-bar i{display:block;height:100%;background:var(--c);border-radius:20px}
.ens-day{margin-bottom:16px}
.ens-day-h{display:flex;align-items:baseline;gap:9px;font-family:'Oswald';text-transform:uppercase;letter-spacing:.05em;font-size:13px;color:var(--olive-lite);margin-bottom:7px}
.ens-item{border-left:4px solid var(--c);padding:12px 14px;margin-bottom:8px}
.ens-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:8px}
.ens-dur{font-family:'Anton';font-size:17px;color:var(--cream)}
.ens-hora{font-family:'Oswald';font-size:12px;color:var(--cream-dim)}
.ens-acts{margin-left:auto;display:flex;gap:5px}
.ens-chips{display:flex;gap:5px;flex-wrap:wrap}
.ens-ideas{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.ens-idea-row{background:var(--panel2);border-left:2px solid var(--olive-soft);border-radius:8px;padding:7px 10px;font-size:13px}
.ens-idea-row.pregunta{border-left-color:#d9a441;background:color-mix(in srgb,#d9a441 8%,var(--panel2))}
.ens-idea-row.resuelta{border-left-color:var(--olive-lite)}
.ens-idea-h{display:flex;gap:9px;flex-wrap:wrap;align-items:baseline;margin-bottom:3px}
.ens-idea-h b{font-family:'Oswald';font-size:13px;flex-shrink:0}
.ens-idea-h i.mini{font-style:normal;margin-left:auto}
.ens-idea-txt{display:block;color:var(--cream);white-space:pre-wrap}
.ens-notas{margin:9px 0 0;color:var(--cream-dim);font-size:13px;white-space:pre-wrap}
.ens-card{margin:14px 0}
.qtag{font-family:'Oswald';font-size:10px;text-transform:uppercase;letter-spacing:.05em;padding:1px 8px;border-radius:20px;background:color-mix(in srgb,#d9a441 22%,transparent);border:1px solid #d9a441;color:#f0d79a;white-space:nowrap}
.qtag.ok{background:color-mix(in srgb,var(--olive-lite) 20%,transparent);border-color:var(--olive-lite);color:var(--olive-lite)}
.rtag.q{background:color-mix(in srgb,#d9a441 40%,transparent);color:#f6e7c0}
.btn-mini{background:transparent;border:1px dashed var(--olive-soft);color:var(--cream-dim);border-radius:20px;padding:2px 11px;font:inherit;font-size:11.5px;cursor:pointer}
.btn-mini:hover{border-color:var(--olive-lite);color:var(--cream)}
.btn-mini.on{border-style:solid;border-color:var(--olive-lite);color:var(--olive-lite)}
.hilo{display:flex;flex-direction:column;gap:5px;margin-top:7px;align-items:flex-start}
.hilo-msg{width:100%;display:flex;gap:8px;flex-wrap:wrap;align-items:baseline;background:color-mix(in srgb,var(--c) 10%,var(--panel));border:1px solid var(--line);border-left:3px solid var(--c);border-radius:8px;padding:6px 9px}
.hilo-autor{font-family:'Oswald';font-size:12px;color:var(--c);flex-shrink:0}
.hilo-txt{flex:1;min-width:120px;white-space:pre-wrap;font-size:13px;color:var(--cream)}
.hilo-meta{font-size:10px;color:var(--cream-dim);margin-left:auto;white-space:nowrap}
.hilo-del{font-size:11px;margin-left:4px}
.hilo-form{width:100%;display:flex;flex-direction:column;gap:6px}
.hilo-input{width:100%;background:var(--panel);border:1px solid var(--olive-soft);border-radius:8px;color:var(--cream);padding:7px 9px;font:inherit;font-size:13px;resize:vertical}
.hilo-form-acts{display:flex;gap:9px;align-items:center}
.ens-hilo-gen{margin-top:10px}
.ens-vistos{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:11px;padding-top:9px;border-top:1px dashed var(--line);font-size:12px;color:var(--cream-dim)}
.ens-vistos .vlist{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.vdot{font-style:normal;font-size:10px;font-family:'Oswald';text-transform:uppercase;letter-spacing:.04em;padding:1px 8px;border-radius:20px;border:1px solid var(--c);color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}
.ens-item.tiene-preg{box-shadow:var(--shadow),0 0 0 1px color-mix(in srgb,#d9a441 55%,transparent)}
.ens-item.flash{animation:flashcard 1.6s ease-out}
@keyframes flashcard{0%,40%{background:color-mix(in srgb,#d9a441 16%,var(--panel))}100%{background:var(--panel)}}
.pend-card{margin-bottom:16px;border-color:#d9a441}
.pend-row{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--c);border-radius:9px;padding:8px 10px;margin-top:7px;color:inherit;font:inherit;cursor:pointer}
.pend-row:hover{border-color:var(--olive-lite)}
.pend-q{font-family:'Anton';font-size:18px;color:#d9a441;line-height:1;flex-shrink:0}
.pend-body{flex:1;min-width:0;font-size:13px}
.pend-body b{font-family:'Oswald';font-weight:600}
.pend-body i{display:block;color:var(--cream-dim);font-style:normal;font-size:12.5px;margin-top:2px;white-space:pre-wrap}
.pend-meta{font-size:10.5px;color:var(--cream-dim);white-space:nowrap;flex-shrink:0}
.pend-nuevos{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:10px}
.pend-chip{cursor:pointer;font-family:inherit}
.nbadge{font-style:normal;font-size:10px;font-family:'Oswald';background:#d9a441;color:#221a05;border-radius:20px;padding:0 6px;margin-left:5px;vertical-align:middle}
.card-pend{border-color:#d9a441}
.ens-preg-lbl{display:none;align-items:center;gap:7px;font-size:12px;color:var(--cream-dim);margin:0 0 7px;cursor:pointer}
.ens-song.on .ens-preg-lbl{display:flex}
.ens-preg-lbl b{color:#e6c169;font-weight:600}
.ens-quick{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 0}
.ens-search{width:100%;margin-bottom:8px}
.ens-pick{max-height:46vh;overflow-y:auto;border:1px solid var(--line);border-radius:10px;padding:6px}
.ens-song{border-radius:8px;padding:4px 6px}
.ens-song.on{background:color-mix(in srgb, var(--olive-lite) 12%, transparent)}
.ens-song-h{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer;padding:3px 0}
.ens-song-h small{color:var(--cream-dim);font-size:11px;margin-left:auto;white-space:nowrap}
.ens-song .ens-idea{display:none;width:100%;background:var(--panel);border:1px solid var(--olive-soft);border-radius:7px;color:var(--cream);padding:7px 9px;font:inherit;font-size:13px;margin:2px 0 6px;resize:vertical}
.ens-song.on .ens-idea{display:block}
.sec-editor-head .count{background:var(--panel);border:1px solid var(--line);color:var(--cream-dim);border-radius:20px;font-size:11px;padding:1px 8px;font-family:'Inter'}
.set-summary{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.set-list{display:flex;flex-direction:column;gap:6px}
.set-row{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--panel);border:1px solid var(--line);border-radius:10px;border-left:3px solid var(--line)}
.set-row.cerati{border-left-color:var(--cerati)}
.set-row.soda{border-left-color:var(--soda)}
.set-row.pausa{border-left-color:#555;opacity:.85;font-style:italic}
.set-time{font-family:'Oswald';color:var(--cream-dim);font-size:13px;width:44px}
/* el número tiene que leerse de un vistazo en el atril: nada de gris oscuro */
.set-num{font-family:'Anton';color:var(--cream-dim);width:26px;text-align:center;font-size:17px;line-height:1}
/* la pausa que parte el show se distingue del speech de un vistazo */
.set-row.pausa.divide{border-left:3px solid var(--olive-lite);background:color-mix(in srgb,var(--olive-lite) 7%,var(--panel))}
.pausa-tag{font-style:normal;font-family:'Oswald';text-transform:uppercase;font-size:9.5px;letter-spacing:.06em;margin-left:9px;padding:2px 8px;border-radius:20px;background:var(--olive-lite);color:#111}
.set-main{flex:1;font-family:'Oswald';font-size:15px}
.set-main small{color:var(--cream-dim);font-family:'Inter';font-size:11px;display:block}
.set-disco{display:inline-block;color:var(--c);border:1px solid color-mix(in srgb, var(--c) 45%, transparent);background:color-mix(in srgb, var(--c) 12%, transparent);border-radius:6px;padding:0 6px;margin-right:6px;font-size:10px;font-style:italic}
.set-dur{font-family:'Oswald';color:var(--cream-dim);font-size:13px}
.set-actions{display:flex;gap:6px;align-items:center}
.btn-round svg{display:block;margin:0 auto}
.set-escena{color:var(--olive-lite);border-color:var(--olive-soft)}
.set-escena:hover{border-color:var(--olive-lite);background:color-mix(in srgb,var(--olive-lite) 14%,var(--panel))}
.set-chips{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}
.set-chips .mchip{font-size:10px;padding:1px 7px}
.set-chips .rtag{font-size:8px;margin-left:4px;padding:0 4px}
.set-divider{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 14px;margin:4px 0}
.set-divider .div-label{font-family:'Oswald';text-transform:uppercase;font-size:12px;letter-spacing:.05em;color:var(--olive-lite)}
.set-divider .div-val{font-family:'Oswald';font-size:13px;color:var(--cream-dim);text-align:right}
.set-divider:last-child{border-top:1px solid var(--olive-soft);margin-top:8px;padding-top:12px}
.set-divider:last-child .div-label,.set-divider:last-child .div-val{color:var(--cream)}
.drag-handle{cursor:grab;color:var(--cream-dim);font-size:20px;line-height:1;padding:6px 8px;border-radius:8px;user-select:none;touch-action:none}
.drag-handle:hover{color:var(--olive-lite);background:var(--panel2)}
.drag-handle:active{cursor:grabbing}
.set-ghost{opacity:.35;background:var(--panel2);border-style:dashed;border-color:var(--olive)}
.set-chosen{border-color:var(--olive-lite)}
.set-drag{box-shadow:0 14px 34px rgba(0,0,0,.6);opacity:.98;border:1px solid var(--olive-lite)}
.envivo-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;background:linear-gradient(90deg,color-mix(in srgb,var(--olive-lite) 20%, var(--panel)),var(--panel));border:1px solid var(--olive);border-radius:12px;padding:10px 14px;margin-bottom:16px}
.ev-info{display:flex;align-items:center;gap:8px;font-family:'Oswald';font-size:15px}
.ev-info b{color:var(--olive-lite);text-transform:uppercase;font-size:12px;letter-spacing:.04em}
.ev-next{color:var(--cream-dim);font-size:13px}
.ev-dot{width:10px;height:10px;border-radius:50%;background:#6bbf59;box-shadow:0 0 10px #6bbf59;animation:evpulse 1.4s infinite;flex-shrink:0}
@keyframes evpulse{0%,100%{opacity:1}50%{opacity:.3}}
.ev-actions{display:flex;gap:6px;flex-wrap:wrap}
.set-row.sonando{border-color:var(--olive-lite);box-shadow:inset 0 0 0 1px var(--olive-lite);background:color-mix(in srgb,var(--olive-lite) 12%,var(--panel))}
.set-row.sonando .set-num{color:var(--olive-lite)}
.set-now.on{background:var(--olive-lite);color:#14180d;border-color:var(--olive-lite)}
.esc-next{font-size:.68em;color:var(--cream-dim);margin-left:8px;text-transform:none;letter-spacing:0}
.esc-tools [data-a="prev"],.esc-tools [data-a="next"]{font-weight:700;color:var(--olive-lite)}
.timeline{display:flex;flex-direction:column;gap:2px}
.tl-item{display:flex;gap:14px;padding:12px 4px;border-bottom:1px solid var(--line)}
.tl-time{font-family:'Anton';color:var(--olive-lite);font-size:18px;width:60px;flex-shrink:0}
.tl-body{flex:1}
.tl-body b{font-family:'Oswald';font-size:16px}
.tl-body p{margin:3px 0 0;color:var(--cream-dim);font-size:13px}
.tl-actions{display:flex;gap:4px;align-items:flex-start}
.tech-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tech-cols h3{font-family:'Oswald';text-transform:uppercase;font-size:14px;color:var(--olive-lite);margin:14px 0 6px}
.tech-cols h3:first-child{margin-top:0}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;color:var(--cream-dim);font-family:'Oswald';text-transform:uppercase;font-size:11px;border-bottom:1px solid var(--line);padding:6px 6px}
.tbl td{padding:7px 6px;border-bottom:1px solid var(--line)}
.area{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:8px;color:var(--cream);padding:9px;font:inherit;font-size:13px;resize:vertical}
.mus-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.mus-card{border-left:4px solid var(--c)}
.mus-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.mus-dot{width:12px;height:12px;border-radius:50%;background:var(--c);flex-shrink:0}
.mus-top b{font-family:'Oswald';font-size:16px;display:block}
.mus-top small{color:var(--cream-dim)}
.mus-btns{margin-left:auto;display:flex;gap:4px}
.mus-songs p{margin:6px 0;font-size:13px;display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.mus-songs .lbl{font-family:'Oswald';text-transform:uppercase;font-size:10px;color:var(--cream-dim)}
.share-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.share-card{max-width:440px;margin:0 auto}
.admin-tools{margin-top:14px}
.qr{border-radius:12px;background:#fff;padding:8px;margin:8px 0}
.url-row{display:flex;gap:8px;margin-top:8px}
.url-row input{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:8px;color:var(--cream);padding:9px;font-size:12px}
.asig-h{font-family:'Oswald';text-transform:uppercase;font-size:13px;color:var(--olive-lite);margin:16px 0 6px;letter-spacing:.04em}
.asig-h small{color:var(--cream-dim);text-transform:none;font-weight:400}
.asig-h-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:16px}
.asig-h-row .asig-h{margin:0}
.asig-grid{display:flex;flex-direction:column;gap:8px;margin:6px 0}
.asig-row.compact{display:flex;align-items:center;justify-content:space-between;gap:10px}
.asig-row.compact .asig-controls{margin:0}
.gtr-tipo{background:var(--panel);border:1px solid var(--line);border-radius:7px;color:var(--cream);padding:4px 8px;font-size:12px}
.gtr-tipo:disabled{opacity:.4}
.instr-list{display:flex;flex-direction:column;gap:7px;margin:4px 0}
.instr-row{display:grid;grid-template-columns:1.1fr 1fr 1fr auto;gap:6px;align-items:center}
.instr-row input,.instr-row select{background:var(--panel2);border:1px solid var(--line);border-radius:7px;color:var(--cream);padding:7px 9px;font-size:13px;min-width:0}
@media(max-width:560px){
  .instr-row{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .instr-row .instr-del{grid-column:2;justify-self:end}
}
.asig-row{border:1px solid var(--line);border-left:3px solid var(--c);border-radius:10px;padding:10px 12px;background:var(--panel2)}
.asig-name{font-family:'Oswald';font-size:15px}
.asig-name small{color:var(--cream-dim);font-family:'Inter'}
.asig-controls{display:flex;gap:16px;margin:6px 0}
.asig-partes.off{display:none}
.pchips{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
.pchip{font-size:11px;padding:3px 9px;border-radius:20px;border:1px solid var(--line);background:var(--panel);color:var(--cream-dim);cursor:pointer;font-family:'Oswald';text-transform:uppercase}
.pchip.on{background:var(--olive-lite);color:#14180d;border-color:var(--olive-lite)}
.pchip:disabled{opacity:.35}
.field.wide{grid-column:1/-1}
.field.chk-field{flex-direction:row;align-items:center;gap:8px}
.field input,.field select,.field textarea{background:var(--panel2);border:1px solid var(--line);border-radius:8px;color:var(--cream);padding:8px 10px;font:inherit;font-size:14px}
.field textarea{resize:vertical;font-family:'DejaVu Sans Mono',monospace}
.sec-editor-head{display:flex;justify-content:space-between;align-items:center;margin:16px 0 4px}
.sec-editor-head h4{font-family:'Oswald';text-transform:uppercase;font-size:14px;color:var(--olive-lite)}
.sec-edit{position:relative;border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:8px;background:var(--panel2)}
.sec-edit.editando{border-color:var(--olive-lite)}
/* la esquina de abajo a la derecha se arrastra para dar el alto que uno quiera: aquí se ve */
.sec-edit::after{content:"";position:absolute;right:12px;bottom:12px;width:10px;height:10px;pointer-events:none;opacity:.5;background:repeating-linear-gradient(135deg,var(--cream-dim) 0 1px,transparent 1px 3px)}
.sec-edit.grande::after{display:none}
.sec-edit-head{display:flex;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.sec-parte{flex:1;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:7px;color:var(--cream);padding:6px 9px;font-family:'Oswald';font-size:13px}
.sec-edit-btns{display:flex;gap:4px;flex-wrap:wrap}
.sec-letra{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:7px;color:var(--cream);padding:8px;font-family:'DejaVu Sans Mono',monospace;font-size:13px;resize:vertical}
.sec-head-btns{display:flex;gap:6px;flex-wrap:wrap}
.pg-txt{min-height:38vh;line-height:1.45}
.pg-prev{margin-top:10px;border-top:1px solid var(--line);padding-top:10px}
.pg-head{font-family:'Oswald';text-transform:uppercase;font-size:12px;color:var(--olive-lite);margin-bottom:6px}
.pg-list{display:flex;gap:5px;flex-wrap:wrap}
.pg-chip{font-size:11px;padding:3px 9px;border-radius:20px;border:1px solid var(--line);background:var(--panel);color:var(--cream);font-family:'Oswald'}
.pg-chip i{font-style:normal;color:var(--cream-dim);font-size:10px;margin-left:5px}
.sec-edit.grande{position:fixed;inset:0;z-index:200;margin:0;border:none;border-radius:0;background:var(--bg2);padding:12px 14px;display:flex;flex-direction:column}
.sec-edit.grande .sec-letra{flex:1;height:auto!important;min-height:0;font-size:15px;line-height:1.55;resize:none}
.sec-edit.grande .sec-zoom{border-color:var(--olive-lite);color:var(--olive-lite)}
body.modo-zoom{overflow:hidden}
body.modo-zoom .modal-back{overflow:hidden}
.quick-roles{display:flex;gap:6px;flex-wrap:wrap;margin:-4px 0 10px}
.qr-chip{font-size:12px;padding:5px 11px;border-radius:20px;border:1px solid var(--line);background:var(--panel);color:var(--cream-dim);cursor:pointer;font-family:'Oswald';text-transform:uppercase}
.pa-chk{display:flex;margin:12px 0 2px}
.qr-chip.on{background:var(--olive-lite);color:#14180d;border-color:var(--olive-lite)}
.color-row{display:flex;gap:6px;flex-wrap:wrap}
.color-dot{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer}
.color-dot.on{border-color:var(--cream)}
.dl-seg{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;font-size:13px;color:var(--cream-dim)}
.dl-seg .seg{border:1px solid var(--line);background:var(--panel);color:var(--cream-dim);border-radius:8px;padding:6px 12px}
.dl-seg .seg.on{background:var(--olive-lite);color:#14180d;border-color:var(--olive-lite)}
.dl-fmt{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.dl-fmt-d{flex-basis:100%;color:var(--cream-dim)}
.dl-selhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.dl-list{max-height:44vh;overflow-y:auto;border:1px solid var(--line);border-radius:10px;padding:6px}
.dl-grp{font-family:'Oswald';text-transform:uppercase;font-size:11px;color:var(--olive-lite);letter-spacing:.05em;padding:8px 6px 2px}
.dl-song{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:6px;font-size:14px}
.dl-song:hover{background:var(--panel2)}
.dl-song small{color:var(--cream-dim);font-size:11px;margin-left:auto;white-space:nowrap}
@keyframes pop{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
.modal-head h3{font-family:'Oswald';text-transform:uppercase;font-size:16px}
.modal-editor .modal-body{max-height:calc(100vh - 200px);overflow-y:auto}
.modal input,.modal select,.modal textarea{max-width:100%;min-width:0}
.field input:not([type=checkbox]),.field select,.field textarea{width:100%}
.url-row input{min-width:0}
.lock-mark{font-size:34px;color:var(--olive-lite);margin-bottom:6px}
.lock-box h1{font-family:'Anton';font-size:44px}
.lock-box h1 span{color:var(--cream)}
.lock-box h1 em{font-style:normal;color:var(--olive-lite)}
.lock-box p{color:var(--cream-dim);margin:6px 0 18px;font-family:'Oswald';text-transform:uppercase;font-size:13px}
.lock-box input{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--cream);padding:12px;font-size:16px;text-align:center;margin-bottom:10px}
.lock-box .btn{width:100%}
#yt-player{position:fixed;right:16px;bottom:16px;width:340px;max-width:calc(100vw - 24px);background:var(--bg2);border:1px solid var(--olive);border-radius:12px;box-shadow:var(--shadow);z-index:90;overflow:hidden}
.yt-head{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--panel)}
.yt-title{flex:1;font-family:'Oswald';font-size:13px;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yt-head button{background:var(--panel2);border:1px solid var(--line);color:var(--cream);border-radius:6px;cursor:pointer;line-height:1}
.yt-head button:hover{border-color:var(--olive)}
.yt-play{width:30px;height:30px;font-size:13px;flex-shrink:0}
.yt-mode{font-family:'Oswald';text-transform:uppercase;font-size:10px;padding:5px 8px;flex-shrink:0}
.yt-x{border:none!important;background:none!important;color:var(--cream-dim);font-size:16px;padding:0 2px}
.yt-x:hover{color:var(--cream)}
.yt-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.yt-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-seekrow{display:none;align-items:center;gap:8px;padding:7px 10px;font-family:'Oswald';font-size:11px;color:var(--cream-dim);background:var(--panel);border-top:1px solid var(--line)}
.yt-seek{flex:1;min-width:0;accent-color:var(--olive-lite)}
.yt-skip,.ap-skip{background:var(--panel2);border:1px solid var(--line);color:var(--cream);border-radius:6px;font-size:10px;font-family:'Oswald';padding:3px 6px;cursor:pointer;flex-shrink:0}
.yt-skip:hover,.ap-skip:hover{border-color:var(--olive)}
#yt-player.audio .yt-seekrow{display:flex}
#yt-player.audio{width:300px}
#yt-player.audio .yt-frame{position:fixed;left:-10000px;top:0;width:320px;height:180px;aspect-ratio:auto}
button.metric{font-family:inherit}
@media(max-width:520px){
  #yt-player{right:8px;left:8px;bottom:8px;width:auto}
  #yt-player.audio{width:auto}
}
#audio-player{position:fixed;left:16px;bottom:16px;width:320px;max-width:calc(100vw - 24px);background:var(--bg2);border:1px solid var(--olive);border-radius:12px;box-shadow:var(--shadow);z-index:91;padding:10px 12px}
.ap-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.ap-title{flex:1;font-family:'Oswald';font-size:14px;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-x{background:none;border:none;color:var(--cream-dim);font-size:16px;cursor:pointer;line-height:1}
.ap-x:hover{color:var(--cream)}
.ap-row{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.ap-play{width:40px;height:40px;border-radius:50%;border:1px solid var(--olive);background:var(--olive-lite);color:#14180d;font-size:15px;cursor:pointer;flex-shrink:0}
.ap-tr{display:flex;align-items:center;gap:7px;font-family:'Oswald';text-transform:uppercase;font-size:12px;color:var(--cream-dim)}
.ap-tr button{width:28px;height:28px;border-radius:7px;border:1px solid var(--line);background:var(--panel);color:var(--cream);cursor:pointer;font-size:14px}
.ap-tr button:hover{border-color:var(--olive)}
.ap-tr .ap-reset{width:auto;padding:0 8px;font-size:11px;text-transform:none;color:var(--olive-lite);border:none;background:none;text-decoration:underline}
.ap-tr .ap-semis{min-width:26px;text-align:center;color:var(--olive-lite);font-size:16px}
.ap-seekrow{display:flex;align-items:center;gap:8px;font-family:'Oswald';font-size:11px;color:var(--cream-dim)}
.ap-seek{flex:1;accent-color:var(--olive-lite)}
.ap-foot{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.ap-del{background:none;border:none;color:#e58e7a;cursor:pointer;font-size:12px;text-decoration:underline;padding:0}
.ap-note{font-size:10px;color:var(--cream-dim);opacity:.7}
@media(max-width:520px){
  #audio-player{left:8px;right:8px;bottom:8px;width:auto}
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:640px){
  .nav a{padding:6px 6px;font-size:12px}
  .tech-cols,.share-grid{grid-template-columns:1fr}
  .song-chips{max-width:44%}
  .page-head h2{font-size:24px}
  .sec-body{padding:10px 10px}
  .esc-scroll{padding:14px 10px 40vh}
  .esc-metro{left:calc(8px + env(safe-area-inset-left,0px));right:calc(8px + env(safe-area-inset-right,0px));max-width:none;bottom:calc(78px * var(--esc-ui) + env(safe-area-inset-bottom,0px))}
  .esc-metro .mt-sel{flex:1 1 44%}
  .esc-speed{left:50%;right:auto;transform:translateX(-50%);gap:7px;padding:6px 9px}
  .esc-speed .spd{gap:7px}
  .esc-speed .spd-mid{min-width:84px}
  .esc-speed .spd-b{width:32px;height:32px}
  .esc-speed.mini{left:auto;right:calc(12px + env(safe-area-inset-right,0px));transform:none}
  .set-actions .btn-round svg{width:15px;height:15px}
  .set-row{gap:6px;padding:10px 8px}
  .set-actions{gap:3px}
  .set-actions .btn-round{width:26px;height:26px;font-size:12px}
  .drag-handle{padding:6px 2px}
}

/* ---------- el tono de cada uno ---------- */
.afin{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.afin select{
  background:var(--panel2);border:1px solid var(--line);border-radius:8px;
  color:var(--cream);padding:6px 9px;font:inherit;font-size:12px;max-width:230px;
}
.afin select:focus{outline:none;border-color:var(--olive-lite)}
/* cuando lo que ves no es el tono del proyecto, tiene que cantar a la vista */
.metric-mio b{color:var(--olive-lite)}
.metric-mio i{color:var(--olive-lite);opacity:.85}
.pg-hallado{margin-top:6px;font-size:12.5px;color:var(--olive-lite)}
.pg-hallado b{color:var(--cream)}

/* ---------- pegar varias canciones ---------- */
.pv-list{display:flex;flex-direction:column;gap:8px;margin-top:10px;max-height:46vh;overflow:auto}
.pv-item{display:grid;grid-template-columns:1.4fr 1fr auto;gap:8px;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.pv-item input{background:#141414;border:1px solid var(--line);border-radius:8px;color:var(--cream);
  padding:7px 9px;font:inherit;font-size:13px;min-width:0}
.pv-item input:focus{outline:none;border-color:var(--olive-lite)}
.pv-datos{font-size:11.5px;color:var(--cream-dim);white-space:nowrap}
.pv-aviso{margin-top:8px;color:var(--olive-lite)}
@media(max-width:620px){
  .pv-item{grid-template-columns:1fr}
  .pv-datos{white-space:normal}
}

/* ---------- pantalla emitida a la TV ---------- */
/*  Se mira desde lejos y nadie la toca: sin botones, letra enorme y el máximo
    contraste posible. El fondo es negro puro para que en una TV OLED de sala
    oscura no haya un rectángulo gris flotando detrás de la banda. */
.tv{position:fixed;inset:0;background:#000;color:var(--cream);display:flex;flex-direction:column;z-index:120}
.tv-top{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:18px 34px 10px;border-bottom:1px solid #1c2113}
.tv-tit{font-family:'Anton';font-size:clamp(26px,3.4vw,54px);text-transform:uppercase;letter-spacing:.02em;line-height:1}
.tv-meta{font-family:'Oswald';font-size:clamp(14px,1.4vw,24px);color:var(--olive-lite);white-space:nowrap}
.tv-scroll{flex:1;overflow:hidden;padding:24px 34px 8vh;scroll-behavior:auto}
.tv-letra{font-family:'DejaVu Sans Mono',ui-monospace,monospace;line-height:1.5;max-width:1400px;margin:0 auto}
.tv-sec{margin-bottom:30px}
.tv-sec h4{font-family:'Oswald';text-transform:uppercase;color:var(--olive-lite);font-size:.52em;letter-spacing:.1em;margin-bottom:10px;opacity:.85}
.tv-espera{margin:auto;text-align:center;padding:40px}
.tv-logo{width:min(320px,42vw);margin-bottom:18px}
.tv-espera h1{font-family:'Anton';font-size:clamp(30px,5vw,72px);text-transform:uppercase}
.tv-espera p{color:var(--cream-dim);font-size:clamp(15px,1.6vw,26px);margin-top:10px}
.tv-cod{font-family:'Anton';color:var(--olive-lite);letter-spacing:.22em;margin-top:24px}
.tv-quieta{justify-content:center}
/* el botón de emitir, encendido mientras hay pantalla enganchada */
.esc-tools button.emitir.on{background:var(--olive-lite);color:#14180d;border-color:var(--olive-lite)}

/* ---------- tamaño de los controles según el aparato ---------- */
/*  `pointer: coarse` = se toca con el dedo. En una tablet (dedo + pantalla
    grande) los controles suben bastante: es el caso del atril. Con ratón se
    quedan como estaban, que ahí se apunta fino y la letra manda. */
@media (pointer: coarse) { .escena{--esc-ui-base:1.2} }
@media (pointer: coarse) and (min-width: 700px) { .escena{--esc-ui-base:1.5} }
@media (pointer: coarse) and (min-width: 1000px) { .escena{--esc-ui-base:1.7} }
/* una tablet apaisada tiene alto de sobra pero ancho justo: no se pasa de ahí */
@media (pointer: coarse) and (min-width: 700px) and (max-height: 500px) { .escena{--esc-ui-base:1.25} }

/* ---------- reenganche y grabación de tiempos ---------- */
/*  «Aquí» es el botón de la noche que algo se tuerce: grande, al lado del play
    y sin menús de por medio. Un toque y la letra vuelve con la banda. */
.esc-speed .spd-aqui{background:var(--panel2);border:1px solid var(--olive);color:var(--cream);border-radius:20px;
  padding:calc(8px * var(--esc-ui)) calc(14px * var(--esc-ui));font-family:'Oswald';text-transform:uppercase;
  font-size:calc(12px * var(--esc-ui));cursor:pointer;white-space:nowrap}
.esc-speed .spd-aqui:active{background:var(--olive-lite);color:#14180d}
.esc-speed.mini .spd-aqui{display:none}
/* la parte que debería estar sonando: se mira de reojo, sin dejar de tocar */
.spd-parte{font-family:'Oswald';text-transform:uppercase;font-size:calc(11px * var(--esc-ui));
  color:var(--olive-lite);letter-spacing:.06em;line-height:1.1}
.spd-parte:empty{display:none}

.esc-grabar{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(80px * var(--esc-ui) + env(safe-area-inset-bottom,0px));
  z-index:130;background:rgba(20,26,15,.98);border:1px solid var(--olive);border-radius:18px;padding:14px 16px;
  box-shadow:var(--shadow);width:min(94vw,620px);font-family:'Oswald';color:var(--cream)}
.gr-top{display:flex;align-items:center;gap:12px}
.gr-reloj{font-family:'Anton';font-size:30px;color:var(--olive-lite);line-height:1}
.gr-info{font-size:12px;color:var(--cream-dim);flex:1}
.gr-x{background:none;border:1px solid var(--line);color:var(--cream-dim);border-radius:8px;width:30px;height:30px;cursor:pointer}
.gr-parte{margin:10px 0;font-size:15px;color:var(--cream-dim)}
.gr-parte b{color:var(--cream);font-size:18px}
.gr-acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.gr-acts button{background:var(--panel2);border:1px solid var(--line);color:var(--cream);border-radius:12px;
  padding:12px 18px;font-family:'Oswald';text-transform:uppercase;font-size:14px;cursor:pointer;touch-action:manipulation}
.gr-acts button:disabled{opacity:.35}
.gr-acts .gr-marcar{background:var(--olive-lite);color:#14180d;border-color:var(--olive-lite);font-weight:600}
/* el botón de marcar se hace enorme en cuanto empieza la grabación: se pulsa
   a ciegas, tocando, y fallar el toque estropea la toma entera */
.gr-marcar.grande{flex:1;min-height:64px;font-size:22px;letter-spacing:.06em}
.gr-acts .gr-guardar{border-color:var(--olive)}
.gr-pie{font-size:11px;color:var(--cream-dim);margin-top:10px;line-height:1.5}
.esc-tools button.tiempos{border-color:var(--olive-soft)}

/* --- resumen de acordes de la canción --- */
.ac-res{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin-bottom:14px}
.ac-res>summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ac-res>summary::-webkit-details-marker{display:none}
.ac-res>summary::before{content:"▸";color:var(--olive-lite);font-size:12px;transition:.15s}
.ac-res[open]>summary::before{transform:rotate(90deg)}
.ac-res>summary b{font-family:'Oswald';text-transform:uppercase;letter-spacing:.04em;font-size:13px;color:var(--cream)}
.ac-res>summary i{font-style:normal;font-size:12px;color:var(--cream-dim)}
.ac-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ac-chip{display:inline-flex;align-items:center;gap:5px;background:var(--panel2);border:1px solid var(--olive-soft);border-radius:9px;color:var(--olive-lite);font-family:'Oswald';font-size:15px;padding:4px 10px;cursor:pointer;transition:.12s}
.ac-chip:hover{border-color:var(--olive-lite);background:color-mix(in srgb,var(--olive-lite) 14%,var(--panel2))}
.ac-chip i{font-style:normal;font-size:10px;color:var(--cream-dim);font-family:'Inter',sans-serif}
.ac-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}
.ac-tools .mini{font-size:11px;color:var(--cream-dim)}
.ac-diags{margin-top:10px}
.ac-partes{display:flex;flex-direction:column;gap:4px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.ac-parte{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.ac-parte-n{font-family:'Oswald';text-transform:uppercase;letter-spacing:.04em;font-size:11px;color:var(--cream-dim);min-width:110px}
.ac-seq{font-family:'Oswald';font-size:13px;color:var(--olive-lite)}
@media (max-width:640px){
  .ac-parte-n{min-width:0;flex-basis:100%}
  .ac-res{padding:10px 12px}
}

/* --- editor de bloques del repertorio --- */
.blq-lista{display:flex;flex-direction:column;gap:8px}
.blq-fila{display:flex;align-items:center;gap:10px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.blq-fila .blq-nombre{margin-top:0;flex:1;min-width:0}
.blq-n{font-size:11px;color:var(--cream-dim);white-space:nowrap;font-family:'Oswald';text-transform:uppercase;letter-spacing:.03em}
.blq-btns{display:flex;gap:5px}
.blq-x:not(:disabled):hover{border-color:var(--danger);color:#e8b8ad}
.blq-add{display:flex;gap:8px;align-items:center;margin-top:14px}
.blq-add .adm-input{margin-top:0;flex:1}
.blq-editor .mini{display:block;margin-top:12px;font-size:12px;color:var(--cream-dim);line-height:1.5}
@media (max-width:560px){
  .blq-fila{flex-wrap:wrap}
  .blq-fila .blq-nombre{flex-basis:100%}
  .blq-add{flex-wrap:wrap}
}

/* ---- afinador en el atril -------------------------------------------------
   Se apoya donde el panel del metrónomo y escala con --esc-ui, igual que el
   resto de controles del escenario: en una tablet a un metro los mismos
   píxeles no valen. Solo lo imprescindible — la nota, la aguja y qué hacer:
   los ajustes están en la pantalla del afinador. */
.esc-afinar{position:absolute;bottom:calc(80px * var(--esc-ui) + env(safe-area-inset-bottom,0px));
  right:calc(30px + env(safe-area-inset-right,0px));z-index:111;
  display:flex;flex-direction:column;gap:8px;background:rgba(20,26,15,.98);
  border:1px solid var(--olive-soft);border-radius:18px;padding:12px 16px;
  box-shadow:var(--shadow);font-family:'Oswald';color:var(--cream);min-width:min(94vw,360px)}
.esc-afinar[hidden]{display:none}

.ea-barra{position:relative;height:calc(20px * var(--esc-ui));border-radius:10px;
  background:rgba(0,0,0,.45);border:1px solid var(--line);overflow:hidden}
.ea-centro{position:absolute;top:0;bottom:0;left:45%;width:10%;
  background:rgba(200,255,0,.08);border-left:1px solid var(--olive-lite);border-right:1px solid var(--olive-lite)}
.ea-aguja{position:absolute;top:3px;bottom:3px;width:4px;margin-left:-2px;border-radius:2px;
  background:var(--cream);transition:left .07s linear,background .15s}
.ea-medidor.baja .ea-aguja,.ea-medidor.alta .ea-aguja{background:#e0a33f}
.ea-medidor.afinada .ea-aguja{background:var(--olive-lite);box-shadow:0 0 12px rgba(200,255,0,.6)}
.ea-medidor.afinada .ea-centro{background:rgba(200,255,0,.18)}

.ea-lectura{display:flex;align-items:baseline;gap:10px;margin-top:6px}
.ea-nota{font-size:calc(34px * var(--esc-ui));line-height:1;color:var(--cream)}
.ea-medidor.afinada .ea-nota{color:var(--olive-lite)}
.ea-cents{font-size:calc(18px * var(--esc-ui));color:var(--gris)}
.ea-dir{margin-left:auto;font-size:calc(14px * var(--esc-ui));color:var(--gris);text-transform:lowercase}
.ea-medidor.afinada .ea-dir{color:var(--olive-lite)}
.ea-medidor.esperando .ea-nota{color:var(--line)}

.ea-pie{display:flex;align-items:center;gap:10px;justify-content:space-between;
  border-top:1px solid var(--line);padding-top:8px}
.ea-cuerdas{font-size:calc(12px * var(--esc-ui));color:var(--gris);letter-spacing:.06em}

@media(max-width:640px){
  .esc-afinar{left:calc(8px + env(safe-area-inset-left,0px));right:calc(8px + env(safe-area-inset-right,0px));
    min-width:0;bottom:calc(78px * var(--esc-ui) + env(safe-area-inset-bottom,0px))}
}

/* ---- reproductor de Spotify ----------------------------------------------
   Va aparte del de YouTube y sin controles propios: play, pausa y barra los
   pone el iframe de Spotify, y no se pueden manejar desde fuera. Enseñar unos
   botones nuestros que no hacen nada sería peor que no tenerlos. */
#sp-player{position:fixed;right:16px;bottom:16px;z-index:120;width:min(94vw,420px);
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow);overflow:hidden}
.sp-head{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line)}
.sp-title{flex:1;min-width:0;font-family:'Oswald';font-size:14px;color:var(--blanco);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-abrir{font-size:11px;color:var(--gris);text-decoration:none;white-space:nowrap}
.sp-abrir:hover{color:var(--olive-lite)}
.sp-x{background:none;border:0;color:var(--gris);cursor:pointer;font-size:15px;line-height:1;padding:2px 4px}
.sp-x:hover{color:var(--blanco)}
.sp-frame{background:#000}
.sp-frame iframe{display:block;border:0}
.sp-aviso{margin:0;padding:8px 12px 10px;color:var(--gris);line-height:1.45;border-top:1px solid var(--line)}
@media(max-width:560px){#sp-player{right:8px;left:8px;bottom:8px;width:auto}}

/* ---------- pegar una canción de fuera ---------- */
#pg-txt{width:100%;font-family:ui-monospace,Consolas,monospace;font-size:12.5px;line-height:1.45;white-space:pre;overflow-x:auto}
.pg-info{margin-top:12px}
.pg-datos{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.pg-dato{border:1px solid var(--line);border-radius:20px;padding:4px 12px;font-size:13px}
.pg-dato i{font-style:normal;font-family:'Oswald';text-transform:uppercase;font-size:10px;letter-spacing:.06em;color:var(--gris);margin-right:7px}
.pg-prev{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:12px;margin:0;
  font-family:ui-monospace,Consolas,monospace;font-size:12px;line-height:1.7;color:var(--cream,#f4f4f0);
  white-space:pre-wrap;max-height:230px;overflow:auto}
.pg-prev{word-break:break-word}

/* la barra que ofrece meter los acordes dentro de la letra, en cada parte */
.sec-fusion{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px;padding:9px 12px;
  border:1px dashed var(--olive,#6f8c12);border-radius:10px;background:rgba(200,255,0,.05)}
.sec-fusion .mini{flex:1;min-width:180px}

/* ---------- que la barra no se siente ENCIMA de la letra ----------
   La barra de velocidad flota abajo, y en pantalla estrecha va centrada: la
   letra le pasaba por detrás y quedaba cortada a media frase. No es que
   estorbe para leer —con autoscroll se lee por el tercio de arriba— es que se
   ve desprolijo, sobre todo en las capturas.

   Un degradado hasta el fondo del escenario, POR DEBAJO de la barra y sin
   robar clics: la letra se desvanece antes de llegar a ella en vez de quedar
   partida. Alto en `em`, como el aire de arriba y abajo, para que crezca con
   el tamaño de letra que elija cada músico. */
.escena::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:5.5em;
  background:linear-gradient(to bottom, rgba(10,13,7,0), rgba(10,13,7,.92) 55%, #0a0d07);
  pointer-events:none;z-index:105;
}
/* Grabando tiempos y en el reenganche no hay autoscroll y la letra la mueve la
   persona: ahí el degradado solo taparía lo que está mirando. */
.escena.sin-fade::after{display:none}