:root {
  --fondo: #0b0b0d;
  --panel: rgba(12, 12, 15, .92);
  --texto: #ece6da;
  --tenue: #8d877c;
  --acento: #c0392b;
  --oro: #d4a017;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--fondo); color: var(--texto); overflow: hidden;
  font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif; -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; color: inherit; }
.error { color: #ff7b6b; min-height: 1.4em; }

#video { position: fixed; inset: 0; width: 100%; height: 100%; background: #000; object-fit: contain; }

.pantalla { position: fixed; inset: 0; display: none; }
.pantalla.activa { display: flex; }

/* Clave y perfiles */
#pantalla-clave, #pantalla-perfiles { flex-direction: column; align-items: center; justify-content: center;
  gap: 2.2vh; background: var(--fondo); padding: 16px; }
h1 { font-weight: 300; font-size: clamp(26px, 4.4vh, 52px); letter-spacing: .04em; }
#campo-clave, #campo-perfil { background: #17171b; border: 2px solid #2a2a30; border-radius: 10px;
  padding: 12px 16px; width: min(360px, 90vw); font-size: 20px; outline: none; }
#campo-clave:focus, #campo-perfil:focus { border-color: var(--oro); }
button.foco { background: #1d1d22; border: 2px solid transparent; border-radius: 10px; padding: 10px 26px;
  font-size: 20px; cursor: pointer; }
#perfiles { display: flex; flex-wrap: wrap; gap: 3vw; justify-content: center; max-width: 92vw; }
.perfil { display: flex; flex-direction: column; align-items: center; gap: 1.4vh; background: none; border: 0;
  cursor: pointer; color: var(--tenue); font-size: clamp(16px, 2.4vh, 28px); }
.perfil .cara { width: clamp(84px, 17vh, 190px); height: clamp(84px, 17vh, 190px); border-radius: 14%;
  display: grid; place-items: center; font-size: clamp(38px, 8vh, 90px); font-weight: 600; color: #fff;
  border: 4px solid transparent; transition: transform .12s; }
.perfil.agregar .cara { background: #1a1a1f; color: var(--tenue); font-weight: 300; }
.perfil.enfocado { color: var(--texto); }
.perfil.enfocado .cara { border-color: var(--texto); transform: scale(1.06); }
button.foco.enfocado, #campo-perfil.enfocado { border-color: var(--oro); }
#nuevo-perfil { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }
#nuevo-perfil[hidden] { display: none; }
#nuevo-perfil .error { width: 100%; text-align: center; }

/* TV */
#pantalla-tv { background: transparent; }
#banda { position: absolute; left: 4vw; right: 4vw; bottom: 5vh; display: flex; align-items: center; gap: 2vw;
  background: var(--panel); border-left: 5px solid var(--acento); border-radius: 12px; padding: 2vh 2.4vw;
  opacity: 0; transform: translateY(12px); transition: opacity .2s, transform .2s; pointer-events: none; }
#banda.visible { opacity: 1; transform: none; }
#banda-num { font-size: clamp(26px, 6vh, 64px); font-weight: 700; color: var(--oro); min-width: 2.2em; }
#banda-logo { width: clamp(48px, 9vh, 100px); height: clamp(48px, 9vh, 100px); object-fit: contain; }
#banda-texto { flex: 1; min-width: 0; }
#banda-nombre { font-size: clamp(20px, 4vh, 44px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#banda-cat { color: var(--tenue); font-size: clamp(14px, 2.4vh, 26px); margin-top: .4vh; }
#banda-fav { color: var(--oro); font-size: clamp(22px, 4vh, 40px); visibility: hidden; }
#banda-fav.si { visibility: visible; }

#numero { position: absolute; top: 5vh; right: 4vw; font-size: clamp(40px, 10vh, 110px); font-weight: 700;
  color: var(--oro); background: var(--panel); border-radius: 12px; padding: 1vh 2vw; display: none; }
#aviso { position: absolute; top: 5vh; left: 50%; transform: translateX(-50%); background: var(--panel);
  border-radius: 10px; padding: 1.4vh 2.4vw; font-size: clamp(15px, 2.6vh, 28px); display: none; max-width: 90vw;
  text-align: center; }
#tocar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--acento);
  border: 0; border-radius: 40px; padding: 18px 36px; font-size: 22px; color: #fff; }
#tocar[hidden] { display: none; }

#lista { position: absolute; left: 0; top: 0; bottom: 0; width: min(64vw, 900px); display: none;
  background: linear-gradient(90deg, rgba(8, 8, 10, .96) 70%, rgba(8, 8, 10, 0)); padding: 4vh 0 4vh 2.6vw; }
#lista.abierta { display: grid; grid-template-columns: minmax(150px, 30%) 1fr; grid-template-rows: 1fr auto;
  column-gap: 1.6vw; }
#cats, #chans { overflow: hidden; }
#ayuda { grid-column: 1 / 3; color: var(--tenue); font-size: clamp(12px, 1.8vh, 20px); padding-top: 1.4vh; }
.cat, .chan { display: flex; align-items: center; gap: 1vw; border-radius: 8px; padding: 0 1vw;
  height: var(--fila, 6.2vh); font-size: clamp(14px, 2.5vh, 28px); white-space: nowrap; overflow: hidden;
  border: 3px solid transparent; cursor: pointer; }
.cat { color: var(--tenue); }
.cat.actual { color: var(--texto); }
.cat .cuenta { margin-left: auto; font-size: .75em; color: var(--tenue); }
.chan .num { color: var(--oro); width: 3.2em; flex: none; font-weight: 600; }
.chan img { width: 1.9em; height: 1.9em; object-fit: contain; flex: none; }
.chan .nom { overflow: hidden; text-overflow: ellipsis; flex: 1; }
.chan .estrella { color: var(--oro); }
.chan.sonando .nom { color: var(--oro); }
.cat.enfocado, .chan.enfocado { background: rgba(255, 255, 255, .1); border-color: var(--texto); }
.col-inactiva .enfocado { border-color: transparent; background: rgba(255, 255, 255, .06); }

#controles { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 10px);
  display: none; justify-content: center; gap: 14px; }
#controles button { width: 54px; height: 54px; border-radius: 50%; background: var(--panel); border: 1px solid #333;
  font-size: 22px; }
body.tactil #pantalla-tv.controles #controles { display: flex; }
body.tactil #banda { bottom: calc(env(safe-area-inset-bottom) + 80px); }
body.tactil #ayuda { display: none; }
body.tactil #lista { width: 100vw; padding-top: calc(env(safe-area-inset-top) + 2vh);
  padding-bottom: calc(env(safe-area-inset-bottom) + 80px); }
body.tactil #cats, body.tactil #chans { overflow-y: auto; -webkit-overflow-scrolling: touch; }
@media (orientation: portrait) {
  body.tactil #lista.abierta { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  body.tactil #cats { display: flex; overflow-x: auto; gap: 6px; padding-bottom: 8px; }
  body.tactil .cat { flex: none; }
}

/* Aviso global (encima de todo) */
#aviso { position: fixed; z-index: 50; }

/* Menú lateral */
#velo { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 30; display: none; }
#velo.visible { display: block; }
#menu { position: fixed; left: 0; top: 0; bottom: 0; width: clamp(240px, 22vw, 380px); z-index: 31;
  background: #101013; border-right: 2px solid #1f1f25; padding: 5vh 1.4vw; display: flex; flex-direction: column;
  gap: .8vh; transform: translateX(-105%); transition: transform .18s; }
#menu.abierto { transform: none; }
.menu-perfil { display: flex; align-items: center; gap: 1vw; padding: 0 1vw 3vh; font-size: clamp(16px, 2.6vh, 28px);
  color: var(--tenue); }
.menu-cara { width: 2em; height: 2em; border-radius: 22%; display: grid; place-items: center; color: #fff; font-weight: 700; }
.menu-item { display: flex; align-items: center; gap: 1.2vw; background: none; border: 3px solid transparent;
  border-radius: 10px; padding: 1.4vh 1vw; font-size: clamp(17px, 3vh, 32px); text-align: left; cursor: pointer; color: var(--tenue); }
.menu-item.actual { color: var(--texto); }
.menu-item.actual .menu-ico { filter: none; }
.menu-item.enfocado { border-color: var(--texto); background: rgba(255, 255, 255, .08); color: var(--texto); }
.menu-ico { width: 1.6em; text-align: center; }

/* Explorar */
#pantalla-explorar { background: var(--fondo); }
#explorar { position: absolute; inset: 0; overflow: hidden; padding: 4vh 3vw 6vh 4vw; }
#boton-menu { display: none; position: absolute; z-index: 5; top: calc(env(safe-area-inset-top) + 8px); right: 12px;
  width: 46px; height: 46px; border-radius: 50%; background: var(--panel); border: 1px solid #333; font-size: 22px; }
body.tactil #boton-menu { display: block; }
body.tactil #explorar { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: calc(env(safe-area-inset-top) + 12px) 16px 40px; }
.titulo-seccion { margin-bottom: 2vh; }
.cargando { color: var(--tenue); padding: 3vh 0; font-size: clamp(15px, 2.4vh, 26px); }
#explorar h2 { font-weight: 400; font-size: clamp(16px, 2.8vh, 30px); margin: 2.6vh 0 1.2vh; color: var(--texto); }
.fila { display: flex; gap: 1.2vw; overflow: hidden; padding: 6px 4px; }
body.tactil .fila { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tarjeta { flex: none; width: clamp(110px, 11.5vw, 220px); cursor: pointer; border-radius: 10px; position: relative;
  border: 3px solid transparent; transition: transform .1s; }
.tarjeta img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 7px; background: #17171b; display: block; }
.tarjeta-titulo { font-size: clamp(12px, 1.8vh, 20px); color: var(--tenue); padding: .6vh .2vw 0; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.tarjeta.enfocado { border-color: var(--texto); transform: scale(1.04); }
.tarjeta.enfocado .tarjeta-titulo { color: var(--texto); }
.tarjeta.mas { display: grid; place-items: center; aspect-ratio: 2 / 3; background: #17171b; color: var(--tenue);
  font-size: clamp(14px, 2.2vh, 24px); }
.progreso { height: 5px; background: rgba(255, 255, 255, .2); border-radius: 3px; margin-top: 4px; overflow: hidden; }
.progreso div { height: 100%; background: var(--acento); }
.tarjeta .progreso { position: absolute; left: 6px; right: 6px; bottom: 2.9em; }

.catalogo { display: grid; grid-template-columns: clamp(150px, 17vw, 300px) 1fr; gap: 2vw; height: 100%; }
.generos { overflow: hidden; }
body.tactil .catalogo { grid-template-columns: 1fr; height: auto; }
body.tactil .generos { display: flex; flex-wrap: wrap; gap: 6px; }
body.tactil .generos .titulo-seccion { width: 100%; }
.genero { padding: 1vh 1vw; border-radius: 8px; border: 3px solid transparent; color: var(--tenue); cursor: pointer;
  font-size: clamp(14px, 2.4vh, 26px); white-space: nowrap; }
.genero.actual { color: var(--oro); }
.genero.enfocado { border-color: var(--texto); color: var(--texto); background: rgba(255, 255, 255, .08); }
.rejilla { display: flex; flex-wrap: wrap; gap: 1.6vh 1.2vw; align-content: flex-start; overflow: hidden; padding: 6px 4px; }
body.tactil .rejilla .tarjeta { width: calc(33.3% - 8px); }
.campo-buscar { width: min(700px, 100%); background: #17171b; border: 3px solid #2a2a30; border-radius: 12px;
  padding: 1.4vh 1.2vw; font-size: clamp(18px, 3vh, 32px); outline: none; margin-bottom: 2vh; }
.campo-buscar.enfocado, .campo-buscar:focus { border-color: var(--oro); }

/* Ficha */
.ficha { margin: -4vh -3vw -6vh -4vw; padding: 7vh 3vw 6vh 4vw; min-height: 100vh; background-size: cover;
  background-position: center top; }
.ficha-info { max-width: min(62vw, 1100px); }
body.tactil .ficha { margin: -12px -16px -40px; padding: 60px 16px 40px; }
body.tactil .ficha-info { max-width: none; }
.ficha h1 { font-weight: 600; }
.ficha-datos { color: var(--oro); margin: 1.4vh 0; font-size: clamp(14px, 2.3vh, 24px); }
.ficha-resumen { color: #cfc9bd; font-size: clamp(14px, 2.4vh, 25px); line-height: 1.45; max-width: 60em;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.ficha-botones, .temporadas { display: flex; flex-wrap: wrap; gap: 1vw; margin-top: 2.6vh; }
.aviso-ficha { color: var(--tenue); }
.boton { background: #1d1d22; border: 3px solid transparent; border-radius: 10px; padding: 1.2vh 1.8vw; cursor: pointer;
  font-size: clamp(15px, 2.5vh, 26px); }
.boton.chico { padding: .8vh 1.2vw; font-size: clamp(13px, 2.1vh, 22px); color: var(--tenue); }
.boton.actual { color: var(--oro); }
.boton.enfocado { border-color: var(--texto); background: var(--acento); color: #fff; }
.episodios { margin-top: 2vh; display: flex; flex-direction: column; gap: 1vh; }
.episodio { display: flex; gap: 1.4vw; align-items: center; padding: .8vh .8vw; border-radius: 10px;
  border: 3px solid transparent; background: rgba(20, 20, 24, .7); cursor: pointer; }
.episodio img { width: clamp(110px, 12vw, 220px); aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px;
  background: #17171b; flex: none; }
.episodio-texto { min-width: 0; flex: 1; }
.episodio-titulo { font-size: clamp(14px, 2.4vh, 26px); }
.episodio-resumen { color: var(--tenue); font-size: clamp(12px, 1.9vh, 20px); margin-top: .4vh; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.episodio.futuro { opacity: .5; }
.episodio.enfocado { border-color: var(--texto); }

/* Fuentes */
#fuentes { position: absolute; right: 0; top: 0; bottom: 0; width: min(56vw, 1000px); background: rgba(10, 10, 12, .97);
  border-left: 2px solid #1f1f25; padding: 4vh 2vw; display: none; flex-direction: column; z-index: 10; }
#fuentes.abierto { display: flex; }
body.tactil #fuentes { width: 100vw; padding: calc(env(safe-area-inset-top) + 12px) 12px 30px; }
#fuentes h2 { margin: 0 0 2vh; font-weight: 400; font-size: clamp(17px, 3vh, 32px); }
.fuentes-lista { overflow: hidden; display: flex; flex-direction: column; gap: 1vh; padding: 4px; }
body.tactil .fuentes-lista { overflow-y: auto; }
.fuente { border: 3px solid transparent; border-radius: 10px; padding: 1vh 1vw; background: #141418; cursor: pointer; }
.fuente.enfocado { border-color: var(--texto); background: #1c1c22; }
.etiquetas { display: flex; flex-wrap: wrap; gap: .6vw; align-items: center; }
.etq { background: #26262d; border-radius: 6px; padding: .2vh .6vw; font-size: clamp(12px, 1.9vh, 20px); font-weight: 600; }
.etq.lat { background: #1e5631; }
.fuente-tam { color: var(--tenue); font-size: clamp(12px, 1.9vh, 20px); margin-left: .4vw; }
.fuente-texto { color: var(--tenue); font-size: clamp(11px, 1.7vh, 18px); margin-top: .6vh; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }

/* Reproductor */
#pantalla-vod { background: transparent; }
#vod-barra { position: absolute; left: 0; right: 0; bottom: 0; padding: 6vh 4vw 5vh;
  background: linear-gradient(0deg, rgba(0, 0, 0, .9), transparent); opacity: 0; transition: opacity .2s; }
#vod-barra.visible { opacity: 1; }
#vod-titulo { font-size: clamp(17px, 3.4vh, 38px); margin-bottom: 1.6vh; }
#vod-linea { display: flex; align-items: center; gap: 1.4vw; font-size: clamp(14px, 2.4vh, 26px); }
#vod-pista { flex: 1; height: 6px; background: rgba(255, 255, 255, .25); border-radius: 3px; overflow: hidden; }
#vod-avance { height: 100%; background: var(--acento); width: 0; }
#vod-ayuda { color: var(--tenue); font-size: clamp(12px, 1.8vh, 20px); margin-top: 1.4vh; }
#vod-cerrar { display: none; position: absolute; top: calc(env(safe-area-inset-top) + 10px); left: 12px; width: 44px;
  height: 44px; border-radius: 50%; background: var(--panel); border: 1px solid #333; font-size: 20px; z-index: 2; }
body.tactil #vod-cerrar { display: block; }
body.tactil #vod-barra { display: none; }
.temporadas { flex-wrap: nowrap; overflow: hidden; padding: 4px; }
.temporadas .boton { flex: none; }
body.tactil .temporadas { overflow-x: auto; }

/* ---------- Estilo Netflix: banner + filas horizontales ---------- */
#explorar.con-hero { padding: 0; }
.hero { position: absolute; left: 0; right: 0; top: 0; height: 50vh; overflow: hidden; }
.hero-fondo { position: absolute; inset: 0 0 0 30%; background-size: cover; background-position: center 20%;
  transition: background-image .25s; }
.hero-fondo.logo { inset: 8vh 6vw 8vh 62%; background-size: contain; background-repeat: no-repeat; background-position: center; }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--fondo) 30%, rgba(11, 11, 13, .75) 48%, rgba(11, 11, 13, 0) 75%),
              linear-gradient(0deg, var(--fondo) 0%, rgba(11, 11, 13, 0) 35%); }
.hero-texto { position: absolute; z-index: 1; left: 4vw; top: 6vh; width: 46vw; }
.hero-etq { color: var(--acento); font-weight: 700; letter-spacing: .25em; font-size: clamp(11px, 1.7vh, 18px); }
.hero h1 { font-weight: 700; font-size: clamp(24px, 5.6vh, 62px); margin: 1vh 0; line-height: 1.08;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero-datos { color: var(--oro); font-size: clamp(13px, 2.2vh, 24px); margin-bottom: 1.4vh; }
.hero-resumen { color: #d6d0c4; font-size: clamp(13px, 2.2vh, 24px); line-height: 1.45; display: -webkit-box;
  -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.filas { position: absolute; left: 0; right: 0; top: 50vh; bottom: 0; overflow: hidden; padding: 0 0 0 4vw; }
.bloque { padding-bottom: 1vh; }
.bloque h2 { margin: .4vh 0 .8vh !important; }
.fila { position: relative; scroll-behavior: auto; }
.tarjeta-h { flex: none; width: clamp(180px, 18vw, 340px); aspect-ratio: 16 / 9; position: relative; border-radius: 8px;
  overflow: hidden; border: 3px solid transparent; background: #17171b; cursor: pointer; transition: transform .12s; }
.tarjeta-h img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tarjeta-h.canal img { object-fit: contain; padding: 12% 20% 22%; background: radial-gradient(#26262d, #141418); }
.th-titulo { position: absolute; left: 0; right: 0; bottom: 0; padding: 3vh .8vw .8vh; font-size: clamp(12px, 2vh, 22px);
  background: linear-gradient(0deg, rgba(0, 0, 0, .9), transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tarjeta-h .progreso { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; border-radius: 0; }
.tarjeta-h.enfocado { border-color: var(--texto); transform: scale(1.05); z-index: 1; }
body.tactil .hero { position: relative; height: 34vh; }
body.tactil .hero-texto { width: auto; right: 16px; left: 16px; top: auto; bottom: 8px; }
body.tactil .hero-resumen { -webkit-line-clamp: 2; }
body.tactil .filas { position: static; overflow: visible; padding: 0 0 30px 16px; }
body.tactil .tarjeta-h { width: 62vw; max-width: 300px; }

/* ---------- Franja: ahora / después ---------- */
#banda-prog { margin-top: .8vh; font-size: clamp(13px, 2.2vh, 24px); color: var(--tenue); }
#banda-prog .ahora { color: var(--texto); }
#banda-prog .progreso { max-width: 30vw; }
.chan .nom small { display: block; color: var(--tenue); font-size: .62em; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Guía de TV ---------- */
#guia { --col-canal: 22vw; position: absolute; inset: 0; display: none; background: rgba(9, 9, 11, .98);
  grid-template-rows: 42vh auto 1fr; padding: 0 2.4vw 3vh; }
#guia.abierta { display: grid; }
#guia-arriba { padding: 5vh 40vw 2vh 1.4vw; overflow: hidden; }
#guia-canal { color: var(--oro); font-size: clamp(14px, 2.4vh, 26px); }
#guia-titulo { font-size: clamp(22px, 5vh, 54px); font-weight: 700; margin: .8vh 0; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
#guia-hora { color: var(--acento); font-size: clamp(14px, 2.4vh, 26px); font-weight: 600; }
#guia-desc { color: #cfc9bd; font-size: clamp(13px, 2.2vh, 24px); margin-top: 1vh; line-height: 1.4; display: -webkit-box;
  -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#guia-ayuda { color: var(--tenue); font-size: clamp(11px, 1.8vh, 19px); margin-top: 1.4vh; }
body.guia-abierta #video { z-index: 20; left: auto; top: 4vh; right: 2.4vw; width: 32vw; height: calc(32vw * 9 / 16);
  border-radius: 10px; box-shadow: 0 0 0 2px #2a2a30; }
#guia-regla { position: relative; height: 4vh; margin-left: var(--col-canal); color: var(--tenue); font-size: clamp(12px, 2vh, 22px); }
#guia-regla span { position: absolute; top: .6vh; border-left: 1px solid #333; padding-left: .5vw; }
#guia-cuerpo { position: relative; overflow: hidden; }
#guia-filas { position: absolute; inset: 0; }
#guia-ahora { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--acento); pointer-events: none; }
.g-fila { display: flex; height: 7.5vh; border-bottom: 1px solid #1d1d22; }
.g-canal { width: var(--col-canal); flex: none; display: flex; align-items: center; gap: .8vw; padding-right: 1vw;
  font-size: clamp(13px, 2.2vh, 24px); overflow: hidden; }
.g-num { color: var(--oro); width: 2.6em; text-align: right; font-weight: 600; flex: none; }
.g-canal img { width: 2.6em; height: 2.6em; object-fit: contain; flex: none; }
.g-nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-fila.sonando .g-nom { color: var(--oro); }
.g-pista { position: relative; flex: 1; }
.g-prog { position: absolute; top: .5vh; bottom: .5vh; background: #18181d; border-radius: 6px; padding: 0 .7vw;
  display: flex; align-items: center; font-size: clamp(12px, 2vh, 22px); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; border: 3px solid transparent; box-shadow: inset -2px 0 0 #09090b; cursor: pointer; color: var(--tenue); }
.g-prog.vivo { background: #1f1f26; color: var(--texto); }
.g-prog.enfocado { border-color: var(--texto); background: var(--acento); color: #fff; }
body.tactil #guia { --col-canal: 34vw; grid-template-rows: auto auto 1fr; }
body.tactil #guia-arriba { padding: calc(env(safe-area-inset-top) + 56.25vw + 12px) 12px 8px; }
body.tactil.guia-abierta #video { left: 0; right: 0; top: env(safe-area-inset-top); width: 100vw; height: calc(100vw * 9 / 16); border-radius: 0; }
.fila, .temporadas, #cats, #chans, .fuentes-lista, #explorar { scrollbar-width: none; }
.fila::-webkit-scrollbar, .temporadas::-webkit-scrollbar, #explorar::-webkit-scrollbar { display: none; }
body.tactil #guia { --col-canal: 26vw; padding: 0 6px 10px; }
body.tactil #guia-ayuda { display: none; }
body.tactil .g-canal img { display: none; }
body.tactil .g-num { width: 1.8em; }
body.tactil .g-canal, body.tactil .g-prog { font-size: 13px; }
body.tactil #guia-regla { font-size: 11px; }