/* css/style-audio-players.css */
/* Estilos unificados y finales para los widgets de audio de Respiracción */

/* ===================================================
    Contenedor Base (Wrapper)
====================================================== */
.audio-player-wrapper,
.audio-player-simple-wrapper {
    background-color: var(--color-blanco-puro, #fff);
    padding: 1.5rem 2rem;
    border-radius: 15px;
    border: 1px solid var(--color-gris-borde-seccion, #e0e0e0);
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.07);
    max-width: 600px;
    margin: 2rem auto;
    font-family: 'Poppins', sans-serif;
}

/* ============================
    Títulos y Textos
=============================== */
.audio-player-wrapper .section-title,
.audio-player-simple-wrapper .section-title-small {
    font-family: 'Montserrat', sans-serif;
    color: var(--color-texto-principal-oscuro, #2A3D4F);
    font-size: 1.25rem; /* Ajuste de tamaño */
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-gris-borde-seccion, #e0e0e0);
    text-align: center;
}

.audio-player-controls #audio-title {
    font-family: 'Montserrat', sans-serif;
    color: var(--color-azul-profundo-marino, #022859);
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

/* ============================
    Contenedor "Celestito" para Controles
=============================== */
.layered-audio-controls,
.audio-controls-simple {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1.5rem;
    background-color: var(--color-celeste-claro-bloques, #E0F2FE); /* ¡Aquí está! */
    border-radius: 10px;
    border: 1px solid var(--color-primario-principal-calma, #79afd2);
}

.control-group {
    display: grid;
    grid-template-columns: 140px 1fr 120px;
    align-items: center;
    gap: 1rem;
}

.control-group label {
    font-weight: 500;
    color: var(--color-azul-profundo-marino, #022859);
    font-size: 0.9rem;
    text-align: right;
}

/* ... (El resto de los estilos para selects, sliders, botones, etc., se mantienen como en la versión anterior) ... */
.control-group select,
.control-group .audio-select {
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #a8c5d9;
    background-color: var(--color-blanco-puro, #fff);
}

.control-group input[type="range"] {
    width: 100%;
}

.plyr-container {
    margin: 1.5rem 0;
}
:root {
  --plyr-color-main: var(--color-primario-principal-calma, #79afd2);
}

.download-container,
.play-button-container {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-gris-borde-seccion, #e0e0e0);
}

#download-audio-btn,
#play-pause-btn-simple {
    padding: 12px 28px !important;
    font-size: 1rem !important;
    font-weight: bold !important;
    border-radius: 50px !important;
    border: 2px solid var(--color-dorado-ocre-acento-calido, #ae873e) !important;
    color: var(--color-blanco-puro, #fff) !important;
    background: linear-gradient(145deg, var(--color-azul-corporativo-medio, #295a99), var(--color-azul-profundo-marino, #022859)) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.2s ease-out !important;
    cursor: pointer;
}

#download-audio-btn:hover,
#play-pause-btn-simple:hover {
    background: linear-gradient(145deg, var(--color-primario-principal-calma, #79afd2), var(--color-acento-vibrante-dinamismo, #25c2f2)) !important;
    color: var(--color-azul-profundo-marino, #022859) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}

/* ============================
    ACORDEONES DE CATEGORÍAS
=============================== */
.audio-categories-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.category-section {
    border: 1px solid #a8c5d9;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--color-blanco-puro, #fff);
}

.category-header {
    padding: 0.75rem 1rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-azul-profundo-marino, #022859);
    background-color: var(--color-celeste-claro-bloques, #E0F2FE);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s ease;
    user-select: none;
}

.category-header:hover {
    background-color: #d0ebfe;
}

.category-header .toggle {
    font-size: 0.8rem;
    color: var(--color-primario-principal-calma, #79afd2);
    transition: transform 0.2s ease;
}

.category-content {
    padding: 1rem;
    background-color: var(--color-blanco-puro, #fff);
}

.category-select {
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #a8c5d9;
    background-color: var(--color-blanco-puro, #fff);
    color: var(--color-azul-profundo-marino, #022859);
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23022859' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
    padding-right: 32px;
}

.category-select:focus {
    outline: none;
    border-color: var(--color-primario-principal-calma, #79afd2);
    box-shadow: 0 0 0 2px rgba(121, 175, 210, 0.2);
}

/* ============================
    ESTILOS UNIFICADOS PARA SELECTORES DE AUDIO
=============================== */
.control-group select,
.control-group .audio-select,
#ambient-audio-select,
#binaural-audio-select {
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #a8c5d9;
    background-color: var(--color-blanco-puro, #fff);
    color: var(--color-azul-profundo-marino, #022859);
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.control-group select:focus,
.control-group .audio-select:focus,
#ambient-audio-select:focus,
#binaural-audio-select:focus {
    outline: none;
    border-color: var(--color-primario-principal-calma, #79afd2);
    box-shadow: 0 0 0 2px rgba(121, 175, 210, 0.2);
}

/* Flecha personalizada para los selectores */
#ambient-audio-select,
#binaural-audio-select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23022859' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
    padding-right: 32px;
}

/* ============================
    ESTILOS UNIFICADOS PARA SLIDERS DE VOLUMEN
=============================== */
.control-group input[type="range"],
#ambient-audio-volume,
#binaural-audio-volume {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: #e0e0e0;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.control-group input[type="range"]::-webkit-slider-thumb,
#ambient-audio-volume::-webkit-slider-thumb,
#binaural-audio-volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-primario-principal-calma, #79afd2);
    cursor: pointer;
    border: 2px solid var(--color-blanco-puro, #fff);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.control-group input[type="range"]::-moz-range-thumb,
#ambient-audio-volume::-moz-range-thumb,
#binaural-audio-volume::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-primario-principal-calma, #79afd2);
    cursor: pointer;
    border: 2px solid var(--color-blanco-puro, #fff);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Hover effects */
.control-group input[type="range"]:hover::-webkit-slider-thumb,
#ambient-audio-volume:hover::-webkit-slider-thumb,
#binaural-audio-volume:hover::-webkit-slider-thumb {
    background: var(--color-acento-vibrante-dinamismo, #25c2f2);
    transform: scale(1.1);
}

.control-group input[type="range"]:hover::-moz-range-thumb,
#ambient-audio-volume:hover::-moz-range-thumb,
#binaural-audio-volume:hover::-moz-range-thumb {
    background: var(--color-acento-vibrante-dinamismo, #25c2f2);
    transform: scale(1.1);
}