@charset "UTF-8";
/*
 * EDIA UI v1.0.0
 * Copyright 2024 EDIA Applications Author
*/

:root, [data-ui-theme=light] {
    color-scheme: light;

    /*=== Pizarra ===*/
    --ui-slate-50: #f8fafc;
    --ui-slate-100: #f1f5f9;
    --ui-slate-200: #e2e8f0;
    --ui-slate-300: #cbd5e1;
    --ui-slate-400: #94a3b8;
    --ui-slate-500: #64748b;
    --ui-slate-600: #475569;
    --ui-slate-700: #334155;
    --ui-slate-800: #1e293b;
    --ui-slate-900: #0f172a;
    --ui-slate-950: #020617;
    /*=== Turquesa ===*/
    --ui-turquesa-50: #eefffd;
    --ui-turquesa-100: #c6fffb;
    --ui-turquesa-200: #8efff8;
    --ui-turquesa-300: #49f1ec;
    --ui-turquesa-400: #15dfdf;
    --ui-turquesa-500: #04c4c7;
    --ui-turquesa-600: #009ea4;
    --ui-turquesa-700: #027e83;
    --ui-turquesa-800: #086267;
    --ui-turquesa-900: #0c5155;
    --ui-turquesa-950: #002f34;
    /*=== Teal ===*/
    --ui-teal-50: #F0FDFA;
    --ui-teal-100: #CCFBF1;
    --ui-teal-200: #99F6E4;
    --ui-teal-300: #5EEAD4;
    --ui-teal-400: #2DD4BF;
    --ui-teal-500: #14B8A6;
    --ui-teal-600: #0D9488;
    --ui-teal-700: #0F766E;
    --ui-teal-800: #115E59;
    --ui-teal-900: #134E4A;
    --ui-teal-950: #042F2E;
    /*=== Gris ===*/
    --ui-gris-50: #f6f6f6;
    --ui-gris-100: #e7e7e7;
    --ui-gris-200: #d1d1d1;
    --ui-gris-300: #b0b0b0;
    --ui-gris-400: #888888;
    --ui-gris-500: #6d6d6d;
    --ui-gris-600: #5d5d5d;
    --ui-gris-700: #4f4f4f;
    --ui-gris-800: #454545;
    --ui-gris-900: #3d3d3d;
    --ui-gris-950: #181818;
    /*=== Rojo ===*/
    --ui-rojo-50: #FEF2F2;
    --ui-rojo-100: #FEE2E2;
    --ui-rojo-200: #FECACA;
    --ui-rojo-300: #FCA5A5;
    --ui-rojo-400: #F87171;
    --ui-rojo-500: #EF4444;
    --ui-rojo-600: #DC2626;
    --ui-rojo-700: #B91C1C;
    --ui-rojo-800: #991B1B;
    --ui-rojo-900: #7F1D1D;
    --ui-rojo-950: #450A0A;
    /*=== Amarillo ===*/
    --ui-amarillo-50: #FEFCE8;
    --ui-amarillo-100: #FEF9C3;
    --ui-amarillo-200: #FEF08A;
    --ui-amarillo-300: #FDE047;
    --ui-amarillo-400: #FACC15;
    --ui-amarillo-500: #EAB308;
    --ui-amarillo-600: #CA8A04;
    --ui-amarillo-700: #A16207;
    --ui-amarillo-800: #854D0E;
    --ui-amarillo-900: #713F12;
    --ui-amarillo-950: #422006;
    /*=== Verde ===*/
    --ui-verde-50: #F0FDF4;
    --ui-verde-100: #DCFCE7;
    --ui-verde-200: #BBF7D0;
    --ui-verde-300: #86EFAC;
    --ui-verde-400: #4ADE80;
    --ui-verde-500: #22C55E;
    --ui-verde-600: #16A34A;
    --ui-verde-700: #15803D;
    --ui-verde-800: #166534;
    --ui-verde-900: #14532D;
    --ui-verde-950: #052E16;
    /*=== Azul ===*/
    --ui-azul-50: #EFF4FF;
    --ui-azul-100: #DBE6FE;
    --ui-azul-200: #BFDBFE;
    --ui-azul-300: #93C5FD;
    --ui-azul-400: #60A5FA;
    --ui-azul-500: #3B82F6;
    --ui-azul-600: #2563EB;
    --ui-azul-700: #1D4ED8;
    --ui-azul-800: #1E40AF;
    --ui-azul-900: #1E3A8A;
    --ui-azul-950: #172554;

    /*=== Tema ===*/
    --ui-light: #f8f8f8;
    --scrollbar-bg: var(--ui-slate-300);
    --scrollbar-color: var(--ui-slate-400);

    /*=== Colores Alfas ===*/
    --ui-alfa-shadow: 0.3;

    --ui-turquesa-600-a10: rgb(0, 158, 164, 10%);
    --ui-turquesa-600-a20: rgb(0, 158, 164, 20%);
    --ui-turquesa-600-a30: rgb(0, 158, 164, 30%);
    --ui-turquesa-600-a40: rgb(0, 158, 164, 40%);
    --ui-turquesa-600-a50: rgb(0, 158, 164, 50%);
    --ui-turquesa-600-a60: rgb(0, 158, 164, 60%);
    
    --ui-slate-600-alfa-20: rgb(71, 85, 105, 20%);
    --ui-turquesa-600-alfa-20: rgb(0, 158, 164, 20%);
    --ui-teal-600-alfa-20: rgb(13, 148, 136, 20%);
    --ui-gris-600-alfa-20: rgb(93, 93, 93, 20%);
    --ui-rojo-600-alfa-20: rgb(220, 38, 38, 20%);
    --ui-amarillo-600-alfa-20: rgb(202, 138, 4, 20%);
    --ui-verde-600-alfa-20: rgb(22, 163, 74, 20%);
    --ui-azul-600-alfa-20: rgb(37, 99, 235, 20%);

    --ui-slate-600-alfa-50: rgb(71, 85, 105, 50%);
    --ui-turquesa-600-alfa-50: rgb(0, 158, 164, 50%);
    --ui-teal-600-alfa-50: rgb(13, 148, 136, 50%);
    --ui-gris-600-alfa-50: rgb(93, 93, 93, 50%);
    --ui-rojo-600-alfa-50: rgb(220, 38, 38, 50%);
    --ui-amarillo-600-alfa-50: rgb(202, 138, 4, 50%);
    --ui-verde-600-alfa-50: rgb(22, 163, 74, 50%);
    --ui-azul-600-alfa-50: rgb(37, 99, 235, 50%);

    /*=== Colores sólidos ===*/
    --ui-control-primary-bg: var(--ui-turquesa-600);
    --ui-control-primary-label: var(--ui-turquesa-50);
    --ui-control-primary-border: var(--ui-turquesa-600);
    --ui-control-primary-shadow: rgb(0, 158, 164, var(--ui-alfa-shadow));
    --ui-control-primary-hover-bg: var(--ui-turquesa-700);
    --ui-control-primary-focus-bg: var(--ui-turquesa-700);
    --ui-control-primary-disabled-bg: var(--ui-turquesa-500);
    --ui-control-primary-disabled-label: var(--ui-turquesa-50);
    --ui-badge-primary-bg: var(--ui-turquesa-300);
    --ui-badge-primary-label: var(--ui-turquesa-800);

    --ui-control-secondary-bg: var(--ui-slate-500);
    --ui-control-secondary-label: var(--ui-slate-50);
    --ui-control-secondary-border: var(--ui-slate-500);
    --ui-control-secondary-hover-bg: var(--ui-slate-600);
    --ui-control-secondary-focus-bg: var(--ui-slate-600);
    --ui-badge-secondary-bg: var(--ui-slate-400);
    --ui-badge-secondary-label: var(--ui-slate-800);

    --ui-control-tertiary-bg: var(--ui-gris-50);
    --ui-control-tertiary-label: var(--ui-gris-800);
    --ui-control-tertiary-border: var(--ui-gris-300);
    --ui-control-tertiary-hover-bg: var(--ui-gris-100);
    --ui-control-tertiary-focus-bg: var(--ui-gris-100);
    --ui-badge-tertiary-bg: var(--ui-gris-400);
    --ui-badge-tertiary-label: var(--ui-gris-800);

    --ui-control-success-bg: var(--ui-verde-600);
    --ui-control-success-label: var(--ui-verde-50);
    --ui-control-success-border: var(--ui-verde-600);
    --ui-control-success-hover-bg: var(--ui-verde-700);
    --ui-control-success-focus-bg: var(--ui-verde-700);
    --ui-badge-success-bg: var(--ui-verde-300);
    --ui-badge-success-label: var(--ui-verde-800);

    --ui-control-danger-bg: var(--ui-rojo-600);
    --ui-control-danger-label: var(--ui-rojo-50);
    --ui-control-danger-border: var(--ui-rojo-600);
    --ui-control-danger-hover-bg: var(--ui-rojo-700);
    --ui-control-danger-focus-bg: var(--ui-rojo-700);
    --ui-badge-danger-bg: var(--ui-rojo-200);
    --ui-badge-danger-label: var(--ui-rojo-800);

    --ui-control-warning-bg: var(--ui-amarillo-600);
    --ui-control-warning-label: var(--ui-amarillo-50);
    --ui-control-warning-border: var(--ui-amarillo-600);
    --ui-control-warning-hover-bg: var(--ui-amarillo-700);
    --ui-control-warning-focus-bg: var(--ui-amarillo-700);
    --ui-badge-warning-bg: var(--ui-amarillo-200);
    --ui-badge-warning-label: var(--ui-amarillo-800);

    --ui-control-info-bg: var(--ui-azul-600);
    --ui-control-info-label: var(--ui-azul-50);
    --ui-control-info-border: var(--ui-azul-600);
    --ui-control-info-hover-bg: var(--ui-azul-700);
    --ui-control-info-focus-bg: var(--ui-azul-700);
    --ui-badge-info-bg: var(--ui-azul-200);
    --ui-badge-info-label: var(--ui-azul-800);

    --ui-control-light-bg: var(--ui-slate-200);
    --ui-control-light-label: var(--ui-slate-600);
    --ui-control-light-border: var(--ui-slate-200);
    --ui-control-light-hover-bg: var(--ui-slate-300);
    --ui-control-light-focus-bg: var(--ui-slate-300);
    --ui-badge-light-bg: var(--ui-slate-200);
    --ui-badge-light-label: var(--ui-slate-800);

    --ui-control-dark-bg: var(--ui-slate-700);
    --ui-control-dark-label: var(--ui-slate-50);
    --ui-control-dark-border: var(--ui-slate-800);
    --ui-control-dark-hover-bg: var(--ui-slate-800);
    --ui-control-dark-focus-bg: var(--ui-slate-800);

    /*=== Colores suaves ===*/
    --ui-badge-suave-primary-label: var(--ui-turquesa-800);
    --ui-badge-suave-primary-bg: var(--ui-turquesa-200);
    --ui-badge-suave-secondary-label: var(--ui-slate-700);
    --ui-badge-suave-secondary-bg: var(--ui-slate-300);
    --ui-badge-suave-tertiary-label: var(--ui-slate-700);
    --ui-badge-suave-tertiary-bg: var(--ui-slate-200);
    --ui-badge-suave-success-label: var(--ui-verde-800);
    --ui-badge-suave-success-bg: var(--ui-verde-200);
    --ui-badge-suave-danger-label: var(--ui-rojo-700);
    --ui-badge-suave-danger-bg: var(--ui-rojo-100);
    --ui-badge-suave-warning-label: var(--ui-amarillo-700);
    --ui-badge-suave-warning-bg: var(--ui-amarillo-100);
    --ui-badge-suave-info-label: var(--ui-azul-700);
    --ui-badge-suave-info-bg: var(--ui-azul-100);
    --ui-badge-suave-light-label: var(--ui-slate-700);
    --ui-badge-suave-light-bg: var(--ui-slate-100);
    --ui-badge-suave-dark-label: var(--ui-slate-50);
    --ui-badge-suave-dark-bg: var(--ui-slate-400);

    /*=== Elements ===*/
    --ui-body-color: var(--ui-slate-700);
    --ui-body-bg: var(--ui-slate-200);
    --ui-element-bg: var(--ui-light);
    --ui-element-bg-hover: var(--ui-slate-200);
    --ui-header-bg: var(--ui-light);
    --ui-scroll-bg: var(--ui-slate-300);
    --ui-scroll-color: var(--ui-slate-500);

    /*=== Inputs ===*/
    --ui-control-placeholder: var(--ui-slate-400);
    --ui-control-border-width: 1px;
    --ui-control-focus-border-width: 1px;
    --ui-control-border-color: var(--ui-slate-300);
    --ui-control-bg: var(--ui-light);
    --ui-control-disabled-bg: var(--ui-slate-200);
    --ui-control-readonly-bg: var(--ui-slate-100);

    /*===== BORDES =====*/
    --ui-corner-full: 50px;
    --ui-corner-xl: 12px;
    --ui-corner-lg: 10px;
    --ui-corner-md: 8px;
    --ui-corner-sm: 6px;
    --ui-corner-xs: 4px;

    /*===== TAMAÑOS DE LOS CONTROLES (Button, Input, Select) =====*/
    --ui-size-height-control-md: 36px;
    --ui-size-height-control-sm: 32px;
    --ui-size-height-control-xs: 28px;
    --ui-size-height-control-xss: 24px;
    --ui-size-height-control-xsss: 18px;
}

[data-ui-theme=dark] {
    color-scheme: dark;

    /*=== Tema ===*/
    --ui-dark: var(--ui-slate-800);
    --scrollbar-bg: var(--ui-slate-600);
    --scrollbar-color: var(--ui-slate-400);

    /*=== Colores Alfas ===*/
    --ui-alfa-shadow: 0.40;

    /*=== Colores sólidos ===*/
    --ui-badge-primary-bg: var(--ui-turquesa-700);
    --ui-badge-primary-label: var(--ui-turquesa-100);

    --ui-control-secondary-bg: var(--ui-slate-600);
    --ui-control-secondary-label: var(--ui-slate-300);
    --ui-control-secondary-hover-bg: var(--ui-slate-700);
    --ui-control-secondary-shadow: rgb(71, 85, 105, 0.5);
    --ui-badge-secondary-bg: color-mix(in oklab, var(--ui-slate-500) 50%, transparent);
    --ui-badge-secondary-label: var(--ui-slate-100);

    --ui-control-tertiary-bg: var(--ui-slate-600);
    --ui-control-tertiary-label: var(--ui-slate-300);
    --ui-control-tertiary-hover-bg: var(--ui-slate-500);
    --ui-badge-tertiary-bg: var(--ui-gris-400);
    --ui-badge-tertiary-label: var(--ui-gris-100);

    --ui-badge-success-bg: color-mix(in oklab, var(--ui-verde-700) 50%, transparent);
    --ui-badge-success-label: var(--ui-verde-100);

    --ui-badge-warning-bg: color-mix(in oklab, var(--ui-amarillo-700) 50%, transparent);
    --ui-badge-warning-label: var(--ui-amarillo-100);

    --ui-badge-danger-bg: color-mix(in oklab, var(--ui-rojo-700) 50%, transparent);
    --ui-badge-danger-label: var(--ui-rojo-100);

    --ui-badge-info-bg: color-mix(in oklab, var(--ui-azul-700) 50%, transparent);
    --ui-badge-info-label: var(--ui-azul-100);

    --ui-control-light-bg: var(--ui-slate-700);
    --ui-control-light-label: var(--ui-slate-300);
    --ui-control-light-border: var(--ui-slate-800);
    --ui-control-light-hover-bg: var(--ui-slate-800);
    --ui-badge-light-bg: var(--ui-slate-100);
    --ui-badge-light-label: var(--ui-slate-800);

    --ui-control-dark-bg: var(--ui-slate-800);
    --ui-control-dark-label: var(--ui-slate-200);
    --ui-control-dark-border: var(--ui-slate-800);
    --ui-control-dark-hover-bg: var(--ui-slate-900);
    --ui-control-light-shadow: rgb(226, 232, 240, 0.1);

    /*=== Colores suaves ===*/
    --ui-badge-suave-primary-label: var(--ui-turquesa-200);
    --ui-badge-suave-primary-bg: var(--ui-turquesa-600-alfa-20);

    --ui-badge-suave-secondary-label: var(--ui-slate-200);
    --ui-badge-suave-secondary-bg: var(--ui-slate-600);

    --ui-badge-suave-tertiary-label: var(--ui-slate-200);
    --ui-badge-suave-tertiary-bg: var(--ui-slate-600-alfa-50);

    --ui-badge-suave-success-label: var(--ui-verde-400);
    --ui-badge-suave-success-bg: var(--ui-verde-600-alfa-20);

    --ui-badge-suave-danger-label: var(--ui-rojo-500);
    --ui-badge-suave-danger-bg: var(--ui-rojo-600-alfa-20);

    --ui-badge-suave-warning-label: var(--ui-amarillo-400);
    --ui-badge-suave-warning-bg: var(--ui-amarillo-600-alfa-20);

    --ui-badge-suave-info-label: var(--ui-azul-400);
    --ui-badge-suave-info-bg: var(--ui-azul-600-alfa-20);

    --ui-badge-suave-light-label: var(--ui-slate-400);
    --ui-badge-suave-light-bg: var(--ui-slate-600-alfa-50);

    --ui-badge-suave-dark-label: var(--ui-slate-400);
    --ui-badge-suave-dark-bg: var(--ui-slate-800);

    /*=== Elements ===*/
    --ui-body-color: var(--ui-slate-300);
    --ui-body-bg: var(--ui-dark);
    --ui-element-bg: var(--ui-slate-700);      /* BG: cards, table */
    --ui-element-bg-hover: #2a3a53;          /* HOVER: cards, table */
    --ui-header-bg: var(--ui-slate-700);

    /*=== Inputs ===*/
    --ui-control-placeholder: var(--ui-slate-500);
    --ui-control-border-color: var(--ui-slate-600);
    --ui-control-bg: #27354b;
    --ui-control-disabled-bg: var(--ui-slate-600);
    --ui-control-readonly-bg: var(--ui-slate-700);
}

*, *::after, *::before{box-sizing: border-box;}
*{font-family: "Inter", sans-serif; font-optical-sizing: auto; font-style: normal; font-variation-settings: "wdth" 100; line-height: 1.2;}
html{font-size: 12px; height: 100%;}
body{color: var(--ui-body-color); background-color: var(--ui-body-bg); margin: 0; height: 100%; text-align: left; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}

/* latin-ext */
@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('../../fonts/inter/UcCm3FwrK3iLTcvnUwQT9g.woff2') format('woff2');
}
/* latin-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../../fonts/inter/UcCo3FwrK3iLTcviYwY.woff2') format('woff2');
}


/* ========== 2. SCROLLBAR ========== */
::-webkit-scrollbar{width: 8px; height: 8px;}
::-webkit-scrollbar-track{background: var(--scrollbar-bg);}
::-webkit-scrollbar-thumb{background: var(--scrollbar-color); border-radius: 8px;}
.vertical-scroll-section{height: 100%; max-height: 92%; overflow-y: auto;}
.horizontal-scroll-section{width: 100%; max-width: 800px; overflow-x: auto;}
.overflow-hidden{overflow: hidden;}
.overflow-x-auto{overflow-x: auto;}
.overflow-y-auto{overflow-y: auto;}


/* ========== 3. COLORS ========== */
/* ========== 3.1. BACKGROUND COLORS ========== */
.bg-white {background-color: #ffffff;} .bg-black {background-color: #000000;}
.bg-slate-50 {background-color: var(--ui-slate-50);}.bg-slate-100 {background-color: var(--ui-slate-100);}.bg-slate-200 {background-color: var(--ui-slate-200);}.bg-slate-300 {background-color: var(--ui-slate-300);}.bg-slate-400 {background-color: var(--ui-slate-400);}.bg-slate-500 {background-color: var(--ui-slate-500);}.bg-slate-600 {background-color: var(--ui-slate-600);}.bg-slate-700 {background-color: var(--ui-slate-700);}.bg-slate-800 {background-color: var(--ui-slate-800);}.bg-slate-900 {background-color: var(--ui-slate-900);}.bg-slate-950 {background-color: var(--ui-slate-950);}
.bg-turquesa-50 {background-color: var(--ui-turquesa-50);}.bg-turquesa-100 {background-color: var(--ui-turquesa-100);}.bg-turquesa-200 {background-color: var(--ui-turquesa-200);}.bg-turquesa-300 {background-color: var(--ui-turquesa-300);}.bg-turquesa-400 {background-color: var(--ui-turquesa-400);}.bg-turquesa-500 {background-color: var(--ui-turquesa-500);}.bg-turquesa-600 {background-color: var(--ui-turquesa-600);}.bg-turquesa-700 {background-color: var(--ui-turquesa-700);}.bg-turquesa-800 {background-color: var(--ui-turquesa-800);}.bg-turquesa-900 {background-color: var(--ui-turquesa-900);}.bg-turquesa-950 {background-color: var(--ui-turquesa-950);}
.bg-teal-50 {background-color: var(--ui-teal-50);}.bg-teal-100 {background-color: var(--ui-teal-100);}.bg-teal-200 {background-color: var(--ui-teal-200);}.bg-teal-300 {background-color: var(--ui-teal-300);}.bg-teal-400 {background-color: var(--ui-teal-400);}.bg-teal-500 {background-color: var(--ui-teal-500);}.bg-teal-600 {background-color: var(--ui-teal-600);}.bg-teal-700 {background-color: var(--ui-teal-700);}.bg-teal-800 {background-color: var(--ui-teal-800);}.bg-teal-900 {background-color: var(--ui-teal-900);}.bg-teal-950 {background-color: var(--ui-teal-950);}
.bg-gray-50 {background-color: var(--ui-gris-50);}.bg-gray-100 {background-color: var(--ui-gris-100);}.bg-gray-200 {background-color: var(--ui-gris-200);}.bg-gray-300 {background-color: var(--ui-gris-300);}.bg-gray-400 {background-color: var(--ui-gris-400);}.bg-gray-500 {background-color: var(--ui-gris-500);}.bg-gray-600 {background-color: var(--ui-gris-600);}.bg-gray-700 {background-color: var(--ui-gris-700);}.bg-gray-800 {background-color: var(--ui-gris-800);}.bg-gray-900 {background-color: var(--ui-gris-900);}.bg-gray-950 {background-color: var(--ui-gris-950);}
.bg-red-50 {background-color: var(--ui-rojo-50);}.bg-red-100 {background-color: var(--ui-rojo-100);}.bg-red-200 {background-color: var(--ui-rojo-200);}.bg-red-300 {background-color: var(--ui-rojo-300);}.bg-red-400 {background-color: var(--ui-rojo-400);}.bg-red-500 {background-color: var(--ui-rojo-500);}.bg-red-600 {background-color: var(--ui-rojo-600);}.bg-red-700 {background-color: var(--ui-rojo-700);}.bg-red-800 {background-color: var(--ui-rojo-800);}.bg-red-900 {background-color: var(--ui-rojo-900);}.bg-red-950 {background-color: var(--ui-rojo-950);}
.bg-yellow-50 {background-color: var(--ui-amarillo-50);}.bg-yellow-100 {background-color: var(--ui-amarillo-100);}.bg-yellow-200 {background-color: var(--ui-amarillo-200);}.bg-yellow-300 {background-color: var(--ui-amarillo-300);}.bg-yellow-400 {background-color: var(--ui-amarillo-400);}.bg-yellow-500 {background-color: var(--ui-amarillo-500);}.bg-yellow-600 {background-color: var(--ui-amarillo-600);}.bg-yellow-700 {background-color: var(--ui-amarillo-700);}.bg-yellow-800 {background-color: var(--ui-amarillo-800);}.bg-yellow-900 {background-color: var(--ui-amarillo-900);}.bg-yellow-950 {background-color: var(--ui-amarillo-950);}
.bg-green-50 {background-color: var(--ui-verde-50);}.bg-green-100 {background-color: var(--ui-verde-100);}.bg-green-200 {background-color: var(--ui-verde-200);}.bg-green-300 {background-color: var(--ui-verde-300);}.bg-green-400 {background-color: var(--ui-verde-400);}.bg-green-500 {background-color: var(--ui-verde-500);}.bg-green-600 {background-color: var(--ui-verde-600);}.bg-green-700 {background-color: var(--ui-verde-700);}.bg-green-800 {background-color: var(--ui-verde-800);}.bg-green-900 {background-color: var(--ui-verde-900);}.bg-green-950 {background-color: var(--ui-verde-950);}
.bg-blue-50 {background-color: var(--ui-azul-50);}.bg-blue-100 {background-color: var(--ui-azul-100);}.bg-blue-200 {background-color: var(--ui-azul-200);}.bg-blue-300 {background-color: var(--ui-azul-300);}.bg-blue-400 {background-color: var(--ui-azul-400);}.bg-blue-500 {background-color: var(--ui-azul-500);}.bg-blue-600 {background-color: var(--ui-azul-600);}.bg-blue-700 {background-color: var(--ui-azul-700);}.bg-blue-800 {background-color: var(--ui-azul-800);}.bg-blue-900 {background-color: var(--ui-azul-900);}.bg-blue-950 {background-color: var(--ui-azul-950);}
/* ========== 3.2. TEXT COLORS ========== */
.text-white {color: #ffffff;} .text-black {color: #000000;}
.text-slate-50 {color: var(--ui-slate-50);}.text-slate-100 {color: var(--ui-slate-100);}.text-slate-200 {color: var(--ui-slate-200);}.text-slate-300 {color: var(--ui-slate-300);}.text-slate-400 {color: var(--ui-slate-400);}.text-slate-500 {color: var(--ui-slate-500);}.text-slate-600 {color: var(--ui-slate-600);}.text-slate-700 {color: var(--ui-slate-700);}.text-slate-800 {color: var(--ui-slate-800);}.text-slate-900 {color: var(--ui-slate-900);}.text-slate-950 {color: var(--ui-slate-950);}
.text-turquesa-50 {color: var(--ui-turquesa-50);}.text-turquesa-100 {color: var(--ui-turquesa-100);}.text-turquesa-200 {color: var(--ui-turquesa-200);}.text-turquesa-300 {color: var(--ui-turquesa-300);}.text-turquesa-400 {color: var(--ui-turquesa-400);}.text-turquesa-500 {color: var(--ui-turquesa-500);}.text-turquesa-600 {color: var(--ui-turquesa-600);}.text-turquesa-700 {color: var(--ui-turquesa-700);}.text-turquesa-800 {color: var(--ui-turquesa-800);}.text-turquesa-900 {color: var(--ui-turquesa-900);}.text-turquesa-950 {color: var(--ui-turquesa-950);}
.text-teal-50 {color: var(--ui-teal-50);}.text-teal-100 {color: var(--ui-teal-100);}.text-teal-200 {color: var(--ui-teal-200);}.text-teal-300 {color: var(--ui-teal-300);}.text-teal-400 {color: var(--ui-teal-400);}.text-teal-500 {color: var(--ui-teal-500);}.text-teal-600 {color: var(--ui-teal-600);}.text-teal-700 {color: var(--ui-teal-700);}.text-teal-800 {color: var(--ui-teal-800);}.text-teal-900 {color: var(--ui-teal-900);}.text-teal-950 {color: var(--ui-teal-950);}
.text-gray-50 {color: var(--ui-gris-50);}.text-gray-100 {color: var(--ui-gris-100);}.text-gray-200 {color: var(--ui-gris-200);}.text-gray-300 {color: var(--ui-gris-300);}.text-gray-400 {color: var(--ui-gris-400);}.text-gray-500 {color: var(--ui-gris-500);}.text-gray-600 {color: var(--ui-gris-600);}.text-gray-700 {color: var(--ui-gris-700);}.text-gray-800 {color: var(--ui-gris-800);}.text-gray-900 {color: var(--ui-gris-900);}.text-gray-950 {color: var(--ui-gris-950);}
.text-red-50 {color: var(--ui-rojo-50);}.text-red-100 {color: var(--ui-rojo-100);}.text-red-200 {color: var(--ui-rojo-200);}.text-red-300 {color: var(--ui-rojo-300);}.text-red-400 {color: var(--ui-rojo-400);}.text-red-500 {color: var(--ui-rojo-500);}.text-red-600 {color: var(--ui-rojo-600);}.text-red-700 {color: var(--ui-rojo-700);}.text-red-800 {color: var(--ui-rojo-800);}.text-red-900 {color: var(--ui-rojo-900);}.text-red-950 {color: var(--ui-rojo-950);}
.text-yellow-50 {color: var(--ui-amarillo-50);}.text-yellow-100 {color: var(--ui-amarillo-100);}.text-yellow-200 {color: var(--ui-amarillo-200);}.text-yellow-300 {color: var(--ui-amarillo-300);}.text-yellow-400 {color: var(--ui-amarillo-400);}.text-yellow-500 {color: var(--ui-amarillo-500);}.text-yellow-600 {color: var(--ui-amarillo-600);}.text-yellow-700 {color: var(--ui-amarillo-700);}.text-yellow-800 {color: var(--ui-amarillo-800);}.text-yellow-900 {color: var(--ui-amarillo-900);}.text-yellow-950 {color: var(--ui-amarillo-950);}
.text-green-50 {color: var(--ui-verde-50);}.text-green-100 {color: var(--ui-verde-100);}.text-green-200 {color: var(--ui-verde-200);}.text-green-300 {color: var(--ui-verde-300);}.text-green-400 {color: var(--ui-verde-400);}.text-green-500 {color: var(--ui-verde-500);}.text-green-600 {color: var(--ui-verde-600);}.text-green-700 {color: var(--ui-verde-700);}.text-green-800 {color: var(--ui-verde-800);}.text-green-900 {color: var(--ui-verde-900);}.text-green-950 {color: var(--ui-verde-950);}
.text-blue-50 {color: var(--ui-azul-50);}.text-blue-100 {color: var(--ui-azul-100);}.text-blue-200 {color: var(--ui-azul-200);}.text-blue-300 {color: var(--ui-azul-300);}.text-blue-400 {color: var(--ui-azul-400);}.text-blue-500 {color: var(--ui-azul-500);}.text-blue-600 {color: var(--ui-azul-600);}.text-blue-700 {color: var(--ui-azul-700);}.text-blue-800 {color: var(--ui-azul-800);}.text-blue-900 {color: var(--ui-azul-900);}.text-blue-950 {color: var(--ui-azul-950);}
/* ========== 3.3. TEXT COLORS CUSTOM ========== */
.text-primary {color: var(--ui-control-primary-bg);}
.text-secondary {color: var(--ui-control-secondary-bg);}
.text-success {color: var(--ui-control-success-bg);}
.text-danger {color: var(--ui-control-danger-bg);}
.text-warning {color: var(--ui-control-warning-bg);}
.text-info {color: var(--ui-control-info-bg);}


/* ========== 4. TEXTS ==========*/
:root {
    --ui-text-4xl: 3.143rem; /*44px*/
    --ui-text-3xl: 2.429rem; /*34px*/
    --ui-text-2xl: 1.857rem; /*26px*/
    --ui-text-xl: 1.429rem; /*20px*/
    --ui-text-lg: 1.143rem; /*16px*/
    --ui-text-md: 1rem; /*14px*/
    --ui-text-sm: 0.875rem; /*12px*/
    --ui-text-xs: 0.714rem; /*10px*/
    --ui-text-xss: 0.571; /*8px*/
}
h1 {font-size: var(--ui-text-4xl); margin-bottom: 2rem;} h2 {font-size: var(--ui-text-3xl); margin-bottom: 1.50rem;} h3 {font-size: var(--ui-text-2xl); margin-bottom: 1.25rem;} h4 {font-size: var(--ui-text-xl); margin-bottom: 1rem;} h5 {font-size: var(--ui-text-lg); margin-bottom: 0.5rem;} h6 {font-size: var(--ui-text-md); margin-bottom: 0.25rem;}
h1, h2, h3, h4, h5, h6 {margin-top: 0px; font-weight: 600;}
.font-light {font-weight: 300;}.font-normal {font-weight: normal;}.font-bold {font-weight: 650;}.font-xbold {font-weight: 800;}.font-2xbold {font-weight: 900;}
kbd{background-color: var(--ui-slate-600); color: var(--ui-light); vertical-align: baseline; display: inline-block; border-radius: var(--ui-corner-sm); padding: var(--ui-padding-xs) var(--ui-padding-md);}
i.bi{line-height: 1;}
.display-1 {font-size: 3.7rem;}.display-2 {font-size: 3.35rem;}.display-3 {font-size: 2rem;}.display-4 {font-size: 1.7rem;}.display-5 {font-size: 1.35rem;}.display-6 {font-size: 1.1rem;}
.text-breadcrumb {color: var(--ui-turquesa-600);}
.text-link {text-decoration-line: underline; text-decoration-color: var(--ui-control-primary-bg); color: unset; cursor: pointer;}
.text-link:hover {color: var(--ui-control-primary-bg);}
.text-url {text-decoration-line: none; text-decoration-color: var(--ui-control-primary-bg); color: unset; cursor: pointer;}
.text-url:hover {text-decoration-line: underline; color: var(--ui-control-primary-bg);}
.text-xs{font-size: var(--ui-text-xs);} .text-sm{font-size: var(--ui-text-sm);} .text-md{font-size: var(--ui-text-md);} .text-lg{font-size: var(--ui-text-lg);} .text-xl{font-size: var(--ui-text-xl);} .text-2xl{font-size: var(--ui-text-2xl);} .text-3xl{font-size: var(--ui-text-3xl);} .text-4xl{font-size: var(--ui-text-4xl);}
p {margin-top: 0.25rem; margin-bottom: 0.25rem;}


/* ========== 5. LAYOUTS ==========*/
.block-none {display: none;} .block {display: block;}
.inline-block {display: inline-block;}
.divider {display: block; width: 100%; height: 1px; border-top: 1px solid; margin: 1.4rem 0rem;}

/* ========== 5.1. INTERACTIVE ==========*/
.cursor-none {cursor: none;}
.pointer {cursor: pointer;}

/* ========== 5.2. POSITION ==========*/
.relative {position: relative;}
.absolute {position: absolute;}

/* ========== 5.3. DISPLAY ==========*/
[hidden] {display: none !important;}
.hidden {display: none !important;}
hr {border: none; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--ui-slate-400);}

/* ========== 5.4. IMAGES ==========*/
picture {display: inline-block;}
img {vertical-align: top; max-width: 100%; height: auto;}


/* ========== 6. SIZING ========== */
.h-0{height: 0px;} .h-px{height: 1px;} .h-0\.5{height: 0.125rem;} .h-1{height: 0.25rem;} .h-1\.5{height: 0.375rem;} .h-2{height: 0.5rem;} .h-2\.5{height: 0.625rem;} .h-3{height: 0.75rem;} .h-3\.5{height: 0.875rem;} .h-4{height: 1rem;} .h-5{height: 1.25rem;} .h-6{height: 1.5rem;} .h-7{height: 1.75rem;} .h-8{height: 2rem;} .h-9{height: 2.25rem;} .h-10{height: 2.5rem;} .h-11{height: 2.75rem;} .h-12{height: 3rem;} .h-14{height: 3.5rem;} .h-16{height: 4rem;} .h-20{height: 5rem;} .h-24{height: 6rem;} .h-28{height: 7rem;} .h-32{height: 8rem;} .h-36{height: 9rem;} .h-40{height: 10rem;} .h-44{height: 11rem;} .h-48{height: 12rem;} .h-52{height: 13rem;} .h-56{height: 14rem;} .h-60{height: 15rem;} .h-64{height: 16rem;} .h-72{height: 18rem;} .h-80{height: 20rem;} .h-96{height: 24rem;}
.h-auto{height: auto;} .h-1\/2{height: 50%;} .h-1\/3{height: 33.333333%;} .h-2\/3{height: 66.666667%;} .h-1\/4{height: 25%;} .h-2\/4{height: 50%;} .h-3\/4{height: 75%;} .h-1\/5{height: 20%;} .h-2\/5{height: 40%;} .h-3\/5{height: 60%;} .h-4\/5{height: 80%;} .h-1\/6{height: 16.666667%;} .h-2\/6{height: 33.333333%;} .h-3\/6{height: 50%;} .h-4\/6{height: 66.666667%;} .h-5\/6{height: 83.333333%;}
.h-full{height: 100%;} .h-screen{height: 100vh;} .h-svh{height: 100svh;} .h-lvh{height: 100lvh;} .h-dvh{height: 100dvh;} .h-min{height: min-content;} .h-max{height: max-content;} .h-fit{height: fit-content;} .vh-full{height: 100vh;}
.w-0{width: 0px;} .w-px{width: 1px;} .w-0\.5{width: 0.125rem;} .w-1{width: 0.25rem;} .w-1\.5{width: 0.375rem;} .w-2{width: 0.5rem;} .w-2\.5{width: 0.625rem;} .w-3{width: 0.75rem;} .w-3\.5{width: 0.875rem;} .w-4{width: 1rem;} .w-5{width: 1.25rem;} .w-6{width: 1.5rem;} .w-7{width: 1.75rem;} .w-8{width: 2rem;} .w-9{width: 2.25rem;} .w-10{width: 2.5rem;} .w-11{width: 2.75rem;} .w-12{width: 3rem;} .w-14{width: 3.5rem;} .w-16{width: 4rem;} .w-20{width: 5rem;} .w-24{width: 6rem;} .w-28{width: 7rem;} .w-32{width: 8rem;} .w-36{width: 9rem;} .w-40{width: 10rem;} .w-44{width: 11rem;} .w-48{width: 12rem;} .w-52{width: 13rem;} .w-56{width: 14rem;} .w-60{width: 15rem;} .w-64{width: 16rem;} .w-72{width: 18rem;} .w-80{width: 20rem;} .w-96{width: 24rem;}
.w-auto{width: auto;} .w-1\/2{width: 50%;} .w-1\/3{width: 33.333333%;} .w-2\/3{width: 66.666667%;} .w-1\/4{width: 25%;} .w-2\/4{width: 50%;} .w-3\/4{width: 75%;} .w-1\/5{width: 20%;} .w-2\/5{width: 40%;} .w-3\/5{width: 60%;} .w-4\/5{width: 80%;} .w-1\/6{width: 16.666667%;} .w-2\/6{width: 33.333333%;} .w-3\/6{width: 50%;} .w-4\/6{width: 66.666667%;} .w-5\/6{width: 83.333333%;} .w-1\/12{width: 8.333333%;} .w-2\/12{width: 16.666667%;} .w-3\/12{width: 25%;} .w-4\/12{width: 33.333333%;} .w-5\/12{width: 41.666667%;} .w-6\/12{width: 50%;} .w-7\/12{width: 58.333333%;} .w-8\/12{width: 66.666667%;} .w-9\/12{width: 75%;} .w-10\/12{width: 83.333333%;} .w-11\/12{width: 91.666667%;}
.w-full{width: 100%;} .w-screen{width: 100vw;} .w-svw{width: 100svw;} .w-lvw{width: 100lvw;} .w-dvw{width: 100dvw;} .w-min{width: min-content;} .w-max{width: max-content;} .w-fit{width: fit-content;} .vw-full{width: 100vw;}
.w-unset{width: unset;}
.size-0{width: 0px; height: 0px;} .size-px{width: 1px; height: 1px;} .size-0\.5{width: 0.125rem; height: 0.125rem;} .size-1{width: 0.25rem; height: 0.25rem;} .size-1\.5{width: 0.375rem; height: 0.375rem;} .size-2{width: 0.5rem; height: 0.5rem;} .size-2\.5{width: 0.625rem; height: 0.625rem;} .size-3{width: 0.75rem; height: 0.75rem;} .size-3\.5{width: 0.875rem; height: 0.875rem;} .size-4{width: 1rem; height: 1rem;} .size-5{width: 1.25rem; height: 1.25rem;} .size-6{width: 1.5rem; height: 1.5rem;} .size-7{width: 1.75rem; height: 1.75rem;} .size-8{width: 2rem; height: 2rem;} .size-9{width: 2.25rem; height: 2.25rem;} .size-10{width: 2.5rem; height: 2.5rem;} .size-11{width: 2.75rem; height: 2.75rem;} .size-12{width: 3rem; height: 3rem;} .size-14{width: 3.5rem; height: 3.5rem;} .size-16{width: 4rem; height: 4rem;} .size-20{width: 5rem; height: 5rem;} .size-24{width: 6rem; height: 6rem;} .size-28{width: 7rem; height: 7rem;} .size-32{width: 8rem; height: 8rem;} .size-36{width: 9rem; height: 9rem;} .size-40{width: 10rem; height: 10rem;} .size-44{width: 11rem; height: 11rem;} .size-48{width: 12rem; height: 12rem;} .size-52{width: 13rem; height: 13rem;} .size-56{width: 14rem; height: 14rem;} .size-60{width: 15rem; height: 15rem;} .size-64{width: 16rem; height: 16rem;} .size-72{width: 18rem; height: 18rem;} .size-80{width: 20rem; height: 20rem;} .size-96{width: 24rem; height: 24rem;}
.size-auto{width: auto; height: auto;} .size-1\/2{width: 50%; height: 50%;} .size-1\/3{width: 33.333333%; height: 33.333333%;} .size-2\/3{width: 66.666667%; height: 66.666667%;} .size-1\/4{width: 25%; height: 25%;} .size-2\/4{width: 50%; height: 50%;} .size-3\/4{width: 75%; height: 75%;} .size-1\/5{width: 20%; height: 20%;} .size-2\/5{width: 40%; height: 40%;} .size-3\/5{width: 60%; height: 60%;} .size-4\/5{width: 80%; height: 80%;} .size-1\/6{width: 16.666667%; height: 16.666667%;} .size-2\/6{width: 33.333333%; height: 33.333333%;} .size-3\/6{width: 50%; height: 50%;} .size-4\/6{width: 66.666667%; height: 66.666667%;} .size-5\/6{width: 83.333333%; height: 83.333333%;} .size-1\/12{width: 8.333333%; height: 8.333333%;} .size-2\/12{width: 16.666667%; height: 16.666667%;} .size-3\/12{width: 25%; height: 25%;} .size-4\/12{width: 33.333333%; height: 33.333333%;} .size-5\/12{width: 41.666667%; height: 41.666667%;} .size-6\/12{width: 50%; height: 50%;} .size-7\/12{width: 58.333333%; height: 58.333333%;} .size-8\/12{width: 66.666667%; height: 66.666667%;} .size-9\/12{width: 75%; height: 75%;} .size-10\/12{width: 83.333333%; height: 83.333333%;} .size-11\/12{width: 91.666667%; height: 91.666667%;}
.size-full{width: 100%; height: 100%;} .size-min{width: min-content; height: min-content;} .size-max{width: max-content; height: max-content;} .size-fit{width: fit-content; height: fit-content;}

.img-100{max-width: 100px;} .img-200{max-width: 200px;} .img-300{max-width: 300px;} .img-400{max-width: 400px;} .img-500{max-width: 500px;} .img-600{max-width: 600px;}
.aspect-auto{aspect-ratio: auto;} .aspect-square{aspect-ratio: 1/1;} .aspect-video{aspect-ratio: 16/9;}


/* ========== 7. BORDERS ========== */
.rounded-none{border-radius: 0px;} .rounded-sm{border-radius: 0.125rem;} .rounded{border-radius: 0.25rem;} .rounded-md{border-radius: 0.375rem;} .rounded-lg{border-radius: 0.5rem;} .rounded-xl{border-radius: 0.75rem;} .rounded-2xl{border-radius: 1rem;} .rounded-3xl{border-radius: 1.5rem;} .rounded-full{border-radius: 9999px;}
.border{border-width: 1px;} .border-0{border-width: 0px;} .border-2{border-width: 2px;} .border-4{border-width: 4px;} .border-8{border-width: 8px;}
.border-solid{border-style: solid;} .border-dashed{border-style: dashed;} .border-dotted{border-style: dotted;} .border-double{border-style: double;} .border-hidden{border-style: hidden;} .border-none{border-style: none;}


/* ========== 8. TIPOGRAPHY ========== */
/*     Font Style */
.italic {font-style: italic;}
.not-italic {font-style: normal;}
/*     List Style Type */
.list-none {list-style-type: none;}
.list-disc {list-style-type: disc;}
.list-decimal {list-style-type: decimal;}
/*     Whitespace */
.whitespace-normal {white-space: normal;}
.whitespace-nowrap {white-space: nowrap;}
.whitespace-pre {white-space: pre;}
.whitespace-pre-line {white-space: pre-line;}
.whitespace-pre-wrap {white-space: pre-wrap;}
.whitespace-break-spaces {white-space: break-spaces;}
.break-spaces {white-space: break-spaces;}
/*     Word Break */
.break-normal {overflow-wrap: normal; word-break: normal;}
.break-words {overflow-wrap: break-word;}
.break-all {word-break: break-all;}
.break-keep {word-break: keep-all;}
/*     Text decoration */
.underline {text-decoration-line: underline;}
.overline {text-decoration-line: overline;}
.line-through {text-decoration-line: line-through;}
.no-underline {text-decoration-line: none;}
/*     Text Overflow */
.truncate {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.text-ellipsis {text-overflow: ellipsis;}
.text-clip {text-overflow: clip;}
/*     Text Transform */
.uppercase {text-transform: uppercase;}
.lowercase {text-transform: lowercase;}
.capitalize {text-transform: capitalize;}
.normal-case {text-transform: none;}
/*     Text Wrap */
.text-wrap {text-wrap: wrap;}
.text-nowrap {text-wrap: nowrap;}
.text-balance {text-wrap: balance;}
.text-pretty {text-wrap: pretty;}
/*     Text align */
.text-left {text-align: left;}
.text-right {text-align: right;}
.text-start {text-align: start;}
.text-center {text-align: center;}
.text-end {text-align: end;}
.text-justify {text-align: justify;}
.text-y-center {display: inline-grid; place-items: center;}


/* ========== 9. MARGIN Y PADDING ========== */
:root {
    --ui-padding-50: 50%; --ui-padding-4xl: 5rem; --ui-padding-3xl: 3.75rem; --ui-padding-2xl: 2.50rem; --ui-padding-xl: 1.25rem; --ui-padding-lg: 1rem; --ui-padding-md: 0.75rem; --ui-padding-sm: 0.5rem; --ui-padding-xs: 0.25rem; --ui-padding-xss: 2px;
    --ui-margin-50: 50%; --ui-margin-xl: 1.25rem; --ui-margin-lg: 1rem; --ui-margin-md: 0.75rem; --ui-margin-sm: 0.5rem; --ui-margin-xs: 0.25rem;
    --padding-12: 3rem; --padding-11: 2.75rem; --padding-10: 2.5rem; --padding-9: 2.25rem; --padding-8: 2rem; --padding-7: 1.75rem; --padding-6: 1.5rem; --padding-5: 1.25rem; --padding-4: 1rem; --padding-3: 0.75rem; --padding-2: 0.5rem; --padding-1: 0.25rem; --padding-0: 0rem;
    --margin-12: 3rem; --margin-11: 2.75rem; --margin-10: 2.5rem; --margin-9: 2.25rem; --margin-8: 2rem; --margin-7: 1.75rem; --margin-6: 1.5rem; --margin-5: 1.25rem; --margin-4: 1rem; --margin-3: 0.75rem; --margin-2: 0.5rem; --margin-1: 0.25rem; --margin-0: 0rem;
    --ui-gap-xs: 4px; --ui-gap-sm: 6px; --ui-gap-md: 8px; --ui-gap-lg: 10px; --ui-gap-xl: 12px;
}
.m-0{margin: var(--margin-0);} .m-1{margin: var(--margin-1);} .m-2{margin: var(--margin-2);} .m-3{margin: var(--margin-3);} .m-4{margin: var(--margin-4);} .m-5{margin: var(--margin-5);} .m-6{margin: var(--margin-6);} .m-7{margin: var(--margin-7);} .m-8{margin: var(--margin-8);} .m-9{margin: var(--margin-9);} .m-10{margin: var(--margin-10);} .m-11{margin: var(--margin-11);} .m-12{margin: var(--margin-12);} .m-auto{margin: auto;}
.mx-0{margin-right: var(--margin-0); margin-left: var(--margin-0);} .mx-1{margin-right: var(--margin-1); margin-left: var(--margin-1);} .mx-2{margin-right: var(--margin-2); margin-left: var(--margin-2);} .mx-3{margin-right: var(--margin-3); margin-left: var(--margin-3);} .mx-4{margin-right: var(--margin-4); margin-left: var(--margin-4);} .mx-5{margin-right: var(--margin-5); margin-left: var(--margin-5);} .mx-6{margin-right: var(--margin-6); margin-left: var(--margin-6);} .mx-7{margin-right: var(--margin-7); margin-left: var(--margin-7);} .mx-8{margin-right: var(--margin-8); margin-left: var(--margin-8);} .mx-9{margin-right: var(--margin-9); margin-left: var(--margin-9);} .mx-10{margin-right: var(--margin-10); margin-left: var(--margin-10);} .mx-11{margin-right: var(--margin-11); margin-left: var(--margin-11);} .mx-12{margin-right: var(--margin-12); margin-left: var(--margin-12);} .mx-auto{margin-right: auto; margin-left: auto;}
.my-0{margin-top: var(--margin-0); margin-bottom: var(--margin-0);} .my-1{margin-top: var(--margin-1); margin-bottom: var(--margin-1);} .my-2{margin-top: var(--margin-2); margin-bottom: var(--margin-2);} .my-3{margin-top: var(--margin-3); margin-bottom: var(--margin-3);} .my-4{margin-top: var(--margin-4); margin-bottom: var(--margin-4);} .my-5{margin-top: var(--margin-5); margin-bottom: var(--margin-5);} .my-6{margin-top: var(--margin-6); margin-bottom: var(--margin-6);} .my-7{margin-top: var(--margin-7); margin-bottom: var(--margin-7);} .my-8{margin-top: var(--margin-8); margin-bottom: var(--margin-8);} .my-9{margin-top: var(--margin-9); margin-bottom: var(--margin-9);} .my-10{margin-top: var(--margin-10); margin-bottom: var(--margin-10);} .my-11{margin-top: var(--margin-11); margin-bottom: var(--margin-11);} .my-12{margin-top: var(--margin-12); margin-bottom: var(--margin-12);} .my-auto{margin-top: auto; margin-bottom: auto;}
.mt-0{margin-top: var(--margin-0);} .mt-1{margin-top: var(--margin-1);} .mt-2{margin-top: var(--margin-2);} .mt-3{margin-top: var(--margin-3);} .mt-4{margin-top: var(--margin-4);} .mt-5{margin-top: var(--margin-5);} .mt-6{margin-top: var(--margin-6);} .mt-7{margin-top: var(--margin-7);} .mt-8{margin-top: var(--margin-8);} .mt-9{margin-top: var(--margin-9);} .mt-10{margin-top: var(--margin-10);} .mt-11{margin-top: var(--margin-11);} .mt-12{margin-top: var(--margin-12);} .mt-auto{margin-top: auto;}
.me-0{margin-right: var(--margin-0);} .me-1{margin-right: var(--margin-1);} .me-2{margin-right: var(--margin-2);} .me-3{margin-right: var(--margin-3);} .me-4{margin-right: var(--margin-4);} .me-5{margin-right: var(--margin-5);} .me-6{margin-right: var(--margin-6);} .me-7{margin-right: var(--margin-7);} .me-8{margin-right: var(--margin-8);} .me-9{margin-right: var(--margin-9);} .me-10{margin-right: var(--margin-10);} .me-11{margin-right: var(--margin-11);} .me-12{margin-right: var(--margin-12);} .me-auto{margin-right: auto;}
.mb-0{margin-bottom: var(--margin-0);} .mb-1{margin-bottom: var(--margin-1);} .mb-2{margin-bottom: var(--margin-2);} .mb-3{margin-bottom: var(--margin-3);} .mb-4{margin-bottom: var(--margin-4);} .mb-5{margin-bottom: var(--margin-5);} .mb-6{margin-bottom: var(--margin-6);} .mb-7{margin-bottom: var(--margin-7);} .mb-8{margin-bottom: var(--margin-8);} .mb-9{margin-bottom: var(--margin-9);} .mb-10{margin-bottom: var(--margin-10);} .mb-11{margin-bottom: var(--margin-11);} .mb-12{margin-bottom: var(--margin-12);} .mb-auto{margin-bottom: auto;}
.ms-0{margin-left: var(--margin-0);} .ms-1{margin-left: var(--margin-1);} .ms-2{margin-left: var(--margin-2);} .ms-3{margin-left: var(--margin-3);} .ms-4{margin-left: var(--margin-4);} .ms-5{margin-left: var(--margin-5);} .ms-6{margin-left: var(--margin-6);} .ms-7{margin-left: var(--margin-7);} .ms-8{margin-left: var(--margin-8);} .ms-9{margin-left: var(--margin-9);} .ms-10{margin-left: var(--margin-10);} .ms-11{margin-left: var(--margin-11);} .ms-12{margin-left: var(--margin-12);} .ms-auto{margin-left: auto;}

.p-0{padding: var(--padding-0);} .p-1{padding: var(--padding-1);} .p-2{padding: var(--padding-2);} .p-3{padding: var(--padding-3);} .p-4{padding: var(--padding-4);} .p-5{padding: var(--padding-5);} .p-6{padding: var(--padding-6);} .p-7{padding: var(--padding-7);} .p-8{padding: var(--padding-8);} .p-9{padding: var(--padding-9);} .p-10{padding: var(--padding-10);} .p-11{padding: var(--padding-11);} .p-12{padding: var(--padding-12);} .p-auto{padding: auto;}
.px-0{padding-right: var(--padding-0); padding-left: var(--padding-0);} .px-1{padding-right: var(--padding-1); padding-left: var(--padding-1);} .px-2{padding-right: var(--padding-2); padding-left: var(--padding-2);} .px-3{padding-right: var(--padding-3); padding-left: var(--padding-3);} .px-4{padding-right: var(--padding-4); padding-left: var(--padding-4);} .px-5{padding-right: var(--padding-5); padding-left: var(--padding-5);} .px-6{padding-right: var(--padding-6); padding-left: var(--padding-6);} .px-7{padding-right: var(--padding-7); padding-left: var(--padding-7);} .px-8{padding-right: var(--padding-8); padding-left: var(--padding-8);} .px-9{padding-right: var(--padding-9); padding-left: var(--padding-9);} .px-10{padding-right: var(--padding-10); padding-left: var(--padding-10);} .px-11{padding-right: var(--padding-11); padding-left: var(--padding-11);} .px-12{padding-right: var(--padding-12); padding-left: var(--padding-12);} .px-auto{padding-right: auto; padding-left: auto;}
.py-0{padding-top: var(--padding-0); padding-bottom: var(--padding-0);} .py-1{padding-top: var(--padding-1); padding-bottom: var(--padding-1);} .py-2{padding-top: var(--padding-2); padding-bottom: var(--padding-2);} .py-3{padding-top: var(--padding-3); padding-bottom: var(--padding-3);} .py-4{padding-top: var(--padding-4); padding-bottom: var(--padding-4);} .py-5{padding-top: var(--padding-5); padding-bottom: var(--padding-5);} .py-6{padding-top: var(--padding-6); padding-bottom: var(--padding-6);} .py-7{padding-top: var(--padding-7); padding-bottom: var(--padding-7);} .py-8{padding-top: var(--padding-8); padding-bottom: var(--padding-8);} .py-9{padding-top: var(--padding-9); padding-bottom: var(--padding-9);} .py-10{padding-top: var(--padding-10); padding-bottom: var(--padding-10);} .py-11{padding-top: var(--padding-11); padding-bottom: var(--padding-11);} .py-12{padding-top: var(--padding-12); padding-bottom: var(--padding-12);} .py-auto{padding-top: auto; padding-bottom: auto;}
.py-xl{padding-top: 2rem; padding-bottom: 2rem;} .py-2xl{padding-top: 4rem; padding-bottom: 4rem;} .py-3xl{padding-top: 8rem; padding-bottom: 8rem;}
.pt-0{padding-top: var(--padding-0);} .pt-1{padding-top: var(--padding-1);} .pt-2{padding-top: var(--padding-2);} .pt-3{padding-top: var(--padding-3);} .pt-4{padding-top: var(--padding-4);} .pt-5{padding-top: var(--padding-5);} .pt-6{padding-top: var(--padding-6);} .pt-7{padding-top: var(--padding-7);} .pt-8{padding-top: var(--padding-8);} .pt-9{padding-top: var(--padding-9);} .pt-10{padding-top: var(--padding-10);} .pt-11{padding-top: var(--padding-11);} .pt-12{padding-top: var(--padding-12);} .pt-auto{padding-top: auto;}
.pe-0{padding-right: var(--padding-0);} .pe-1{padding-right: var(--padding-1);} .pe-2{padding-right: var(--padding-2);} .pe-3{padding-right: var(--padding-3);} .pe-4{padding-right: var(--padding-4);} .pe-5{padding-right: var(--padding-5);} .pe-6{padding-right: var(--padding-6);} .pe-7{padding-right: var(--padding-7);} .pe-8{padding-right: var(--padding-8);} .pe-9{padding-right: var(--padding-9);} .pe-10{padding-right: var(--padding-10);} .pe-11{padding-right: var(--padding-11);} .pe-12{padding-right: var(--padding-12);} .pe-auto{padding-right: auto;}
.pb-0{padding-bottom: var(--padding-0);} .pb-1{padding-bottom: var(--padding-1);} .pb-2{padding-bottom: var(--padding-2);} .pb-3{padding-bottom: var(--padding-3);} .pb-4{padding-bottom: var(--padding-4);} .pb-5{padding-bottom: var(--padding-5);} .pb-6{padding-bottom: var(--padding-6);} .pb-7{padding-bottom: var(--padding-7);} .pb-8{padding-bottom: var(--padding-8);} .pb-9{padding-bottom: var(--padding-9);} .pb-10{padding-bottom: var(--padding-10);} .pb-11{padding-bottom: var(--padding-11);} .pb-12{padding-bottom: var(--padding-12);} .pb-auto{padding-bottom: auto;}
.ps-0{padding-left: var(--padding-0);} .ps-1{padding-left: var(--padding-1);} .ps-2{padding-left: var(--padding-2);} .ps-3{padding-left: var(--padding-3);} .ps-4{padding-left: var(--padding-4);} .ps-5{padding-left: var(--padding-5);} .ps-6{padding-left: var(--padding-6);} .ps-7{padding-left: var(--padding-7);} .ps-8{padding-left: var(--padding-8);} .ps-9{padding-left: var(--padding-9);} .ps-10{padding-left: var(--padding-10);} .ps-11{padding-left: var(--padding-11);} .ps-12{padding-left: var(--padding-12);} .ps-auto{padding-left: auto;}

.gap-0{gap: 0rem !important;} .gap-1{gap: 0.25rem;} .gap-2{gap: 0.5rem;} .gap-3{gap: 0.75rem;} .gap-4{gap: 1rem;} .gap-5{gap: 1.25rem;} .gap-6{gap: 1.5rem;} .gap-7{gap: 1.75rem;} .gap-8{gap: 2rem;} .gap-9{gap: 2.25rem;} .gap-10{gap: 2.5rem;} .gap-11{gap: 2.75rem;} .gap-12{gap: 3rem;}
.gap-x-0{row-gap: 0rem !important;} .gap-x-1{row-gap: 0.25rem;} .gap-x-2{row-gap: 0.5rem;} .gap-x-3{row-gap: 1rem;} .gap-x-4{row-gap: 1.25rem;} .gap-x-5{row-gap: 1.5rem;} .gap-x-6{row-gap: 2rem;}
.gap-y-0{column-gap: 0rem !important;} .gap-y-1{column-gap: 0.25rem;} .gap-y-2{column-gap: 0.5rem;} .gap-y-3{column-gap: 1rem;} .gap-y-4{column-gap: 1.25rem;} .gap-y-5{column-gap: 1.5rem;} .gap-y-6{column-gap: 2rem;}


@media (width >= 400px) {
    /* .xsm */
}
@media (width >= 640px) { /* 40rem */
    /* .sm */
    .sm\:block-none{display: none;}
    .sm\:block {display: block;}
}
@media (width >= 768px) { /* 48rem */
    /* .md */
    html{font-size: 13px;}
    .md\:block-none{display: none;}
    .md\:block {display: block;}
}
@media (width >= 1024px) { /* 64rem */
    /* .lg */
}
@media (width >= 1280px) { /* 80rem */
    /* .xl */
}
@media (width >= 1536px) { /* 96rem */
    /* .2xl -> .\32xl\: */
}