/* ---------------------------------------------------------------- */
/* ESTILO DE REPRODUCTOR MINIMALISTA (ESTILO APPLE)                 */
/* ---------------------------------------------------------------- */

.audio-apple-style {
    /* Contenedor principal para la sombra suave */
    max-width: 100%; /* Opcional: Define el ancho máximo si lo necesitas */
    border-radius: 12px;
    background-color: #f9f9f9; /* Fondo muy claro, casi blanco */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Sombra muy sutil */
    padding: 15px; /* Espacio interno */
    margin: 20px 0;
    transition: box-shadow 0.3s ease-in-out;
}

/* Efecto hover: se "levanta" ligeramente al pasar el ratón */
.audio-apple-style:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

/* Estilo para los controles internos del reproductor */
.audio-apple-style audio {
    width: 100%;
    /* Quitar el color de fondo del reproductor por defecto */
    background-color: transparent !important; 
}

/* Modificar los botones del reproductor (Play/Pausa) */
/* (El estilo de los botones del reproductor nativo es difícil de cambiar con CSS simple, 
/* pero ajustamos el color de acento para integrarlo mejor) */
.audio-apple-style audio::-webkit-media-controls-panel {
    background-color: transparent;
}

/* Cambiar el color de la barra de progreso (la barra de acento) */
.audio-apple-style audio::-webkit-media-controls-timeline,
.audio-apple-style audio::-webkit-media-controls-current-time-display,
.audio-apple-style audio::-webkit-media-controls-time-remaining-display {
    color: #333333; /* Texto en gris oscuro */
}

/* Cambiar el color del acento (barra de progreso y volumen) */
.audio-apple-style audio::-webkit-media-controls-play-button,
.audio-apple-style audio::-webkit-media-controls-mute-button,
.audio-apple-style audio::-webkit-media-controls-volume-slider,
.audio-apple-style audio::-webkit-media-controls-timeline-container {
    color: #007aff; /* Azul de Apple o color de acento principal */
}

/* Para navegadores Firefox (que usan prefijos diferentes) */
.audio-apple-style audio::-moz-range-track {
    background: #dddddd;
}
.audio-apple-style audio::-moz-range-thumb {
    background: #007aff;
}

/* Intenta cambiar el color usando 'fill' con alta especificidad */
.elementor-menu-toggle .e-font-icon.svg-e-fas-align-justify svg {
    fill: #FFFFFF !important; /* Prueba con un color llamativo como el rojo para ver si funciona */
}