/* Overlay para hacer más clara la imagen de fondo del horario */

/* Crear un pseudo-elemento para la capa de overlay */
#schedule {
    position: relative !important;
}

#schedule::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Capa blanca semi-transparente para aclarar la imagen */
    background-color: rgba(255, 255, 255, 0.85);
    /* Alternativa: gradiente para un efecto más suave */
    /* background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.4)); */
    z-index: 1;
    pointer-events: none;
}

/* Asegurar que el contenido esté por encima del overlay */
#schedule .container {
    position: relative;
    z-index: 2;
}

#schedule .section-heading,
#schedule .row,
#schedule .schedule-filter,
#schedule .schedule-cards,
#schedule .schedule-table-wrapper {
    position: relative;
    z-index: 2;
}

/* Para modo oscuro - capa oscura semi-transparente */
body:not(.light-theme) #schedule::before,
.dark-theme #schedule::before {
    /* Capa oscura con transparencia para modo oscuro */
    background-color: rgba(0, 0, 0, 0.4);
    /* Alternativa con gradiente */
    /* background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)); */
}

/* Opción alternativa: usar un filtro de brillo en lugar de overlay */
/* 
#schedule {
    position: relative;
    filter: brightness(1.3) contrast(0.9);
}
*/

/* Ajuste adicional para mejorar la legibilidad del texto */
#schedule .section-heading h2,
#schedule .section-heading p {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* En modo oscuro, sombra más clara */
body:not(.light-theme) #schedule .section-heading h2,
body:not(.light-theme) #schedule .section-heading p,
.dark-theme #schedule .section-heading h2,
.dark-theme #schedule .section-heading p {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}