/* === AUDIO PLAYER COMPONENT === */
/* Reproductor de audio central del header - Componente modular */

/* Importar variables compartidas */
@import url('../../shared/styles/variables.css');

/* ===== CONTENEDOR PRINCIPAL DEL REPRODUCTOR ===== */
/* FIXED: Using grid system from header-container - no absolute positioning */
.header-player {
    display: flex;
    justify-content: center;
    align-items: center;
    width: clamp(180px, 20vw, 220px);
    height: clamp(80px, 10vh, 100px);
    z-index: var(--z-audio-player);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    /* Grid positioning handled by header-container.css */
}

/* ===== ESTILOS BASE PARA BOTONES ===== */
.player-btn {
    background-color: var(--primary-color);
    color: var(--text-color-light);
    border: 2px solid white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    pointer-events: auto;
    outline: none;
}

/* Estados de focus para navegación por teclado */
.player-btn:focus {
    outline: 3px solid var(--accent-color);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 
                0 0 8px rgba(211, 54, 138, 0.6);
}

/* Hover mejorado con mejor contraste */
.player-btn:hover {
    background-color: var(--secondary-color);
    border-color: var(--accent-color);
    transform: scale(1.05);
}

/* ===== BOTÓN PRINCIPAL PLAY/PAUSA ===== */
.main-play-btn {
    width: clamp(50px, 7vw, 70px); /* Tamaño fluido */
    height: clamp(50px, 7vw, 70px);
    font-size: clamp(1.2em, 1.8vw, 1.6em);
    z-index: 940;
    background-color: var(--secondary-color);
    position: absolute; /* Mantener para controles orbitales */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Focus especial para el botón principal */
.main-play-btn:focus {
    outline: 4px solid var(--accent-color);
    outline-offset: 3px;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 
                0 0 15px rgba(211, 54, 138, 0.8);
}

/* Ajustar posición del icono de play para balance visual */
.main-play-btn .fa-play {
    margin-left: 3px;
    /* Desplazar ligeramente a la derecha para mejor equilibrio visual */
}

/* Centrar icono de pausa */
.main-play-btn .fa-pause {
    margin-left: 0px;
    /* La pausa está naturalmente centrada */
}

/* Ocultar el icono de Pausa por defecto */
.main-play-btn .fa-pause {
    display: none;
}

/* Ocultar el icono de mute por defecto */
.mute-btn .fa-volume-xmark {
    display: none;
}

/* ===== BOTONES DE CONTROL SECUNDARIOS ===== */
.control-btn {
    width: 30px;
    height: 30px;
    font-size: 0.8em;
    z-index: 930;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    border: 2px solid var(--accent-color);
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: rgba(86, 9, 54, 0.95);
    color: var(--text-color-light);
}

/* ===== BOTONES DE VOLUMEN ===== */
.volume-btn {
    width: 28px;
    height: 28px;
    font-size: 0.8em;
    z-index: 930;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    border: 2px solid var(--accent-color);
    border-radius: 50%;
    background-color: rgba(86, 9, 54, 0.95);
    color: var(--text-color-light);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: absolute;
    left: 50%;
    top: 50%;
}

/* ===== INDICADOR DE VOLUMEN ===== */
.volume-indicator {
    background-color: rgba(86, 9, 54, 0.95);
    color: var(--text-color-light);
    border: 2px solid var(--accent-color);
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 0.85em;
    font-weight: 600;
    min-width: 45px;
    text-align: center;
    z-index: 935;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: absolute;
    left: 50%;
    top: 50%;
}

/* ===== INDICADOR DE TIEMPO DE REPRODUCCIÓN ===== */
.playback-time-indicator {
    display: flex;
    align-items: center;
    color: var(--text-color-muted);
    font-size: 0.85em;
    font-weight: 500;
    margin-left: 15px;
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    min-width: 50px;
    justify-content: center;
}

.header-player.is-playing .playback-time-indicator {
    color: var(--text-color-light);
    background: rgba(var(--accent-color-rgb), 0.2);
}

/* ===== HINT VISUAL PARA CONTROLES ===== */
.header-player:not(.is-playing):hover::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 60px;
    border: 1px dashed rgba(211, 54, 138, 0.3);
    border-radius: 50px 50px 50px 50px / 30px 30px 30px 30px;
    pointer-events: none;
    animation: hint-pulse 2s infinite ease-in-out;
}

@keyframes hint-pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

/* ===== ESTADO HOVER: MOSTRAR CONTROLES ===== */
.header-player:hover .main-play-btn {
    transform: translate(-50%, -50%) scale(1.1);
}

/* ===== DISPOSICIÓN DE CONTROLES (SEMICÍRCULO) ===== */
/* Stop: 200° (izquierda) */
.header-player.is-playing:hover .stop-btn {
    opacity: 1;
    transform: translate(-50%, -50%) translate(-52px, 19px) scale(1);
}

/* Mute: 340° (derecha) */
.header-player.is-playing:hover .mute-btn {
    opacity: 1;
    transform: translate(-50%, -50%) translate(52px, 19px) scale(1);
}

/* Volume Down: 230° */
.header-player.is-playing:hover .volume-down-btn {
    opacity: 1;
    transform: translate(-50%, -50%) translate(-42px, 33px) scale(1);
}

/* Volume Up: 310° */
.header-player.is-playing:hover .volume-up-btn {
    opacity: 1;
    transform: translate(-50%, -50%) translate(42px, 33px) scale(1);
}

/* Volume Indicator: 270° (centro inferior) */
.header-player.is-playing:hover .volume-indicator {
    opacity: 1;
    transform: translate(-50%, -50%) translate(0px, 45px) scale(1);
}

/* ===== ESTADOS DEL REPRODUCTOR ===== */
/* Estado Playing */
.header-player.is-playing .main-play-btn {
    background-color: var(--accent-color);
}

.header-player.is-playing .main-play-btn .fa-play {
    display: none;
}

.header-player.is-playing .main-play-btn .fa-pause {
    display: inline;
}

/* Estado Muted */
.header-player.is-muted .mute-btn {
    background-color: #D32F2F;
    border-color: #FFCDD2;
    color: white;
}

.header-player.is-muted .mute-btn .fa-volume-off {
    display: none;
}

.header-player.is-muted .mute-btn .fa-volume-xmark {
    display: inline;
}

.header-player.is-muted:hover .mute-btn {
    background-color: #B71C1C;
}

/* ===== ANILLO VISUAL (DECORATIVO) ===== */
.header-player::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: 90px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    pointer-events: none;
    z-index: 910;
    transition: all 0.3s ease;
}

.header-player.is-playing::after {
    width: 140px;
    height: 100px;
    border-color: rgba(211, 54, 138, 0.4);
    border-width: 2px;
    border-radius: 70px;
    animation: playing-pulse 2s infinite ease-in-out;
}

@keyframes playing-pulse {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.4;
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.05);
        opacity: 0.6;
    }
}

/* ===== RESPONSIVE DESIGN MEJORADO ===== */
/* Sistema anti-solapamiento con posicionamiento inteligente */

/* DESKTOP: Tamaños optimizados */
@media (min-width: 1200px) {
    .header-player {
        width: 220px;
        height: 100px;
    }
}

/* TABLET: Ajuste inteligente para navegación compacta */
@media (min-width: 769px) and (max-width: 1199px) {
    .header-player {
        left: 50%; /* Mantener centrado */
        width: clamp(160px, 18vw, 200px);
        height: clamp(70px, 8vh, 90px);
    }
    
    .main-play-btn {
        width: clamp(45px, 6vw, 60px);
        height: clamp(45px, 6vw, 60px);
        font-size: clamp(1.1em, 1.5vw, 1.4em);
    }
}

/* MÓVIL: Reproductor prominente y usable */
@media (max-width: 768px) {
    .header-player {
        left: 50%;
        top: calc(100% - 10px); /* Más cerca del header */
        transform: translate(-50%, -50%);
        width: min(85%, 280px);
        height: clamp(60px, 12vw, 80px);
    }
    
    .main-play-btn {
        width: clamp(45px, 8vw, 55px);
        height: clamp(45px, 8vw, 55px);
        font-size: clamp(1.1em, 2vw, 1.3em);
    }
    
    .player-btn {
        width: clamp(24px, 4vw, 32px);
        height: clamp(24px, 4vw, 32px);
        font-size: clamp(0.7em, 1.2vw, 0.9em);
    }
    
    .volume-indicator {
        font-size: clamp(0.7em, 1.4vw, 0.9em);
        padding: clamp(3px, 1vw, 6px) clamp(6px, 2vw, 10px);
        min-width: clamp(25px, 6vw, 40px);
    }
}

/* RECORDATORIO: Este componente requiere:
   - Font Awesome icons: fa-play, fa-pause, fa-stop, fa-volume-off, fa-volume-xmark, fa-minus, fa-plus
   - Variables CSS: --primary-color, --secondary-color, --accent-color, --text-color-light, --z-audio-player
   - JavaScript: event handling para todos los controles + detección de solapamiento
   - Audio API: Para funcionalidad real de audio en el futuro
   - CRÍTICO: Z-index configurado para estar por encima del menú dropdown (960 > 950)
   - CRÍTICO: Sistema responsive ajusta posición según espacio disponible del menú
   - CRÍTICO: Header con altura FIJA de 60px en todas las resoluciones para UX consistente
   - CRÍTICO: Elementos del reproductor ajustados para encajar en header de 60px
*/