/* style.css */
body {
    font-family: 'Montserrat', sans-serif; /* Ejemplo de fuente principal */
    margin: 0;
    padding-bottom: 3cm; /* Espacio para la barra del reproductor */
    box-sizing: border-box;
    background-color: #0; /* Un fondo oscuro para un look más profesional */
}

.barra-player {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3cm;
    background-color: #282828; /* Un tono más oscuro para la barra */
    color: #eee; /* Texto más claro */
    display: flex;
    align-items: center;
    padding: 0 20px; /* Reducir un poco el padding horizontal */
    box-sizing: border-box;
    z-index: 1000; /* Asegura que esté sobre otros elementos */
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.3); /* Sutil sombra superior */
    justify-content: space-between; /* Distribuir elementos */
}

.radio-info,
.social-buttons,
.metadata,
.controls,
.player-controller { /* [NUEVO] Añadir player-controller */
    position: relative; /* Para que el z-index funcione */
    z-index: 10; /* Asegura que estén por encima del visualizador (z-index: 0) */
    white-space: nowrap; /* Evitar que los elementos se envuelvan */
}

.radio-info {
    display: flex;
    align-items: center;
    flex-shrink: 0; /* Evitar que se encoja */
}

.radio-logo {
    height: 3.5cm; /* Ligeramente más pequeño */
    margin-right: 10px;
    border-radius: 5px; /* Un poco de redondeo */
}

.radio-name {
    font-size: 1em; /* Aumentar un poco el tamaño */
    margin: 0;
    font-weight: 800; /* Un peso de fuente más ligero */
    font-family: 'akira expanded', sans-serif; /* [MODIFICADO] Usar akira expanded */
}

.social-buttons {
    margin-left: auto;
    margin-right: 20px; /* Ajustar margen derecho */
    flex-shrink: 0; /* Evitar que se encoja */
}

.social-buttons a {
    color: #bbb; /* Color de los iconos sociales */
    font-size: 1.8em; /* Ligeramente más pequeños */
    margin-left: 10px;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.social-buttons a:hover {
    color: #eee; /* Cambiar color al pasar el ratón */
}

.metadata {
    display: flex;
    align-items: center;
    margin-right: 20px; /* Reducir un poco el margen derecho */
    flex-shrink: 1; /* Permitir que se encoja si es necesario */
    overflow: hidden; /* Para que el contenido interno no se desborde */
}

.player-cover {
    width: 3.5cm; /* Ligeramente más pequeño */
    height: 3cm; /* Ligeramente más pequeño */
    overflow: hidden;
    border-radius: 3px;
    margin-right: 8px;
    background-color: #333; /* Fondo mientras carga la imagen */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0; /* Evitar que se encoja */
}

.player-cover.loading::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #eee; /* Color del spinner */
    border-top-color: transparent;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; /* Evita espacio extra debajo de la imagen */
}

.song-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden; /* Para que el texto no se desborde */
}

.song-title {
    font-size: 1.0em; /* Ajustar el tamaño del título */
    margin-bottom: 2px; /* Reducir un poco el margen inferior */
    margin-top: 0;
    font-weight: 600; /* Un poco más de énfasis */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.song-artist {
    font-size: 0.7em; /* Ajustar el tamaño del artista */
    margin: 0;
    color: #bbb;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.controls {
    display: flex;
    align-items: center;
    flex-shrink: 0; /* Evitar que se encoja demasiado */
    margin-left: auto; /* Mover los controles a la derecha en pantallas grandes */
    margin-right: 2cm; /* Añadir un margen derecho para moverlos a la izquierda */
}

.controls.player-controller {
    gap: 10px; /* Espacio entre los botones de control */
}

.player-button {
    background-color: white; /* Fondo blanco para ambos botones */
    color: #888; /* Color inicial de los iconos */
    border-radius: 50%; /* Forma circular */
    width: 40px; /* Reducir el tamaño de los botones */
    height: 40px; /* Reducir el tamaño de los botones */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em; /* Reducir el tamaño de los iconos */
    cursor: pointer;
    border: none;
    outline: none;
    transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out; /* Transición para color y tamaño */
    position: relative; /* Para posicionar el slider de volumen */
    overflow: visible; /* Para que el slider sea visible al superponerse */
    margin-left: 5px; /* Reducir el espacio entre los botones */
}

.player-button:first-child {
    margin-left: 0; /* Eliminar margen izquierdo del primer botón */
}

.player-button:hover {
    background-color: #f0f0f0; /* Cambia el color al pasar el ratón */
    transform: scale(1.05); /* Ligeramente más grande al pasar el ratón */
}

/* Estilos específicos para el botón de Play/Pause (mantener el efecto de onda) */
.player-button-play {
    /* Conserva los estilos de tamaño, forma, etc. del .player-button */
}

.player-button-play::after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: rgba(0, 123, 255, 0.4); /* Azul con transparencia */
    opacity: 0;
    top: 0;
    left: 0;
    transform: scale(0);
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
    z-index: -1; /* Detrás del icono */
}

.player-button-play.playing::after {
    transform: scale(1.5); /* Expande la onda */
    opacity: 1;
}

@keyframes pulse-blue {
    0% { transform: scale(1); opacity: 0.6; }
    80% { transform: scale(1.4); opacity: 0; }
    100% { transform: scale(1.4); opacity: 0; }
}

.player-button-play::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: rgba(0, 123, 255, 0.3); /* Otro tono de azul */
    z-index: -2;
    animation: pulse-blue 2s infinite;
}

/* Estilos para el botón de volumen y el slider */
.volume-button {
    /* Hereda los estilos de .player-button */
    font-size: 1.4em; /* Ajustar tamaño del icono del volumen */
}

.controls.player-controller {
  position: relative; /* Contexto para el posicionamiento absoluto del slider */
  display: flex;
  align-items: center;
  justify-content: center; /* Centrar los botones horizontalmente */
  gap: 20px; /* Espacio entre los botones (ajusta según necesites) */
  /* Otros estilos */
}

.volume-button {
  /* Estilos para el botón de volumen */
  z-index: 10; /* Asegurar que esté por encima del slider cuando el slider no esté activo */
}

.player-button-play {
  /* Estilos para el botón de play/pausa */
  z-index: 10; /* Asegurar que esté por encima del slider cuando el slider no esté activo */
}

.volume-slider {
  -webkit-appearance: none;
  appearance: none;
  position: absolute; /* Para posicionarlo sobre los botones */
  z-index: 5; /* Estará por debajo de los botones inicialmente */
  background: #f0f0f0;
  border-radius: 8px;
  height: 10px;
  width: 120px;
  cursor: pointer;
  bottom: 100%; /* Colocar la parte superior del slider justo encima del contenedor */
  /*
  |--------------------------------------------------------------------------
  | Ajuste del Centrado Horizontal
  |--------------------------------------------------------------------------
  |
  | La propiedad 'left' establece el punto de inicio horizontal del slider.
  | Un valor de 50% lo coloca en la mitad del contenedor padre.
  |
  | La propiedad 'transform: translateX(-50%)' desplaza el slider hacia la
  | izquierda en la mitad de su propio ancho, lo que lo centra correctamente.
  |
  | Si el slider aparece demasiado a la derecha, puedes reducir el valor de 'left'
  | ligeramente por debajo de 50% (ej: 48%, 49%).
  |
  | Si el slider aparece demasiado a la izquierda, puedes aumentar el valor de 'left'
  | ligeramente por encima de 50% (ej: 51%, 52%).
  |
  | También puedes ajustar el valor negativo en 'translateX()' para un ajuste fino.
  | Un valor menor (ej: -48%) lo moverá más a la derecha, y un valor mayor
  | (ej: -52%) lo moverá más a la izquierda.
  |
  */
  left: -10%; /* Punto de inicio horizontal - **GRADÚA AQUÍ (disminuye para ir a la izquierda)** */
  transform: translateX(-20%); /* Ajuste de centrado - **GRADÚA AQUÍ (disminuye para ir a la derecha, aumenta para ir a la izquierda)** */
  margin-bottom: 10px; /* Espacio entre el slider y los botones (ajusta según necesites) */
  display: none; /* Inicialmente oculto */
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #ff6b6b;
  border-radius: 10px;
  cursor: pointer;
  border: 2px solid #e34a4a;
}

.volume-slider::-moz-range-track {
  background: #f0f0f0;
  border-radius: 8px;
  height: 10px;
  cursor: pointer;
  border: none;
}

.volume-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #ff6b6b;
  border-radius: 10px;
  cursor: pointer;
  border: 2px solid #e34a4a;
}.visualizer-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%; /* Aumentar un poco la altura */
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
    opacity: 1; /* Asegurar que sea visible por defecto */
    transition: opacity 0.3s ease-in-out; /* Transición para la visibilidad */
    filter: blur(2px); /* Ajustar el desenfoque */
    /* background-color: rgba(0, 0, 0, 0.8); Eliminar o comentar esta línea */
}

.visualizer-container.visualizer-hidden {
    opacity: 0;
}

#audio-visualizer {
    display: block;
    width: 100%;
    height: 100%;
}

.dynamic-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0.25; /* Un fondo dinámico muy sutil */
    z-index: -1; /* Asegúrate de que el fondo dinámico esté aún más abajo */
}

/* Estilos para las fuentes */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
@import url('https://fonts.cdnfonts.com/css/akira-expanded'); /* [MODIFICADO] Importar akira expanded */

body {
    font-family: 'Montserrat', sans-serif;
}

/* Para pantallas más pequeñas (móviles en horizontal y tablets pequeñas) */
@media (max-width: 768px) {
    .barra-player {
        height: auto; /* Ajustar altura automáticamente */
        flex-direction: row; /* Volver a la disposición horizontal */
        padding: 10px 15px; /* Reducir un poco el padding */
        align-items: center; /* Centrar verticalmente */
        justify-content: space-between; /* Distribuir los elementos */
    }

    .radio-info {
        display: none; /* Ocultar en pantallas pequeñas */
        margin-bottom: 0; /* Eliminar margen inferior */
        align-items: center;
        flex-direction: row; /* Logo y nombre en la misma línea */
        justify-content: flex-start; /* Alinear a la izquierda */
        text-align: left; /* Alinear el texto a la izquierda */
        flex-shrink: 0; /* Evitar que se encoja */
    }

    .radio-logo {
        height: 30px; /* Reducir el tamaño del logo */
        margin-right: 8px; /* Reducir el espacio */
        margin-bottom: 0;
    }

    .radio-name {
        font-size: 0.9em; /* Reducir el tamaño del nombre */
    }

    .metadata {
        display: flex;
        flex-direction: row; /* Mantener en fila para que cover y texto estén juntos */
        align-items: center; /* Alinear verticalmente */
        margin-right: 10px; /* Reducir el margen derecho */
        margin-bottom: 0;
        text-align: left;
        justify-content: flex-start;
        flex-shrink: 1; /* Permitir que se encoja */
        overflow: hidden;
    }

    .player-cover {
        width: 80px; /* Reducir el tamaño del cover */
        height: 80px; /* Reducir el tamaño del cover */
        margin-right: 8px; /* Reducir el margen */
        margin-bottom: 0; /* Eliminar margen inferior */
    }

    .song-details {
        text-align: left;
        margin-left: 0;
        flex-grow: 1;
        overflow: hidden;
    }

    .song-title {
        font-size: 0.9em; /* Reducir el tamaño del título */
        margin-bottom: 2px;
    }

    .song-artist {
        font-size: 0.7em; /* Reducir el tamaño del artista */
    }

    .social-buttons {
        display: none; /* Ocultar en pantallas pequeñas */
        order: 1; /* Mover visualmente a la derecha */
        margin-left: 10px;
        margin-right: 0;
        margin-bottom: 0;
        flex-direction: row; /* Botones en fila horizontal */
        justify-content: flex-end; /* Alinear a la derecha */
        align-items: center; /* Centrar verticalmente */
        flex-shrink: 0;
    }

    .social-buttons a {
        font-size: 1em; /* Reducir el tamaño de los iconos sociales */
        margin: 0 6px;
    }

    .controls {
        margin-right: 0;
        margin-bottom: 0;
        display: flex;
        justify-content: flex-end; /* Alinear a la derecha */
        margin-left: 10px;
        flex-shrink: 0;
    }

    .controls.player-controller {
        gap: 5px; /* Reducir el espacio entre los botones */
        margin-left: auto; /* Mantener a la derecha */
    }

    .player-button {
        width: 30px; /* Reducir aún más el tamaño de los botones */
        height: 30px; /* Reducir aún más el tamaño de los botones */
        font-size: 1em; /* Reducir aún más el tamaño de los iconos */
        margin: 0 3px;
    }

    .volume-slider {
        width: 50px; /* Reducir el ancho del slider en pantallas pequeñas */
    }

    .visualizer-container {
        height: 40px; /* Reducir la altura del visualizador */
    }
}

/* Diseño específico para pantallas muy pequeñas (móviles) */
@media (max-width: 480px) {
    .metadata {
        flex-direction: row; /* Mantener en fila */
        align-items: center; /* Alinear verticalmente */
        margin-left: 10px;
        margin-right: 10px;
    }
    .player-cover {
        margin-right: 8px;
        margin-bottom: 0; /* Eliminar margen inferior */
    }
    .song-details {
        overflow: hidden;
    }
    .social-buttons {
        display: none; /* Ocultar también en móviles muy pequeños */
        order: 1; /* Mantener a la derecha */
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        margin-left: 10px;
        margin-right: 0;
        margin-bottom: 0;
    }
    .controls {
        margin-left: auto; /* Mantener a la derecha */
        margin-right: 0;
    }
}

/* Estilos para pantallas grandes (ancho mínimo de 769px) */
@media (min-width: 769px) {
    .social-buttons {
        display: flex; /* Mostrar los botones de redes sociales */
    }

    .radio-info {
        display: flex; /* Mostrar el logo y nombre de la radio */
    }

    .barra-player {
        justify-content: space-between; /* Asegurar la distribución en pantallas grandes */
        padding: 0 20px;
    }

    .metadata {
        margin-right: 30px; /* Mantener la separación en pantallas grandes */
    }

    .controls {
        margin-left: auto; /* Mantener los controles a la derecha en pantallas grandes */
        margin-right: 2cm; /* Mover los controles 2cm a la izquierda en pantallas grandes */
    }
}