/* ==========================================
   1. ESTILOS DE EVENTOS Y LEGIBILIDAD
   ========================================== */

/* Asegura que los eventos de día completo tengan opacidad total */
.fc-v-event, .fc-h-event, .fc-daygrid-block-event {
    opacity: 1 !important;
}

/* Fuerza texto blanco legible en el contenido del evento */
.fc-event-main {
    color: #ffffff !important;
}


/* ==========================================
   2. ÍCONOS Y FLECHAS (Font Awesome)
   ========================================== */

.fc .fc-icon-chevrons-left::before,
.fc .fc-icon-chevron-left::before {
    content: "\f053" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900;
}

.fc .fc-icon-chevrons-right::before,
.fc .fc-icon-chevron-right::before {
    content: "\f054" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900;
}

.fc .fc-button .fc-icon {
    font-size: 0.5em !important;
    vertical-align: middle;
}


/* ==========================================
   3. ESTILOS BASE (Escritorio / Tablets)
   ========================================== */

/* Título de la barra de herramientas */
#calendar1 .fc-toolbar-title,
.fc .fc-toolbar-title {
    font-family: 'Arial', sans-serif !important;
    font-size: 1.0rem !important;
    font-weight: bold !important;
    color: #333333 !important;
}

/* Botones de la barra de herramientas */
#calendar1 .fc .fc-button,
.fc .fc-button {
    padding: 4px 8px !important;
    font-size: 0.75rem !important;
    line-height: 1.0 !important;
}

/*
#calendar1 .fc-header-toolbar {
    margin-bottom: 0.5rem !important;
}
*/

/* Visibilidad de títulos de eventos en pantallas medianas/grandes */
@media (min-width: 768px) {
    .fc-event-title,
    .fc-event-title-container {
        display: inline-block !important;
    }
}


/* ==========================================
   4. ESTILOS RESPONSIVE (Celulares / Modales)
   ========================================== */

/* Oculta título del evento en celulares */
@media (max-width: 767.98px) {
    .fc-event-title,
    .fc-event-title-container {
        display: none !important;
    }
}

/* Reorganización de la cabecera en 2 filas */
@media (max-width: 576px) {
    #calendar1 .fc-header-toolbar {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 0.5rem 0 !important;
        margin-bottom: 0.75rem !important;
    }

    /* Fila 1: Título centrado arriba */
    #calendar1 .fc-header-toolbar .fc-toolbar-chunk:nth-child(2) {
        order: 1 !important;
        flex: 0 0 100% !important;
        text-align: center !important;
    }

    /* Fila 2 Izquierda: Navegación (Hoy, <, >) */
    #calendar1 .fc-header-toolbar .fc-toolbar-chunk:nth-child(1) {
        order: 2 !important;
    }

    /* Fila 2 Derecha: Vistas (Mes / Semana / Día) */
    #calendar1 .fc-header-toolbar .fc-toolbar-chunk:nth-child(3) {
        order: 3 !important;
    }

    /* Ajuste ultra compacto para botones en pantallas angostas */
    #calendar1 .fc .fc-button,
    .fc .fc-button {
        padding: 3px 6px !important;
        font-size: 0.65rem !important;
    }
}

/* Disminuir tamaño de los botones del calendario */
#calendar1 .fc-header-toolbar .btn,
#calendar1 .fc .fc-button {
    padding: 0.2rem 0.45rem !important;
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
}

/* Reducir el tamaño de los iconos de flecha (< / >) */
#calendar1 .fc-header-toolbar .btn .fc-icon,
#calendar1 .fc .fc-button .fc-icon {
    font-size: 0.9em !important;
}

/* Opcional: Reducir la distancia/altura del encabezado completo */
#calendar1 .fc-header-toolbar {
    margin-bottom: 0.5rem !important;
}

@media (max-width: 576px) {
    /* 1. Contenedor principal flex que permite envolver elementos */
    #calendar1 .fc-header-toolbar {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 0.5rem !important;
        margin-bottom: 0.75rem !important;
    }

    /* 2. Primera línea: Título del mes/año ocupando el 100% de ancho */
    #calendar1 .fc-toolbar-chunk:has(.fc-toolbar-title) {
        order: 1 !important;
        flex: 0 0 100% !important;
        text-align: center !important;
    }

    #calendar1 .fc-toolbar-title {
        font-size: 1.1rem !important;
    }

    /* 3. Segunda línea (Izquierda): Botón Hoy + Flechas < > */
    #calendar1 .fc-toolbar-chunk:has(.fc-today-button),
    #calendar1 .fc-toolbar-chunk:has(.fc-prev-button) {
        order: 2 !important;
        display: flex !important;
        gap: 0.25rem !important;
    }

    /* 4. Segunda línea (Derecha): Vistas Mes / Semana / Día */
    #calendar1 .fc-toolbar-chunk:nth-child(3) {
        order: 3 !important;
    }

    /* Ajuste de tamaño compacto para todos los botones en móvil */
    #calendar1 .fc-button {
        padding: 0.2rem 0.4rem !important;
        font-size: 0.75rem !important;
    }
}

/* Oculta el título del evento SOLO en pantallas móviles */
@media (max-width: 767.98px) {
  .fc-event-title,
  .fc-event-title-container {
    display: none !important;
  }
}

/* Se mantiene visible en pantallas medianas y grandes (tablets/escritorio) */
@media (min-width: 768px) {
  .fc-event-title,
  .fc-event-title-container {
    display: inline-block !important;
  }
}

/* Permite que el contenedor del contenido del evento use flexbox en columna */
.fc-timegrid-event .fc-event-main {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  white-space: normal !important;
}

/* Fuerza a que el texto de la hora se ajuste y haga salto de línea si es necesario 
.fc-timegrid-event .fc-event-time {
  white-space: normal !important;
  word-break: break-word !important;
  text-align: center !important;
  line-height: 1.2 !important;
} */

/* Opcional: si deseas forzar el formato dividiendo explícitamente en el guión */
.fc-v-event .fc-event-time {
  display: block !important;
}

/* Reduce el tamaño del texto en la cabecera de los días en la vista semanal/diaria */
.fc-col-header-cell .fc-scrollgrid-sync-inner {
  font-size: 0.8rem !important; /* Ajusta este valor según lo necesites (ej. 12px o 0.75rem) */
  font-weight: 500 !important;  /* Opcional: ajusta el grosor de la letra */
  padding: 4px 0 !important;    /* Opcional: reduce el espacio vertical si quieres la cabecera más compacta */
}

/* Configuración unificada para el tiempo del evento */
.fc-timegrid-event .fc-event-time {
  text-align: center !important;
  white-space: normal !important;
  word-break: break-word !important;
  line-height: 1.2 !important;
}

/* Evita que el salto de línea ocurra entre la hora de inicio y el guión */
.fc-timegrid-event .fc-event-time-start {
  white-space: nowrap !important;
}

/* Reduce el tamaño del título principal del calendario */
.fc .fc-toolbar-title {
  font-size: 1.2rem !important; /* Puedes cambiar 1.2rem por el tamaño deseado (ej. 16px, 1rem) */
  font-weight: 600 !important;  /* Opcional: ajusta el grosor del texto */
}