@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700;800&display=swap');

/* ============ 1. variables ============ */
:root{--bg:#030603;--panel:#070b07;--panel2:#0d130d;--border:#1d3a24;--txt:#c9f5d0;--muted:#5f7a64;--accent:#00ff41;--accent2:#ffb000;--danger:#ff3131;--radius:6px;--input:#050805;--glow:0 0 8px rgba(0,255,65,.45)}
[data-theme="light"]{--bg:#0d0a02;--panel:#141002;--panel2:#1e1804;--border:#5a4a12;--txt:#ffd97a;--muted:#8a7648;--accent:#ffb000;--accent2:#00ff41;--danger:#ff3131;--input:#0d0a02;--glow:0 0 8px rgba(255,176,0,.4)}

/* ============ 2. base ============ */
*{box-sizing:border-box}html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--txt);font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;text-shadow:0 0 2px rgba(0,255,65,.25)}
a{color:inherit}.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
/* Columna principal: flex + gap (el ritmo lo marca el hueco, no los márgenes). */
.maincol{display:flex;flex-direction:column;gap:18px;padding:24px 0 48px}
code{background:var(--panel2);padding:1px 5px;border:1px solid var(--border);font-size:11px}

/* ============ 3. cabecera ============ */
.top{position:sticky;top:0;z-index:20;background:rgba(3,6,3,.92);border-bottom:1px solid var(--border)}
.top-inner{display:flex;gap:16px;align-items:center;padding:14px 0}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;letter-spacing:.3px;text-decoration:none;color:var(--accent);text-shadow:var(--glow);white-space:nowrap}
.logo small{font-weight:400;color:var(--muted);font-size:11px;border:1px solid var(--border);padding:2px 8px;border-radius:2px}
.logo .cursor{display:inline-block;width:9px;height:17px;background:var(--accent);vertical-align:-3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.search{flex:1;display:flex;background:var(--input);border:1px solid var(--border);border-radius:2px;overflow:hidden}
.search input{flex:1;background:transparent;border:0;color:var(--txt);padding:10px 12px;outline:none;font:inherit}
.search input::placeholder{color:color-mix(in srgb,var(--muted) 62%,var(--input))}   /* más apagado que el texto muted: se distingue de lo escrito */
.search button{background:var(--panel2);border:0;border-left:1px solid var(--border);color:var(--accent);padding:0 18px;cursor:pointer;font:inherit}
.search button:hover{background:var(--accent);color:#031003}
.nav{display:flex;gap:2px}.nav a{text-decoration:none;font-size:13px;color:var(--muted);padding:8px 12px;border-radius:2px;border:1px solid transparent}
.nav a.active,.nav a:hover{color:var(--accent);border-color:var(--border);background:var(--panel)}
.theme-btn{background:var(--panel);border:1px solid var(--border);color:var(--accent);border-radius:2px;padding:8px 12px;cursor:pointer;font:inherit}

/* ============ 4. hero ============ */
.hero{display:flex;justify-content:space-between;align-items:end;gap:16px;margin:28px 0 18px}
.hero h2{margin:0;font-size:24px;color:var(--txt)}
.hero h2::before{content:'# ';color:var(--accent)}
.hero p{margin:6px 0 0;color:var(--muted);font-size:13px}
.hero p::before{content:'// ';color:var(--muted)}

/* ============ 5. home: parrilla de cards ============ */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:.15s;position:relative}
.card:hover{border-color:var(--accent);box-shadow:var(--glow)}
/* Cuerpo de la tarjeta = columna flex con hueco: lo que no existe (meta vacía, sin acciones…) no deja márgenes ni espacio de más */
.card-body{display:flex;flex-direction:column;gap:6px;padding:12px 14px}.card-body>*{margin:0}.card-body>.meta:empty{display:none}
.card-body h3{margin:0;font-size:14px;line-height:1.4;font-weight:700}
.card-body h3 a{text-decoration:none;display:flex;align-items:center;gap:6px;min-width:0}
.card-body h3 .tname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* Meta de la card (listas + visitas): SIEMPRE una línea; la lista de listas se
   recorta con … para que no rompa el alto de la tarjeta. */
.card-body .meta{flex-wrap:nowrap;min-width:0}
.card-body .meta>span{white-space:nowrap}
.card-body .meta>span:last-child{flex:none;margin-left:auto}
/* Pila de banderas redondas SOLAPADAS (avatar-stack) para países del stream. */
.cstack{display:inline-flex;align-items:center;flex:none}
.cstack .fs{display:inline-flex;align-items:center;margin-left:var(--o,-5px)}
.cstack .fs:first-child{margin-left:0}
.cstack .fs img{display:block}
.cstack .fs.more{font-size:10px;color:var(--muted);margin-left:3px}
.cstack.lg .fs img{box-shadow:0 0 0 2px var(--panel)}
.cstack.lg .fs.more{font-size:12px;margin-left:8px}
/* Ficha, caja «Países»: lista de chips (bandera + nombre) con recorte: sólo los primeros y un botón «ver los N» (JS mínimo en línea) */
.filters.cap .chip.extra{display:none!important}.filters.cap.all .chip.extra{display:inline-flex!important}
/* «ver los N»: mismo chip que los países (borde y fondo normales); sólo el texto en verde y la flecha lo marcan como acción */
.filters.cap .morebtn{cursor:pointer;color:var(--accent);font-family:inherit;font-size:12px;display:inline-flex;align-items:center;gap:6px;height:30px;box-sizing:border-box;margin:0}
.filters.cap .morebtn:hover{border-color:var(--accent)}
.filters.cap a.chip,.filters.cap .chip a:hover{color:var(--accent)}
.card-body h3 a:hover{color:var(--accent)}
/* placeholder de icono de canal: sin logo o URL rota (logoPh() en layout) */
.logo-ph{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:var(--panel2);border:1px solid var(--border);border-radius:2px;color:var(--muted);font-size:11px;vertical-align:-6px;margin-right:6px;flex:none}
.logo-ph.big{width:30px;height:30px;font-size:15px;margin-right:8px}
.thumb{position:relative;aspect-ratio:16/9;background:#000;display:block;overflow:hidden;border-bottom:1px solid var(--border)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* barra de progreso de «Seguir viendo» sobre la miniatura (estilo Netflix) */
.thumb .prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.18);z-index:2}
.thumb .prog>i{display:block;height:100%;background:var(--accent)}
/* scanlines solo sobre imagen */
.thumb::after,.scanline::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.52) 0 3px,rgba(0,0,0,0) 3px 6px)}   /* scanlines MUY marcadas: líneas de 3 px al 52 % cada 6 px */
.thumb::before,.scanline::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.35) 100%)}   /* viñeta suave de tubo CRT (estática) */
.side-item>.scanline::after{background:repeating-linear-gradient(0deg,rgba(0,0,0,.5) 0 2px,rgba(0,0,0,0) 2px 4px)}   /* miniaturas pequeñas del lateral: líneas más finas para que no se coman la imagen */
/* ANIMACIÓN: las líneas «caminan» hacia abajo y de vez en cuando parpadean, como un monitor CRT. Sólo con transform/opacity (los dos baratos: van en la GPU, no repintan) y sólo en lo que se mira:
   el destacado de la portada, la tarjeta con el ratón encima y el destacado activo del lateral. El resto (cientos de tarjetas) se queda estático. El truco: la capa es 6 px más alta y se desplaza
   exactamente un periodo (6 px; 4 px en las pequeñas), así el bucle es continuo y no se ve el salto. */
@keyframes scan-crawl{from{transform:translateY(0)}to{transform:translateY(6px)}}
@keyframes scan-crawl-sm{from{transform:translateY(0)}to{transform:translateY(4px)}}
@keyframes scan-flicker{0%,90%,100%{opacity:1}92%{opacity:.62}94%{opacity:1}96%{opacity:.8}}
.hero-img .scanline::after,.card:hover .thumb::after{inset:-6px 0;animation:scan-crawl .6s linear infinite}
.hero-img .scanline::after{animation:scan-crawl .6s linear infinite,scan-flicker 7s steps(1) infinite}
.side-item.on>.scanline::after,.side-item:hover>.scanline::after{inset:-4px 0;animation:scan-crawl-sm .5s linear infinite}
/* Banda de refresco del tubo CRT: una franja clara y suave que baja despacio por TODA la imagen del destacado (7 s de recorrido + 4 s de pausa fuera de pantalla). Sólo transform (compositor). */
@keyframes scan-roll{0%{transform:translateY(-110%)}64%,100%{transform:translateY(340%)}}
.hero-img{overflow:hidden}
.hero-img::after{content:'';position:absolute;left:0;right:0;top:0;height:30%;z-index:2;pointer-events:none;mix-blend-mode:screen;background:linear-gradient(to bottom,rgba(190,255,205,0),rgba(190,255,205,.14) 35%,rgba(190,255,205,.34) 50%,rgba(190,255,205,.14) 65%,rgba(190,255,205,0));animation:scan-roll 11s linear infinite}
@media (prefers-reduced-motion:reduce){.hero-img::after{display:none}}
@media (prefers-reduced-motion:reduce){.hero-img .scanline::after,.card:hover .thumb::after,.side-item.on>.scanline::after,.side-item:hover>.scanline::after{animation:none;inset:0}}
/* la miniatura lleva borde de 1px (verde al hover): el scanline va DENTRO para no ensuciar el borde */
.strip a::after,.shots-row a::after{content:'';position:absolute;inset:1px;z-index:1;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 2px,transparent 2px 5px)}
.scanline{position:relative;display:block;overflow:hidden}
.badges{position:absolute;left:10px;top:10px;display:flex;gap:6px;z-index:2}
.empty{border:1px dashed var(--border);border-radius:var(--radius);padding:64px 30px;text-align:center;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:16px}
.empty>i{font-size:56px;line-height:1;color:var(--accent2);opacity:.9;filter:drop-shadow(0 0 18px color-mix(in srgb,var(--accent2) 45%,transparent))}
.empty>p{margin:0;font-size:15px}
.grid>.empty{grid-column:1/-1;width:100%}
.pager{display:flex;gap:10px;align-items:center;justify-content:center;color:var(--muted);font-size:13px}
.pager a{padding:8px 14px;border:1px solid var(--border);border-radius:2px;text-decoration:none;background:var(--panel);color:var(--txt)}
.pager a:hover{border-color:var(--accent);color:var(--accent)}

/* ============ 6. watch: player + lateral ============ */
.player-layout{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(260px,1fr);gap:16px;margin:22px 0} /* mismas columnas que el destacado de la portada (.hero-news) */
.player-layout>div{display:flex;flex-direction:column;gap:16px;min-width:0}
.player-layout>div>*{margin:0}
.player{background:#000;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9}
.player .video-js,.player video{width:100%!important;height:100%!important;object-fit:contain}
.video-js{width:100%;aspect-ratio:16/9}
.side{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px;height:fit-content}
.side>.pill{display:inline-block;margin-bottom:12px}
.side h3,.player-layout h2{color:var(--txt)}
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.strip.c5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1100px){.strip.c5{grid-template-columns:repeat(4,1fr)}}
.strip a,.shots-row a{position:relative;display:block;line-height:0;border-radius:var(--radius);overflow:hidden}
.strip img,.shots-row img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius);border:1px solid var(--border)}
.strip a:hover img,.shots-row a:hover img{border-color:var(--accent)}

/* ============ 7. formularios y tablas ============ */
.forms{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.form-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:18px}
/* Cajas con título (h3 como primer hijo): el h3 no lleva márgenes y el espacio entre título y contenido lo da un `gap` flex (columna). La prosa (.prose, p. ej. /disclaimer) sigue en flujo normal. */
.form-card>h3{margin:0}
.form-card:has(>h3){display:flex;flex-direction:column;gap:12px}
.form-card:has(>h3)>*{margin-top:0!important;margin-bottom:0!important}
.form-card.prose{display:block}.form-card.prose>*{margin-top:revert!important;margin-bottom:revert!important}.form-card.prose>h3{margin:1.2em 0 .5em!important}.form-card.prose>h3:first-child{margin-top:0!important}
.form-card input,.form-card textarea{width:100%;background:var(--input);border:1px solid var(--border);color:var(--txt);border-radius:2px;padding:10px 12px;margin:6px 0;font:inherit}
.form-card input:focus,.form-card textarea:focus{border-color:var(--accent);outline:none;box-shadow:var(--glow)}
.btn{background:var(--accent);color:#031003;font-weight:800;border:0;border-radius:2px;padding:10px 16px;cursor:pointer;width:100%;font:inherit;text-shadow:none;text-decoration:none}
.btn:hover{box-shadow:var(--glow)}.btn:active{transform:scale(.99)}
.btn-auto{width:auto!important;padding:8px 14px!important}
.titlebar{display:flex;align-items:center;gap:10px;width:100%}
.titlebar h2{margin:0;flex:1;display:flex;align-items:center}
.titlebar .btn{width:auto;padding:8px 14px;font-size:13px;white-space:nowrap}
/* barra home: pill a la izqda, botones a la dcha, TODO misma altura por stretch */
.filterbar{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.filterbar .left{flex:1;min-width:200px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.filterbar .left .filters{margin:0}
.filterbar .pill{min-height:37px}
/* El conteo es un botón: mismo tamaño y relieve que los demás botones de la barra (.btn-auto) */
.filterbar button.pill.sigbtn{cursor:pointer;font:inherit;font-weight:400;padding:8px 14px;border-radius:2px;gap:8px}
.sheet .chip .sn{opacity:.6;margin-left:2px}
.filterbar button.pill.sigbtn:hover{box-shadow:var(--glow)}
.filterbar .right{display:flex;gap:8px;margin-left:auto;align-items:stretch;flex-wrap:wrap}
.alert{background:var(--panel);border:1px solid var(--accent);padding:10px;border-radius:2px;margin-bottom:12px;font-size:13px}
.alert::before{content:'[+] ';color:var(--accent);font-weight:700}
select.hselect{background:var(--input);border:1px solid var(--accent);color:var(--accent);border-radius:2px;padding:8px 10px;font:12px 'JetBrains Mono',ui-monospace,monospace;max-width:100%;box-shadow:var(--glow)}
select.hselect:focus{outline:none}
table.grid-table{width:100%;border-collapse:collapse;font-size:13px}
table.grid-table th{text-align:left;color:var(--muted);font-weight:400;font-size:11px;padding:8px 10px;border-bottom:1px solid var(--border)}
table.grid-table th::before{content:'~/'}
table.grid-table th a{color:inherit;text-decoration:none;white-space:nowrap}
table.grid-table th a:hover{color:var(--accent)}
table.grid-table td{padding:8px 10px;border-bottom:1px dashed var(--border);vertical-align:middle}
table.grid-table tbody tr:last-child td{border-bottom:0}   /* la última fila no lleva la línea punteada de abajo */
table.grid-table tr:hover td{background:rgba(0,255,65,.04)}
table.grid-table .actions{white-space:nowrap;text-align:right}
table.grid-table .btn{width:auto;display:inline-block;text-decoration:none;padding:5px 10px;font-size:12px;margin-left:6px}
/* /sources: la columna `sync` se queda en UNA línea (el badge no se parte) y
   se lleva el ancho que necesite; sobra de la de country */
table.src-table td:nth-child(5),table.src-table th:nth-child(5){white-space:nowrap}
table.src-table th:nth-child(5) a{padding-right:2px}

/* ============ 8. componentes ============ */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:4px 10px;border-radius:2px;border:1px solid var(--border);background:var(--panel);color:var(--muted)}
.pill.live{color:#031003;background:var(--accent);border-color:var(--accent);font-weight:700;text-shadow:none}
.badge{font-size:11px;font-weight:700;padding:3px 8px;border-radius:2px;background:#000;border:1px solid var(--accent);color:var(--accent)}
/* resolución: un color por tramo (View::resBadge); fondo negro sólido (sin alfa) para leerse sobre cualquier imagen */
.badge.res{--res:var(--muted);background:#000;border-color:var(--res);color:var(--res)}
.badge.res-4k{--res:#ff5ce1}
.badge.res-1080{--res:#2ee6ff}
.badge.res-720{--res:#7aa8ff}
.badge.live{background:var(--accent);color:#031003;border-color:var(--accent)}
.badge.static{background:#000;border-color:var(--accent2);color:var(--accent2)}
.badge.vod{background:#000;border-color:var(--accent);color:var(--accent)}
/* NO SIGNAL: mismo aspecto en la tarjeta (.badge), la cabecera de la ficha y la barra lateral (.pill): fondo negro, borde y texto rojos (decisión de Luis; el hero lo pisaba con rojo sólido) */
.badge.nosignal,.pill.nosignal,.hero-cap .pill.nosignal:not(.live){background:#000;border-color:var(--danger);color:var(--danger)}
/* Resto de estados en el pill (cabecera de la ficha): mismos colores que sus badges de tarjeta; el hero los pintaba todos en rojo sólido por `.pill:not(.live)` */
.pill.static,.hero-cap .pill.static:not(.live),.pill.radio,.hero-cap .pill.radio:not(.live){background:#000;border-color:var(--accent2);color:var(--accent2)}
.pill.vod,.hero-cap .pill.vod:not(.live){background:#000;border-color:var(--accent);color:var(--accent)}
.badge.radio{background:#000;border-color:var(--accent2);color:var(--accent2)}
.cc{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.08em;padding:2px 6px;border-radius:2px;background:#000;border:1px solid var(--accent2);color:var(--accent2);vertical-align:middle;white-space:nowrap;cursor:help;margin-left:5px}
.flag{display:inline-block;vertical-align:-3px;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.45)}
.chip{text-decoration:none;font-size:12px;padding:6px 12px;border-radius:2px;border:1px solid var(--border);background:var(--panel);color:var(--muted)}
.chip:hover{border-color:var(--accent);color:var(--accent);box-shadow:var(--glow)}
.chip.active{background:var(--accent);color:#031003;border-color:var(--accent);font-weight:700;text-shadow:none}
.kv{display:flex;justify-content:space-between;font-size:12px;padding:8px 0;border-bottom:1px dashed var(--border);gap:10px}
.kv span:first-child{color:var(--muted)}.kv span:first-child::before{content:'> ';color:var(--accent)}
.kv a{color:inherit;text-decoration:none}.kv a:hover{color:var(--accent)}
.meta{color:var(--muted);font-size:11px;display:flex;gap:10px;flex-wrap:wrap}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.flabel{font-size:11px;color:var(--muted);min-width:52px}
.flabel::before{content:'~/';color:var(--accent)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px;margin:16px 0 0}
.stats.c8{grid-template-columns:repeat(8,minmax(0,1fr))}
@media (max-width:1100px){.stats.c8{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:560px){.stats.c8{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{background:var(--panel2);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px}
.stat b{display:block;font-size:21px;line-height:1.1;color:var(--txt);text-shadow:none}
.stat span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.stat.good{border-color:var(--accent)}.stat.good b{color:var(--accent)}
.stat.warn{border-color:var(--accent2)}.stat.warn b{color:var(--accent2)}
.stat.bad{border-color:var(--danger)}.stat.bad b{color:var(--danger)}
.urlbox{display:flex;align-items:center;gap:6px;min-width:0;max-width:100%;border:1px solid var(--border);border-radius:2px;background:var(--input);padding:2px 2px 2px 8px}
.kv .urlbox{max-width:72%}
.urlbox code{flex:1;min-width:0;font-size:10px;color:var(--muted);background:none;border:0;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.urlbox .btn{padding:3px 9px!important;font-size:11px}
.progwrap{width:100%;height:14px;background:var(--input);border:1px solid var(--border);border-radius:2px;overflow:hidden;margin:12px 0}
.progbar{height:100%;width:40%;background:repeating-linear-gradient(45deg,var(--accent) 0 10px,transparent 10px 20px);border-right:2px solid var(--accent);animation:progslide 1s linear infinite}
@keyframes progslide{from{transform:translateX(-100%)}to{transform:translateX(350%)}}
.proglog{font-size:12px;color:var(--muted);min-height:36px}
.proglog::before{content:'> ';color:var(--accent)}

/* sheets modales (filtros/orden): panel lateral full-height */
.sheetmodal{display:none;position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.75);justify-content:flex-end}
.sheet{width:min(560px,100%);height:100vh;height:100dvh;background:var(--panel);border-left:1px solid var(--accent);overflow-y:auto;padding:20px;box-shadow:var(--glow);display:flex;flex-direction:column;gap:14px}
.sheethead{display:flex;align-items:center;justify-content:space-between}
.sheethead h3{margin:0;font-size:16px}
.sheethead h3::before{content:'# ';color:var(--accent)}
.sheet .chip{padding:10px 14px;font-size:13px}

/* ============ 9. pie ============ */
.footer{margin:30px 0 40px;color:var(--muted);font-size:12px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;border-top:1px solid var(--border);padding-top:14px}

/* ============ 10. responsive ============ */
@media(max-width:900px){.player-layout{grid-template-columns:minmax(0,1fr)}.top-inner{flex-wrap:wrap}.strip,.strip.c5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.strip,.strip.c5{grid-template-columns:repeat(2,1fr)}}

/* Al final A PROPÓSITO (gana por orden): los hijos directos de la columna
   principal no llevan margen; el ritmo lo marca el `gap` de `.maincol`. */
.maincol>*{margin:0}

/* buscador dentro de las hojas País / Etiqueta / Fuente */
.sheetq{width:100%;box-sizing:border-box;background:var(--input);border:1px solid var(--border);color:var(--txt);border-radius:2px;padding:10px 12px 10px 34px;min-height:40px;margin:0;font:inherit}
.sheetq::placeholder{color:var(--muted)}
.sheetq:focus{outline:none;border-color:var(--accent);box-shadow:var(--glow)}

/* ===== Portada "/" (src/Front.php): destacado + lateral en directo + franjas + etiquetas/países/fuentes ===== */
.front{display:flex;flex-direction:column;gap:22px}
.hero-news{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(260px,1fr);gap:16px;align-items:stretch}
.hero-main{position:relative;background:#000;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;min-width:0}
.hero-main::before{content:"";display:block;padding-top:56.25%}  /* 16:9 por ancho; si el lateral es más alto, se estira (cover) */
.hero-img{position:absolute;inset:0;display:block;line-height:0}
.hero-img .scanline{position:absolute;inset:0;display:block}
.hero-img .scanline img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#000}
.hero-img .scanline img.hi{opacity:0;transition:opacity .8s ease}
.hero-img .scanline img.hi.on{opacity:1}
.hero-play{position:absolute;inset:0;z-index:3;pointer-events:none;display:flex;align-items:center;justify-content:center;font-size:76px;color:var(--accent);text-shadow:var(--glow);opacity:.85;transition:.15s;padding-bottom:70px}
.hero-img:hover .hero-play{opacity:1;transform:scale(1.06)}
/* info del canal DENTRO de la imagen: capa translúcida con desenfoque abajo */
.hero-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:34px 18px 16px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;pointer-events:none;
  background:linear-gradient(to top,rgba(3,6,3,.88) 0%,rgba(3,6,3,.66) 55%,rgba(3,6,3,0) 100%)}
.hero-cap::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(0,0,0,.28);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);-webkit-mask-image:linear-gradient(to top,#000 40%,transparent);mask-image:linear-gradient(to top,#000 40%,transparent)}
.hero-cap a,.hero-cap .chip{pointer-events:auto}
.hero-cap h2{margin:0;font-size:31px;line-height:1.2;text-shadow:0 2px 10px rgba(0,0,0,.8)}
.hero-cap h2 a{color:#fff;text-decoration:none}
.hero-cap h2 a:hover{color:var(--accent);text-shadow:var(--glow)}
.hero-meta{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;min-width:0;overflow:hidden}
/* cada pastilla en UNA línea y sin encogerse (si no, con `nowrap` el texto se parte en 2 filas dentro del badge) */
.hero-meta>*{flex:none;white-space:nowrap}
.hero-side{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;display:flex;flex-direction:column;gap:4px;justify-content:space-between}
.hero-side h3{margin:0 0 4px;font-size:13px;display:flex;align-items:center;gap:8px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.side-item{display:flex;gap:9px;align-items:center;text-decoration:none;color:var(--txt);padding:4px 6px;border:1px solid transparent;border-radius:var(--radius);transition:.12s}
.side-item>.scanline{width:92px;flex:none;border-radius:2px}
.side-item>.scanline img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#000;display:block}
.side-item>.side-txt{min-width:0;display:flex;flex-direction:column;gap:4px}
.side-item b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-item.on,.side-item:hover{border-color:var(--accent);box-shadow:var(--glow)}
/* Franja de la portada: columna flex; el `gap` separa el título de las tarjetas y de la barra de scroll (la barra se acerca 8 px para quedar como antes) */
.fstrip{display:flex;flex-direction:column;gap:12px}
.fstrip>.fs-bar{margin-top:-8px}
.fstrip>h3,.front .form-card>h3{display:flex;align-items:center;gap:8px;margin:0;font-size:15px}
.fstrip>h3>a,.front .form-card>h3>a{margin-left:auto;font-size:12px;color:var(--muted);text-decoration:none;font-weight:400}
.fstrip>h3>a:hover,.front .form-card>h3>a:hover{color:var(--accent)}
.fs-wrap{position:relative;--g:0px}   /* ancho del contenido, no del navegador */
/* Sin salto de carga: el JS (fit) fija el margen/ancho exactos; hasta entonces la franja ocupa su sitio pero invisible. Respaldo sin JS: se muestra a 1,2 s. */
.fs-wrap:not(.ready){opacity:0;animation:fsshow .01s 1.2s forwards}.fs-wrap.ready{opacity:1;transition:opacity .15s ease}
@keyframes fsshow{to{opacity:1}}
.fstrip-row{display:grid;grid-auto-flow:column;grid-auto-columns:230px;gap:14px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding:2px 0 6px;cursor:grab} /* ancho FIJO: con `minmax(230px,250px)` las tarjetas crecían a 250 cuando la sección tenía pocos elementos (y cabían) → tamaño distinto según el nº */
.fstrip-row::-webkit-scrollbar{display:none}
.fstrip-row.drag{cursor:grabbing;user-select:none}.fstrip-row.drag a{pointer-events:none}
.fs-fade{position:absolute;top:0;bottom:6px;width:min(14vw,180px);pointer-events:none;z-index:7;opacity:0;transition:opacity .2s}
.fs-fade.l{left:0;background:linear-gradient(to right,var(--bg),rgba(3,6,3,0))}
.fs-fade.r{right:0;background:linear-gradient(to left,var(--bg),rgba(3,6,3,0))}
.fs-wrap.can-l .fs-fade.l,.fs-wrap.can-r .fs-fade.r{opacity:1}
.fs-nav{position:absolute;top:calc(50% - 22px);z-index:8;width:40px;height:40px;border-radius:50%;border:1px solid var(--accent);background:rgba(3,6,3,.82);color:var(--accent);cursor:pointer;opacity:0;pointer-events:none;transition:.15s;font-size:14px;padding:0}
.fs-nav.l{left:14px}.fs-nav.r{right:14px}
.fs-wrap.can-l:hover .fs-nav.l,.fs-wrap.can-r:hover .fs-nav.r{opacity:1;pointer-events:auto}
.fs-nav:hover{background:var(--accent);color:#031003;box-shadow:var(--glow)}
.fs-bar{position:relative;height:4px;margin-top:4px;background:var(--border);border-radius:2px;cursor:pointer}
.fs-thumb{position:absolute;top:-2px;height:8px;min-width:48px;background:var(--accent);border-radius:4px;box-shadow:var(--glow);cursor:grab}
.fs-thumb:active{cursor:grabbing}
html,body{overflow-x:clip}
.duo{display:grid;grid-template-columns:1.5fr 1fr;gap:16px}
.duo.eq{grid-template-columns:1fr 1fr}
.mini-cloud{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;line-height:1.3}
.tagc{color:var(--txt);text-decoration:none}.tagc sup{font-size:10px;color:var(--muted);margin-left:2px;vertical-align:super;line-height:0}
.tagc:hover{color:var(--accent);text-shadow:var(--glow);opacity:1!important}
@media (max-width:900px){.hero-news,.duo,.duo.eq{grid-template-columns:1fr}.hero-main{min-height:0}.hero-cap h2{font-size:24px}.hero-play{font-size:56px;padding-bottom:50px}}
/* franjas y sugeridos: la meta lleva UN solo dato ⇒ a la izquierda, no empujado a la derecha por `.meta>span:last-child` */
.fstrip .card-body .meta>span:last-child{margin-left:0}

/* ===== Barra de scroll del sitio: fina y verde (Chromium/Safari por ::-webkit-scrollbar; Firefox por scrollbar-color) ===== */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg);border-left:1px solid var(--border)}
::-webkit-scrollbar-thumb{background:var(--accent);border-radius:6px;border:2px solid var(--bg);box-shadow:var(--glow)}
::-webkit-scrollbar-thumb:hover{filter:brightness(1.18)}
::-webkit-scrollbar-corner{background:var(--bg)}
@supports not selector(::-webkit-scrollbar){*{scrollbar-width:thin;scrollbar-color:var(--accent) var(--bg)}}

/* barra "Para ti" de la portada */

/* "Ahora en directo": rotación automática (src/Front.php) — texto que se desliza, barra de progreso en el canal activo */
.hero-cap>*{transition:opacity .24s ease,transform .24s ease}
.hero-cap.swap>*{opacity:0;transform:translateY(10px)}
.hero-news{--hero-t:7000ms}
.side-item{position:relative;overflow:hidden}
.side-prog{position:absolute;left:0;top:0;bottom:0;width:0;z-index:3;pointer-events:none;border:0;border-radius:inherit;
  background:rgba(0,255,65,.16);background:color-mix(in srgb,var(--accent) 17%,transparent);transition:opacity .2s ease}
.side-item.on .side-prog{animation:heroprog var(--hero-t) linear forwards}
/* con el ratón encima (o foco/toque) la barra se OCULTA en vez de quedarse congelada */
.hero-news.paused .side-prog{opacity:0;animation-play-state:paused}
@keyframes heroprog{from{width:0}to{width:100%}}
@media (prefers-reduced-motion:reduce){.hero-img .scanline img.hi,.hero-cap>*{transition:none}.side-item.on .side-prog{animation:none;width:100%;opacity:.6}.skel::after{animation:none}}
/* destacado: banderas, etiquetas y resolución con la misma altura (30 px) */
.hero-meta .badge{display:inline-flex;align-items:center;height:30px;padding:0 12px;box-sizing:border-box;font-size:13px}
.hero-meta .chip{height:30px;box-sizing:border-box}
/* capa del destacado también en /watch (View::heroCap): título con logo */
.hero-title{display:flex;align-items:flex-end;gap:12px;max-width:100%}
/* Logo en contenedor CUADRADO reutilizable (View::logoSq): el tamaño sale de --ls y el relleno es proporcional; data-lum=dark = placa clara; data-solid = sin relleno */
.logo-sq{--ls:76px;width:var(--ls);height:var(--ls);object-fit:contain;flex:none;padding:calc(var(--ls) * .12);border:1px solid var(--border);border-radius:4px;background:rgba(0,0,0,.45);box-sizing:border-box;pointer-events:none}
.logo-sq[hidden]{display:none}
.logo-sq[data-lum="dark"]{background:rgba(236,240,236,.94);border-color:rgba(236,240,236,.94)}
.logo-sq[data-solid]{padding:0;width:auto;height:auto;max-width:calc(var(--ls) * 2);max-height:var(--ls);object-fit:fill}   /* logo SÓLIDO: sin relleno y sin franjas de «letterbox»: la caja toma la proporción del logo (hasta 2:1 de ancho y la altura de la caja cuadrada) */
.hero-logo{--ls:76px}
.hero-cap .pill:not(.live){background:var(--danger);border-color:var(--danger);color:#fff}
.player .hero-cap{padding-top:60px}
@media (max-width:900px){.hero-logo{--ls:58px}}
.hero-cap h2{color:#fff}

/* lateral «Ahora en directo»: resolución + etiquetas (spans, no enlaces: el item entero ya es un <a>) */
.side-item small{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;min-width:0;overflow:hidden}
.side-item .badge{font-size:11px;padding:1px 6px;line-height:1.5}
.side-tags{display:flex;gap:5px;min-width:0;flex:1 1 auto;overflow:hidden}
.side-item small>*{flex:none}
.side-item small>.side-tags{flex:1 1 auto}
.stag{display:block;max-width:100%;font-size:11px;line-height:1.5;padding:1px 7px;border:1px solid var(--border);border-radius:3px;color:var(--muted);background:rgba(0,0,0,.35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stag{min-width:46px;flex:0 1 auto}
.stag:nth-child(n+2){flex:none;max-width:90px;overflow:hidden;text-overflow:ellipsis}
.stag i{font-size:9px;margin-right:4px}
/* El chip de CATEGORÍA del lateral no se recorta (icono + nombre completo) */
.stag.cat{flex:none;max-width:none;overflow:visible}
/* barra verde de cada carrusel: sólo con el ratón sobre la sección (el hueco se reserva, sin saltos); en táctil queda siempre visible */
.fs-bar{opacity:0;transition:opacity .2s ease}
.fstrip:hover .fs-bar,.fstrip:focus-within .fs-bar,.fs-bar:active{opacity:1}
@media (hover:none){.fs-bar{opacity:1}}

/* ===== Móvil: cabecera compacta y portada ===== */
@media (max-width:900px){.hero-news,.duo,.duo.eq{grid-template-columns:minmax(0,1fr)}.hero-side{min-width:0}}
@media (max-width:640px){
  /* cabecera: logo + tema en una fila, buscador a todo el ancho, menú con scroll horizontal; ya no es sticky (ocupaba ~190 px de pantalla) */
  .top{position:static}
  .top-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:10px 0}
  .logo{grid-area:1/1}.theme-btn{grid-area:1/2;padding:7px 11px}
  .search{grid-area:2/1/3/3;min-width:0}.search input{min-width:0;padding:9px 10px}.search button{padding:0 14px}
  .nav{grid-area:3/1/4/3;overflow-x:auto;scrollbar-width:none;gap:6px;margin:0 -2px}.nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap;padding:7px 11px}
  /* portada */
  /* «Para ti»: en móvil sólo el icono gris de localización + el botón con la bandera (sin el texto «Para ti» ni la pista; el nombre del país se mantiene) */
  .hero-cap{padding:28px 12px 12px;gap:6px}
  .hero-cap h2{font-size:21px}
  .hero-logo{--ls:46px}
  .hero-meta{gap:6px}
  .hero-meta a.chip:nth-of-type(n+2){display:none}
  .hero-play{font-size:48px}
  .hero-side{padding:8px 10px}
  .side-item .side-tags{display:none}
  .side-item>.scanline{width:84px}
  .front{gap:22px}
  .fstrip>h3{font-size:15px}
}

/* Márgenes laterales: `.maincol`/`.top-inner` pisaban el `padding:0 20px` de `.wrap` con `padding:… 0`, y por debajo de 1180 px el contenido tocaba los bordes.
   Con dos clases ganan al padding vertical sin tocar el escritorio (>1220 px, donde `.wrap` ya queda centrado y con aire). */
@media (max-width:1220px){.wrap.maincol,.wrap.top-inner{padding-left:20px;padding-right:20px}}
@media (max-width:640px){.wrap.maincol,.wrap.top-inner{padding-left:14px;padding-right:14px}}

/* tema en el pie (ya no está en la cabecera); móvil: logo + buscador en la misma fila, menú debajo */
.footer .theme-btn{padding:4px 10px;color:var(--accent)}
@media (max-width:640px){
  .top-inner{grid-template-columns:auto minmax(0,1fr)}
  .logo{grid-area:1/1}
  .search{grid-area:1/2}
  .nav{grid-area:2/1/3/3}
}
/* móvil/táctil: se desliza con el dedo, sin flechas en los carruseles */
@media (max-width:640px),(hover:none){.fs-nav{display:none}}

/* /sources en móvil: la tabla pasa a tarjetas (nombre + acciones arriba; país, streams, señal y sync debajo con su etiqueta) */
@media (max-width:640px){
  .hero .titlebar{flex-wrap:wrap;gap:10px}
  .hero .titlebar>div:first-child{flex:1 1 100%!important}
  .hero .titlebar>.btn{flex:1 1 0;justify-content:center}
  .hero h2{font-size:22px}
  table.src-table,table.src-table tbody{display:block}
  table.src-table thead{display:none}
  table.src-table tr{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 2px;border-bottom:1px dashed var(--border)}
  table.src-table td{display:block;padding:0;border:0}
  table.src-table tr:hover td{background:none}
  table.src-table td:first-child{flex:1 1 calc(100% - 170px);min-width:0;overflow-wrap:anywhere}
  table.src-table td.actions{order:1;margin-left:auto}
  table.src-table td:first-child .badge{white-space:nowrap;display:inline-block;margin-top:4px}
  table.src-table td:nth-child(n+2):nth-child(-n+5){order:2;font-size:12px;color:var(--txt)}
  table.src-table td:nth-child(3)::before{content:'streams ';color:var(--muted)}
  table.src-table td:nth-child(4)::before{content:'con señal ';color:var(--muted)}
  table.src-table td:nth-child(5)::before{content:'sync ';color:var(--muted)}
  table.src-table td:nth-child(2):empty{display:none}
}

/* ===== Móvil: resto de secciones ===== */
@media (max-width:640px){
  /* listado /browse: 2 columnas compactas (antes 1 tarjeta por pantalla, 7.000 px de página) */
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .grid .badges{left:6px;top:6px;gap:4px;flex-wrap:wrap}
  .grid .badge{font-size:10px;padding:2px 6px}
  .grid .card-body{padding:8px 9px;gap:4px}
  .grid .card-body h3{font-size:12px}
  .grid .card-body .meta{font-size:10px;gap:6px;flex-wrap:wrap}
  /* selects anchos (p.ej. «importando a» en /submit) no pueden salirse de la pantalla */
  select.hselect{width:100%;max-width:100%;min-width:0}
  form:has(>select.hselect){min-width:0;max-width:100%;flex:1 1 100%}
  /* modales con `min-width` inline (Alta masiva: 420 px) ganaban al `max-width:92vw` y se salían de la pantalla */
  .form-card[style*="min-width"]{min-width:0!important;width:92vw;box-sizing:border-box}
}

/* texto de botones que en móvil quedan sólo con icono */
@media (max-width:640px){.btn-txt{display:none}}

/* ===== Preferencias en la cabecera: país (único) + idioma, desplegable a la derecha ===== */
.prefs{position:relative;flex:none}
.pref-btn{display:inline-flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--border);color:var(--txt);border-radius:2px;padding:8px 12px;cursor:pointer;font:inherit;font-size:13px;line-height:1;white-space:nowrap;transition:.15s}
.pref-btn:hover,.pref-btn[aria-expanded="true"]{border-color:var(--accent);color:var(--accent);box-shadow:var(--glow)}
.pref-btn .flag{display:block;border-radius:50%}
.pref-lang{font-size:11px;color:var(--muted);border:1px solid var(--border);border-radius:2px;padding:2px 5px;letter-spacing:.06em}
.pref-btn .fa-caret-down{font-size:11px;color:var(--muted)}
.pref-panel{position:absolute;right:0;top:calc(100% + 10px);z-index:60;width:min(380px,92vw);background:var(--panel);border:1px solid var(--accent);border-radius:var(--radius);box-shadow:var(--glow),0 12px 30px rgba(0,0,0,.5);padding:14px;display:flex;flex-direction:column;gap:14px}
.pref-panel[hidden]{display:none}
.pref-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pref-row.col{flex-direction:column;align-items:stretch;gap:8px}
.pref-lbl{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pref-lbl small{text-transform:none;letter-spacing:0;font-size:11px;opacity:.8}
.seg{display:inline-flex;border:1px solid var(--border);border-radius:2px;overflow:hidden}
.seg a,.seg button{padding:7px 14px;font:inherit;font-size:13px;text-decoration:none;color:var(--muted);background:var(--input);border:0;cursor:pointer}
.seg a+a,.seg button+button{border-left:1px solid var(--border)}
.seg a:hover,.seg button:hover{color:var(--accent)}
.seg a.on,.seg button.on{background:var(--accent);color:#031003;font-weight:700}
.pref-q{width:100%;box-sizing:border-box;background:var(--input);border:1px solid var(--border);color:var(--txt);border-radius:2px;padding:9px 12px;font:inherit}
.pref-q:focus{outline:none;border-color:var(--accent);box-shadow:var(--glow)}
.pref-list{max-height:min(46vh,340px);overflow-y:auto;align-content:flex-start;padding-right:6px}
/* Barra vertical del desplegable = la de las franjas de la portada (.fs-bar/.fs-thumb): pista fina color --border, pulgar verde con brillo.
   OJO: `scrollbar-width` anula ::-webkit-scrollbar en Chromium, por eso sólo se usa en el respaldo de Firefox. */
.pref-list::-webkit-scrollbar{width:8px}
.pref-list::-webkit-scrollbar-track{background:var(--border);border:0;border-radius:2px;margin:2px 0}
.pref-list::-webkit-scrollbar-thumb{background:var(--accent);border:0;border-radius:4px;min-height:48px;box-shadow:var(--glow)}
.pref-list::-webkit-scrollbar-thumb:hover{filter:brightness(1.18)}
@supports not selector(::-webkit-scrollbar){.pref-list{scrollbar-width:thin;scrollbar-color:var(--accent) var(--border)}}
.pref-wait{color:var(--muted);padding:6px}
/* país/idioma + cuenta: una fila flex con hueco, sin márgenes sueltos */
.hd-prefs{display:flex;align-items:center;gap:8px;flex:none}
@media (max-width:900px){.top-inner .hd-prefs{margin-left:auto}}
@media (max-width:640px){
  .top-inner{grid-template-columns:auto minmax(0,1fr) auto}
  .search{grid-area:1/2}.nav{grid-area:2/1/3/4}
  .hd-prefs{grid-area:1/3;gap:6px}
  .pref-btn{padding:8px 9px;gap:6px}.pref-name,.pref-btn .fa-caret-down{display:none}
  .pref-panel{position:fixed;left:10px;right:10px;top:64px;width:auto}
}

/* Móvil: logo, buscador y selector de país/idioma con la MISMA altura (34 px) */
@media (max-width:640px){
  .top-inner{align-items:center}
  .logo{height:34px}.logo img{height:34px!important;width:auto}
  .search{height:34px;box-sizing:border-box;align-items:stretch}
  .search input{padding:0 8px;height:100%;box-sizing:border-box;font-size:14px}
  .search button{padding:0 12px;height:100%}
  .pref-btn{height:34px;box-sizing:border-box;padding:0 9px}
}

/* /tags: el orden es un selector segmentado (la opción activa en verde = la que se está usando), compacto también en móvil */
.titlebar>.seg{flex:none}
.titlebar .seg a{white-space:nowrap}
@media (max-width:640px){.hero .titlebar>.seg{flex:none;align-self:flex-start}.titlebar .seg a{padding:6px 12px;font-size:12px}}

/* /tags: las dos opciones del orden con el MISMO ancho (rejilla 1fr 1fr) y a la derecha del título también en móvil */
.titlebar>.seg{display:inline-grid;grid-template-columns:1fr 1fr}
.titlebar .seg a{text-align:center}
@media (max-width:640px){
  .hero .titlebar.keep{flex-wrap:nowrap;align-items:center}
  .hero .titlebar.keep>h2{min-width:0}
  .hero .titlebar.keep .seg a i{display:none}
}
/* /tags: título + selector en la misma fila y el subtítulo a TODO el ancho debajo */
.hero.col{flex-direction:column;align-items:stretch;gap:0}
.hero.col>p{margin-top:8px;max-width:75%}  /* subtítulo: como mucho el 75 % del ancho del contenido */
/* Cualquier cabecera con acciones: título + acciones en UNA fila y el subtítulo a todo el ancho debajo (/tags, /sources) */
@media (max-width:640px){.hero .titlebar.keep>.btn{flex:none;padding:8px 12px}}
/* Contador de elementos al FINAL de la lista (/tags, /sources): el buscador de arriba ocupa todo el ancho */
.list-count{display:flex;justify-content:center;margin-top:12px}

/* Escritorio/tablet: logo, buscador, botones de sección y selector de país/idioma con la MISMA altura (34 px), como en móvil */
@media (min-width:641px){
  .top-inner{align-items:center}
  .logo{height:34px}.logo img{height:34px!important;width:auto}
  .search{height:34px;box-sizing:border-box;align-items:stretch}
  .search input{padding:0 12px;height:100%;box-sizing:border-box}
  .search button{padding:0 16px;height:100%}
  .nav a{height:34px;box-sizing:border-box;display:inline-flex;align-items:center;gap:6px;padding:0 12px;white-space:nowrap}
  .pref-btn{height:34px;box-sizing:border-box;padding:0 12px}
}
/* /browse móvil: los botones de la barra de filtros (etiqueta, fuente, orden, filtros, limpiar) sólo con icono; el flecha del desplegable sobra */
@media (max-width:640px){.filterbar .btn .fa-caret-down{display:none}}
@media (max-width:640px){
  .filterbar{flex-wrap:nowrap;gap:8px}
  .filterbar .left{flex:1 1 auto;min-width:0;flex-wrap:nowrap;gap:8px}
  .filterbar .right{flex-wrap:nowrap;margin-left:0}
}
@media (max-width:640px){.filterbar .btn{white-space:nowrap;padding-left:11px;padding-right:11px;flex:none}}
@media (max-width:400px){.filterbar .btn{padding-left:9px;padding-right:9px}.filterbar .left,.filterbar .right,.filterbar{gap:6px}}
@media (max-width:350px){.filterbar,.filterbar .left,.filterbar .right{flex-wrap:wrap}}

/* Logos OSCUROS y transparentes (análisis: dark_pct ≥ 50, o is_dark con dark_pct ≥ 40): se pierden sobre el fondo oscuro de la web ⇒ placa clara detrás.
   En la lista de logos de la ficha la placa cubre TODO el botón (no sólo la imagen), para que el chip entero se vea. Los dos temas de la web son oscuros. */
.chip[data-lum="dark"]{background:#e8ece8;border-color:#e8ece8;color:#1b1b1b}
.chip[data-lum="dark"]:hover{background:#e8ece8;border-color:var(--accent)}

/* Sugerencias de la búsqueda de la cabecera (/_suggest): el desplegable cuelga de .search, que ya NO recorta (overflow visible) */
.search{position:relative;overflow:visible}
.suggest{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:70;background:var(--panel);border:1px solid var(--accent);border-radius:var(--radius);box-shadow:var(--glow),0 12px 30px rgba(0,0,0,.5);max-height:min(70vh,440px);overflow-y:auto;padding:6px}
.suggest[hidden]{display:none}
.suggest .sg{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:2px;text-decoration:none;color:var(--txt);font-size:13px;border:1px solid transparent}
.suggest .sg i{color:var(--muted);width:16px;text-align:center;flex:none}
.suggest .sg span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.suggest .sg em{font-style:normal;font-size:10px;color:var(--accent2);border:1px solid var(--border);padding:1px 5px;border-radius:2px;flex:none}
.suggest .sg:hover,.suggest .sg.on{background:var(--panel2);border-color:var(--accent);color:var(--accent)}
.suggest .sg.all{color:var(--muted)}
.suggest .sgh{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:8px 10px 2px}
@media (max-width:640px){.search{position:static}.suggest{left:14px;right:14px;top:58px}}

/* Caja de bienvenida del país: a todo el ancho de la columna, en todas las páginas, y sólo mientras
   el visitante no haya elegido a mano (lo decide el servidor; el JS la oculta si ya se descartó).
   El selector (mismo /_ctry que la cabecera) se despliega sólo al pedirlo, para no llenar el aviso. */
.cb-lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.cb-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:none}
.cb-acts.end{justify-content:flex-end}
/* Selector de país de la caja, en MODAL (mismo /_ctry y mismo mkPicker que la cabecera) */
.cb-btn{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:#031003;border:1px solid var(--accent);border-radius:2px;padding:9px 16px;font:inherit;font-size:13px;font-weight:700;line-height:1;cursor:pointer}
.cb-btn:hover{filter:brightness(1.15);box-shadow:var(--glow)}
.cb-btn.alt{background:var(--input);color:var(--txt);border-color:var(--border);font-weight:400}
.cb-btn.alt:hover{filter:none;border-color:var(--accent);color:var(--accent)}
.cb-x{background:none;border:1px solid var(--border);color:var(--muted);border-radius:2px;width:32px;height:32px;flex:none;cursor:pointer;font-size:13px}
.cb-x:hover{border-color:var(--accent);color:var(--accent)}

/* Canales sugeridos en la ficha (/watch): mismo formato de sección que «Últimas capturas» (título suelto + rejilla), sin caja */
/* Skeleton de carga (Front::card en modo skel): mismos bloques que la tarjeta real, con barrido. Sin animación con reduced-motion */
.skel{position:relative;overflow:hidden;background:var(--panel2);border-radius:2px}
.skel::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 25%,rgba(255,255,255,.07) 50%,transparent 75%);animation:skelsweep 1.5s infinite}
@keyframes skelsweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.skel-thumb{display:block;width:100%;aspect-ratio:16/9}
.skel-badge{width:52px;height:20px}
.skel-h{display:flex;align-items:center;gap:6px;min-width:0}
.skel-flag{width:14px;height:14px;border-radius:50%;flex:none}
.skel-title{height:14px;flex:1;min-width:0}
.skel-meta{height:10px;width:60%}

/* Ficha: gráficos de actividad (visitas / reproducciones) de los últimos 14 días. SIN ejes ni cifras ni caja:
   sólo el trazo, para ver de un vistazo si un canal va a más. Las cifras son internas (página /stats). */
.spark{display:block;width:100%;height:44px;margin-top:2px}
.spark .fill{opacity:.16;stroke:none}
.spark .line{fill:none;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.spark.v .fill{fill:var(--accent)}.spark.v .line{stroke:var(--accent)}
.spark.p .fill{fill:var(--accent2)}.spark.p .line{stroke:var(--accent2)}

/* Barras de fiabilidad/latencia: se pintan en CANVAS a resolución de dispositivo (JS del layout) para que
   los huecos de 2 px salgan siempre iguales a cualquier DPR. */
.gbar{display:block;width:100%;margin-top:8px}

/* ============ 11. utilidades y componentes compartidos ============ */
/* utilidades de color/tamaño/espaciado: sustituyen estilos inline repetidos (un único origen por concepto) */
.muted{color:var(--muted)}
.accent{color:var(--accent)}
.accent2{color:var(--accent2)}
.danger{color:var(--danger)}
.xs{font-size:11px}
.sm{font-size:12px}
.nowrap{white-space:nowrap}
.link-plain{color:inherit;text-decoration:none}
.mt8{margin-top:8px}
.mt10{margin-top:10px}
.mt12{margin-top:12px}
.mt14{margin-top:14px}
.mt16{margin-top:16px}
.mt22{margin-top:22px}
.m0{margin:0}
/* modal genérico (Scan detail, logo, editar, nueva fuente, alta masiva) */
.modal-bd{display:none;position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.75);align-items:center;justify-content:center;box-sizing:border-box}
.modal-dlg{background:var(--panel);border:1px solid var(--accent);border-radius:6px;box-shadow:var(--glow);padding:20px;max-width:90vw;box-sizing:border-box}
.modal-dlg h3{margin:0 0 12px}
.logo-box{display:flex;align-items:center;justify-content:center;background:#000;border:1px solid var(--border);border-radius:2px;padding:18px;margin-bottom:12px;min-height:140px}
.logo-img{max-width:100%;max-height:220px;object-fit:contain;display:block}
.kv-lite{font-weight:400;text-align:right}
.h-sm{font-size:18px}
/* barra horizontal de la serie diaria (/stats) */
.bar-col{width:180px}
.bar{display:inline-block;height:8px;border-radius:2px;background:var(--accent);box-shadow:var(--glow)}
.bar.danger{background:var(--danger);box-shadow:none}
/* tira de capturas: badge de hora y anillo de la captura principal */
.cap-badge{position:absolute;left:4px;bottom:4px;z-index:2;font-size:10px;line-height:1.4;background:rgba(0,0,0,.72);padding:2px 6px;border-radius:2px;color:var(--txt)}
.cap-badge i{font-size:9px}
.cap-badge{pointer-events:none;white-space:nowrap}
.cap-badge.cap-hero{left:14px;top:14px;bottom:auto;font-size:11px;padding:3px 8px;z-index:4}   /* destacados: esquina superior izquierda (abajo va el título y a la derecha el corazón) */
.card.cw .cap-badge{bottom:8px}   /* «Seguir viendo»: sube sobre la barra de progreso */
@media (max-width:640px){.cap-badge.cap-hero{left:10px;top:10px}}
.cap-main{box-shadow:0 0 0 2px var(--accent);border-radius:var(--radius)}
/* imagen del modal de detalle (clickable) y mini-logo de /stats */
.scan-img{width:100%;max-height:220px;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--border);border-radius:2px;margin-bottom:12px;cursor:zoom-in}
/* título de gráfico dentro de una caja */
.chart-title{font-size:13px;margin-bottom:6px}
/* /tags: enlace de etiqueta */
.tagc{color:var(--txt);text-decoration:none}
.tagc sup{font-size:10px;color:var(--muted);margin-left:2px;vertical-align:super;line-height:0}
.tagc:hover{color:var(--accent);text-shadow:var(--glow);opacity:1!important}

/* ============ 12. Seguir viendo + ficha móvil ============ */
/* Botón × de «Seguir viendo»: quita la tarjeta sin navegar (el resto de la tarjeta sigue reproduciendo con ?play=1).
   Siempre visible (en móvil no hay hover) y con área de toque suficiente. */
.cw-x{position:absolute;top:6px;right:6px;z-index:5;width:26px;height:26px;padding:0;margin:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:50%;background:rgba(0,0,0,.72);color:var(--txt);font-size:12px;line-height:1;cursor:pointer}
.cw-x:hover{border-color:var(--danger);color:var(--danger)}
@media(max-width:640px){.cw-x{width:34px;height:34px;font-size:15px}}
/* Ficha (/watch) en móvil: «Latest screenshots» y «Similar channels» al FINAL, tras la caja de info técnica (.side).
   `display:contents` saca los bloques de la columna izquierda para que sean items de .player-layout y poder ordenarlos con `order`. */
.shots>h3{margin:0}
.shots-row{padding:3px 3px 6px}   /* holgura para el anillo de la captura actual (.cap-main), que el overflow del scroll recortaría */
@media(max-width:900px){
  .player-layout{display:flex;flex-direction:column;gap:16px}
  .player-layout>div{display:contents}
  .player-layout>.side{order:1}
  .shots{order:2}
  #relbox{order:3}
}
/* Home móvil: «Destacados» pasa de lista vertical a SLIDES a ancho completo con el MISMO estilo que el destacado de la ficha
   (View::heroCap: imagen 16:9 + logo + título + meta). El carrusel se auto-desplaza al rotar (JS scrollActive). */
.side-list{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 auto;justify-content:space-between}
/* La capa estilo destacado solo se usa en móvil; en escritorio manda la fila compacta (.side-txt). */
.side-item>.hero-cap{display:none}
/* Botón play = MISMO componente que el destacado (`.hero-play`): así ficha y portada quedan idénticas. En la slide solo se ve
   el de la activa (móvil); en escritorio, ninguno. */
.side-item .hero-play{display:none}
@media(max-width:900px){
  /* En móvil el destacado grande se oculta: cada canal de «Destacados» es una SLIDE a ANCHO COMPLETO con el estilo del destacado. */
  .hero-main{display:none}
  .hero-side{background:none;border:0;border-radius:0;padding:0;justify-content:flex-start}
  .hero-side h3{margin:0 0 10px;font-size:15px;color:var(--txt);text-transform:none;letter-spacing:normal}
  .side-list{flex-direction:row;overflow-x:auto;overflow-y:hidden;gap:0;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
  .side-list::-webkit-scrollbar{display:none}
  .side-item{flex:0 0 100%;width:100%;scroll-snap-align:center;scroll-snap-stop:always;display:block;position:relative;aspect-ratio:16/9;padding:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:#000}
  .side-item.on,.side-item:hover{border-color:var(--border);box-shadow:none}   /* sin borde/glow verde en la slide */
  .side-item>.scanline{position:absolute;inset:0;width:100%;height:100%;border-radius:0}
  .side-item>.scanline img{width:100%;height:100%;object-fit:cover}
  .side-item>.side-txt{display:none}
  .side-item>.hero-cap{display:flex}
  .side-item .hero-play{display:flex;opacity:0}
  .side-item .side-prog{top:auto;bottom:0;height:3px;border-radius:0}
  .side-item.on .hero-play{opacity:.85}
}

/* Botón de cuenta de la cabecera (login con Google): con sesión sólo la foto; sin ella, «Entrar» (el texto se oculta en móvil) */
.acct{text-decoration:none;flex:none}
.acct img{display:block}
.acct-name{max-width:160px;overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){.acct-txt{display:none}.acct{padding:8px 10px}}
/* /login y /account: caja a todo el ancho, contenido centrado y compacto */
.auth-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:28px;padding:28px 18px}
.auth-card p{margin:0}
.auth-who{display:flex;flex-direction:column;align-items:center;gap:10px}
.auth-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.auth-note{max-width:460px;font-size:12px;color:var(--muted)}
.auth-stat{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}
/* Aviso «entra para ver» sobre el reproductor (sin sesión): capa difuminada con tarjeta centrada */
.play-gate{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:16px;background:radial-gradient(ellipse at center,rgba(3,6,3,.55),rgba(3,6,3,.88));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);cursor:default}
.pg-card{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;max-width:380px}
.pg-card h3{margin:0;font-size:20px;color:var(--txt)}
.pg-card p{margin:0;font-size:13px;color:var(--muted);line-height:1.5}
.pg-logo{--ls:64px}
.pg-ch{font-size:15px;color:var(--txt);line-height:1.3;overflow-wrap:anywhere}
.pg-card small{font-size:11px;color:var(--muted)}
.pg-ico{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;border:1px solid var(--accent);color:var(--accent);font-size:20px;box-shadow:var(--glow)}
.pg-btn{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#031003;font-weight:700;text-decoration:none;padding:11px 20px;border-radius:2px;transition:.15s}
.pg-btn:hover{box-shadow:var(--glow);transform:translateY(-1px)}
@media (max-width:640px){.pg-card{gap:8px}.pg-card p{display:none}.pg-logo{--ls:48px}.pg-ico{width:40px;height:40px;font-size:16px}.pg-card h3{font-size:16px}.pg-btn{padding:9px 14px}}
/* Corazón de favoritos: esquina superior derecha de la tarjeta (y del reproductor en /watch) */
.fav-btn{position:absolute;top:8px;right:8px;z-index:6;width:30px;height:30px;padding:0;margin:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:50%;background:rgba(0,0,0,.62);color:var(--txt);font-size:13px;line-height:1;cursor:pointer;opacity:0;transition:.15s}
.card:hover .fav-btn,.player:hover .fav-btn,.fav-btn.on,.fav-btn:focus-visible{opacity:1}
.fav-btn:hover{border-color:var(--accent);color:var(--accent);box-shadow:var(--glow)}
.fav-btn.on{color:#ff4d6d;border-color:#ff4d6d}
.fav-lg{top:12px;right:12px;width:38px;height:38px;font-size:16px}
@media (hover:none){.fav-btn{opacity:1}}
/* Animación del corazón: latido + anillo expansivo al añadir; encogimiento al quitar; la tarjeta se desvanece al quitarla en /favorites */
.fav-btn.pop{animation:fav-pop .55s cubic-bezier(.2,.9,.3,1.4)}
.fav-btn.pop::after{content:'';position:absolute;inset:-2px;border-radius:50%;border:2px solid #ff4d6d;pointer-events:none;animation:fav-ring .55s ease-out forwards}
.fav-btn.unpop{animation:fav-unpop .3s ease-in}
@keyframes fav-pop{0%{transform:scale(1)}30%{transform:scale(1.55) rotate(-8deg)}60%{transform:scale(.9) rotate(4deg)}100%{transform:scale(1) rotate(0)}}
@keyframes fav-ring{0%{transform:scale(.8);opacity:.9}100%{transform:scale(2.3);opacity:0}}
@keyframes fav-unpop{0%{transform:scale(1)}40%{transform:scale(.6)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.fav-btn.pop,.fav-btn.unpop{animation:none}.fav-btn.pop::after{display:none}}
/* Quitar una tarjeta (window.cardOut): se encoge, gira un pelín, se desvanece y se desenfoca; las vecinas se deslizan al hueco */
.card.card-out{pointer-events:none;animation:card-out .28s cubic-bezier(.5,0,.9,.4) forwards}
@keyframes card-out{0%{opacity:1;transform:none;filter:none}100%{opacity:0;transform:scale(.78) translateY(-12px) rotate(-3deg);filter:blur(4px) saturate(0)}}
@media (prefers-reduced-motion:reduce){.card.card-out{animation:none;opacity:0}}
/* Menú de admin: botón flotante abajo a la izquierda (la cabecera es la de cualquier usuario) */
.admin-dock{position:fixed;left:16px;bottom:16px;z-index:70;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.ad-btn{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--accent);background:var(--panel);color:var(--accent);font-size:16px;cursor:pointer;box-shadow:var(--glow);transition:.15s}
.ad-btn:hover,.ad-btn[aria-expanded="true"]{background:var(--accent);color:#031003}
.ad-panel{display:flex;flex-direction:column;gap:2px;min-width:190px;padding:8px;background:var(--panel);border:1px solid var(--accent);border-radius:var(--radius);box-shadow:var(--glow),0 12px 30px rgba(0,0,0,.5)}
.ad-panel[hidden]{display:none}
.ad-title{padding:4px 10px 8px;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.ad-panel a,.ad-cache{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:2px;border:1px solid transparent;background:transparent;color:var(--txt);font:inherit;font-size:13px;text-decoration:none;cursor:pointer;text-align:left}
.ad-panel a:hover,.ad-cache:hover{border-color:var(--accent);color:var(--accent)}
.ad-panel a.active{color:var(--accent);border-color:var(--border);background:var(--panel2)}
.ad-cache{margin-top:4px;border-top:1px solid var(--border);border-radius:0 0 2px 2px;padding-top:10px;color:var(--accent)}
.ad-cache.off{color:var(--danger)}

/* ===== Tour de bienvenida (View::tour): caja de 4 pasos con iconos, puntos de progreso y transiciones ===== */
body.tour-open{overflow:hidden}
.tour{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;padding:16px}
.tour[hidden]{display:none}
.tour-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:tour-fade .25s ease-out}
.tour-card{position:relative;z-index:1;width:min(640px,100%);height:min(740px,92vh);display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--accent);border-radius:var(--radius);box-shadow:var(--glow),0 24px 60px rgba(0,0,0,.6);overflow:hidden;animation:tour-in .35s cubic-bezier(.2,.9,.3,1.1)}
.tour-x{position:absolute;top:12px;right:12px;z-index:3}
.tour-stage{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;padding:34px 30px 8px}   /* altura fija; sin overflow-x: el deslizamiento lateral ya no crea la barra verde */
.tour-step{display:none;flex-direction:column;align-items:center;text-align:center;gap:14px}
.tour-step.on{display:flex;margin:auto 0}   /* centrado en vertical (margin auto no recorta si el contenido es más alto) */
.tour-step.on[data-dir=fwd]{animation:tour-fwd .38s cubic-bezier(.2,.8,.2,1)}
.tour-step.on[data-dir=back]{animation:tour-back .38s cubic-bezier(.2,.8,.2,1)}
.tour-hero{position:relative;display:flex;align-items:center;justify-content:center;width:96px;height:96px}
.tour-hero::before,.tour-hero::after{content:'';position:absolute;inset:0;border-radius:50%;border:1px solid var(--accent);opacity:.5;animation:tour-ring 2.6s ease-out infinite}
.tour-hero::after{animation-delay:1.3s}
.th-ico{display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:var(--panel2);border:1px solid var(--accent);color:var(--accent);font-size:30px;box-shadow:var(--glow);animation:tour-pop .6s cubic-bezier(.2,.9,.3,1.4) both}
.tour-step h2{margin:0;font-size:24px;color:var(--txt)}
.tour-lead{margin:0;max-width:480px;font-size:14px;line-height:1.55;color:var(--muted)}
.tour-feats{list-style:none;margin:6px 0 0;padding:0;width:100%;display:flex;flex-direction:column;gap:10px;text-align:left}
.tour-feats.grid2{display:grid;grid-template-columns:1fr 1fr}
.tour-feats li{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;background:var(--panel2);border:1px solid var(--border);border-radius:var(--radius);animation:tour-rise .45s cubic-bezier(.2,.8,.2,1) both}
.tour-step.on li:nth-child(1){animation-delay:.08s}.tour-step.on li:nth-child(2){animation-delay:.16s}.tour-step.on li:nth-child(3){animation-delay:.24s}.tour-step.on li:nth-child(4){animation-delay:.32s}
.tf-ico{flex:none;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--accent);color:var(--accent);font-size:14px}
.tour-feats b{display:block;font-size:14px;color:var(--txt)}
.tour-feats small{display:block;margin-top:2px;font-size:12px;line-height:1.45;color:var(--muted)}
.tour-pick{display:flex;flex-direction:column;gap:14px;width:100%;text-align:left}
.tp-col{display:flex;flex-direction:column;gap:8px}
.tp-col .cb-lbl small{text-transform:none;letter-spacing:0;margin-left:6px}
.tour-pick .pref-list{max-height:215px}

.tour-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 24px 20px;border-top:1px solid var(--border)}
.tour-dots{display:flex;gap:8px}
.td{width:10px;height:10px;padding:0;border-radius:50%;border:1px solid var(--border);background:transparent;cursor:pointer;transition:.2s}
.td.done{background:var(--muted);border-color:var(--muted)}
.td.on{width:26px;border-radius:6px;background:var(--accent);border-color:var(--accent);box-shadow:var(--glow)}
.tour-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tour-nav [hidden]{display:none}
.tour-google{text-decoration:none}
@keyframes tour-fade{from{opacity:0}to{opacity:1}}
@keyframes tour-in{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
@keyframes tour-fwd{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes tour-back{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@keyframes tour-pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@keyframes tour-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes tour-ring{0%{transform:scale(.75);opacity:.55}100%{transform:scale(1.35);opacity:0}}
@media (max-width:640px){.tour-stage{padding:30px 18px 6px}.tour-step h2{font-size:20px}.tour-feats.grid2{grid-template-columns:1fr}.tour-foot{padding:14px 16px 16px;justify-content:center}.tour-hero{width:80px;height:80px}.th-ico{width:60px;height:60px;font-size:24px}}
@media (prefers-reduced-motion:reduce){.tour-card,.tour-backdrop,.tour-step.on,.tour-feats li,.th-ico,.tour-hero::before,.tour-hero::after{animation:none!important}}
/* Pantallas bajas (escritorio con ventana corta o móvil): modo compacto (sin icono grande, menos aire) y degradado inferior cuando hay más contenido al hacer scroll */
.tour-stage.more{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 34px),transparent)}
@media (max-height:700px){
  .tour-hero{display:none}
  .tour-stage{padding:44px 26px 6px}
  .tour-step{gap:10px}
  .tour-step h2{font-size:20px}
  .tour-lead{font-size:13px;line-height:1.45}
  .tour-feats{gap:8px;margin-top:2px}
  .tour-feats li{padding:9px 12px}
  .tf-ico{width:30px;height:30px;font-size:13px}
  .tour-foot{padding:12px 20px 14px}
}
@media (max-height:480px){.tour-lead{display:none}.tour-stage{padding-top:40px}}
/* Subtítulo de un h3 (p. ej. «por etiquetas, nombre, categoría y fuente»): junto al título en escritorio; en móvil, en su propia fila */
.h3-sub{color:var(--muted);font-weight:400;font-size:12px}
@media (max-width:640px){.h3-sub.sub-row{display:block;margin-top:3px;line-height:1.35}}

/* Modal «entra para guardar tus favoritos» (reutiliza la caja del tour, más pequeña y de altura libre) */
.lp-card{width:min(440px,100%);height:auto;max-height:92vh}
.lp-body{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:30px 26px 8px;overflow-y:auto}
.lp-body h2{margin:0;font-size:22px;color:var(--txt)}
.lp-ch{margin:0;max-width:100%;padding:4px 12px;border:1px solid var(--accent);border-radius:999px;color:var(--accent);font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-ch[hidden]{display:none}
.lp-heart{color:#ff4d6d;border-color:#ff4d6d;box-shadow:0 0 18px rgba(255,77,109,.45);animation:tour-pop .6s cubic-bezier(.2,.9,.3,1.4) both,lp-beat 1.6s ease-in-out .7s infinite}
.lp .tour-hero::before,.lp .tour-hero::after{border-color:#ff4d6d}
.lp .tour-feats{margin-top:2px}
.lp-foot{justify-content:flex-end;padding:14px 20px 18px}
@keyframes lp-beat{0%,100%{transform:scale(1)}14%{transform:scale(1.14)}28%{transform:scale(1)}42%{transform:scale(1.1)}70%{transform:scale(1)}}
@media (max-width:640px){.lp-body{padding:26px 18px 6px}.lp-body h2{font-size:19px}.lp-foot{justify-content:center}}
@media (max-height:620px){.lp .tour-hero{display:none}.lp .tour-lead{font-size:13px}}
@media (prefers-reduced-motion:reduce){.lp-heart{animation:none}}
/* Botones de acceso (uno por proveedor, View::loginButtons): en fila y con hueco; si hay varios, se parten en línea */
.login-btns{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.login-btns[hidden]{display:none}
.login-btns a{text-decoration:none}
.pg-btns{margin-top:2px}
.lp-perks{display:flex;flex-direction:column;gap:8px;width:100%;text-align:left}
.lp-perks .cb-lbl{padding-left:2px}
.lp .tour-feats li{padding:9px 12px}
.lp .tour-feats b{font-size:13px}
/* /account: interruptor del modo técnico */
.auth-tech{display:flex;align-items:center;gap:14px;width:100%;max-width:520px;padding:12px 14px;background:var(--panel2);border:1px solid var(--border);border-radius:var(--radius);text-align:left}
.at-ico{flex:none;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--accent);color:var(--accent)}
.at-txt{flex:1;min-width:0}.at-txt b{display:block;font-size:14px;color:var(--txt)}.at-txt small{display:block;margin-top:2px;font-size:12px;line-height:1.45;color:var(--muted)}
@media (max-width:640px){.auth-tech{flex-wrap:wrap}.auth-tech .seg{margin-left:48px}}
/* Nombre del canal en el Resumen: a la derecha, con puntos suspensivos si es largo (el título del hero se oculta al reproducir) */
.kv-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
/* Caja «Logos» (modo técnico): cada logo es un botón con el MISMO contenedor cuadrado, más pequeño; al pasar el ratón se resalta (se puede pulsar para ver su detalle) */
.logo-btn{padding:0;margin:0;border:0;background:none;cursor:pointer;display:inline-flex;line-height:0}
.logo-btn .logo-sq{--ls:56px}
.logo-btn:hover .logo-sq,.logo-btn:focus-visible .logo-sq{border-color:var(--accent);box-shadow:var(--glow)}
/* Logos de /stats: el mismo cuadrado, más pequeño (40 px); el clic abre el logo a tamaño completo */
.logo-btn .logo-sq.logo-xs{--ls:40px}

/* ===== Cabecera MÓVIL (≤640 px), estilo app =====
   Fila 1: logo · país · cuenta. Fila 2: buscador a todo el ancho (alto cómodo para el dedo). El menú (Explorar · Favoritos · Etiquetas) pasa a una BARRA INFERIOR fija
   con icono y texto, al alcance del pulgar; el menú de admin flotante se sube para no taparse. Va al final del fichero para ganar a los bloques móviles anteriores. */
@media (max-width:640px){
  .top-inner{grid-template-columns:minmax(0,1fr) auto;gap:10px 8px;padding:10px 0 12px;align-items:center}
  .logo{grid-area:1/1;height:32px}.logo img{height:32px!important}
  .hd-prefs{grid-area:1/2;gap:6px}
  .search{grid-area:2/1/3/3;height:42px}
  .search input{font-size:15px;padding:0 12px}
  .search button{padding:0 16px}
  .nav{position:fixed;left:0;right:0;bottom:0;z-index:45;grid-area:auto;display:flex;justify-content:space-around;gap:0;margin:0;overflow:visible;
    background:rgba(8,12,8,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--border);padding:4px 6px calc(4px + env(safe-area-inset-bottom))}
  .nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:auto;min-height:48px;padding:6px 4px;font-size:11px;border:0;border-radius:6px;white-space:nowrap}
  .nav a i{font-size:18px}
  .nav a.active{color:var(--accent);background:transparent}
  .nav a.active i{text-shadow:var(--glow)}
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
  .admin-dock{bottom:calc(70px + env(safe-area-inset-bottom))}
  .pref-panel{top:60px}
  .search{position:relative}.suggest{left:0;right:0;top:calc(100% + 6px)}   /* las sugerencias cuelgan justo debajo del buscador */
}
:root[data-theme="light"] .nav{background:rgba(255,248,230,.96)}

/* ===== EFECTO CRT (scanlines, viñeta, líneas animadas, banda de refresco): SÓLO EN LOS HERO (2026-10-08) =====
   Todo el código del efecto sigue más arriba (reglas `.thumb::after`, `.scanline::after`, `.thumb::before`, `.scanline::before`, `.hero-img::after`, `.strip a::after` y los @keyframes scan-*).
   Activo en: el destacado de la portada (`.hero-img`: líneas + viñeta + movimiento + parpadeo + banda de refresco) y el hero de la ficha (`.player .scanline`: líneas + viñeta + movimiento + parpadeo).
   Apagado en: tarjetas (`.thumb`), miniaturas del lateral (`.side-item>.scanline`) y tira de capturas (`.strip a`).
   Para APAGAR TAMBIÉN LOS HERO: añadir `.scanline::before,.scanline::after,.hero-img::after` a la regla de abajo. Para reactivarlo TODO: borrar o comentar la regla de abajo. */
.player .scanline::after{inset:-6px 0;animation:scan-crawl .6s linear infinite,scan-flicker 7s steps(1) infinite}
@media (prefers-reduced-motion:reduce){.player .scanline::after{animation:none;inset:0}}
.thumb::before,.thumb::after,.side-item>.scanline::before,.side-item>.scanline::after,.strip a::after,.shots-row a::after{display:none!important}

/* Selector de idioma: rejilla de nombres nativos; con muchos idiomas hace scroll interno en vez de desbordar */
.lang-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:6px;max-height:190px;overflow-y:auto}
.lang-grid a,.lang-grid button{display:flex;align-items:center;justify-content:center;padding:7px 10px;font:inherit;font-size:13px;text-decoration:none;color:var(--muted);background:var(--input);border:1px solid var(--border);border-radius:2px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lang-grid a:hover,.lang-grid button:hover{color:var(--accent);border-color:var(--accent)}
.lang-grid a.on,.lang-grid button.on{background:var(--accent);border-color:var(--accent);color:#031003;font-weight:700}
#tourLang{align-self:stretch}

/* Guía «ahora / a continuación» (/epg, rellenada por app.js). Oculta mientras no hay datos. */
.epg-box{display:flex;flex-direction:column;gap:12px;margin:14px 0;padding:14px 16px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius)}
.epg-box[hidden]{display:none}
.epg-lbl{display:flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.epg-now{display:flex;flex-direction:column;gap:8px}
.epg-main{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.epg-main b{font-size:17px;color:var(--text)}
.epg-main em{font-style:normal;color:var(--muted)}
.epg-main small,.epg-next small{color:var(--muted);font-variant-numeric:tabular-nums}
.epg-bar{display:block;height:3px;background:var(--border);border-radius:2px;overflow:hidden}
.epg-bar i{display:block;height:100%;background:var(--accent)}
.epg-d{margin:0;font-size:13px;line-height:1.5;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.epg-next{display:flex;flex-direction:column;gap:6px}
.epg-next ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.epg-next li{display:flex;align-items:baseline;gap:10px;font-size:13px}
.epg-next li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* «Ahora» de una línea (tarjetas y destacado): icono, título con puntos suspensivos, horas y barrita de progreso debajo */
.epg-line{display:flex;flex-wrap:wrap;align-items:center;gap:3px 6px;min-width:0;font-size:12px;color:var(--text)}
.epg-line[hidden]{display:none}
.epg-line>i{color:var(--accent);font-size:11px;flex:none}
.epg-line .epg-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.epg-line small{flex:none;color:var(--muted);font-variant-numeric:tabular-nums}
.epg-line .epg-bar{flex:1 0 100%}
.epg-line .epg-times{flex:1 0 100%;display:flex;justify-content:space-between;line-height:1;margin-top:4px}
.hero-epg{max-width:520px;margin-top:6px;font-size:13px}
/* Destacado grande (escritorio): el «ahora» va a la DERECHA, en la misma fila que la meta (bandera, resolución, categoría); en móvil/tablet se apila debajo */
@media (min-width:901px){
  .hero-main>.hero-cap{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,300px);column-gap:24px;row-gap:16px;align-items:end}
  .hero-main>.hero-cap>.hero-title{grid-column:1/-1;grid-row:1}
  .hero-main>.hero-cap>.hero-meta{grid-column:1/-1;grid-row:2}
  .hero-main>.hero-cap>.hero-epg{grid-column:1/-1;grid-row:3;margin:0;max-width:none}   /* el «ahora» va DEBAJO de las etiquetas, a todo el ancho */
}
/* «Ahora» del destacado: más grande que en las tarjetas */
.hero-epg{font-size:16px;gap:5px 8px}
.hero-epg>i{font-size:14px}
.hero-epg .epg-t{font-weight:700}
.hero-epg small{font-size:14px}
.hero-epg .epg-bar{height:4px}
.hero-epg .epg-times{margin-top:6px}
/* Subtítulo (episodio) del programa: sólo en el destacado, a la derecha del título */
.hero-epg .epg-t{flex:0 1 auto}
.hero-epg .epg-st{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;color:var(--muted)}   /* a la derecha del título, en la misma línea (como en la ficha) */
/* «Ahora» del destacado en móvil/tablet (<901 px, mismo corte que la rejilla de escritorio): ocupa SIEMPRE todo el ancho (antes se encogía al ancho del título porque .hero-cap alinea al inicio) y sin subtítulo */
.hero-epg{align-self:stretch;width:100%;box-sizing:border-box}
@media (max-width:900px){.hero-epg .epg-st{display:none}.hero-epg .epg-t{flex:1 1 0}}   /* sin subtítulo el título toma el resto de la línea (si no, un título largo salta debajo del icono) */

/* Línea del programa unificada (destacado y ficha): mismo estilo; en la ficha además descripción y datos extra debajo */
.epg-xl{width:100%;box-sizing:border-box;font-size:16px;gap:5px 8px}
.epg-xl>i{font-size:14px}
.epg-xl .epg-t{font-weight:700;flex:0 1 auto}
.epg-xl small{font-size:14px}
.epg-xl .epg-bar{height:4px}
.epg-xl .epg-times{margin-top:6px}
.epg-xl .epg-st{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;color:var(--muted)}
.epg-line .epg-ep{flex:none;margin-left:auto;padding:1px 7px;border:1px solid var(--border);border-radius:3px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.epg-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0;font-size:12px;color:var(--muted)}
.epg-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border:1px solid var(--border);border-radius:3px;background:var(--input);color:var(--text);font-size:12px}
.epg-chip i{color:var(--accent);font-size:11px}
@media (max-width:900px){.hero-epg .epg-ep{display:none}}   /* móvil/tablet: el destacado va sin subtítulo ni episodio */
/* Horas bajo la barra: alineadas al TOP de forma explícita (no depender del navegador); inicio a la izquierda y fin a la derecha, cada una en su mitad con la misma altura de línea */
.epg-line .epg-times,.epg-box .epg-times{align-items:flex-start}
.epg-line .epg-times small,.epg-box .epg-times small{flex:1 1 0;display:block;line-height:1.2;text-align:left;vertical-align:top}
.epg-line .epg-times small:last-child,.epg-box .epg-times small:last-child{text-align:right}
/* Horas más pegadas a la barra: la separación real es el row-gap de la línea (3 px tarjetas, 5 px destacado/ficha) + este margen; antes 4/6 px de margen (7 y 11 px en total) */
.epg-line .epg-times,.epg-xl .epg-times,.hero-epg .epg-times,.epg-box .epg-times{margin-top:1px}