/**
 * OPTIMIZACIÓN "VANILLA" PARA SMART TV (webOS Legacy)
 * Enfoque: Sin Tailwind, sin variables CSS, solo píxeles y selectores directos.
 * Compatible con procesadores de gama baja de hace más de 5-10 años.
 */

/* 1. Reset Global - Prioridad Máxima */
body.is-smart-tv {
    font-size: 20px !important;
    /* Aumentamos base para legibilidad */
    background-color: #000000 !important;
    color: #ffffff !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ocultar elementos conflictivos */
body.is-smart-tv #mobile-top-bar,
body.is-smart-tv #sidebar-overlay,
body.is-smart-tv #mobile-menu-close,
body.is-smart-tv #mobile-menu-toggle,
body.is-smart-tv .hidden {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
}

/* 2. Layout Estático (Más estable que Flexbox/Grid en motores viejos) */
body.is-smart-tv #app-container {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    padding-top: 0 !important;
    overflow: visible !important;
}

body.is-smart-tv #player-sidebar {
    width: 300px !important;
    float: left !important;
    background-color: #000000 !important;
    border-right: 1px solid #222222 !important;
    min-height: 1080px !important;
    /* Forzar altura para sidebar */
    padding: 30px !important;
    display: block !important;
    position: relative !important;
    transform: none !important;
}

body.is-smart-tv #main-content {
    margin-left: 300px !important;
    margin-right: 210px !important;
    /* Espacio para anuncios */
    padding: 40px !important;
    display: block !important;
    width: auto !important;
    overflow: visible !important;
}

/* 2.1 Sidebar de Anuncios TV */
/* 2.1 Sidebar de Anuncios TV */
body.is-smart-tv #ads-sidebar.ads-sidebar-container {
    width: 210px !important;
    /* 150px imagen + padding */
    float: right !important;
    background-color: #000000 !important;
    border-left: 1px solid #222222 !important;
    min-height: 1080px !important;
    padding: 30px !important;
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
}

body.is-smart-tv .ads-viewport {
    height: 900px !important;
    /* Altura visible del área de anuncios */
    overflow: hidden !important;
    position: relative !important;
}

@keyframes tvAdsScroll {
    0% {
        transform: translateY(100vh);
    }

    100% {
        transform: translateY(-66.66%);
    }
}

body.is-smart-tv .ads-list {
    display: block !important;
    animation: tvAdsScroll 20s linear infinite !important;
    -webkit-animation: tvAdsScroll 20s linear infinite !important;
}

body.is-smart-tv .ads-viewport:hover .ads-list {
    animation-play-state: paused !important;
    -webkit-animation-play-state: paused !important;
}

body.is-smart-tv .ad-item img {
    width: 150px !important;
    height: auto !important;
    margin: 0 auto 30px auto !important;
    border-radius: 20px !important;
}

/* 3. Control de Imágenes (Solución a "Imágenes Súper Grandes") */
body.is-smart-tv img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

body.is-smart-tv #player-sidebar img {
    width: 180px !important;
    /* Logo Reactor */
    margin: 0 auto 30px auto !important;
}

/* 4. El Reproductor (Solución a "Icono apenas se ve") */
body.is-smart-tv #player-container {
    background-color: #111111 !important;
    border: 1px solid #333333 !important;
    border-radius: 20px !important;
    padding: 20px !important;
    margin-bottom: 30px !important;
    text-align: center !important;
}

body.is-smart-tv #master-play-btn {
    width: 100px !important;
    height: 100px !important;
    background-color: #ff0000 !important;
    border-radius: 50px !important;
    display: block !important;
    margin: 20px auto !important;
    border: none !important;
    position: relative !important;
    /* Base para centrado absoluto */
    padding: 0 !important;
}

body.is-smart-tv #master-play-btn svg {
    width: 40px !important;
    height: 40px !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    margin-top: -20px !important;
    /* Mitad de la altura */
    margin-left: -20px !important;
    /* Mitad del ancho */
    fill: #ffffff !important;
}

/* 5. Tipografía y Textos (Solución a "Textos Pequeños") */
body.is-smart-tv h1,
body.is-smart-tv h2,
body.is-smart-tv h3 {
    color: #ffffff !important;
    margin-bottom: 20px !important;
    line-height: 1.2 !important;
}

body.is-smart-tv p,
body.is-smart-tv span {
    font-size: 20px !important;
    color: #cccccc !important;
}

/* Sobrescribir clases de Tailwind que podrían no cargar */
body.is-smart-tv .text-5xl {
    font-size: 60px !important;
}

body.is-smart-tv .text-7xl {
    font-size: 80px !important;
}

body.is-smart-tv .text-xl {
    font-size: 30px !important;
}

/* Grillas a una sola columna */
body.is-smart-tv .grid {
    display: block !important;
}

body.is-smart-tv .grid>* {
    width: 100% !important;
    margin-bottom: 40px !important;
    display: block !important;
}

/* Navegación y Enfoque */
body.is-smart-tv a:focus,
body.is-smart-tv button:focus {
    outline: 8px solid #ff0000 !important;
    outline-offset: 4px !important;
    background-color: #220000 !important;
}

/* Limpiar paddings */
body.is-smart-tv .tp-0-important {
    padding-top: 0 !important;
}