/* =====================================================================
   MODO OSCURO — Sistema de Control de Ingreso SENA
   Se activa agregando la clase `dark` al elemento <html>.
   Estrategia: sobrescribir en cascada las utilidades de Tailwind que
   ya usan las vistas, para no tener que tocar cada archivo PHP.
   ===================================================================== */

html.dark {
    color-scheme: dark;
    background-color: #0f0f14 !important;
}

/* ---------- Fondo general y contenedores principales ---------- */
.dark body {
    background-color: #0f0f14 !important;
    background-image: linear-gradient(to bottom right, #1b1330, #0f0f14, #0a2530) !important;
}

.dark .main-wrapper,
.dark .main-content,
.dark .main-footer,
.dark footer {
    background: transparent !important;
    background-color: transparent !important;
}

.dark .bg-gradient-to-br.from-primary-50 {
    background-image: linear-gradient(to bottom right, #1b1330, #0f0f14, #0a2530) !important;
}

/* ---------- Superficies / tarjetas ---------- */
.dark .bg-white { background-color: #1c1830 !important; }
.dark .bg-white\/85 { background-color: rgba(28, 24, 48, 0.9) !important; }
.dark .bg-white\/80 { background-color: rgba(17, 16, 28, 0.85) !important; }

.dark .stat-card,
.dark .module-card,
.dark .dashboard-modules,
.dark .auth-card,
.dark .card {
    background-color: #1c1830 !important;
    color: #f1eefa !important;
}

.dark .card-header {
    border-color: #2c2645 !important;
}

.dark .card-header h3 {
    color: #b79aeb !important;
}

.dark .alert-info {
    background-color: rgba(0, 188, 212, 0.12) !important;
    border-color: rgba(0, 188, 212, 0.35) !important;
    color: #79e2ef !important;
}

.dark .alert-success {
    background-color: rgba(16, 185, 129, 0.12) !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
    color: #6ee7b7 !important;
}

.dark .alert-error,
.dark .alert-danger {
    background-color: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
    color: #fca5a5 !important;
}

.dark .bg-gray-50 { background-color: #171426 !important; }
.dark .bg-gray-100 { background-color: #241f3a !important; }
.dark .bg-gray-200 { background-color: #322a4c !important; }
.dark .hover\:bg-gray-100:hover { background-color: #241f3a !important; }
.dark .hover\:bg-gray-200:hover { background-color: #322a4c !important; }

/* Encabezados de tarjeta con degradado claro -> oscuro */
.dark .from-white { --tw-gradient-from: #1c1830 var(--tw-gradient-from-position); --tw-gradient-to: rgb(28 24 48 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.dark .to-primary-50 { --tw-gradient-to: #241a42 var(--tw-gradient-to-position); }
.dark .from-primary-50 { --tw-gradient-from: #241a42 var(--tw-gradient-from-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }

/* ---------- Texto ---------- */
.dark .text-gray-800 { color: #f1eefa !important; }
.dark .text-gray-700 { color: #e3dff2 !important; }
.dark .text-gray-600 { color: #c9c3de !important; }
.dark .text-gray-500 { color: #a49dc0 !important; }
.dark .text-gray-400 { color: #8d84ab !important; }
.dark .text-gray-300 { color: #766e94 !important; }
.dark .text-gray-900 { color: #ffffff !important; }

/* ---------- Bordes y divisores ---------- */
.dark .border-gray-100 { border-color: #2c2645 !important; }
.dark .border-gray-200 { border-color: #362e54 !important; }
.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: #2c2645 !important; }
.dark .border-primary-100 { border-color: rgba(107, 70, 193, 0.35) !important; }
.dark .border-primary-200 { border-color: rgba(107, 70, 193, 0.45) !important; }

/* ---------- Tonos morados suaves (headers de tabla, hover, chips) ---------- */
.dark .bg-primary-50 { background-color: rgba(107, 70, 193, 0.16) !important; }
.dark .bg-primary-50\/50 { background-color: rgba(107, 70, 193, 0.12) !important; }
.dark .hover\:bg-primary-50\/50:hover { background-color: rgba(107, 70, 193, 0.18) !important; }
.dark .bg-primary-100 { background-color: rgba(107, 70, 193, 0.22) !important; color: #c9b6f0 !important; }
.dark .text-primary-800 { color: #d5c4f2 !important; }
.dark .text-primary-700 { color: #b79aeb !important; }
.dark .text-primary-600 { color: #a688e0 !important; }
.dark .bg-accent-100 { background-color: rgba(0, 188, 212, 0.18) !important; color: #79e2ef !important; }
.dark .text-accent-700 { color: #5fd6e6 !important; }
.dark .text-accent-900 { color: #bdf1f7 !important; }
.dark .bg-accent-50 { background-color: rgba(0, 188, 212, 0.12) !important; }

/* ---------- Campos de formulario (usan siempre border-gray-200) ---------- */
.dark input,
.dark select,
.dark textarea {
    background-color: #171426 !important;
    color: #f1eefa !important;
}
.dark input::placeholder,
.dark textarea::placeholder { color: #766e94 !important; }
.dark input:focus,
.dark select:focus,
.dark textarea:focus {
    background-color: #1c1830 !important;
}

/* ---------- Chips / badges semánticos (mantienen color, se atenúan) ---------- */
.dark .bg-green-50 { background-color: rgba(16, 185, 129, 0.12) !important; }
.dark .bg-green-100 { background-color: rgba(16, 185, 129, 0.18) !important; }
.dark .text-green-700, .dark .text-green-800 { color: #6ee7b7 !important; }
.dark .border-green-200 { border-color: rgba(16, 185, 129, 0.35) !important; }

.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.12) !important; }
.dark .bg-red-100 { background-color: rgba(239, 68, 68, 0.18) !important; }
.dark .text-red-700, .dark .text-red-800 { color: #fca5a5 !important; }
.dark .text-red-500, .dark .text-red-600 { color: #f87171 !important; }
.dark .border-red-200 { border-color: rgba(239, 68, 68, 0.35) !important; }

.dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.12) !important; }
.dark .bg-blue-100 { background-color: rgba(59, 130, 246, 0.18) !important; }
.dark .text-blue-700, .dark .text-blue-800 { color: #93c5fd !important; }
.dark .border-blue-200 { border-color: rgba(59, 130, 246, 0.35) !important; }

.dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.12) !important; }
.dark .bg-amber-100 { background-color: rgba(245, 158, 11, 0.18) !important; }
.dark .text-amber-700, .dark .text-amber-800 { color: #fcd34d !important; }

.dark .bg-rose-100 { background-color: rgba(244, 63, 94, 0.18) !important; }
.dark .text-rose-700 { color: #fda4af !important; }

.dark .bg-purple-100 { background-color: rgba(168, 85, 247, 0.18) !important; }
.dark .text-purple-700 { color: #d8b4fe !important; }

/* ---------- Header superior y sidebar ---------- */
.dark header.sticky {
    background-color: rgba(28, 22, 46, 0.92) !important;
    border-color: #2c2645 !important;
}
.dark aside#sidebar {
    background-image: linear-gradient(to bottom, #2c2251 0%, #241b47 45%, #16283e 100%) !important;
    box-shadow: 0 0 40px rgba(0,0,0,0.5);
}
.dark aside#sidebar .text-primary-100 { color: #cdbdf0 !important; }
.dark aside#sidebar .text-primary-200 { color: #b8a4e8 !important; }
.dark aside#sidebar .hover\:bg-white\/20:hover { background-color: rgba(255,255,255,0.08) !important; }
.dark aside#sidebar .bg-white\/10 { background-color: rgba(255,255,255,0.06) !important; }
.dark aside#sidebar .bg-white\/20 { background-color: rgba(255,255,255,0.08) !important; }
.dark aside#sidebar .hover\:bg-white\/25:hover { background-color: rgba(255,255,255,0.1) !important; }
.dark aside#sidebar .border-white\/20 { border-color: rgba(255,255,255,0.1) !important; }

/* Chip extra usado en algún ícono de estadística */
.dark .bg-primary-200 { background-color: rgba(107, 70, 193, 0.3) !important; }
.dark .text-primary-100 { color: #ede7f8 !important; }
.dark .text-primary-200 { color: #d9cef1 !important; }

/* ---------- Modales (Control de Llaves) ---------- */
.dark #modalTomarLlave .bg-white,
.dark #modalDevolverLlave .bg-white {
    background-color: #1c1830 !important;
}

/* ---------- Sombras más discretas sobre fondo oscuro ---------- */
.dark .shadow-sm, .dark .shadow-md, .dark .shadow-lg, .dark .shadow-xl, .dark .shadow-2xl,
.dark .hover\:shadow-sm:hover, .dark .hover\:shadow-md:hover,
.dark .hover\:shadow-lg:hover, .dark .hover\:shadow-xl:hover, .dark .hover\:shadow-2xl:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

/* ---------- Tarjetas de estadísticas / módulos con opacidad de fondo ---------- */
.dark .bg-white\/95 { background-color: rgba(28, 24, 48, 0.95) !important; }
.dark .bg-white\/90 { background-color: rgba(28, 24, 48, 0.9) !important; }

/* ---------- Selects nativos: la flecha y el fondo de opciones los pinta el navegador ---------- */
.dark select option { background-color: #1c1830; color: #f1eefa; }

/* ---------- Estado deshabilitado ---------- */
.dark button:disabled,
.dark .cursor-not-allowed {
    opacity: 0.5;
}

/* ---------- Scrollbar ---------- */
.dark ::-webkit-scrollbar { width: 10px; height: 10px; }
.dark ::-webkit-scrollbar-track { background: #171426; }
.dark ::-webkit-scrollbar-thumb { background: #4a3189; border-radius: 10px; }
.dark ::-webkit-scrollbar-thumb:hover { background: #5a3ba8; }

/* ---------- Botón de cambio de tema ---------- */
.theme-toggle {
    position: relative;
    width: 3rem;
    height: 1.7rem;
    border-radius: 9999px;
    background: rgba(255,255,255,0.25);
    border: 1px solid rgba(255,255,255,0.35);
    cursor: pointer;
    transition: background .25s ease;
    flex-shrink: 0;
}
.theme-toggle .knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 9999px;
    background: #fff;
    color: #6B46C1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    transition: transform .25s ease;
}
html.dark .theme-toggle .knob { transform: translateX(1.3rem); }

.theme-toggle-light {
    background: #ede7f8;
    border: 1px solid #d9cef1;
}
.theme-toggle-light .knob { background: #6B46C1; color: #fff; }
html.dark .theme-toggle-light { background: rgba(107,70,193,0.35); border-color: rgba(107,70,193,0.5); }
html.dark .theme-toggle-light .knob { background: #ede7f8; color: #6B46C1; }

/* =====================================================================
   MODO OSCURO — Vista Kiosk / Consulta de Permisos de Salida
   ===================================================================== */

/* Fondo oscuro del kiosk + activar decoradores radiales */
.dark .kiosk-mode {
    background: linear-gradient(135deg, #1a0a3e 0%, #0f0520 40%, #050f20 100%) !important;
}
.dark .kiosk-mode::before,
.dark .kiosk-mode::after {
    opacity: 1 !important;
}

/* Cabecera glassmorphism */
.dark .content-header-kiosk {
    background: rgba(255,255,255,0.05) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    box-shadow: none !important;
}

.dark .kiosk-title { color: #e0d6ff !important; }
.dark .kiosk-title i { color: #00BCD4 !important; }
.dark .kiosk-time { color: #79e2ef !important; }

/* Paneles glassmorphism */
.dark .search-panel,
.dark .result-panel {
    background: rgba(255,255,255,0.06) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    box-shadow: 0 24px 48px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

.dark .search-panel h2 { color: #e0d6ff !important; }
.dark .search-panel p  { color: rgba(200,190,230,0.8) !important; }
.dark .search-panel p a { color: #79e2ef !important; }

/* Input de código de barras */
.dark .barcode-input {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(107,70,193,0.55) !important;
    color: #f1eefa !important;
}
.dark .barcode-input::placeholder { color: rgba(180,165,215,0.55) !important; }
.dark .barcode-input:focus {
    background: rgba(107,70,193,0.1) !important;
    border-color: #8257c9 !important;
    box-shadow: 0 0 0 4px rgba(107,70,193,0.2), 0 0 20px rgba(107,70,193,0.12) !important;
}

/* Instrucciones */
.dark .search-instructions {
    background: rgba(0,188,212,0.08) !important;
    border-color: rgba(0,188,212,0.2) !important;
    color: rgba(121,226,239,0.85) !important;
}

/* Botón secundario en dark */
.dark .kiosk-mode .btn-secondary {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    color: #e0d6ff !important;
}
.dark .kiosk-mode .btn-secondary:hover {
    background: rgba(255,255,255,0.15) !important;
    border-color: rgba(255,255,255,0.35) !important;
}

/* Detalles del permiso */
.dark .permission-details {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.08) !important;
}
.dark .detail-row { border-bottom-color: rgba(255,255,255,0.07) !important; }
.dark .detail-label { color: #b79aeb !important; }
.dark .detail-value { color: #e8e2f8 !important; }