.containerInfo {
    display: flex;
    align-items: flex-start;
    justify-content: center; /* Centra el contenido horizontalmente */
    gap: 20px;
    max-width: 1200px; /* Ancho máximo del contenedor */
    margin: 0 auto; /* Centra el contenedor en la pantalla */
    flex-wrap: wrap; /* Permite que los elementos se ajusten en varias líneas */
}

.containerInfo img {
    max-width: 100%;
    height: auto;
}

.calendarInfo {
    max-width: 500px; /* Ajusta el ancho del calendario */
}

.cuadroshort {
    display: inline-block;
    width: 450px;
    height: 130px;
    background-color: #ccc;
    margin: 10px;
    border: 4px solid blue; /* Corrige la propiedad de borde */
    border-radius: 10px;
    padding: 1px;
}

.cuadro {
    display: inline-block;
    width: 450px;
    height: 345px;
    background-color: #ccc;
    margin: 0 auto; /* Centra el contenedor en la pantalla */
    border: 4px solid blue; /* Corrige la propiedad de borde */
    border-radius: 10px;
    padding: 1px;
}

.cuadro img {
    max-width: 100%;
    height: auto;
}

/* Para pantallas pequeñas */
@media (max-width: 768px) {
    .containerInfo {
        flex-direction: column; /* Coloca el calendario y cuadros en columna */
        align-items: center; /* Centra los elementos */
    }

    .cuadroshort, .cuadro {
        width: 90%; /* Ajusta el ancho al 90% de la pantalla */
        height: auto; /* Permite altura adaptable */
    }
}

.table-responsive {
    overflow-x: auto; /* Permite desplazamiento horizontal */
    width: 100%; /* Asegura que el contenedor ocupe el ancho completo */
}

#calendar {
    width: 100%; /* Asegura que la tabla se ajuste al contenedor */
}

#calendar th, #calendar td {
    text-align: center;
    white-space: nowrap; /* Evita que el texto se divida en varias líneas */
}

.table-responsive {
    overflow-x: auto;
    width: 100%;
    max-width: 100%; /* Asegura que el contenedor no se extienda más allá del ancho disponible */
    box-sizing: border-box;
}

#calendar {
    width: 100%;
    table-layout: fixed; /* Distribuye el ancho de cada columna de manera uniforme */
}

#calendar th, #calendar td {
    padding: 8px; /* Ajusta el espaciado para pantallas pequeñas */
    overflow: hidden;
    text-overflow: ellipsis; /* Añade puntos suspensivos si el contenido es demasiado largo */
}