/* public/css/radio-player.css */
body {
    /* El padding-bottom ya se aplica en el layout principal con style */
}

.radio-player-custom-bg {
    /* Usamos variables CSS de Bootstrap si es posible, o valores directos */
    /* background: linear-gradient(to right, var(--bs-primary), var(--bs-indigo)); */
    background: linear-gradient(to right, #0d6efd, #6610f2); /* Ejemplo de colores Bootstrap */
    /* O tu gradiente original:
    background: linear-gradient(to right, #6d28d9, #4f46e5);
    */
}

/* Si quieres que los botones tengan un ligero fondo al estilo Tailwind */
.player-controls button,
.volume-controls button {
    /* background-color: rgba(255, 255, 255, 0.15); */
    /* border-color: rgba(255, 255, 255, 0.2); */
}
.player-controls button:hover,
.volume-controls button:hover {
    /* background-color: rgba(255, 255, 255, 0.25); */
}

.time-display-bs {
    min-width: 35px;
    text-align: center;
    font-size: 0.8rem;
}

/* Ajustes para el input range de progreso (deshabilitado) */
#progressBar.form-range {
    height: 6px;
    padding: 0; /* Quitar padding por defecto de form-range */
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    cursor: default;
}

#progressBar.form-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 0;
    height: 0;
}
#progressBar.form-range::-moz-range-thumb {
    width: 0;
    height: 0;
    border: none;
}

/* Estilos para el slider de volumen (form-range de Bootstrap ya es bastante bueno) */
#volumeSlider.form-range {
    height: 4px;
    padding: 0;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}
#volumeSlider.form-range::-webkit-slider-thumb {
    width: 12px;
    height: 12px;
    background-color: white;
    margin-top: -4px; /* Ajuste vertical */
}
#volumeSlider.form-range::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background-color: white;
    border: none;
}

/* Responsividad para el reproductor */
@media (max-width: 767.98px) { /* Abajo de md */
    #audioPlayerContainer {
        padding: 0.5rem; /* Menos padding en móvil */
    }
    #songTitle {
        font-size: 0.9rem;
    }
    #songArtist {
        font-size: 0.75rem;
    }
    .player-controls button {
        /* El tamaño ya está ajustado por style en el HTML */
    }
    .volume-controls #volumeSlider {
        max-width: 70px; /* Reducir ancho del control de volumen */
    }
}