/* Variables de Colores */
:root {
    --ford-blue: #003366; /* O #0078CF */
    --unam-blue: #001E44;
    --unam-gold: #8C7B38; /* O #FFD100 */
    --white: #FFFFFF;
    --light-gray: #F0F0F0;
    --dark-gray: #333333;
    --category-tech: #0482ff;
    --category-taller: #f57d1a;
    --category-ls: #B40CF7;
    --category-ss: #87e748;
    --category-show: #f7dc0a;
}

/* Reset y Estilos Generales */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: var(--dark-gray);
    background-color: var(--light-gray);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Encabezado */
.site-header {
    background-color: var(--unam-blue);
    color: var(--white);
    padding: 20px 0;
    border-bottom: 5px solid var(--unam-gold);
    background-image: "img/banner-header.png"
    
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Para que los logos se ajusten en móviles */
    text-align: center;
}

.site-header h1 {
    font-size: 2.2em;
    margin: 0 20px;
    color: var(--white);
    flex-grow: 1; /* Permite que el título ocupe espacio */
}

.logo {
    max-height: 80px; /* Ajusta el tamaño de los logos */
    width: auto;
}

/* Sección del Calendario */
.calendar-section {
    padding: 40px 0;
    text-align: center;
}

.calendar-section h2 {
    text-align: center;
    color: var(--unam-blue);
    margin-bottom: 30px;
    font-size: 2.5em;
    border-bottom: 2px solid var(--ford-blue);
    display: inline-block;
    padding-bottom: 10px;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Columnas responsivas */
    gap: 20px;
    margin-top: 20px;
}

.day-column {
    background-color: var(--white);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
}

.day-column h3 {
    color: var(--ford-blue);
    margin-bottom: 20px;
    font-size: 1.8em;
    border-bottom: 1px solid var(--light-gray);
    padding-bottom: 10px;
}

.activity-card {
    background-color: var(--light-gray);
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-align: left;
    border-left: 5px solid transparent; /* Establece un borde transparente por defecto, será sobrescrito */
}

.activity-card[data-category="tech"] {
    border-left-color: var(--category-tech);
}

.activity-card[data-category="taller"] {
    border-left-color: var(--category-taller);
}

.activity-card[data-category="ls"] {
    border-left-color: var(--category-ls);
}

.activity-card[data-category="ss"] {
    border-left-color: var(--category-ss);
}
.activity-card[data-category="show"] {
    border-left-color: var(--category-show);
}


.activity-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.activity-card h4 {
    color: var(--dark-gray);
    font-size: 1.1em;
    margin-bottom: 5px;
}

.activity-card .time {
    font-size: 0.9em;
    color: #666;
}

/* Modal (Cuadro Flotante) */
.modal {
    display: none; /* Oculto por defecto, el JS lo mostrará con 'flex' */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
    /* Las siguientes propiedades de flexbox no son necesarias aquí, ya que 'display: none' las anula.
       Serán aplicadas por el JavaScript cuando cambie el 'display' a 'flex'.
       Sin embargo, dejarlas no causa daño, simplemente no tienen efecto hasta que el display cambie.
    */
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: var(--white);
    margin: auto;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    width: 90%; /* Ancho en móviles */
    max-width: 900px; /* Ancho máximo en escritorio */
    position: relative;
    display: flex; /* Para las dos columnas internas */
    flex-wrap: wrap; /* Permite que las columnas se apilen en móviles */
    gap: 30px;
}

.close-button {
    color: var(--dark-gray);
    font-size: 2.5em;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.close-button:hover,
.close-button:focus {
    color: var(--ford-blue);
    text-decoration: none;
}

.speaker-info,
.activity-info {
    flex: 1; /* Ambos ocupan el mismo espacio */
    min-width: 300px; /* Ancho mínimo antes de apilarse */
    text-align: center;
}

.speaker-info h3,
.activity-info h3 {
    color: var(--unam-blue);
    margin-bottom: 15px;
    font-size: 1.6em;
    border-bottom: 1px solid var(--light-gray);
    padding-bottom: 10px;
}

.speaker-photo,
.activity-photo {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.speaker-info h4,
.activity-info h4 {
    color: var(--ford-blue);
    font-size: 1.3em;
    margin-bottom: 10px;
}

.activity-info h4a {
    color: var(--unam-gold);
    font-size: 1em;
    margin-bottom: 10px;
}

.speaker-info p,
.activity-info p {
    font-size: 1em;
    color: #555;
    text-align: left; /* Para descripciones más legibles */
}

/* Pie de Página */
.site-footer {
    background-color: var(--unam-blue);
    color: var(--white);
    text-align: center;
    padding: 20px 0;
    margin-top: 40px;
    border-top: 5px solid var(--unam-gold);
}

.site-footer p {
    font-size: 0.9em;
}

/* Media Queries para Responsividad */
@media (max-width: 768px) {
    .site-header h1 {
        font-size: 1.6em;
        margin-top: 10px;
        width: 100%; /* Título en su propia línea */
    }

    .header-content {
        justify-content: center; /* Centrar logos y título */
        text-align: center;
    }

    .logo {
        max-height: 60px;
        margin: 0 10px;
    }

    .calendar-grid {
        grid-template-columns: 1fr; /* Una columna en pantallas pequeñas */
    }

    .day-column {
        padding: 15px;
    }

    .activity-card {
        padding: 12px;
    }

    .modal-content {
        flex-direction: column; /* Apilar las secciones en el modal */
        width: 95%; /* Un poco más de margen */
        padding: 20px;
    }

    .speaker-info,
    .activity-info {
        min-width: unset; /* Quitar el min-width */
        width: 100%; /* Ocupar todo el ancho */
    }

    .close-button {
        font-size: 2em;
        top: 5px;
        right: 10px;
    }
}

@media (max-width: 480px) {
    .site-header h1 {
        font-size: 1.4em;
    }

    .logo {
        max-height: 50px;
    }

    .calendar-section h2 {
        font-size: 2em;
    }
}

.color-legend {
    background-color: var(--white);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
    padding: 20px;
    margin: 20px auto 40px auto; /* Centrar y dar espacio */
    max-width: 600px; /* Ancho máximo para que no sea demasiado grande */
    border: 1px solid var(--light-gray);
    text-align: center; /* Centrar el texto dentro del recuadro */
}

.color-legend h3 {
    color: var(--unam-blue);
    font-size: 1.4em;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--light-gray);
    padding-bottom: 10px;
    display: inline-block; /* Para que el borde inferior se ajuste al texto */
}

.color-legend ul {
    list-style: none; /* Quitar los puntos de la lista */
    padding: 0;
    display: flex; /* Para que los elementos de la lista se pongan en fila */
    flex-wrap: wrap; /* Para que los elementos se envuelvan en pantallas pequeñas */
    justify-content: center; /* Centrar los elementos de la lista */
    gap: 15px; /* Espacio entre los elementos de la lista */
}

.color-legend li {
    display: flex;
    align-items: center;
    font-size: 0.95em;
    color: var(--dark-gray);
}

.color-box {
    display: inline-block;
    width: 20px; /* Tamaño del cuadrado de color */
    height: 20px; /* Tamaño del cuadrado de color */
    border-radius: 4px; /* Ligeramente redondeado */
    margin-right: 10px; /* Espacio entre el color y el texto */
    border: 1px solid rgba(0, 0, 0, 0.1); /* Borde sutil para definirlo */
}

/* Asignar colores a los cuadrados de la leyenda usando las variables de color */
.color-box.tech-color {
    background-color: var(--category-tech);
}

.color-box.taller-color {
    background-color: var(--category-taller);
}

.color-box.ls-color {
    background-color: var(--category-ls);
}

.color-box.ss-color {
    background-color: var(--category-ss);
}

.color-box.show-color {
    background-color: var(--category-show);
}
/* Responsividad para la leyenda (ajuste si es necesario) */
@media (max-width: 768px) {
    .color-legend {
        margin: 20px 10px 40px 10px; /* Ajustar márgenes en móviles */
        padding: 15px;
    }

    .color-legend ul {
        flex-direction: column; /* Apilar los elementos en móviles */
        align-items: flex-start; /* Alinear a la izquierda */
        gap: 10px;
    }

    .color-legend li {
        width: 100%; /* Ocupar todo el ancho disponible */
    }
}


.modal-content.single-column {
    /* Aquí podrías ajustar el justify-content si quieres que el único item se centre por flexbox,
       pero el 'margin: 0 auto;' en .activity-info es más directo para centrar el bloque. */
    justify-content: center; 
}

.modal-content.single-column .activity-info {
    flex: none; /* Deshabilita el crecimiento de flexbox para este elemento */
    width: 100%; /* Ocupa el 100% del ancho disponible de su padre (modal-content) */
    max-width: 550px; /* Define un ancho máximo para la columna de actividad cuando es la única. AJUSTA ESTE VALOR A TU GUSTO */
    margin: 0 auto; /* Centra el bloque de actividad horizontalmente dentro de modal-content */
    /* Si quieres que el texto de la descripción también se centre cuando no hay ponente, añade: */
    /* text-align: center; */
}

/* Si en el caso de que sea una sola columna quieres que los párrafos se centren también */
.modal-content.single-column .activity-info p {
    text-align: center; /* Centra el texto de los párrafos solo en modo single-column */
}

/* Si quieres que la imagen de la actividad también se centre, podrías añadir: */
.modal-content.single-column .activity-info .activity-photo {
    display: block; /* Para que margin auto funcione */
    margin-left: auto;
    margin-right: auto;
}

/* Asegúrate que los títulos dentro de activity-info sigan centrados */
.activity-info h3,
.activity-info h4 {
    text-align: center; /* Esto ya debería estar así, pero es bueno confirmarlo */
}
/* Estilos para el contenedor de múltiples ponentes */
.speaker-info {
    flex: 1; /* Mantiene su comportamiento flexbox para el diseño de dos columnas */
    min-width: 300px; /* Ancho mínimo antes de apilarse */
    text-align: center;
    overflow-y: auto; /* ¡Permite el desplazamiento vertical si el contenido es demasiado largo! */
    max-height: 70vh; /* Limita la altura de la sección para que el modal no se desborde de la pantalla */
    padding-right: 15px; /* Añade espacio para la barra de desplazamiento si aparece */
    scrollbar-width: thin; /* Estilo de la barra de desplazamiento para Firefox */
    scrollbar-color: var(--ford-blue) var(--light-gray); /* Color de la barra de desplazamiento para Firefox */
}

/* Estilos para la barra de desplazamiento en navegadores basados en Webkit (Chrome, Edge, Safari) */
.speaker-info::-webkit-scrollbar {
    width: 8px; /* Ancho de la barra de desplazamiento */
}

.speaker-info::-webkit-scrollbar-track {
    background: var(--light-gray); /* Color del fondo de la barra de desplazamiento */
    border-radius: 10px;
}

.speaker-info::-webkit-scrollbar-thumb {
    background-color: var(--ford-blue); /* Color del "pulgar" de la barra de desplazamiento */
    border-radius: 10px;
    border: 2px solid var(--light-gray); /* Borde alrededor del pulgar */
}


/* Estilos para cada bloque de ponente dinámico (el que contiene foto, nombre, bio) */
.dynamic-speaker-block {
    margin-bottom: 30px; /* Espacio entre cada ponente */
    padding-bottom: 20px;
    border-bottom: 1px solid var(--light-gray); /* Un separador sutil entre ponentes */
}

.dynamic-speaker-block:last-child {
    border-bottom: none; /* El último ponente no necesita separador inferior */
    margin-bottom: 0; /* No hay margen inferior para el último */
    padding-bottom: 0;
}

/* Estilos para la foto del ponente dentro del bloque dinámico (¡la foto grande!) */
.dynamic-speaker-block .speaker-photo-large {
    max-width: 100%; /* Asegura que la imagen no se desborde de su contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
    border-radius: 8px; /* Bordes ligeramente redondeados */
    margin-bottom: 15px; /* Espacio debajo de la foto */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Sombra suave para darle profundidad */
    display: block; /* Para que margin auto funcione al centrar */
    margin-left: auto;
    margin-right: auto;
}

/* Estilos para el nombre del ponente */
.dynamic-speaker-block h4 {
    color: var(--ford-blue);
    font-size: 1.3em;
    margin-bottom: 10px;
}

/* Estilos para la biografía del ponente */
.dynamic-speaker-block p {
    font-size: 1em;
    color: #555;
    text-align: left; /* La biografía es mejor leerla alineada a la izquierda */
}

/* Asegurarse que en móvil se apile bien */
@media (max-width: 768px) {
    .modal-content {
        flex-direction: column; /* Apilar las secciones en el modal */
    }

    .speaker-info,
    .activity-info {
        width: 100%; /* Ocupar todo el ancho disponible */
        min-width: unset; /* Eliminar min-width para móviles */
    }

    .speaker-info {
        max-height: 50vh; /* Ajusta la altura máxima para el scroll en móviles si es necesario */
    }

    .dynamic-speaker-block {
        margin-bottom: 20px;
        padding-bottom: 15px;
    }

}