/* ===== M3U Player — UI para TV (10-foot UI) =====
   1920x1080, navegación con mando, foco inequívoco.
   Rediseño con escala de espaciado generosa para evitar sensación de apretado. */

:root {
  /* Paleta BUFFON TV: morados del logo sobre violeta-negro, acento púrpura */
  --ink:        #0c0714;
  --panel:      #150d22;
  --panel-2:    #1e1430;
  --panel-3:    #2a1c44;
  --line:       #382a52;
  --text:       #f1ecf9;
  --muted:      #9d92b8;
  --accent:     #7d2ae8;
  --accent-2:   #a35bff;
  --accent-dim: #2a1747;
  --accent-soft: rgba(125,42,232,.20);
  --ok:         #5bd6a0;
  --err:        #ff8a7a;
  --gold:       #ffce5e;

  /* Escala de espaciado */
  --s1: 6px; --s2: 10px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 44px;
  --radius: 16px;
}

* { box-sizing: border-box; }
/* Regla de oro: si algo lleva el atributo "hidden", NO se ve.
   Sin esto, cualquier bloque con "display: flex" en su clase se sigue
   viendo aunque el JavaScript lo haya escondido (nos paso con el aviso del
   numero de canal, que se quedaba puesto en una esquina). */
[hidden] { display: none !important; }

html, body {
  margin: 0; height: 100%;
  background: var(--ink); color: var(--text);
  font-family: "LG Smart UI", "Segoe UI", system-ui, Roboto, Arial, sans-serif;
  font-size: 22px; line-height: 1.4;
  -webkit-font-smoothing: antialiased; overflow: hidden;
}

/* La barra lateral, en PORCENTAJE y no en pixeles fijos: el "folio" sobre el
   que se dibuja la app cambia de tamaño segun el aparato (ver android-scale.js),
   y con 620px fijos la lista se comia media pantalla en un movil. 32.3% es
   exactamente lo que ocupaba antes en el folio de 1920. */
.app { display: grid; grid-template-columns: 32.3% 1fr; height: 100vh; }

/* Foco global: anillo claro y consistente */
[data-focus]:focus { outline: none; }
.btn:focus, .chip:focus, .tab:focus, .seg:focus, .field:focus, .toggle:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ---------------- Barra lateral ---------------- */
.sidebar {
  min-height: 0; overflow: hidden;
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  padding: var(--s6) var(--s5) 0;
  min-height: 0;
}

.brand {
  display: flex; align-items: center; gap: var(--s3);
  margin-bottom: var(--s5);
}
.brand__mark {
  width: 50px; height: 50px;
  display: grid; place-items: center;
  background: var(--accent); color: var(--ink);
  border-radius: 14px; font-size: 22px;
}
.brand__name { font-weight: 800; letter-spacing: .03em; font-size: 30px; }

/* Pestañas de listas (cuentas) */
.tabs { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4); }
.tab {
  background: var(--panel-2); color: var(--text);
  border: 2px solid var(--line); border-radius: 999px;
  padding: 11px 22px; font-size: 18px; font-weight: 600; cursor: pointer;
  max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tab--active { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.tab--add { width: 52px; padding: 11px 0; text-align: center; font-size: 24px; color: var(--accent); }

/* Pestañas de sección: pista con relleno */
.seg-group { display: flex; gap: var(--s2); }
.seg-group--sections {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s1);
  margin-bottom: var(--s5);
}
.seg {
  flex: 1; background: transparent; color: var(--muted);
  border: 2px solid transparent; border-radius: 12px;
  padding: 16px 12px; font-size: 19px; font-weight: 700; cursor: pointer;
}
.seg--active { background: var(--accent); color: var(--ink); }

/* Búsqueda + chips */
.controls { margin-bottom: var(--s5); }
.field {
  width: 100%;
  background: var(--panel-2); border: 2px solid var(--line);
  border-radius: var(--radius); color: var(--text);
  font-size: 20px; padding: 16px 20px; outline: none;
}
.field::placeholder { color: var(--muted); }
.chips {
  display: flex; gap: var(--s2); flex-wrap: wrap;
  margin-top: var(--s3); max-height: 132px; overflow-y: auto;
}
.chip {
  background: var(--panel-2); color: var(--text);
  border: 2px solid var(--line); border-radius: 999px;
  padding: 9px 18px; font-size: 16px; cursor: pointer; white-space: nowrap;
}
.chip--active { background: var(--accent-soft); border-color: var(--accent); color: #fff; }

/* Cabecera de la lista (sección + recuento) */
.list-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3); padding: 0 var(--s1) var(--s3);
  border-bottom: 1px solid var(--line);
}
.list-head__title {
  font-size: 16px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.list-head__count { font-size: 15px; color: var(--muted); }

/* Barra de serie (volver) */
.series-bar {
  display: flex; align-items: center; gap: var(--s3);
  padding: 0 var(--s1) var(--s3); border-bottom: 1px solid var(--line);
}
.series-bar__title { font-size: 20px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Lista de contenido */
.list {
  list-style: none; margin: 0; padding: var(--s3) 0 var(--s5);
  overflow-y: auto; flex: 1; min-height: 0;
}
.list::-webkit-scrollbar { width: 10px; }
.list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }

.channel {
  display: flex; align-items: center; gap: var(--s4);
  padding: 16px 18px; border-radius: var(--radius);
  border: 2px solid transparent; margin-bottom: var(--s2); outline: none;
  transition: background .12s ease, border-color .12s ease;
  /* Al mantener el dedo encima no queremos que el movil seleccione el
     texto ni saque su lupa: ese gesto es para abrir nuestro menu. */
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.channel:focus {
  background: var(--accent-dim); border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.channel--playing { background: rgba(91,214,160,.10); }
.channel--playing .channel__title { color: var(--ok); }

.channel__logo {
  flex: 0 0 64px; width: 64px; height: 64px;
  border-radius: 12px; background: var(--panel-2);
  overflow: hidden; display: grid; place-items: center;
}
.channel__logo img { width: 100%; height: 100%; object-fit: contain; }
.channel__logo--empty { font-weight: 800; color: var(--accent); font-size: 26px; }

.channel__meta { min-width: 0; flex: 1; position: relative; padding-bottom: 7px; }
.channel__title { font-size: 21px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.channel__group { font-size: 15px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.channel__fav {
  flex: 0 0 auto; background: transparent; border: none; cursor: pointer;
  color: var(--line); font-size: 28px; padding: 6px 8px; line-height: 1;
}
.channel__fav.on { color: var(--gold); }
.channel--series .channel__chev { flex: 0 0 auto; color: var(--muted); font-size: 32px; padding: 0 10px; line-height: 1; }
.channel--series:focus .channel__chev { color: var(--accent); }

.channel--note {
  display: block; color: var(--muted); font-size: 16px; font-style: italic;
  border: none; background: transparent; padding: 18px;
}
.channel--note:focus { background: transparent; border: none; box-shadow: none; }

.sidebar__footer { padding: var(--s4) 0 var(--s5); border-top: 1px solid var(--line); }

/* Botones */
.btn {
  background: var(--accent); color: var(--ink);
  font-weight: 700; font-size: 19px; padding: 14px 22px;
  border: 2px solid transparent; border-radius: var(--radius); cursor: pointer; user-select: none;
}
.btn--ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn--block { display: block; width: 100%; text-align: center; }
.btn--sm { padding: 10px 18px; font-size: 17px; }

/* ---------------- Reproductor ---------------- */
/* min-height:0 y overflow:hidden son los que mandan aqui: sin ellos, la
   parrilla de caratulas no se queda dentro de su hueco, crece hacia abajo y
   arrastra a toda la pagina, dejando la columna de la izquierda fuera de la
   pantalla en cuanto bajabas unas filas. */
.player {
  display: flex; flex-direction: column; padding: var(--s6) 48px;
  min-width: 0; min-height: 0; overflow: hidden;
}
.screen {
  /* min-height:0 es lo que permite que la imagen se encoja cuando aparece la
     guia debajo. Sin eso, la guia se salia por abajo y quedaba cortada. */
  flex: 1 1 auto; min-height: 0;
  background: #000; border-radius: 20px; overflow: hidden;
  border: 2px solid var(--line); display: grid; place-items: center;
}
.video { width: 100%; height: 100%; background: #000; outline: none; }
.video:focus { box-shadow: inset 0 0 0 3px var(--accent); }

.now {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); padding-top: var(--s5);
}
.now__title { font-size: 30px; font-weight: 800; }
/* La categoría debajo del título del canal no aporta (ya sabes en qué
   categoría estás) y se come una línea entera. */
.now__group { display: none; }
.status {
  /* Antes iba en una sola linea con puntos suspensivos y el aviso importante
     ("Aun no activada. Facilita esta MAC...") se quedaba en "Aun n...". */
  flex: 0 1 auto; color: var(--ok); font-size: 17px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  padding: 11px 22px; max-width: 46%; line-height: 1.35;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.status--error { color: var(--err); border-color: var(--err); }

.hints {
  display: flex; gap: var(--s5); flex-wrap: wrap;
  color: var(--muted); font-size: 15px; padding-top: var(--s4);
}
.hints b { color: inherit; }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.dot--green { background: var(--ok); } .dot--blue { background: #5e9bff; } .dot--yellow { background: var(--gold); }

/* ---------------- Modales ---------------- */
.modal {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.7);
  align-items: center; justify-content: center; z-index: 50;
}
.modal.open { display: flex; }
.modal__card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 22px;
  padding: var(--s6); width: 640px; max-width: 90vw; max-height: 86vh; overflow-y: auto;
}
.modal__card--narrow { width: 460px; text-align: center; }
.modal__title { margin: 0 0 var(--s5); font-size: 27px; font-weight: 800; }
.modal__card .field { margin-bottom: var(--s3); }
.modal__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); }
/* flex-basis 150px: cada boton pide 150px y, si no caben, saltan de linea
   en vez de salirse de la pantalla. En una tele ancha siguen en una fila. */
.modal__actions .btn { flex: 1 1 150px; min-width: 0; }

.seg-group { margin-bottom: var(--s4); }
.modal .seg-group .seg { border: 2px solid var(--line); border-radius: 12px; color: var(--text); }
.modal .seg-group .seg--active { background: var(--accent-soft); border-color: var(--accent); color: #fff; }

.settings__label, .settings__sub { display: block; color: var(--muted); font-size: 17px; margin: 8px 0 12px; }
.settings__sub { margin-top: var(--s5); border-top: 1px solid var(--line); padding-top: var(--s4); }
.settings__pin-row { display: flex; gap: var(--s3); }
.settings__pin-row .field { flex: 1; margin-bottom: 0; }
.field--pin { letter-spacing: .4em; text-align: center; }
.settings__hint { color: var(--muted); font-size: 16px; margin-bottom: var(--s3); }
.settings__groups { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s2); }
.settings__group { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 12px 4px; }
.settings__group-name { font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toggle {
  flex: 0 0 auto; background: var(--panel-2); color: var(--text);
  border: 2px solid var(--line); border-radius: 999px;
  padding: 9px 20px; font-size: 16px; cursor: pointer; min-width: 128px;
}
.toggle--on { background: var(--accent-soft); border-color: var(--accent); color: #fff; }
.check { display: flex; align-items: center; gap: var(--s3); font-size: 18px; cursor: pointer; }
.pin-msg { color: var(--err); font-size: 16px; min-height: 22px; margin: var(--s2) 0; }

@media (prefers-reduced-motion: reduce) { .channel { transition: none; } }

/* ---------- Filas de categoría (lista vertical) ---------- */
.channel--cat .channel__logo--empty { color: var(--text); background: var(--panel-3); font-size: 24px; }
.channel--cat .channel__title { font-weight: 700; }
.channel--cat .channel__chev { flex: 0 0 auto; color: var(--muted); font-size: 32px; padding: 0 10px; line-height: 1; }
.channel--cat:focus .channel__chev { color: var(--accent); }
.channel__count {
  flex: 0 0 auto; color: var(--muted); font-size: 15px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 14px; min-width: 48px; text-align: center;
}
.channel--cat:focus .channel__count { border-color: var(--accent); color: var(--text); }

/* ---------- Marca BUFFON TV ---------- */
.brand__logo { height: 62px; width: auto; display: block; filter: drop-shadow(0 4px 14px rgba(125,42,232,.45)); }
.brand__name { font-weight: 800; letter-spacing: .04em; font-size: 26px; color: #fff; }

/* Toques elegantes: degradado morado en acciones y estados activos */
.btn,
.seg--active,
.tab--active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }
.btn--ghost { background: transparent; color: var(--text); }
.brand__mark { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }

/* ---------- Barra de transporte (avance/retroceso para VOD) ---------- */
.transport {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s5) var(--s5) var(--s4);
  background: linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,0));
}
.transport[hidden] { display: none; }
.tp-btn {
  flex: 0 0 auto; background: var(--panel-2); color: var(--text);
  border: 2px solid var(--line); border-radius: 999px;
  padding: 12px 22px; font-size: 19px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.tp-btn:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tp-btn--play { min-width: 70px; font-size: 22px; }
.tp-bar {
  flex: 1; height: 10px; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 999px; position: relative; cursor: pointer; overflow: hidden;
}
.tp-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.tp-time { flex: 0 0 auto; color: var(--muted); font-size: 17px; min-width: 150px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Aviso flotante (toast) ---------- */
.toast {
  position: fixed; left: 50%; bottom: 64px; transform: translateX(-50%);
  background: var(--panel-3); color: var(--text);
  border: 2px solid var(--accent); border-radius: 999px;
  padding: 16px 30px; font-size: 20px; font-weight: 600;
  z-index: 80; box-shadow: 0 10px 34px rgba(0,0,0,.55);
}
.toast[hidden] { display: none; }

/* ---------- Pantalla completa ---------- */
.screen:fullscreen, .screen:-webkit-full-screen { border: none; border-radius: 0; background: #000; }
.screen:fullscreen .video, .screen:-webkit-full-screen .video { border-radius: 0; }

/* ---------- Volver ----------
   Discreto para no comerse la imagen, pero siempre ahi. Se enciende al pasar
   el raton por encima. En una tele no sale: el mando ya tiene su tecla. */
.volver {
  position: absolute; left: var(--s4); top: var(--s4); z-index: 7;
  background: rgba(10, 6, 18, .62); color: var(--text);
  border: 2px solid rgba(255, 255, 255, .18); border-radius: 999px;
  padding: 10px 20px; font-size: 18px; font-weight: 700;
  cursor: pointer; opacity: .72;
  transition: opacity .15s ease, border-color .15s ease, background .15s ease;
}
.volver:hover, .volver:focus {
  opacity: 1; outline: none;
  border-color: var(--accent); background: rgba(10, 6, 18, .85);
}
.volver[hidden] { display: none; }

/* ---------- Carga remota / MAC ---------- */
.macbox {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 18px; font-size: 18px; color: var(--muted); margin-bottom: var(--s2);
}
.macbox .js-mac { color: var(--accent-2); font-weight: 800; letter-spacing: .04em; }
.modal__hint { color: var(--muted); font-size: 16px; margin: var(--s2) 0 0; }
.settings__mac {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 18px; font-size: 17px; color: var(--muted); margin-bottom: var(--s4);
}
.settings__mac b { color: var(--accent-2); letter-spacing: .04em; }

/* ---------- MAC en cabecera ---------- */
.brand__text { display: flex; flex-direction: column; gap: 2px; }
.brand__mac { font-size: 14px; color: var(--muted); letter-spacing: .03em; }
.brand__xtream-exp { font-size: 11px; color: var(--muted); opacity: .65; letter-spacing: .02em; }
.brand__xtream-exp:empty { display: none; }
.sidebar__footer { display: flex; flex-direction: column; gap: 6px; }
.brand__license { font-size: 11px; color: var(--muted); opacity: .6; letter-spacing: .02em; text-align: center; }
.brand__license:empty { display: none; }

/* ---------- Cartel central cuando no hay lista ---------- */
.screen { position: relative; }
.nocontent {
  position: absolute; inset: 0; background: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s3); text-align: center; padding: var(--s5); z-index: 5;
}
.nocontent[hidden] { display: none; }
.nocontent__logo { height: 120px; width: auto; filter: drop-shadow(0 6px 22px rgba(125,42,232,.5)); margin-bottom: var(--s2); }
.nocontent__label { color: var(--muted); font-size: 22px; }
.nocontent__mac {
  /* La MAC tiene 17 caracteres y antes se salia del recuadro en pantallas
     estrechas: se cortaba justo lo unico que el cliente tiene que leer.
     Ahora se parte en dos lineas antes que perderse. */
  font-size: 38px; font-weight: 800; letter-spacing: .04em; color: var(--accent-2);
  background: var(--panel-2); border: 2px solid var(--accent); border-radius: 16px;
  padding: 14px 26px;
  max-width: 100%; box-sizing: border-box;
  /* OJO: aqui NO va "overflow-wrap: anywhere". Con flexbox, ese valor hace
     que la caja se encoja hasta el ancho de UNA letra y la MAC se parta en
     varias lineas aunque quepa de sobra. "word-break: break-all" hace lo que
     queremos (partir solo si de verdad no cabe) sin ese efecto. */
  line-height: 1.25; word-break: break-all;
}
.nocontent__hint { color: var(--muted); font-size: 18px; }
.nocontent__hint b { color: var(--accent-2); }

/* ---------- Botón de peligro ---------- */
.btn--danger { background: linear-gradient(135deg, #c0392b, #e05a4a); color: #fff; }

/* Botón actualizar en el cartel central */
.nc-refresh { margin-top: var(--s3); padding: 14px 40px; font-size: 20px; }

/* ---------- Pantalla de detalle (película/serie) ----------
   Ocupa el mismo recuadro que la parrilla de carátulas, para que al elegir
   una película parezca que esa misma caja cambia de contenido y no que se
   apaga media pantalla. Dentro, la carátula a la izquierda y los datos a la
   derecha: en una tele 16:9 el hueco es ancho, no alto, y apilándolo todo
   en columna quedaba un claro enorme arriba y abajo. */
.player { position: relative; }
/* NO es una capa flotante: es un bloque mas de la columna, y la parrilla se
   quita de en medio mientras esta puesta. Una capa absoluta encima de todo,
   con la app escalada, se le atragantaba a los WebView viejos y dejaba media
   pantalla sin repintar. */
.detail {
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
}
.detail[hidden] { display: none; }
/* La tarjeta mide lo que mide su contenido y se queda centrada: llenar
   todo el alto dejaba franjas vacías a los lados de la carátula. */
.detail__card {
  flex: 0 1 auto; width: 100%; max-height: 100%; min-width: 0;
  display: flex; align-items: center; gap: var(--s5);
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s5);
  overflow: hidden; text-align: left;
}
/* La carátula, con su forma de cartel tal cual venga, sin bandas de relleno. */
.detail__cover {
  flex: 0 0 auto; width: 30%; max-width: 340px;
  height: auto; max-height: 100%; object-fit: contain;
  border-radius: 14px; box-shadow: 0 14px 44px rgba(0,0,0,.55);
}
.detail__body {
  flex: 1 1 auto; min-width: 0; max-height: 100%;
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center;
}
.detail__title { flex: 0 0 auto; font-size: 38px; font-weight: 800; margin: 0 0 8px; color: var(--text); line-height: 1.15; }
.detail__meta { flex: 0 0 auto; color: var(--muted); font-size: 18px; margin-bottom: 6px; }
.detail__stars { flex: 0 0 auto; color: var(--gold); font-size: 22px; letter-spacing: .06em; margin-bottom: var(--s3); }
/* La sinopsis ocupa lo que necesite y, si es larguísima, se encoge ella y se
   lee con la rueda: lo que nunca hace es empujar los botones fuera. */
.detail__plot {
  flex: 0 1 auto; min-height: 0; overflow-y: auto;
  color: var(--text); font-size: 19px; line-height: 1.55; opacity: .92;
  margin: 0 0 var(--s4); padding-right: 6px;
}
.detail__plot::-webkit-scrollbar { width: 8px; }
.detail__plot::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; }
/* Los botones, justo debajo de la sinopsis. */
.detail__actions { flex: 0 0 auto; display: flex; gap: var(--s3); flex-wrap: wrap; }
.detail__play, .detail__resume { padding: 14px 36px; font-size: 20px; }
.detail__resume { background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: #fff; }
.detail__resume[hidden] { display: none; }

/* ---------- Menú de pistas (audio / subtítulos) ---------- */
.track-menu {
  position: absolute; left: var(--s5); bottom: 110px; z-index: 9;
  background: var(--panel-2); border: 1px solid var(--accent); border-radius: 14px;
  padding: 8px; min-width: 280px; max-height: 60%; overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0,0,0,.6);
}
.track-menu[hidden] { display: none; }
.track-menu__item {
  display: block; width: 100%; text-align: left;
  background: transparent; color: var(--text); border: 0; border-radius: 10px;
  padding: 12px 16px; font-size: 18px; cursor: pointer;
}
.track-menu__item:focus { outline: none; background: var(--accent); color: #fff; }
.track-menu__item--disabled { color: var(--muted); cursor: default; }

/* ---------------- Cuentas guardadas (perfiles) ---------------- */
.acc__list { max-height: 46vh; overflow-y: auto; margin: var(--s3) 0; }
.acc {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  background: var(--panel-2); border: 2px solid var(--line); border-radius: 14px;
  padding: 14px 18px; margin-bottom: 10px;
}
.acc--on { border-color: var(--accent); background: var(--accent-dim); }
.acc__n { font-size: 21px; font-weight: 700; display: flex; align-items: center; gap: 10px; min-width: 0; }
.acc__tag {
  background: var(--accent); color: #fff; border-radius: 999px;
  padding: 3px 12px; font-size: 14px; font-weight: 700; white-space: nowrap;
}
.acc__b { display: flex; gap: 10px; flex-shrink: 0; }
.acc__vacio { color: var(--muted); font-size: 19px; padding: 18px 4px; }
.btn--mini { padding: 9px 18px !important; font-size: 17px !important; }
.btn--avisa { border-color: var(--accent) !important; color: #fff !important; }
.modal__err {
  color: #ff8b7a; background: rgba(255,139,122,.10);
  border: 1px solid rgba(255,139,122,.35); border-radius: 12px;
  padding: 12px 16px; font-size: 18px; margin-bottom: var(--s3);
}
.modal__err[hidden] { display: none; }

/* ---------------- Buzón de mensajes ---------------- */
.inbox { max-height: 52vh; overflow-y: auto; margin: var(--s3) 0; }
.msgi {
  background: var(--panel-2); border: 2px solid var(--line); border-radius: 14px;
  padding: 16px 20px; margin-bottom: 12px;
}
.msgi--nuevo { border-color: var(--accent); background: var(--accent-dim); }
.msgi__h { font-size: 21px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.msgi__f { color: var(--muted); font-size: 16px; margin: 4px 0 8px; }
.msgi__t { font-size: 19px; line-height: 1.5; white-space: pre-wrap; }

/* ------- Pantallas bajas (TV-box, movil en horizontal, ventanas cortas) -------
   Con poca altura los Ajustes no caben: encogemos texto y separaciones para
   que se vea todo sin que se corte nada. */
@media (max-height: 760px) {
  .modal__card { padding: var(--s4); max-height: 94vh; border-radius: 16px; }
  .modal__title { font-size: 21px; margin-bottom: var(--s3); }
  .modal__actions { gap: 8px; margin-top: var(--s3); }
  .modal__actions .btn { font-size: 15px; padding: 10px 12px; flex: 1 1 118px; }
  .settings__label, .settings__sub { font-size: 15px; margin: 6px 0 8px; }
  .settings__sub { margin-top: var(--s3); padding-top: var(--s3); }
  .settings__hint, .modal__hint { font-size: 14px; }
  .settings__mac { font-size: 15px; padding: 10px 14px; }
  .settings__group-name { font-size: 16px; }
  .settings__group { padding: 7px 4px; }
  .field { font-size: 17px; padding: 10px 14px; }
  .acc { padding: 10px 14px; margin-bottom: 8px; }
  .acc__n { font-size: 18px; }
  .acc__list { max-height: 34vh; }
  .btn--mini { padding: 7px 14px !important; font-size: 15px !important; }
  .inbox { max-height: 38vh; }
  .msgi { padding: 12px 15px; margin-bottom: 9px; }
  .msgi__h { font-size: 18px; }
  .msgi__f { font-size: 14px; }
  .msgi__t { font-size: 16px; }
}
@media (max-width: 760px) {
  .modal__card { width: 100%; max-width: 94vw; }
  .modal__actions .btn { flex: 1 1 110px; font-size: 15px; padding: 10px 12px; }
}

/* ---------------- Ajustes: bloques y listas de opciones ---------------- */
.ajuste {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}
.ajuste__t { font-size: 20px; font-weight: 700; margin-bottom: 12px; }
.ajuste__h { color: var(--muted); font-size: 15px; margin-top: 10px; line-height: 1.5; }
.ajuste__sub {
  color: var(--muted); font-size: 16px; font-weight: 600;
  margin: var(--s4) 0 10px;
}
/* Cada opción es un botón normal: con el mando se llega y se pulsa igual
   que a cualquier otro. Un <select> aquí es inservible. */
.ops { display: flex; gap: 10px; flex-wrap: wrap; }
.op {
  background: var(--panel-2); color: var(--text);
  border: 2px solid var(--line); border-radius: 12px;
  padding: 12px 20px; font-size: 18px; font-weight: 600; cursor: pointer;
  max-width: 100%; text-align: left;
}
.op--on { background: var(--accent-dim); border-color: var(--accent); color: #fff; }
.op--on::before { content: '✓ '; color: var(--accent-2); font-weight: 800; }
.op:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Rueda de Ajustes, arriba del todo en la barra lateral */
.brand { position: relative; }
.brand__cfg {
  margin-left: auto; flex-shrink: 0;
  background: var(--panel-2); color: var(--text);
  border: 2px solid var(--line); border-radius: 14px;
  width: 54px; height: 54px; font-size: 24px; line-height: 1; cursor: pointer;
}
.brand__cfg:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--accent-dim); }

@media (max-height: 760px) {
  .ajuste { margin-top: var(--s4); padding-top: var(--s3); }
  .ajuste__t { font-size: 17px; margin-bottom: 9px; }
  .ajuste__h { font-size: 13px; margin-top: 7px; }
  .ajuste__sub { font-size: 14px; margin: var(--s3) 0 8px; }
  .op { padding: 9px 14px; font-size: 15px; border-radius: 10px; }
  .ops { gap: 8px; }
  .brand__cfg { width: 44px; height: 44px; font-size: 20px; }
}

/* ---------------- Buscar: botón con lupa ---------------- */
.btn--busca { display: flex; align-items: center; justify-content: center; gap: 12px; }
.btn--busca .lupa { font-size: 22px; line-height: 1; }
.btn--busca-on { border-color: var(--accent); background: var(--accent-dim); color: #fff; }

/* ---------------- Medida de velocidad ---------------- */
.velo { margin-top: 12px; color: var(--muted); font-size: 16px; min-height: 8px; }
.velo--ok, .velo--mal {
  background: var(--panel-2); border: 2px solid var(--line);
  border-radius: 14px; padding: 14px 18px;
}
.velo--ok { border-color: var(--accent); }
.velo--mal { border-color: var(--err); color: var(--err); }
.velo__n { font-size: 34px; font-weight: 800; color: var(--accent-2); line-height: 1.1; }
.velo__n span { font-size: 18px; font-weight: 600; color: var(--muted); }
.velo__v { font-size: 17px; color: var(--text); margin-top: 6px; line-height: 1.4; }
.velo__d { font-size: 14px; color: var(--muted); margin-top: 8px; }

@media (max-height: 760px) {
  .btn--busca .lupa { font-size: 18px; }
  .velo { font-size: 14px; }
  .velo--ok, .velo--mal { padding: 10px 14px; }
  .velo__n { font-size: 26px; }
  .velo__n span { font-size: 15px; }
  .velo__v { font-size: 14px; }
  .velo__d { font-size: 12px; }
}

/* ---------------- Guía de programación en la lista ----------------
   Una sola linea debajo del nombre: la hora de empieze, lo que estan
   echando y una barrita con lo que lleva emitido. El hueco se reserva
   siempre, aunque el canal no tenga guia, para que todas las filas midan
   lo mismo y los numeros queden alineados. */
.channel__epg {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  margin-top: 3px; line-height: 1.3; min-height: 1.3em;
  font-size: 17px; color: var(--muted);
}
.epg__h {
  flex: 0 0 auto; color: var(--accent-2); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.epg__t { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* La barra de lo que lleva emitido va debajo del todo, ocupando el ancho
   del nombre: asi no le quita ni un pixel al texto del programa. */
.epg__barra {
  position: absolute; left: 0; bottom: 0; width: 100%; max-width: 300px;
  height: 3px; border-radius: 2px; background: var(--line); overflow: hidden;
}
.epg__barra i { display: block; height: 100%; background: var(--accent); }
.channel:focus .channel__epg, .channel--playing .channel__epg { color: var(--text); }

/* ---------------- Menú de un canal ---------------- */
.ops--col { flex-direction: column; }
.ops--col .op { width: 100%; flex: none; }

/* ---------------- Ficha del programa ---------------- */
.ficha { max-height: 52vh; overflow-y: auto; margin: var(--s3) 0; }
.prog {
  background: var(--panel-2); border: 2px solid var(--line); border-radius: 12px;
  padding: 12px 16px; margin-bottom: 9px;
}
.prog--ahora { border-color: var(--accent); background: var(--accent-dim); }
.prog__h { color: var(--accent-2); font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 10px; }
.prog__t { font-size: 19px; font-weight: 700; margin-top: 3px; }
.prog__d { font-size: 16px; color: var(--muted); margin-top: 5px; line-height: 1.45; }

/* ---------------- Elegir canal de la guía ---------------- */
.epglist { max-height: 46vh; overflow-y: auto; margin: var(--s3) 0; }
.epgc {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--panel-2); color: var(--text);
  border: 2px solid var(--line); border-radius: 12px;
  padding: 10px 14px; margin-bottom: 8px; font-size: 18px; cursor: pointer;
}
.epgc--on { border-color: var(--accent); background: var(--accent-dim); }
.epgc:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.epgc img { width: 46px; height: 32px; object-fit: contain; flex-shrink: 0; }
.epgc__ini {
  width: 46px; height: 32px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--accent-dim); border-radius: 7px; font-weight: 800; color: var(--accent-2);
}
.epgc__n { display: flex; align-items: center; gap: 10px; min-width: 0; }

@media (max-height: 760px) {
  .channel__epg { font-size: 15px; gap: 7px; }
  .prog { padding: 9px 13px; margin-bottom: 7px; }
  .prog__h { font-size: 14px; }
  .prog__t { font-size: 16px; }
  .prog__d { font-size: 13px; }
  .epgc { font-size: 15px; padding: 8px 12px; }
  .epgc img, .epgc__ini { width: 38px; height: 26px; }
  .ficha, .epglist { max-height: 38vh; }
}

/* ---------------- Aviso de "sigue pulsando" ---------------- */
.pulsa {
  position: fixed; left: 50%; bottom: 7%; transform: translateX(-50%);
  background: var(--panel); border: 2px solid var(--accent);
  border-radius: 16px; padding: 14px 24px; z-index: 60;
  box-shadow: 0 14px 40px rgba(0,0,0,.6); text-align: center;
  pointer-events: none;
}
.pulsa[hidden] { display: none; }
.pulsa__t { font-size: 18px; font-weight: 600; margin-bottom: 10px; }
.pulsa__b { width: 260px; height: 6px; background: var(--line); border-radius: 4px; overflow: hidden; }
.pulsa__b i { display: block; height: 100%; width: 0; background: var(--accent); }

@media (max-height: 760px) {
  .pulsa { padding: 10px 18px; border-radius: 12px; }
  .pulsa__t { font-size: 15px; margin-bottom: 8px; }
  .pulsa__b { width: 200px; height: 5px; }
}

/* ---------- Numero de canal en la lista del directo ---------- */
/* Ancho fijo para que los titulos queden alineados aunque el numero
   tenga una, dos o tres cifras. */
.channel__num {
  flex: 0 0 62px; width: 62px; text-align: right; padding-right: 14px;
  font-size: 26px; font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.channel:focus .channel__num { color: var(--accent); }
.channel--playing .channel__num { color: var(--gold); }

/* ---------- El numero que sale al teclear en el mando ---------- */
.numosd {
  position: fixed; top: 40px; right: 40px; z-index: 60;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  padding: 14px 22px; border-radius: 16px;
  background: rgba(18, 10, 30, .92); border: 2px solid var(--accent);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .55);
  pointer-events: none; max-width: 46%;
}
.numosd b { font-size: 54px; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.numosd span {
  font-size: 19px; color: var(--muted); max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-height: 760px) {
  .numosd { top: 24px; right: 24px; padding: 10px 16px; }
  .numosd b { font-size: 40px; }
  .channel__num { flex-basis: 52px; width: 52px; font-size: 22px; }
}

/* ---------- Lista de canales y guia encima del directo ---------- */
/* Se abre con la flecha izquierda sin salir de la pantalla completa: a la
   izquierda los canales con lo que echan, a la derecha la guia del canal
   que tiene el foco. El canal se sigue viendo detras. */
.zaplist {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 40;
  display: flex; align-items: stretch;
  /* Ancho fijo: si se deja al contenido, los porcentajes de las dos columnas
     se quedan en nada y los titulos de la guia salen todos cortados. */
  width: 76%; max-width: 1180px;
  font-size: 19px;
}
.zaplist__col { display: flex; flex-direction: column; min-height: 0; }
.zaplist__col--ch {
  flex: 0 0 47%; min-width: 300px;
  background: rgba(10, 6, 20, .90);
  border-right: 1px solid rgba(255, 255, 255, .10);
}
.zaplist__col--epg {
  flex: 1 1 53%; min-width: 240px;
  background: rgba(10, 6, 20, .78);
}
.zaplist__h {
  flex: 0 0 auto; display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; padding: 13px 16px 9px; color: #fff; font-size: 18px; font-weight: 800;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.zaplist__h span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zaplist__hint { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--muted); }
.zaplist__ul { flex: 1; min-height: 0; margin: 0; padding: 6px; list-style: none; overflow-y: auto; }

/* --- una fila de canal --- */
.zapi {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 10px; outline: none; color: #efe9fb;
}
.zapi__n {
  flex: 0 0 42px; text-align: right; font-weight: 700; font-size: 18px;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.zapi__logo {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 7px;
  background: rgba(255, 255, 255, .07); overflow: hidden;
  display: grid; place-items: center; font-size: 15px; font-weight: 700; color: var(--muted);
}
.zapi__logo img { width: 100%; height: 100%; object-fit: contain; }
.zapi__meta { flex: 1; min-width: 0; }
.zapi__t {
  display: block; font-size: 19px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zapi__p {
  display: block; font-size: 15px; color: var(--muted); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* El que tiene el foco, en claro: asi se ve de lejos cual estas eligiendo. */
.zapi:focus { background: rgba(255, 255, 255, .93); color: #15102a; }
.zapi:focus .zapi__n { color: #4a3a86; }
.zapi:focus .zapi__p { color: #5c5480; }
.zapi--ahora .zapi__n { color: var(--gold); }
.zapi--ahora .zapi__t { color: var(--gold); }
.zapi:focus.zapi--ahora .zapi__t { color: #15102a; }

/* --- la guia del canal enfocado --- */
.zapg { display: flex; gap: 10px; padding: 7px 10px; border-radius: 10px; outline: none; color: #efe9fb; }
.zapg__h { flex: 0 0 52px; color: var(--muted); font-variant-numeric: tabular-nums; }
.zapg__t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zapg--ahora { color: var(--accent-2, #9f86ff); font-weight: 700; }
.zapg--ahora .zapg__h { color: var(--accent-2, #9f86ff); }
.zapg:focus { background: rgba(255, 255, 255, .93); color: #15102a; }
.zapg:focus .zapg__h { color: #4a3a86; }
.zapg__dia {
  padding: 9px 10px 4px; color: var(--accent); font-size: 14px;
  font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
}
.zapg__vacio { padding: 12px 10px; color: var(--muted); font-size: 16px; }

@media (max-width: 900px) {
  .zaplist { width: 94%; }
  .zaplist__col--ch { flex: 1 1 100%; }
  .zaplist__col--epg { display: none; }
}

/* ---------- Pantallas bajas: un móvil en horizontal ----------
   El diseño está pensado para una tele, donde sobra alto. En un móvil
   tumbado el folio es mucho más bajo y la cabecera de la barra lateral
   (logo + pestañas + buscador) se comía el sitio de los canales: quedaba
   UNA fila. Aquí se aprieta todo eso —sin mover nada de sitio— para que
   quepan cinco o seis canales y el nombre no salga cortado.
   Lo activa android-scale.js cuando el folio es bajo; en la tele esta
   parte ni existe. */
.app--compacta .sidebar { padding-top: var(--s3); }
.app--compacta .brand { gap: 10px; margin-bottom: var(--s2); }
.app--compacta .brand__logo { width: 40px; height: 40px; }
.app--compacta .brand__name { font-size: 20px; }
.app--compacta .brand__mac { font-size: 12px; }
/* La caducidad de la lista ya sale abajo del todo ("365 dias restantes ·
   vence...") y arriba se comia una linea entera de las pocas que hay. */
.app--compacta #brand-xtream-exp { display: none; }
.app--compacta .brand__cfg { width: 38px; height: 38px; font-size: 17px; }

.app--compacta .seg-group { padding: 4px; margin-bottom: var(--s3); }
/* Las tres pestañas (TV en Directo / Peliculas / Series) tienen que caber
   en la columna de la izquierda. En un movil pequeño apaisado no cabian y
   "Series" se quedaba cortada por la mitad. */
.app--compacta .seg { padding: 8px 7px; font-size: 15px; white-space: nowrap; }
.app--compacta .btn--busca { padding: 7px 14px; font-size: 16px; margin-bottom: 0; }
.app--compacta .controls { margin-bottom: 10px; }
/* En un móvil la lista se lleva algo más de ancho: es lo que se usa, y con
   el 32% de la tele los nombres largos salían todos cortados. */
.app--compacta { grid-template-columns: 37% 1fr; }
.app--compacta .series-bar { padding: 4px 0; margin-bottom: 6px; }
.app--compacta .series-bar__title { font-size: 17px; }
.app--compacta .sidebar__footer { padding: 6px 0 8px; }

/* Las filas de canal: menos hueco alrededor y el número y el logo más
   pequeños, que es lo que dejaba el nombre en "Mov...". */
/* Un movil apaisado tiene la mitad de alto que una tele. Con las filas de
   la tele solo se veian TRES canales y había que estar deslizando todo el
   rato. Apretandolas caben el doble y se siguen leyendo igual de bien. */
.app--compacta .channel { padding: 5px 9px; gap: 9px; }
.app--compacta .channel__num { flex-basis: 28px; width: 28px; font-size: 16px; padding-right: 5px; }
.app--compacta .channel__logo { flex-basis: 32px; width: 32px; height: 32px; }
.app--compacta .channel__title { font-size: 17px; }
.app--compacta .channel__group { font-size: 12px; }
/* En el movil la fila lleva dos lineas: apretamos un poco el hueco de
   arriba y abajo para que sigan cabiendo cuatro canales en pantalla. */
.app--compacta .channel { padding: 4px 9px; }
.app--compacta .channel__epg { font-size: 14px; gap: 6px; margin-top: 0; }
.app--compacta .channel__meta { padding-bottom: 4px; }
.app--compacta .epg__barra { height: 2px; max-width: 150px; }
.app--compacta .channel__fav { font-size: 19px; padding: 3px 5px; }

/* La parte del reproductor: los avisos de las teclas de colores no pintan
   nada en un móvil, y el título de abajo puede ser algo más discreto. */
.app--compacta .hints { display: none; }
.app--compacta .player { padding: var(--s4) 24px; }
.app--compacta .now { padding-top: var(--s3); }
.app--compacta .now__title { font-size: 24px; }
.app--compacta .now__group { font-size: 15px; }
.app--compacta .status {
  /* En un movil apaisado el aviso importante ("Aun no activada, facilita
     esta MAC...") se cortaba a media frase: tres lineas estrechas no daban
     para tanto texto. Aqui se le deja mas ancho y una linea mas. */
  font-size: 14px; padding: 7px 13px; max-width: 58%; -webkit-line-clamp: 4;
}

/* ---------- El cartel de la MAC en pantallas bajas ----------
   Una tele tiene 1080 de alto y un movil apaisado la mitad. Con las medidas
   de la tele, el cartel no cabia: se cortaba justo por el boton de "Entrar
   con usuario y contraseña", que es la otra forma de entrar. */
.app--compacta .nocontent { gap: 7px; padding: var(--s3); }
.app--compacta .nocontent__logo { height: 54px; margin-bottom: 0; }
.app--compacta .nocontent__label { font-size: 16px; }
.app--compacta .nocontent__mac { font-size: 25px; padding: 7px 16px; border-radius: 12px; }
.app--compacta .nocontent__hint { font-size: 14px; }
.app--compacta .nc-refresh { margin-top: 4px; padding: 8px 24px; font-size: 16px; }

/* ---------- La guía, debajo de la imagen ----------
   Dos filas: lo que echan AHORA (con su barra de avance) y lo que viene
   LUEGO. La imagen de arriba se encoge sola para dejarle sitio. */
.epg-info {
  flex: 0 0 auto; margin-top: var(--s3); padding: 10px 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.epgi { display: flex; align-items: center; gap: 12px; min-width: 0; }
.epgi__et {
  flex: 0 0 auto; width: 62px; font-size: 13px; font-weight: 800;
  letter-spacing: .06em; color: var(--muted);
}
.epgi--ahora .epgi__et { color: var(--accent); }
.epgi__h { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--accent-2); font-weight: 700; }
.epgi--luego .epgi__h { color: var(--muted); font-weight: 600; }
.epgi__t {
  flex: 1 1 auto; min-width: 0; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.epgi--ahora { font-size: 20px; }
.epgi--luego { font-size: 17px; color: var(--muted); }
.epgi--luego .epgi__t { font-weight: 500; }
.epgi__barra {
  flex: 0 0 170px; height: 6px; border-radius: 3px;
  background: var(--line); overflow: hidden;
}
.epgi__barra i { display: block; height: 100%; background: var(--accent); }

.app--compacta .epg-info { padding: 7px 11px; border-radius: 12px; gap: 3px; }
.app--compacta .epgi--ahora { font-size: 16px; }
.app--compacta .epgi--luego { font-size: 14px; }
.app--compacta .epgi { gap: 8px; }
.app--compacta .epgi__et { width: 46px; font-size: 11px; }
.app--compacta .epgi__barra { flex-basis: 90px; height: 5px; }

/* ---------- Nombres largos que se deslizan ----------
   Si el nombre del canal no cabe, en vez de cortarlo con puntos suspensivos
   se desliza despacio de un lado a otro, pero SOLO en la fila seleccionada:
   animar toda la lista dejaria clavado a un TV-box. */
.channel__title, .zapi__t, .epg__t, .epgi__t {
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
/* Quieto va como texto normal, para que salgan los puntos suspensivos; solo
   al deslizarse se convierte en una tira de una pieza. */
.js-corre { white-space: nowrap; }
.js-corre.corre {
  display: inline-block; will-change: transform;
  animation-name: correTexto; animation-timing-function: ease-in-out;
  animation-iteration-count: infinite; animation-direction: alternate;
}
@keyframes correTexto {
  0%, 14%   { transform: translateX(0); }
  86%, 100% { transform: translateX(var(--corre, 0)); }
}

.app--compacta .sidebar__footer { font-size: 13px; }


/* ================= Películas y series: la parrilla de carátulas =========
   La izquierda se queda con las categorías y aquí, donde en el directo va
   la imagen del canal, van las carátulas de la categoría elegida. Se
   reconoce una película de un vistazo mucho antes que leyendo su nombre. */
.posters {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); overflow: hidden;
}
.posters__head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
/* Debajo del nombre de la serie: año, género, nota y de qué va. */
.posters__sub {
  flex: 1 1 100%; order: 3; min-width: 0;
  display: flex; flex-direction: column; gap: 2px; margin-top: 2px;
}
.posters__meta { font-size: 16px; color: var(--muted); }
.posters__meta b { color: var(--gold); font-weight: 700; }
.posters__plot {
  font-size: 16px; color: var(--muted); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.app--compacta .posters__meta, .app--compacta .posters__plot { font-size: 14px; }
.app--compacta .posters__plot { -webkit-line-clamp: 2; }

/* Las temporadas, como pestañas a la derecha del titulo. */
.posters__temps { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.temp {
  background: var(--panel-2); color: var(--muted); cursor: pointer;
  border: 2px solid transparent; border-radius: 999px;
  padding: 7px 16px; font: inherit; font-size: 16px; font-weight: 600;
  outline: none;
}
.temp--on { background: var(--accent-dim); color: var(--text); border-color: var(--line); }
.temp:focus { border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 3px var(--accent-soft); }
.app--compacta .temp { padding: 5px 12px; font-size: 14px; }
.app--compacta .posters__temps { gap: 6px; }
.posters__cat { font-size: 21px; font-weight: 700; }
.posters__n { font-size: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
.posters__grid {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 16px; padding: 16px;
  align-content: start;
}
.posters__grid::-webkit-scrollbar { width: 10px; }
.posters__grid::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
.posters--vacia .posters__grid { display: none; }
/* El aviso de "aquí no hay nada", centrado en el hueco y no pegado abajo. */
.posters__vacio {
  flex: 1 1 auto; display: grid; place-items: center; text-align: center;
  padding: 26px 32px; color: var(--muted); font-size: 19px; line-height: 1.5;
}
.app--compacta .posters__vacio { font-size: 16px; padding: 16px 20px; }
.posters__mas { grid-column: 1 / -1; padding: 14px 4px; color: var(--muted); font-size: 15px; }

.poster {
  display: flex; flex-direction: column; gap: 8px; outline: none;
  border: 3px solid transparent; border-radius: 12px; padding: 4px;
  transition: border-color .12s ease, background .12s ease;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent; cursor: pointer;
}
.poster:focus { border-color: var(--accent); background: var(--accent-dim); }
/* La proporción de un cartel de cine (2:3) con el truco del padding: el
   aspect-ratio moderno no lo entienden los WebView viejos de los TV-box. */
.poster__img {
  position: relative; width: 100%; padding-top: 150%;
  border-radius: 8px; overflow: hidden; background: var(--panel-2);
}
.poster__img img {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Sin carátula: una claqueta, para que el hueco no cante. */
.poster__img--vacia::after {
  content: '🎬'; position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  display: grid; place-items: center; font-size: 34px; opacity: .35;
}
/* La nota, abajo a la derecha, como en las apps de siempre. */
.poster__nota {
  position: absolute; right: 0; bottom: 0;
  background: var(--accent); color: #fff;
  font-size: 13px; font-weight: 700; line-height: 1;
  padding: 4px 6px; border-radius: 6px 0 0 0;
  font-variant-numeric: tabular-nums;
}
.poster__fav {
  position: absolute; left: 6px; top: 6px; color: var(--gold);
  font-size: 20px; line-height: 1; text-shadow: 0 2px 6px rgba(0,0,0,.8);
}
/* Lo visto de una pelicula o un capitulo, en la fila "Recientemente visto".
   Va pegada al borde de abajo de la caratula, como en cualquier app de video:
   de un vistazo se ve cuanto queda sin tener que leer nada. */
.poster__barra {
  position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: rgba(0, 0, 0, .55);
}
.poster__barra i { display: block; height: 100%; background: var(--accent); }

/* El renglon de debajo del titulo: "Quedan 41 min", "T1·E4 · seguir"... */
.poster__rec {
  font-size: 15px; line-height: 1.2; color: var(--accent);
  margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app--compacta .poster__rec { font-size: 13px; }

.poster__t {
  font-size: 19px; line-height: 1.25; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.poster:focus .poster__t { color: var(--text); font-weight: 600; }

/* Las filas de categoría van más apretadas que las de canal: son solo un
   nombre y un número, y así caben casi todas sin tener que desplazarse. */
.channel--cat { padding: 9px 14px; gap: 14px; margin-bottom: 4px; }
.channel--cat .channel__logo { flex-basis: 46px; width: 46px; height: 46px; border-radius: 10px; }
.channel--cat .channel__logo--empty { font-size: 20px; }
.channel--cat .channel__title { font-size: 20px; }
.channel--cat .channel__chev { font-size: 26px; padding: 0 4px; }
.app--compacta .channel--cat { padding: 6px 10px; gap: 10px; margin-bottom: 3px; }
.app--compacta .channel--cat .channel__logo { flex-basis: 34px; width: 34px; height: 34px; }
.app--compacta .channel--cat .channel__logo--empty { font-size: 16px; }
.app--compacta .channel--cat .channel__title { font-size: 18px; }

/* La categoría que estás viendo se queda marcada en la lista. */
.channel--cat-on { background: rgba(124, 77, 255, .12); }
.channel--cat-on .channel__title { color: var(--accent-2); }

/* En pantallas bajas (un móvil en horizontal) caben menos y más apretadas. */
.app--compacta .posters__head { padding: 8px 12px; }
.app--compacta .posters__cat { font-size: 17px; }
.app--compacta .posters__n { font-size: 14px; }
/* En un movil en horizontal hay poquisimo alto: con tres por fila solo se
   veia una fila y media. Con cinco entran dos filas enteras y el cartel
   sigue midiendo en la mano lo mismo que en la tele desde el sofa. */
.app--compacta .posters__grid { grid-template-columns: repeat(5, 1fr); gap: 9px; padding: 10px; }
.app--compacta .poster { gap: 4px; padding: 3px; border-width: 2px; }
.app--compacta .poster__t { font-size: 16px; -webkit-line-clamp: 2; }
.app--compacta .poster__nota { font-size: 11px; padding: 3px 4px; }

@media (max-height: 760px) {
  .posters__grid { gap: 12px; padding: 12px; }
  .poster__t { font-size: 17px; }
}




/* ---------- La ficha en pantallas bajas (móvil en horizontal) ----------
   Con el alto justo, lo que sobra es apretar los huecos: la carátula ya no
   manda porque va al lado, no encima. */
.app--compacta .detail { padding: var(--s3) 24px; }
.app--compacta .detail__card { gap: var(--s4); padding: var(--s4); }
.app--compacta .detail__cover { width: 26%; max-width: 200px; border-radius: 10px; }
.app--compacta .detail__title { font-size: 27px; margin-bottom: 4px; }
.app--compacta .detail__meta { font-size: 15px; margin-bottom: 3px; }
.app--compacta .detail__stars { font-size: 17px; margin-bottom: var(--s2); }
.app--compacta .detail__plot { font-size: 16px; line-height: 1.45; margin-bottom: var(--s3); }
.app--compacta .detail__play, .app--compacta .detail__resume { padding: 10px 26px; font-size: 17px; }
.app--compacta .detail__actions .btn { padding: 10px 22px; font-size: 17px; }

@media (max-height: 760px) {
  .detail__title { font-size: 30px; }
  .detail__plot { font-size: 17px; }
}


/* ---------- Episodios, en la misma parrilla ----------
   Un episodio no tiene cartel: lo que trae es un fotograma apaisado. */
.posters__grid--ancho { grid-template-columns: repeat(4, 1fr); }
.posters__grid--ancho .poster__img { padding-top: 56.25%; }
.posters__grid--ancho .poster__t { -webkit-line-clamp: 2; }
.app--compacta .posters__grid--ancho { grid-template-columns: repeat(3, 1fr); }