/* Diseño de las tarjetas */
#modalContentListaProyectos .card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: auto;
    max-height: 600px; /* Set a maximum height for all cards */
    overflow: hidden;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Estilo del encabezado */
#modalContentListaProyectos .card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #ddd;
    text-align: center;
    font-weight: bold;
    padding: 1rem;
}

/* Contenido de las tarjetas */
#modalContentListaProyectos .card-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1rem;
}
/* Contenedor de botones */
#modalContentListaProyectos .card-footer {
    background-color: #f8f9fa;
    text-align: center;
    padding: 1rem;
}

/* Botones ajustados al ancho */
#modalContentListaProyectos .btn {
    width: auto;
    margin-top: 0.5rem;
}

/* Espaciado entre las tarjetas */
#modalContentListaProyectos .col {
    margin-bottom: 1rem;
}
#modalContentListaProyectos .row > .col {
    margin-bottom: 1.5rem;
}

/* Asegura que todas las tarjetas estén al mismo nivel */
#modalContentListaProyectos {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Ajuste de espaciado entre campos */
#modalContentListaProyectos .mb-2 {
    margin-bottom: 1rem;
}

/* Ajuste para inputs y botones */
#modalContentListaProyectos .form-control {
    margin-bottom: 0.5rem;
}

#modalContentListaProyectos .btn-danger {
    height: fit-content; /* Ajusta la altura del botón */
    align-self: flex-start; /* Alinea el botón al inicio del contenedor */
}

#modalContentListaProyectos .d-flex.align-items-start {
    gap: 0.5rem; /* Espaciado entre los inputs y el botón */
}
/* Asegura que el botón "X" sea compacto */
/* Asegura que el botón "X" sea compacto y alineado */
.btn-compact {
    width: 32px; /* Reduce el ancho del botón */
    height: 80px; /* Ajusta la altura para alinearse con los tres inputs */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px; /* Tamaño de texto pequeño */
    padding: 0; /* Elimina padding interno */
}

/* Inputs más largos y consistentes */
.flex-grow-1 input {
    width: 100%;
    margin-bottom: 0.5rem; /* Espaciado inferior entre inputs */
}

/* Espaciado entre el botón y los inputs */
.ms-2 {
    margin-left: 8px;
}

/*Tarjetas de solicitudes*/
#tarjetasProyectos .card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%; /* Asegura que todas las tarjetas tengan el mismo tamaño */
}
#tarjetasProyectos .card-body {
    flex-grow: 1; /* Hace que el contenido crezca uniformemente */
}
#tarjetasProyectos .card-footer {
    text-align: center;
}

/* Asegurar que el contenedor ocupe todo el ancho disponible */
.container {
    width: 100%;
    max-width: 100%;
    height: 96vh; /* Ocupa toda la altura de la pantalla */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra verticalmente */
}

/* Ajustar la tarjeta dentro del container */
.card {
    width: 80%;
    margin: 0 auto;
    height: 92vh;
    display: flex;
    flex-direction: column;
}


/* Hacer que la tabla y su contenedor sean responsivos */
.scrollable-calendar {
    flex-grow: 1;
    overflow: auto; /* Permitir desplazamiento si es necesario */
    height: calc(100% - 80px); /* Ajustar para que no sobresalga */
}
/* Si las tarjetas de reserva deben ocupar el 100% de la celda */
.calendar-cell {
    height: 100%;
    flex-direction: column;
    justify-content: center;
}
/* Ajustar las reservas dentro de cada celda */
.calendar-cell div {
    width: 100%;
    text-align: center;
    padding: 10px;
}
/* Ajustar tamaño de las celdas para ocupar el espacio */
.calendar-table th,
.calendar-table td {
    width: auto;
    height: 100%; /* Asegurar altura completa */
    white-space: normal; /* Permitir ajuste de texto */
    vertical-align: middle; /* Asegurar alineación */
}

table.table-modal {
    table-layout: auto; /* Permite que las columnas ajusten su ancho automáticamente */
    width: 100%; /* Asegura que la tabla use todo el ancho disponible */
    overflow-x: auto; /* Agrega desplazamiento horizontal si es necesario */
    white-space: nowrap; /* Evita que el contenido de las celdas se quiebre */
}

table.table-modal thead th {
    text-align: left; /* Alineación del encabezado */
    white-space: normal; /* Permite quiebres en los encabezados si es necesario */
}

table.table-modal tbody td {
    text-overflow: ellipsis; /* Agrega "..." para contenido que exceda el ancho */
    overflow: hidden;
}

/*Lista de proyecto*/
#modalContentListaProyectos {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

table.table-modal {
    margin: 0 auto; /* Asegura que la tabla esté centrada horizontalmente */
    width: auto; /* Ajusta el ancho automáticamente según su contenido */
}


/* Asegurar que la tabla ocupa el 100% */
.table {
    width: 100%;
    height: 100%;
    table-layout: auto; /* Permite que las columnas se adapten */
}

.table th, .table td {
    word-wrap: break-word; /* Ajusta el contenido si es muy largo */
    white-space: nowrap; /* Evita que el texto se divida */
    overflow: hidden; /* Oculta cualquier contenido que desborde */
    text-overflow: ellipsis; /* Añade puntos suspensivos si el texto es demasiado largo */
}

.table-responsive {
    max-width: 100%; /* Asegura que no haya scroll horizontal innecesario */
}

.table-bordered th, .table-bordered td {
    border: 1px solid #dee2e6; /* Aplica bordes uniformes */
}

.table-secondary {
    background-color: #f2f2f2; /* Cambia el color de fondo de las celdas de horario */
    font-weight: bold; /* Resalta el texto */
}

.bg-success {
    background-color: #007bff !important; /* Cambia el color de fondo de las reservas */
}

.text-white {
    color: #fff !important;
}

.rounded {
    border-radius: 0.25rem !important;
}

/*Diseño de rejilla de lista de proyectos*/
.proyectos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem; /* Espaciado entre las tarjetas */
    max-height: 500px; /* Altura máxima con scroll */
    overflow-y: auto; /* Habilitar desplazamiento vertical */
    padding: 1rem; /* Espaciado interno */
}

/* Ajustar el diseño de las tarjetas */
.proyectos-grid .card {
    min-height: 200px; /* Altura mínima para las tarjetas */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    border-radius: 8px; /* Bordes redondeados */
}

.proyectos-grid .card-header {
    background-color: #f8f9fa; /* Fondo claro */
    font-size: 1rem; /* Tamaño de fuente más pequeño */
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #dee2e6; /* Línea de separación */
}

.proyectos-grid .card-body {
    padding: 0.5rem 1rem;
    font-size: 0.9rem; /* Reducir tamaño de fuente */
}

/* Botones */
.proyectos-grid .btn {
    font-size: 0.8rem; /* Botones más pequeños */
    padding: 0.3rem 0.6rem;
}


/* Botones de eliminar integrantes y reservas de dias */
.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.2rem;
}

.d-flex {
    display: flex;
}

.align-items-center {
    align-items: center;
}

.me-2 {
    margin-right: 0.5rem;
}

.ms-2 {
    margin-left: 0.5rem;
}

.custom-reload-button {
    color: #0d6efd; /* Azul Bootstrap */
    font-size: 1rem;
    padding: 0.3rem 0.5rem;
    border: none;
    background: none;
    cursor: pointer;
    transition: color 0.3s ease, transform 0.2s ease;
}

.custom-reload-button:hover {
    color: #0a58ca; /* Azul más oscuro para hover */
    text-decoration: underline;
    transform: scale(1.05); /* Un ligero zoom */
}

.custom-reload-button:focus {
    outline: none; /* Quitar el borde predeterminado de focus */
    box-shadow: 0 0 5px rgba(13, 110, 253, 0.5); /* Resplandor azul */
}

.custom-reload-button i {
    font-size: 1.2rem; /* Aumentar ligeramente el tamaño del ícono */
    vertical-align: middle;
}

/* Ajustes para pantallas pequeñas */
@media screen and (max-width: 768px) {
    .calendar-header th,
    .day-content {
        display: table-cell !important;
    }
    .day-content[data-day='Lunes'],
    .calendar-header th[data-day='Lunes'] {
        display: table-cell;
    }
    .mobile-navigation {
        display: flex;
        justify-content: center;
    }
    #modalContentListaProyectos .card {
        max-height: 500px; /* Slightly increase height for smaller screens */
    }
    #modalContentListaProyectos {
        flex-direction: column;
    }

    /* Permitir desplazamiento horizontal */
    .scrollable-calendar {
        overflow-x: auto; /* Habilita la barra de desplazamiento horizontal */
        white-space: nowrap; /* Evita que las celdas se ajusten en varias líneas */
        max-width: 100%; /* Mantiene el ancho dentro del contenedor */
    }

    /* Asegurar que la tabla no se ajuste automáticamente */
    .calendar-table {
        min-width: 700px; /* Fijar un ancho mínimo para forzar el scroll */
        width: auto; /* Permitir que la tabla crezca según el contenido */
    }
}