/**
 * ARCHIVO: assets/css/theme-dark.css
 * PROPÓSITO: Hoja de estilos centralizada para el Modo Oscuro institucional del SGL.
 * WCAG AA: Diseñado con contraste óptimo, grises carbón y preservación de acentos institucionales.
 */

/* 1. Fondo General y Tipografía Base */
html.dark,
html.dark body {
    background-color: #0f172a !important; /* Slate 900 */
    color: #f1f5f9 !important;            /* Slate 100 */
}

/* 2. Contenedores, Tarjetas y Paneles */
html.dark .bg-white {
    background-color: #1e293b !important; /* Slate 800 */
    border-color: #334155 !important;     /* Slate 700 */
}

html.dark .bg-gray-100,
html.dark .bg-gray-50 {
    background-color: #0f172a !important; /* Slate 900 para superficies secundarias */
}

html.dark .bg-gray-50\/70,
html.dark .bg-gray-50\/80,
html.dark .bg-blue-50\/80 {
    background-color: #1e293b !important;
}

html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-gray-300,
html.dark .border-slate-100 {
    border-color: #334155 !important;     /* Slate 700 */
}

/* 3. Tipografía y Jerarquía Visual */
html.dark .text-gray-900,
html.dark .text-gray-800,
html.dark .text-slate-800,
html.dark .text-slate-900 {
    color: #f8fafc !important;            /* Slate 50 (Blanco suave de alto contraste) */
}

html.dark .text-gray-700,
html.dark .text-gray-600 {
    color: #cbd5e1 !important;            /* Slate 300 */
}

html.dark .text-gray-500,
html.dark .text-slate-500 {
    color: #94a3b8 !important;            /* Slate 400 */
}

html.dark .text-blue-900,
html.dark .text-blue-950 {
    color: #93c5fd !important;            /* Blue 300 para legibilidad institucional */
}

/* 4. Formularios, Inputs y Selects */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.dark select,
html.dark textarea {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25) !important;
}

html.dark input:disabled,
html.dark select:disabled {
    background-color: #1e293b !important;
    color: #64748b !important;
    border-color: #334155 !important;
    cursor: not-allowed !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #64748b !important;            /* Slate 500 */
}

/* 5. Tablas y Filas */
html.dark table tbody tr {
    border-color: #334155 !important;
}

html.dark table tbody tr:hover,
html.dark .hover\:bg-blue-50\/40:hover {
    background-color: rgba(51, 65, 85, 0.45) !important; /* Slate 700 transparente */
}

html.dark table thead tr.bg-blue-900 {
    background-color: #1e3a8a !important; /* Mantiene azul institucional */
}

/* 6. Modales y Ventanas Emergentes */
html.dark #modal-gestion > div,
html.dark #modal-licencia-mod > div,
html.dark #modal-vincular-telefono > div,
html.dark #modal-alertas-reincorporacion > div,
html.dark #modal-totp-setup > div {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

html.dark .bg-black.bg-opacity-50 {
    background-color: rgba(0, 0, 0, 0.75) !important;
}

/* 7. Badges y Etiquetas de Estado (Accesibilidad WCAG AA) */
html.dark span.bg-amber-50,
html.dark .bg-amber-50 {
    background-color: rgba(120, 53, 15, 0.35) !important;
    color: #fcd34d !important;
    border-color: rgba(217, 119, 6, 0.5) !important;
}

html.dark span.bg-emerald-50,
html.dark .bg-emerald-50 {
    background-color: rgba(6, 78, 59, 0.35) !important;
    color: #6ee7b7 !important;
    border-color: rgba(16, 185, 129, 0.5) !important;
}

html.dark span.bg-gray-100,
html.dark .bg-gray-100 {
    background-color: #334155 !important;
    color: #94a3b8 !important;
    border-color: #475569 !important;
}

html.dark span.bg-blue-50,
html.dark .bg-blue-50 {
    background-color: rgba(30, 58, 138, 0.4) !important;
    color: #93c5fd !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
}

/* 8. Selector de Fechas Flatpickr */
html.dark .flatpickr-calendar {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6) !important;
    color: #f8fafc !important;
}

html.dark .flatpickr-calendar .flatpickr-month,
html.dark .flatpickr-calendar .flatpickr-weekdays,
html.dark .flatpickr-calendar span.flatpickr-weekday {
    background: #1e293b !important;
    color: #93c5fd !important;
}

html.dark .flatpickr-day {
    color: #f1f5f9 !important;
}

html.dark .flatpickr-day:hover,
html.dark .flatpickr-day:focus {
    background: #334155 !important;
}

html.dark .flatpickr-day.selected {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}

html.dark .flatpickr-day.prevMonthDay,
html.dark .flatpickr-day.nextMonthDay,
html.dark .flatpickr-day.flatpickr-disabled {
    color: #475569 !important;
}

html.dark .flatpickr-time {
    background: #1e293b !important;
    border-color: #334155 !important;
}

html.dark .flatpickr-time input {
    color: #f8fafc !important;
    background: #0f172a !important;
}

/* 9. Sombras y Separadores */
html.dark .shadow-sm,
html.dark .shadow-md,
html.dark .shadow-lg,
html.dark .shadow-xl,
html.dark .shadow-2xl {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4) !important;
}

html.dark hr,
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
    border-color: #334155 !important;
}