/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/

/* Contenedor principal oscuro */
.reproductor-ondas-contenedor {
    display: flex;
    align-items: center;
    background-color: #ffffff00; /* Fondo oscuro de tu imagen */
    padding: 15px 15px 15px 0px;
    border-radius: 8px;
    gap: 15px;
    width: 100%;
    max-width: 400px; /* Ajusta según necesites */
}

/* --- Estilos del Botón Play/Pausa --- */

.reproductor-ondas-contenedor .btn-play-pausa {
    /* ESTADO NORMAL */
    background-color: #c82333; /* Fondo ROJO */
    color: white;              /* Icono BLANCO */
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    flex-shrink: 0;

    /* IMPORTANTE: Añadimos 'color' a la transición para que el icono cambie suavemente */
    transition: background-color 0.3s ease, color 0.3s ease;

    /* Ajuste de posición del icono a la izquierda (que vimos antes) */
    padding-right: 0;
    padding-left: 0;
}

/* --- NUEVO ESTADO HOVER (Invertido) --- */
.reproductor-ondas-contenedor .btn-play-pausa:hover {
    background-color: #ffffff; /* Al pasar el ratón: Fondo BLANCO */
    color: #c82333;            /* Al pasar el ratón: Icono ROJO */
}

/* Ajuste para centrar el icono de pausa cuando está reproduciendo */
.reproductor-ondas-contenedor .btn-play-pausa.isPlaying {
    padding-right: 0;
}

/* Contenedor de la onda */
.reproductor-ondas-contenedor .onda-contenedor {
    flex-grow: 1;
    height: 40px;
}

/* Ocultar el icono de pausa por defecto */
.reproductor-ondas-contenedor .icono-pausa {
    display: none;
}

/* Cuando está reproduciendo: Ocultar Play y Mostrar Pausa */
.reproductor-ondas-contenedor .btn-play-pausa.isPlaying .icono-play {
    display: none;
}

.reproductor-ondas-contenedor .btn-play-pausa.isPlaying .icono-pausa {
    display: flex;
    justify-content: center;
    align-items: center;
}