/* ==========================================================
   LÍNEA GRÁFICA NUEVA - KAPDORA (Modo Claro Profesional / Azul)
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* 1. Forzar Fondo General y Tipografía en HTML y Body */
html, body, .h-full {
    background-color: #f8fafc !important;
    color: #0f172a !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 19px !important;
}

/* 2. Barra Lateral (Sidebar) en Blanco Limpio */
aside, #sidebarMovil, .md\:flex.flex-col.w-64 {
    background-color: #ffffff !important;
    border-right: 1px solid #e2e8f0 !important;
    color: #334155 !important;
}

aside nav a, #sidebarMovil nav a {
    color: #475569 !important;
}

aside nav a:hover, #sidebarMovil nav a:hover {
    background-color: #f1f5f9 !important;
    color: #2563eb !important;
}

/* Botón activo del menú lateral -> Azul Moderno */
aside nav a.bg-blue-600, 
#sidebarMovil nav a.bg-blue-600 {
    background: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
}

/* 3. Topbar Superior -> Blanco Limpio */
header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
}

header span, header strong, header h1, header div {
    color: #0f172a !important;
}

/* 4. Tarjetas y Contenedores */
.bg-zinc-900, 
.bg-zinc-950, 
main div[class*="bg-zinc-9"] {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04) !important;
    border-radius: 1rem !important;
}

/* 5. Cajas internas secundarias */
.bg-zinc-800, 
.bg-zinc-800\/40, 
.bg-zinc-800\/50 {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}

/* 6. Formularios e Inputs limpios */
input, select, textarea {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

input:focus, select:focus, textarea:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
    outline: none !important;
}

/* Selección de texto */
::selection {
    background-color: #2563eb;
    color: #ffffff;
}

/* ==========================================================
   MODO OSCURO - KAPDORA ERP (Basado en el SuperAdmin Panel)
   ========================================================== */

html.dark, html.dark body, html.dark .h-full {
    background-color: #020617 !important;
    color: #f8fafc !important;
}

/* Topbar en Modo Oscuro */
html.dark header {
    background-color: #090d16 !important;
    border-bottom: 1px solid #1e293b !important;
    color: #f8fafc !important;
}

html.dark header span, 
html.dark header strong, 
html.dark header h1, 
html.dark header div {
    color: #f8fafc !important;
}

/* Sidebar en Modo Oscuro */
html.dark aside, 
html.dark #sidebarMovil, 
html.dark .md\:flex.flex-col.w-64 {
    background-color: #090d16 !important;
    border-right: 1px solid #1e293b !important;
    color: #94a3b8 !important;
}

html.dark aside nav a, 
html.dark #sidebarMovil nav a {
    color: #94a3b8 !important;
}

html.dark aside nav a:hover, 
html.dark #sidebarMovil nav a:hover {
    background-color: #1e293b !important;
    color: #60a5fa !important;
}

/* Main Container en Modo Oscuro */
html.dark main {
    background-color: #020617 !important;
}

/* Tarjetas, Contenedores y Cajas Principales */
html.dark .bg-white, 
html.dark .bg-slate-50, 
html.dark .bg-zinc-900, 
html.dark .bg-zinc-950, 
html.dark main div[class*="bg-zinc-9"] {
    background-color: #0a101f !important;
    border-color: #1e293b !important;
    color: #f8fafc !important;
}

/* Cajas internas secundarias */
html.dark .bg-slate-100, 
html.dark .bg-zinc-800, 
html.dark .bg-zinc-800\/40, 
html.dark .bg-zinc-800\/50 {
    background-color: #161f33 !important;
    border-color: #1e293b !important;
    color: #cbd5e1 !important;
}

/* Ajustes de texto para modo oscuro */
html.dark .text-slate-900, 
html.dark .text-slate-800, 
html.dark .text-slate-700 {
    color: #f1f5f9 !important;
}

html.dark .text-slate-500, 
html.dark .text-slate-600 {
    color: #94a3b8 !important;
}

/* Inputs, Selects y Textareas */
html.dark input, 
html.dark select, 
html.dark textarea {
    background-color: #090d16 !important;
    border-color: #1e293b !important;
    color: #f8fafc !important;
}

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

/* Menús Desplegables (Ajustes / Notificaciones) */
html.dark #dropdownAjustes, 
html.dark #panelNotificacionesGlobal {
    background-color: #0a101f !important;
    border-color: #1e293b !important;
}

html.dark #dropdownAjustes a {
    color: #cbd5e1 !important;
}

html.dark #dropdownAjustes a:hover {
    background-color: #161f33 !important;
    color: #60a5fa !important;
}

/* 7. Ajuste Dinámico para Versión Móvil (+2px en fuentes) */
@media (max-width: 640px) {
    html, body, .h-full {
        font-size: 21px !important;
    }
}