/* ==========================================
   CONTROLES DE REPRODUCCIÓN – GLOSSY NEON 2026
   REPRODUCTOR EN VIVO
   Versión optimizada - Performance & Accessibility
   ========================================== */

.play-btn-container {
    position: relative;
    
    /* FIX ALINEACIÓN: Asegura que el contenedor ocupe todo el ancho para poder centrar */
    width: 100%; 
    
    /* FIX PROXIMIDAD: Reduje drásticamente el margen vertical */
    /* Antes: clamp(16px...) -> Ahora: 5px arriba (cerca circulo), 15px abajo (cerca info) */
    margin: 5px 0 15px 0;
    
    z-index: var(--z-player-controls, 100);
    display: flex;
    justify-content: center; /* Centrado Horizontal Absoluto */
    align-items: center;
    
    /* Optimización de rendering */
    contain: layout style;
}

/* Botón principal – glossy con gradiente y profundidad */
#playBtn {
    /* Ajuste ligero de tamaño para que sea más elegante */
    width: clamp(80px, 16vw, 110px);
    height: clamp(80px, 16vw, 110px);
    border-radius: 50%;
    
    /* Fondo con gradiente vivo */
    background: var(--naranja-gradient, var(--color-marca));
    
    border: 2px solid rgba(255, 255, 255, 0.25);
    
    /* OPTIMIZADO: Sombras más suaves que usan el color de la marca */
    box-shadow: 
        0 12px 30px rgba(var(--color-marca-rgb), 0.4),
        inset 0 4px 20px rgba(255, 255, 255, 0.35),
        inset 0 -6px 15px rgba(0, 0, 0, 0.5);
    
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 5;
    
    /* GPU acceleration */
    transform: translateZ(0);
    will-change: transform;
    
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Estados interactivos */
#playBtn:hover {
    transform: scale(1.08) translateY(-4px) translateZ(0);
    box-shadow: 
        0 20px 50px rgba(var(--color-marca-rgb), 0.6),
        0 0 50px rgba(var(--color-marca-rgb), 0.7),
        inset 0 6px 25px rgba(255, 255, 255, 0.45);
}

#playBtn:active {
    transform: scale(0.95) translateY(0) translateZ(0);
    box-shadow: 
        0 5px 20px rgba(var(--color-marca-rgb), 0.5),
        inset 0 2px 15px rgba(255, 255, 255, 0.3);
}

/* NUEVO: Focus state para navegación por teclado */
#playBtn:focus-visible {
    outline: 3px solid rgba(var(--color-marca-rgb), 0.8);
    outline-offset: 6px;
}

/* Icono del botón */
#playBtn i {
    font-size: clamp(2rem, 5vw, 2.8rem);
    color: white;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    transition: transform 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px; /* Corrección óptica visual para el icono de Play */
}

#playBtn:hover i {
    transform: scale(1.15);
}

/* Pulsación sutil cuando está reproduciendo */
body.playing #playBtn {
    animation: pulseGlow 2.2s ease-in-out infinite;
    box-shadow: 
        0 16px 50px rgba(var(--color-marca-rgb), 0.65),
        0 0 60px rgba(var(--color-marca-rgb), 0.75),
        inset 0 6px 25px rgba(255, 255, 255, 0.5);
}

@keyframes pulseGlow {
    0%, 100% { transform: scale(1) translateZ(0); }
    50% { transform: scale(1.04) translateZ(0); }
}

/* ==========================================
   ONDAS DE SONIDO (RIPPLE EFFECT)
   ========================================== */

body.playing .play-btn-container::before,
body.playing .play-btn-container::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle, 
        rgba(var(--color-marca-rgb), 0.8) 0%, 
        rgba(var(--color-marca-rgb), 0.4) 40%,
        transparent 70%
    );
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    will-change: transform, opacity;
}

body.playing .play-btn-container::before {
    animation: rippleGlossy 2.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}

body.playing .play-btn-container::after {
    animation: rippleGlossy 2.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite 0.7s;
}

@keyframes rippleGlossy {
    0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0.7; }
    50% { opacity: 0.9; }
    100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}

/* ==========================================
   MODALES - GESTIÓN DE VISIBILIDAD
   (Mantenemos esto aquí para no romper tu lógica actual)
   ========================================== */
.modal-master,
#scheduleModal,
#socialModal {
    display: none;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.modal-master.active,
#scheduleModal.active,
#socialModal.active {
    display: flex;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* ==========================================
   RESPONSIVE - MEDIA QUERYS OPTIMIZADOS
   ========================================== */

/* Móvil y tablet (< 992px) */
@media (max-width: 991.98px) {
    .play-btn-container {
        /* PROXIMIDAD MÓVIL: Aún más cerca para pantallas pequeñas */
        margin: 5px auto 15px auto;
        
        /* ALINEACIÓN: Forzamos el centrado */
        justify-content: center;
        width: 100%; 
    }
}

/* Desktop pequeño (≥ 992px) */
@media (min-width: 992px) {
    .play-btn-container {
        /* DESKTOP: Mantenemos cercanía pero alineamos a la izquierda si el diseño lo pide */
        /* Si prefieres centrado en PC también, deja justify-content: center */
        margin: 10px 0;
        justify-content: flex-start; /* O center si quieres el botón en medio */
    }
}

/* Touch devices */
@media (hover: none) and (pointer: coarse) {
    #playBtn:hover {
        transform: translateZ(0); /* Evita efectos hover raros en toque */
    }
}

/* ==========================================
   BOTÓN DE VOLUMEN ULTRA-PREMIUM 2026
   ========================================== */
.premium-volume-wrapper {
    position: absolute;
    bottom: 20px; /* Dentro del área del círculo en móviles */
    right: 20px;
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(15, 15, 20, 0.4);
    backdrop-filter: blur(12px) saturate(180%);
    padding: 6px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    z-index: 100;
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    width: 42px; /* Cerrado */
    height: 42px;
    overflow: hidden;
    cursor: pointer;
}

/* Expandido */
.premium-volume-wrapper:hover,
.premium-volume-wrapper.active {
    width: 160px;
    background: rgba(20, 22, 30, 0.85);
    border-color: rgba(var(--color-marca-rgb), 0.4);
    padding: 6px 15px;
    box-shadow: 
        0 15px 45px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(var(--color-marca-rgb), 0.2);
}

.volume-btn {
    background: transparent;
    border: none;
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    transition: all 0.3s ease;
}

.volume-btn i {
    filter: drop-shadow(0 0 5px rgba(255,255,255,0.3));
}

.premium-volume-wrapper:hover .volume-btn,
.premium-volume-wrapper.active .volume-btn {
    color: var(--color-marca);
    transform: scale(1.1);
}

.volume-slider-container {
    flex: 1;
    height: 30px;
    display: flex;
    align-items: center;
    margin-left: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.premium-volume-wrapper:hover .volume-slider-container,
.premium-volume-wrapper.active .volume-slider-container {
    opacity: 1;
    pointer-events: auto;
}

/* Estilo del Slider Premium */
#volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background: transparent;
    cursor: pointer;
    height: 30px;
}

/* Track (Fondo de la barra) */
#volume-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* El "Thumb" (Bolita Premium) */
#volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
    margin-top: -7px;
    box-shadow: 
        0 0 15px rgba(var(--color-marca-rgb), 0.8),
        0 0 5px rgba(255, 255, 255, 0.5);
    border: 3px solid var(--color-marca);
    transition: all 0.3s ease;
}

#volume-slider:hover::-webkit-slider-thumb {
    transform: scale(1.2);
    box-shadow: 0 0 25px rgba(var(--color-marca-rgb), 1);
}

/* Responsive PC */
@media (min-width: 992px) {
    .area-reproductor {
        position: relative;
    }
    
    .premium-volume-wrapper {
        bottom: 10px;
        right: 10px;
        background: rgba(15, 15, 20, 0.2);
    }
}

/* Ajuste móvil - Evitar solape con info */
@media (max-width: 575.98px) {
    .premium-volume-wrapper {
        bottom: 15px;
        right: 15px;
    }
}

/* ==========================================
   ACCESIBILIDAD & RENDIMIENTO
   ========================================== */
@media (prefers-reduced-motion: reduce) {
    #playBtn, body.playing #playBtn,
    .play-btn-container::before, .play-btn-container::after {
        animation: none;
        transition: none;
    }
    .play-btn-container::before, .play-btn-container::after { display: none; }
}

#playBtn[aria-busy="true"] {
    cursor: wait;
    opacity: 0.7;
    animation: pulseLoading 1.5s ease-in-out infinite;
}

@keyframes pulseLoading {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 0.9; }
}