/* LumyTV 2026 — visual evolution layer
   Structural visual overrides only. Existing API/HTML contracts remain intact. */
:root{
  --lumy-bg:#04060a;
  --lumy-surface:rgba(13,17,24,.82);
  --lumy-surface-2:rgba(18,23,32,.9);
  --lumy-line:rgba(255,255,255,.085);
  --lumy-text:#f7f9fc;
  --lumy-muted:#8f99a9;
  --lumy-cyan:#50e7ff;
  --lumy-blue:#4e7cff;
  --lumy-violet:#906bff;
  --lumy-accent:linear-gradient(135deg,#50e7ff 0%,#4e7cff 52%,#906bff 100%);
  --lumy-shadow:0 24px 80px rgba(0,0,0,.44);
}

html,body{background-color:var(--lumy-bg)!important;color:var(--lumy-text)!important}
body{position:relative;isolation:isolate}
body::before{content:"";position:fixed;inset:0;z-index:-4;pointer-events:none;background:
  radial-gradient(70vw 42vw at 50% -10%,rgba(78,124,255,.15),transparent 65%),
  radial-gradient(45vw 35vw at 100% 25%,rgba(144,107,255,.08),transparent 68%),
  radial-gradient(45vw 35vw at 0% 80%,rgba(80,231,255,.055),transparent 68%),#04060a}
body::after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}

.lumy-ambient{position:fixed;inset:-12%;z-index:-3;pointer-events:none;opacity:0;filter:blur(70px) saturate(125%);transform:scale(1.08);background-image:var(--lumy-backdrop);background-size:cover;background-position:center;transition:opacity .9s ease,background-image .9s ease;mix-blend-mode:screen}
.lumy-ambient.is-visible{opacity:.16}
.lumy-page-enter{animation:lumyPageIn .55s cubic-bezier(.2,.75,.25,1) both}
@keyframes lumyPageIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* Brand */
.brand-logo{font-weight:850!important;letter-spacing:-1.1px!important}
.brand-logo::before{width:34px!important;height:34px!important;filter:drop-shadow(0 8px 20px rgba(80,231,255,.16))!important}
.brand-logo .play-text{background:var(--lumy-accent)!important;-webkit-background-clip:text!important;background-clip:text!important}

/* Global surfaces */
.main-header,.profile-header,.search-header{background:rgba(4,6,10,.68)!important;border-color:rgba(255,255,255,.065)!important;backdrop-filter:blur(26px) saturate(140%)!important;-webkit-backdrop-filter:blur(26px) saturate(140%)!important}
.icon-btn,.btn-icon,.btn-back{border-color:rgba(255,255,255,.1)!important;background:rgba(255,255,255,.045)!important;box-shadow:0 10px 30px rgba(0,0,0,.18)!important}
.icon-btn:hover,.btn-icon:hover,.btn-back:hover{border-color:rgba(80,231,255,.28)!important;background:rgba(80,231,255,.075)!important}

/* Home — cinematic dashboard */
body[data-lumy-page="home"] .app-container{max-width:1280px!important}
body[data-lumy-page="home"] .greeting{margin-top:22px!important;margin-bottom:20px!important}
body[data-lumy-page="home"] .greeting h1{font-weight:800!important}
body[data-lumy-page="home"] .greeting p{font-size:14px!important}
.lumy-home-intro{display:flex;align-items:center;gap:9px;margin:4px 0 12px;color:#8e9aaa;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.lumy-home-intro .lumy-live-dot{width:6px;height:6px;border-radius:50%;background:var(--lumy-cyan);box-shadow:0 0 14px rgba(80,231,255,.65)}

body[data-lumy-page="home"] .hero-slider{min-height:390px!important;aspect-ratio:auto!important;border-radius:30px!important;border:1px solid rgba(255,255,255,.09)!important;box-shadow:0 30px 90px rgba(0,0,0,.5)!important;overflow:hidden!important}
body[data-lumy-page="home"] .hero-slide{min-height:390px!important}
body[data-lumy-page="home"] .hero-bg{transform:scale(1.015);transition:transform 8s cubic-bezier(.2,.6,.2,1),filter .8s ease!important}
body[data-lumy-page="home"] .hero-slide.active .hero-bg{transform:scale(1.06)}
body[data-lumy-page="home"] .hero-content{padding:28px!important;max-width:720px!important}
body[data-lumy-page="home"] .hero-title{font-weight:850!important;text-wrap:balance!important}
body[data-lumy-page="home"] .hero-content::after{content:"EXPLORA · REPRODUCE · DISFRUTA";display:block;margin-top:18px;font-size:9px;letter-spacing:.18em;color:rgba(255,255,255,.52);font-weight:800}
body[data-lumy-page="home"] .hero-badge{box-shadow:inset 0 1px 0 rgba(255,255,255,.1)!important}

.categories,.filter-row,.filter-buttons{scrollbar-width:none!important}
.categories::-webkit-scrollbar,.filter-row::-webkit-scrollbar,.filter-buttons::-webkit-scrollbar{display:none!important}
.chip,.filter-chip,.filter-btn{min-height:40px!important;border-radius:999px!important;font-weight:750!important}
.chip.active,.filter-chip.active,.filter-btn.active{background:var(--lumy-accent)!important;box-shadow:0 12px 32px rgba(78,124,255,.2)!important}

.section-header{position:relative!important}
.section-title{font-weight:800!important;letter-spacing:-.5px!important}
.section-title::first-letter{color:var(--lumy-cyan)}
.section-link{font-weight:750!important}
.section-divider{height:1px!important;background:linear-gradient(90deg,rgba(255,255,255,.08),transparent)!important;margin:30px 0!important}
.trending-grid{gap:14px!important}
.content-card{position:relative!important;border-radius:20px!important;background:linear-gradient(180deg,rgba(17,22,30,.9),rgba(9,12,17,.96))!important;border:1px solid rgba(255,255,255,.07)!important;box-shadow:0 18px 45px rgba(0,0,0,.28)!important;transform:translateZ(0);will-change:transform}
.content-card::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.055),transparent 34%,transparent 70%,rgba(80,231,255,.035));opacity:.8}
.content-card:hover{transform:translateY(-5px) scale(1.012)!important;border-color:rgba(80,231,255,.24)!important;box-shadow:0 24px 60px rgba(0,0,0,.4)!important}
.card-poster{aspect-ratio:2/3!important}
.card-rating-badge{border-radius:999px!important}

.continue-card{background:linear-gradient(135deg,rgba(20,26,36,.94),rgba(10,14,20,.94))!important;box-shadow:0 18px 44px rgba(0,0,0,.26)!important}
.continue-card:hover{border-color:rgba(80,231,255,.24)!important;transform:translateY(-3px)}

/* Detail — Lumy Cinema */
body[data-lumy-page="detail"]{background:#030508!important}
body[data-lumy-page="detail"] .hero-poster{height:min(68vh,620px)!important;min-height:420px!important;border-radius:0 0 34px 34px!important;margin-top:0!important;box-shadow:0 35px 100px rgba(0,0,0,.55)!important}
body[data-lumy-page="detail"] .poster-bg{background-position:center!important;filter:saturate(1.08)!important}
body[data-lumy-page="detail"] .poster-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,5,8,.3),transparent 35%,rgba(3,5,8,.2) 52%,#030508 100%)!important}
body[data-lumy-page="detail"] .detail-content{padding-bottom:100px!important}
body[data-lumy-page="detail"] .movie-title{font-size:clamp(30px,6vw,64px)!important;font-weight:850!important;letter-spacing:-2.2px!important;text-wrap:balance}
body[data-lumy-page="detail"] .movie-subtitle{color:#b0bac9!important}
body[data-lumy-page="detail"] .action-buttons{gap:12px!important}
body[data-lumy-page="detail"] .btn-watch{background:var(--lumy-accent)!important;box-shadow:0 16px 42px rgba(78,124,255,.26)!important;min-height:50px!important}
body[data-lumy-page="detail"] .btn-circle{background:rgba(255,255,255,.055)!important;border-color:rgba(255,255,255,.12)!important}
body[data-lumy-page="detail"] .cast-card,.episode-card,.related-card{transition:transform .25s ease,border-color .25s ease,background .25s ease!important}
body[data-lumy-page="detail"] .cast-card:hover,.episode-card:hover,.related-card:hover{transform:translateY(-3px)!important}
body[data-lumy-page="detail"] .episode-card,.related-card,.review-card{background:rgba(13,17,24,.78)!important;border:1px solid rgba(255,255,255,.075)!important;border-radius:18px!important;overflow:hidden}

/* Search */
body[data-lumy-page="search"] .app-container{max-width:1180px!important}
body[data-lumy-page="search"] .search-header{padding-top:max(12px,env(safe-area-inset-top))!important}
body[data-lumy-page="search"] .search-input,.search-input-wrapper .search-input{height:56px!important;background:rgba(255,255,255,.055)!important;border-color:rgba(255,255,255,.1)!important}
body[data-lumy-page="search"] .results-header{padding-top:18px!important}
.result-card{background:linear-gradient(180deg,rgba(16,21,29,.92),rgba(8,11,16,.98))!important;border:1px solid rgba(255,255,255,.075)!important;border-radius:18px!important;overflow:hidden!important;box-shadow:0 15px 38px rgba(0,0,0,.24)!important;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease!important}
.result-card:hover{transform:translateY(-4px)!important;border-color:rgba(80,231,255,.25)!important;box-shadow:0 22px 52px rgba(0,0,0,.38)!important}

/* Live TV */
body[data-lumy-page="tv"] .app-container,body[data-lumy-page="iptv"] .app-container{max-width:1180px!important}
body[data-lumy-page="tv"] .channel-list,body[data-lumy-page="iptv"] .channel-list{gap:12px!important}
.channel-card,.channel-item{background:linear-gradient(135deg,rgba(16,22,30,.92),rgba(8,12,17,.96))!important;border:1px solid rgba(255,255,255,.075)!important;border-radius:18px!important;box-shadow:0 16px 38px rgba(0,0,0,.24)!important;transition:transform .25s ease,border-color .25s ease!important}
.channel-card:hover,.channel-item:hover{transform:translateY(-3px)!important;border-color:rgba(80,231,255,.24)!important}
.stats-bar{background:rgba(255,255,255,.035)!important;border-color:rgba(255,255,255,.07)!important;border-radius:18px!important}

/* Profile / social */
body[data-lumy-page="profile"] .profile-card,body[data-lumy-page="public-profile"] .profile-card{background:linear-gradient(145deg,rgba(19,25,34,.9),rgba(8,12,17,.96))!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:28px!important;box-shadow:var(--lumy-shadow)!important}
.stat-card,.user-card,.feed-card,.notification-card,.message-card,.request-card{background:rgba(13,17,24,.82)!important;border:1px solid rgba(255,255,255,.075)!important;border-radius:18px!important;box-shadow:0 14px 36px rgba(0,0,0,.2)!important}
.stat-card:hover,.user-card:hover,.feed-card:hover{border-color:rgba(80,231,255,.2)!important;transform:translateY(-2px)}

/* Chat / messaging */
.chat-container,.messages-container,.chat-list{background:transparent!important}
.message-bubble,.chat-bubble{border:1px solid rgba(255,255,255,.07)!important;box-shadow:0 10px 28px rgba(0,0,0,.2)!important}
.message-bubble.sent,.chat-bubble.sent{background:linear-gradient(135deg,#4e7cff,#745eff)!important}
.message-input,.chat-input,.reply-input{background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:16px!important}

/* Auth */
body[data-lumy-page="login"] .login-card,body[data-lumy-page="register"] .card{background:linear-gradient(145deg,rgba(17,22,30,.94),rgba(7,10,15,.98))!important;border:1px solid rgba(255,255,255,.09)!important;box-shadow:0 30px 90px rgba(0,0,0,.48)!important;border-radius:28px!important}
body[data-lumy-page="login"] .btn-primary,body[data-lumy-page="register"] .btn-primary{background:var(--lumy-accent)!important;box-shadow:0 16px 40px rgba(78,124,255,.24)!important}
.input-field{background:rgba(255,255,255,.045)!important;border-color:rgba(255,255,255,.09)!important;border-radius:15px!important}
.input-field:focus{border-color:rgba(80,231,255,.42)!important;box-shadow:0 0 0 4px rgba(80,231,255,.08)!important}

/* Player */
body[data-lumy-page="player"] .player-container{background:#000!important}
body[data-lumy-page="player"] .controls-overlay{background:linear-gradient(180deg,rgba(0,0,0,.68),transparent 25%,transparent 64%,rgba(0,0,0,.82))!important}
body[data-lumy-page="player"] .btn-control{background:rgba(8,11,16,.55)!important;border:1px solid rgba(255,255,255,.1)!important;backdrop-filter:blur(18px)!important}
body[data-lumy-page="player"] .title-badge{background:rgba(8,11,16,.58)!important;border:1px solid rgba(255,255,255,.09)!important;backdrop-filter:blur(18px)!important}
body[data-lumy-page="player"] .center-play{background:var(--lumy-accent)!important;box-shadow:0 18px 55px rgba(78,124,255,.28)!important}
body[data-lumy-page="player"] .btn-play-pause{box-shadow:0 12px 30px rgba(0,0,0,.38)!important}

/* Navigation */
.lumiplay-nav{background:rgba(7,10,15,.82)!important;border:1px solid rgba(255,255,255,.09)!important;box-shadow:0 22px 70px rgba(0,0,0,.5)!important;backdrop-filter:blur(26px) saturate(140%)!important;-webkit-backdrop-filter:blur(26px) saturate(140%)!important}
.lumiplay-nav-item{min-height:52px!important;border-radius:15px!important;transition:transform .2s ease,background .2s ease,color .2s ease!important}
.lumiplay-nav-item.active{background:linear-gradient(135deg,rgba(80,231,255,.12),rgba(78,124,255,.16),rgba(144,107,255,.13))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;color:#fff!important}
.lumiplay-nav-item:active{transform:scale(.94)!important}

/* Empty/loading states */
.skeleton-card,.loading-container,.initial-loader,.loading-state{background:transparent!important}
.skeleton-card{border-radius:18px!important;background:linear-gradient(110deg,#0d1118 8%,#171d27 18%,#0d1118 33%)!important;background-size:200% 100%!important;animation:lumyShimmer 1.35s linear infinite!important}
@keyframes lumyShimmer{to{background-position:-200% 0}}

@media(min-width:700px){
  body[data-lumy-page="home"] .hero-slider,body[data-lumy-page="home"] .hero-slide{min-height:500px!important}
  body[data-lumy-page="home"] .hero-content{padding:44px!important}
  .lumy-home-intro{margin-top:10px}
}
@media(min-width:1050px){
  body[data-lumy-page="home"] .hero-slider,body[data-lumy-page="home"] .hero-slide{min-height:560px!important}
  body[data-lumy-page="detail"] .hero-poster{height:650px!important}
}
@media(prefers-reduced-motion:reduce){
  .lumy-ambient,.lumy-page-enter,.skeleton-card{animation:none!important;transition:none!important}
  .content-card,.result-card,.channel-card,.channel-item,.stat-card,.user-card,.feed-card{transition:none!important}
}

/* Secondary product areas — same design language, different purpose */
body[data-lumy-page="trivia"] .pregunta-card,
body[data-lumy-page="trivia"] .ranking-card,
body[data-lumy-page="trivia"] .game-header,
body[data-lumy-page="trivia"] .gameover-card,
body[data-lumy-page="party"] .party-card,
body[data-lumy-page="party"] .room-header,
body[data-lumy-page="party"] .chat-area,
body[data-lumy-page="list"] .list-card,
body[data-lumy-page="notifications"] .notif-card,
body[data-lumy-page="requests"] .result-card{
  background:linear-gradient(145deg,rgba(16,21,29,.92),rgba(7,10,15,.97))!important;
  border:1px solid rgba(255,255,255,.075)!important;
  border-radius:20px!important;
  box-shadow:0 18px 46px rgba(0,0,0,.24)!important;
}
body[data-lumy-page="trivia"] .opcion-btn{background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:15px!important}
body[data-lumy-page="trivia"] .opcion-btn:hover{border-color:rgba(80,231,255,.28)!important;background:rgba(80,231,255,.055)!important}
body[data-lumy-page="trivia"] .timer-bar{background:rgba(255,255,255,.08)!important;border-radius:99px!important;overflow:hidden}
body[data-lumy-page="trivia"] .timer-fill{background:var(--lumy-accent)!important}
body[data-lumy-page="party"] .chat-messages{background:rgba(0,0,0,.16)!important;border-radius:18px!important}
body[data-lumy-page="party"] .chat-msg{background:rgba(255,255,255,.035)!important;border:1px solid rgba(255,255,255,.055)!important;border-radius:16px!important}
body[data-lumy-page="party"] .btn-primary,body[data-lumy-page="party"] .btn-create,body[data-lumy-page="party"] .btn-start-party{background:var(--lumy-accent)!important;box-shadow:0 14px 36px rgba(78,124,255,.2)!important}
body[data-lumy-page="list"] .list-grid{gap:14px!important}
body[data-lumy-page="list"] .tab-btn.active,body[data-lumy-page="list"] .sort-chip.active{background:var(--lumy-accent)!important;border-color:transparent!important}
body[data-lumy-page="notifications"] .notif-list{gap:10px!important}
body[data-lumy-page="notifications"] .notif-card{transition:transform .2s ease,border-color .2s ease!important}
body[data-lumy-page="notifications"] .notif-card:hover{transform:translateY(-2px)!important;border-color:rgba(80,231,255,.2)!important}
body[data-lumy-page="chat"] .chat-header,body[data-lumy-page="messages"] .page-header{background:rgba(4,6,10,.72)!important;border-color:rgba(255,255,255,.07)!important;backdrop-filter:blur(24px)!important}
body[data-lumy-page="chat"] .messages-container,body[data-lumy-page="chat"] .chat-input-bar,body[data-lumy-page="messages"] .chat-list{background:transparent!important}
body[data-lumy-page="chat"] .message,.msg-bubble{box-shadow:0 10px 28px rgba(0,0,0,.2)!important;border:1px solid rgba(255,255,255,.065)!important}
body[data-lumy-page="chat"] .message.sent,body[data-lumy-page="chat-global"] .msg-wrapper.mine .msg-bubble{background:linear-gradient(135deg,#4e7cff,#755eff)!important}
body[data-lumy-page="messages"] .chat-item{background:rgba(13,17,24,.78)!important;border:1px solid rgba(255,255,255,.065)!important;border-radius:18px!important;transition:transform .2s ease,border-color .2s ease!important}
body[data-lumy-page="messages"] .chat-item:hover{transform:translateY(-2px)!important;border-color:rgba(80,231,255,.2)!important}
body[data-lumy-page="requests"] .search-box{background:rgba(255,255,255,.045)!important;border-color:rgba(255,255,255,.09)!important;border-radius:17px!important}
body[data-lumy-page="requests"] .tabs .tab.active{background:var(--lumy-accent)!important;border-color:transparent!important}
body[data-lumy-page="requests"] .fab-request{background:var(--lumy-accent)!important;box-shadow:0 18px 42px rgba(78,124,255,.28)!important}
body[data-lumy-page="upload"] .container{background:linear-gradient(145deg,rgba(16,21,29,.92),rgba(7,10,15,.97))!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:24px!important;box-shadow:var(--lumy-shadow)!important}

/* ========================================================================
   LUMYTV 2026 — FULL WIDTH / NO CLIPPING FIX
   Objetivo: aprovechar todo el ancho disponible sin estirar ni recortar UI.
   Los componentes que necesitan una anchura legible (formularios/texto)
   pueden conservar sus límites propios; los shells de página NO.
   ======================================================================== */
html,body{
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0!important;
  padding:0;
  overflow-x:clip;
}

*,*::before,*::after{box-sizing:border-box!important}

img,svg,video,canvas,iframe{max-width:100%;}

/* Shell principal: nunca limitar a 500/1180/1280px en pantallas grandes. */
.app-container,
body[data-lumy-page] .app-container{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin-left:0!important;
  margin-right:0!important;
  padding-left:clamp(14px,2.2vw,34px)!important;
  padding-right:clamp(14px,2.2vw,34px)!important;
}

/* Headers y barras superiores ocupan todo el ancho de su shell. */
.main-header,
.profile-header,
.search-header,
.page-header,
.chat-header{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
}

/* Evita que un hijo largo obligue a recortar el header. */
.main-header > *,
.profile-header > *,
.search-header > *,
.page-header > *,
.chat-header > *{
  min-width:0;
}
.header-left,.header-actions,.search-header,.page-header,.chat-header{
  min-width:0;
}
.brand-logo{min-width:0;max-width:100%;}
.brand-logo .lumi,.brand-logo .play-text{min-width:0;}

/* Superficies principales: llenan el ancho disponible. */
.hero-slider,
.hero-slide,
.detail-content,
.results-grid,
.trending-grid,
.channel-list,
.list-grid,
.feed-list,
.notif-list,
.request-list,
.cast-row,
.episodes-grid,
.related-grid{
  width:100%;
  max-width:none;
  min-width:0;
}

/* Grids fluidos: se agregan columnas en vez de dejar huecos laterales. */
.trending-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,155px),1fr))!important;
}

/* Filas horizontales deben poder desplazarse, nunca cortar el viewport. */
.continue-row,.categories,.filter-row,.filter-buttons,.cast-row{
  max-width:100%;
  min-width:0;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
}
.continue-row::-webkit-scrollbar,
.categories::-webkit-scrollbar,
.filter-row::-webkit-scrollbar,
.filter-buttons::-webkit-scrollbar,
.cast-row::-webkit-scrollbar{display:none}

/* Contenido flex/grid puede encogerse correctamente. */
main,section,article,aside,nav,header,footer,
[class*="grid"],[class*="row"],[class*="container"]{
  min-width:0;
}

/* No dejar que textos largos provoquen desbordamiento horizontal. */
h1,h2,h3,h4,h5,h6,p,.card-title,.hero-title,.movie-title,.movie-subtitle{
  max-width:100%;
  overflow-wrap:anywhere;
}

/* Desktop: usar prácticamente todo el lienzo disponible. */
@media(min-width:700px){
  .app-container,
  body[data-lumy-page] .app-container{
    padding-left:clamp(22px,2.5vw,42px)!important;
    padding-right:clamp(22px,2.5vw,42px)!important;
  }
  .trending-grid{
    grid-template-columns:repeat(auto-fit,minmax(170px,1fr))!important;
  }
}

@media(min-width:1200px){
  .app-container,
  body[data-lumy-page] .app-container{
    padding-left:clamp(28px,2.6vw,52px)!important;
    padding-right:clamp(28px,2.6vw,52px)!important;
  }
  .trending-grid{
    grid-template-columns:repeat(auto-fit,minmax(185px,1fr))!important;
    gap:18px!important;
  }
}

@media(min-width:1800px){
  .app-container,
  body[data-lumy-page] .app-container{
    padding-left:clamp(32px,3vw,64px)!important;
    padding-right:clamp(32px,3vw,64px)!important;
  }
}

/* El canvas ambiental siempre ocupa el viewport sin deformar contenido UI. */
#bgCanvas{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
}

/* ==========================================================
   LUMYTV DETAIL V2 — POSTER REALMENTE EDGE-TO-EDGE
   Sin margen superior ni lateral; proporción vertical de póster.
   ========================================================== */
body:has(.hero-poster) > .app-container{
  padding-left:0!important;
  padding-right:0!important;
}
body:has(.hero-poster) > .app-container > .hero-poster{
  box-sizing:border-box!important;
  width:100vw!important;
  max-width:none!important;
  margin-left:calc(50% - 50vw)!important;
  margin-right:calc(50% - 50vw)!important;
  margin-top:-74px!important;
  height:min(88dvh,590px)!important;
  min-height:0!important;
  border-radius:0 0 30px 30px!important;
  overflow:hidden!important;
  box-shadow:none!important;
}
body:has(.hero-poster) > .app-container > .hero-poster .poster-bg{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  background-size:cover!important;
  background-position:center top!important;
  border-radius:inherit!important;
}
body:has(.hero-poster) > .app-container > .hero-poster .detail-header{
  padding-left:max(16px,env(safe-area-inset-left))!important;
  padding-right:max(16px,env(safe-area-inset-right))!important;
  padding-top:max(14px,env(safe-area-inset-top))!important;
}
body:has(.hero-poster) > .app-container > .detail-content{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:1180px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  margin-top:-54px!important;
  padding-left:16px!important;
  padding-right:16px!important;
}
@media(min-width:700px){
  body:has(.hero-poster) > .app-container > .hero-poster{
    margin-top:-78px!important;
    height:min(88dvh,720px)!important;
    border-radius:0 0 36px 36px!important;
  }
  body:has(.hero-poster) > .app-container > .detail-content{
    margin-top:-58px!important;
    padding-left:32px!important;
    padding-right:32px!important;
  }
}

/* FINAL DETAIL POLISH — controls visible + badges integrated into poster */
body:has(.hero-poster) > .app-container > .hero-poster{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate!important;
}
body:has(.hero-poster) > .app-container > .hero-poster .poster-bg{
  z-index:0!important;
}
body:has(.hero-poster) > .app-container > .hero-poster .poster-bg::before{
  z-index:1!important;
  pointer-events:none!important;
}
body:has(.hero-poster) > .app-container > .hero-poster .detail-header{
  position:absolute!important;
  inset:0 0 auto 0!important;
  height:auto!important;
  min-height:64px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  z-index:100!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  padding:14px 16px!important;
  padding-top:max(14px,env(safe-area-inset-top,14px))!important;
}
body:has(.hero-poster) > .app-container > .hero-poster .btn-back,
body:has(.hero-poster) > .app-container > .hero-poster .btn-icon{
  position:relative!important;
  z-index:101!important;
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  min-height:42px!important;
  flex:0 0 42px!important;
  align-items:center!important;
  justify-content:center!important;
  background:rgba(20,24,30,.38)!important;
  border:1px solid rgba(255,255,255,.24)!important;
  backdrop-filter:blur(12px) saturate(130%)!important;
  -webkit-backdrop-filter:blur(12px) saturate(130%)!important;
}
body:has(.hero-poster) > .app-container > .hero-poster .btn-back svg,
body:has(.hero-poster) > .app-container > .hero-poster .btn-icon svg{
  width:19px!important;height:19px!important;display:block!important;
}
body:has(.hero-poster) > .app-container > .detail-content{
  position:relative!important;
  z-index:20!important;
  margin-top:-72px!important;
  padding-left:16px!important;
  padding-right:16px!important;
}
body:has(.hero-poster) > .app-container > .detail-content .badge-row{
  position:relative!important;
  z-index:30!important;
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  margin:0 0 10px!important;
  min-height:30px!important;
}
body:has(.hero-poster) > .app-container > .detail-content .badge{
  position:relative!important;
  z-index:31!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:28px!important;
  min-height:28px!important;
  padding:4px 11px!important;
  box-sizing:border-box!important;
}
@media(max-width:699px){
  body:has(.hero-poster) > .app-container > .hero-poster{
    height:min(82dvh,590px)!important;
    min-height:500px!important;
  }
  body:has(.hero-poster) > .app-container > .detail-content{
    margin-top:-74px!important;
  }
}
@media(min-width:700px){
  body:has(.hero-poster) > .app-container > .hero-poster{
    height:min(82dvh,720px)!important;
    min-height:560px!important;
  }
  body:has(.hero-poster) > .app-container > .detail-content{
    margin-top:-78px!important;
    padding-left:32px!important;padding-right:32px!important;
  }
}


/* DETAIL FINAL — controls above poster + badges embedded in poster + seamless fade */
body[data-lumy-page="detail"] > .app-container > .hero-poster,
body:has(.hero-poster) > .app-container > .hero-poster{
  position:relative!important;
  width:100vw!important;
  max-width:none!important;
  margin-left:calc(50% - 50vw)!important;
  margin-right:calc(50% - 50vw)!important;
  margin-top:0!important;
  border-radius:0!important;
  overflow:hidden!important;
  box-shadow:none!important;
  isolation:isolate!important;
}
body[data-lumy-page="detail"] > .app-container > .hero-poster .poster-bg,
body:has(.hero-poster) > .app-container > .hero-poster .poster-bg{
  border-radius:0!important;
  background-position:center top!important;
  background-size:cover!important;
}
/* Strong bottom fade: image melts into the page background instead of ending at a rounded edge. */
body[data-lumy-page="detail"] > .app-container > .hero-poster .poster-bg::after,
body:has(.hero-poster) > .app-container > .hero-poster .poster-bg::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  pointer-events:none!important;
  background:linear-gradient(180deg,rgba(3,5,8,.05) 0%,rgba(3,5,8,0) 45%,rgba(3,5,8,.12) 58%,rgba(3,5,8,.68) 78%,#030508 100%)!important;
}
/* Keep the original pseudo overlay subtle and underneath controls. */
body[data-lumy-page="detail"] > .app-container > .hero-poster .poster-bg::before,
body:has(.hero-poster) > .app-container > .hero-poster .poster-bg::before{
  z-index:1!important;
  pointer-events:none!important;
}
/* Controls are deliberately above every poster layer. */
body[data-lumy-page="detail"] > .app-container > .hero-poster .detail-header,
body:has(.hero-poster) > .app-container > .hero-poster .detail-header{
  position:absolute!important;
  top:0!important;
  left:0!important;
  right:0!important;
  height:72px!important;
  min-height:72px!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  z-index:1000!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  padding:calc(14px + env(safe-area-inset-top,0px)) 16px 0!important;
  box-sizing:border-box!important;
}
body[data-lumy-page="detail"] > .app-container > .hero-poster .btn-back,
body[data-lumy-page="detail"] > .app-container > .hero-poster .btn-icon,
body:has(.hero-poster) > .app-container > .hero-poster .btn-back,
body:has(.hero-poster) > .app-container > .hero-poster .btn-icon{
  position:relative!important;
  z-index:1001!important;
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  flex:0 0 44px!important;
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  min-height:44px!important;
  border-radius:50%!important;
  align-items:center!important;
  justify-content:center!important;
  background:rgba(18,23,30,.42)!important;
  border:1px solid rgba(255,255,255,.30)!important;
  color:#fff!important;
  box-shadow:0 8px 24px rgba(0,0,0,.22)!important;
  backdrop-filter:blur(14px) saturate(140%)!important;
  -webkit-backdrop-filter:blur(14px) saturate(140%)!important;
}
body[data-lumy-page="detail"] > .app-container > .hero-poster .btn-back svg,
body[data-lumy-page="detail"] > .app-container > .hero-poster .btn-icon svg,
body:has(.hero-poster) > .app-container > .hero-poster .btn-back svg,
body:has(.hero-poster) > .app-container > .hero-poster .btn-icon svg{
  width:20px!important;height:20px!important;display:block!important;
}
/* Badges live inside the image, near its bottom edge. */
body[data-lumy-page="detail"] > .app-container > .hero-poster .poster-badges,
body:has(.hero-poster) > .app-container > .hero-poster .poster-badges{
  position:absolute!important;
  left:16px!important;
  right:16px!important;
  bottom:22px!important;
  z-index:100!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex-wrap:wrap!important;
  min-height:28px!important;
  pointer-events:none!important;
}
body[data-lumy-page="detail"] > .app-container > .hero-poster .poster-badges .badge,
body:has(.hero-poster) > .app-container > .hero-poster .poster-badges .badge{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:28px!important;
  padding:4px 11px!important;
  box-sizing:border-box!important;
  border-radius:999px!important;
  font-size:10px!important;
}
/* Remove the old badge row from the detail body. */
body[data-lumy-page="detail"] > .app-container > .detail-content > .detail-left > .badge-row,
body:has(.hero-poster) > .app-container > .detail-content .badge-row{
  display:none!important;
}
/* Title starts cleanly after the poster; no overlap with the embedded badges. */
body[data-lumy-page="detail"] > .app-container > .detail-content,
body:has(.hero-poster) > .app-container > .detail-content{
  margin-top:-8px!important;
  padding-left:16px!important;
  padding-right:16px!important;
  position:relative!important;
  z-index:20!important;
}
@media(max-width:699px){
  body[data-lumy-page="detail"] > .app-container > .hero-poster,
  body:has(.hero-poster) > .app-container > .hero-poster{height:min(82dvh,590px)!important;min-height:500px!important;}
}
@media(min-width:700px){
  body[data-lumy-page="detail"] > .app-container > .hero-poster,
  body:has(.hero-poster) > .app-container > .hero-poster{height:min(82dvh,720px)!important;min-height:560px!important;}
  body[data-lumy-page="detail"] > .app-container > .hero-poster .poster-badges,
  body:has(.hero-poster) > .app-container > .hero-poster .poster-badges{left:32px!important;right:32px!important;bottom:28px!important;}
  body[data-lumy-page="detail"] > .app-container > .detail-content,
  body:has(.hero-poster) > .app-container > .detail-content{padding-left:32px!important;padding-right:32px!important;}
}

/* =========================================================
   DETAIL FINAL POLISH — poster blends into ambient background
   ========================================================= */
body[data-lumy-page="detail"] > .app-container > .hero-poster,
body:has(.hero-poster) > .app-container > .hero-poster{
  overflow:visible!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:transparent!important;
}

/* The artwork itself fades to transparent instead of ending in a black block. */
body[data-lumy-page="detail"] > .app-container > .hero-poster .poster-bg,
body:has(.hero-poster) > .app-container > .hero-poster .poster-bg{
  border-radius:0!important;
  background-size:cover!important;
  background-position:center top!important;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 58%,rgba(0,0,0,.88) 70%,rgba(0,0,0,.42) 84%,transparent 100%)!important;
  mask-image:linear-gradient(to bottom,#000 0%,#000 58%,rgba(0,0,0,.88) 70%,rgba(0,0,0,.42) 84%,transparent 100%)!important;
}

/* Remove the old opaque/black fade layers. */
body[data-lumy-page="detail"] > .app-container > .hero-poster .poster-bg::before,
body[data-lumy-page="detail"] > .app-container > .hero-poster .poster-bg::after,
body:has(.hero-poster) > .app-container > .hero-poster .poster-bg::before,
body:has(.hero-poster) > .app-container > .hero-poster .poster-bg::after{
  background:linear-gradient(to bottom,rgba(3,5,8,0) 0%,rgba(3,5,8,0) 55%,rgba(3,5,8,.08) 72%,rgba(3,5,8,.16) 86%,rgba(3,5,8,0) 100%)!important;
}

/* Keep controls completely independent from the artwork mask. */
body[data-lumy-page="detail"] > .app-container > .hero-poster .detail-header,
body:has(.hero-poster) > .app-container > .hero-poster .detail-header{
  z-index:5000!important;
  overflow:visible!important;
}
body[data-lumy-page="detail"] > .app-container > .hero-poster .btn-back,
body[data-lumy-page="detail"] > .app-container > .hero-poster .btn-icon,
body:has(.hero-poster) > .app-container > .hero-poster .btn-back,
body:has(.hero-poster) > .app-container > .hero-poster .btn-icon{
  position:relative!important;
  z-index:6000!important;
  visibility:visible!important;
  opacity:1!important;
}

/* Badges stay inside the poster and above every visual layer. */
body[data-lumy-page="detail"] > .app-container > .hero-poster .poster-badges,
body:has(.hero-poster) > .app-container > .hero-poster .poster-badges{
  z-index:5000!important;
  bottom:26px!important;
  overflow:visible!important;
}

/* LUMY CINEMA must never sit underneath the poster's overflow edge. */
body[data-lumy-page="detail"] > .app-container > .detail-content,
body:has(.hero-poster) > .app-container > .detail-content{
  margin-top:0!important;
  overflow:visible!important;
  position:relative!important;
  z-index:100!important;
}
body[data-lumy-page="detail"] .lumy-cinema-kicker,
body:has(.hero-poster) .lumy-cinema-kicker{
  position:relative!important;
  z-index:200!important;
  display:flex!important;
  align-items:center!important;
  min-height:20px!important;
  margin:0 0 8px!important;
  padding:0!important;
  line-height:20px!important;
  white-space:nowrap!important;
  overflow:visible!important;
}

/* Prevent any detail child from being clipped horizontally. */
body[data-lumy-page="detail"] .detail-content,
body[data-lumy-page="detail"] .detail-left,
body[data-lumy-page="detail"] .cast-scroll{
  min-width:0!important;
  overflow-x:visible!important;
}
body[data-lumy-page="detail"] .cast-scroll{
  overflow-x:auto!important;
  overflow-y:visible!important;
}

@media(max-width:699px){
  body[data-lumy-page="detail"] > .app-container > .hero-poster,
  body:has(.hero-poster) > .app-container > .hero-poster{
    height:min(82dvh,590px)!important;
    min-height:500px!important;
  }
  body[data-lumy-page="detail"] > .app-container > .hero-poster .poster-badges,
  body:has(.hero-poster) > .app-container > .hero-poster .poster-badges{
    left:14px!important;
    right:14px!important;
    bottom:24px!important;
  }
}
body[data-lumy-page="detail"]{background:transparent!important;}