/**
 * calendar-month-view-fix.css
 * Soluciona problemas específicos de colores en la vista de mes del calendario
 * Garantiza que los colores de los eventos definidos en settings.php se apliquen correctamente
 */

/* Asegurar que los eventos en vista mes respeten los colores de fondo */
.fc-dayGridMonth-view .fc-daygrid-event.fc-daygrid-dot-event {
    /* Override la configuración que resetea los colores */
    border-color: inherit !important;
}

/* Aplicar color de fondo al punto del evento */
.fc-dayGridMonth-view .fc-daygrid-event.fc-daygrid-dot-event .fc-daygrid-event-dot {
    border-color: inherit !important;
    background-color: inherit !important;
}

/* Asegurarse que los eventos en vista de mes tengan el color correcto */
.fc-dayGridMonth-view .fc-event.recurring-event .fc-daygrid-event-dot {
    border-color: inherit !important;
}

/* Garantizar que el punto del evento coincida con el color del evento configurado en settings */
.fc-dayGridMonth-view .fc-daygrid-dot-event .fc-daygrid-event-dot {
    margin-right: 4px;
    box-sizing: content-box;
    width: 0;
    height: 0;
    border: 5px solid #3788d8;
    border-color: inherit !important;
    border-radius: 5px;
}

/* Evitar que otros estilos interfieran */
.fc-dayGridMonth-view .fc-daygrid-dot-event:hover,
.fc-dayGridMonth-view .fc-daygrid-dot-event.fc-event-mirror {
    background: rgba(0, 0, 0, 0.04);
}

/* Aplicar estilos específicos para tareas completadas en vista de mes */
.fc-dayGridMonth-view .fc-daygrid-event.completed-task {
    opacity: 0.7;
}

/* Forzar que los eventos muestren color de borde izquierdo que coincida con el color del evento */
.fc-dayGridMonth-view .fc-daygrid-event {
    border-left-color: inherit !important;
}

/* Agregar indicador para tareas vencidas en vista de mes */
.fc-dayGridMonth-view .fc-daygrid-event.expired-task .fc-daygrid-event-dot {
    position: relative;
}

.fc-dayGridMonth-view .fc-daygrid-event.expired-task .fc-daygrid-event-dot::after {
    content: "!";
    position: absolute;
    top: -5px;
    right: -5px;
    width: 10px;
    height: 10px;
    background: #dc3545;
    color: white;
    border-radius: 50%;
    font-size: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}