:root{
  --bg:#0b0b0b; --bg2:#141414; --card:#1c1c1c; --line:#2a2a2a;
  --txt:#f5f5f5; --dim:#b3b3b3; --accent:#e50914; --accent2:#f6121d;
  --focus:#ffffff; --radius:6px;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
html{height:100%; scrollbar-width:none;}
body{
  min-height:100%; background:var(--bg);
  color:var(--txt); font-family:'Netflix Sans','Segoe UI',system-ui,Roboto,Arial,sans-serif;
  overflow-x:hidden; user-select:none;
}
body::-webkit-scrollbar{display:none;}
/* login y reproductor = overlays a pantalla completa; el resto = página que scrollea normal (compatible con TODOS los TV) */
.view{position:relative;}
.view-login,.view-player{position:fixed; top:0;left:0;right:0;bottom:0; z-index:30;}
.view-detail{position:relative;}
[hidden]{display:none !important;}
.brand-dot{display:inline-block; width:.7em; height:.7em; border-radius:50%;
  background:var(--accent); box-shadow:0 0 14px var(--accent2); vertical-align:middle; margin-right:.35em;}

/* ===== FOCUS (control remoto) ===== */
.focusable{outline:none; transition:transform .12s ease, box-shadow .12s ease, background .12s ease;}
.focusable.focused{
  transform:scale(1.06); z-index:5;
  box-shadow:0 0 0 4px var(--focus), 0 12px 34px rgba(0,0,0,.55);
}
.tab.focusable.focused, .cat.focusable.focused{transform:scale(1.03);}

/* ===== LOGIN ===== */
.view-login{display:flex; align-items:center; justify-content:center; padding:4vh 4vw;}
.login-card{width:94vw;max-width:440px; background:#12161f; border:1px solid var(--line); border-radius:24px;
  padding:5vh 7vw; text-align:center; box-shadow:0 26px 64px rgba(0,0,0,.55);}
.login-logo{width:92px; height:92px; margin:0 auto 1.4vh; filter:drop-shadow(0 6px 18px rgba(225,29,42,.35));}
.login-name{font-size:31px; font-weight:800; letter-spacing:.02em;}
.login-name b{color:var(--accent2);}
.login-sub{color:var(--dim); font-size:15px; margin-top:.3em; margin-bottom:3.4vh;}
.login-fieldwrap{text-align:left; margin-bottom:2vh;}
.login-lbl{display:block; color:var(--dim); font-size:14px; margin-bottom:1vh; font-weight:600;}
.code-input{width:100%; height:66px; border-radius:14px; background:#0c1119; border:1.5px solid var(--line);
  color:var(--txt); font-size:30px; font-weight:800; text-align:center; letter-spacing:.45em; text-indent:.45em; outline:none;}
.code-input::placeholder{color:#38445a; letter-spacing:.28em; font-weight:600;}
.code-input.focused{box-shadow:0 0 0 3px var(--focus) !important; transform:none;}
.code-input:focus{border-color:var(--accent);}
.login-btn{width:100%; height:60px; margin-top:1.2vh; border:none; border-radius:14px;
  background:linear-gradient(180deg,var(--accent2),var(--accent)); color:#fff; font-size:19px; font-weight:800; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:.5em;}
.login-btn.focused{transform:scale(1.03);}
.login-msg{color:var(--accent2); font-size:15px; margin-top:1.4vh; min-height:1em;}
.login-foot{color:var(--dim); font-size:13px; margin-top:2.4vh;}

/* ===== APP (Netflix) ===== */
.appbar{position:fixed; top:0; left:0; right:0; z-index:20; display:flex; align-items:center; gap:2vw;
  padding:2vh 3vw; background:linear-gradient(180deg,rgba(10,13,20,.96),rgba(10,13,20,.45) 75%,transparent);}
.appbar-brand{font-size:3vh; letter-spacing:.06em; color:var(--accent); font-weight:900; white-space:nowrap;}
.appbar-brand b{color:var(--txt);}
.tabs{display:flex; gap:2vw; flex:1 1 auto; min-width:0; overflow-x:auto; scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.appbar-right{display:flex; gap:1.4vw; align-items:center; flex:0 0 auto;}
.tab{border:none; background:none; color:var(--dim);
  padding:.6vh .4vw; font-size:2.2vh; font-weight:600; cursor:pointer; white-space:nowrap;}
.tab.is-active{color:#fff; font-weight:800;}
.tab.focused{color:#fff; transform:scale(1.06); box-shadow:none; text-decoration:underline; text-underline-offset:8px; text-decoration-thickness:3px; text-decoration-color:var(--accent);}

.rows{padding-bottom:6vh;}

/* ---- HERO (Netflix) ---- */
.hero{position:relative; height:70vh; min-height:360px; display:flex; align-items:flex-end; justify-content:center;
  text-align:center; padding:0 4vw 2vh; overflow:hidden;}
.hero-bg{position:absolute; top:0;left:0;right:0;bottom:0; background:#0c0c0c center/cover no-repeat;}
.hero::after{content:""; position:absolute; top:0;left:0;right:0;bottom:0;
  background:linear-gradient(0deg,var(--bg) 3%,rgba(11,11,11,.15) 45%,transparent 70%),
             radial-gradient(120% 80% at 50% 25%,transparent 40%,rgba(11,11,11,.55));}
.hero-info{position:relative; z-index:2; max-width:90vw; display:flex; flex-direction:column; align-items:center;}
.hero-title{font-size:6vh; font-weight:900; line-height:1.02; text-shadow:0 4px 24px rgba(0,0,0,.8);}
.hero-sub{color:#e5e5e5; font-size:2vh; margin-top:1.4vh; letter-spacing:.02em; text-shadow:0 2px 10px rgba(0,0,0,.9);}
.hero-actions{display:flex; align-items:flex-end; gap:3vw; margin-top:2.8vh;}
.hact{display:flex; flex-direction:column; align-items:center; gap:.6vh; background:none; border:none; color:#fff;
  font-weight:700; font-size:1.6vh; cursor:pointer;}
.hact .ico{font-size:3.2vh; line-height:1;}
.hero-play{flex-direction:row; align-items:center; gap:.5em; background:#fff; color:#111; font-size:2.3vh; font-weight:800;
  padding:1.4vh 5vw; border-radius:6px; align-self:center;}
.hact.focused,.hero-play.focused{transform:scale(1.1); box-shadow:0 0 0 3px var(--accent2); border-radius:8px;}
.hero-play.focused{border-radius:6px;}

/* ---- ROWS / RAILS ---- */
.row{padding:1.2vh 0 .4vh;}
.row-title{font-size:2.4vh; font-weight:800; color:#e7edf7; padding:0 4vw .6vh;}
.rail{display:flex; gap:1vw; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; padding:1vh 4vw 1.4vh; scroll-padding:0 4vw;}
.rail::-webkit-scrollbar{display:none;}
.rail .skel{color:var(--dim); font-size:2vh; padding:2vh 0;}

.tile{flex:0 0 auto; border:none; background:var(--card); border-radius:12px; overflow:hidden; cursor:pointer; padding:0; text-align:center;}
.tile .thumb{width:100%; background:#0c1119; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;}
.tile .thumb img{display:block;}
.tile .fallback{position:absolute; top:0;left:0;right:0;bottom:0; display:none; align-items:center; justify-content:center;
  font-size:4vh; font-weight:800; color:#5a6a84; background:linear-gradient(135deg,#1b2334,#0c1119);}
.tile .cap{padding:.9vh 1vw; font-size:1.85vh; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.tile .num{color:var(--accent2); font-weight:800; margin-right:.4em;}
.tile.focused{transform:scale(1.08); z-index:6; box-shadow:0 0 0 3px var(--focus),0 14px 34px rgba(0,0,0,.6);}

/* live = landscape uniforme */
.rail.live .tile{width:40vw;max-width:248px;}
.rail.live .thumb{aspect-ratio:16/9; border-bottom:1px solid var(--line);}
.rail.live .thumb img{max-width:74%; max-height:70%; object-fit:contain;}

/* poster = vertical (Netflix: solo arte, sin texto salvo fallback) */
.rail.poster .tile{width:30vw;max-width:168px;}
.rail.poster .thumb{aspect-ratio:2/3;}
.rail.poster .thumb img{width:100%; height:100%; object-fit:cover;}
.rail.poster .tile:not(.noimg) .cap{display:none;}
.rail.poster .cap{font-weight:600;}

/* ===== DETALLE ===== */
.view-detail{background:var(--bg); overflow:hidden;}
.detail-bg{position:absolute; top:0; left:0; right:0; height:70vh; background:#0c0c0c center/cover no-repeat;}
.detail-bg::after{content:""; position:absolute; top:0;left:0;right:0;bottom:0;
  background:linear-gradient(0deg,var(--bg) 8%,rgba(11,11,11,.35) 55%,transparent 100%),
             linear-gradient(90deg,rgba(11,11,11,.85),transparent 60%);}
.detail-scroll{padding:14vh 5vw 6vh;}
.detail-head{position:relative; z-index:2; display:flex; gap:3vw; align-items:flex-end;}
.detail-poster{flex:0 0 auto; width:30vw;max-width:220px; aspect-ratio:2/3; border-radius:10px;
  background:#1c1c1c center/cover no-repeat; box-shadow:0 16px 40px rgba(0,0,0,.6); border:1px solid var(--line);}
.detail-poster.empty{background:linear-gradient(135deg,#1b1b1b,#0c0c0c);}
.detail-meta{flex:1; min-width:0;}
.detail-title{font-size:5vh; font-weight:900; line-height:1.05; text-shadow:0 3px 16px rgba(0,0,0,.8);}
.detail-tags{color:var(--dim); font-size:2vh; margin-top:1.2vh; font-weight:600;}
#detail-play{margin-top:2.4vh;}
.detail-plot{color:#dcdcdc; font-size:2.1vh; line-height:1.5; margin-top:2.4vh; max-width:70ch;}
.detail-eps{position:relative; z-index:2; margin-top:4vh;}
.detail-eps-h{font-size:2.6vh; font-weight:800; margin-bottom:1.4vh;}
.eprow{display:flex; align-items:center; gap:2vw; width:100%; text-align:left; cursor:pointer;
  background:var(--card); border:1px solid var(--line); border-radius:10px; padding:1.6vh 2vw; margin-bottom:1.2vh; color:var(--txt);}
.eprow .epnum{color:var(--dim); font-weight:800; font-size:2.4vh; flex:0 0 auto; min-width:1.6em;}
.eprow .epname{flex:1; font-size:2.1vh; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.eprow .epplay{color:var(--accent2); font-size:2.4vh; flex:0 0 auto;}
.eprow.focused{transform:scale(1.02); box-shadow:0 0 0 3px var(--focus); border-color:transparent;}
@media (max-width:760px){
  .detail-scroll{padding:12vh 5vw 6vh;}
  .detail-head{gap:5vw;}
  .detail-poster{width:34vw;}
  .detail-title{font-size:24px;}
  .detail-tags{font-size:13px;}
  .detail-plot{font-size:14px; margin-top:16px;}
  .eprow .epname{font-size:14px;} .eprow .epnum{font-size:16px;}
}

/* ===== PLAYER ===== */
.view-player{background:#000;}
.video{width:100%; height:100%; object-fit:contain; background:#000;}
.player-back{position:absolute; top:2.5vh; left:3vw; z-index:9; background:rgba(0,0,0,.6); color:#fff;
  border:1px solid rgba(255,255,255,.3); border-radius:999px; padding:1.2vh 2.6vw; font-size:2.2vh; font-weight:800;
  cursor:pointer; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);}
.player-back.focused{transform:scale(1.06); box-shadow:0 0 0 3px var(--accent2); border-color:transparent;}
.player-overlay{position:absolute; top:0;left:0;right:0;bottom:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,transparent 22%,transparent 72%,rgba(0,0,0,.75) 100%);
  opacity:0; transition:opacity .25s; display:flex; flex-direction:column; justify-content:space-between; padding:4vh 5vw;}
.player-overlay.show{opacity:1;}
.np{display:flex; align-items:center; gap:2vw;}
.np-logo{width:9vh; height:9vh; border-radius:14px; background:#111 center/contain no-repeat; border:1px solid var(--line); flex:none;}
.np-label{color:var(--accent2); font-size:1.8vh; letter-spacing:.18em; font-weight:800;}
.np-title{font-size:4vh; font-weight:800;}
.np-status{color:var(--dim); font-size:2.2vh;}
.player-hint{align-self:center; color:var(--dim); font-size:2.2vh; background:rgba(0,0,0,.5); padding:1vh 2vw; border-radius:999px;}
.player-loading{position:absolute; top:0;left:0;right:0;bottom:0; display:flex; align-items:center; justify-content:center;}
.spinner{width:8vh; height:8vh; border:.7vh solid rgba(255,255,255,.15); border-top-color:var(--accent); border-radius:50%; animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ===== TOAST ===== */
.toast{position:fixed; bottom:5vh; left:50%; transform:translateX(-50%);
  background:#1b2130; border:1px solid var(--line); color:var(--txt);
  padding:1.6vh 3vw; border-radius:999px; font-size:2.2vh; z-index:99; box-shadow:0 10px 30px rgba(0,0,0,.5);}

/* Canales grid en pantalla del player (overlay lista) */
.chanpanel{position:absolute; top:0; bottom:0; left:0; width:34vw; max-width:520px;
  background:rgba(8,11,18,.92); backdrop-filter:blur(6px); border-right:1px solid var(--line);
  transform:translateX(-102%); transition:transform .25s; overflow:hidden auto; padding:3vh 1.6vw; z-index:8; scrollbar-width:none;}
.chanpanel.show{transform:none;}
.chanpanel::-webkit-scrollbar{display:none;}
.chanpanel h3{font-size:2.6vh; margin-bottom:1.4vh; color:var(--dim);}
.chanrow{display:flex; align-items:center; gap:1vw; padding:1.2vh 1vw; border-radius:12px; cursor:pointer; border:1px solid transparent;}
.chanrow .clogo{width:6vh; height:6vh; border-radius:10px; background:#111 center/contain no-repeat; flex:none; border:1px solid var(--line);}
.chanrow .cname{font-size:2.2vh; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.chanrow.playing{border-color:var(--accent);}

/* ===== MÓVIL / pantallas angostas ===== */
@media (max-width:760px){
  .appbar{gap:2vw; padding:10px 3vw;}
  .appbar-brand{font-size:12px; letter-spacing:0;}
  .tabs{gap:4vw;}
  .tab{padding:6px 2px; font-size:13px;}
  .appbar-right{gap:3vw;}
  .hero{height:38vh; min-height:230px; padding:0 5vw 3vh;}
  .hero-info{max-width:80vw;}
  .hero-title{font-size:26px;}
  .hero-sub{font-size:13px;}
  .hero-btn{font-size:14px; padding:10px 20px;}
  .row-title{font-size:16px; padding:0 5vw 6px;}
  .rail{gap:10px; padding:8px 5vw 12px;}
  .rail.live .tile{width:44vw;}
  .rail.poster .tile{width:30vw;}
  .tile .cap{font-size:12px; padding:7px 8px;}
  .chanpanel{width:82vw; padding:16px;}
  .tile.focused{transform:scale(1.04);}
  .player-back{top:14px; left:14px; padding:9px 18px; font-size:15px;}
}

/* ===== EXTRAS v8: mostrar todo / buscar / favoritos / controles ===== */
.row-head{display:flex; align-items:baseline; justify-content:space-between; padding:0 4vw .6vh; gap:2vw;}
.row-head .row-title{padding:0;}
.showall{background:none; border:none; color:var(--dim); font-size:1.8vh; font-weight:700; cursor:pointer; white-space:nowrap;}
.showall.focused{color:#fff; transform:scale(1.05); text-decoration:underline; text-underline-offset:5px;}

.detail-actions{display:flex; gap:2vw; align-items:center; margin-top:2.4vh;}
#detail-play{margin-top:0;}
#detail-fav .ico,#c-fav.on{color:var(--accent2);}
.hact.on .ico{color:var(--accent2);}

/* Buscar + Mostrar todo (grids) */
.view-search,.view-all{background:var(--bg);}
.search-top{position:fixed; top:0; left:0; right:0; z-index:20; display:flex; align-items:center; gap:2vw;
  padding:2vh 4vw; background:linear-gradient(180deg,rgba(11,11,11,.98),rgba(11,11,11,.6) 80%,transparent);}
.search-input{flex:1; height:6vh; min-height:44px; border-radius:8px; background:#1c1c1c; border:1px solid var(--line);
  color:var(--txt); font-size:2.2vh; padding:0 3vw;}
.search-input.focused{box-shadow:0 0 0 3px var(--focus); border-color:transparent;}
.all-title{font-size:3vh; font-weight:800;}
.grid-all{padding:11vh 4vw 6vh; display:flex; flex-wrap:wrap; gap:2.2vh 1.4vw; align-content:start; min-height:60vh;}
.search-empty{position:fixed; top:16vh; left:0; right:0; text-align:center; color:var(--dim); font-size:2.4vh;}
.gtile{flex:1 1 150px; min-width:130px; max-width:190px; border:none; background:var(--card); border-radius:8px; overflow:hidden; cursor:pointer; padding:0; text-align:center; position:relative;}
.gtile.live{flex:1 1 240px; min-width:190px; max-width:300px;}
.gtile .thumb{width:100%; aspect-ratio:2/3; background:#0c0c0c; display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative;}
.gtile.live .thumb{aspect-ratio:16/9;}
.gtile .thumb img{width:100%; height:100%; object-fit:cover;}
.gtile.live .thumb img{max-width:74%; max-height:70%; object-fit:contain;}
.gtile .fallback{position:absolute; top:0;left:0;right:0;bottom:0; display:none; align-items:center; justify-content:center; font-size:4vh; font-weight:800; color:#5a6a84; background:linear-gradient(135deg,#1b1b1b,#0c0c0c);}
.gtile .cap{padding:.8vh .6vw; font-size:1.7vh; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.gtile.focused{transform:scale(1.06); z-index:6; box-shadow:0 0 0 3px var(--focus);}
@media (max-width:760px){
  .grid-all{padding-top:80px; gap:14px 2.5vw; justify-content:flex-start;}
  .gtile{flex:0 0 31%; min-width:0; max-width:none;}
  .gtile.live{flex:0 0 47%; min-width:0; max-width:none;}
  .all-title{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:18px;}
  .search-input{font-size:15px;}
  .detail-actions{flex-wrap:wrap; gap:16px;}
}

/* ===== CONTROLES REPRODUCTOR (blanco transparentoso) ===== */
.controls{align-self:stretch; display:flex; flex-direction:column; gap:1.4vh; pointer-events:auto;
  background:rgba(255,255,255,.12); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.22); border-radius:16px; padding:2vh 2.4vw; margin:0 auto; width:96%;max-width:1100px;}
.seekwrap{display:flex; align-items:center; gap:1.4vw;}
.seekwrap.hidden{display:none;}
.tcur,.tdur{color:#fff; font-size:1.9vh; font-weight:700; min-width:3.4em; text-align:center; text-shadow:0 1px 4px rgba(0,0,0,.6);}
.seek{flex:1; height:8px; -webkit-appearance:none; appearance:none; border-radius:999px;
  background:rgba(255,255,255,.35); outline:none;}
.seek::-webkit-slider-thumb{-webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--accent2); box-shadow:0 0 0 4px rgba(255,255,255,.4);}
.seek::-moz-range-thumb{width:20px; height:20px; border:none; border-radius:50%; background:var(--accent2);}
.seek.focused{box-shadow:0 0 0 3px var(--focus);}
.ctrl-row{display:flex; align-items:center; gap:1.4vw; flex-wrap:wrap; justify-content:center;}
.cspacer{flex:1;}
.cbtn{background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.25); color:#fff; cursor:pointer;
  width:6.4vh; height:6.4vh; min-width:44px; min-height:44px; border-radius:50%; font-size:2.6vh; display:flex; align-items:center; justify-content:center;}
.cbtn.cbig{width:8vh; height:8vh; font-size:3.4vh; background:rgba(255,255,255,.9); color:#111; border-color:transparent;}
.cbtn.focused{transform:scale(1.12); box-shadow:0 0 0 3px var(--accent2); background:rgba(255,255,255,.3);}
.cbtn.cbig.focused{background:#fff;}
.volbar{width:16vw; max-width:160px; height:6px; -webkit-appearance:none; appearance:none; border-radius:999px; background:rgba(255,255,255,.35);}
.volbar::-webkit-slider-thumb{-webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:#fff;}
.volbar.focused{box-shadow:0 0 0 3px var(--focus);}
@media (max-width:760px){
  .controls{width:96%; padding:12px 14px; gap:10px;}
  .cbtn{width:44px; height:44px; font-size:18px;} .cbtn.cbig{width:56px; height:56px; font-size:24px;}
  .volbar{width:90px;} .tcur,.tdur{font-size:12px; min-width:3em;}
  .ctrl-row{gap:8px;}
}

/* Mi lista dentro de la vista app (flex estático, no absoluto) */
.rows .grid-all.mylist{position:static; top:auto;left:auto;right:auto;bottom:auto; padding:0 4vw 6vh;}
@media (max-width:760px){ .rows .grid-all.mylist{padding-top:0;} }

/* Recomendados en el detalle */
.detail-recs{position:relative; z-index:2; margin-top:3vh;}
.detail-recs .rail{padding-left:0; padding-right:0;}
.detail-recs .tile.rec{width:30vw;max-width:150px;}
@media (max-width:760px){ .detail-recs .tile.rec{width:34vw;} }

/* Íconos premium SVG en controles */
.cbtn svg{width:50%; height:50%; display:block;}
.cbtn.cbig svg{width:46%; height:46%;}
.cbtn.on{color:var(--accent2);}
.player-back{display:flex; align-items:center; gap:.3em;}

/* ===== TV / pantallas grandes: banner más bajo para ver filas + foco fuerte ===== */
@media (min-width:900px){
  .hero{height:58vh; min-height:300px;}
  .hero-title{font-size:5vh;}
}
/* pantallas anchas y bajas (TV 16:9) → banner aún más corto */
@media (min-width:900px) and (max-height:820px){
  .hero{height:52vh;}
}
/* foco nativo del navegador del TV: sin outline feo, usamos nuestro anillo */
.focusable:focus{outline:none;}
.focusable:focus-visible{outline:none;}

/* ===== Compatibilidad navegadores VIEJOS de TV (sin aspect-ratio) ===== */
.rail.poster .tile .thumb,.gtile:not(.live) .thumb,.detail-poster{aspect-ratio:auto; height:0; padding-top:150%; position:relative;}
.rail.live .tile .thumb,.gtile.live .thumb{aspect-ratio:auto; height:0; padding-top:56.25%; position:relative;}
.rail.poster .tile .thumb img,.gtile:not(.live) .thumb img{position:absolute; top:0;left:0;right:0;bottom:0; width:100%; height:100%; object-fit:cover;}
.rail.live .tile .thumb img,.gtile.live .thumb img{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:auto; height:auto; max-width:74%; max-height:70%; object-fit:contain;}
.tile .thumb .fallback,.gtile .thumb .fallback{position:absolute; top:0;left:0;right:0;bottom:0;}

/* ===== Espaciado entre carátulas + que la seleccionada se vea completa (TV) ===== */
.rail{gap:0; padding-top:3.2vh; padding-bottom:3.2vh;}
.rail .tile{margin-right:1.2vw;}
.rail .tile:last-child{margin-right:0;}
.grid-all{gap:0;}
.grid-all .gtile{margin:0 1.4vw 2.4vh 0;}
.detail-recs .rail{padding-top:1.5vh; padding-bottom:1.5vh;}
/* foco un poco más chico para que no lo corte la fila de arriba */
.tile.focused{transform:scale(1.04);}

/* Caratula del detalle CUADRADA (pedido Yeffer 21-ago) */
.detail-poster{padding-top:100%;background-size:cover;background-position:center;}

/* Caratula detalle mas pequena (pedido Yeffer 21-ago) */
.detail-poster{width:26vw;max-width:150px;}

/* Boton Saltar intro (pedido Yeffer 21-ago) */
.skip-intro{position:fixed;right:24px;bottom:104px;z-index:60;background:rgba(18,18,22,.88);color:#fff;border:1px solid rgba(255,255,255,.55);border-radius:8px;padding:12px 22px;font-size:16px;font-weight:600;cursor:pointer;}
.skip-intro[hidden]{display:none;}
.skip-intro:hover,.skip-intro:focus{background:#e50914;border-color:#e50914;outline:none;}

/* Pantalla completa (horizontal) */
#view-player:fullscreen video,#view-player:-webkit-full-screen video{width:100%;height:100%;object-fit:contain;background:#000;}

/* Recargar / Calidad */
.qmenu{position:fixed;right:24px;bottom:120px;z-index:70;background:rgba(12,14,18,.97);border:1px solid rgba(255,255,255,.25);border-radius:10px;padding:6px;min-width:150px;max-height:60vh;overflow-y:auto;display:flex;flex-direction:column;box-shadow:0 10px 40px rgba(0,0,0,.6);}
.qmenu[hidden]{display:none;}
.qmenu .qopt{background:none;border:0;color:#fff;text-align:left;padding:10px 14px;font-size:15px;cursor:pointer;border-radius:6px;white-space:nowrap;}
.qmenu .qopt:hover,.qmenu .qopt:focus,.qmenu .qopt.focused{background:#e50914;outline:none;}

/* Saltar intro: reubicar sobre los controles y mas visible (21-ago) */
.skip-intro{right:4vw;bottom:34vh;z-index:75;box-shadow:0 6px 20px rgba(0,0,0,.5);}
@media (max-width:760px){.skip-intro{bottom:38vh;padding:10px 18px;font-size:15px;}}


/* ===== TV (>=900px): DETALLE COMPACTO (pedido Yeffer 27-ago) ===== */
@media (min-width:900px){
  .detail-bg{height:46vh;}
  .detail-scroll{padding:6vh 6vw 6vh; display:flex; flex-direction:column;}
  .detail-head{align-items:flex-start; gap:3vw;}
  .detail-poster{width:24vh; max-width:none; height:34vh; padding-top:0; background-size:cover; background-position:center;}
  .detail-meta{align-self:stretch;}
  .detail-title{font-size:4.4vh;}
  .detail-plot{font-size:2vh; max-height:16vh; overflow:hidden;}
  .detail-eps,.detail-recs{margin-top:2.4vh;}
}