@view-transition {
    navigation: auto;
}
:root:not([data-theme="dark"]) {
    /* --- 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-lightblack: #1e1e1e;
    --color-lightblack-rgb: 30, 30, 30;
    --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);
}

:root{

    --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;
    }
}