/* Modo TV: lienzo lógico 1920×1080 (ver tv.js). Todo va bajo html.tv, así que
   escritorio y móvil conservan su diseño responsive intacto. */
html.tv{--safe-x:48px;--safe-y:24px;--tv-gap:24px;font-size:18px;scrollbar-width:none}
html.tv::-webkit-scrollbar,html.tv *::-webkit-scrollbar{display:none}
html.tv body{overflow-x:hidden;cursor:none}
/* El desenfoque de fondo es de lo más caro para la GPU del Fire TV al desplazarse. */
html.tv *,html.tv *::backdrop{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html.tv .topbar{background:#080b0a!important}
html.tv dialog::backdrop{background:#020804f0}

/* Barra lateral y cabecera con medidas fijas: nada de vh/vw que cambien con el alto de Silk. */
html.tv{--sidebar:272px}
html.tv .sidebar{inset:var(--safe-y) auto var(--safe-y) var(--safe-x);padding:28px 16px 18px;border-radius:18px}
html.tv .main-shell{margin-left:calc(var(--sidebar) + var(--safe-x));padding:var(--safe-y) var(--safe-x) 0 0;max-width:none}
html.tv .brand{margin-bottom:22px}
html.tv .brand.has-logo{margin-bottom:18px}
html.tv .brand.has-logo .brand-logo{width:60px;max-height:60px}
html.tv .nav-label{font-size:13px;margin-bottom:10px}
html.tv .nav-item{font-size:19px;min-height:58px;padding:12px 18px;gap:16px;margin-bottom:4px;border-radius:12px}
html.tv .nav-item svg{width:24px;height:24px}
html.tv .profile{font-size:16px}
html.tv .topbar{height:96px;min-height:96px;padding-inline:40px}
html.tv .breadcrumb{font-size:17px}
html.tv .search-box{width:420px;padding:12px 18px;border-radius:12px}
html.tv .search-box input{font-size:17px}
html.tv .search-box kbd{display:none}
html.tv .mode-badge{font-size:13px;padding:6px 10px}
html.tv .icon-button{width:52px;height:52px}
html.tv main{padding:0 40px 64px;min-height:calc(100vh - 120px)}

/* Hero: la altura se adapta al contenido, así los botones nunca quedan cortados. */
html.tv .hero{height:auto;min-height:520px;max-height:none;border-radius:20px;align-items:center}
html.tv .hero-content{max-width:920px;padding:64px 72px}
html.tv .eyebrow{font-size:14px;margin-bottom:22px}
html.tv .hero h1{font-size:68px;max-width:860px;letter-spacing:-2px}
html.tv .hero-meta{font-size:18px;margin-top:22px;gap:16px}
html.tv .quality{font-size:14px}
html.tv .hero-description{font-size:21px;line-height:1.6;max-width:720px;margin-top:20px}
html.tv .hero-actions{margin-top:32px;gap:18px;flex-wrap:wrap}
html.tv .button{min-height:64px;padding:16px 34px;font-size:21px;border-radius:12px;gap:12px}
html.tv .button svg{width:24px;height:24px}
html.tv .hero-bottom{right:40px;bottom:32px}
html.tv .hero-bottom span{font-size:13px}

html.tv .quick-links{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--tv-gap);margin:32px 0 44px}
html.tv .quick-link{padding:22px 24px;gap:16px;border-radius:14px}
html.tv .quick-link strong{font-size:20px}
html.tv .quick-link small{font-size:15px}
html.tv .quick-link>svg:last-child{display:block}

html.tv .section{margin-bottom:48px}
html.tv .section-heading{margin-bottom:18px}
html.tv .section-heading h2{font-size:30px}
html.tv .section-kicker{font-size:13px}
html.tv .text-link{font-size:17px}
html.tv .page-heading h1{font-size:44px}

/* Tarjetas */
html.tv .card-title{font-size:19px;margin-top:12px}
html.tv .card-meta{font-size:15px}
html.tv .poster-badge{font-size:12px;padding:6px 10px}
html.tv .poster-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:32px var(--tv-gap)}
html.tv .channel-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--tv-gap)}
html.tv .channel-card{height:112px;min-height:112px;padding:14px 18px;gap:16px}
html.tv .channel-logo{width:80px;height:72px}
html.tv .channel-card h3{font-size:20px}
html.tv .channel-card small{font-size:15px}
html.tv .live-label{font-size:12px}
html.tv .history-card h3{font-size:19px}
html.tv .history-card p,html.tv .history-card small{font-size:15px}

/* Carruseles horizontales en Inicio: se mueven con el foco, como en una app. */
html.tv :is(.home-posters,.home-channels,.personal-section .history-grid){display:grid;grid-template-columns:none;grid-auto-flow:column;overflow-x:auto;overflow-y:hidden;scroll-snap-type:none;overscroll-behavior-x:contain;padding:16px 20px 20px;margin:-16px -20px -20px}
html.tv .home-posters{grid-auto-columns:calc((100% - 6 * var(--tv-gap)) / 7)}
html.tv .home-channels{grid-auto-columns:calc((100% - 3 * var(--tv-gap)) / 4)}
html.tv .personal-section .history-grid{grid-auto-columns:calc((100% - 3 * var(--tv-gap)) / 4)}
html.tv .home-posters .media-tile{display:block!important}
html.tv .home-channels .channel-tile{display:block!important}

/* Foco visible a 3 metros de distancia */
html.tv :is(button,a,select,input,[tabindex]):focus{outline:4px solid var(--accent);outline-offset:4px}
html.tv :is(.card,.channel-card,.history-open,.nav-item,.quick-link,.button,.search-box input):focus{outline:none}
html.tv .poster,html.tv .channel-card,html.tv .history-card,html.tv .quick-link,html.tv .button{transition:transform .12s ease-out}
html.tv .card:focus .poster{transform:scale(1.06);box-shadow:0 0 0 4px var(--accent)}
html.tv .card:focus .poster-play{opacity:1;transform:translate(-50%,-50%)}
html.tv .card:focus .card-title{color:var(--accent)}
html.tv .channel-card:focus{box-shadow:0 0 0 4px var(--accent);background:#1c2e12;transform:scale(1.03)}
html.tv .history-card:focus-within{box-shadow:0 0 0 4px var(--accent);transform:scale(1.03)}
html.tv .quick-link:focus{box-shadow:0 0 0 4px var(--accent);transform:scale(1.03)}
html.tv .button:focus{transform:scale(1.06);box-shadow:0 0 0 4px #fff}
html.tv .nav-item:focus{background:var(--accent);color:#102006}
html.tv .search-box:focus-within{box-shadow:0 0 0 4px var(--accent)}
html.tv .favorite-button:focus{outline:none;box-shadow:0 0 0 4px var(--accent);background:#20380c}

/* Sin efectos hover pensados para ratón */
html.tv .card:hover .poster img{transform:none}

/* Reproductor (MKV, MP4, HLS y en vivo comparten esta interfaz) */
html.tv .vrp-bar{padding:24px 32px 28px!important;gap:16px!important}
html.tv .vrp-pr{height:8px!important}
html.tv .vrp-btns{gap:14px!important}
html.tv .vrp-btn{height:60px!important;min-width:64px!important;padding:0 20px!important;font-size:19px!important;border-radius:12px!important}
html.tv .vrp-btn .fa-solid{font-size:22px}
html.tv .vrp-btn:focus{border-color:var(--accent)!important;background:var(--accent)!important;color:#102006!important;box-shadow:0 0 0 4px #fff!important}
html.tv .vrp-t{font-size:19px!important}
html.tv .vrp-center-play{width:112px;height:112px}
html.tv .vrp-center-play i{font-size:40px}
html.tv .vrp-status{font-size:22px!important}
html.tv .vrp-top{padding:32px 48px 64px;gap:18px}
html.tv .vrp-title{font-size:30px}
html.tv .vrp-bar{padding-inline:48px!important;padding-bottom:36px!important}
html.tv #modal.player-mode .player-message{top:132px;font-size:20px}

/* Diálogos */
html.tv dialog{width:min(1500px,86vw);max-width:86vw;max-height:88vh;font-size:18px}
html.tv .modal-head h2{font-size:30px}

@media(prefers-reduced-motion:reduce){html.tv *{transition:none!important}}