/* --- Estilos para la Configuración --- */

/* Ajuste general del acordeón */
.accordion-item {
    border-radius: 12px !important;
    overflow: hidden;
    margin-bottom: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Botón del acordeón (Cabecera) */
.accordion-button {
    background-color: #ffffff !important;
    color: var(--blue-slate, #0d5474) !important;
    padding: 1.2rem !important;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

/* Efecto al estar activo (desplegado) */
.accordion-button:not(.collapsed) {
    background-color: var(--alice-blue, #f4f6f8) !important;
    color: var(--blue-slate, #0d5474) !important;
    box-shadow: none !important;
}

/* Icono del acordeón (flecha) */
.accordion-button::after {
    filter: brightness(0.5); /* Ajuste de color para que combine */
}

/* Espaciado interno de las secciones */
.accordion-body {
    padding: 1.5rem !important;
    background-color: #ffffff;
}

/* Estilo para las tablas dentro de los acordeones */
.table-responsive {
    border-radius: 8px;
    border: 1px solid #f1f3f5;
}

/* Estilo para los botones dentro de los acordeones */
.accordion-body .btn-primary {
    background-color: var(--tangerine-dream, #f1725f);
    border: none;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

.accordion-body .btn-primary:hover {
    filter: brightness(1.2);
}

/* Pequeño ajuste para que los selectores se vean bien */
.form-select {
    border-radius: 10px;
    padding: 0.6rem;
    border: 1px solid #dee2e6;
}

/* Sombras suaves para los elementos de configuración */
.shadow-sm {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
}

/* Ajuste de padding para móviles */
@media (max-width: 576px) {
    .p-4 {
        padding: 1rem !important; /* Reduce el espacio alrededor del contenido */
    }
    
    .accordion-body {
        padding: 0.75rem !important; /* Menos aire dentro de los desplegables */
    }
}
@media (max-width: 576px) {
    .table td, .table th {
        padding: 0.5rem 0.25rem !important; /* Reduce el espacio interno de las celdas */
        font-size: 0.85rem; /* Reduce un poco la letra para que quepa más */
    }
}
/* --- Estilos Modernos para FullCalendar --- */

/* 1. Usar la misma fuente que Bootstrap para que se integre */
.fc {
    font-family: var(--bs-body-font-family);
    /* Sobrescribir colores de borde de fc por defecto por los de BS5 */
    --fc-border-color: var(--bs-border-color);
    --fc-small-font-size: 0.85rem;
    --fc-page-bg-color: var(--bs-body-bg);
}

/* 2. Modernizar la barra de herramientas superior (botones y título) */
.fc .fc-toolbar-title {
    font-weight: 700;
    color: var(--bs-emphasis-color);
    font-size: 1.5rem;
}

.fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: 1.5rem;
    padding: 0 0.5rem;
}

/* 3. Estilo moderno para los botones de navegación (Hoy, Seman, Mes) */
.fc .fc-button-primary {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-secondary-color);
    color: var(--bs-secondary-color);
    text-transform: capitalize; /* Para que diga "Hoy" y no "HOY" */
    font-weight: 500;
    padding: 0.4rem 1rem;
    transition: all 0.2s ease-in-out;
}

.fc .fc-button-primary:hover {
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-secondary-color);
    color: var(--bs-emphasis-color);
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: white;
    box-shadow: none;
}

/* 4. Limpiar los nombres de los días de la semana (Lun, Mar...) */
.fc .fc-col-header-cell-cushion {
    text-decoration: none;
    color: var(--bs-secondary-color);
    font-weight: 600;
    padding: 8px 0;
}

.fc-theme-bootstrap5 td, .fc-theme-bootstrap5 th {
    border-color: var(--bs-border-color);
}

/* 5. Fondo sutil para los fines de semana */
.fc-timeGridWeek-view .fc-day-sat,
.fc-timeGridWeek-view .fc-day-sun {
    background-color: rgba(var(--bs-tertiary-color-rgb), 0.05);
}

/* 6. Estilo moderno para el indicador de "Ahora" (la línea roja) */
.fc .fc-now-indicator-line {
    border-color: var(--bs-danger);
    border-width: 2px;
}
.fc .fc-now-indicator-arrow {
    border-top-color: var(--bs-danger);
}

/* --- Estilo para el contenido personalizado del evento --- */
.fc-event-main-custom {
    padding: 4px 6px;
    color: white; /* Aseguramos que el texto sea blanco siempre */
    line-height: 1.2;
    overflow: hidden;
}

.fc-event-time {
    font-size: 0.75rem;
}

.fc-event-title {
    font-size: 0.85rem;
    font-weight: 600;
}

/* Hacemos que los eventos en vista de mes se vean como puntos de color (Dots) 
   para que no se sature, imitando a Google Calendar */
.fc-dayGridMonth-view .fc-event {
    background: transparent !important; /* Quitamos fondo sólido en mes */
    border: none !important;
    color: var(--bs-body-color) !important;
    padding-left: 15px !important;
    position: relative;
}

/* El "punto" de color del estado */
.fc-dayGridMonth-view .fc-event::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: attr(data-color); /* Esto no funciona directo, usaremos JS para inyectarlo si es necesario, pero por ahora usaremos color fijo de estado */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* Forzamos colores de los puntos según el estado en vista mes */
.fc-dayGridMonth-view .fc-event[style*="background-color: #198754"]::before { background-color: #198754; }
.fc-dayGridMonth-view .fc-event[style*="background-color: #dc3545"]::before { background-color: #dc3545; }
.fc-dayGridMonth-view .fc-event[style*="background-color: #0dcaf0"]::before { background-color: #0dcaf0; }
.fc-dayGridMonth-view .fc-event[style*="background-color: #6c757d"]::before { background-color: #6c757d; }

@media (max-width: 768px) {
    .fc .fc-toolbar.fc-header-toolbar {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }
    .fc .fc-toolbar-title {
        font-size: 1.2rem;
        text-align: center;
    }
    .fc .fc-toolbar .fc-left, 
    .fc .fc-toolbar .fc-right {
        display: flex;
        justify-content: center;
    }
}

/* --- Corrección de textos para la Vista Mensual --- */
.fc-dayGridMonth-view .fc-event {
    background-color: var(--bs-body-bg) !important;
    border: 1px solid var(--bs-border-color) !important;
    color: var(--bs-body-color) !important; /* Texto oscuro según el tema */
    border-radius: 4px;
    padding: 2px 6px !important;
}

/* Forzar que el contenido personalizado dentro del mes se vea oscuro */
.fc-dayGridMonth-view .fc-event-main-custom {
    color: var(--bs-body-color) !important;
}

.fc-dayGridMonth-view .fc-event-time {
    color: var(--bs-secondary-color) !important;
    font-weight: 600;
}

.fc-dayGridMonth-view .fc-event-title {
    color: var(--bs-emphasis-color) !important;
    font-weight: 500;
}