/* ══════════════════════════════════════════════════════════════════════
 * BARTIDATA MATUTINO — componentes de edición diaria + TV CRT
 * ──────────────────────────────────────────────────────────────────────
 * Archivo SEPARADO a propósito: no toca post-content.css del theme,
 * así no hay riesgo de pisar cambios que ya estén en el servidor.
 * Se encola desde functions.php DESPUÉS de post-content.css.
 * Generado el 27/08/2026.
 * ══════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
 * BARTIDATA NEWS — componentes de EDICIÓN DIARIA (matutino)
 * Agregados 27/08/2026. Usan los tokens SSSD de tokens.css.
 * ════════════════════════════════════════════════════════════════════════ */

/* ── 21 · Portada de edición ─────────────────────────────────────────── */
.bd-ed{border:4px solid var(--ink);background:var(--sss-cobalt-d);position:relative;overflow:hidden;
  text-align:center;padding:20px 16px 14px;margin:0 0 1.6rem}
.bd-ed::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 2px,transparent 2px 4px)}
.bd-ed .bd-ed-n{font-family:var(--display);font-size:.42rem;color:var(--sss-cyan);margin-bottom:12px;line-height:1.8}
.bd-ed .bd-ed-t{font-family:var(--display);font-size:clamp(.85rem,4vw,1.4rem);color:var(--sss-yellow);
  line-height:1.5;text-shadow:4px 4px 0 #000;margin:0}
.bd-ed .bd-ed-go{font-family:var(--display);font-size:.42rem;color:var(--sss-mint);margin-top:14px;
  animation:bdBlink 1s steps(2) infinite}
@keyframes bdBlink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ── 22 · Boleto "dónde ver" ─────────────────────────────────────────── */
.bd-tkt{display:grid;grid-template-columns:1fr auto;background:var(--sss-yellow);border:3px solid var(--ink);
  box-shadow:var(--depth);margin:0 0 .9rem}
.bd-tkt-l{padding:13px 15px}
.bd-tkt-m{font-family:var(--display);font-size:.58rem;line-height:1.7;margin-bottom:9px}
.bd-tkt-d{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--sss-cobalt-d)}
.bd-tkt-r{border-left:3px dashed var(--ink);padding:13px 15px;display:grid;place-items:center;
  text-align:center;background:#FFF3B0}
.bd-tkt-r b{font-family:var(--display);font-size:.62rem;display:block;font-weight:400}
.bd-tkt-r i{font-family:var(--mono);font-size:10px;font-style:normal;display:block;margin-top:7px;color:var(--sss-cobalt-d)}
.bd-tkt.no{background:#FFD9DE}
.bd-tkt.no .bd-tkt-r{background:#FFC3CB}
@media(max-width:520px){.bd-tkt{grid-template-columns:1fr}
  .bd-tkt-r{border-left:0;border-top:3px dashed var(--ink)}}

/* ── 23 · High Scores (tabla arcade) ─────────────────────────────────── */
.bd-hs{background:#000;border:3px solid var(--ink);box-shadow:var(--depth);padding:14px;margin:0 0 1.6rem}
.bd-hs-t{font-family:var(--display);font-size:.62rem;color:var(--sss-yellow);text-align:center;
  margin-bottom:14px;line-height:1.7}
.bd-hs-row{display:grid;grid-template-columns:42px 1fr auto;gap:10px;align-items:center;
  font-family:var(--display);font-size:.55rem;padding:7px 4px;color:var(--sss-mint)}
.bd-hs-row .bd-hs-p{color:var(--sss-cyan)}
.bd-hs-row .bd-hs-v{color:#fff}
.bd-hs-row.p1{color:var(--sss-yellow)}
.bd-hs-row.p2{color:#fff}
.bd-hs-row.mark{background:rgba(182,255,0,.12)}
/* modo completo: mono en vez de pixel, aguanta 16+ filas */
.bd-hs.full .bd-hs-row{font-family:var(--mono);font-size:13px;font-weight:700;padding:5px 6px}
.bd-hs.full .bd-hs-row .bd-hs-p{font-family:var(--display);font-size:.42rem}
.bd-hs.full .bd-hs-t{font-size:.52rem}
@media(max-width:520px){.bd-hs-row{font-size:.45rem;grid-template-columns:34px 1fr auto}}

/* ── 27 · Hace un año (hoja de calendario) ───────────────────────────── */
.bd-hace{border:3px solid var(--ink);box-shadow:var(--depth);background:#fff;display:grid;
  grid-template-columns:130px 1fr;margin:0 0 1.6rem}
.bd-hace-cal{background:var(--sss-cobalt);border-right:3px solid var(--ink);position:relative;
  padding:20px 10px 14px;text-align:center}
.bd-hace-cal::before{content:"";position:absolute;top:7px;left:0;right:0;height:11px;
  background:repeating-linear-gradient(90deg,transparent 0 12px,var(--ink) 12px 16px,transparent 16px 28px)}
.bd-hace-mes{font-family:var(--display);font-size:.45rem;color:#fff;background:#C7137A;
  border:2px solid var(--ink);padding:5px 0;margin-bottom:10px;line-height:1.8}
.bd-hace-dia{font-family:var(--display);font-size:1.75rem;color:var(--sss-yellow);line-height:1.2;
  text-shadow:3px 3px 0 var(--sss-cobalt-d)}
.bd-hace-anio{font-family:var(--display);font-size:.5rem;color:#fff;margin-top:10px;
  border-top:2px solid rgba(255,255,255,.35);padding-top:9px}
.bd-hace-tx{padding:15px 17px}
.bd-hace-lb{font-family:var(--display);font-size:.4rem;color:var(--ink-dim);margin-bottom:9px;line-height:1.8}
.bd-hace-tx h5{font-family:var(--display);font-size:.55rem;margin:0 0 9px;line-height:1.8;color:var(--ink)}
.bd-hace-tx p{margin:0;font-size:14px}
@media(max-width:520px){.bd-hace{grid-template-columns:1fr}
  .bd-hace-cal{border-right:0;border-bottom:3px solid var(--ink)}}

/* ── 29 · Teletipo ───────────────────────────────────────────────────── */
.bd-tt{border:3px solid var(--ink);box-shadow:var(--depth);background:#fff;margin:0 0 1.6rem}
.bd-tt-h{display:flex;align-items:center;gap:8px;background:#E01030;color:#fff;padding:7px 11px}
.bd-tt-h b{font-family:var(--display);font-size:.45rem;font-weight:400}
.bd-tt-dot{width:10px;height:10px;background:#fff;border-radius:50%;animation:bdBlink 1s steps(2) infinite}
.bd-tt-i{display:grid;grid-template-columns:60px 1fr;gap:10px;padding:9px 11px;border-bottom:2px solid var(--line-soft)}
.bd-tt-i:last-child{border-bottom:0}
.bd-tt-hh{font-family:var(--display);font-size:.42rem;color:var(--ink-dim);padding-top:2px}
.bd-tt-x{font-size:13.5px}

/* ── 31 · Racha / cómo llegan ────────────────────────────────────────── */
.bd-racha{border:3px solid var(--ink);box-shadow:var(--depth);background:#fff;margin:0 0 1.6rem}
.bd-racha-h{font-family:var(--display);font-size:.5rem;background:var(--ink);color:var(--sss-yellow);
  padding:9px 12px;line-height:1.7}
.bd-racha-r{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:10px 12px;
  border-bottom:2px solid var(--line-soft)}
.bd-racha-r:last-child{border-bottom:0}
.bd-racha-n{font-weight:700;font-size:14px}
.bd-racha-bx{display:flex;gap:4px}
.bd-racha-bx i{width:24px;height:24px;border:2px solid var(--ink);display:grid;place-items:center;
  font-family:var(--display);font-size:.4rem;font-style:normal}
.bd-racha-bx i.g{background:#5dd87a}
.bd-racha-bx i.e{background:var(--sss-yellow)}
.bd-racha-bx i.p{background:#ff5b6a;color:#fff}

/* ── 32 · Continuará ─────────────────────────────────────────────────── */
.bd-cont{border:4px solid var(--ink);background:#000;padding:24px 16px;text-align:center;
  position:relative;overflow:hidden;margin:1.6rem 0 0}
.bd-cont::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 2px,transparent 2px 4px)}
.bd-cont-t{font-family:var(--display);font-size:.85rem;color:var(--sss-yellow);line-height:1.7;margin-bottom:14px}
.bd-cont-s{font-family:var(--display);font-size:.42rem;color:var(--sss-cyan);line-height:2}
.bd-cont-b{font-family:var(--display);font-size:.45rem;color:var(--sss-mint);margin-top:16px;
  animation:bdBlink 1s steps(2) infinite}

/* ── 33 · TV CRT (video) ─────────────────────────────────────────────── */
.bd-crt{background:linear-gradient(180deg,#4a5060 0%,#2d323d 100%);border:3px solid var(--ink);
  box-shadow:var(--depth);padding:16px 16px 12px;position:relative;margin:0 0 1.6rem}
.bd-crt-scr{position:relative;overflow:hidden;background:#05070f;border:7px solid #14181f;
  border-radius:26px/18px;aspect-ratio:4/3;
  box-shadow:inset 0 0 46px rgba(0,0,0,.92),inset 0 0 0 2px rgba(255,255,255,.05)}
.bd-crt.wide .bd-crt-scr{aspect-ratio:16/9;border-radius:18px/14px}
.bd-crt-in{position:absolute;inset:0;z-index:1;display:grid;place-items:center;background:#05070f}
.bd-crt-in img,.bd-crt-in iframe{width:100%;border:0;display:block}
.bd-crt:not(.wide) .bd-crt-in img,
.bd-crt:not(.wide) .bd-crt-in iframe{aspect-ratio:16/9;height:auto;object-fit:contain}
.bd-crt.wide .bd-crt-in img,
.bd-crt.wide .bd-crt-in iframe{position:absolute;inset:0;height:100%;object-fit:cover}
.bd-crt-glass{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.30) 0 2px,transparent 2px 4px),
             radial-gradient(ellipse at 50% 45%,transparent 52%,rgba(0,0,0,.60) 100%)}
.bd-crt-glass::after{content:"";position:absolute;top:4%;left:6%;right:32%;height:22%;
  background:linear-gradient(180deg,rgba(255,255,255,.12),transparent);border-radius:50%/60%}
.bd-crt.playing .bd-crt-glass{background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.20) 0 2px,transparent 2px 4px),
    radial-gradient(ellipse at 50% 45%,transparent 64%,rgba(0,0,0,.40) 100%)}
.bd-crt-play{position:absolute;inset:0;z-index:4;border:0;background:transparent;cursor:pointer;
  display:grid;place-items:center;padding:0}
.bd-crt-play i{width:74px;height:74px;border:4px solid #fff;border-radius:50%;display:grid;place-items:center;
  background:rgba(224,16,48,.88);box-shadow:0 0 0 5px rgba(0,0,0,.35);transition:transform .12s}
.bd-crt-play i::after{content:"";width:0;height:0;margin-left:6px;border-top:15px solid transparent;
  border-bottom:15px solid transparent;border-left:24px solid #fff}
.bd-crt-play:hover i{transform:scale(1.09)}
.bd-crt-rec{position:absolute;top:12px;left:14px;z-index:5;display:flex;align-items:center;gap:6px;
  font-family:var(--display);font-size:.4rem;color:#fff;text-shadow:1px 1px 0 #000;pointer-events:none}
.bd-crt-rec i{width:9px;height:9px;background:#E01030;border-radius:50%;animation:bdBlink 1s steps(2) infinite}
.bd-crt-ch{position:absolute;top:12px;right:14px;z-index:5;font-family:var(--display);font-size:.5rem;
  color:var(--sss-mint);text-shadow:0 0 8px rgba(182,255,0,.7);pointer-events:none}
.bd-crt-ph{font-family:var(--display);font-size:.5rem;color:var(--sss-mint);text-align:center;line-height:2.2}
@keyframes bdCrtOn{0%{transform:scale(1,.004);filter:brightness(6);opacity:.2}
  38%{transform:scale(1,.004);filter:brightness(6);opacity:1}
  62%{transform:scale(1,1);filter:brightness(3)}100%{transform:scale(1,1);filter:brightness(1)}}
.bd-crt.on .bd-crt-in{animation:bdCrtOn .55s ease-out}
.bd-crt-base{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.bd-crt-marca{font-family:var(--display);font-size:.45rem;color:var(--sss-yellow);flex:none}
.bd-crt-cap{flex:1;font-family:var(--mono);font-size:11px;color:#c8cfe0;line-height:1.5;min-width:120px}
.bd-crt-yt{font-family:var(--mono);font-size:10px;font-weight:700;color:#14181f !important;
  background:var(--sss-yellow);border:2px solid #14181f;padding:4px 8px;text-decoration:none;flex:none}
.bd-crt-yt:hover{background:#fff;color:#14181f !important}
.bd-crt-kn{display:flex;gap:8px;flex:none}
.bd-crt-kn i{width:22px;height:22px;border-radius:50%;border:3px solid #14181f;
  background:radial-gradient(circle at 35% 30%,#8b93a6,#4a5060);position:relative}
.bd-crt-kn i::after{content:"";position:absolute;top:2px;left:9px;width:3px;height:8px;background:#14181f}

/* ── 33b · TV CRT MULTICANAL (sin JavaScript) ────────────────────────── */
.bd-crt-multi > input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.bd-crt-slides{position:absolute;inset:0;z-index:1}
.bd-crt-slides > .bd-crt-in{display:none}
@keyframes bdCrtSnow{
  0%{filter:brightness(3.4) contrast(.35);opacity:.35;transform:scale(1,.86)}
  45%{filter:brightness(1.8) contrast(.7);opacity:.85;transform:scale(1,1.02)}
  100%{filter:none;opacity:1;transform:scale(1,1)}
}
.bd-crt-multi > input:nth-of-type(1):checked ~ .bd-crt-scr .bd-crt-slides > .bd-crt-in:nth-child(1),
.bd-crt-multi > input:nth-of-type(2):checked ~ .bd-crt-scr .bd-crt-slides > .bd-crt-in:nth-child(2),
.bd-crt-multi > input:nth-of-type(3):checked ~ .bd-crt-scr .bd-crt-slides > .bd-crt-in:nth-child(3),
.bd-crt-multi > input:nth-of-type(4):checked ~ .bd-crt-scr .bd-crt-slides > .bd-crt-in:nth-child(4),
.bd-crt-multi > input:nth-of-type(5):checked ~ .bd-crt-scr .bd-crt-slides > .bd-crt-in:nth-child(5),
.bd-crt-multi > input:nth-of-type(6):checked ~ .bd-crt-scr .bd-crt-slides > .bd-crt-in:nth-child(6),
.bd-crt-multi > input:nth-of-type(7):checked ~ .bd-crt-scr .bd-crt-slides > .bd-crt-in:nth-child(7),
.bd-crt-multi > input:nth-of-type(8):checked ~ .bd-crt-scr .bd-crt-slides > .bd-crt-in:nth-child(8){
  display:grid;animation:bdCrtSnow .42s ease-out}
.bd-crt-multi > input:nth-of-type(1):checked ~ .bd-crt-dial label:nth-child(1),
.bd-crt-multi > input:nth-of-type(2):checked ~ .bd-crt-dial label:nth-child(2),
.bd-crt-multi > input:nth-of-type(3):checked ~ .bd-crt-dial label:nth-child(3),
.bd-crt-multi > input:nth-of-type(4):checked ~ .bd-crt-dial label:nth-child(4),
.bd-crt-multi > input:nth-of-type(5):checked ~ .bd-crt-dial label:nth-child(5),
.bd-crt-multi > input:nth-of-type(6):checked ~ .bd-crt-dial label:nth-child(6),
.bd-crt-multi > input:nth-of-type(7):checked ~ .bd-crt-dial label:nth-child(7),
.bd-crt-multi > input:nth-of-type(8):checked ~ .bd-crt-dial label:nth-child(8){
  background:var(--sss-yellow);color:#14181f;box-shadow:inset 2px 2px 0 rgba(0,0,0,.25)}
.bd-crt-dial{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px;padding-top:11px;
  border-top:3px solid #14181f}
.bd-crt-dial label{font-family:var(--display);font-size:.42rem;color:#c8cfe0;background:#14181f;
  border:2px solid #0a0d13;padding:8px 10px;cursor:pointer;user-select:none;line-height:1.6;
  box-shadow:2px 2px 0 rgba(0,0,0,.4)}
.bd-crt-dial label:hover{color:var(--sss-mint)}
.bd-crt-dial label small{display:block;font-family:var(--mono);font-size:9px;margin-top:5px;
  font-weight:700;opacity:.75;max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── 33c · CRT con reproductor propio ────────────────────────────────── */
/* el iframe no recibe mouse: la interfaz de YouTube nunca aparece */
.bd-crt-player{position:absolute;inset:0;z-index:1;background:#05070f}
.bd-crt-player iframe,.bd-crt-player > div{position:absolute;inset:0;width:100%;height:100%;border:0;
  pointer-events:none !important}
.bd-crt:not(.wide) .bd-crt-player iframe,
.bd-crt:not(.wide) .bd-crt-player > div{height:auto;aspect-ratio:16/9;top:50%;transform:translateY(-50%)}
/* estática entre canales */
.bd-crt-static{position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none;transition:opacity .09s;
  background:#0a0d13}
.bd-crt-static::before{content:"";position:absolute;inset:-30%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.75'/></svg>");
  animation:bdSnowMove .28s steps(3) infinite}
.bd-crt-static::after{content:"";position:absolute;left:0;right:0;height:14%;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.22),transparent);
  animation:bdRoll 1.1s linear infinite}
.bd-crt-static.on{opacity:1}
@keyframes bdSnowMove{0%{transform:translate(0,0)}33%{transform:translate(-7%,4%)}66%{transform:translate(5%,-6%)}100%{transform:translate(-3%,2%)}}
@keyframes bdRoll{0%{top:-16%}100%{top:104%}}
/* perilla de pausa/play */
.bd-crt-pp{width:26px;height:26px;border-radius:50%;border:3px solid #14181f;cursor:pointer;
  background:radial-gradient(circle at 35% 30%,#8b93a6,#4a5060);color:#e8f1ff;font-size:9px;
  display:grid;place-items:center;padding:0;line-height:1;font-family:var(--mono);font-weight:700}
.bd-crt-pp:hover{background:radial-gradient(circle at 35% 30%,#b6ff00,#4a5060);color:#14181f}
/* diales con estado activo por JS */
.bd-crt-dial [data-ch]{font-family:var(--display);font-size:.42rem;color:#c8cfe0;background:#14181f;
  border:2px solid #0a0d13;padding:8px 10px;cursor:pointer;user-select:none;line-height:1.6;
  box-shadow:2px 2px 0 rgba(0,0,0,.4);display:block;text-align:left}
.bd-crt-dial [data-ch]:hover{color:var(--sss-mint)}
.bd-crt-dial [data-ch].on{background:var(--sss-yellow);color:#14181f;box-shadow:inset 2px 2px 0 rgba(0,0,0,.25)}
.bd-crt-dial [data-ch] small{display:block;font-family:var(--mono);font-size:9px;margin-top:5px;
  font-weight:700;opacity:.75;max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── 33d · FIX: la portada tapaba el video ───────────────────────────── */
/* la miniatura va ARRIBA del player mientras la TV está apagada… */
.bd-crt .bd-crt-in{z-index:2}
.bd-crt .bd-crt-player{z-index:1}
/* …y desaparece apenas empieza a reproducir */
.bd-crt.playing .bd-crt-in{display:none !important}
/* la estática y el vidrio siempre por encima del video */
.bd-crt .bd-crt-static{z-index:4}
.bd-crt .bd-crt-glass{z-index:5}
.bd-crt .bd-crt-rec,.bd-crt .bd-crt-ch{z-index:6}
.bd-crt .bd-crt-play{z-index:7}

/* ── 33e · el reproductor recién se ve cuando el video corre de verdad ── */
.bd-crt .bd-crt-player{opacity:0;transition:opacity .2s ease-out}
.bd-crt.live .bd-crt-player{opacity:1}

/* ══════════════════════════════════════════════════════════════════════
 * 33f · CRT — brillo suave, filtros seleccionables y botonera de VCR
 * ══════════════════════════════════════════════════════════════════════ */

/* el brillo elíptico se veía como un círculo gris pegado: lo reemplazo
   por un reflejo lineal muy leve en el borde superior */
.bd-crt .bd-crt-glass::after{
  content:"";position:absolute;top:0;left:0;right:0;height:26%;bottom:auto;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0));
  border-radius:0;
}

/* ── FILTROS ─────────────────────────────────────────────────────────── */
.bd-crt .bd-crt-player{transition:filter .25s}

/* CRT (por defecto) */
.bd-crt.fx-crt .bd-crt-glass{background:
  repeating-linear-gradient(0deg,rgba(0,0,0,.30) 0 2px,transparent 2px 4px),
  radial-gradient(ellipse at 50% 45%,transparent 52%,rgba(0,0,0,.60) 100%)}
.bd-crt.fx-crt.playing .bd-crt-glass{background:
  repeating-linear-gradient(0deg,rgba(0,0,0,.20) 0 2px,transparent 2px 4px),
  radial-gradient(ellipse at 50% 45%,transparent 64%,rgba(0,0,0,.40) 100%)}

/* VHS: líneas gruesas, saturación alta y una banda de ruido que baja */
.bd-crt.fx-vhs .bd-crt-player{filter:saturate(1.45) contrast(1.06) blur(.35px)}
.bd-crt.fx-vhs .bd-crt-glass{background:
  repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 3px,transparent 3px 6px),
  radial-gradient(ellipse at 50% 45%,transparent 66%,rgba(20,0,30,.42) 100%)}
.bd-crt.fx-vhs .bd-crt-glass::before{content:"";position:absolute;left:0;right:0;height:9%;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.16),rgba(255,0,120,.10),transparent);
  animation:bdVhsRoll 6.5s linear infinite}
@keyframes bdVhsRoll{0%{top:-10%}100%{top:106%}}

/* Blanco y negro */
.bd-crt.fx-bw .bd-crt-player{filter:grayscale(1) contrast(1.18) brightness(1.04)}
.bd-crt.fx-bw .bd-crt-glass{background:
  repeating-linear-gradient(0deg,rgba(0,0,0,.26) 0 2px,transparent 2px 4px),
  radial-gradient(ellipse at 50% 45%,transparent 58%,rgba(0,0,0,.55) 100%)}

/* Ámbar (monitor de fósforo) */
.bd-crt.fx-ambar .bd-crt-player{filter:grayscale(1) sepia(1) hue-rotate(-14deg) saturate(4) contrast(1.15) brightness(1.05)}
.bd-crt.fx-ambar .bd-crt-glass{background:
  repeating-linear-gradient(0deg,rgba(0,0,0,.34) 0 2px,transparent 2px 4px),
  radial-gradient(ellipse at 50% 45%,rgba(255,170,0,.05) 40%,rgba(40,15,0,.62) 100%)}

/* Verde fósforo */
.bd-crt.fx-verde .bd-crt-player{filter:grayscale(1) sepia(1) hue-rotate(62deg) saturate(3.6) contrast(1.2) brightness(1.02)}
.bd-crt.fx-verde .bd-crt-glass{background:
  repeating-linear-gradient(0deg,rgba(0,0,0,.34) 0 2px,transparent 2px 4px),
  radial-gradient(ellipse at 50% 45%,rgba(0,255,120,.05) 40%,rgba(0,30,10,.62) 100%)}

/* Limpio: sin nada encima */
.bd-crt.fx-limpio .bd-crt-glass{display:none}

/* ── BOTONERA DE VCR ─────────────────────────────────────────────────── */
.bd-crt-ctrl{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:11px;
  padding-top:11px;border-top:3px solid #14181f}
.bd-crt-ctrl button{font-family:var(--mono);font-size:11px;font-weight:700;color:#e8f1ff;
  background:#14181f;border:2px solid #0a0d13;padding:8px 10px;cursor:pointer;line-height:1;
  box-shadow:2px 2px 0 rgba(0,0,0,.45);min-width:40px}
.bd-crt-ctrl button:hover{color:var(--sss-mint)}
.bd-crt-ctrl button:active{transform:translate(2px,2px);box-shadow:none}
.bd-crt-ctrl .bd-crt-pp{width:auto;height:auto;border-radius:0;background:var(--sss-yellow);
  color:#14181f;font-size:12px;padding:8px 13px;display:inline-block}
.bd-crt-ctrl .bd-crt-pp:hover{background:#fff;color:#14181f}
.bd-crt-ctrl .sp{flex:1;min-width:8px}
.bd-crt-ctrl .bd-crt-spd{background:var(--sss-cobalt);color:#fff}
.bd-crt-ctrl .bd-crt-spd.alt{background:var(--sss-pink)}
.bd-crt-t{font-family:var(--mono);font-size:10px;font-weight:700;color:#8fa0c0;
  padding:0 4px;min-width:78px;text-align:center}

/* ── SELECTOR DE FILTRO ──────────────────────────────────────────────── */
.bd-crt-fx{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px}
.bd-crt-fx button{font-family:var(--display);font-size:.36rem;color:#8fa0c0;background:#0f1319;
  border:2px solid #0a0d13;padding:7px 8px;cursor:pointer;line-height:1.6}
.bd-crt-fx button:hover{color:var(--sss-mint)}
.bd-crt-fx button.on{background:var(--sss-mint);color:#14181f}

/* ══════════════════════════════════════════════════════════════════════
 * 33g · REDISEÑO DEL MUEBLE — paneles, teclas con relieve y serigrafía
 * ══════════════════════════════════════════════════════════════════════ */

/* ── el gabinete ─────────────────────────────────────────────────────── */
.bd-crt{padding:18px 18px 14px;
  background:linear-gradient(180deg,#565d70 0%,#3c4252 42%,#252a35 100%)}
/* tornillos en las esquinas */
.bd-crt::before,.bd-crt::after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#9aa3b8,#3d4352);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.12);top:7px}
.bd-crt::before{left:7px}
.bd-crt::after{right:7px}

/* ── barra de marca sobre el panel ───────────────────────────────────── */
.bd-crt-base{align-items:center;gap:10px;margin-top:13px;padding:0 2px 11px;
  border-bottom:1px solid rgba(255,255,255,.10)}
.bd-crt-marca{font-size:.42rem;letter-spacing:.04em;
  text-shadow:0 1px 0 rgba(0,0,0,.6)}
.bd-crt-cap{font-size:11.5px;color:#dbe3f2;text-shadow:0 1px 0 rgba(0,0,0,.5)}
.bd-crt-yt{font-size:9px;padding:5px 8px;box-shadow:0 2px 0 #6b5a00;
  transition:transform .07s,box-shadow .07s}
.bd-crt-yt:hover{transform:translateY(-1px);box-shadow:0 3px 0 #6b5a00}
.bd-crt-yt:active{transform:translateY(2px);box-shadow:none}

/* ── panel de control ────────────────────────────────────────────────── */
.bd-crt-panel{margin-top:12px;padding:13px 12px 11px;
  background:linear-gradient(180deg,#20242e 0%,#171b23 100%);
  border:1px solid rgba(255,255,255,.07);border-top-color:rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -2px 6px rgba(0,0,0,.55)}

/* teclas: relieve real, suben al pasar el mouse y se hunden al apretar */
.bd-crt-panel button{
  font-family:var(--mono);font-weight:700;color:#dbe3f2;cursor:pointer;line-height:1;
  background:linear-gradient(180deg,#39404f 0%,#242a35 100%);
  border:1px solid #0b0e14;border-top-color:#4d5567;
  box-shadow:0 3px 0 #0a0d13,0 4px 7px rgba(0,0,0,.45);
  transition:transform .07s ease,box-shadow .07s ease,background .16s,color .16s;
}
.bd-crt-panel button:hover{color:var(--sss-mint);
  background:linear-gradient(180deg,#454d5f 0%,#2b323e 100%);
  transform:translateY(-2px);box-shadow:0 5px 0 #0a0d13,0 8px 12px rgba(0,0,0,.5)}
.bd-crt-panel button:active{transform:translateY(3px);box-shadow:0 0 0 #0a0d13}

/* ── transporte, centrado ────────────────────────────────────────────── */
.bd-crt-ctrl{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;
  margin:0;padding:0;border:0}
.bd-crt-ctrl button{font-size:10.5px;padding:9px 11px;min-width:0;letter-spacing:.02em}
.bd-crt-ctrl .bd-crt-pp{width:auto;height:auto;border-radius:0;padding:9px 0;min-width:52px;
  font-size:13px;color:#1a1a10;
  background:linear-gradient(180deg,#ffe75c 0%,#e0b800 100%);border-top-color:#fff3a8;
  box-shadow:0 3px 0 #6b5a00,0 4px 7px rgba(0,0,0,.45);display:grid;place-items:center}
.bd-crt-ctrl .bd-crt-pp:hover{color:#1a1a10;
  background:linear-gradient(180deg,#fff08a 0%,#f0c800 100%);
  box-shadow:0 5px 0 #6b5a00,0 8px 12px rgba(0,0,0,.5)}
.bd-crt-ctrl .bd-crt-pp:active{box-shadow:0 0 0 #6b5a00}
.bd-crt-ctrl .sp{display:none}

/* reloj como display LED */
.bd-crt-t{font-family:var(--mono);font-size:11px;font-weight:700;color:#7dff9e;
  background:#080b10;border:1px solid #000;border-top-color:#1d232e;
  padding:8px 10px;min-width:104px;text-align:center;letter-spacing:.06em;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.9),0 0 9px rgba(125,255,158,.10);
  text-shadow:0 0 6px rgba(125,255,158,.55)}

.bd-crt-spd{background:linear-gradient(180deg,#2f4fd8 0%,#16268a 100%) !important;
  border-top-color:#5f7dff !important;color:#fff !important;min-width:44px !important}
.bd-crt-spd:hover{background:linear-gradient(180deg,#3f60ea 0%,#1d31a8 100%) !important;color:#fff !important}
.bd-crt-spd.alt{background:linear-gradient(180deg,#ff5fd0 0%,#a80c6e 100%) !important;border-top-color:#ff9ee2 !important}

/* ── fila de abajo: canales | imagen ─────────────────────────────────── */
.bd-crt-row{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:start;
  margin-top:13px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08)}
@media(max-width:620px){.bd-crt-row{grid-template-columns:1fr;gap:12px}}
.bd-crt-grp{min-width:0}
.bd-crt-lbl{display:block;font-family:var(--display);font-size:.32rem;color:#6f7b93;
  letter-spacing:.14em;margin-bottom:8px;line-height:1.6;text-shadow:0 1px 0 rgba(0,0,0,.6)}

/* canales: teclas cuadradas numeradas */
.bd-crt-dial{display:flex;gap:6px;flex-wrap:wrap;margin:0;padding:0;border:0}
.bd-crt-dial [data-ch]{font-family:var(--display);font-size:.44rem;padding:0;
  width:42px;height:38px;display:grid;place-items:center;text-align:center;color:#c3ccdd}
.bd-crt-dial [data-ch] small{display:none}
.bd-crt-dial [data-ch].on{color:#1a1a10;
  background:linear-gradient(180deg,#ffe75c 0%,#e0b800 100%) !important;border-top-color:#fff3a8 !important;
  box-shadow:0 3px 0 #6b5a00,0 0 12px rgba(255,220,31,.35) !important}
.bd-crt-dial [data-ch].on:hover{color:#1a1a10}

/* filtros: switches */
.bd-crt-fx{display:flex;gap:5px;flex-wrap:wrap;margin:0;justify-content:flex-end}
@media(max-width:620px){.bd-crt-fx{justify-content:flex-start}}
.bd-crt-fx button{font-family:var(--display);font-size:.32rem;padding:9px 8px;color:#8b95aa;line-height:1.5}
.bd-crt-fx button.on{color:#0d1a10;
  background:linear-gradient(180deg,#c9ff4a 0%,#88c400 100%) !important;border-top-color:#e4ff9c !important;
  box-shadow:0 3px 0 #4c6f00,0 0 12px rgba(182,255,0,.3) !important}
.bd-crt-fx button.on:hover{color:#0d1a10}

/* ── botón grande de play: anillo que late ───────────────────────────── */
.bd-crt-play i{background:radial-gradient(circle at 40% 32%,#ff4a62,#c00722);
  box-shadow:0 0 0 5px rgba(0,0,0,.35),0 0 0 9px rgba(255,255,255,.10),0 8px 22px rgba(0,0,0,.55);
  animation:bdLatido 2.4s ease-in-out infinite}
@keyframes bdLatido{0%,100%{box-shadow:0 0 0 5px rgba(0,0,0,.35),0 0 0 9px rgba(255,255,255,.10),0 8px 22px rgba(0,0,0,.55)}
  50%{box-shadow:0 0 0 5px rgba(0,0,0,.35),0 0 0 15px rgba(255,255,255,.045),0 8px 22px rgba(0,0,0,.55)}}
.bd-crt-play:hover i{transform:scale(1.07);animation:none}
.bd-crt-play:active i{transform:scale(.95)}

/* ── 33h · botón de silencio de la estática ──────────────────────────── */
.bd-crt-mute{font-size:13px !important;padding:8px 10px !important;min-width:42px !important;
  background:linear-gradient(180deg,#39404f 0%,#242a35 100%) !important}
.bd-crt-mute.off{opacity:.55;
  background:linear-gradient(180deg,#2b303b 0%,#1b1f27 100%) !important}

/* ══════════════════════════════════════════════════════════════════════
 * 33i · Botonera en UNA línea + cartel en pantalla (OSD)
 * ══════════════════════════════════════════════════════════════════════ */
.bd-crt-ctrl{gap:5px}
.bd-crt-set{display:inline-flex;gap:3px;align-items:stretch}
.bd-crt-sep{width:1px;align-self:stretch;margin:0 5px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.16),transparent)}
.bd-crt-ctrl button{font-size:11px;padding:9px 10px;min-width:38px}
.bd-crt-ctrl .bd-crt-pp{min-width:50px;padding:9px 0}
.bd-crt-t{min-width:96px;padding:8px 9px;font-size:10.5px}
.bd-crt-fxbtn{background:linear-gradient(180deg,#4b5566 0%,#2c3340 100%) !important;
  border-top-color:#68738a !important;color:var(--sss-mint) !important;
  font-family:var(--display) !important;font-size:.34rem !important;min-width:56px !important;
  padding:10px 8px !important}
.bd-crt-fxbtn:hover{background:linear-gradient(180deg,#5b6678 0%,#39424f 100%) !important}
@media(max-width:560px){
  .bd-crt-ctrl{gap:4px}
  .bd-crt-sep{display:none}
  .bd-crt-t{min-width:84px;order:9}
}

/* ── cartel en pantalla, como el de un televisor ─────────────────────── */
.bd-crt-osd{position:absolute;left:14px;right:14px;bottom:14px;z-index:6;
  display:flex;align-items:center;gap:11px;
  background:rgba(6,10,18,.82);border:2px solid rgba(255,255,255,.22);
  padding:11px 14px;opacity:0;transform:translateY(9px);pointer-events:none;
  transition:opacity .16s ease,transform .16s ease;
  box-shadow:0 6px 22px rgba(0,0,0,.6)}
.bd-crt-osd.on{opacity:1;transform:translateY(0)}
.bd-crt-osd-ic{font-size:17px;line-height:1;flex:none}
.bd-crt-osd-bar{display:flex;gap:3px;flex:1;height:17px;align-items:stretch}
.bd-crt-osd-bar i{flex:1;background:rgba(255,255,255,.13);border:1px solid rgba(0,0,0,.5)}
.bd-crt-osd-bar i.on{background:var(--sss-mint);box-shadow:0 0 7px rgba(182,255,0,.55)}
.bd-crt-osd-n{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--sss-mint);
  min-width:30px;text-align:right;flex:none;text-shadow:0 0 7px rgba(182,255,0,.5)}
.bd-crt-osd-tx{font-family:var(--display);font-size:.45rem;color:var(--sss-yellow);
  line-height:1.7;text-shadow:0 0 8px rgba(255,220,31,.4)}
@media(max-width:560px){.bd-crt-osd{left:9px;right:9px;bottom:9px;padding:9px 11px;gap:8px}
  .bd-crt-osd-tx{font-size:.36rem}}