/* Fondo general */
body {
    background-color: #f1f1f1; /* Fondo gris claro */
    color: #212529; /* Texto oscuro */
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
}

/* Contenedor principal */
#mainContainer {
    background-color: #ffffff; /* Fondo blanco */
    color: #212529; /* Texto negro */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.1); /* Sombra */
    padding: 30px; /* Espaciado interno */
    max-width: 1400px; /* Ancho máximo */
    margin: 20px auto; /* Centrar el contenedor */
}

/* Barra de menú */
.navbar {
    background-color: #007bff; /* Azul claro */
    color: #ffffff; /* Texto blanco */
}

.navbar .nav-link {
    color: #ffffff !important; /* Texto blanco */
}

.navbar .nav-link:hover {
    color: #cccccc !important; /* Gris claro */
}

/* Enlaces en estado activo */
.navbar .nav-item.active .nav-link {
    color: #cccccc !important; /* Gris claro */
}

/* Título de la barra de navegación */
.navbar-brand {
    padding-left: 20px; /* Ajusta el padding a la izquierda */
    font-size: 1.8rem;  /* Hacer el texto más grande */
    font-weight: bold;  /* Texto prominente */
    color: #ffffff !important; /* Texto blanco */
}

/* Fondo general del calendario */
.fc {
    background-color: #ffffff; /* Fondo blanco */
    color: #212529; /* Texto negro */
    border-radius: 10px; /* Bordes redondeados */
    padding: 15px; /* Espaciado interno */
}

/* Números de los días */
.fc-daygrid-day-number {
    color: #495057; /* Gris oscuro */
    font-weight: bold;
    cursor: pointer;
}

/* Día actual */
.fc-day-today {
    background-color: #007bff !important; /* Azul claro */
    color: #ffffff; /* Texto blanco */
    border-radius: 5px;
}

/* Eventos en el calendario */
.fc-event {
    background-color: #4fc3f7 !important; /* Azul pastel */
    color: #ffffff; /* Texto blanco */
    border: none;
    border-radius: 5px;
}

/* Hover en eventos */
.fc-event:hover {
    background-color: #42a5f5 !important; /* Azul más intenso */
    cursor: pointer;
}

/* Hover en días sin afectar eventos */
.fc-daygrid-day:hover {
    background-color: #f1f1f1 !important; /* Gris claro */
    color: inherit; /* Mantener el color original */
    cursor: pointer;
}

/* Encabezado del calendario */
.fc-toolbar-title {
    color: #007bff;
    font-size: 1.8rem;
    font-weight: bold;
    text-align: left; /* Alinear a la izquierda */
    padding-left: 20px; /* Añadir padding */
}

/* Días de la semana */
.fc-col-header-cell {
    background-color: #e9ecef; /* Fondo gris muy claro */
    color: #212529; /* Texto negro */
    font-weight: bold;
    text-transform: uppercase;
}

/* Botones para cambiar vistas del calendario */
.fc-button {
    background-color: #007bff !important; /* Azul claro */
    color: #ffffff !important; /* Texto blanco */
    border-radius: 5px;
}

/* Botón al pasar el mouse */
.fc-button:hover {
    background-color: #0056b3 !important; /* Azul más oscuro */
}

.fc-button-active {
    background-color: #495057 !important; /* Gris oscuro */
    color: #ffffff !important; /* Texto blanco */
}

/* Campos válidos */
.has-success .form-control {
    border-color: #28a745; /* Verde */
}

.has-success .form-control:focus {
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25); /* Sombra verde */
}

/* Campos inválidos */
.has-error .form-control {
    border-color: #ff8080; /* Rojo claro */
}

.has-error .form-control:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 128, 128, 0.25); /* Sombra roja clara */
}

/* Campos válidos para select */
.has-success select.form-select {
    border-color: #28a745; /* Verde */
}

.has-success select.form-select:focus {
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25); /* Sombra verde */
}

/* Campos inválidos para select */
.has-error select.form-select {
    border-color: #dc3545; /* Rojo */
}

.has-error select.form-select:focus {
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); /* Sombra roja */
}

/* Ajustes responsivos para el contenedor del calendario */
#navegacionContainer {
    overflow-x: auto; /* Evita que el contenido se desborde horizontalmente */
}

/* Diseño móvil para pantallas pequeñas */
@media (max-width: 576px) {
    .modal-dialog {
        max-width: 100%;
        margin: 0; /* Sin márgenes */
    }

    .modal-content {
        height: auto;
        max-height: 90vh; /* Altura máxima ajustada */
        overflow-y: auto; /* Permitir scroll interno */
    }
}

#calendar {
    width: 100%; /* Asegura que ocupe todo el ancho disponible */
    max-width: 100%; /* Evita que se desborde */
    height: auto; /* Ajusta automáticamente la altura */
    overflow: hidden; /* Elimina barras de desplazamiento */
}

.fc {
    width: 100%; /* Asegura que el contenido del calendario ocupe el ancho disponible */
}

.fc-toolbar {
    flex-wrap: wrap; /* Asegura que los controles no se desborden en pantallas pequeñas */
}


.modal {
    z-index: 1055 !important; /* Asegura que el modal esté sobre otros elementos */
}

.modal-backdrop {
    z-index: 1050 !important; /* Asegura que el fondo del modal esté detrás */
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
}

.modal-dialog {
    max-width: 90%; /* Ajusta el ancho en pantallas pequeñas */
    margin: 10px auto; /* Centrado */
}

.modal-content {
    height: auto; /* Asegura que no se recorte */
    max-height: 90vh; /* Ajusta la altura máxima */
    overflow-y: auto; /* Habilita el scroll interno */
}

.position-fixed, .fixed-top, .fixed-bottom {
    z-index: 1030; /* Cambia esto si está superando al modal */
}

body.modal-open .navbar-fixed-top,
body.modal-open .navbar-fixed-bottom {
    z-index: 0 !important; /* Envía esas barras al fondo */
}

body.modal-open {
    overflow: hidden !important;
}

body.modal-open .modal {
    pointer-events: auto;
}

.is-invalid {
    border: 2px solid #dc3545; /* Bordes rojos */
    background-color: #f8d7da; /* Fondo rojo claro */
}

.is-valid {
    border: 2px solid #28a745; /* Bordes verdes */
    background-color: #d4edda; /* Fondo verde claro */
}