/*
 * Archivo de estilos para Rutas y Aventuras /css/style.css
 */

/* Estilo general del cuerpo y fuente */
body {
    font-family: 'Raleway', sans-serif;
}

/* Estilos para los elementos de la galería */
.gallery-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* Estilos para los enlaces de navegación */
.nav-link {
    transition: color 0.3s;
}

.nav-link:hover {
    color: #38bdf8; /* light blue */
}

/* Estilos para el botón principal */
.btn-primary {
    background-color: #0ea5e9; /* sky-500 */
    transition: background-color 0.3s;
}

.btn-primary:hover {
    background-color: #0284c7; /* sky-600 */
}

/* --- ESTILOS DEL SLIDER --- */
.slide.active {
    opacity: 1;
}

.slider-dot {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}

.slider-dot.active {
    background-color: white;
}


/* --- ESTILOS DEL REPRODUCTOR DE MÚSICA --- */

.playlist-item-clickable {
    cursor: pointer;
}

/* Estilo para la canción activa en la lista */
.playlist-item.active-song {
    background-color: #e0f2fe; /* sky-100 */
}
.playlist-item.active-song .font-bold {
    color: #0c4a6e; /* sky-900 */
}

/* Estilo para el botón de aleatorio activo */
#shuffle-music.active {
    color: #0ea5e9; /* sky-500 */
}

/* --- ESTILOS DEL MODAL DE DESCARGA --- */
#download-modal {
    transition: opacity 0.3s ease;
}