/* PEFLIX: streaming cinema, responsive and keyboard accessible. */
html body.auth-mode.auth-simple,html body.app-mode.movies-series-only{background:#141414!important;color:#fff;font-family:Arial,Helvetica,sans-serif}
html body.auth-mode.auth-simple{background:#000!important}
html .peflix-brand{font-size:clamp(26px,3vw,42px);font-weight:900;letter-spacing:-2px;color:#e50914;line-height:1}
html body.auth-simple .landing-bg{display:block!important;inset:-10%!important;transform:rotate(-8deg) scale(1.12)!important;background:#090909!important}
html body.auth-simple .landing-grid{display:grid!important;grid-template-columns:repeat(7,1fr)!important;opacity:.7!important}
html body.auth-simple .landing-shade{background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,.55) 50%,#000 100%)!important}
html body.auth-simple .landing-header{width:min(1200px,90%)!important;height:100px!important}
html body.auth-simple .landing-center{display:block!important;padding:35px 24px 100px!important;min-height:calc(100dvh - 100px)!important}
html body.auth-simple .auth-panel{width:min(450px,100%)!important;margin:0 auto!important;padding:48px 38px!important;background:rgba(0,0,0,.83)!important;border-radius:4px!important;text-align:left!important;box-shadow:none!important}
html body.auth-simple .landing-copy h1{font-size:32px!important;line-height:1.2!important;letter-spacing:-.6px!important;margin-bottom:18px!important;text-align:left!important}
html body.auth-simple .landing-copy p{font-size:16px!important;font-weight:400!important;color:#ccc!important}
html body.auth-simple .landing-copy{margin-bottom:28px!important}
html body.auth-simple .landing-login-title{display:none!important}
html body.auth-simple .auth-form{display:flex!important;flex-direction:column!important;gap:16px!important;max-width:none!important}
html body.auth-simple .auth-form label[hidden]{display:none!important}
html body.auth-simple .auth-form input{width:100%!important;height:56px!important;border:1px solid #777!important;background:rgba(20,20,20,.9)!important;border-radius:4px!important}
html body.auth-simple .auth-submit,html body.auth-simple .landing-login-button{background:#e50914!important;border-radius:4px!important;min-height:48px!important;box-shadow:none!important;font-weight:700!important}
html .acquire-button{display:block;margin-top:26px;padding:14px 10px;text-align:center;color:#fff;background:#303030;border-radius:4px;text-decoration:none;font-size:15px;font-weight:600}
html .acquire-button:hover{background:#454545}
html body.app-mode.movies-series-only .topbar{background:linear-gradient(#090909,#141414)!important;backdrop-filter:none!important;border:0!important;padding:22px 4%!important}
html body.app-mode.movies-series-only .app-body{background:#141414!important}
html body.app-mode.movies-series-only .catalog-main{padding:0 4% 70px!important;background:#141414!important}
html body.app-mode.movies-series-only .hero-card{min-height:65vh!important;border:0!important;border-radius:0!important;box-shadow:none!important;margin:0 -4.35% 20px!important;padding:9% 8% 8%!important;background-color:#111!important}
html body.app-mode.movies-series-only .hero-card:not([style*="background-image"]){background-image:linear-gradient(90deg,#141414e8,#14141444),url('../../papel/background-login.jpg')!important}
html body.app-mode.movies-series-only .hero-content{max-width:600px!important}
html body.app-mode.movies-series-only .hero-content h1{font-size:clamp(32px,4.8vw,68px)!important;line-height:1.05!important}
html body.app-mode.movies-series-only .hero-card::after{content:'';position:absolute;inset:65% 0 0;background:linear-gradient(transparent,#141414);pointer-events:none}
html body.app-mode.movies-series-only .primary-button{background:#fff!important;color:#111!important;border:0!important;border-radius:4px!important;font-weight:700!important}
html body.app-mode.movies-series-only .secondary-button{border-radius:4px!important;background:#ffffff30!important;border:0!important}
html body.app-mode.movies-series-only .main-nav .nav-tab{border-radius:0!important;background:none!important;font-size:14px!important;padding:8px!important;border:0!important}
html body.app-mode.movies-series-only .main-nav .nav-tab.active{font-weight:800!important;color:#fff!important}
html body.app-mode.movies-series-only .category-sidebar{background:#141414!important;border-color:#252525!important}
html body.app-mode.movies-series-only .poster-card{border-radius:5px!important;box-shadow:none!important}
html .profile-screen{position:fixed;inset:0;z-index:900;background:#141414;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:80px 20px 30px;overflow:auto}
html .profile-brand{position:absolute;left:4%;top:25px;font-size:36px;letter-spacing:-2px;color:#e50914;font-weight:900}
html .profile-screen h1{font-size:clamp(30px,4vw,52px);font-weight:500;text-align:center;margin:0 0 10px}
html .profile-list{display:flex;flex-wrap:wrap;justify-content:center;gap:26px}
html .profile-choice{display:flex;flex-direction:column;gap:14px;align-items:center;background:none;border:0;color:#aaa;font-size:20px;cursor:pointer}
html .profile-avatar{width:130px;height:130px;border-radius:5px;background:linear-gradient(145deg,#126494,#143e59);display:grid;place-items:center;color:white;font-size:64px;border:3px solid transparent;overflow:hidden}
html .profile-choice:nth-child(2n) .profile-avatar{background:linear-gradient(145deg,#b1462c,#682c19)}
html .profile-choice:hover .profile-avatar,html .profile-choice:focus-visible .profile-avatar{border-color:#fff}
html .profile-avatar img,html .avatar-button img{width:100%;height:100%;object-fit:cover}
html .profile-create{display:flex;flex-direction:column;gap:12px;width:min(360px,100%)}
html .profile-create input{padding:13px;background:#333;border:1px solid #666;border-radius:4px;color:white}
html .profile-create button,html .install-prompt button{padding:13px 18px;background:#e50914;border:0;border-radius:4px;color:white;font-weight:700;cursor:pointer}
html .profile-note{color:#999;font-size:14px;text-align:center}
html .install-prompt{position:fixed;right:20px;bottom:20px;z-index:1000;max-width:360px;background:#232323;color:#fff;padding:24px;border:1px solid #555;border-radius:8px;box-shadow:0 8px 40px #0008}
html .install-prompt p{margin:0 0 16px;line-height:1.5}
html .install-prompt button{margin:4px}
html .install-prompt button:last-child{background:#444}
html .public-trending{position:relative;background:#000;padding:44px 7%;z-index:2}
html .public-trending h2{font-size:28px;margin:0 0 24px}
html .public-posters{display:flex;gap:22px;overflow-x:auto;padding:10px 5px 25px;scroll-snap-type:x mandatory}
html .public-poster{flex:0 0 160px;scroll-snap-align:start;color:#ccc;font-size:14px}
html .public-poster img{width:160px;height:235px;object-fit:cover;border-radius:6px;margin-bottom:10px}
html .public-credit{color:#888;font-size:12px}
@media(max-width:700px){html body.auth-simple .auth-panel{padding:30px 20px!important}html body.auth-simple .landing-header{height:80px!important}html .profile-avatar{width:90px;height:90px;font-size:42px}html .profile-screen{justify-content:flex-start;padding-top:110px}html body.app-mode.movies-series-only .hero-card{min-height:420px!important}html #switchProfile{font-size:11px;padding:6px}html body.app-mode.movies-series-only .topbar{flex-wrap:wrap!important}}

html body.auth-simple .auth-form{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;backdrop-filter:none!important}

html .profile-create[hidden]{display:none!important}

/* Profile creation starts from a visual + tile, including the first profile. */
html .profile-photo-picker{display:flex!important;align-items:center;justify-content:center;gap:18px;background:transparent!important;border:1px solid #555!important;padding:16px!important;color:#ddd!important;text-align:left}
html .photo-preview{display:grid;place-items:center;flex:none;width:80px;height:80px;border-radius:6px;background:linear-gradient(140deg,#176b9c,#143249);font-size:42px;overflow:hidden}
html .photo-preview img{width:100%;height:100%;object-fit:cover}
html .profile-create .profile-cancel{background:transparent;border:1px solid #666;color:#bbb}
html .profile-create input[type=file][hidden]{display:none!important}
html .login-password-stage #passwordStep{animation:password-arrive .42s cubic-bezier(.2,.8,.2,1) both}
html .auth-submit .button-loader{width:19px!important;height:19px!important;border:2px solid #ffffff55!important;border-top-color:#fff!important;border-radius:50%!important;animation:peflix-spin .7s linear infinite!important;margin-left:8px}
html .button-loader[hidden]{display:none!important}
@keyframes password-arrive{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes peflix-spin{to{transform:rotate(360deg)}}
html .welcome-intro{position:fixed;inset:0;z-index:10000;background:#000;display:grid;place-items:center;isolation:isolate}
html .welcome-intro video{width:100%;height:100%;object-fit:contain;position:absolute;inset:0;z-index:1}
html .intro-fallback{display:flex;flex-direction:column;align-items:center;gap:28px}
html .intro-spinner{width:28px;height:28px;border:3px solid #ffffff44;border-top-color:#e50914;border-radius:50%;animation:peflix-spin .8s linear infinite}
html .intro-actions{position:absolute;bottom:max(36px,env(safe-area-inset-bottom));right:5%;display:flex;gap:12px;z-index:2}
html .intro-actions button{background:#222b;border:1px solid #ffffff66;color:#fff;padding:13px 20px;border-radius:5px;cursor:pointer;backdrop-filter:blur(8px)}
html .welcome-intro.intro-finishing{opacity:0;transition:opacity .35s ease;pointer-events:none}
html body:has(.welcome-intro){overflow:hidden!important}
html .intro-playing .intro-fallback{visibility:hidden}
@media(prefers-reduced-motion:reduce){html .login-password-stage #passwordStep{animation:none}html .welcome-intro.intro-finishing{transition:none}}

html .profile-list[hidden]{display:none!important}

html .pin-dialog{position:fixed;inset:0;margin:auto;width:min(430px,calc(100% - 32px));padding:0;background:#181818;color:#fff;border:1px solid #444;border-radius:10px;z-index:20000;box-shadow:0 24px 100px #000b}
html .pin-dialog::backdrop{background:#000c;backdrop-filter:blur(5px)}
html .pin-form{padding:32px;display:flex;flex-direction:column;gap:14px}
html .pin-form h2{margin:0;font-size:27px}
html .pin-form p{margin:0;color:#aaa;line-height:1.5}
html .pin-form label{display:flex;flex-direction:column;gap:8px;font-size:14px;color:#bbb}
html .pin-form input{width:100%;box-sizing:border-box;padding:14px;background:#292929;border:1px solid #666;border-radius:4px;color:#fff;font-size:25px;letter-spacing:12px;text-align:center}
html .pin-form button{padding:14px;background:#e50914;color:white;border:0;border-radius:4px;cursor:pointer;font-weight:700}
html .pin-form .pin-cancel{background:#333}
html .pin-form .pin-error{color:#ffad99;font-size:14px}
html .pin-form button[hidden]{display:none!important}

/* User-supplied opening background; visible as soon as the intro finishes. */
html body.auth-simple .landing-bg{inset:0!important;transform:none!important;background:#090909 url('../img/login-background.png') center/cover no-repeat!important}
html body.auth-simple .landing-grid{display:none!important}
html body.auth-simple .landing-shade{background:linear-gradient(180deg,#0004,#0002 45%,#000b)!important}
html body.app-mode.movies-series-only .hero-card:not([style*="background-image"]){background-image:linear-gradient(90deg,#141414e8,#14141455),url('../img/login-background.png')!important}

/* Keep every login control inside the same responsive content width. */
html body.auth-simple .auth-panel,html body.auth-simple .auth-panel *{box-sizing:border-box!important}
html body.auth-simple .landing-center{display:flex!important;align-items:center!important;justify-content:center!important;padding:32px 20px 64px!important}
html body.auth-simple .auth-panel{width:100%!important;max-width:450px!important;min-width:0!important;padding:40px 32px!important;margin:0!important}
html body.auth-simple .auth-form,html body.auth-simple .auth-form label,html body.auth-simple .password-field{width:100%!important;min-width:0!important;max-width:100%!important}
html body.auth-simple .auth-form input,html body.auth-simple .auth-submit,html body.auth-simple .acquire-button{width:100%!important;max-width:100%!important;min-width:0!important;margin-left:0!important;margin-right:0!important}
html body.auth-simple .auth-form input{padding-right:16px!important}
html body.auth-simple .password-field input{padding-right:48px!important}
html body.auth-simple .auth-submit{display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;padding:14px 12px!important}
html body.auth-simple .auth-form .password-toggle{right:4px!important;max-width:40px!important;width:40px!important}
html body.auth-simple .landing-copy h1{overflow-wrap:break-word!important}
html body.auth-simple .acquire-button{font-size:14px!important;line-height:1.5!important;padding:14px 10px!important;overflow-wrap:anywhere!important}
html .install-prompt{box-sizing:border-box;max-width:min(360px,calc(100vw - 32px));width:360px;right:16px;bottom:16px;padding:22px}
html .install-prompt button{min-height:44px;margin:4px 8px 0 0}
@media(max-width:480px){html body.auth-simple .landing-header{width:calc(100% - 32px)!important;height:76px!important}html body.auth-simple .landing-center{min-height:calc(100dvh - 76px)!important;padding:20px 16px 40px!important}html body.auth-simple .auth-panel{padding:30px 22px!important}html body.auth-simple .landing-copy h1{font-size:27px!important}html .install-prompt{left:16px;right:16px;width:auto}}

html .login-transition{position:fixed;inset:0;z-index:15000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#070707ed;color:#ddd;backdrop-filter:blur(8px);font:16px Arial,sans-serif}
html .login-transition .intro-spinner{width:46px;height:46px;border-width:3px}
html body.auth-simple .auth-form .edit-username{align-self:flex-start;width:auto!important;min-height:32px;padding:2px 0;background:none!important;border:0;border-radius:0;color:#bbb;font-size:13px;text-decoration:underline;cursor:pointer}
html body.auth-simple .auth-form .edit-username[hidden]{display:none!important}
html .intro-actions{flex-wrap:wrap;justify-content:flex-end;left:16px;right:16px;gap:8px}
html .intro-actions button{font-size:13px;padding:11px 14px}
html .intro-actions button[hidden]{display:none!important}
html .welcome-intro video{object-fit:contain;aspect-ratio:16/9}
@media(max-width:360px){html body.auth-simple .auth-panel{padding:26px 18px!important}html body.auth-simple .landing-copy h1{font-size:25px!important}html body.auth-simple .landing-copy p{font-size:14px!important}}

html body.auth-simple .auth-form .form-message:empty{display:none!important}

/* Mobile cinema layout: preserve background and wrap profile tiles into rows. */
@media(max-width:700px){html body.auth-simple .auth-panel{background:rgba(0,0,0,.4)!important;box-shadow:none!important;border:0!important;backdrop-filter:none!important}html body.auth-simple .landing-copy{text-shadow:0 2px 12px #000!important}}
html .profile-list{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(96px,124px));gap:24px 20px;justify-content:center;width:min(820px,100%);max-width:100%;margin-inline:auto}
html .profile-choice{width:100%!important;min-width:0!important;max-width:124px!important;padding:0;gap:12px;font-size:16px;overflow-wrap:anywhere;text-align:center}
html .profile-avatar{width:100%!important;height:auto!important;aspect-ratio:1;max-width:124px;font-size:54px!important}
html .profile-add-choice .profile-avatar{background:linear-gradient(145deg,#f11222,#a40713)!important;color:#fff!important;border-color:#e50914;box-shadow:0 6px 20px #e5091438}
html .profile-add-choice>span:last-child{color:#fff;font-weight:700}
html .profile-add-choice:hover .profile-avatar,html .profile-add-choice:focus-visible .profile-avatar{border-color:#fff;filter:brightness(1.1)}
html .profile-list[hidden]{display:none!important}
@media(max-width:480px){html .profile-list{grid-template-columns:repeat(auto-fit,minmax(96px,112px));gap:22px 18px}html .profile-choice{max-width:112px!important;font-size:15px}html .profile-screen{padding-left:22px;padding-right:22px}}

@media(max-width:820px){
html body.app-mode.movies-series-only .topbar{position:fixed!important;top:0!important;left:0!important;right:0!important;display:grid!important;grid-template-columns:40px minmax(0,1fr) auto!important;align-items:center!important;gap:8px!important;height:calc(64px + env(safe-area-inset-top))!important;padding:env(safe-area-inset-top) 12px 0!important;z-index:320!important}
html body.app-mode.movies-series-only .topbar .mobile-only{display:inline-grid!important}
html body.app-mode.movies-series-only .topbar .brand{min-width:0;max-width:100%;overflow:hidden}
html body.app-mode.movies-series-only .topbar .peflix-brand{font-size:23px;letter-spacing:-1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body.app-mode.movies-series-only .topbar .brand img{max-width:100%;height:32px;object-fit:contain}
html body.app-mode.movies-series-only .topbar-actions{display:flex;gap:4px;align-items:center}
html body.app-mode.movies-series-only .topbar-actions button,html body.app-mode.movies-series-only #menuToggle{width:36px!important;height:42px!important;min-width:36px!important;padding:4px!important}
html body.app-mode.movies-series-only #switchProfile{font-size:0!important}
html body.app-mode.movies-series-only #switchProfile::before{content:'⇄';font-size:25px}
html body.app-mode.movies-series-only .main-nav{position:fixed!important;top:auto!important;bottom:0!important;left:0!important;right:0!important;width:100%!important;height:calc(66px + env(safe-area-inset-bottom))!important;display:grid!important;grid-template-columns:repeat(var(--nav-count,6),minmax(0,1fr))!important;grid-template-rows:1fr!important;grid-auto-rows:auto!important;gap:0!important;padding:0 4px env(safe-area-inset-bottom)!important;background:#101010fa!important;border-top:1px solid #333!important;z-index:250!important;overflow:visible!important;box-sizing:border-box!important}
html body.app-mode.movies-series-only .main-nav .nav-tab{width:100%!important;min-width:0!important;min-height:52px!important;height:100%!important;padding:6px 1px!important;font-size:10px!important;line-height:1.2!important;white-space:normal!important;text-align:center!important;display:flex!important;align-items:center!important;justify-content:center!important;border-top:3px solid transparent!important;color:#aaa!important}
html body.app-mode.movies-series-only .main-nav .nav-tab.active{border-top-color:#e50914!important;background:#e509141a!important;color:#fff!important;box-shadow:none!important}
html body.app-mode.movies-series-only .main-nav .nav-tab:focus-visible,html body.app-mode.movies-series-only .category-button:focus-visible{outline:2px solid #fff!important;outline-offset:-3px!important}
html body.app-mode.movies-series-only .app-body{display:block!important;padding-top:calc(64px + env(safe-area-inset-top))!important;padding-left:0!important;min-width:0!important}
html body.app-mode.movies-series-only .catalog-main{min-width:0!important;padding:0 12px calc(96px + env(safe-area-inset-bottom))!important}
html body.app-mode.movies-series-only .catalog-grid,html body.app-mode.movies-series-only .skeleton-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px 10px!important;width:100%!important}
html body.app-mode.movies-series-only .category-sidebar{position:fixed!important;left:0!important;top:calc(64px + env(safe-area-inset-top))!important;bottom:calc(66px + env(safe-area-inset-bottom))!important;width:min(84vw,320px)!important;height:auto!important;z-index:300!important;overflow-y:auto!important;padding:20px 14px!important;transform:translateX(-105%)!important;background:#181818!important;backdrop-filter:none!important;overscroll-behavior:contain}
html body.app-mode.movies-series-only .category-sidebar.open{display:block!important;transform:translateX(0)!important}
html body.categories-open{overflow:hidden!important}
html #categoryBackdrop{position:fixed;inset:64px 0 66px;z-index:280;background:#0009;border:0;padding:0}
html #categoryBackdrop[hidden]{display:none!important}
html body.app-mode.movies-series-only .search-bar{position:fixed!important;left:0!important;right:0!important;top:64px!important;z-index:325!important}
}
@media(min-width:600px) and (max-width:820px){html body.app-mode.movies-series-only .catalog-grid,html body.app-mode.movies-series-only .skeleton-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}html body.app-mode.movies-series-only .main-nav .nav-tab{font-size:13px!important}}

html #categoryBackdrop{display:none}
@media(max-width:820px){html #categoryBackdrop:not([hidden]){display:block}}

@media(max-width:820px){
html body.app-mode.movies-series-only #switchProfile{display:inline-flex!important;align-items:center;justify-content:center}
html body.app-mode.movies-series-only .hero-card{margin:0 -12px 20px!important;width:calc(100% + 24px)!important;max-width:calc(100% + 24px)!important;overflow:hidden!important}
html body.app-mode.movies-series-only:not(.home-mode) .hero-card{margin:0 0 20px!important;width:100%!important;max-width:100%!important;min-height:150px!important;padding:24px!important}
}