/* =============================================================
   Nómina Inteligente — Variables CSS Globales
   Derivadas de la identidad visual del logo:
   Primario:   #0033A0 (Azul marino)
   Secundario: #00B3E3 (Azul cyan)
   Base:       #FFFFFF (Blanco)
   ============================================================= */

:root {
    /* --- Primario: Azul Marino #0033A0 --- */
    --color-primary: #0033A0;
    --color-primary-hover: #002878;
    --color-primary-active: #001F5C;
    --color-primary-light: #E6EBF5;
    --color-primary-lighter: #F0F4FA;
    --color-primary-dark: #00245A;
    --color-primary-rgb: 0, 51, 160;

    /* --- Secundario: Azul Cyan #00B3E3 --- */
    --color-secondary: #00B3E3;
    --color-secondary-hover: #0099C4;
    --color-secondary-active: #0080A4;
    --color-secondary-light: #E6F7FC;
    --color-secondary-lighter: #F0FAFD;
    --color-secondary-dark: #007A9E;
    --color-secondary-rgb: 0, 179, 227;

    /* --- Gradientes de Marca --- */
    --gradient-brand: linear-gradient(135deg, #0033A0 0%, #00B3E3 100%);
    --gradient-brand-hover: linear-gradient(135deg, #002878 0%, #0099C4 100%);
    --gradient-brand-subtle: linear-gradient(135deg, rgba(0,51,160,0.08) 0%, rgba(0,179,227,0.08) 100%);
    --gradient-sidebar: linear-gradient(180deg, #001A3A 0%, #0033A0 100%);

    /* --- Sidebar --- */
    --color-bg-sidebar: #001A3A;
    --color-bg-sidebar-hover: #002050;
    --color-bg-sidebar-active: #0033A0;
    --color-text-sidebar: #A3B8D8;
    --color-text-sidebar-active: #FFFFFF;
    --color-text-sidebar-muted: #5A7AA0;
    --color-border-sidebar: rgba(255, 255, 255, 0.08);

    /* --- Fondos --- */
    --color-bg-main: #F5F7FA;
    --color-bg-card: #FFFFFF;
    --color-bg-input: #FFFFFF;
    --color-bg-input-disabled: #F1F3F7;
    --color-bg-hover: #F0F4FA;
    --color-bg-selected: #E6EBF5;
    --color-bg-page-header: #FFFFFF;
    --color-bg-overlay: rgba(0, 26, 58, 0.5);

    /* --- Textos --- */
    --color-text-primary: #1A2332;
    --color-text-secondary: #4A5B6E;
    --color-text-muted: #8494A7;
    --color-text-disabled: #B0BAC5;
    --color-text-on-primary: #FFFFFF;
    --color-text-on-secondary: #FFFFFF;
    --color-text-link: #0033A0;
    --color-text-link-hover: #00B3E3;

    /* --- Bordes --- */
    --color-border: #D8DFE8;
    --color-border-light: #E8EDF2;
    --color-border-focus: #0033A0;
    --color-border-error: #DC3545;

    /* --- Estados Semánticos --- */
    --color-success: #0D9668;
    --color-success-light: #E8F5EF;
    --color-success-dark: #065F42;

    --color-warning: #E68A00;
    --color-warning-light: #FFF5E0;
    --color-warning-dark: #995C00;

    --color-error: #DC3545;
    --color-error-light: #FDECEE;
    --color-error-dark: #9A1D2A;

    --color-info: #00B3E3;
    --color-info-light: #E6F7FC;
    --color-info-dark: #007A9E;

    /* === TIPOGRAFÍA === */
    --font-display: 'Plus Jakarta Sans', sans-serif;
    --font-body: 'DM Sans', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* === ESPACIADO === */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;

    /* === BORDES Y SOMBRAS === */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.06);

    /* === TRANSICIONES === */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;

    /* === LAYOUT === */
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 72px;
    --header-height: 64px;
    --content-max-width: 1400px;

    /* === Z-INDEX === */
    --z-sidebar: 100;
    --z-header: 200;
    --z-modal-backdrop: 300;
    --z-modal: 400;
    --z-toast: 500;
    --z-tooltip: 600;
}

/* =============================================================
   DARK MODE — Se activa con data-theme="dark" en <html>
   ============================================================= */

[data-theme="dark"] {
    /* --- Primario: mantener azul pero ajustar --- */
    --color-primary: #4D8FE8;
    --color-primary-hover: #6BA3F0;
    --color-primary-active: #3A7AD4;
    --color-primary-light: #1A2744;
    --color-primary-lighter: #141E36;
    --color-primary-dark: #8AB8F5;
    --color-primary-rgb: 77, 143, 232;

    /* --- Secundario --- */
    --color-secondary: #33C9F0;
    --color-secondary-hover: #5DD6F5;
    --color-secondary-active: #1ABCE5;
    --color-secondary-light: #132A33;
    --color-secondary-lighter: #0F2028;
    --color-secondary-dark: #7ADDF7;
    --color-secondary-rgb: 51, 201, 240;

    /* --- Gradientes --- */
    --gradient-brand: linear-gradient(135deg, #4D8FE8 0%, #33C9F0 100%);
    --gradient-brand-hover: linear-gradient(135deg, #3A7AD4 0%, #1ABCE5 100%);
    --gradient-brand-subtle: linear-gradient(135deg, rgba(77,143,232,0.1) 0%, rgba(51,201,240,0.1) 100%);
    --gradient-sidebar: linear-gradient(180deg, #0A0F1A 0%, #111827 100%);

    /* --- Sidebar --- */
    --color-bg-sidebar: #0A0F1A;
    --color-bg-sidebar-hover: #151C2C;
    --color-bg-sidebar-active: #1E2A42;
    --color-text-sidebar: #8899AA;
    --color-text-sidebar-active: #FFFFFF;
    --color-text-sidebar-muted: #4A5568;
    --color-border-sidebar: rgba(255, 255, 255, 0.06);

    /* --- Fondos --- */
    --color-bg-main: #0F1117;
    --color-bg-card: #1A1D27;
    --color-bg-input: #1E2130;
    --color-bg-input-disabled: #14161E;
    --color-bg-hover: #242838;
    --color-bg-selected: #1E2A42;
    --color-bg-page-header: #1A1D27;
    --color-bg-overlay: rgba(0, 0, 0, 0.6);

    /* --- Textos --- */
    --color-text-primary: #E4E7EC;
    --color-text-secondary: #9CA3AF;
    --color-text-muted: #6B7280;
    --color-text-disabled: #4B5563;
    --color-text-on-primary: #FFFFFF;
    --color-text-on-secondary: #FFFFFF;
    --color-text-link: #4D8FE8;
    --color-text-link-hover: #33C9F0;

    /* --- Bordes --- */
    --color-border: #2D3343;
    --color-border-light: #232836;
    --color-border-focus: #4D8FE8;
    --color-border-error: #EF4444;

    /* --- Estados Semánticos --- */
    --color-success: #34D399;
    --color-success-light: #0D2818;
    --color-success-dark: #6EE7B7;

    --color-warning: #FBBF24;
    --color-warning-light: #2A2008;
    --color-warning-dark: #FCD34D;

    --color-error: #EF4444;
    --color-error-light: #2A0F0F;
    --color-error-dark: #FCA5A5;

    --color-info: #33C9F0;
    --color-info-light: #0F2028;
    --color-info-dark: #7ADDF7;

    /* --- Sombras (más sutiles en dark) --- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.35), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
}