/* Paleta de colores sugerida: Azul oscuro, gris y blanco, profesional y limpio */
:root {
    --colegio-primary: #003366; /* Un azul marino corporativo */
    --colegio-secondary: #f8f9fa; /* Un gris muy claro para fondos */
    --colegio-accent: #dee2e6; /* Un gris para bordes */
}

body {
    background-color: var(--colegio-secondary);
}

header h1 {
    color: var(--colegio-primary);
    font-weight: 300; /* Letra más fina y elegante */
}

/* Contenedor de la lista de galerías con scroll */
.gallery-list-wrapper {
    height: 75vh; /* Altura máxima del 75% de la ventana */
    overflow-y: auto; /* Scroll vertical si el contenido excede la altura */
    padding-right: 15px;
    border-right: 1px solid var(--colegio-accent);
}

.month-header {
    color: var(--colegio-primary);
    border-bottom: 2px solid var(--colegio-primary);
    padding-bottom: 5px;
}

.list-group-item {
    border: none;
    padding: 0;
}

/* Estilo de los enlaces de cada galería */
.gallery-link {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.gallery-link:hover {
    background-color: #e9ecef;
    color: #000;
}

/* Clase que se añade con JS al link activo */
.gallery-link.active {
    background-color: var(--colegio-primary);
    color: white;
    font-weight: bold;
}

/* Estilos para las miniaturas (thumbnails) */
#thumbnail-container .img-thumbnail {
    border: 1px solid var(--colegio-accent);
    padding: 4px;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

#thumbnail-container a:hover .img-thumbnail {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.initial-message {
    height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Estilo para Lightbox */
.lb-data .lb-caption {
    font-size: 1rem;
}