/* Equital OTT — plataforma de abonados. Requiere base.css.
   Estética de TV: Barlow para leer y Barlow Condensed para números de canal, títulos e indicadores
   (en la línea de las gráficas de transmisión), superficies con brillo y foco con resplandor para
   navegar con el teclado o el control remoto. Las fuentes son libres (SIL OFL) y están en vendor/fonts. */
@font-face { font-family: "Barlow"; src: url("/static/vendor/fonts/barlow-latin-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/static/vendor/fonts/barlow-latin-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/static/vendor/fonts/barlow-latin-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/static/vendor/fonts/barlow-latin-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/static/vendor/fonts/barlow-condensed-latin-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/static/vendor/fonts/barlow-condensed-latin-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/static/vendor/fonts/barlow-condensed-latin-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/static/vendor/fonts/barlow-condensed-latin-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }

html { scroll-behavior: smooth; }
:root {
  --topbar-h: 64px;
  --page-max: 1680px;
  --font: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Barlow Condensed", "Barlow", system-ui, sans-serif;
  --glow: rgba(56, 140, 255, 0.55);
  --live-glow: rgba(255, 59, 48, 0.6);
  /* Superficies: un leve brillo arriba y un borde de luz, en lugar de grises planos. */
  --card: linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025));
  --card-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.045));
  --card-edge: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(255, 255, 255, 0.045);
  /* Placas superpuestas al video (OSD): vidrio oscuro con líneas de barrido casi invisibles. */
  --glass: linear-gradient(180deg, rgba(26, 30, 40, 0.72), rgba(8, 10, 14, 0.84));
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  --scanlines: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px);
}
body { font-size: 15px; font-feature-settings: normal; }

/* ================= Ingreso ================= */
.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 32vw); min-height: 100vh; }
/* La imagen es de la demo (no se instala en los clientes): sin ella queda el fondo de marca (--brand y --live). */
.auth-visual {
  position: relative;
  overflow: hidden;
  background:
    url("/static/assets/demo/login-collage.jpg") center / cover no-repeat,
    radial-gradient(ellipse 70% 60% at 22% 28%, rgba(31, 122, 255, 0.42), transparent 70%),
    radial-gradient(ellipse 55% 45% at 78% 92%, rgba(255, 59, 48, 0.16), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 4px),
    #07080b;
}
.auth-visual::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background:
    linear-gradient(90deg, rgba(7, 8, 11, 0.45) 0%, rgba(7, 8, 11, 0.35) 45%, rgba(7, 8, 11, 0.94) 100%),
    linear-gradient(0deg, rgba(7, 8, 11, 0.96) 0%, rgba(7, 8, 11, 0.2) 60%);
}
.auth-claim { position: absolute; z-index: 1; left: clamp(28px, 5vw, 80px); right: 32px; bottom: clamp(32px, 8vh, 88px); max-width: 640px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; font-family: var(--display); font-size: 16px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 4px rgba(255, 59, 48, 0.25), 0 0 14px 2px var(--live-glow); animation: pulse 1.6s ease-in-out infinite; }
.auth-claim h2 { font-family: var(--display); font-size: clamp(46px, 5vw, 84px); font-weight: 800; line-height: 0.92; letter-spacing: 0.01em; text-transform: uppercase; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); }
.auth-claim p { max-width: 520px; margin-top: 20px; color: rgba(255, 255, 255, 0.74); font-size: 18px; line-height: 1.55; }
.auth-panel { display: flex; flex-direction: column; padding: 40px clamp(28px, 4vw, 64px); border-left: 1px solid var(--line); background: var(--bg); }
.auth-logo { align-self: flex-start; height: 32px; width: auto; }
.auth-box { margin: auto 0; padding: 48px 0; }
.auth-box h1 { font-family: var(--display); font-size: 38px; font-weight: 800; line-height: 1; letter-spacing: 0.02em; }
.auth-box .lead { margin: 10px 0 32px; color: var(--text-2); font-size: 16px; }
.auth-form { display: grid; gap: 18px; }
.auth-form .btn { margin-top: 4px; }
.auth-foot { color: var(--text-3); font-size: 12px; line-height: 1.6; }
.auth-alt { margin-top: 20px; color: var(--text-3); font-size: 13.5px; line-height: 1.6; text-align: center; }
#auth-reset .auth-alt { text-align: left; }
.auth-box .lead strong { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.auth-back { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 22px -8px; padding: 6px 10px 6px 6px; border-radius: 8px; color: var(--text-2); font-size: 13.5px; font-weight: 600; transition: background 0.15s, color 0.15s; }
.auth-back:hover { background: var(--surface-2); color: var(--text); }
.auth-back .i { width: 16px; height: 16px; }
.link-btn { color: var(--brand-hover); font-weight: 600; }
.link-btn:hover { text-decoration: underline; }
.link-btn:disabled { color: var(--text-3); text-decoration: none; cursor: default; }
#reset-code { height: 54px; font-size: 24px; font-weight: 700; letter-spacing: 0.22em; text-align: center; text-indent: 0.22em; font-variant-numeric: tabular-nums; }
#reset-code::placeholder { color: var(--surface-3); }

/* ================= Barra superior ================= */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 36px;
  height: var(--topbar-h);
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--line);
  background: rgba(7, 8, 11, 0.9);
  backdrop-filter: blur(18px) saturate(150%);
}
.brand img { height: 28px; width: auto; }
.nav-links { display: flex; gap: 4px; }
.nav-links a { display: flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 8px; color: var(--text-2); font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; transition: color 0.15s, background 0.15s; }
.nav-links a:hover { color: var(--text); }
.nav-links a.active { color: var(--text); }
.topbar-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.search { position: relative; width: 300px; }
.search .i { position: absolute; top: 50%; left: 13px; width: 17px; height: 17px; color: var(--text-3); transform: translateY(-50%); pointer-events: none; }
.search .input { height: 38px; padding-left: 40px; border-color: transparent; border-radius: 999px; background: var(--surface-2); }
.search .input:focus { background: var(--surface); }
/* Resultados de la búsqueda: canales, lo que se emite ahora y las próximas emisiones, por día. */
.search-wrap { position: relative; }
.search-open, .search-cancel { display: none; }
.search-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 5; width: min(580px, calc(100vw - 32px)); max-height: min(72vh, 640px); padding: 6px; overflow-y: auto; border: 1px solid var(--line-2); border-radius: var(--r-l); background: var(--surface-2); box-shadow: var(--shadow); overscroll-behavior: contain; }
.sr-group + .sr-group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
.sr-group h4 { display: flex; align-items: center; gap: 8px; padding: 10px 10px 6px; color: var(--text-3); font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.sr-item { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border-radius: 10px; text-align: left; transition: background 0.12s; }
.sr-item:hover, .sr-item.active { background: var(--surface-3); }
.sr-item.active { box-shadow: inset 0 0 0 1px var(--line-2); }
.sr-num { color: var(--text-2); font-family: var(--display); font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sr-time { color: var(--brand-hover); font-family: var(--display); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sr-main { min-width: 0; }
.sr-main strong, .sr-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-main strong { font-size: 15px; font-weight: 600; }
.sr-main small { margin-top: 1px; color: var(--text-3); font-size: 13px; }
.sr-main small:empty { display: none; }
.sr-side { max-width: 190px; overflow: hidden; color: var(--text-2); font-size: 12.5px; font-weight: 600; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.sr-side small { display: block; color: var(--text-3); font-weight: 500; }
.sr-item[aria-expanded="true"] { background: var(--surface-3); border-radius: 10px 10px 0 0; }
.sr-detail { display: grid; gap: 10px; padding: 4px 10px 14px 70px; border-radius: 0 0 10px 10px; background: var(--surface-3); }
.sr-detail p { color: var(--text-2); font-size: 13.5px; line-height: 1.55; }
.sr-detail .btn { justify-self: start; }
.sr-note { padding: 12px 10px; color: var(--text-3); font-size: 13.5px; }
.profile { position: relative; }
.profile-btn { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px 0 4px; border-radius: 999px; transition: background 0.15s; }
.profile-btn:hover, .profile-btn[aria-expanded="true"] { background: var(--surface-2); }
.profile-name { max-width: 160px; overflow: hidden; color: var(--text-2); font-size: 13.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.menu { position: absolute; top: calc(100% + 8px); right: 0; width: 250px; padding: 6px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface-2); box-shadow: var(--shadow); }
.menu-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; padding: 10px 10px 14px; border-bottom: 1px solid var(--line); }
.menu-head strong { display: block; font-size: 14px; }
.menu-head small { color: var(--text-3); font-size: 12px; }
.menu a, .menu button { display: flex; align-items: center; gap: 12px; width: 100%; height: 40px; padding: 0 10px; border-radius: 8px; color: var(--text-2); font-size: 14px; font-weight: 500; text-align: left; }
.menu a:hover, .menu button:hover { background: var(--surface-3); color: var(--text); }
.menu .i { width: 18px; height: 18px; }

/* ================= Pantalla principal: lista de canales + reproductor + ficha ================= */
.stage { position: relative; overflow: clip; padding: 20px var(--gutter) 30px; }
.hero-glow {
  position: absolute;
  top: -120px; right: -60px; bottom: 0; left: -60px;
  background: center / cover no-repeat;
  opacity: 0.3;
  filter: blur(80px) saturate(1.6);
  transform: scale(1.1);
  transition: opacity 0.8s;
  pointer-events: none;
}
.stage::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(7, 8, 11, 0.2) 0%, var(--bg) 100%); pointer-events: none; }
/* El reproductor es lo más grande posible sin que la ficha quede fuera de la pantalla;
   la lista de canales ocupa el resto a la izquierda, como en un decodificador. */
.stage-inner {
  --list-min: 330px;
  --player-w: min(calc(100% - var(--list-min) - 20px), calc((100vh - var(--topbar-h) - 250px) * 16 / 9));
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(var(--list-min), 460px) var(--player-w);
  justify-content: center;
  gap: 20px;
  max-width: 2200px;
  margin: 0 auto;
}
.stage-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* ---- lista de canales ---- */
.chpanel { position: relative; min-width: 0; }
.chpanel-inner {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-l);
  background: rgba(15, 17, 22, 0.78);
  box-shadow: inset 0 0 0 1px var(--line);
  backdrop-filter: blur(24px) saturate(140%);
}
.chpanel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 14px; border-bottom: 1px solid var(--line); }
.chpanel-head h2 { display: flex; align-items: baseline; gap: 8px; font-family: var(--display); font-size: 21px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.chpanel-head small { color: var(--text-3); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chpanel .chpanel-close { display: none; width: 36px; height: 36px; }
/* En escritorio la lista muestra todos los canales juntos: las secciones están en la guía de abajo.
   En pantallas chicas no hay guía y la lista conserva esta fila de categorías. */
.chips-wrap { position: relative; border-bottom: 1px solid var(--line); }
.chpanel .chips-wrap { display: none; }
.chips-wrap::after { content: ""; position: absolute; top: 0; right: 0; bottom: 12px; width: 28px; background: linear-gradient(90deg, transparent, rgba(15, 17, 22, 0.95)); pointer-events: none; }
.chips { position: relative; display: flex; gap: 6px; padding: 0 18px 12px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; height: 32px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: var(--text-2); font-family: var(--display); font-size: 15px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
.chip:hover { background: rgba(255, 255, 255, 0.11); color: var(--text); }
.chip.active { background: var(--text); color: #07080b; box-shadow: 0 0 18px rgba(255, 255, 255, 0.22); }
.chip .i { width: 14px; height: 14px; margin: -2px 5px 0 -2px; vertical-align: middle; }
.chlist { position: relative; flex: 1; min-height: 0; padding: 6px 8px 10px; overflow-y: auto; overscroll-behavior: contain; }
.ch-row { position: relative; }
.ch-row + .ch-row { margin-top: 2px; }
.ch-main {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 14px;  /* la tercera es del ecualizador: todas las filas miden igual */
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  padding: 6px 84px 6px 4px;
  border-radius: 10px;
  text-align: left;
  transition: background 0.15s, box-shadow 0.2s ease-out, transform 0.2s ease-out;
}
.ch-main:hover { background: rgba(255, 255, 255, 0.05); }
.ch-main:focus-visible { background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 22px 2px var(--glow); transform: scale(1.02); }
/* El número de canal es protagonista, como en un decodificador; atenuado si no es el que se ve. */
.ch-num { color: rgba(255, 255, 255, 0.34); font-family: var(--display); font-size: 23px; font-weight: 700; line-height: 1; text-align: right; font-variant-numeric: tabular-nums; transition: color 0.2s, text-shadow 0.2s; }
.ch-main:hover .ch-num, .ch-main:focus-visible .ch-num { color: rgba(255, 255, 255, 0.75); }
.ch-text { display: grid; gap: 3px; min-width: 0; }
.ch-name { overflow: hidden; font-size: 16px; font-weight: 600; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
/* Lo que se emite ahora: título en una línea y una barrita de avance, sin competir con el nombre del canal. */
.ch-now { display: grid; gap: 4px; min-width: 0; color: var(--text-2); font-size: 13.5px; line-height: 1.25; }
.ch-now-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-now-bar { height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); }
.ch-now-bar i { display: block; height: 100%; border-radius: inherit; background: var(--live); opacity: 0.85; transition: width 0.6s var(--ease); }
.ch-now.off { color: var(--text-3); font-family: var(--display); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.ch-main:hover .ch-now, .ch-main:focus-visible .ch-now, .ch-row.active .ch-now { color: var(--text); }
/* Sin señal: un punto hueco (el nombre ya se ve apagado), para no comerle lugar al nombre. */
.ch-off { width: 9px; height: 9px; border: 2px solid var(--text-3); border-radius: 50%; }
.ch-row.active .ch-main { background: linear-gradient(90deg, rgba(31, 122, 255, 0.3), rgba(31, 122, 255, 0.08) 75%, rgba(31, 122, 255, 0.04)); box-shadow: inset 3px 0 0 var(--brand), 0 0 24px -8px var(--glow); }
.ch-row.active .ch-main:focus-visible { box-shadow: inset 3px 0 0 var(--brand), inset 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 22px 2px var(--glow); }
.ch-row.active .ch-num { color: #fff; text-shadow: 0 0 14px var(--glow); }
.ch-row.active .eq { display: inline-flex; }
.ch-row.off .eq { display: none; }
.ch-row.off .ch-num, .ch-row.off .ch-name { color: var(--text-3); }
/* Botones de cada canal: favorito (al pasar el mouse o si ya lo es) y programación (siempre) */
.ch-fav, .ch-info { position: absolute; top: 50%; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--text-3); transform: translateY(-50%); transition: opacity 0.15s, color 0.15s, background 0.15s; }
.ch-fav { right: 44px; opacity: 0; }
.ch-info { right: 8px; }
.ch-fav .i, .ch-info .i { width: 18px; height: 18px; }
.ch-row:hover .ch-fav { opacity: 1; }
.ch-row:hover .ch-info, .ch-row.active .ch-info { color: var(--text-2); }
.ch-fav:hover, .ch-info:hover { background: rgba(255, 255, 255, 0.1); color: var(--text); }
.ch-fav.on { opacity: 1; color: #ffcc33; }
@media (hover: none) { .ch-fav { opacity: 1; } }
.ch-empty { display: grid; justify-items: center; gap: 8px; padding: 40px 20px; color: var(--text-2); font-size: 14px; line-height: 1.5; text-align: center; }
.ch-empty .i { width: 30px; height: 30px; color: #ffcc33; }
.ch-empty strong { color: var(--text); font-size: 15.5px; }
.chpanel-hint { padding: 10px 18px 12px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 12px; line-height: 1.7; }
.chpanel-hint .hint-overlay { display: none; }
@media (hover: none) { .chpanel-hint { display: none; } }
kbd { display: inline-block; min-width: 20px; margin: 0 1px; padding: 0 5px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.1); color: var(--text-2); font-family: inherit; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }

.player-slot { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-l); background: #000; }
/* Navegadores sin aspect-ratio (Smart TV anteriores a 2021): el 16:9 con el relleno de arriba. */
@supports not (aspect-ratio: 16 / 9) {
  .player-slot { height: 0; padding-top: 56.25%; }
  .stage:fullscreen .player-slot { height: auto; padding-top: 0; }
}
.player {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
  border-radius: var(--r-l);
  background: #000;
  box-shadow: 0 0 0 1px var(--line), 0 30px 80px -30px rgba(0, 0, 0, 0.9);
  isolation: isolate;
  user-select: none;
  -webkit-user-select: none;
}
.player video { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; background: #000; object-fit: contain; }
.player:fullscreen { border-radius: 0; box-shadow: none; }
.player[data-state="playing"]:not(.show-ui) { cursor: none; }

.p-top, .p-bar { position: absolute; left: 0; right: 0; z-index: 2; opacity: 0; transition: opacity 0.3s var(--ease); }
.player.show-ui .p-top, .player.show-ui .p-bar,
.player:not([data-state="playing"]) .p-top, .player:not([data-state="playing"]) .p-bar { opacity: 1; }
/* La barra de controles deja pasar los toques por sus espacios vacíos (van al video) y, con los controles ocultos,
   no recibe ninguno: si no, en el celular tapaba más de la mitad del video, invisible, y tocarlo no hacía nada. */
.p-bar { pointer-events: none; }
.p-bar > * { pointer-events: auto; }
.p-bar > .p-spacer { pointer-events: none; }
.player[data-state="playing"]:not(.show-ui) .p-bar > * { pointer-events: none; }
.p-top { top: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px 64px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.35) 55%, transparent); pointer-events: none; }
/* Indicador «EN VIVO» del reproductor: luz roja que late, como el piloto de una cámara al aire. */
.player .badge-live { height: 26px; padding: 0 10px; border-radius: 6px; font-family: var(--display); font-size: 14px; font-weight: 700; letter-spacing: 0.14em; box-shadow: 0 0 18px var(--live-glow); }
.p-chan { display: flex; align-items: center; gap: 12px; min-width: 0; }
.p-chan .logo-tile { width: 60px; background: rgba(12, 14, 18, 0.65); backdrop-filter: blur(8px); }
.p-num { color: rgba(255, 255, 255, 0.7); font-family: var(--display); font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.p-name { overflow: hidden; font-family: var(--display); font-size: 22px; font-weight: 700; line-height: 1.1; letter-spacing: 0.02em; text-overflow: ellipsis; white-space: nowrap; }
.p-bar { bottom: 0; display: flex; align-items: center; gap: 2px; padding: 72px 14px 12px; background: linear-gradient(0deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.5) 45%, transparent 100%); }
.p-btn { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; color: #fff; transition: background 0.15s; }
.p-btn:hover { background: rgba(255, 255, 255, 0.14); }
.p-btn .i { width: 22px; height: 22px; }
.i-fill { fill: currentColor; stroke: none; }
.p-volume { display: flex; align-items: center; }
.p-volume input {
  width: 0;
  height: 4px;
  margin: 0;
  opacity: 0;
  border-radius: 4px;
  background: linear-gradient(90deg, #fff var(--val, 100%), rgba(255, 255, 255, 0.3) var(--val, 100%));
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: width 0.25s var(--ease), opacity 0.2s, margin 0.25s var(--ease);
}
.p-volume:hover input, .p-volume:focus-within input { width: 88px; margin: 0 10px 0 4px; opacity: 1; }
.p-volume input::-webkit-slider-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; -webkit-appearance: none; }
.p-volume input::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; }
.p-golive { display: inline-flex; align-items: center; gap: 8px; height: 30px; margin-left: 8px; padding: 0 10px; border-radius: 6px; color: #fff; font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: 0.12em; white-space: nowrap; }
.p-golive::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 10px 1px var(--live-glow); animation: pulse 1.6s ease-in-out infinite; }
.player.behind-live .p-golive::before { animation: none; box-shadow: none; }
.player.behind-live .p-golive { background: rgba(255, 255, 255, 0.16); }
.player.behind-live .p-golive::before { background: rgba(255, 255, 255, 0.5); }
.player.behind-live .p-golive:hover { background: rgba(255, 255, 255, 0.26); }
/* Sin señal o conectando: el estado en gris, sin el punto rojo que late. */
.p-golive.off { color: rgba(255, 255, 255, 0.72); cursor: default; }
.p-golive.off::before { animation: none; box-shadow: none; background: rgba(255, 255, 255, 0.4); }
/* Sin video para reproducir, «Reproducir» y el volumen no hacen nada: no se muestran. */
.player:is([data-state="offline"], [data-state="idle"], [data-state="error"], [data-state="limit"], [data-state="locked"]) :is(#p-play, .p-volume) { display: none; }
.p-spacer { flex: 1; }

/* Línea de tiempo (en vivo y en diferido, como en YouTube) */
.p-seek-wrap { display: none; flex: 1; align-items: center; gap: 12px; min-width: 0; margin: 0 12px; }
.player.has-timeline .p-seek-wrap { display: flex; }
.player.has-timeline .p-spacer { display: none; }
.p-seek-track { position: relative; display: flex; flex: 1; align-items: center; min-width: 60px; }
#p-seek {
  width: 100%;
  height: 4px;
  margin: 0;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--brand) var(--val, 100%), rgba(255, 255, 255, 0.3) var(--val, 100%));
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: height 0.15s;
}
.p-seek-track:hover #p-seek { height: 6px; }
/* Con tramos grabados: la barra se dibuja en una capa aparte (visto / por ver / sin grabación).
   Va de centro a centro del círculo (7 px = su radio) para que cada tramo coincida con su hora. */
.p-seek-ranges { position: absolute; left: 7px; right: 7px; top: 50%; height: 4px; overflow: hidden; border-radius: 4px; transform: translateY(-50%); pointer-events: none; transition: height 0.15s; }
.p-seek-track:hover .p-seek-ranges { height: 6px; }
.p-seek-ranges i { position: absolute; top: 0; bottom: 0; }
.p-seek-ranges i.rec { background: rgba(255, 255, 255, 0.32); }
.p-seek-ranges i.played { background: var(--brand); }
.player:not(.behind-live) .p-seek-ranges i.played { background: var(--live); }
.p-seek-ranges i.gap { background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.16) 0 3px, transparent 3px 6px); }
.p-seek-track.ranged #p-seek, .player:not(.behind-live) .p-seek-track.ranged #p-seek { position: relative; background: transparent; }
.player:not(.behind-live) #p-seek { background: linear-gradient(90deg, var(--live) var(--val, 100%), rgba(255, 255, 255, 0.3) var(--val, 100%)); }
#p-seek::-webkit-slider-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; -webkit-appearance: none; }
#p-seek::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; }
.p-seek-tip {
  position: absolute;
  bottom: calc(100% + 14px);
  z-index: 4;
  padding: 6px 10px;
  border-radius: 7px;
  background: rgba(10, 12, 16, 0.94);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.p-time { color: rgba(255, 255, 255, 0.85); font-family: var(--display); font-size: 15px; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.p-time:empty { display: none; }

/* Calidad de imagen */
.p-quality-wrap { position: relative; }
.p-quality { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 8px; color: #fff; font-size: 12.5px; font-weight: 700; white-space: nowrap; transition: background 0.15s; }
.p-quality:hover { background: rgba(255, 255, 255, 0.14); }
.p-quality .i { width: 18px; height: 18px; }
.p-menu { position: absolute; right: 0; bottom: calc(100% + 10px); z-index: 5; min-width: 270px; padding: 6px; border: 1px solid var(--line-2); border-radius: 12px; background: rgba(18, 20, 26, 0.97); box-shadow: var(--shadow); backdrop-filter: blur(14px); }
.pm-title { padding: 8px 10px 6px; color: var(--text-3); font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.p-menu button { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 10px; border-radius: 8px; color: #fff; font-size: 14px; font-weight: 600; text-align: left; }
.p-menu button:hover { background: rgba(255, 255, 255, 0.08); }
.p-menu button small { color: var(--text-3); font-size: 12px; font-weight: 500; }
.p-menu button[aria-checked="true"] span::before { content: "✓"; margin-right: 8px; color: var(--brand-hover); }
.p-menu button[aria-checked="false"] span { padding-left: 20px; }
.p-menu .pm-title:not(:first-child) { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.p-tracks { position: relative; }
.p-tracks.on .i { color: var(--brand-hover); }
.p-tracks.on::after { content: ""; position: absolute; left: 10px; bottom: 4px; width: 18px; height: 2px; border-radius: 2px; background: var(--brand-hover); }
/* Subtítulos en imagen (DVB): los dibuja el reproductor sobre el video. */
.p-imgsubs { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; overflow: hidden; pointer-events: none; transition: transform 0.2s ease; }
.p-imgsubs img { position: absolute; image-rendering: auto; }
.player.show-ui .p-imgsubs { transform: translateY(-48px); }
/* Subtítulos sobre el video: legibles y por encima de los controles cuando están a la vista. */
#video::cue { background: rgba(0, 0, 0, 0.72); color: #fff; font-family: inherit; line-height: 1.3; }
#video::-webkit-media-text-track-container { transition: transform 0.2s ease; }
.player.show-ui #video::-webkit-media-text-track-container { transform: translateY(-64px); }

.p-center { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; text-align: center; pointer-events: none; }
.player[data-state="offline"] .p-center, .player[data-state="error"] .p-center, .player[data-state="idle"] .p-center,
.player[data-state="locked"] .p-center { background: radial-gradient(ellipse at center, #141821 0%, #07080b 75%); }
.p-spinner { display: none; width: 52px; height: 52px; border: 3px solid rgba(255, 255, 255, 0.16); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; }
.player[data-state="loading"] .p-spinner, .player[data-state="buffering"] .p-spinner { display: block; }
.p-msg { display: none; max-width: 460px; }
.player[data-state="loading"] .p-msg, .player[data-state="offline"] .p-msg,
.player[data-state="error"] .p-msg, .player[data-state="idle"] .p-msg, .player[data-state="locked"] .p-msg { display: block; }
.p-msg .logo-tile { margin: 0 auto 20px; }
.player:not([data-state="offline"]):not([data-state="locked"]) .p-msg .logo-tile { display: none; }
.p-msg h3 { font-family: var(--display); font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: 0.03em; }
.p-msg p { margin-top: 6px; color: rgba(255, 255, 255, 0.66); font-size: 14px; }
.p-bigplay { display: none; place-items: center; width: 80px; height: 80px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); color: #fff; backdrop-filter: blur(10px); pointer-events: auto; transition: transform 0.2s var(--ease), background 0.2s; }
.p-bigplay:hover { transform: scale(1.06); background: rgba(255, 255, 255, 0.26); }
.p-bigplay .i { width: 34px; height: 34px; margin-left: 4px; fill: currentColor; stroke: none; }
.player[data-state="paused"] .p-bigplay { display: grid; }

/* Control parental: PIN de 4 números para ver un canal bloqueado */
.p-pin { display: none; justify-items: center; gap: 14px; pointer-events: auto; }
.player[data-state="locked"] .p-pin { display: grid; }
.player[data-state="locked"] .p-msg .logo-tile { width: 96px; margin-bottom: 12px; }
.player[data-state="locked"] .p-center { gap: 12px; padding-bottom: 72px; }
.pin-dots { display: flex; gap: 14px; }
.pin-dots i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45); transition: background 0.15s, box-shadow 0.15s; }
.pin-dots i.on { background: #fff; box-shadow: 0 0 12px rgba(255, 255, 255, 0.5); }
.pin-dots.shake { animation: pin-shake 0.4s; }
@keyframes pin-shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.pin-error { min-height: 18px; color: #ff8a80; font-size: 13.5px; font-weight: 600; }
.pin-pad { display: grid; grid-template-columns: repeat(3, 56px); gap: 8px; }
.pin-pad button { display: grid; place-items: center; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, 0.09); color: #fff; font-family: var(--display); font-size: 22px; font-weight: 600; transition: background 0.15s, transform 0.1s; }
.pin-pad button:hover, .pin-pad button:focus-visible { background: rgba(255, 255, 255, 0.18); }
.pin-pad button:active { transform: scale(0.95); }
.pin-pad .i { width: 20px; height: 20px; }
@media (max-width: 760px), (max-height: 560px) {
  .player[data-state="locked"] .p-msg .logo-tile, .player[data-state="locked"] .p-msg p { display: none; }
  /* Reproductor chico: el mensaje entra entre la barra de arriba y los controles. El logo grande sobra,
     porque arriba ya dice qué canal es. */
  .player:not([data-state="locked"]) .p-center { padding: 52px 16px 58px; }  /* el PIN tiene su propio lugar */
  .player[data-state="offline"] .p-msg .logo-tile { display: none; }
  .player[data-state="offline"] .p-banner { display: none; }  /* el cartel de zapping tapaba el aviso y decía lo mismo */
  .p-msg h3 { font-size: 20px; }
  .p-msg p { font-size: 12.5px; line-height: 1.4; }
  .pin-pad { grid-template-columns: repeat(3, 46px); gap: 6px; }
  .pin-pad button { height: 34px; font-size: 18px; }
  .p-pin { gap: 8px; }
}

/* Candado en la lista y en la guía */
.ch-lock { width: 14px; height: 14px; margin-left: 7px; color: var(--text-3); vertical-align: -1px; }
.player[data-state="locked"] .p-banner { display: none; }
.g-locked { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-items: center; align-content: center; gap: 6px; color: var(--text-3); font-size: 12px; font-weight: 600; }
.g-locked .i { width: 26px; height: 26px; }

/* Límite de pantallas a la vez: la cuenta ya está mirando en todas las que permite */
.p-limit { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; display: none; place-items: center; padding: 64px 24px 80px; overflow: hidden; background: radial-gradient(ellipse at center, #141821 0%, #07080b 75%); }
.player[data-state="limit"] .p-limit { display: grid; }
.p-limit-box { display: grid; justify-items: center; gap: 8px; max-width: 480px; text-align: center; }
.p-limit-icon { width: 44px; height: 44px; margin-bottom: 6px; color: var(--warn); stroke-width: 1.6; }
.p-limit h3 { font-family: var(--display); font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: 0.03em; }
.p-limit p { color: rgba(255, 255, 255, 0.66); font-size: 14px; }
.p-limit-list { display: grid; gap: 6px; width: min(400px, 100%); margin: 8px 0 2px; padding: 0; list-style: none; }
.p-limit-list li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); font-size: 13.5px; text-align: left; }
.p-limit-list .i { width: 18px; height: 18px; color: var(--text-2); }
.p-limit-list span { flex: 1; min-width: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.p-limit-list em { color: var(--ok); font-size: 12.5px; font-style: normal; font-weight: 600; white-space: nowrap; }
.p-limit-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.player-slot.floating .p-limit { padding: 12px; }
.player-slot.floating .p-limit-box > :not(h3) { display: none; }
.player-slot.floating .p-limit h3 { font-size: 14px; }

.p-osd {
  position: absolute;
  top: 74px;
  right: 20px;
  z-index: 3;
  min-width: 96px;
  padding: 10px 20px 12px;
  border-radius: 14px;
  background: var(--scanlines), var(--glass);
  box-shadow: var(--glass-edge), 0 20px 50px -20px rgba(0, 0, 0, 0.9);
  text-align: right;
  backdrop-filter: blur(20px) saturate(160%);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.2s, transform 0.25s var(--ease);
  pointer-events: none;
}
.p-osd.show { opacity: 1; transform: none; }
.osd-num { font-family: var(--display); font-size: 64px; font-weight: 800; line-height: 0.95; font-variant-numeric: tabular-nums; text-shadow: 0 0 24px rgba(120, 180, 255, 0.45); }
.osd-name { margin-top: 2px; color: rgba(255, 255, 255, 0.8); font-family: var(--display); font-size: 15px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
/* Cartel de zapping, como el de un decodificador: número, canal, ahora y después */
.p-banner {
  position: absolute;
  left: 20px;
  bottom: 84px;
  z-index: 3;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  width: min(720px, calc(100% - 40px));
  overflow: hidden;
  padding: 14px 22px 14px 20px;
  border-radius: 16px;
  background: var(--scanlines), radial-gradient(120% 140% at 0% 0%, rgba(56, 140, 255, 0.16), transparent 55%), var(--glass);
  box-shadow: var(--glass-edge), 0 24px 60px -20px rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(22px) saturate(160%);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s, transform 0.35s var(--ease), bottom 0.3s var(--ease);
  pointer-events: none;
}
.p-banner.show { opacity: 1; transform: none; }
.player[data-state="playing"]:not(.show-ui) .p-banner { bottom: 22px; }
.player.autoplay-muted .p-banner { bottom: 132px; }
/* Franja de luz a la izquierda del cartel, como en las placas de los canales de noticias */
.p-banner::before { content: ""; position: absolute; top: 14px; bottom: 14px; left: 0; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, #7fdcff, var(--brand)); box-shadow: 0 0 14px 1px var(--glow); }
.bn-num {
  min-width: 1.3ch;
  font-family: var(--display);
  font-size: 76px;
  font-weight: 800;
  line-height: 0.85;
  text-align: center;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 30%, #a9c8ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(80, 150, 255, 0.35));
}
.p-banner .logo-tile { width: 84px; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.bn-body { display: grid; gap: 6px; min-width: 0; }
.bn-chan { display: flex; align-items: baseline; gap: 10px; min-width: 0; font-family: var(--display); font-size: 17px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.bn-chan span { color: var(--text-3); font-size: 14px; font-weight: 600; letter-spacing: 0.08em; }
.bn-row { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 15px; }
.bn-row strong { overflow: hidden; font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: 0.01em; text-overflow: ellipsis; white-space: nowrap; }
.bn-row > span:not(.bn-tag) { overflow: hidden; color: var(--text-2); text-overflow: ellipsis; white-space: nowrap; }
.bn-row time { flex: none; margin-left: auto; color: var(--text-2); font-family: var(--display); font-size: 15px; font-weight: 600; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.bn-tag { flex: none; padding: 2px 7px; border-radius: 4px; background: var(--live); color: #fff; font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; box-shadow: 0 0 12px var(--live-glow); }
.bn-row.next .bn-tag { background: rgba(255, 255, 255, 0.14); box-shadow: none; color: var(--text-2); }
.p-banner .bar { height: 3px; overflow: visible; }
.p-unmute { position: absolute; left: 20px; bottom: 78px; z-index: 3; display: none; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px; background: #fff; color: #000; font-size: 14px; font-weight: 700; box-shadow: var(--shadow); }
.p-unmute .i { width: 18px; height: 18px; }
.player.autoplay-muted .p-unmute { display: inline-flex; }
.p-mini { position: absolute; top: 8px; right: 8px; z-index: 4; display: none; gap: 4px; }
.p-mini .p-btn { width: 36px; height: 36px; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(8px); }
.p-mini .p-btn .i { width: 18px; height: 18px; }

/* Al bajar por la guía: ventana flotante en escritorio, fijo arriba en celular */
@media (min-width: 1024px) {
  .player-slot.floating::before {
    content: "Reproduciendo en la ventana flotante";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    display: grid;
    place-items: center;
    color: var(--text-3);
    font-size: 14px;
  }
  .player-slot.floating .player {
    position: fixed;
    top: auto; right: 24px; bottom: 24px; left: auto;
    z-index: 60;
    width: 400px;
    height: 225px;
    border-radius: 12px;
    box-shadow: 0 0 0 1px var(--line-2), 0 24px 60px rgba(0, 0, 0, 0.75);
    cursor: pointer;
    animation: float-in 0.3s var(--ease);
  }
  .player-slot.floating .p-top, .player-slot.floating .p-bar, .player-slot.floating .p-banner,
  .player-slot.floating .p-osd, .player-slot.floating .p-unmute, .player-slot.floating .p-bigplay { display: none; }
  .player-slot.floating .p-mini { display: flex; }
  /* Achicada: una barra con el canal (sigue sonando). */
  .player-slot.floating.minimized .player { width: 320px; height: 54px; }
  .player-slot.floating.minimized #video, .player-slot.floating.minimized .p-center,
  .player-slot.floating.minimized .p-imgsubs, .player-slot.floating.minimized .p-limit { visibility: hidden; }
  .player-slot.floating.minimized .p-mini { top: 9px; right: 9px; bottom: 9px; left: 16px; align-items: center; }
  .player-slot.floating.minimized .p-mini-label { display: flex; }
}
.p-mini-label { display: none; flex: 1; align-items: center; gap: 9px; min-width: 0; color: #fff; font-family: var(--display); font-size: 16px; font-weight: 700; letter-spacing: 0.03em; }
.p-mini-label #mini-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes float-in { from { opacity: 0; transform: translateY(16px); } }

/* ---- ficha del programa (debajo del video) ---- */
.info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); gap: 28px; min-width: 0; padding: 0 2px; }
.info-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.info-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.info-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.fav-btn { display: inline-flex; flex: none; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-size: 13px; font-weight: 600; transition: background 0.15s, color 0.15s; }
.fav-btn:hover { background: var(--surface-3); color: var(--text); }
.fav-btn[aria-pressed="true"] { background: rgba(255, 204, 0, 0.12); color: #ffcc33; }
.fav-btn .i { width: 18px; height: 18px; }
.info-label { display: flex; align-items: center; gap: 8px; color: var(--live); font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; text-shadow: 0 0 16px rgba(255, 59, 48, 0.35); }
.info-label.off { color: var(--text-3); }
.info-label.replay { color: var(--brand-hover); }
.info-label .i { width: 16px; height: 16px; }
.info-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.info-actions:empty { display: none; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 10px 1px var(--live-glow); animation: pulse 1.6s ease-in-out infinite; }
.info-title { font-family: var(--display); font-size: clamp(30px, 2.5vw, 42px); font-weight: 800; line-height: 1; letter-spacing: 0.01em; }
.info-sub { color: var(--text-2); font-size: 16px; font-weight: 500; }
.info-sub:empty { display: none; }
.info-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.meta-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 5px; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); color: var(--text-2); font-family: var(--display); font-size: 14px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.meta-chip.rating { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
.info-progress { display: flex; align-items: center; gap: 14px; color: var(--text-2); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
/* Progreso de lo que se emite: la «línea del ahora», roja, con un punto de luz que late en la punta. */
.bar { position: relative; flex: 1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.13); }
.bar i { position: relative; display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(255, 59, 48, 0.45), var(--live)); box-shadow: 0 0 10px rgba(255, 59, 48, 0.45); transition: width 0.6s var(--ease); }
.bar i::after { content: ""; position: absolute; top: 50%; right: -4px; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.4), 0 0 14px 3px var(--live-glow); transform: translateY(-50%); animation: pulse 1.6s ease-in-out infinite; }
.info-desc { display: -webkit-box; overflow: hidden; color: var(--text-2); font-size: 14px; line-height: 1.55; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.info-desc.open { display: block; overflow: visible; }
/* «Ver más»: solo aparece si la descripción no entra en las dos líneas. */
.info-more { align-self: flex-start; margin-top: -6px; font-size: 14px; }
.info-list { display: grid; gap: 2px; }
.info-list:empty { display: none; }
.info-list h4 { margin: 0 0 6px; color: var(--text-3); font-family: var(--display); font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.next-item { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 7px 8px; margin: 0 -8px; border-radius: 8px; font-size: 15px; text-align: left; }
.next-item:hover { background: var(--surface-2); }
.next-item time { color: var(--brand-hover); font-family: var(--display); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.next-item strong { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.next-item.replay { grid-template-columns: 52px minmax(0, 1fr) auto; }
.next-item.replay em { display: inline-flex; align-items: center; gap: 4px; color: var(--brand-hover); font-size: 12.5px; font-style: normal; font-weight: 600; }
.next-item.replay em .i { width: 14px; height: 14px; fill: currentColor; stroke: none; }

/* ================= Categorías ================= */
.cat-bar { position: sticky; top: var(--topbar-h); z-index: 20; border-bottom: 1px solid var(--line); background: rgba(7, 8, 11, 0.92); backdrop-filter: blur(18px) saturate(150%); }
.cat-inner { display: flex; align-items: center; gap: 6px; height: 60px; max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); }
.cat-tabs { display: flex; flex: 1; gap: 4px; min-width: 0; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; }
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tab { flex: none; height: 38px; padding: 0 16px; border-radius: 999px; color: var(--text-2); font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.cat-tab:hover { color: var(--text); background: var(--surface-2); }
.cat-tab.active { background: var(--text); color: #07080b; box-shadow: 0 0 22px rgba(255, 255, 255, 0.22); }
.cat-tab .i { width: 16px; height: 16px; margin: -3px 6px 0 -2px; vertical-align: middle; }
.cat-arrow { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--text-2); }
.cat-arrow:hover { background: var(--surface-2); color: var(--text); }
.cat-arrow[disabled] { opacity: 0.25; cursor: default; background: none; }
.cat-goto { flex: none; margin-left: 10px; }
.view-toggle { display: inline-flex; flex: none; gap: 2px; margin-left: 10px; padding: 3px; border-radius: 999px; background: var(--surface-2); }
.view-toggle button { height: 30px; padding: 0 14px; border-radius: 999px; color: var(--text-2); font-family: var(--display); font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.view-toggle button:hover { color: var(--text); }
.view-toggle button[aria-pressed="true"] { background: var(--text); color: #07080b; }
.cat-title { flex: none; margin-right: 14px; font-family: var(--display); font-size: 25px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }

/* ================= Guía (EPG) ================= */
.guide { max-width: var(--page-max); margin: 0 auto; padding: 4px var(--gutter) 72px; scroll-margin-top: calc(var(--topbar-h) + 60px); }
/* La hora de la guía es la marca del «ahora»: punto rojo que late, como el piloto de una cámara al aire. */
.guide-time { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 20px 0 2px; color: var(--text-2); font-family: var(--display); font-size: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.guide-time::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 10px 2px var(--live-glow); animation: pulse 1.6s ease-in-out infinite; }
.g-group { margin-top: 22px; }
.g-group h2 { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; font-family: var(--display); font-size: 28px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.g-group h2::before { content: ""; align-self: center; width: 4px; height: 22px; border-radius: 2px; background: linear-gradient(180deg, #7fdcff, var(--brand)); box-shadow: 0 0 12px var(--glow); }
.g-group h2 small { color: var(--text-3); font-family: var(--font); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.g-row { position: relative; display: flex; gap: 8px; height: 104px; margin-bottom: 10px; scroll-margin-top: 160px; }
.g-fav { position: absolute; top: 5px; left: 102px; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--text-3); opacity: 0; transition: opacity 0.15s, color 0.15s, background 0.15s; }
.g-fav .i { width: 17px; height: 17px; }
.g-row:hover .g-fav, .g-fav:focus-visible { opacity: 1; }
.g-fav:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); }
.g-fav.on { opacity: 1; color: #ffcc33; }
@media (hover: none) { .g-fav { opacity: 1; } }
.g-empty { display: grid; justify-items: center; gap: 10px; padding: 56px 16px; color: var(--text-2); text-align: center; }
.g-empty .i { width: 34px; height: 34px; color: #ffcc33; }
.g-empty strong { color: var(--text); font-size: 17px; }
.g-chan {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 136px;
  border-radius: var(--r-s);
  background: var(--card);
  box-shadow: var(--card-edge);
}
.g-chan:hover { background: var(--card-hover); }
.g-chan .logo-tile { width: 92px; margin-top: 10px; background: transparent; box-shadow: none; }
/* Número de canal grande y atenuado, como en la guía de un decodificador. */
.g-num { position: absolute; top: 4px; left: 10px; color: rgba(255, 255, 255, 0.3); font-family: var(--display); font-size: 28px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.g-row.active .g-num { color: #fff; text-shadow: 0 0 14px var(--glow); }
.g-live { position: absolute; bottom: 12px; left: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 8px 1px var(--live-glow); }
.g-chan .eq { position: absolute; right: 10px; bottom: 10px; }
.eq { display: none; align-items: flex-end; gap: 2px; height: 12px; }
.eq i { width: 3px; border-radius: 1px; background: var(--brand-hover); animation: eq 0.9s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -0.3s; }
.eq i:nth-child(3) { animation-delay: -0.6s; }
@keyframes eq { 0%, 100% { height: 3px; } 50% { height: 12px; } }
.g-row.active .eq { display: inline-flex; }
/* Margen interno para que el resplandor y el agrandado del foco no se recorten. */
.g-progs { display: flex; flex: 1; gap: 8px; min-width: 0; margin: -12px -8px; padding: 12px 8px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 72px), transparent); }
.g-prog {
  display: flex;
  flex: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 290px;
  min-width: 0;
  padding: 0 20px;
  border-radius: var(--r-s);
  background: var(--card);
  box-shadow: var(--card-edge);
  text-align: left;
}
.g-prog:hover { background: var(--card-hover); }
.g-prog strong { overflow: hidden; font-size: 17px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
/* En lo que viene, la hora va primero y en grande, como en una guía de TV. */
.g-when { order: -1; overflow: hidden; color: var(--text-3); font-family: var(--display); font-size: 15px; font-weight: 600; letter-spacing: 0.04em; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Lo que se emite ahora: la imagen en vivo del canal de fondo, oscurecida hacia la izquierda para leer el texto. */
.g-now { position: relative; flex-direction: row; align-items: stretch; justify-content: flex-start; gap: 0; width: 560px; padding: 0; overflow: hidden; isolation: isolate; background: #0e1117; }
.g-thumb { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; display: grid; place-items: center end; padding-right: 9%; background: radial-gradient(circle at 78% 50%, #1b2030, #0e1117 62%); }
.g-thumb::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(90deg, #0e1117 32%, rgba(14, 17, 23, 0.86) 44%, rgba(14, 17, 23, 0.4) 72%, rgba(14, 17, 23, 0.08) 100%); }
.g-thumb .logo-tile { width: 26%; background: transparent; box-shadow: none; opacity: 0.4; }
.g-thumb .shot { left: auto; width: 68%; transition: transform 0.6s var(--ease); }
.g-now:hover .g-thumb .shot, .g-now:focus-visible .g-thumb .shot { transform: scale(1.04); }
.g-thumb .badge-live, .g-thumb .badge-off { position: absolute; top: 10px; right: 10px; z-index: 1; height: 22px; font-family: var(--display); font-size: 13px; letter-spacing: 0.12em; }
.g-thumb .badge-live { box-shadow: 0 0 14px var(--live-glow); }
.g-row.off .g-thumb .shot { filter: grayscale(1) brightness(0.4); }
.g-now-body { position: relative; display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 12px; min-width: 0; max-width: 72%; padding: 0 22px; }
.g-now-body strong { overflow: hidden; font-family: var(--display); font-size: 25px; font-weight: 700; line-height: 1.05; letter-spacing: 0.01em; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); }
.g-progress { display: flex; align-items: center; gap: 14px; color: var(--text-2); font-size: 14px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.g-sub { color: var(--text-3); font-size: 14px; }
.g-row.active .g-now, .g-row.active .g-chan { box-shadow: inset 0 0 0 2px var(--brand), 0 0 26px -6px var(--glow); }
/* Al pasar el mouse, la fila entera se ilumina apenas. */
.g-row:hover .g-chan { background-color: #121620; }
.g-row .g-now:hover, .g-row .g-now:focus-visible { background: #0e1117; }
.g-row.flash .g-now, .g-row.flash .g-chan { animation: flash 1.2s ease-out 2; }

/* ================= Grilla horaria ================= */
.tg { margin-top: 14px; }
.tg-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.tg-days { display: flex; flex-wrap: wrap; gap: 6px; }
.tg-day { height: 34px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--text-2); font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; transition: background 0.15s, color 0.15s; }
.tg-day:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.tg-day[aria-pressed="true"] { border-color: transparent; background: var(--text); color: #07080b; }
.tg-day:disabled { opacity: 0.35; cursor: default; }
.tg-nav { display: flex; align-items: center; gap: 6px; }
/* La regla de horas queda fija debajo de las categorías y acompaña el desplazamiento de costado de la grilla. */
.tg-head { position: sticky; top: calc(var(--topbar-h) + 61px); z-index: 6; display: flex; height: 40px; border-bottom: 1px solid var(--line-2); background: var(--bg); }
.tg-corner { display: flex; flex: none; align-items: center; width: var(--tg-ch); padding-left: 14px; border-right: 1px solid var(--line-2); color: var(--text-3); font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.tg-ruler-clip { position: relative; flex: 1; min-width: 0; overflow: hidden; }
.tg-ruler { position: relative; height: 100%; will-change: transform; }
.tg-tick { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding-left: 8px; border-left: 1px solid var(--line-2); color: var(--text-2); font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tg-tick.half { border-left-color: var(--line); color: var(--text-3); font-size: 13px; }
.tg-now-mark { position: absolute; top: 8px; z-index: 1; display: flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--live); box-shadow: 0 0 14px var(--live-glow); color: #fff; font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; transform: translateX(-50%); }
.tg-body { position: relative; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-padding-left: var(--tg-ch); scrollbar-color: var(--surface-3) transparent; }
.tg-inner { position: relative; }
.tg-row { display: flex; height: 64px; border-bottom: 1px solid var(--line); scroll-margin: calc(var(--topbar-h) + 110px) 0 24px; }
.tg-ch { position: sticky; left: 0; z-index: 3; display: flex; flex: none; align-items: center; gap: 10px; width: var(--tg-ch); padding: 0 14px; border-right: 1px solid var(--line-2); background: var(--bg); text-align: left; transition: background 0.15s; }
.tg-ch:hover { background: var(--surface); }
.tg-num { flex: none; min-width: 34px; color: var(--text-2); font-family: var(--display); font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tg-name { min-width: 0; font-size: 14px; font-weight: 600; }
.tg-name, .tg-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-name small { display: block; color: var(--text-3); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.tg-name small:empty { display: none; }
.tg-row.off .tg-num, .tg-row.off .tg-name { color: var(--text-3); }
/* Fondo opaco: por debajo pasan los programas al moverse de costado. */
.tg-row.active .tg-ch { background: linear-gradient(90deg, rgba(31, 122, 255, 0.2), transparent 85%), var(--bg); box-shadow: inset 3px 0 0 var(--brand); }
.tg-row.flash .tg-ch { animation: flash 1.2s ease-out 2; }
.tg-track { position: relative; flex: 1; }
.tg-prog { position: absolute; top: 5px; bottom: 5px; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0 10px; overflow: hidden; border-radius: 8px; background: var(--surface-2); text-align: left; transition: background 0.15s; }
.tg-prog:hover, .tg-prog:focus-visible { background: var(--surface-3); }
.tg-prog:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.tg-prog strong { overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.tg-prog span { overflow: hidden; color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.tg-prog.tiny { padding: 0; }
.tg-prog.tiny strong, .tg-prog.tiny span { display: none; }
.tg-prog.past { opacity: 0.45; }
.tg-prog.now { background: #18233a; box-shadow: inset 0 0 0 1px rgba(31, 122, 255, 0.55); }
.tg-prog.now:hover, .tg-prog.now:focus-visible { background: #1d2b47; }
.tg-fill { position: absolute; bottom: 0; left: 0; height: 3px; background: var(--live); }
.tg-empty { position: sticky; left: var(--tg-ch); display: flex; align-items: center; gap: 8px; width: max-content; height: 100%; padding-left: 14px; color: var(--text-3); font-size: 13px; }
.tg-empty .i { width: 15px; height: 15px; }
.tg-now { position: absolute; top: 0; bottom: 0; z-index: 2; width: 2px; margin-left: -1px; background: var(--live); box-shadow: 0 0 10px var(--live-glow); pointer-events: none; }
.tg-note { padding: 32px 0; color: var(--text-3); text-align: center; }
.epg-focus { margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.epg-focus .epg-when { color: var(--brand-hover); text-shadow: none; }  /* el rojo es solo para lo que está en vivo */
@keyframes flash { 50% { box-shadow: inset 0 0 0 2px #fff; } }
.shot { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

@supports (animation-timeline: view()) {
  .g-row, .g-group h2 { animation: rise-in linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
}
@keyframes rise-in { from { opacity: 0; transform: translateY(22px); } }

/* ================= Programación de un canal (EPG) ================= */
.epg-dialog { width: min(640px, calc(100vw - 32px)); max-height: min(780px, calc(100vh - 32px)); }
.epg-dialog[open] { display: flex; flex-direction: column; }
.epg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 12px 16px 20px; border-bottom: 1px solid var(--line); }
.epg-chan { display: flex; align-items: center; gap: 14px; min-width: 0; }
.epg-chan > div { min-width: 0; }
.epg-chan .logo-tile { width: 72px; }
.epg-num { color: var(--text-3); font-family: var(--display); font-size: 14px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.epg-chan h2 { overflow: hidden; font-family: var(--display); font-size: 26px; font-weight: 800; line-height: 1.05; letter-spacing: 0.02em; text-overflow: ellipsis; white-space: nowrap; }
.epg-chan .badge-live, .epg-chan .badge-off { flex: none; }
.epg-nav { display: flex; flex: none; gap: 2px; }
.epg-nav .p-btn { width: 38px; height: 38px; color: var(--text-2); }
.epg-nav .p-btn:hover { color: var(--text); }
.epg-body { flex: 1; min-height: 0; padding: 20px 20px 10px; overflow-y: auto; overscroll-behavior: contain; }
.epg-now { display: grid; gap: 10px; padding-bottom: 20px; }
.epg-when { display: flex; align-items: center; gap: 8px; color: var(--live); font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.epg-now h3 { font-family: var(--display); font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: 0.01em; }
.epg-sub { color: var(--text-2); font-size: 14.5px; font-weight: 500; }
/* Reparto, dirección y país: una línea tenue debajo de la sinopsis. */
.info-credits, .epg-now p.epg-credits, .epg-item-body p.epg-credits { color: var(--text-3); font-size: 13.5px; line-height: 1.5; }
.info-credits:empty { display: none; }
.info-credits { margin-top: -2px; }
.epg-now p, .epg-item-body p { color: var(--text-2); font-size: 14.5px; line-height: 1.6; }
.epg-later { padding-top: 16px; border-top: 1px solid var(--line); }
.epg-later h4 { margin-bottom: 6px; color: var(--text-3); font-family: var(--display); font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.epg-day { margin: 14px 0 4px; color: var(--text-2); font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.epg-item { border-radius: 10px; }
.epg-item.open { background: var(--surface-2); }
.epg-item-head { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto 16px; align-items: center; gap: 12px; width: 100%; padding: 10px; border-radius: 10px; text-align: left; transition: background 0.15s; }
.epg-item-head:hover { background: var(--surface-2); }
.epg-item-head time { color: var(--brand-hover); font-family: var(--display); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.epg-item-head strong { overflow: hidden; font-size: 16px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.epg-item-head span { overflow: hidden; max-width: 170px; color: var(--text-3); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.epg-item-head .i { width: 16px; height: 16px; color: var(--text-3); transition: transform 0.2s var(--ease); }
.epg-item.open .epg-item-head .i { transform: rotate(180deg); }
.epg-item-body { display: none; gap: 10px; padding: 0 12px 14px 72px; }
.epg-item.open .epg-item-body { display: grid; }
.epg-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line); }
.epg-hint { margin-right: auto; color: var(--text-3); font-size: 12px; }
@media (hover: none) { .epg-hint { display: none; } }

.site-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; max-width: var(--page-max); margin: 0 auto; padding: 28px var(--gutter) 40px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 12px; }

/* ================= Mi cuenta ================= */
/* Atajos de teclado */
.keys-dialog { width: min(720px, calc(100vw - 32px)); }
.keys-title { font-family: var(--display); font-size: 24px; font-weight: 800; letter-spacing: 0.02em; }
.keys-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px 28px; padding: 20px 22px 26px; }
.keys-body h3 { margin-bottom: 10px; color: var(--text-3); font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.keys-body dl { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 9px 12px; }
.keys-body dt { white-space: nowrap; }
.keys-body dd { color: var(--text-2); font-size: 13.5px; line-height: 1.4; }
.keys-link kbd { margin-left: auto; }
@media (hover: none) { .keys-link { display: none !important; } }
.account-dialog { width: min(620px, calc(100vw - 32px)); min-height: min(560px, calc(100vh - 32px)); max-height: calc(100vh - 32px); }
.account-dialog[open] { display: flex; flex-direction: column; }
.acc-head { display: flex; align-items: center; gap: 14px; padding: 18px 12px 14px 22px; }
.acc-avatar { width: 46px; height: 46px; font-size: 17px; }
.acc-who { flex: 1; min-width: 0; }
.acc-who h2 { overflow: hidden; font-family: var(--display); font-size: 26px; font-weight: 800; line-height: 1.05; letter-spacing: 0.02em; text-overflow: ellipsis; white-space: nowrap; }
.acc-who small { color: var(--text-3); font-size: 13px; }
.acc-head .p-btn { flex: none; width: 38px; height: 38px; color: var(--text-2); }
.acc-head .p-btn:hover { color: var(--text); }
.acc-tabs { display: flex; gap: 4px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.acc-tabs button { position: relative; height: 46px; padding: 0 12px; color: var(--text-2); font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.acc-tabs button:hover, .acc-tabs button[aria-selected="true"] { color: var(--text); }
.acc-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--brand); box-shadow: 0 0 10px var(--glow); }
.acc-status { display: none; margin: 16px 22px 0; padding: 10px 14px; border-radius: 10px; background: rgba(48, 209, 88, 0.1); color: #8ee6ac; font-size: 13.5px; font-weight: 600; }
.acc-status.show { display: block; }
.acc-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.acc-panel { display: grid; align-content: start; gap: 18px; padding: 20px 22px 26px; }
.acc-form .field input[readonly] { border-style: dashed; background: transparent; color: var(--text-3); }
.acc-form .form-error:empty { display: none; }
.acc-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.acc-note { padding: 11px 14px; border-radius: var(--r-s); background: var(--surface-2); color: var(--text-2); font-size: 13.5px; }
/* Borrar la cuenta: al pie de «Mis datos», separado y en rojo */
.acc-delete { margin-top: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.acc-delete-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.acc-delete-head h4 { margin: 0 0 4px; font-size: 15px; }
.acc-delete-head .hint { display: block; max-width: 420px; }
.acc-delete-head .hint a { color: var(--text-2); }
.acc-delete-head .btn { flex: none; }
.acc-delete-confirm { display: grid; gap: 12px; margin-top: 14px; }
.btn-danger-solid { background: var(--danger); color: #fff; }
.btn-danger-solid:hover { background: #ff6259; color: #fff; }
@media (max-width: 560px) { .acc-delete-head { flex-direction: column; } }
/* Privacidad y términos, al pie del ingreso */
.auth-legal { margin-top: 18px; color: var(--text-3); font-size: 12.5px; text-align: center; }
.auth-legal a { color: var(--text-3); }
.auth-legal a:hover, .auth-legal a:focus-visible { color: var(--text-2); }

/* Control parental y plan */
.par-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 14px; max-height: 260px; padding: 10px 12px; overflow-y: auto; border: 1px solid var(--line-2); border-radius: var(--r-s); background: var(--surface); }
.par-list .check { padding: 5px 0; font-size: 13.5px; }
.par-pins { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.acc-panel .auth-alt { margin-top: -8px; text-align: left; }
.acc-plan { padding: 10px 12px; border: 1px dashed var(--line-2); border-radius: var(--r-s); color: var(--text); font-size: 14px; font-weight: 600; }

/* Verificación en dos pasos */
.tf-state { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-s); font-size: 14px; font-weight: 600; line-height: 1.45; }
.tf-state .i { flex: none; width: 20px; height: 20px; }
.tf-state.on { background: rgba(48, 209, 88, 0.1); color: #8ee6ac; }
.tf-state.warn { background: rgba(255, 176, 32, 0.12); color: #ffc65c; }
.tf-steps { display: grid; gap: 6px; margin: 0; padding-left: 20px; color: var(--text-2); font-size: 14px; line-height: 1.5; }
.tf-steps b { color: var(--text); }
.tf-qr { justify-self: center; width: 216px; padding: 8px; border-radius: 12px; background: #fff; }
.tf-qr svg { display: block; width: 100%; height: auto; }
.tf-secret { justify-self: center; padding: 8px 14px; border-radius: 8px; background: var(--surface-2); font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 15px; letter-spacing: 0.08em; text-align: center; word-break: break-all; user-select: all; }
.tf-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 14px; border: 1px dashed var(--line-2); border-radius: var(--r); list-style: none; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 16px; letter-spacing: 0.06em; text-align: center; user-select: all; }

.acc-screens { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.acc-screens strong { display: block; font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: 0.02em; }
.acc-screens span { display: block; margin-top: 2px; color: var(--text-2); font-size: 13px; line-height: 1.5; }
.acc-meter { display: flex; flex: none; gap: 5px; }
.acc-meter i { width: 10px; height: 32px; border-radius: 3px; background: var(--surface-3); }
.acc-meter i.on { background: var(--ok); box-shadow: 0 0 12px rgba(48, 209, 88, 0.35); }
.acc-screens.full .acc-meter i.on { background: var(--warn); box-shadow: 0 0 12px rgba(255, 176, 32, 0.35); }
.acc-devlist { display: grid; margin-top: -6px; }
.acc-dev { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.acc-dev:last-child { border-bottom: 0; }
.acc-dev-icon { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface-2); color: var(--text-2); }
.acc-dev.current .acc-dev-icon { background: var(--brand-soft); color: var(--brand-hover); }
.acc-dev-icon .i { width: 22px; height: 22px; }
.acc-dev-body { flex: 1; min-width: 0; }
.acc-dev-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.acc-dev-name strong { font-size: 14.5px; font-weight: 600; }
.acc-dev-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 3px; color: var(--text-3); font-size: 12.5px; }
.acc-dev-meta > span { white-space: nowrap; }
.acc-watching { display: inline-flex; align-items: center; gap: 7px; color: var(--ok); font-weight: 600; }
.acc-watching .live-dot { width: 7px; height: 7px; background: var(--ok); }
.acc-dev .btn { flex: none; }
.acc-dev .btn.confirm, .acc-close-others.confirm, .acc-close-others.confirm:hover { background: var(--danger); box-shadow: none; color: #fff; }
.acc-close-others { justify-self: start; }
.acc-devhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.acc-devhead h4 { color: var(--text-2); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.acc-devmore { justify-self: start; font-size: 13.5px; }

/* ================= Responsive ================= */
@media (max-width: 1280px) {
  .stage-inner { --list-min: 310px; }
  .g-now { width: 500px; }
  .g-prog { width: 250px; }
}
@media (max-width: 1100px) {
  .search { width: 220px; }
  .profile-name { display: none; }
}
/* Tablet y celular: reproductor arriba, ficha y la lista de canales debajo, como una app de TV.
   La guía en filas no se muestra: la lista ya trae lo que se emite y lo que sigue en cada canal. */
@media (max-width: 1023px) {
  .stage-inner { display: flex; flex-direction: column; gap: 18px; }
  .stage-main { order: 1; }
  .chpanel { order: 2; }
  .chpanel-inner { position: static; overflow: visible; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; }
  .chpanel-head { padding: 6px 0 4px; border-bottom: 0; }
  .chpanel .chips-wrap { display: block; }
  .chips-wrap { position: sticky; top: var(--topbar-h); z-index: 5; margin: 0 calc(var(--gutter) * -1); border-bottom: 0; background: rgba(7, 8, 11, 0.94); backdrop-filter: blur(18px); }
  .chips-wrap::after { bottom: 0; background: linear-gradient(90deg, transparent, rgba(7, 8, 11, 0.95)); }
  .chips { padding: 10px var(--gutter); }
  .chlist { overflow: visible; padding: 4px 0 0; }
  .ch-main { padding-left: 0; }
  .chpanel-hint { display: none; }
  .cat-bar, .guide { display: none; }
  .info { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .info-buttons { justify-content: flex-start; order: -1; }
}
@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .auth-visual { min-height: 36vh; }
  .auth-claim h2 { font-size: 30px; }
  .auth-claim p { display: none; }
  .auth-panel { border-left: 0; padding-top: 28px; }
  .auth-box { padding: 32px 0; }
}
@media (max-width: 760px) {
  :root { --topbar-h: 58px; }
  .topbar { gap: 16px; }
  .nav-links, .search-wrap { display: none; }
  /* Buscador en el celular: el botón de la lupa ocupa la barra de arriba con el campo y «Cancelar»,
     y los resultados toman la pantalla. */
  .search-open { display: grid; place-items: center; width: 40px; height: 40px; margin-left: auto; border-radius: 50%; color: var(--text-2); }
  .search-open .i { width: 20px; height: 20px; }
  body.searching { overflow: hidden; }
  /* El desenfoque de la barra haría que los resultados (fijos) se midan contra ella y no contra la pantalla. */
  body.searching .topbar { backdrop-filter: none; }
  body.searching .search-wrap { position: fixed; top: 0; right: 0; bottom: auto; left: 0; z-index: 40; display: flex; align-items: center; gap: 10px; height: var(--topbar-h); padding: 0 var(--gutter); background: var(--bg); border-bottom: 1px solid var(--line); }
  body.searching .search { flex: 1; width: auto; }
  body.searching .search-cancel { display: block; color: var(--brand-hover); font-size: 14.5px; font-weight: 600; }
  body.searching .search-pop { position: fixed; top: var(--topbar-h); right: 0; bottom: 0; left: 0; width: auto; max-height: none; padding: 6px var(--gutter) 24px; border: 0; border-radius: 0; background: var(--bg); box-shadow: none; }
  .sr-item { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; }
  .sr-side { max-width: 120px; }
  .sr-detail { padding-left: 60px; }
  .stage { padding: 0 0 18px; }
  .stage-inner { gap: 14px; }
  .chpanel { padding: 0 var(--gutter); }
  .chips-wrap { top: calc(var(--topbar-h) + 56.25vw); }
  .player-slot { border-radius: 0; }
  .player-slot.floating .player { position: fixed; top: var(--topbar-h); right: 0; bottom: auto; left: 0; z-index: 25; height: 56.25vw; }
  .player { border-radius: 0; box-shadow: none; }
  .info { padding: 0 var(--gutter); gap: 10px; }
  .info-main { gap: 6px; }
  .info-title { font-size: 28px; }
  .info-desc, .info-more, #info-next { display: none; }
  .p-banner { left: 10px; bottom: 58px; width: calc(100% - 20px); grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 10px 14px; }
  .p-banner .logo-tile, .p-banner .bar, .bn-row.next { display: none; }
  .bn-num { font-size: 30px; }
  .bn-row strong { font-size: 14.5px; }
  .player.autoplay-muted .p-banner { bottom: 112px; }
  .cat-inner { height: 54px; }
  .cat-arrow, .cat-goto { display: none; }
  .cat-tab { height: 34px; padding: 0 14px; font-size: 14px; }
  .g-group h2 { font-size: 18px; }
  .g-row { height: 78px; scroll-margin-top: calc(var(--topbar-h) + 56.25vw + 70px); }
  .g-chan { width: 88px; }
  .g-fav { left: 58px; top: 2px; }
  .p-time { font-size: 11.5px; }
  .p-seek-wrap { margin: 0 6px; gap: 8px; }
  .p-quality span { display: none; }
  /* En celular sobran estos botones (la guía y la ficha ya los ofrecen) y la barra de tiempo va en su propia fila. */
  #p-prev, #p-next, #p-back, #p-pip { display: none; }
  .player.has-timeline .p-bar { flex-wrap: wrap; row-gap: 4px; padding-top: 40px; }
  .player.has-timeline .p-seek-wrap { order: -1; flex-basis: 100%; margin: 0 6px 2px; }
  .player.has-timeline .p-spacer { display: block; }
  .g-chan .logo-tile { width: 66px; }
  .g-progs { -webkit-mask-image: none; mask-image: none; }
  .g-prog:not(.g-now) { display: none; }
  .g-now { flex: 1; width: auto; }
  .g-thumb { display: none; }
  .g-now-body { gap: 8px; padding: 0 14px; }
  .g-now-body strong { font-size: 15px; }
  .p-volume input { display: none; }
  .p-golive { margin-left: 2px; }
  .p-btn { width: 38px; height: 38px; }
  .p-top { padding: 12px 14px 40px; }
  .p-chan .logo-tile { width: 48px; }
  .p-chan .logo-tile.text { display: none; }  /* sin logo real, el recuadro repetía el nombre (y no entraba) */
  .p-osd { top: 60px; right: 14px; }
  .p-unmute { left: 14px; bottom: 66px; }
  .guide-time { text-align: left; }
  .epg-dialog { width: 100vw; max-width: 100vw; max-height: 92vh; margin: auto 0 0; border-width: 1px 0 0; border-radius: 18px 18px 0 0; }
  .epg-head { padding: 14px 8px 14px 16px; }
  .epg-chan .logo-tile, .epg-item-head span { display: none; }
  .epg-body { padding: 16px 16px 8px; }
  .epg-now h3 { font-size: 22px; }
  .epg-item-head { grid-template-columns: 46px minmax(0, 1fr) 16px; }
  .epg-item-body { padding-left: 12px; }
  .epg-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .epg-foot .btn { flex: 1; }
  .account-dialog { width: 100vw; max-width: 100vw; min-height: 0; max-height: 92vh; margin: auto 0 0; border-width: 1px 0 0; border-radius: 18px 18px 0 0; }
  .acc-head { padding: 14px 8px 12px 16px; }
  /* Las pestañas no entran en el ancho de un celular: una sola línea que se desliza con el dedo, con un fundido a la
     derecha que avisa que hay más. */
  .acc-tabs { gap: 0; padding: 0 6px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .acc-tabs::-webkit-scrollbar { display: none; }
  .acc-tabs button { flex: none; height: 44px; padding: 0 11px; font-size: 15px; letter-spacing: 0.04em; white-space: nowrap; }
  .acc-tabs::after { content: ""; flex: none; width: 22px; }  /* la última no queda debajo del fundido */
  .acc-tabs button[aria-selected="true"]::after { left: 11px; right: 11px; bottom: 0; }  /* dentro de la fila que se desliza */
  .acc-status { margin: 14px 16px 0; }
  .acc-panel { padding: 16px 16px calc(22px + env(safe-area-inset-bottom)); }
  .acc-screens { padding: 14px; }
  .acc-dev { gap: 12px; }
  .acc-dev-icon { width: 38px; height: 38px; border-radius: 10px; }
  .acc-dev .btn { padding: 0 8px; }
  .p-limit { padding: 44px 14px 58px; }
  .p-limit p, .p-limit-list, .p-limit-icon { display: none; }
  .p-limit h3 { font-size: 15px; }
}

/* ================= Pantalla completa ================= */
/* Entra toda la «tele»: el video ocupa la pantalla y la lista de canales se abre encima, a la izquierda
   (botón de lista, tecla L o Enter), como en un decodificador. Va al final para ganarle al diseño de celular. */
#p-list { display: none; }
.stage:fullscreen { padding: 0; background: #000; }
.stage:fullscreen::after, .stage:fullscreen .hero-glow, .stage:fullscreen .info { display: none; }
.stage:fullscreen .stage-inner { display: block; max-width: none; height: 100%; }
.stage:fullscreen .stage-main { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.stage:fullscreen .player-slot { position: absolute; top: 0; right: 0; bottom: 0; left: 0; aspect-ratio: auto; border-radius: 0; }
.stage:fullscreen .player { border-radius: 0; box-shadow: none; }
.stage:fullscreen #p-list { display: grid; }
.stage:fullscreen .chpanel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  width: min(440px, 88vw);
  padding: 0;
  visibility: hidden;
  transform: translateX(-100%);
  transition: transform 0.3s var(--ease), visibility 0s linear 0.3s;
}
.stage:fullscreen.list-open .chpanel { visibility: visible; transform: none; transition: transform 0.3s var(--ease); }
.stage:fullscreen .chpanel-inner {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
  border-radius: 0;
  background: rgba(7, 8, 11, 0.86);
  box-shadow: 1px 0 0 var(--line-2), 30px 0 80px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(20px) saturate(140%);
}
.stage:fullscreen .chpanel-head { padding: 18px 14px 12px 20px; }
.stage:fullscreen .chpanel-close { display: grid; }
.stage:fullscreen .chips-wrap { position: relative; top: auto; margin: 0; border-bottom: 1px solid var(--line); background: none; backdrop-filter: none; }
.stage:fullscreen .chips { padding: 0 20px 12px; }
.stage:fullscreen .chips-wrap::after { bottom: 12px; background: linear-gradient(90deg, transparent, rgba(7, 8, 11, 0.9)); }
.stage:fullscreen .chlist { overflow-y: auto; padding: 6px 8px 10px; }
.stage:fullscreen .ch-main { padding-left: 4px; }
.stage:fullscreen .chpanel-hint { display: block; }
.stage:fullscreen .chpanel-hint .hint-window { display: none; }
.stage:fullscreen .chpanel-hint .hint-overlay { display: inline; }
@media (hover: none) { .stage:fullscreen .chpanel-hint { display: none; } }

/* ================= Foco (teclado y control remoto) ================= */
/* Lo elegido con las flechas crece un poco y brilla; en las tarjetas de la guía, además, lo recorre un
   borde de luz. Solo con :focus-visible: con el mouse o el dedo no aparece. */
@property --spin { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes focus-spin { to { --spin: 360deg; } }
button:focus-visible, a:focus-visible, [tabindex]:not(.player):focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 22px 3px var(--glow);
}
.btn, .fav-btn, .chip, .cat-tab, .p-btn, .p-golive, .p-quality, .next-item, .epg-item-head, .acc-tabs button {
  transition: background 0.15s, color 0.15s, box-shadow 0.2s ease-out, transform 0.2s ease-out;
}
.btn:focus-visible, .fav-btn:focus-visible, .chip:focus-visible, .cat-tab:focus-visible, .p-btn:focus-visible { transform: scale(1.06); }
.g-prog, .g-chan { position: relative; transition: background 0.2s, box-shadow 0.2s ease-out, transform 0.2s ease-out; }
.g-row .g-prog:focus-visible, .g-row .g-chan:focus-visible {
  z-index: 2;
  background: var(--card-hover);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25), 0 0 28px 4px var(--glow), 0 16px 40px -12px #000;
  transform: scale(1.05);
}
.g-row .g-prog:focus-visible::after, .g-row .g-chan:focus-visible::after {
  content: "";
  position: absolute;
  top: -2px; right: -2px; bottom: -2px; left: -2px;
  z-index: 3;
  padding: 2px;
  border-radius: calc(var(--r-s) + 2px);
  background: conic-gradient(from var(--spin), var(--brand), #7fdcff, #fff, #7fdcff, var(--brand));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: focus-spin 2.4s linear infinite;
  pointer-events: none;
}

/* ================= App instalable (PWA) ================= */
.ios-install { width: min(480px, calc(100vw - 32px)); }
.ios-steps { display: grid; gap: 14px; margin: 0; padding: 20px 22px 26px 44px; color: var(--text-2); font-size: 15px; line-height: 1.5; }
.ios-steps strong { color: var(--text); }
.ios-steps .i { width: 18px; height: 18px; margin: 0 2px; vertical-align: -3px; color: var(--brand-hover); }
/* Invitación a instalar: abajo, sobre todo lo demás, sin tapar el reproductor. */
.install-banner { position: fixed; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); left: 12px; z-index: 70; display: flex; align-items: center; gap: 12px; padding: 12px 10px 12px 14px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--surface-2); box-shadow: var(--shadow); animation: float-in 0.3s var(--ease); }
.install-banner img { flex: none; border-radius: 10px; }
.install-banner div { display: grid; flex: 1; gap: 2px; min-width: 0; }
.install-banner strong { font-size: 14.5px; }
.install-banner span { color: var(--text-3); font-size: 12.5px; }
/* Sin conexión: pantalla propia al abrir y una franja si se corta mientras se mira. */
.offline { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 80; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 32px; background: var(--bg); text-align: center; }
.offline .i { width: 46px; height: 46px; margin-bottom: 6px; color: var(--text-3); }
.offline strong { font-family: var(--display); font-size: 26px; font-weight: 700; }
.offline span { max-width: 360px; color: var(--text-2); font-size: 15px; line-height: 1.5; }
.offline .btn { margin-top: 8px; }
.offline .geo-credit { margin-top: 18px; color: var(--text-3); font-size: 12px; }
.offline .geo-credit a { color: inherit; }
.offline-bar { position: fixed; top: var(--topbar-h); right: 0; left: 0; z-index: 35; padding: 8px 16px; background: #5c3a00; color: #ffd27f; font-size: 13.5px; font-weight: 600; text-align: center; }

.login-install { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; }
.login-install .i { width: 18px; height: 18px; }
.install-note { margin: -12px 22px 24px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); color: var(--text-3); font-size: 13px; line-height: 1.5; }

/* ---- Celular ---- */
@media (max-width: 760px) {
  /* Los menús de idioma, subtítulos y calidad suben desde abajo de la pantalla: en el reproductor chico no
     entraban (en pantalla completa quedan como en la computadora). Tocar afuera los cierra. */
  .stage:not(:fullscreen) .p-menu { position: fixed; top: auto; right: 0; bottom: 0; left: 0; z-index: 2; min-width: 0; max-height: 72vh; overflow-y: auto; padding: 10px 12px calc(18px + env(safe-area-inset-bottom, 0px)); border-width: 1px 0 0; border-radius: 18px 18px 0 0; animation: sheet-up 0.25s var(--ease); }
  .stage:not(:fullscreen) .p-menu button { padding: 14px 12px; font-size: 16px; }
  .stage:not(:fullscreen) .p-menu .pm-title { padding: 10px 12px 4px; }
  .stage:not(:fullscreen) .player.menu-open { z-index: 60; }
  .stage:not(:fullscreen) .player.menu-open::before { content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background: rgba(0, 0, 0, 0.6); }
}
@keyframes sheet-up { from { transform: translateY(100%); } }

/* Celular acostado (pantalla completa): el cartel del canal, más chico y más abajo, para no tapar el video. */
@media (max-height: 520px) and (orientation: landscape) {
  .p-banner { left: 14px; bottom: 62px; width: min(540px, calc(100% - 28px)); grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 8px 16px 8px 14px; border-radius: 12px; }
  .player[data-state="playing"]:not(.show-ui) .p-banner { bottom: 14px; }
  .p-banner::before { top: 10px; bottom: 10px; }
  .p-banner .logo-tile { display: none; }
  .bn-num { font-size: 42px; }
  .bn-body { gap: 3px; }
  .bn-chan { font-size: 13px; }
  .bn-chan span { font-size: 11.5px; }
  .bn-row { gap: 8px; font-size: 13px; }
  .bn-row strong { font-size: 16px; }
  .bn-row time { font-size: 12.5px; }
  .bn-tag { padding: 1px 6px; font-size: 10.5px; }
}