/* Estilos básicos para el botón */
.responsive-button {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  overflow: hidden; /* Importante para contener la animación */
  transition: background-color 0.3s ease;
}

.responsive-button:hover {
  background-color: #0056b3;
}

/* Estilos para la imagen (icono) */
.button-icon {
  margin-right: 10px;
  transition: transform 0.3s ease-in-out, width 0.3s ease; /* Transiciones suaves */
}

/* Animaciones de hover en la imagen */
.responsive-button:hover .button-icon {
  /* Al pasar el ratón: mover, girar y agrandar */
  transform: translateX(5px) rotate(15deg) scale(1.2);
}

/* Animación de pulso continuo (opcional) */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.responsive-button.active .button-icon {
  animation: pulse 1s infinite;
}

/* Estilos para el texto del botón */
.responsive-button span {
  font-size: 16px;
}

/* --- Estilos del Icono de Pausa (Frente) --- */
        .pause-icon {
            position: relative;
            z-index: 2; /* Asegura que esté sobre las ondas */
            width: 28px;
            height: 28px;
            fill: #fff; /* Color blanco para el icono */
            transition: fill 0.3s;
        }

        /* --- Estilos del SVG de Ondas de Fondo --- */
        .radio-waves-svg {
            position: absolute;
            top: 50%;
            left: 5%;
            transform: translate(-50%, -50%); /* Centrado perfecto */
            width: 160px; /* Más grande que el botón para que las ondas salgan */
            height: 160px;
            z-index: 1; /* Detrás del icono de pausa */
            pointer-events: none; /* No interfiere con los clics */
            visibility: hidden; /* Oculto por defecto */
            opacity: 0;
            transition: opacity 0.5s, visibility 0.5s;
        }

        .radio-waves-svg-2 {
            position: absolute;
            top: 50%;
            right: -5%;
            transform: translate(-50%, -50%); /* Centrado perfecto */
            width: 160px; /* Más grande que el botón para que las ondas salgan */
            height: 160px;
            z-index: 1; /* Detrás del icono de pausa */
            pointer-events: none; /* No interfiere con los clics */
            visibility: hidden; /* Oculto por defecto */
            opacity: 0;
            transition: opacity 0.5s, visibility 0.5s;
        }

        /* --- CLASE ACTIVA: Cuando WRADIO está sonando --- */
        .responsive-button.playing {
            border-color: #ff4500; /* Borde naranja intenso al reproducir */
            box-shadow: 0 0 20px rgba(255, 69, 0, 0.4);
        }

        .responsive-button.playing .radio-waves-svg, .responsive-button.playing .radio-waves-svg-2 {
            visibility: visible;
            opacity: 1;
        }

        .responsive-button.playing .pause-icon {
            fill: #ff4500; /* El icono también se vuelve naranja */
        }