/* Estilos personalizados FULL CALENDAR*/
/* Estilo del encabezado */
.fc-toolbar {
    background-color: var(--Cenape-Blue);
    color: white;
    padding: 10px;
}

.fc-toolbar h2 {
    color: white;
}

/* Estilo de los botones de navegación */
/* .fc-button {
     background-color: var(--Cenape-Orange);
     color: white;
     border: none;
 }
*/
.fc-button:hover {
    background-color: var(--Cenape-Orange);
    color: var(--Cenape-Blue);
}

/* Estilo del fondo del día actual */
.fc-day-today {
    background-color: var(--custom-light-orange);
}

/* Estilo de los eventos */
.fc-event {
    background-color: var(--Cenape-Blue) !important;
    border-color: var(--custom-light-blue) !important;
    color: white !important;
    opacity: 1 !important;
}


.fc-event .fc-bg {
    opacity: 1 !important;
    background-color: transparent !important;
}
.fc-event:hover {
    background-color: var(--custom-light-orange) !important;
    border-color: var(--Cenape-Orange) !important;
    color: black !important;
}

/* Estilo de los slots de tiempo seleccionables */
.fc-highlight {
    background-color: var(--Cenape-Orange);
}

/* Estilo del contenedor principal */
#calendar {
    background-color: white;
    border: 1px solid var(--Cenape-Blue);
    border-radius: 8px;
    padding: 20px;
}

/* Estilo de las cabeceras de los días */
.fc-day-header {
    background-color: var(--Cenape-Blue);
    color: white;
    padding: 10px;
}

/* Estilo de los bordes de las celdas */
.fc td, .fc th {
    border-color: var(--Cenape-Blue);
}

.fc-disabled-day {
    background-color: var(--custom-light-orange);
    /*color: rgba(255, 242, 228, 0.17); !* Un color gris claro para mostrar que está deshabilitado *!*/
    pointer-events: none; /* Evitar que se pueda interactuar con estos días */
    /*opacity: 0.7; !* Reducir la opacidad para dar un efecto de deshabilitado *!*/
    color: var(--Cenape-Blue);
}

/* Opcional: para añadir un estilo de cursor no permitido */
.fc-disabled-day.fc-day {
    cursor: not-allowed;
}


 .fc-toolbar h2 {
     font-size: 1.5rem;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }

@media (max-width: 768px) {
    .fc-toolbar h2 {
        font-size: 1rem;
    }
}

.fc-axis {
    width: 40px !important; /* Ajustar el ancho de la columna de horas */
    text-align: center; /* Centrar el texto de las horas */
}

.fc-time-grid .fc-slats td {
    height: 40px; /* Ajustar la altura de las celdas de tiempo */
}

@media (max-width: 768px) {
    .fc-axis {
        width: 40px !important; /* Reducir el ancho de la columna de horas en pantallas pequeñas */
    }
}

.event-selected2 {
    background-color: #54bf9b !important;
    color: #000000 !important;
    /*pointer-events: none; !* Esto hace que los eventos seleccionados sean "inhabilitados" *!*/
}

.event-occupied {
    background-color: #ff4d4d !important;
    color: #000000 !important;
    pointer-events: none; /* Esto hace que los eventos seleccionados sean "inhabilitados" */
}
.event-ocupado {
    background-color: #ff0000 !important; /* Rojo para no disponible */
    color: #ffffff !important;
    pointer-events: none; /* Esto hace que los eventos seleccionados sean "inhabilitados" */
}

.event-disponible {
    border: 2px solid #0829d6 !important; /* Borde azul para los eventos seleccionados */
    color: #ffffff !important;
}

.event-reservado {
    background-color: #ffa500 !important; /* Naranja para reservado */
    color: #000000 !important;
}

.event-selected {
    background-color: #72ffb4 !important; /* Verde para disponible */
    color: #000000 !important;

}

.fc-button-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}