/* ═══════════════════════════════════════════════════════════════════════════════
   17. NOTIFICACIONES SONORAS
   Botón de sonido y estados de audio
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Botón de sonido en estados */
#soundBtn {
    position: relative;
    transition: all 0.3s ease;
}

#soundBtn.sound-disabled {
    color: #8696a0;
    opacity: 0.6;
}

#soundBtn.sound-disabled:hover {
    color: #d32f2f;
}

#soundBtn:not(.sound-disabled):hover {
    color: #25D366;
}

/* Indicador visual de estado */
#soundBtn::after {
    content: '';
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #25D366;
    transition: all 0.3s ease;
}

#soundBtn.sound-disabled::after {
    background: #d32f2f;
}

/* Animación al reproducir sonido */
@keyframes soundPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

#soundBtn.playing {
    animation: soundPulse 0.3s ease;
}

/* Tooltip mejorado para el botón */
#soundBtn[title]::before {
    white-space: nowrap;
}