/* Estilos generales - v2.3 texto de botones arreglado */
body, html {
    height: 100%;
    overflow: hidden; /* Evita el scroll en el body */
}

/* Dashboard Secondary Cards: forzar centrado vertical de iconos al alto del row del grid */
.dashboard-secondary-cards > div { display: flex; flex-direction: column; justify-content: center; }
.dashboard-secondary-cards > div > div { width: 100%; }

/* Número siempre alineado con el icono; label fluye debajo sin afectar la posición */
.dashboard-secondary-cards > div > .flex.items-center.gap-3 {
    display: grid !important;
    grid-template-columns: auto 1fr;
    column-gap: 0.75rem;
    row-gap: 2px;
    align-items: center;
}
.dashboard-secondary-cards > div > .flex.items-center.gap-3 > div:nth-child(2) {
    display: contents;
}
.dashboard-secondary-cards > div > .flex.items-center.gap-3 > div:nth-child(2) > p:nth-child(2) {
    grid-column: 2;
    align-self: start;
    min-height: 2rem;
}

/* Logo del sidebar: latido azul eléctrico lento detrás del contorno (premium) */
.brand-logo-glow {
    /* Animación de brillo eliminada a petición del usuario: logo estático */
}

main {
    height: 100%;
    overflow-y: auto; /* Permite el scroll solo en el contenido principal */
}

/* Estilos para el calendario de FullCalendar */
:root {
    --fc-border-color: #e5e7eb;
    --fc-daygrid-event-dot-width: 8px;
    --fc-list-event-dot-width: 10px;
    --fc-list-event-hover-bg-color: #f9fafb;
    --fc-button-bg-color: #3b82f6; /* azul */
    --fc-button-border-color: #3b82f6;
    --fc-button-hover-bg-color: #2563eb;
    --fc-button-hover-border-color: #2563eb;
    --fc-button-active-bg-color: #1d4ed8;
    --fc-button-active-border-color: #1d4ed8;
    --fc-today-bg-color: rgba(253, 224, 71, 0.2); /* amarillo suave */
}

.fc .fc-toolbar-title {
    font-size: 1.25rem;
    font-weight: 600;
}

/* Estilos para hacer los botones del calendario más pequeños y bonitos */
.fc .fc-button {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    transition: all 0.15s ease-in-out !important;
}

.fc .fc-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.fc .fc-button:active {
    transform: translateY(0);
}

/* Botones de navegación (prev/next) más compactos */
.fc .fc-prev-button,
.fc .fc-next-button {
    padding: 0.25rem 0.5rem !important;
    min-width: 2rem !important;
    height: 2rem !important;
}

.fc .fc-today-button {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.75rem !important;
}

/* Botones de vista (mes/año) más elegantes */
.fc .fc-dayGridMonth-button,
.fc .fc-multiMonthYear-button {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.75rem !important;
    border-radius: 1rem !important;
}

/* Estilos específicos para móvil */
@media (max-width: 768px) {
    .fc .fc-toolbar {
        gap: 0.375rem !important;
        padding: 0.5rem !important;
        margin-bottom: 1rem !important;
    }

    .fc .fc-button {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.75rem !important;
        min-height: 2.25rem !important;
        line-height: 1.2 !important;
        font-weight: 600 !important;
        border-radius: 0.5rem !important;
        border: 2px solid var(--fc-button-border-color) !important;
    }

    .fc .fc-prev-button,
    .fc .fc-next-button {
        width: 2.5rem !important;
        height: 2.25rem !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 0.5rem !important;
        font-size: 1rem !important;
        font-weight: bold !important;
        background: linear-gradient(135deg, var(--fc-button-bg-color), #1d4ed8) !important;
        border: 2px solid var(--fc-button-border-color) !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    }

    .fc .fc-prev-button:hover,
    .fc .fc-next-button:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
    }

    .fc .fc-today-button {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.75rem !important;
        min-height: 2.25rem !important;
        background: linear-gradient(135deg, #059669, #047857) !important;
        border-color: #059669 !important;
    }

    .fc .fc-dayGridMonth-button,
    .fc .fc-multiMonthYear-button {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.75rem !important;
        border-radius: 0.5rem !important;
        min-height: 2.25rem !important;
        background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
        border-color: #7c3aed !important;
    }

    .fc .fc-toolbar-title {
        font-size: 1rem !important;
        margin: 0 0.5rem !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;
        text-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
    }

    /* Ajustar la barra de herramientas en móvil para que todo quepa mejor */
    .fc .fc-toolbar-chunk {
        display: flex !important;
        align-items: center !important;
        gap: 0.0625rem !important;
        flex-shrink: 1 !important;
    }

    /* Hacer la toolbar más compacta en móvil */
    .fc .fc-toolbar.fc-header-toolbar {
        margin-bottom: 0.5rem !important;
        padding: 0 !important;
    }

    /* Ocultar texto original y mostrar solo texto personalizado en móvil */
    .fc .fc-dayGridMonth-button {
        font-size: 0 !important; /* Oculta todo el texto original */
    }
    .fc .fc-dayGridMonth-button::after {
        content: "MES" !important;
        font-weight: 600 !important;
        font-size: 0.75rem !important;
        display: block !important;
    }

    .fc .fc-multiMonthYear-button {
        font-size: 0 !important; /* Oculta todo el texto original */
    }
    .fc .fc-multiMonthYear-button::after {
        content: "AÑO" !important;
        font-weight: 600 !important;
        font-size: 0.75rem !important;
        display: block !important;
    }

    .fc .fc-today-button {
        font-size: 0 !important; /* Oculta todo el texto original */
    }
    .fc .fc-today-button::after {
        content: "HOY" !important;
        font-weight: 600 !important;
        font-size: 0.75rem !important;
        display: block !important;
    }

    /* Mejorar las flechas de navegación en móvil */
    .fc .fc-prev-button .fc-icon,
    .fc .fc-next-button .fc-icon {
        font-size: 0.875rem !important;
        font-weight: bold !important;
    }

    /* Añadir efectos visuales a todos los botones en móvil */
    .fc .fc-button:active {
        transform: translateY(1px) !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
    }

    /* Mejorar el aspecto de los botones cuando están activos/seleccionados */
    .fc .fc-button-active {
        background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.2) !important;
        transform: translateY(1px) !important;
    }

    /* Espaciado mejorado entre chunks de la toolbar */
    .fc .fc-toolbar-chunk:not(:last-child) {
        margin-right: 0.5rem !important;
    }
}

.fc .fc-daygrid-day.fc-day-today {
    background-color: var(--fc-today-bg-color) !important;
}

/* Colores para los eventos */
.event-vacation {
    background-color: #34d399 !important; /* verde */
    border-color: #34d399 !important;
}
.event-sick_leave {
    background-color: #dc2626 !important; /* rojo fuerte */
    border-color: #dc2626 !important;
}
.event-maternity_leave {
    background-color: #ec4899 !important; /* rosa */
    border-color: #ec4899 !important;
}
.event-breastfeeding {
    background-color: #60a5fa !important; /* azul cielo (biberon) */
    border-color: #60a5fa !important;
}
.event-personal_day {
    background-color: #fbbf24 !important; /* ambar */
    border-color: #fbbf24 !important;
}
.event-pending {
    animation: pulse-pending 2s infinite !important;
    border: 3px solid #f97316 !important; /* borde naranja grueso */
    box-shadow: 0 0 15px rgba(249, 115, 22, 0.6) !important;
    opacity: 0.95 !important;
    font-weight: 600 !important;
    font-size: 0.7rem !important;
    position: relative !important;
    z-index: 10 !important; /* Asegurar que esté por encima */
}

/* Add pending indicator to event title */
.event-pending .fc-event-title::after {
    content: " ⏳";
    font-size: 0.8em;
    margin-left: 2px;
}

/* Mobile specific adjustments for pending events */
@media (max-width: 768px) {
    .event-pending {
        border-width: 2px !important;
        animation-duration: 1.8s !important;
    }

    .event-pending .fc-event-title::after {
        content: " ⏳";
        font-size: 0.7em;
    }
}

.event-reviewing {
    animation: pulse-reviewing 2s infinite;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.8) !important;
    border: 3px dashed #3b82f6 !important;
    font-weight: bold !important;
}

@keyframes pulse-reviewing {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes pulse-pending {
    0% {
        transform: scale(1);
        border-color: #f97316;
        box-shadow: 0 0 15px rgba(249, 115, 22, 0.6);
    }
    50% {
        transform: scale(1.05);
        border-color: #fb923c;
        box-shadow: 0 0 20px rgba(249, 115, 22, 0.8);
    }
    100% {
        transform: scale(1);
        border-color: #f97316;
        box-shadow: 0 0 15px rgba(249, 115, 22, 0.6);
    }
}

.fc-event-main {
    cursor: pointer;
}
.fc-bg-event .fc-event-title {
    color: #4b5563;
    font-weight: 500;
}
.fc .fc-toolbar.fc-header-toolbar {
    font-size: 0.8rem;
}

/* ── Mini-calendario en modal de solicitud ── */
#leave-detail-minical {
    font-size: 0.72rem;
}
#leave-detail-minical .fc-toolbar.fc-header-toolbar {
    margin-bottom: 0.5em;
    font-size: 0.8rem;
}
#leave-detail-minical .fc-toolbar-title {
    font-size: 1rem !important;
    text-transform: capitalize;
}
#leave-detail-minical .fc-daygrid-day-number {
    font-size: 0.7rem;
    padding: 2px 4px;
}
#leave-detail-minical .fc-event {
    font-size: 0.65rem !important;
    padding: 1px 3px;
    line-height: 1.3;
    border-radius: 3px;
}
#leave-detail-minical .fc-col-header-cell-cushion {
    font-size: 0.7rem;
    padding: 3px 0;
}
#leave-detail-minical .fc-daygrid-day-frame {
    min-height: 3.5em;
}
#leave-detail-minical .fc-button {
    padding: 0.2em 0.5em;
    font-size: 0.75rem;
}

/* Solicitud actual parpadeando en el mini-calendario */
.event-requested {
    animation: pulse-requested 2.5s ease-in-out infinite !important;
    border: 2px solid #f97316 !important;
    z-index: 10 !important;
    font-weight: 700 !important;
}
@keyframes pulse-requested {
    0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(249, 115, 22, 0.5); }
    50% { opacity: 0.4; box-shadow: 0 0 12px rgba(249, 115, 22, 0.9); }
}

/* Estilos para modales */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 40;
    display: flex;
    justify-content: center;
    align-items: center;
}
.modal-content {
    z-index: 50;
    max-height: 90vh;
    overflow-y: auto;
}
/* Helper para ocultar la barra de scroll */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Ajustes para vista de año completo y múltiples eventos */
.fc-multimonth-month {
    min-height: 150px !important;
}

.fc-multimonth-daygrid {
    height: auto !important;
}

.fc-multimonth-daygrid .fc-daygrid-day {
    min-height: 60px !important;
    height: auto !important;
}

.fc-multimonth-daygrid .fc-daygrid-day-frame {
    min-height: 100%;
}

/* --- CAMBIO CLAVE PARA EL APILADO DE EVENTOS --- */
/* Asegurar que el contenedor de eventos pueda crecer y no romper el apilado */
.fc-multimonth-daygrid .fc-daygrid-day-events {
    margin-top: 1px !important;
    max-height: none !important; 
    overflow: visible !important;
}

.fc-multimonth-daygrid .fc-daygrid-event {
    height: 13px !important;
    min-height: 13px !important;
    font-size: 10px !important;
    padding: 0 1px !important;
    margin: 0 !important;
    margin-bottom: 1px !important;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
    
    /* Flexbox for perfect vertical centering */
    display: flex !important;
    align-items: center !important;
}

.fc-multimonth-daygrid .fc-event-title {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Ocultar por completo el enlace "+X más" */
.fc-more-link, .fc-daygrid-more-link {
    display: none !important;
}

/* --- DEBUGGING ADMIN DESKTOP VIEWS --- */
/* Custom responsive classes for admin tables */
.admin-desktop-only {
    display: none;
}

.admin-mobile-only {
    display: block;
}

@media (min-width: 768px) {
    .admin-desktop-only {
        display: block !important;
    }

    .admin-mobile-only {
        display: none !important;
    }

    /* Backup: Force Tailwind classes */
    #admin-tab-content .hidden.md\\:block {
        display: block !important;
    }

    #admin-tab-content .md\\:hidden {
        display: none !important;
    }

    /* FORCE DESKTOP TABLES - Nuclear option */
    #admin-tab-content #logs-tab .hidden,
    #admin-tab-content #contracts-tab .hidden {
        display: block !important;
        visibility: visible !important;
    }

    /* Force specific table structures */
    #admin-tab-content table.min-w-full {
        display: table !important;
        visibility: visible !important;
    }

    #admin-tab-content .overflow-x-auto {
        display: block !important;
        visibility: visible !important;
    }
}

/* --- AÑADIDO PARA MEJORAS VISUALES --- */

/* Botones con iconos en Configuración */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem; /* 8px */
    border-radius: 9999px; /* Círculo completo */
    transition: background-color 0.2s;
}
.btn-icon:hover {
    background-color: #f3f4f6; /* gris claro */
}

/* Botones para añadir nuevos elementos en Configuración */
.btn-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem; /* 8px */
    font-weight: 500;
    border: 1px solid #d1d5db; /* gris */
    background-color: #f9fafb; /* gris muy claro */
    color: #374151; /* gris oscuro */
    padding: 0.5rem 1rem;
    border-radius: 0.375rem; /* 6px */
    transition: all 0.2s;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.btn-add:hover {
    background-color: #f3f4f6;
    border-color: #9ca3af;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

/* Ajuste para las pestañas de admin en móvil */
@media (max-width: 767px) {
    .admin-tab {
        border-bottom: 1px solid #e5e7eb; /* Borde separador */
    }
    .admin-tab:last-child {
        border-bottom: none;
    }
}


/* Estilos responsivos para móvil */
@media (max-width: 768px) {
    .fc-multimonth-month {
        min-height: 120px !important;
    }
    .fc-multimonth-daygrid .fc-daygrid-event {
        font-size: 8px !important;
    }
    .fc-multimonth-daygrid .fc-daygrid-day {
        min-height: 20px !important;
    }
}

/* Desktop: que FullCalendar gestione las “lanes” correctamente */
@media (min-width: 769px) {
  .fc-multimonth-daygrid .fc-daygrid-day-events {
    /* display: block !important; */       /* clave: NO flex */
    max-height: none !important;
    overflow: visible !important;
  }
  .fc-multimonth-month { 
    min-height: 220px !important;    /* da más aire al mes */
  }
}

<!-- CSS versión 1758550571 -->