/* =========================================================================
   IPTV Player — Design System
   Premium dark theme, responsive (mobile / tablet / desktop / Smart TV)
   ========================================================================= */

:root{
  /* --- Colors --- */
  --bg-0:#05070a;
  --bg-1:#0d1117;
  --bg-2:#141a22;
  --bg-3:#1c232d;
  --bg-4:#252d38;
  --border:#2a3240;
  --border-soft:#1c232d;

  --text-1:#f0f3f7;
  --text-2:#a8b3c2;
  --text-3:#6b7684;

  --accent:#5b8cff;
  --accent-hover:#7ba3ff;
  --accent-soft:rgba(91,140,255,.15);
  --accent-glow:rgba(91,140,255,.35);

  --gold:#f0b23c;
  --green:#3fd67a;
  --red:#ff5c6c;
  --orange:#f2994a;

  /* --- Gradients --- */
  --grad-brand: linear-gradient(135deg,#5b8cff 0%,#8b5bff 100%);
  --grad-surface: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 100%);
  --grad-fade-top: linear-gradient(180deg, var(--bg-0) 0%, rgba(5,7,10,0) 100%);

  /* --- Radii / spacing --- */
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;
  --radius-xl:22px;

  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;

  /* --- Elevation --- */
  --shadow-sm:0 2px 8px rgba(0,0,0,.25);
  --shadow-md:0 8px 24px rgba(0,0,0,.35);
  --shadow-lg:0 20px 60px rgba(0,0,0,.55);
  --shadow-focus:0 0 0 3px var(--accent-glow);

  /* --- Motion --- */
  --ease: cubic-bezier(.22,.9,.35,1);
  --dur-fast:.15s;
  --dur:.25s;
  --dur-slow:.4s;

  /* --- Layout --- */
  --header-h:64px;
  --toolbar-h:64px;
  --focus-ring: 0 0 0 3px var(--bg-1), 0 0 0 6px var(--accent);
}

/* =========================================================================
   Reset & base
   ========================================================================= */
*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }

/* El atributo [hidden] debe ganar siempre, sin importar que otras reglas
   de clase definan `display` explícito (grid/flex) con la misma
   especificidad — de lo contrario un elemento "oculto" seguiría visible. */
[hidden]{ display:none !important; }

html{
  color-scheme: dark;
  scroll-behavior:smooth;
}

body{
  font-family:'Inter','Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,sans-serif;
  background:var(--bg-0);
  color:var(--text-1);
  min-height:100vh;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
button, input, select{ font:inherit; color:inherit; }
button{ cursor:pointer; }
a{ color:inherit; text-decoration:none; }

::selection{ background:var(--accent); color:#fff; }

/* Scrollbar */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg-1); }
::-webkit-scrollbar-thumb{ background:var(--bg-4); border-radius:8px; border:2px solid var(--bg-1); }
::-webkit-scrollbar-thumb:hover{ background:var(--border); }

/* =========================================================================
   Focus visibility — critical for keyboard / remote (Smart TV) navigation
   ========================================================================= */
:focus{ outline:none; }
:focus-visible{
  outline:none;
  box-shadow:var(--focus-ring);
  border-radius:var(--radius-sm);
  z-index:5;
  position:relative;
}
/* When navigating with a TV remote/keyboard, add a body class (js) for
   extra-prominent focus rings sized for 10-foot UI. */
body.tv-nav :focus-visible{
  box-shadow:0 0 0 4px var(--bg-1), 0 0 0 8px var(--accent), var(--shadow-lg);
  transform:scale(1.02);
}

/* =========================================================================
   Skip link (accessibility)
   ========================================================================= */
.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--accent); color:#fff; padding:.75rem 1.25rem;
  border-radius:var(--radius-sm); z-index:9999; font-weight:600;
}
.skip-link:focus{ left:var(--space-4); top:var(--space-4); }

/* =========================================================================
   Header
   ========================================================================= */
.app-header{
  position:sticky; top:0; z-index:100;
  background:rgba(13,17,23,.85);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--border-soft);
  padding:var(--space-3) var(--space-6);
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  min-height:var(--header-h);
}

.brand{ display:flex; align-items:center; gap:var(--space-3); }
.brand-mark{
  width:38px; height:38px; border-radius:var(--radius-md);
  background:var(--grad-brand);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; box-shadow:0 4px 14px var(--accent-glow);
  flex-shrink:0;
}
.brand-text h1{
  font-size:1.05rem; font-weight:700; letter-spacing:-.01em; color:var(--text-1);
}
.brand-text h1 span{
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand-text .subtitle{ font-size:.72rem; color:var(--text-3); font-weight:500; }

.header-status{
  font-size:.78rem; color:var(--text-2);
  display:flex; align-items:center; gap:var(--space-2);
}
.status-dot{
  width:8px; height:8px; border-radius:50%; background:var(--text-3); flex-shrink:0;
  transition:background var(--dur);
}
.status-dot.ok{ background:var(--green); box-shadow:0 0 8px var(--green); }
.status-dot.err{ background:var(--red); box-shadow:0 0 8px var(--red); }
.status-dot.loading{ background:var(--gold); animation:pulse 1.2s ease-in-out infinite; }

@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

/* =========================================================================
   Toolbar (search, filters)
   ========================================================================= */
.toolbar{
  position:sticky; top:var(--header-h); z-index:90;
  display:flex; gap:var(--space-3); align-items:center; flex-wrap:wrap;
  padding:var(--space-4) var(--space-6);
  background:rgba(13,17,23,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-soft);
  transition:opacity var(--dur), transform var(--dur);
}

.search-field{
  position:relative; flex:1 1 260px; min-width:220px;
}
.search-field svg{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:var(--text-3); pointer-events:none; width:18px; height:18px;
}
.search-field input{
  width:100%; padding:.72rem .95rem .72rem 2.6rem;
  background:var(--bg-2); border:1.5px solid var(--border);
  border-radius:var(--radius-lg); color:var(--text-1); font-size:.92rem;
  transition:border-color var(--dur), background var(--dur), box-shadow var(--dur);
}
.search-field input::placeholder{ color:var(--text-3); }
.search-field input:hover{ border-color:var(--border); background:var(--bg-3); }
.search-field input:focus-visible{ border-color:var(--accent); background:var(--bg-3); box-shadow:0 0 0 4px var(--accent-soft); }
.search-field .clear-btn{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%; border:none; background:var(--bg-4);
  color:var(--text-2); display:none; align-items:center; justify-content:center; font-size:.9rem;
}
.search-field.has-value .clear-btn{ display:flex; }
.search-field .clear-btn:hover{ background:var(--border); color:var(--text-1); }

.select-wrap{ position:relative; }
.select-wrap::after{
  content:''; position:absolute; right:12px; top:50%; width:8px; height:8px;
  border-right:2px solid var(--text-3); border-bottom:2px solid var(--text-3);
  transform:translateY(-65%) rotate(45deg); pointer-events:none;
}
.select-wrap select{
  appearance:none; -webkit-appearance:none;
  padding:.72rem 2.2rem .72rem 1rem;
  background:var(--bg-2); border:1.5px solid var(--border);
  border-radius:var(--radius-lg); color:var(--text-1); font-size:.85rem;
  transition:border-color var(--dur), background var(--dur);
  max-width:180px;
}
.select-wrap select:hover{ border-color:var(--border); background:var(--bg-3); }
.select-wrap select:focus-visible{ border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.select-wrap select option{ background:var(--bg-2); color:var(--text-1); }

.chip-btn{
  padding:.7rem 1rem;
  background:var(--bg-2); border:1.5px solid var(--border); border-radius:var(--radius-lg);
  color:var(--text-2); font-size:.85rem; font-weight:600;
  display:flex; align-items:center; gap:.4rem; white-space:nowrap;
  transition:all var(--dur);
}
.chip-btn:hover{ border-color:var(--gold); color:var(--gold); }
.chip-btn.active{ color:var(--gold); border-color:var(--gold); background:rgba(240,178,60,.1); }
.chip-btn svg{ width:16px; height:16px; }

.result-stat{
  font-size:.78rem; color:var(--text-3); white-space:nowrap; margin-left:auto; font-weight:500;
}

/* Botón "Cargar más" (paginación UI para catálogos grandes como ZonaAPI) */
.load-more-wrap{
  display:flex; justify-content:center; padding:var(--space-5) 0 var(--space-7);
}
.load-more-btn{
  padding:.85rem 1.8rem;
  background:var(--bg-2); border:1.5px solid var(--accent); border-radius:var(--radius-lg);
  color:var(--accent-hover); font-size:.9rem; font-weight:600;
  transition:all var(--dur); cursor:pointer;
}
.load-more-btn:hover{ background:var(--accent-soft); color:var(--accent-hover); transform:translateY(-2px); }
.load-more-btn:active{ transform:translateY(0); }

/* =========================================================================
   Category rail
   ========================================================================= */
.category-rail{
  display:flex; gap:var(--space-2); overflow-x:auto; padding:var(--space-3) var(--space-6);
  scrollbar-width:none; -ms-overflow-style:none;
  border-bottom:1px solid var(--border-soft);
  background:var(--bg-1);
}
.category-rail::-webkit-scrollbar{ display:none; }
.category-pill{
  flex-shrink:0; padding:.5rem 1.1rem; border-radius:999px;
  background:var(--bg-2); border:1.5px solid var(--border); color:var(--text-2);
  font-size:.8rem; font-weight:600; white-space:nowrap;
  transition:all var(--dur);
}
.category-pill:hover{ border-color:var(--text-3); color:var(--text-1); }
.category-pill.active{
  background:var(--grad-brand); border-color:transparent; color:#fff;
  box-shadow:0 4px 14px var(--accent-glow);
}

/* =========================================================================
   Content / Grid
   ========================================================================= */
.content{ padding:var(--space-5) var(--space-6) var(--space-7); max-width:1800px; margin:0 auto; }

.section-title{
  font-size:1rem; font-weight:700; margin-bottom:var(--space-4);
  display:flex; align-items:center; gap:var(--space-2); color:var(--text-1);
}

/* =========================================================================
   Watch layout — reproductor + lista de canales lado a lado
   ========================================================================= */
.watch-layout{
  display:block;
}

/* Cuando hay un canal reproduciéndose, se activa la vista dividida:
   reproductor fijo (sticky) a la izquierda, lista de canales a la derecha
   para poder cambiar de canal sin perder la reproducción. */
body.watching .watch-layout{
  display:grid;
  grid-template-columns:minmax(400px, 640px) 1fr;
  align-items:start;
  gap:var(--space-5);
}

.player-pane{ min-width:0; }
body.watching .player-pane{
  position:sticky;
  top:calc(var(--header-h) + var(--space-4));
}

.player-card{
  background:var(--bg-1); border:1px solid var(--border-soft);
  border-radius:var(--radius-xl); overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:var(--shadow-md);
}

.list-pane{ min-width:0; }

.channel-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
  gap:var(--space-4);
}
body.watching .channel-grid{
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
}

/* =========================================================================
   Channel card
   ========================================================================= */
.channel-card{
  position:relative;
  background:var(--bg-2);
  border:1.5px solid var(--border-soft);
  border-radius:var(--radius-lg);
  padding:var(--space-4);
  display:flex; flex-direction:column; gap:var(--space-3);
  transition:transform var(--dur) var(--ease), border-color var(--dur), box-shadow var(--dur), background var(--dur);
  text-align:left;
  overflow:hidden;
  isolation:isolate;
}
.channel-card::before{
  content:''; position:absolute; inset:0; z-index:-1; opacity:0;
  background:var(--grad-surface);
  transition:opacity var(--dur);
}
.channel-card:hover, .channel-card:focus-visible{
  transform:translateY(-4px);
  border-color:var(--accent);
  box-shadow:var(--shadow-md), 0 0 0 1px var(--accent-soft);
  background:var(--bg-3);
}
.channel-card:hover::before, .channel-card:focus-visible::before{ opacity:1; }
.channel-card:active{ transform:translateY(-1px) scale(.99); }

/* Tarjeta del canal que se está reproduciendo actualmente */
.channel-card.playing{
  border-color:var(--accent);
  background:var(--bg-3);
  box-shadow:0 0 0 1px var(--accent), var(--shadow-sm);
}
.channel-card.playing .card-thumb{ background:var(--accent-soft); }
.channel-card.playing .card-title{ color:var(--accent-hover); }
.now-playing-tag{
  position:absolute; top:8px; left:8px; z-index:1;
  display:flex; align-items:center; gap:4px;
  padding:3px 8px; border-radius:999px; font-size:.62rem; font-weight:700;
  background:var(--accent); color:#fff; letter-spacing:.03em;
  box-shadow:0 2px 8px var(--accent-glow);
}
.now-playing-tag .dot{
  width:6px; height:6px; border-radius:50%; background:#fff; animation:pulse 1.2s ease-in-out infinite;
}

/* Extra-large tap targets & scaling for TV remote nav */
body.tv-nav .channel-card:focus-visible{
  transform:translateY(-6px) scale(1.035);
  box-shadow:var(--shadow-lg), 0 0 0 1px var(--accent);
}

.card-thumb{
  width:100%; aspect-ratio:16/9; border-radius:var(--radius-md);
  background:var(--bg-4);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative;
  font-size:1.6rem; font-weight:700; color:var(--text-3);
}
.card-thumb img{ width:100%; height:100%; object-fit:contain; }
.card-thumb .play-hint{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(5,7,10,.45); opacity:0; transition:opacity var(--dur);
}
.channel-card:hover .play-hint, .channel-card:focus-visible .play-hint{ opacity:1; }
.play-hint svg{ width:36px; height:36px; color:#fff; filter:drop-shadow(0 2px 8px rgba(0,0,0,.5)); }

/* Tarjetas de películas (ZonaAPI): el thumb se muestra como póster de cine */
.channel-card.movie .card-thumb{
  aspect-ratio:2/3;
  background:var(--bg-4);
}
.channel-card.movie .card-poster{
  width:100%; height:100%; object-fit:cover; display:block;
}
.channel-card.movie .card-title{ white-space:normal; -webkit-line-clamp:2; line-clamp:2; display:-webkit-box; -webkit-box-orient:vertical; }

/* Badges de rating (★) y año en tarjetas de película */
.badge.rating{ background:rgba(255,196,0,.15); color:#ffc400; border:1px solid rgba(255,196,0,.35); }
.badge.year{ background:var(--bg-4); color:var(--text-2); border:1px solid var(--border-soft); }

.card-body{ display:flex; flex-direction:column; gap:.35rem; min-width:0; flex:1; }
.card-title{
  font-size:.92rem; font-weight:600; color:var(--text-1);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.card-meta{ display:flex; flex-wrap:wrap; gap:.35rem; align-items:center; }
.badge{
  padding:2px 7px; border-radius:5px; font-size:.65rem; font-weight:700;
  background:var(--bg-4); color:var(--text-2); letter-spacing:.02em;
}
.badge.hd{ background:rgba(63,214,122,.15); color:var(--green); }
.badge.country{ background:rgba(91,140,255,.15); color:var(--accent-hover); }
.badge.nsfw{ background:rgba(255,92,108,.15); color:var(--red); }

.card-footer{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-2);
  margin-top:auto;
}
.card-url{
  font-size:.65rem; color:var(--text-3); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; flex:1;
}
.fav-toggle{
  flex-shrink:0; width:32px; height:32px; border-radius:50%; border:none;
  background:var(--bg-3); color:var(--text-3); display:flex; align-items:center; justify-content:center;
  transition:all var(--dur);
}
.fav-toggle:hover{ background:var(--bg-4); color:var(--gold); }
.fav-toggle.active{ color:var(--gold); }
.fav-toggle svg{ width:16px; height:16px; }

/* =========================================================================
   Skeleton loaders
   ========================================================================= */
.skeleton-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:var(--space-4);
}
.skeleton-card{
  height:200px; border-radius:var(--radius-lg); background:var(--bg-2);
  position:relative; overflow:hidden;
}
.skeleton-card::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  transform:translateX(-100%);
  animation:shimmer 1.6s infinite;
}
@keyframes shimmer{ 100%{ transform:translateX(100%); } }

/* =========================================================================
   Empty / Error states
   ========================================================================= */
.state-panel{
  text-align:center; padding:var(--space-7) var(--space-5);
  color:var(--text-2); display:flex; flex-direction:column; align-items:center; gap:var(--space-3);
}
.state-panel .icon{
  width:64px; height:64px; border-radius:50%; background:var(--bg-2);
  display:flex; align-items:center; justify-content:center; color:var(--text-3);
  margin-bottom:var(--space-2);
}
.state-panel .icon svg{ width:28px; height:28px; }
.state-panel h3{ color:var(--text-1); font-size:1.1rem; font-weight:700; }
.state-panel p{ font-size:.88rem; max-width:360px; }
.retry-btn{
  margin-top:var(--space-2); padding:.65rem 1.4rem; border-radius:var(--radius-md);
  background:var(--grad-brand); color:#fff; font-weight:600; font-size:.85rem; border:none;
  box-shadow:0 4px 14px var(--accent-glow);
}
.retry-btn:hover{ filter:brightness(1.1); }

/* =========================================================================
   Player card (contenido del panel del reproductor)
   ========================================================================= */
@keyframes scaleIn{ from{ transform:scale(.96) translateY(8px); opacity:0 } to{ transform:scale(1) translateY(0); opacity:1 } }
.player-card{ animation:scaleIn var(--dur-slow) var(--ease); }

.player-head{
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-4) var(--space-5);
  border-bottom:1px solid var(--border-soft);
}
.player-head h2{
  flex:1; font-size:1rem; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.icon-btn{
  width:38px; height:38px; border-radius:50%; border:none; background:var(--bg-2);
  color:var(--text-2); display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:all var(--dur);
}
.icon-btn svg{ width:18px; height:18px; }
.icon-btn:hover{ background:var(--bg-3); color:var(--text-1); }
.icon-btn.fav.active{ color:var(--gold); }
.icon-btn.close:hover{ background:rgba(255,92,108,.15); color:var(--red); }

.player-video-wrap{
  position:relative; background:#000; aspect-ratio:16/9;
  display:flex; align-items:center; justify-content:center;
}
.player-video-wrap video{ width:100%; height:100%; display:block; object-fit:contain; }

/* Botón de pantalla completa activo (estado "salir") */
.icon-btn.active{ background:var(--bg-3); color:var(--accent); }

.player-error{
  display:none; padding:var(--space-6); text-align:center; color:var(--orange);
  flex-direction:column; align-items:center; gap:var(--space-2);
}
.player-error.show{ display:flex; }
.player-error .hint{ font-size:.82rem; color:var(--text-3); }

.player-loading{
  position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center;
  background:rgba(0,0,0,.5); gap:var(--space-3);
}
.player-loading.show{ display:flex; }
.player-loading-text{ font-size:.8rem; color:var(--text-2); font-weight:500; }

.player-foot{
  padding:.65rem var(--space-5); font-size:.72rem; color:var(--text-3);
  border-top:1px solid var(--border-soft); word-break:break-all;
  display:flex; gap:.6rem; flex-wrap:wrap;
}

/* Spinner */
.spinner{
  width:36px; height:36px; border-radius:50%;
  border:3px solid rgba(255,255,255,.15); border-top-color:var(--accent);
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* =========================================================================
   Toast
   ========================================================================= */
.toast{
  position:fixed; bottom:var(--space-6); left:50%; transform:translateX(-50%) translateY(120%);
  background:var(--bg-3); color:var(--text-1); padding:.75rem 1.4rem; border-radius:var(--radius-lg);
  border:1px solid var(--border); font-size:.85rem; font-weight:500; z-index:2000;
  opacity:0; transition:all var(--dur-slow) var(--ease); pointer-events:none;
  box-shadow:var(--shadow-md);
  display:flex; align-items:center; gap:.5rem;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* =========================================================================
   Back-to-top (TV/keyboard convenience)
   ========================================================================= */
.back-top{
  position:fixed; right:var(--space-5); bottom:var(--space-5); z-index:80;
  width:46px; height:46px; border-radius:50%; border:none;
  background:var(--bg-3); color:var(--text-1); box-shadow:var(--shadow-md);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transform:translateY(10px);
  transition:all var(--dur);
}
.back-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
.back-top:hover{ background:var(--accent); }

/* =========================================================================
   Responsive breakpoints
   ========================================================================= */

/* Tablet */
@media (max-width:1024px){
  .app-header, .toolbar, .category-rail{ padding-left:var(--space-4); padding-right:var(--space-4); }
  .content{ padding:var(--space-4); }
  .channel-grid{ grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); }
}

/* Mobile */
@media (max-width:640px){
  .app-header{ padding:var(--space-3) var(--space-4); }
  .brand-text .subtitle{ display:none; }
  .header-status{ display:none; }
  .toolbar{ padding:var(--space-3) var(--space-4); gap:var(--space-2); top:56px; }
  .search-field{ flex:1 1 100%; order:1; }
  .select-wrap{ flex:1 1 45%; }
  .select-wrap select{ max-width:none; width:100%; }
  .result-stat{ order:2; margin-left:0; width:100%; text-align:right; }
  .chip-btn{ order:1; }
  .content{ padding:var(--space-3); }
  .channel-grid{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:var(--space-3); }
  .channel-card{ padding:var(--space-3); }
  .card-title{ font-size:.85rem; }
  .back-top{ right:var(--space-3); bottom:var(--space-3); width:40px; height:40px; }
}

@media (max-width:380px){
  .channel-grid{ grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); }
}

/* =========================================================================
   Watch layout responsivo — por debajo de 900px no cabe la vista dividida,
   así que el reproductor vuelve a comportarse como overlay a pantalla
   completa (igual que un modal), y la lista queda debajo/oculta detrás.
   ========================================================================= */
@media (max-width:899px){
  body.watching .watch-layout{ display:block; }
  body.watching .player-pane{
    position:fixed; inset:0; z-index:1000;
    background:rgba(4,5,8,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    display:flex; align-items:center; justify-content:center;
    padding:var(--space-4);
  }
  body.watching .player-card{ width:100%; max-width:860px; max-height:92vh; }
}

@media (max-width:640px){
  body.watching .player-pane{ padding:0; }
  body.watching .player-card{ max-width:none; max-height:100vh; height:100%; border-radius:0; }
}

/* =========================================================================
   Smart TV / 10-foot UI (large screens navigated by remote/keyboard)
   Detected via JS by adding .tv-mode to <body>, also applied for very wide
   low-DPI displays as a heuristic fallback.
   ========================================================================= */
body.tv-mode{
  font-size:1.15rem;
}
body.tv-mode .app-header{ padding:var(--space-5) var(--space-7); }
body.tv-mode .toolbar{ padding:var(--space-5) var(--space-7); }
body.tv-mode .content{ padding:var(--space-6) var(--space-7); }
body.tv-mode .channel-grid{
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:var(--space-5);
}
body.tv-mode .channel-card{ padding:var(--space-5); }
body.tv-mode .card-title{ font-size:1.05rem; }
body.tv-mode .icon-btn, body.tv-mode .fav-toggle{ width:46px; height:46px; }
body.tv-mode .search-field input{ padding-top:1rem; padding-bottom:1rem; font-size:1.05rem; }

@media (min-width:1600px){
  .content{ max-width:2000px; }
  .channel-grid{ grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* =========================================================================
   Fallback de pantalla completa vía CSS (Smart TV sin Fullscreen API).
   Al final del archivo para que gane a cualquier media query anterior.
   body.fs-css fija el reproductor a la pantalla entera por encima de todo.
   ========================================================================= */
body.fs-css{ overflow:hidden; }
body.fs-css .player-pane{
  position:fixed; inset:0; z-index:9999;
  background:#000; display:flex; align-items:center; justify-content:center;
  padding:0;
}
body.fs-css .player-card{
  width:100vw; height:100vh; max-width:none; max-height:none;
  border-radius:0; background:#000;
}
body.fs-css .player-head,
body.fs-css .player-foot{ display:none; }
body.fs-css .player-video-wrap{
  width:100vw; height:100vh; aspect-ratio:auto;
  background:#000;
}
body.fs-css .player-video-wrap video{ width:100vw; height:100vh; object-fit:contain; }
body.fs-css .player-error{ color:var(--orange); }