/* ==========================================
   ESTRUCTURA MAESTRA – PLATINUM PLAYER
   GLOSSY GRID 2026 (OPTIMIZADO V3.0)
   Versión corregida - Sin overflow:hidden crítico
   ========================================== */
/* ==========================================
   FONDO AMBIENTAL DINÁMICO
   ========================================== */
.contenedor-app {
    display: grid;
    grid-template-areas: 
        "cabecera"
        "central"
        "publicidad"
        "pie";
    grid-template-rows: auto 1fr auto auto;
    min-height: 100dvh;
    min-height: 100vh;
    width: 100%;
    max-width: 100vw; /* Asegura que no se pase ni un píxel del ancho de pantalla */
    margin: 0;
    padding: 0;
    /* 1. Capa base oscura (mezclada con el color dinámico) */
    background: linear-gradient(
        to bottom, 
        rgba(10, 12, 18, 0.92), 
        rgba(10, 12, 18, 0.85)
    );
    
    position: relative;
    z-index: 0;
    
    /* Optimización — contain:layout removido (clipea visualizador) */
    contain: style;
    overflow: hidden; /* Necesario para que el blur no se salga */
}

/* 2. La Imagen Gigante Difuminada */
.contenedor-app::before {
    content: "";
    position: absolute;
    /* Inset negativo para evitar bordes blancos al difuminar */
    inset: -50px; 
    z-index: -1;
    
    /* La imagen viene desde JS */
    background-image: var(--bg-current-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* EFECTO DE DIFUMINADO PROFUNDO */
    filter: blur(50px) saturate(1.2) brightness(0.7);
    
    /* Transición suave al cambiar de canción */
    transition: background-image 1.5s ease-in-out;
    opacity: 0.4; /* Ajusta esto: más alto = más visible la imagen de fondo */
}

/* 3. Baño de color sutil (Tinte) */
.contenedor-app::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    /* Usa el color extraído por ColorThief */
    background: var(--bg-dynamic-color, #0a0c12);
    opacity: 0.2; /* Un tinte suave del color de la carátula */
    transition: background-color 1.5s ease;
}

/* ==========================================
   ÁREAS GLOBALES - AJUSTE COMPACTO V4.0
   ========================================== */

.cabecera-identidad { 
    grid-area: cabecera;
    z-index: var(--z-header, 1000);
}

.seccion-central { 
    grid-area: central;
}

.seccion-publicidad { 
    grid-area: publicidad;
    width: 100%;
    /* ELIMINAMOS cualquier margen que pueda estar separando las secciones */
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pie-pagina { 
    grid-area: pie;
    /* REDUCIMOS el padding superior al mínimo (5px) para pegarlo al banner */
    padding: 0px 10px 15px 10px !important; 
    text-align: center;
    /* Aseguramos que el color de fondo o el área no cree huecos */
    margin-top: -5px; 
}

/* ==========================================
   DISEÑO BASE (MOBILE & TABLET: < 992px)
   ========================================== */

.seccion-central {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 5vw, 40px);
    padding: clamp(20px, 5vw, 40px) clamp(12px, 4vw, 24px);
    width: 100%;
    box-sizing: border-box;
    
    /* CORREGIDO: overflow-x solo para horizontal */
    overflow-x: hidden;
    overflow-y: auto;
    
    position: relative;
    isolation: isolate;
}

/* Ocultar elementos de programación en vista principal */
.seccion-central .schedule-modal, 
.seccion-central .schedule-list, 
.seccion-central .schedule-content,
.seccion-central #schedule-list 
/* Ocultar el botón antiguo para limpiar el layout */
.play-btn-container {
    display: none !important;
}

/* ==========================================
   SISTEMA RESPONSIVE — OPTIMIZADO V2026
   Breakpoints solicitados:
     Mobile:      max-width: 575.98px
     Tablet:      768px - 991.98px
     Desktop:     992px - 1199.98px
     Extra Large: min-width: 1200px
   ========================================== */

/* 1. MOBILE (≤575.98px) */
@media (max-width: 575.98px) {
    .seccion-central {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
        padding: 20px 12px;
    }

    .area-informacion {
        text-align: center;
        align-items: center;
    }
}

/* 2. TABLET (768px - 991.98px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .seccion-central {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40px;
        padding: 40px 24px;
    }
}

/* 3. DESKTOP (992px - 1199.98px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .seccion-central {
        display: grid;
        grid-template-columns: 4.5fr 5.5fr;
        grid-template-areas: "reproductor info";
        max-width: 1000px;
        margin: 0 auto;
        gap: 40px;
    }
}

/* 4. EXTRA LARGE (≥1200px) */
@media (min-width: 1200px) {
    .seccion-central {
        display: grid;
        grid-template-columns: 4fr 6fr;
        grid-template-areas: "reproductor info";
        max-width: 1250px;
        margin: 0 auto;
        gap: 80px;
    }
}

/* ==========================================
   OPTIMIZACIÓN DE PANTALLAS BAJAS (Landscape)
   ========================================== */
@media (max-height: 600px) and (orientation: landscape) {
    .seccion-central {
        flex-direction: row;
        gap: 20px;
        padding: 10px;
    }
    /* Footer compacto */
    .pie-pagina {
        padding: 5px 16px;
        font-size: 0.8rem;
    }
    .pulse-wrapper,
    .live-circle {
        width: clamp(140px, 40vh, 220px);
        height: clamp(140px, 40vh, 220px);
        min-width: 140px;
        min-height: 140px;
    }
}

/* ==========================================
   ACCESIBILIDAD
   ========================================== */

/* Preferencias de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    html,
    body {
        scroll-behavior: auto;
    }
    
    .seccion-central {
        transition: none;
    }
}

/* Alto contraste */
@media (prefers-contrast: high) {
    .contenedor-app {
        background: #000000;
    }
    
    .seccion-publicidad {
        border-top: 2px solid rgba(var(--color-marca-rgb), 0.8);
    }
}

/* ==========================================
   OPTIMIZACIÓN DE RENDIMIENTO
   contain:layout reactivado al remover canvas
   ========================================== */

.contenedor-app {
    contain: layout style;
}

.seccion-central {
    contain: layout style;
}

.area-reproductor {
    contain: layout style;
    overflow: hidden;
}

.area-informacion {
    contain: layout style;
}

/* ==========================================
   PRINT STYLES (bonus)
   ========================================== */

@media print {
    html,
    body {
        overflow: visible;
    }
    
    /* Publicidad controlada */
    .seccion-publicidad {
        padding: 10px;
        max-height: 100px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .cabecera-identidad,
    .seccion-publicidad,
    .pie-pagina {
        display: none;
    }
    
    .seccion-central {
        display: block;
        overflow: visible;
        padding: 0;
    }
}