/* =========================================================
   1. VARIABLES GLOBALES Y BASE (Paleta SaaS Desaturada)
   ========================================================= */
:root {
    --bs-font-sans-serif: 'Inter', system-ui, -apple-system, sans-serif;
    --bs-body-bg: #f8fafc;
    --bs-border-color: #e2e8f0;
    
    /* Paleta Corporativa AUSEN */
    --bs-primary: #5b7999; /* Azul Acero */
    --bs-success: #68947b; /* Verde Salvia */
    --bs-danger: #bd7b61;  /* Terracota (Peligro/Borrar) */
    --bs-warning: #d99c85; /* Terracota Suave (Avisos/Ajustes) */
    --bs-info: #7c98b3;    /* Azul Acero Claro */
}

/* Fuerza a los botones warning a tener texto blanco (por defecto es negro y queda feo) */
.btn-warning {
    color: white !important;
}
.btn-warning:hover {
    color: white !important;
    background-color: #c48973 !important;
}

body {
    font-family: var(--bs-font-sans-serif);
    letter-spacing: -0.015em;
    transition: background-color 0.3s ease;
}

/* Navbar estilo Glassmorphism / Flotante */
.navbar {
    background-color: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: none !important;
}
.navbar-brand, .nav-link { color: #0f172a !important; font-weight: 500; }
.nav-link:hover { color: #3b82f6 !important; }

/* =========================================================
   2. COMPONENTES GLOBALES
   ========================================================= */
/* Tarjetas estilo Tailwind */
.card {
    border: 1px solid var(--bs-border-color) !important;
    border-radius: 1rem !important;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05) !important;
    transition: box-shadow 0.2s ease;
    overflow: hidden !important;
}
.card-header {
    background-color: transparent !important;
    border-bottom: 1px solid var(--bs-border-color);
    padding: 1.25rem 1.5rem;
}

/* Efectos Hover en Tarjetas */
.card-hover { 
    transition: transform 0.2s ease, box-shadow 0.2s ease; 
}
.card-hover:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important; 
}

/* Botones Planos */
.btn {
    border-radius: 0.5rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border: none;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    transition: all 0.2s;
}
.btn-primary { background-color: var(--bs-primary); }
.btn-primary:hover { background-color: #2563eb; transform: translateY(-1px); }
.btn-outline-secondary { border: 1px solid #cbd5e1; color: #475569; background: white; }
.btn-outline-secondary:hover { background: #f1f5f9; color: #0f172a; }
[data-bs-theme="dark"] #dateFilterForm .input-group .btn-outline-secondary { border-color: #334155; color: #94a3b8; background: #1e293b; }
[data-bs-theme="dark"] #dateFilterForm .input-group .btn-outline-secondary:hover { background: rgba(248, 250, 252, 0.05); color: #f8fafc; }

/* Inputs limpios */
.form-control, .form-select {
    border-radius: 0.5rem;
    border: 1px solid #cbd5e1;
    padding: 0.6rem 1rem;
    background-color: #ffffff;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.form-control:focus, .form-select:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

/* Tablas espaciosas */
.table { margin-bottom: 0; }
.table th { font-weight: 600; color: #64748b; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; padding-top: 1rem; padding-bottom: 1rem; }
.table td { padding: 1rem 0.5rem; color: #334155; vertical-align: middle; }

/* Avatares */
.avatar-circle { 
    width: 40px; height: 40px; 
    background-color: #e2e8f0; color: #475569; 
    border-radius: 50%; display: flex; align-items: center; justify-content: center; 
    font-size: 0.9rem; font-weight: 600; 
}
.avatar-sm {
    width: 38px; height: 38px;
    background-color: var(--bs-secondary-bg); color: var(--bs-secondary-color);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 0.85rem; flex-shrink: 0;
}
.avatar-xl {
    width: 80px !important; height: 80px !important; font-size: 2rem !important;
    display: flex; align-items: center; justify-content: center;
}

/* =========================================================
   3. VISTAS ESPECÍFICAS
   ========================================================= */
/* Pantallas de Autenticación y Recuperación */
.auth-wrapper {
    background: url('../img/fondo-login.png');
    background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed;
    height: 100vh; margin: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.auth-card {
    width: 100%; max-width: 460px;
    border: none; border-radius: 1rem;
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
    backdrop-filter: blur(10px);
    margin: 0 20px;
    max-height: 98vh; overflow-y: auto;
}
.brand-logo-auth { font-size: 3rem; margin-bottom: 0.5rem; display: block; text-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.brand-name-auth { font-family: 'Segoe UI', sans-serif; letter-spacing: 2px; font-weight: 300; font-size: 1.2rem; margin-bottom: 0.2rem; display: block; text-transform: uppercase; color: #0f172a; }
.brand-slogan-auth { font-size: 0.9rem; letter-spacing: 0.5px; font-weight: 700; font-style: normal; margin-bottom: 2rem; display: block; color: #000000; }

/* Dashboard - Tarjetas Contadores */
/* Dashboard - Tarjetas Contadores */
.card-counter { 
    border: none !important; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); 
    color: white; 
    transition: transform 0.2s; 
    position: relative;
    overflow: hidden;
}
.card-counter:hover { transform: translateY(-5px); }

/* Overlay de detalle al hacer hover sobre las tarjetas del dashboard */
.card-hover-detail {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.2rem;
    background: rgba(0, 0, 0, 0.78);
    color: #fff;
    font-size: 0.85rem;
    line-height: 1.5;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    border-radius: inherit;
    z-index: 2;
}
.card-counter:hover .card-hover-detail {
    opacity: 1;
}

/* --- NUEVOS COLORES SEMÁNTICOS DESATURADOS --- */
/* Azul Acero suave para "Total" */
.bg-gradient-primary { background: linear-gradient(135deg, #7c98b3 0%, #5b7999 100%); } 
/* Verde Salvia para "Presentes" */
.bg-gradient-success { background: linear-gradient(135deg, #8cb39d 0%, #68947b 100%); } 
/* Azul Grisáceo para "Asistencia" */
.bg-gradient-info { background: linear-gradient(135deg, #7ba5b0 0%, #5c8a97 100%); }
/* Terracota / Naranja Mate para "Ausentes" */
.bg-gradient-warning { background: linear-gradient(135deg, #d99c85 0%, #bd7b61 100%); }
/* Púrpura para "Pendientes" */
.bg-gradient-purple { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); }
/* Dashboard - Enlaces */
.empleado-link { color: var(--bs-body-color); font-weight: bold; text-decoration: none; transition: color 0.2s; }
.empleado-link:hover { color: #3b82f6; text-decoration: underline; }

/* Dashboard - Calendario Base */
#calendar-container {
    background: #ffffff; padding: 25px; border-radius: 1rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
    margin-top: 30px; transition: background-color 0.3s;
}
#calendar { max-width: 100%; min-height: 650px; font-size: 0.9rem; }

/* =========================================================
   4. UTILIDADES (Helpers)
   ========================================================= */
.table-container-500 { max-height: 500px; overflow-y: auto; }
.audit-table-container { max-height: 300px; overflow-y: auto; }
.chart-container { height: 300px; }
.input-month-custom { width: auto; cursor: pointer; }

/* =========================================================
   5. MODO OSCURO (Overrides Centralizados)
   ========================================================= */
/* Estructura Base y Navbar */
[data-bs-theme="dark"] body { background-color: #0f172a; color: #f8fafc; }
[data-bs-theme="dark"] .navbar { background-color: rgba(15, 23, 42, 0.8) !important; border-color: #1e293b !important; }
[data-bs-theme="dark"] .navbar-brand, [data-bs-theme="dark"] .nav-link { color: #f8fafc !important; }
[data-bs-theme="dark"] .navbar-brand img,
[data-bs-theme="dark"] footer img {
    filter: brightness(0) invert(1);
}

/* Tarjetas y Fondos */
[data-bs-theme="dark"] .card, 
[data-bs-theme="dark"] .bg-body, 
[data-bs-theme="dark"] .bg-light, 
[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-white.rounded-4,
[data-bs-theme="dark"] .bg-light.rounded-3 { 
    background-color: #1e293b !important; 
    border-color: #334155 !important; 
}
[data-bs-theme="dark"] .bg-body-tertiary { background-color: #0f172a !important; }
[data-bs-theme="dark"] .border { border-color: #334155 !important; }
[data-bs-theme="dark"] .card-hover:hover { box-shadow: 0 10px 20px rgba(0,0,0,0.4) !important; }

/* Elementos transparentes para no solapar contenedores padres */
[data-bs-theme="dark"] .card-body,
[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer,
[data-bs-theme="dark"] .list-group {
    background-color: transparent !important;
}

/* Tipografía */
[data-bs-theme="dark"] .text-dark, 
[data-bs-theme="dark"] .form-check-label { color: #f8fafc !important; }
[data-bs-theme="dark"] .text-muted, 
[data-bs-theme="dark"] .text-secondary,
[data-bs-theme="dark"] .form-label { color: #94a3b8 !important; }

/* Formularios e Inputs */
[data-bs-theme="dark"] .form-control, 
[data-bs-theme="dark"] .form-select { background-color: #0f172a; border-color: #334155; color: white; }
[data-bs-theme="dark"] .form-check-input { background-color: #0f172a; border-color: #475569; }
[data-bs-theme="dark"] .form-check-input:checked { background-color: #3b82f6 !important; border-color: #3b82f6 !important; }

/* Tablas */
[data-bs-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: #f8fafc;
    --bs-table-border-color: #334155;
}
[data-bs-theme="dark"] .table-light th, 
[data-bs-theme="dark"] .table th { 
    background-color: #1e293b !important;
    color: #f8fafc !important; 
    border-color: #334155 !important; 
    border-bottom: 1px solid #334155 !important; 
}
[data-bs-theme="dark"] .table td { background-color: transparent !important; border-bottom-color: #334155; }
[data-bs-theme="dark"] .table-hover tbody tr:hover { background-color: rgba(248, 250, 252, 0.05) !important; }

/* Semáforo de jornada (asistencia): conserva verde/amarillo en modo oscuro */
[data-bs-theme="dark"] .table-success > td,
[data-bs-theme="dark"] .table-success > th {
    background-color: rgba(25, 135, 84, 0.25) !important;
}
[data-bs-theme="dark"] .table-warning > td,
[data-bs-theme="dark"] .table-warning > th {
    background-color: rgba(255, 193, 7, 0.20) !important;
}

/* Listas (List-group) */
[data-bs-theme="dark"] .list-group-item { background-color: transparent !important; border-color: #334155 !important; color: #f8fafc !important; border-radius: 0 !important; }
[data-bs-theme="dark"] .list-group-item:hover { background-color: rgba(248, 250, 252, 0.05) !important; }
[data-bs-theme="dark"] .list-group-item .empleado-link { color: #f8fafc !important; }
[data-bs-theme="dark"] .list-group-item .empleado-link:hover { color: #93c5fd !important; }

/* Pestañas (Nav Pills) */
[data-bs-theme="dark"] .nav-pills .nav-link:not(.active) { color: #94a3b8; }
[data-bs-theme="dark"] .nav-pills .nav-link:not(.active):hover { color: #f8fafc; background-color: rgba(248, 250, 252, 0.05); }

/* Menú Desplegable (Dropdown) */
[data-bs-theme="dark"] .dropdown-menu { background-color: #1e293b !important; border-color: #334155 !important; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3) !important; }
[data-bs-theme="dark"] .dropdown-header { color: #94a3b8 !important; }
[data-bs-theme="dark"] .dropdown-item { color: #f8fafc !important; }
[data-bs-theme="dark"] .dropdown-item:hover { background-color: rgba(248, 250, 252, 0.05) !important; color: #3b82f6 !important; }
[data-bs-theme="dark"] .dropdown-divider { border-top-color: #334155 !important; }
[data-bs-theme="dark"] .dropdown-item.text-danger { color: #ef4444 !important; }
[data-bs-theme="dark"] .dropdown-item.text-danger:hover { color: #ef4444 !important; background-color: rgba(239, 68, 68, 0.1) !important; }

/* =========================================================
   AUTENTICACIÓN - Modo Oscuro
   ========================================================= */
[data-bs-theme="dark"] .auth-wrapper {
    background: #0f172a;
}
[data-bs-theme="dark"] .auth-card {
    background-color: #1e293b;
    border-color: #334155;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
[data-bs-theme="dark"] .auth-card .form-control,
[data-bs-theme="dark"] .auth-card .form-select {
    background-color: #0f172a;
    border-color: #334155;
    color: #f8fafc;
}
[data-bs-theme="dark"] .auth-card .form-control:focus,
[data-bs-theme="dark"] .auth-card .form-select:focus {
    background-color: #0f172a;
    color: #f8fafc;
    box-shadow: 0 0 0 4px rgba(91, 121, 153, 0.25);
}
[data-bs-theme="dark"] .auth-card .form-control::placeholder {
    color: #64748b;
}
[data-bs-theme="dark"] .auth-card .form-label {
    color: #cbd5e1 !important;
}
[data-bs-theme="dark"] .auth-card a[href*="password_reset"] {
    color: #93c5fd !important;
}
[data-bs-theme="dark"] .auth-card a[href*="password_reset"]:hover {
    color: #bfdbfe !important;
}
[data-bs-theme="dark"] .auth-card .input-group .btn {
    background-color: #0f172a;
    border-color: #334155;
    color: #94a3b8;
}
[data-bs-theme="dark"] .auth-card .input-group .btn:hover {
    background-color: #1e293b;
    color: #f8fafc;
}
[data-bs-theme="dark"] .auth-card .text-muted,
[data-bs-theme="dark"] .auth-card .text-secondary {
    color: #94a3b8 !important;
}
[data-bs-theme="dark"] .auth-card .alert-info {
    background-color: rgba(14, 116, 144, 0.2) !important;
    border-color: #0e7490 !important;
    color: #67e8f9 !important;
}
[data-bs-theme="dark"] .auth-card .alert-danger {
    background-color: rgba(185, 28, 28, 0.2) !important;
    border-color: #b91c1c !important;
    color: #fca5a5 !important;
}
[data-bs-theme="dark"] .auth-card hr,
[data-bs-theme="dark"] .auth-card .border-top {
    border-color: #334155 !important;
}
[data-bs-theme="dark"] .brand-name-auth {
    color: #f8fafc;
}
[data-bs-theme="dark"] .brand-slogan-auth {
    color: #f8fafc;
}

/* =========================================================
   FULLCALENDAR — Modo Claro
   ========================================================= */

/* Fines de semana — sutil fondo gris */
.fc .fc-day-sat,
.fc .fc-day-sun {
    background-color: rgba(0, 0, 0, 0.03);
}

/* Hover en eventos — ambos modos */
.fc .fc-event {
    cursor: pointer;
    transition: filter 0.15s, transform 0.1s;
}
.fc .fc-event:hover {
    filter: brightness(0.85);
    transform: scale(1.02);
    z-index: 2;
}

/* Feriados (fondo amarillo) — texto oscuro en light */
.fc .fc-bg-event {
    opacity: 0.85;
}

/* Check verde de días con asistencia importada */
.fc .fc-daygrid-day {
    position: relative;
}
.check-asistencia {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-right: 4px;
    border-radius: 50%;
    background-color: #14532d;
    color: #ffffff;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
    pointer-events: none;
    align-self: center;
}
.check-asistencia-legend {
    display: inline-block;
    width: 14px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    border-radius: 50%;
    background-color: #14532d;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
}
.check-asistencia-legend::after {
    content: "✓";
}

/* Círculo naranja con el total de ausentes por día */
.contador-ausentes {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 3px;
    margin-right: 4px;
    border-radius: 50%;
    background-color: #b45309;
    color: #ffffff;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
    pointer-events: none;
    align-self: center;
}
.contador-ausentes-legend {
    display: inline-block;
    width: 14px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    border-radius: 50%;
    background-color: #b45309;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
}

/* Círculo naranja: total de ausentes en días sin carga del reloj (mismo estilo que los demás días) */
.contador-sin-reloj {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 3px;
    margin-right: 4px;
    border-radius: 50%;
    background-color: #b45309;
    color: #ffffff;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
    pointer-events: none;
    align-self: center;
}
.contador-sin-reloj-legend {
    display: inline-block;
    width: 14px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    border-radius: 50%;
    background-color: #991b1b;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
}
.contador-sin-reloj-legend::after {
    content: "✕";
}

/* Círculo rojo con "X": día sin carga del reloj */
.x-sin-reloj {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-right: 4px;
    border-radius: 50%;
    background-color: #991b1b;
    color: #ffffff;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
    pointer-events: none;
    align-self: center;
}

/* Navegación de fechas del dashboard — mismo estilo que el toolbar de FullCalendar */
.fc-nav-grupo .fc-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    background-color: #2c3e50;
    border: 1px solid #2c3e50;
    color: #ffffff;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 0.85rem;
    line-height: 1.4;
    font-weight: 400;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.fc-nav-grupo .fc-nav-btn + .fc-nav-btn {
    margin-left: 2px;
}
.fc-nav-grupo .fc-nav-btn:hover,
.fc-nav-grupo .fc-nav-btn:focus-visible {
    background-color: #34495e;
    border-color: #34495e;
    color: #ffffff;
}
[data-bs-theme="dark"] .fc-nav-grupo .fc-nav-btn {
    background-color: #0f172a;
    border-color: #334155;
    color: #94a3b8;
    box-shadow: none;
}
[data-bs-theme="dark"] .fc-nav-grupo .fc-nav-btn:hover,
[data-bs-theme="dark"] .fc-nav-grupo .fc-nav-btn:focus-visible {
    background-color: #3b82f6;
    border-color: #3b82f6;
    color: #ffffff;
}

/* Selector de fecha del dashboard — flatpickr */
.flatpickr-wrapper {
    display: inline-flex;
}
#fecha.flatpickr-input {
    width: 145px;
    background: transparent;
    border: none;
    color: inherit;
    font-weight: bold;
    font-family: inherit;
}
#fecha.flatpickr-input:focus {
    outline: none;
    box-shadow: none;
}
/* Calendario flatpickr en modo oscuro */
[data-bs-theme="dark"] .flatpickr-calendar {
    background-color: #1e293b;
    border-color: #334155;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
/* Flechita del popup */
[data-bs-theme="dark"] .flatpickr-calendar.arrowTop:before {
    border-bottom-color: #334155;
}
[data-bs-theme="dark"] .flatpickr-calendar.arrowTop:after {
    border-bottom-color: #1e293b;
}
[data-bs-theme="dark"] .flatpickr-calendar.arrowBottom:before {
    border-top-color: #334155;
}
[data-bs-theme="dark"] .flatpickr-calendar.arrowBottom:after {
    border-top-color: #1e293b;
}
/* Contenedores internos */
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-innerContainer,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-rContainer,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-weekdays {
    background-color: #1e293b;
}
/* Texto base */
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-day,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-weekday,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-month,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-current-month {
    color: #f8fafc;
}
/* Mes y año: select y entrada */
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-monthDropdown-months {
    color: #f8fafc;
    background-color: #1e293b;
}
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-monthDropdown-months option {
    background-color: #1e293b;
    color: #f8fafc;
}
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-current-month input.cur-year {
    color: #f8fafc;
    background-color: #1e293b;
    caret-color: #f8fafc;
}
/* Flechas prev/next mes */
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-prev-month svg,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-next-month svg {
    fill: #94a3b8;
}
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-prev-month:hover svg,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-next-month:hover svg {
    fill: #f8fafc;
}
/* Días del mes */
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-day.flatpickr-disabled,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-day.prevMonthDay,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-day.nextMonthDay {
    color: #475569;
}
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-day.selected,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-day.selected:hover {
    background-color: #3b82f6;
    border-color: #3b82f6;
    color: #ffffff;
}
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-day.today {
    border-color: #3b82f6;
}
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-day.today:hover {
    background-color: #334155;
    color: #f8fafc;
}
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-day:hover {
    background-color: #334155;
}
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-day.flatpickr-disabled:hover {
    background-color: transparent;
}
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-day.startRange,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-day.endRange,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-day.inRange {
    background-color: #1d4ed8;
    border-color: #1d4ed8;
    color: #ffffff;
}

/* Tooltip de Bootstrap — contraste en modo claro */
[data-bs-theme="light"] .tooltip-inner {
    background-color: #1e293b;
    color: #f8fafc;
    max-width: 350px;
    text-align: left;
    white-space: pre-line;
}
[data-bs-theme="light"] .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
[data-bs-theme="light"] .bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #1e293b;
}
[data-bs-theme="light"] .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,
[data-bs-theme="light"] .bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: #1e293b;
}
[data-bs-theme="light"] .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before,
[data-bs-theme="light"] .bs-tooltip-left .tooltip-arrow::before {
    border-left-color: #1e293b;
}
[data-bs-theme="light"] .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before,
[data-bs-theme="light"] .bs-tooltip-right .tooltip-arrow::before {
    border-right-color: #1e293b;
}

/* Tooltip en modo oscuro — fondo gris oscuro, texto blanco */
[data-bs-theme="dark"] .tooltip-inner {
    background-color: #334155;
    color: #f8fafc;
    max-width: 350px;
    text-align: left;
    white-space: pre-line;
}
[data-bs-theme="dark"] .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
[data-bs-theme="dark"] .bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #334155;
}
[data-bs-theme="dark"] .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,
[data-bs-theme="dark"] .bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: #334155;
}
[data-bs-theme="dark"] .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before,
[data-bs-theme="dark"] .bs-tooltip-left .tooltip-arrow::before {
    border-left-color: #334155;
}
[data-bs-theme="dark"] .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before,
[data-bs-theme="dark"] .bs-tooltip-right .tooltip-arrow::before {
    border-right-color: #334155;
}

/* =========================================================
   FULLCALENDAR — Modo Oscuro
   ========================================================= */
[data-bs-theme="dark"] #calendar-container {
    background: #1e293b;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
[data-bs-theme="dark"] .fc {
    --fc-page-bg-color: transparent;
    --fc-neutral-bg-color: #1e293b;
    --fc-neutral-text-color: #94a3b8;
    --fc-border-color: #334155;
    --fc-today-bg-color: rgba(59, 130, 246, 0.15);
    color: #f8fafc !important;
}
[data-bs-theme="dark"] .fc-theme-standard th,
[data-bs-theme="dark"] .fc-theme-standard td,
[data-bs-theme="dark"] .fc-view-harness,
[data-bs-theme="dark"] .fc-scrollgrid {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}
[data-bs-theme="dark"] .fc-day-today {
    background-color: var(--fc-today-bg-color) !important;
}
[data-bs-theme="dark"] .fc-col-header-cell-cushion,
[data-bs-theme="dark"] .fc-daygrid-day-number {
    color: #f8fafc !important;
    text-decoration: none;
}
/* Fines de semana en dark */
[data-bs-theme="dark"] .fc .fc-day-sat,
[data-bs-theme="dark"] .fc .fc-day-sun {
    background-color: rgba(148, 163, 184, 0.08);
}
/* Botones */
[data-bs-theme="dark"] .fc .fc-button-primary {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
    box-shadow: none !important;
    text-transform: capitalize;
}
[data-bs-theme="dark"] .fc .fc-button-primary:not(:disabled):hover,
[data-bs-theme="dark"] .fc .fc-button-primary:not(:disabled):active,
[data-bs-theme="dark"] .fc .fc-button-primary:not(:disabled).fc-button-active {
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
}
/* Tablas y bordes */
[data-bs-theme="dark"] .fc table,
[data-bs-theme="dark"] table.fc-scrollgrid {
    border-color: #334155 !important;
    border-collapse: collapse !important;
}
/* Eventos — texto blanco por defecto en dark */
[data-bs-theme="dark"] .fc-event-title,
[data-bs-theme="dark"] .fc-event-draggable,
[data-bs-theme="dark"] .fc-daygrid-event {
    color: #ffffff !important;
}
/* Eventos con fondo claro (cyan, amarillo) — texto oscuro en ambos modos */
.fc-event-style-cyan .fc-event-title,
.fc-event-style-amber .fc-event-title {
    color: #000000 !important;
}
/* Background events (faltas, feriados) — sin borde en dark */
[data-bs-theme="dark"] .fc .fc-bg-event {
    opacity: 0.7;
}
/* Hover en dark */
[data-bs-theme="dark"] .fc .fc-event:hover {
    filter: brightness(1.15);
}
/* Lista view hover dark */
[data-bs-theme="dark"] .fc .fc-list-event:hover td {
    background-color: #334155 !important;
}

/* ==========================================
   FIX: PESTAÑAS (NAV-TABS) CENTRAL DE CARGAS
   ========================================== */
[data-bs-theme="dark"] .nav-tabs {
    border-bottom-color: #334155 !important;
}
[data-bs-theme="dark"] .nav-tabs .nav-link {
    color: #94a3b8 !important; /* Gris apagado para pestañas inactivas */
}
[data-bs-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: #334155 !important;
    color: #f8fafc !important;
}
/* Pestaña Activa: Fondo igual a la tarjeta y borde inferior oculto */
[data-bs-theme="dark"] .nav-tabs .nav-item.show .nav-link, 
[data-bs-theme="dark"] .nav-tabs .nav-link.active {
    color: #f8fafc !important;
    background-color: #1e293b !important; 
    border-color: #334155 #334155 #1e293b !important; 
}

/* ==========================================
   FIX: TEXTOS ILEGIBLES EN TABLAS (EMPLEADOS)
   ========================================== */
/* Fuerza a que los nombres y textos principales sean blanco humo */
[data-bs-theme="dark"] .table td,
[data-bs-theme="dark"] .table td div {
    color: #f8fafc !important; 
}
/* Un gris mucho más luminoso (slate-300) para subtítulos, cargos y legajos */
[data-bs-theme="dark"] .table td .text-muted,
[data-bs-theme="dark"] .table td .text-secondary,
[data-bs-theme="dark"] td.text-secondary {
    color: #cbd5e1 !important; 
}

/* ==========================================
   FIX: LUPA Y BORDES DE BÚSQUEDA (MODO OSCURO)
   ========================================== */
[data-bs-theme="dark"] .input-group-text {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}

/* ==========================================
   FIX: FORMULARIOS EN MODO CLARO
   ========================================== */
html:not([data-bs-theme="dark"]) .card-body label,
html:not([data-bs-theme="dark"]) .card-body .form-label,
html:not([data-bs-theme="dark"]) .card-body .form-check-label {
    color: #334155 !important;
}

html:not([data-bs-theme="dark"]) .card-body .form-text,
html:not([data-bs-theme="dark"]) .card-body small {
    color: #64748b !important;
}

/* ==========================================
   SCROLLBAR MODERNO (Estilo SaaS Premium)
   ========================================== */
/* Hacemos la barra más finita (8px en vez de los 16px por defecto) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* El fondo por donde corre la barra (transparente para que no moleste) */
::-webkit-scrollbar-track {
    background: transparent;
}

/* El "pulgar" (la barrita que agarrás para bajar) en MODO CLARO */
::-webkit-scrollbar-thumb {
    background-color: #cbd5e1; /* Gris suave */
    border-radius: 10px; /* Bordes bien redonditos */
}

/* Cuando le pasás el mouse por encima en MODO CLARO */
::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8; /* Gris un poco más oscuro */
}

/* --- Adaptación automática al MODO OSCURO --- */
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background-color: #334155; /* Gris azulado oscuro */
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background-color: #475569; /* Se ilumina un toque al pasar el mouse */
}

/* ==========================================
   FIX: TEXTOS INVISIBLES EN TARJETAS (DASHBOARD)
   ========================================== */
/* Forzamos a que TODO el contenido de la tarjeta sea blanco */
.card-counter,
.card-counter h2,
.card-counter h6,
.card-counter p,
.card-counter i,
.card-counter .text-muted,
.card-counter .text-secondary {
    color: #ffffff !important;
}

/* Le damos una sutil sombra al texto para que resalte más sobre los colores pastel */
.card-counter h2,
.card-counter h6,
.card-counter i {
    text-shadow: 0px 1px 3px rgba(0,0,0,0.15);
}

/* ==========================================
   FIX: BOTÓN DE AJUSTE MANUAL (WARNING)
   ========================================== */
/* Pisamos cualquier clase 'text-dark' rebelde y forzamos el texto blanco */
.btn-warning,
.btn-warning i,
.btn-warning.text-dark {
    color: #ffffff !important;
}

/* Oscurecemos un poquito el fondo al pasar el mouse para que haya feedback visual */
.btn-warning:hover,
.btn-warning.text-dark:hover {
    color: #ffffff !important;
    background-color: #c48973 !important; 
    border-color: #c48973 !important;
}

/* ==========================================
   FIX: ACORDEÓN DE AUDITORÍA (MODO OSCURO)
   ========================================== */
/* Fondo general del acordeón */
[data-bs-theme="dark"] .accordion-item,
[data-bs-theme="dark"] .accordion-body {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

/* Arreglo para los encabezados fijos (sticky-top) que usan bg-body */
[data-bs-theme="dark"] .audit-table-container th.bg-body {
    background-color: #1e293b !important;
    color: #94a3b8 !important;
    border-bottom-color: #334155 !important;
}

/* Arreglo para las rayas de la tabla (table-striped) */
[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(248, 250, 252, 0.03) !important; /* Raya súper sutil */
    color: #f8fafc !important;
}

/* Aseguramos que el texto de las filas pares también sea claro */
[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(even) > * {
    color: #cbd5e1 !important;
}

/* ==========================================
   MODAL EN MODO OSCURO
   ========================================== */
[data-bs-theme="dark"] .modal-content {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer {
    border-color: #334155 !important;
}

[data-bs-theme="dark"] .modal-header .btn-close {
    filter: invert(1) brightness(200%);
}

[data-bs-theme="dark"] .modal-title {
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .btn-dark {
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: #fff !important;
}

[data-bs-theme="dark"] .btn-dark:hover {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
}

/* ==========================================
   EFECTO DROPDOWN SAAS (GRACE PERIOD) - V4
   ========================================== */
.dropdown-hover .dropdown-menu {
    display: block !important; 
    position: absolute !important; /* Clave para que en celular flote y no empuje todo hacia abajo */
    top: 100% !important;
    visibility: hidden;
    opacity: 0;
    margin-top: 15px !important; 
    pointer-events: none; 
    transition: opacity 0.25s ease, margin-top 0.25s ease, visibility 0s linear 0.25s;
}

/* focus-within ayuda a que el menú se mantenga abierto al tocarlo en móviles */
.dropdown-hover:hover .dropdown-menu,
.dropdown-hover:focus-within .dropdown-menu {
    visibility: visible;
    opacity: 1;
    margin-top: 8px !important; 
    pointer-events: auto; 
    transition: opacity 0.15s ease, margin-top 0.15s ease, visibility 0s linear 0s;
}

.dropdown-hover::after {
    content: "";
    position: absolute;
    top: 100%; 
    left: 0;
    width: 100%;
    height: 20px; 
    background: transparent;
}

/* ==========================================
   BOTÓN CTA SAAS (CARGA RÁPIDA EN NAVBAR)
   ========================================== */
.btn-cta-nav {
    background-color: #334155; /* Slate 700 */
    color: #ffffff !important;
    border: 1px solid #475569;
    transition: all 0.2s ease;
}

.btn-cta-nav:hover {
    background-color: #0f172a; /* Slate 900 */
    border-color: #0f172a;
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Adaptación automática al Modo Oscuro */
[data-bs-theme="dark"] .btn-cta-nav {
    background-color: #f8fafc; /* Blanco humo */
    color: #0f172a !important; /* Letra oscura */
    border-color: #e2e8f0;
}

[data-bs-theme="dark"] .btn-cta-nav:hover {
    background-color: #cbd5e1; /* Gris clarito */
    box-shadow: 0 6px 12px rgba(255, 255, 255, 0.1) !important;
}

/* ==========================================
   ANIMACIÓN: PULSO DE NOTIFICACIONES
   ========================================== */
.indicador-pulso {
    animation: pulse-danger 2s infinite;
}

@keyframes pulse-danger {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* ==========================================
   FIX: NOTIFICACIONES EN MODO OSCURO
   ========================================== */
/* Fondo general de la caja del menú */
[data-bs-theme="dark"] .dropdown-menu {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

/* Fondo de la cabecera (título) y del pie (ver detalles) */
[data-bs-theme="dark"] .dropdown-menu .bg-body-tertiary {
    background-color: #0f172a !important;
    color: #f8fafc !important;
}

/* Forzamos que los textos negros pasen a blanco humo */
[data-bs-theme="dark"] .dropdown-menu .text-body,
[data-bs-theme="dark"] .dropdown-menu h6 {
    color: #f8fafc !important;
}

/* Hover suave al pasar el mouse por cada notificación */
[data-bs-theme="dark"] .dropdown-menu .dropdown-item:hover {
    background-color: rgba(248, 250, 252, 0.05) !important;
}

/* ==========================================
   FIX: NOTIFICACIONES FUERA DE PANTALLA
   ========================================== */
/* Forzamos que los dropdowns de la derecha crezcan hacia la izquierda */
.dropdown-hover .dropdown-menu-end {
    right: 0 !important;
    left: auto !important;
}

/* ==========================================
   ESTADOS DE NOTIFICACIONES (LEÍDO / NO LEÍDO)
   ========================================== */
.noti-item {
    transition: background-color 0.4s ease;
}

/* Modo Claro: Fondo apenas gris/azulado para "No Leído" */
html:not([data-bs-theme="dark"]) .unread-noti {
    background-color: #f1f5f9 !important; /* Slate 100 */
}

/* Modo Oscuro: Fondo apenas más claro que el base */
[data-bs-theme="dark"] .unread-noti {
    background-color: #334155 !important; /* Slate 700 */
}

/* ==========================================
   TOGGLE SWITCH SAAS (CARGA RÁPIDA Y FORMULARIOS)
   ========================================== */
/* Hacemos el switch un poco más grande y elegante */
.form-switch .form-check-input {
    width: 2.8em !important;
    height: 1.4em !important;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    margin-top: 0.1em;
}

/* Color APAGADO (Modo Claro) */
html:not([data-bs-theme="dark"]) .form-switch .form-check-input {
    background-color: #cbd5e1; /* Slate 300 */
    border-color: #cbd5e1;
}

/* Color APAGADO (Modo Oscuro) */
[data-bs-theme="dark"] .form-switch .form-check-input {
    background-color: #475569 !important; /* Slate 600 */
    border-color: #334155 !important;
}

/* Color ENCENDIDO (Ambos modos) - Verde SaaS */
.form-switch .form-check-input:checked {
    background-color: #10b981 !important; /* Emerald 500 */
    border-color: #10b981 !important;
}

/* Ajuste del texto (Label) para que quede bien alineado al switch */
.form-switch .form-check-label {
    cursor: pointer;
    font-weight: 500;
    padding-left: 0.5em;
    padding-top: 0.2em;
}

/* Forzamos que el texto sea visible en modo oscuro */
[data-bs-theme="dark"] .form-switch .form-check-label {
    color: #f8fafc !important;
}

/* Spinner overlay for tables */
.table-spinner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.88);
    z-index: 10;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
[data-bs-theme="dark"] .table-spinner-overlay {
    background: rgba(15, 23, 42, 0.88);
}

/* Notificaciones: botón marcar leído */
.noti-item {
    position: relative;
}
.noti-mark-read {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 1rem;
    opacity: 0.85;
    cursor: pointer;
    border: none;
    background: #e2e8f0;
    padding: 4px 8px;
    border-radius: 6px;
    color: #64748b;
    transition: all 0.3s ease;
    line-height: 1;
}
.noti-mark-read:hover {
    opacity: 1;
    background: #cbd5e1;
    transform: scale(1.1);
}
.noti-mark-read.marked {
    background: #22c55e !important;
    color: #fff !important;
    opacity: 1 !important;
    transform: scale(1.2);
    pointer-events: none;
}
[data-bs-theme="dark"] .noti-mark-read {
    background: #334155;
    color: #94a3b8;
}
[data-bs-theme="dark"] .noti-mark-read:hover {
    background: #475569;
}

/* Modal info cards */
.info-icon-card {
    cursor: help;
    font-size: 0.85rem;
    opacity: 0.6;
    transition: opacity 0.2s;
    margin-left: 4px;
}
.info-icon-card:hover {
    opacity: 1;
}

/* Mobile: ajustes responsivos */
@media (max-width: 767.98px) {
    .card-counter .display-6 {
        font-size: 1.8rem;
    }
    .card-counter h6 {
        font-size: 0.7rem;
    }
    .navbar .dropdown-menu {
        max-width: 95vw !important;
    }
    .fc .fc-toolbar {
        flex-direction: column;
        gap: 8px;
    }
    .fc .fc-toolbar-title {
        font-size: 1.1rem !important;
    }
    .table-responsive {
        font-size: 0.85rem;
    }
    .btn-group .btn {
        font-size: 0.75rem;
        padding: 0.2rem 0.4rem;
    }
}

/* Botones clickeables en reporte mensual */
.btn-detalle {
    cursor: pointer;
    transition: transform 0.15s, opacity 0.15s;
}
.btn-detalle:hover {
    opacity: 0.85;
    transform: scale(1.15);
}