:root{--bg:#090911;--panel:#141421;--panel2:#1c1a2b;--text:#faf9ff;--muted:#9b98b1;--purple:#9d67ff;--border:#29243c;--focus:#cfacff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.shell{display:flex;min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;width:232px;flex:0 0 232px;padding:30px 17px 24px;background:#10101a;border-right:1px solid #252338;display:flex;flex-direction:column;gap:44px;z-index:2}.brand{display:flex;align-items:center;gap:7px;font-size:18px;font-weight:850;letter-spacing:-.7px;white-space:nowrap}.brand img{height:35px;width:35px;object-fit:contain}.brand-light{color:#b58bff}.navigation{display:grid;gap:7px}.nav-btn{border:0;background:transparent;text-align:left;color:#b5b2c5;padding:14px 16px;border-radius:12px;font-weight:640;display:flex;align-items:center;gap:13px;width:100%;font-size:14px}.nav-btn:hover,.nav-btn:focus-visible{background:#242035;color:white}.nav-btn.active{background:#302047;color:#e7d7ff;box-shadow:inset 3px 0 0 #9e6afc}.glyph{font-size:23px;line-height:.7;width:20px;text-align:center}.sidebar-bottom{margin-top:auto;display:grid;gap:14px}.phase{font-size:10px;letter-spacing:1px;color:#746c8c;padding-left:16px}.main{min-width:0;flex:1}.top{height:98px;padding:23px 40px;display:flex;align-items:center;justify-content:space-between;gap:24px}.search-box{height:45px;border:1px solid #29283b;background:#1a1928;border-radius:12px;display:flex;align-items:center;gap:11px;padding:0 14px;max-width:410px;flex:1;color:#c6c3db}.search-box span{font-size:28px}.search-box input{border:0;background:none;color:white;outline:none!important;width:100%;font-size:14px}.search-box input::placeholder{color:#77768e}.top-right{display:flex;gap:23px;align-items:center}.connection{color:#9a90b6;font-size:12px}.connection:first-letter{color:#9b63ff}.profile-btn{background:transparent;border:0;display:flex;align-items:center;gap:11px;color:white;font-size:13px}.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;height:37px;width:37px;background:linear-gradient(135deg,#5e38aa,#c074e0);font-weight:800}.tiny{color:#a4a0b9}.content-wrap{padding:8px 40px 44px}.hero{min-height:345px;border-radius:22px;overflow:hidden;position:relative;background:radial-gradient(ellipse at 81% 43%,#9c5fc667 0,transparent 28%),radial-gradient(ellipse at 73% 82%,#373a9c88 0,transparent 42%),linear-gradient(112deg,#1a1729 2%,#2a1640 55%,#151526);border:1px solid #49305d;display:flex;align-items:center;padding:48px 5%}.hero:after{content:"";position:absolute;right:9%;top:12%;width:26%;height:80%;border-radius:49% 49% 19% 17%;transform:rotate(-13deg);background:linear-gradient(140deg,#bd81f733,#060510dd),radial-gradient(circle at 50% 27%,#c9a3ff 0%,transparent 34%);filter:drop-shadow(0 4px 48px #bb79f088);pointer-events:none}.hero-copy{position:relative;z-index:1;max-width:610px}.eyebrow{color:#d4b4ff;font-size:11px;font-weight:800;letter-spacing:2.1px;text-transform:uppercase}.hero h1{font-weight:850;font-size:clamp(38px,4vw,62px);line-height:1.06;margin:15px 0;letter-spacing:-2.2px}.hero p{color:#d0c9e0;line-height:1.6;font-size:15px;max-width:560px}.hero-actions{display:flex;gap:12px;margin-top:24px}.primary,.secondary{padding:12px 21px;border-radius:10px;border:1px solid transparent;font-weight:780}.primary{background:#a36eff;color:#120e1c}.primary:hover{background:#bd93ff}.secondary{background:#ffffff1c;color:white;border-color:#ffffff32}.secondary:hover{background:#ffffff33}.section-head{display:flex;justify-content:space-between;align-items:center;margin:33px 0 15px}.section-head h2{font-size:21px;margin:0;letter-spacing:-.5px}.section-head span{color:#9892aa;font-size:12px}.rail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:15px}.tile{position:relative;padding:0;text-align:left;background:#151423;border:1px solid #2d2a3f;color:white;border-radius:13px;overflow:hidden;min-width:0;transition:transform .15s,border-color .15s}.tile:hover,.tile:focus-visible{border-color:#bb87ff;transform:translateY(-4px)}.art{height:160px;display:flex;justify-content:center;align-items:center;padding:12px;background:linear-gradient(135deg,var(--c1),var(--c2));position:relative;overflow:hidden}.art:before{content:"";position:absolute;border:1px solid #ffffff36;width:120px;height:120px;transform:rotate(28deg);border-radius:25px}.art:after{content:"";position:absolute;width:170px;height:170px;background:radial-gradient(circle,#ffffff32 0%,transparent 62%);right:-55px;top:-50px}.art-label{z-index:1;font-size:clamp(14px,1.5vw,25px);font-weight:900;text-transform:uppercase;text-align:center;line-height:1.05;letter-spacing:-.6px;text-shadow:0 4px 17px #0009}.tile-details{padding:13px}.tile-details strong{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tile-details small{display:block;color:#9d98b0;margin-top:5px;font-size:11px}.chip{position:absolute;top:10px;left:10px;z-index:1;background:#171322d9;border:1px solid #ffffff39;padding:5px 8px;font-size:9px;border-radius:5px;font-weight:800}.page-head{padding:26px 0 9px}.page-head h1{font-size:35px;letter-spacing:-1.2px;margin:0 0 8px}.page-head p,.empty{color:var(--muted);line-height:1.6}.filters{display:flex;gap:9px;margin:14px 0 24px;flex-wrap:wrap}.filter{border:1px solid #332d48;background:#171622;color:#c7c0d8;border-radius:10px;padding:10px 16px}.filter.active{background:#35224e;color:white;border-color:#9c68ed}.grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}.footer{color:#666077;font-size:11px;text-align:center;padding:20px}.overlay{position:fixed;inset:0;background:#05040bcf;z-index:9;display:flex;justify-content:center;align-items:center;padding:20px;backdrop-filter:blur(8px)}.overlay.hidden{display:none}.dialog{position:relative;background:#191626;border:1px solid #4a376a;padding:37px;max-width:620px;width:100%;border-radius:20px;box-shadow:0 26px 90px #000a}.dialog h2{font-size:29px;margin:9px 0}.dialog p{line-height:1.65;color:#bdb5d0}.close{position:absolute;right:18px;top:12px;background:none;border:0;color:white;font-size:30px}.dialog-opts{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.detail-meta{color:#ccabff;font-size:12px}.pill{border:1px solid #655184;color:#e2d1f7;border-radius:999px;padding:5px 10px;font-size:11px;display:inline-block;margin-right:6px}.help{margin-top:18px;font-size:12px;color:#9388ac}.empty-box{padding:45px;background:#161421;border-radius:14px;border:1px solid #302b40;margin-top:18px}.kbd{font-family:monospace;border:1px solid #4b405b;border-radius:4px;padding:2px 6px;color:#c9bde1}@media(max-width:1080px){.rail,.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.connection{display:none}.sidebar{width:205px;flex-basis:205px}.top{padding-left:25px;padding-right:25px}.content-wrap{padding-left:25px;padding-right:25px}}@media(max-width:700px){.shell{display:block;padding-bottom:77px}.sidebar{position:fixed;height:70px;bottom:0;top:auto;width:100%;padding:5px 8px;background:#12101e;border-right:0;border-top:1px solid #352741;display:block;z-index:5}.brand,.sidebar-bottom{display:none}.navigation{display:flex;justify-content:space-around;gap:0;height:100%}.nav-btn{font-size:10px;display:flex;flex-direction:column;justify-content:center;gap:8px;text-align:center;padding:6px 2px;width:auto;flex:1}.nav-btn.active{box-shadow:inset 0 -3px 0 #9e6afc}.glyph{font-size:20px}.top{padding:14px 16px;height:72px}.top-right .profile-btn>span:not(.avatar){display:none}.search-box{max-width:none}.content-wrap{padding:6px 16px 20px}.hero{min-height:310px;padding:24px}.hero:after{right:-10%;opacity:.55}.hero h1{font-size:36px}.hero p{font-size:13px}.rail,.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.art{height:150px}.section-head h2{font-size:18px}.footer{font-size:10px;padding:10px 12px}.page-head h1{font-size:28px}}

/* Fase 1.1: navegación superior compartida TV, web y móvil */
.shell{display:block;min-height:100vh;padding-bottom:0}
.main{width:100%;min-width:0}
.top{position:sticky;top:0;z-index:6;height:84px;padding:12px clamp(18px,3.5vw,60px);background:#0f0e19ee;border-bottom:1px solid #322944;backdrop-filter:blur(18px);display:flex;align-items:center;gap:clamp(15px,2.5vw,40px);justify-content:space-between}
.brand{flex-shrink:0;font-size:19px}.brand img{height:39px;width:39px}
.navigation{display:flex;gap:5px;align-items:center;flex:1;justify-content:center}
.nav-btn{width:auto;white-space:nowrap;text-align:center;padding:13px clamp(9px,1.4vw,20px);border-radius:9px;font-size:14px;justify-content:center;display:inline-flex}
.nav-btn.active{background:#38254e;box-shadow:inset 0 -3px 0 #b38aff;color:#f4e7ff}
.top-tools{display:flex;align-items:center;gap:12px;flex-shrink:0}
.search-box{height:40px;width:clamp(155px,19vw,280px);flex:none}
.icon-btn{height:42px;width:42px;background:#1b192a;border:1px solid #36304a;border-radius:11px;color:#e5d9f8;font-size:22px}
.icon-btn:hover{background:#342447}.profile-btn{gap:8px}.profile-text{white-space:nowrap}
.content-wrap{padding:24px clamp(18px,3.5vw,60px) 44px;max-width:1920px;margin:auto}
@media(max-width:1200px){.top{gap:14px}.brand{font-size:16px}.profile-text{display:none}.search-box{width:185px}.navigation{gap:0}.nav-btn{padding:12px 10px}.rail,.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:850px){.top{height:auto;min-height:104px;flex-wrap:wrap;padding:10px 16px;gap:8px}.brand{order:0}.top-tools{order:1;margin-left:auto}.navigation{order:2;flex-basis:100%;justify-content:space-between}.nav-btn{flex:1;padding:10px 6px}.search-box{width:180px}.rail,.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.shell{padding-bottom:0}.top{position:sticky;top:0;padding:9px 12px 8px;gap:9px}.brand{font-size:16px}.brand img{height:30px;width:30px}.top-tools{gap:6px}.search-box{width:38px;height:38px;padding:0 9px;transition:width .2s}.search-box:focus-within{width:min(47vw,195px)}.search-box input{font-size:12px}.search-box:not(:focus-within) input{width:0;opacity:0}.search-box span{font-size:22px}.icon-btn{width:36px;height:36px;font-size:19px}.avatar{width:34px;height:34px}.nav-btn{font-size:12px;flex-direction:row;gap:0;padding:10px 3px}.nav-btn.active{box-shadow:inset 0 -3px 0 #b38aff}.content-wrap{padding:10px 14px 26px}.rail,.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{min-height:300px}.footer{padding:16px}}

/* Fase 3: carátulas de metadatos importados */
.poster-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.art:has(.poster-img):before,.art:has(.poster-img):after{display:none}.art:has(.poster-img) .chip{background:#100d1fe8}
.hdf-login{display:grid;gap:12px;margin:16px 0}.hdf-login input{min-width:0;width:100%;padding:12px;background:#1f2030;border:1px solid #5b5972;border-radius:9px;color:white;font:inherit}.connection-state{color:#b8b2ce;font-size:.9rem;margin-top:12px}

/* Fase 5: acceso al abrir la web */
[hidden], .hidden{display:none!important}
.login-gate{position:fixed;inset:0;z-index:20;background:radial-gradient(ellipse at 50% 0%,#35204c,#0a0912 70%);display:flex;align-items:center;justify-content:center;overflow:auto;padding:24px}
.login-card{width:min(100%,445px);border-radius:23px;padding:clamp(24px,5vw,42px);background:#171422;border:1px solid #49325f;box-shadow:0 24px 90px #0008}
.login-logo{display:block;width:70px;height:70px;object-fit:contain;margin-bottom:18px}
.login-card h1{font-size:clamp(26px,3vw,34px);letter-spacing:-1px;line-height:1.12;margin:9px 0 12px}
.login-card p{color:#bfb4d0;line-height:1.5;font-size:14px}
.login-card label{font-size:13px;font-weight:650;color:#e9e2f2}
.login-card .hdf-login{gap:10px;margin:23px 0 17px}
.login-card .hdf-login input{margin-bottom:5px}
.login-card .hdf-login button{margin-top:6px}
.login-card .connection-state{min-height:1.5em}
.login-card #retryCatalog{width:100%;margin:8px 0}

/* Fase 6: tarjetas más compactas, retratos sin deformar y portada de título real */
.rail{grid-template-columns:repeat(6,minmax(0,1fr))}.grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.art{height:auto;aspect-ratio:16/10}.tile-details{padding:11px 12px}.tile-details small{line-height:1.4;min-height:15px}
.hero-feature{min-height:270px;padding:32px 4%}.hero-feature h1{font-size:clamp(30px,3.4vw,52px)}.hero-feature .hero-copy{max-width:65%}.hero-feature:after{display:none}.hero-art{position:absolute;right:0;top:0;width:40%;height:100%;object-fit:cover;object-position:center 30%;mask-image:linear-gradient(to right,transparent,#000 40%);opacity:.8}
@media(max-width:1200px){.rail,.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:850px){.rail,.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.rail,.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-feature .hero-copy{max-width:100%}.hero-art{opacity:.15;width:100%;mask-image:linear-gradient(to right,transparent,#000)}.hero-feature{min-height:245px}.hero-feature h1{font-size:31px}}

/* Fase 12 — fichas, temporadas y episodios (TV-first). */
.dialog{max-width:850px;max-height:min(90vh,850px);overflow-y:auto;overscroll-behavior:contain}
.detail-status{background:#211b30;border:1px solid #423555;border-radius:14px;padding:14px;margin:18px 0}
.detail-synopsis{max-width:70ch}
.selected-state{border-color:#ad83ff;background:#3c275d;color:#fff}
.season-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-top:12px}
.season-button{text-align:left;min-height:54px}
.episode-list{display:grid;gap:11px;margin-top:15px}
.episode-row{border:1px solid #373044;background:#211d2c;border-radius:13px;padding:12px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.episode-main{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.episode-image{width:112px;aspect-ratio:16/9;object-fit:cover;border-radius:8px;flex-shrink:0}
.episode-info{min-width:0;display:grid;gap:7px}
.episode-title{background:none;border:0;padding:0;color:#fff;font-size:14px;font-weight:700;text-align:left;line-height:1.4}
.episode-title:hover{text-decoration:underline}
.episode-state{color:#aaa4bd;font-size:12px}.episode-state.seen{color:#a9e3bc}
.episode-actions{display:grid;justify-items:end;gap:5px}.episode-toggle{min-width:142px;padding:10px 12px}
.episode-error{color:#ffb7ba;font-size:12px;max-width:250px}
@media(max-width:620px){.dialog{padding:24px 18px}.episode-row{align-items:stretch;flex-direction:column}.episode-actions{justify-items:stretch}.episode-toggle{width:100%}.episode-image{width:90px}}

/* Fase 13: reproducción sin dependencias externas ni scripts de proveedores. */
.playback-section{margin:18px 0;padding:15px;border:1px solid #493b60;border-radius:13px;background:#1e1a2a}
.playback-options{display:flex;flex-wrap:wrap;gap:9px;margin:12px 0}
.playback-option{min-height:46px}
#playbackResult video{width:100%;max-height:55vh;background:#050407;border-radius:10px;margin-top:12px}