:root {
    /* --- MISC --- */
    --color-transparent:   #FFFFFF00;
    --color-white:         #FFFFFF;
    --color-white-rgb:     255, 255, 255;
    --color-darkwhite:     #EEEEEE;
    --color-darkwhite-rgb: 238, 238, 238;
    --color-lightgrey:     #D3D3D3;
    --color-lightgrey-rgb: 211, 211, 211;
    --color-grey:          #808080;
    --color-grey-rgb:      128, 128, 128;
    --color-darkgrey:      #333333;
    --color-darkgrey-rgb:  51, 51, 51;
    --color-black:         #000000;
    --color-black-rgb:     0, 0, 0;
    --color-lightblue:     #F5F6F9;
    --color-lightblue-rgb: 245, 246, 249;

    /* --- MAIN --- */
    --color-main:               #303795;
    --color-main-rgb:           48, 55, 149;
    --color-lightmain:          #E0E2F5;
    --color-lightmain-rgb:      224, 226, 245;
    --color-darkmain:           #181B4A;
    --color-darkmain-rgb:       24, 27, 74;

    /* --- SECONDARY (Azul claro) --- */
    --color-secondary:          #34A4EB;
    --color-secondary-rgb:      52, 164, 235;
    --color-lightsecondary:     #DDF0FC;
    --color-lightsecondary-rgb: 221, 240, 252;
    --color-darksecondary:      #175B85;
    --color-darksecondary-rgb:  23, 91, 133;

    /* --- INFO (Morado) --- */
    --color-info:               #9900aa;
    --color-info-rgb:           153, 0, 170;
    --color-lightinfo:          #F3D7F6;
    --color-lightinfo-rgb:      243, 215, 246;
    --color-darkinfo:           #4D0055;
    --color-darkinfo-rgb:       77, 0, 85;

    /* --- DANGER (Rojo) --- */
    --color-danger:             #DC3545;
    --color-danger-rgb:         220, 53, 69;
    --color-lightdanger:        #FFD6D6;
    --color-lightdanger-rgb:    255, 214, 214;
    --color-darkdanger:         #800000;
    --color-darkdanger-rgb:     128, 0, 0;

    /* --- SUCCESS (Verde) --- */
    --color-success:            #28A745;
    --color-success-rgb:        40, 167, 69;
    --color-lightsuccess:       #D8F2DF;
    --color-lightsuccess-rgb:   216, 242, 223;
    --color-darksuccess:        #124D1E;
    --color-darksuccess-rgb:    18, 77, 30;

    /* --- WARNING (Naranja) --- */
    --color-warning:            #FF9933;
    --color-warning-rgb:        255, 153, 51;
    --color-lightwarning:       #FFEBD6;
    --color-lightwarning-rgb:   255, 235, 214;
    --color-darkwarning:        #8C4D0D;
    --color-darkwarning-rgb:    140, 77, 13;

    /* --- BROWN (Marrón) --- */
    --color-brown:              #4B2C20;
    --color-brown-rgb:          75, 44, 32;
    --color-lightbrown:         #D5C4BD;
    --color-lightbrown-rgb:     213, 196, 189;
    --color-darkbrown:          #251610;
    --color-darkbrown-rgb:      37, 22, 16;

    /* --- YELLOW (Amarillo) --- */
    --color-yellow:             #FFE300;
    --color-yellow-rgb:         255, 227, 00;
    --color-lightyellow:        #FFFF64;
    --color-lightyellow-rgb:    255, 255, 100;
    --color-darkyellow:         #646400;
    --color-darkyellow-rgb:     100, 100, 00;

    --gradient-linear-0-main:     0deg, rgba(var(--color-main-rgb), 1) 0, rgba(var(--color-main-rgb), .7);
    --gradient-linear-90-main:   90deg, rgba(var(--color-main-rgb), 1) 0, rgba(var(--color-main-rgb), .7);
    --gradient-linear-135-main: 135deg, rgba(var(--color-main-rgb), 1) 0, rgba(var(--color-main-rgb), .7);
    --gradient-linear-180-main: 180deg, rgba(var(--color-main-rgb), 1) 0, rgba(var(--color-main-rgb), .7);
    --gradient-linear-225-main: 225deg, rgba(var(--color-main-rgb), 1) 0, rgba(var(--color-main-rgb), .7);
    --gradient-linear-270-main: 270deg, rgba(var(--color-main-rgb), 1) 0, rgba(var(--color-main-rgb), .7);
    --gradient-linear-315-main: 315deg, rgba(var(--color-main-rgb), 1) 0, rgba(var(--color-main-rgb), .7);

    --gradient-linear-225-secondary: 225deg, rgba(var(--color-secondary-rgb), 1) 0, rgba(var(--color-secondary-rgb), .7);

    /* --- MISC --- */
    --gradient-linear-45-white:         45deg, rgba(var(--color-white-rgb), 1) 0, rgba(var(--color-white-rgb), .7);
    --gradient-linear-45-darkwhite:     45deg, rgba(var(--color-darkwhite-rgb), 1) 0, rgba(var(--color-darkwhite-rgb), .7);
    --gradient-linear-45-lightgrey:     45deg, rgba(var(--color-lightgrey-rgb), 1) 0, rgba(var(--color-lightgrey-rgb), .7);
    --gradient-linear-45-grey:          45deg, rgba(var(--color-grey-rgb), 1) 0, rgba(var(--color-grey-rgb), .7);
    --gradient-linear-45-darkgrey:      45deg, rgba(var(--color-darkgrey-rgb), 1) 0, rgba(var(--color-darkgrey-rgb), .7);
    --gradient-linear-45-black:         45deg, rgba(var(--color-black-rgb), 1) 0, rgba(var(--color-black-rgb), .7);
    --gradient-linear-45-lightblue:     45deg, rgba(var(--color-lightblue-rgb), 1) 0, rgba(var(--color-lightblue-rgb), .7);

    /* --- MAIN --- */
    --gradient-linear-45-main:          45deg, rgba(var(--color-main-rgb), 1) 0, rgba(var(--color-main-rgb), .7);
    --gradient-linear-45-lightmain:     45deg, rgba(var(--color-lightmain-rgb), 1) 0, rgba(var(--color-lightmain-rgb), .7);
    --gradient-linear-45-darkmain:      45deg, rgba(var(--color-darkmain-rgb), 1) 0, rgba(var(--color-darkmain-rgb), .7);

    /* --- SECONDARY (Azul claro) --- */
    --gradient-linear-45-secondary:      45deg, rgba(var(--color-secondary-rgb), 1) 0, rgba(var(--color-secondary-rgb), .7);
    --gradient-linear-45-lightsecondary: 45deg, rgba(var(--color-lightsecondary-rgb), 1) 0, rgba(var(--color-lightsecondary-rgb), .7);
    --gradient-linear-45-darksecondary:  45deg, rgba(var(--color-darksecondary-rgb), 1) 0, rgba(var(--color-darksecondary-rgb), .7);

    /* --- INFO (Morado) --- */
    --gradient-linear-45-info:          45deg, rgba(var(--color-info-rgb), 1) 0, rgba(var(--color-info-rgb), .7);
    --gradient-linear-45-lightinfo:     45deg, rgba(var(--color-lightinfo-rgb), 1) 0, rgba(var(--color-lightinfo-rgb), .7);
    --gradient-linear-45-darkinfo:      45deg, rgba(var(--color-darkinfo-rgb), 1) 0, rgba(var(--color-darkinfo-rgb), .7);

    /* --- DANGER (Rojo) --- */
    --gradient-linear-45-danger:        45deg, rgba(var(--color-danger-rgb), 1) 0, rgba(var(--color-danger-rgb), .7);
    --gradient-linear-45-lightdanger:   45deg, rgba(var(--color-lightdanger-rgb), 1) 0, rgba(var(--color-lightdanger-rgb), .7);
    --gradient-linear-45-darkdanger:    45deg, rgba(var(--color-darkdanger-rgb), 1) 0, rgba(var(--color-darkdanger-rgb), .7);

    /* --- SUCCESS (Verde) --- */
    --gradient-linear-45-success:       45deg, rgba(var(--color-success-rgb), 1) 0, rgba(var(--color-success-rgb), .7);
    --gradient-linear-45-lightsuccess:  45deg, rgba(var(--color-lightsuccess-rgb), 1) 0, rgba(var(--color-lightsuccess-rgb), .7);
    --gradient-linear-45-darksuccess:   45deg, rgba(var(--color-darksuccess-rgb), 1) 0, rgba(var(--color-darksuccess-rgb), .7);

    /* --- WARNING (Naranja) --- */
    --gradient-linear-45-warning:       45deg, rgba(var(--color-warning-rgb), 1) 0, rgba(var(--color-warning-rgb), .7);
    --gradient-linear-45-lightwarning:  45deg, rgba(var(--color-lightwarning-rgb), 1) 0, rgba(var(--color-lightwarning-rgb), .7);
    --gradient-linear-45-darkwarning:   45deg, rgba(var(--color-darkwarning-rgb), 1) 0, rgba(var(--color-darkwarning-rgb), .7);

    /* --- BROWN (Marrón) --- */
    --gradient-linear-45-brown:         45deg, rgba(var(--color-brown-rgb), 1) 0, rgba(var(--color-brown-rgb), .7);
    --gradient-linear-45-lightbrown:    45deg, rgba(var(--color-lightbrown-rgb), 1) 0, rgba(var(--color-lightbrown-rgb), .7);
    --gradient-linear-45-darkbrown:     45deg, rgba(var(--color-darkbrown-rgb), 1) 0, rgba(var(--color-darkbrown-rgb), .7);

    --gradient-linear-45-succes:      45deg, rgba(var(--color-success-rgb),   1) 0, rgba(var(--color-success-rgb),   .7);

    --offset-w:    0px;
    --offset-h:    0px;

    --h-header:    55px;
    --h-subheader: calc(84px + var(--variable-2));
    --h-footer:    16px;
    --h-body:      calc(100vh - var(--h-header) - var(--h-footer));

    --w-aside:     275px;
    --w-button:    100px;
    --w-date:      150px;

    --variable-1: 0.5rem;
    --variable-2: 1.0rem;
    --variable-3: 1.5rem;
    --variable-4: 2.0rem;
    --variable-5: 2.5rem;

    --variable-xs:  2px;
    --variable-sm:  5px;
    --variable-md: 10px;
    --variable-lg: 20px;
    --variable-xl: 50%;

    --font-xs:  smaller;
    --font-sm:  small;
    --font-md:  medium;
    --font-lg:  large;
    --font-xl:  larger;
    --font-xxl: 3rem;

    --z-modal: 1050;

    --s-icon: 34px;

    /*Altura por defecto de los dataviews (con flex col y label)*/
    --h-dv: 59px;

    @media (min-width: 767px) {
        --w-modal: 600px;
    }
    @media (max-width: 767px) {
        --w-modal: 300px;
    }
}