:root {
    --color-azul-institucional: #0c1433;
    --color-amarillo-institucional: #f3bf19;
    --color-azul-hover: #162456;
    --color-gris-fondo: #f4f6f9;
    --fuente-principal: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --color-verde-institucional: #E97238;
    --color-naranja-institucional: #F26D3D;





    /* ========================================
       COLORES INSTITUCIONALES
       ======================================== */

    --color-institucional-verde: #7C8B6C;
    --color-institucional-naranja: #E97238;
    --color-institucional-dorado: #C09E5E;
    --color-institucional-amarillo: #F5BC17;

    /* ========================================
       PRIMARY
       Verde institucional
       ======================================== */

    --color-primary: #7C8B6C;
    --color-primary-dark: #657255;
    --color-primary-light: #9AA58E;
    --color-primary-soft: #EEF1EB;


    /* ========================================
       SECONDARY
       Naranja institucional
       ======================================== */

    --color-secondary: #E97238;
    --color-secondary-dark: #C95C28;
    --color-secondary-light: #F18F61;
    --color-secondary-soft: #FDF0E9;


    /* ========================================
       ACCENT
       Dorado institucional
       ======================================== */

    --color-accent: #C09E5E;
    --color-accent-dark: #9E7D42;
    --color-accent-light: #D4BB8A;
    --color-accent-soft: #F5F0E6;


    /* ========================================
       WARNING
       Amarillo institucional
       ======================================== */

    --color-warning: #F5BC17;
    --color-warning-dark: #C99808;
    --color-warning-light: #F8CF55;
    --color-warning-soft: #FFF7DD;


    /* ========================================
       SUCCESS
       Verde funcional
       ======================================== */

    --color-success: #4F8A5B;
    --color-success-dark: #3B6B45;
    --color-success-light: #78AB82;
    --color-success-soft: #EAF4EC;


    /* ========================================
       DANGER
       Rojo
       ======================================== */

    --color-danger: #C94A4A;
    --color-danger-dark: #A63838;
    --color-danger-light: #DC7777;
    --color-danger-soft: #FBECEC;


    /* ========================================
       INFO
       Azul
       ======================================== */

    --color-info: #4F7FA8;
    --color-info-dark: #3B6385;
    --color-info-light: #78A1C2;
    --color-info-soft: #EDF4F9;


    /* ========================================
       NEUTROS
       ======================================== */

    --color-white: #FFFFFF;

    --color-gray-50: #F8F9F7;
    --color-gray-100: #F1F3F0;
    --color-gray-200: #E2E5E0;
    --color-gray-300: #D0D4CD;
    --color-gray-400: #AEB4AA;
    --color-gray-500: #858C82;
    --color-gray-600: #687067;
    --color-gray-700: #4F564E;
    --color-gray-800: #343934;
    --color-gray-900: #202420;

    --color-black: #000000;


    /* ========================================
       FONDO DE LA APLICACIÓN
       ======================================== */

    --color-body: #F5F6F4;
    --color-surface: #FFFFFF;
    --color-surface-secondary: #F8F9F7;


    /* ========================================
       TEXTO
       ======================================== */

    --color-text: #343934;
    --color-text-secondary: #687067;
    --color-text-muted: #858C82;
    --color-text-disabled: #AEB4AA;


    /* ========================================
       BORDES
       ======================================== */

    --color-border: #E2E5E0;
    --color-border-light: #EEF0EC;
    --color-border-dark: #D0D4CD;


    /* ========================================
       SIDEBAR
       ======================================== */

    --color-sidebar: #30372D;
    --color-sidebar-hover: #414A3C;
    --color-sidebar-active: #7C8B6C;
    --color-sidebar-text: #E9EDE7;
    --color-sidebar-muted: #AEB6A8;


    /* ========================================
       HEADER
       ======================================== */

    --color-header: #FFFFFF;
    --color-header-border: #E2E5E0;


    /* ========================================
       ESTADOS
       ======================================== */

    --color-hover: #EEF1EB;
    --color-selected: #E4E9DF;
    --color-focus: #7C8B6C;
    --color-disabled: #E2E5E0;


    /* ========================================
       SOMBRAS
       ======================================== */

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);

    :root {

        /* PRIMARY */
        --primary-50: #F4F6F2;
        --primary-100: #E7EBE3;
        --primary-200: #CFD7C8;
        --primary-300: #B5C0AA;
        --primary-400: #9AA58E;
        --primary-500: #7C8B6C;
        --primary-600: #657255;
        --primary-700: #505C44;
        --primary-800: #3D4634;
        --primary-900: #2B3225;

        /* SECONDARY */
        --secondary-50: #FEF5F0;
        --secondary-100: #FDE9DF;
        --secondary-200: #F9D1BE;
        --secondary-300: #F4B18F;
        --secondary-400: #EF9064;
        --secondary-500: #E97238;
        --secondary-600: #C95C28;
        --secondary-700: #A94921;
        --secondary-800: #833A20;
        --secondary-900: #5E2C1B;

        /* ACCENT */
        --accent-50: #FAF8F2;
        --accent-100: #F5F0E5;
        --accent-200: #E9DDC5;
        --accent-300: #DCC89F;
        --accent-400: #D0B67D;
        --accent-500: #C09E5E;
        --accent-600: #A78349;
        --accent-700: #856838;
        --accent-800: #654F2E;
        --accent-900: #473923;

        /* WARNING */
        --warning-50: #FFFBEA;
        --warning-100: #FFF5C8;
        --warning-200: #FFE994;
        --warning-300: #FDD85C;
        --warning-400: #F8C83A;
        --warning-500: #F5BC17;
        --warning-600: #D39C0D;
        --warning-700: #A97B0B;
        --warning-800: #805F0C;
        --warning-900: #59450D;
    }

}