/* Light mode */
/*## ###############################################################################
## Desktop ( min: 993, max: 2560 )
## ###############################################################################*/

:root {
    /* Typography */
    --family-title: "Poppins"; 
    --family-body:'Open';
    --font-family-primary: "Poppins";
    --font-family-secondary: "Open";
    --font-family-tertiary: "Roboto";

    --font-weight-regular: "regular";
    --font-weight-semibold: "semibold";
    --font-weight-bold: "bold";

    --font-size-display: 96px;
    --font-size-h1: 72px;
    --font-size-h2: 56px;
    --font-size-h3: 48px;
    --font-size-h4: 36px; /* En el design system dice 36 pero en el css de la maqueta dice 32 */    
    --font-size-h5: 24px;
    --font-size-h6: 20px;
    --font-size-body1: 18px;
    --font-size-body2: 16px;
    --font-size-body3: 14px;
    --font-size-legal: 12px;
    --font-size-caption: 10px;
    --font-size-overline: 8px;

    --font-lineHeight-display: 108px;
    --font-lineHeight-h1: 80px;
    --font-lineHeight-h2: 64px;
    --font-lineHeight-h3: 56px;
    --font-lineHeight-h4: 44px; /* En la maqueta dice 40px*/
    --font-lineHeight-h5: 32px;
    --font-lineHeight-h6: 28px;
    --font-lineHeight-body1: 26px;
    --font-lineHeight-body2: 24px;
    --font-lineHeight-body3: 20px;
    --font-lineHeight-legal: 18px;
    --font-lineHeight-caption: 16px;
    --font-lineHeight-overline: 12px;

    /* Primitives */
    --color-azulActinver-500: #314566;
    --color-azulActinver-700: #25344D;

    --color-azulAcompanamiento-100: #708CB6;
    --color-azulAcompanamiento-200: #51709F;
    --color-azulAcompanamiento-300: #3F577B;
    --color-azulAcompanamiento-400: #2C3D57;
    --color-azulAcompanamiento-500: #1A2433;

    --color-azulCategorico-100: #718DBB;
    --color-azulCategorico-300: #3F5984;
    --color-azulCategorico-400: #1D293D;
    --color-azulCategorico-500: #172131;
    --color-azulCategorico-600: #141D2B;
    --color-azulCategorico-700: #0F151F;
    --color-azulCategorico-800: #080A0D;
    --color-azulCategorico-900: #050709;

    --color-azulElectrico-100: #D8E8FF;
    --color-azulElectrico-200: #87B7FA;
    --color-azulElectrico-300: #4B93F8;
    --color-azulElectrico-500: #0F6FF5;
    --color-azulElectrico-700: #0853BB;
    --color-azulElectrico-900: #05377D;

    /*--color-Azul-Grandeza-500: #0A0E12;*/
    --color-azulGrandeza-400: #202D39;
    --color-azulGrandeza-500: #0A0E12;

    --color-Arena-100: #FAF9F5;
    --color-Arena-300: #F7F5F0;
    --color-Arena-500: #F5F2EB;
    --color-Arena-600: #EDE7DB;
    --color-Arena-700: #E8E1D2;
    --color-Arena-800: #DFD6BF;
    --color-Arena-900: #CDBE9B;

    --color-Blanco-500: #FFFFFF;
    --color-Blanco-600: #DFDFDF;
    --color-Blanco-700: #9F9F9F;
    --color-Blanco-800: #808080;
    --color-Blanco-900: #414141;

    --color-grisCategorico-25: #FCFCFC;
    --color-grisCategorico-100: #999999;
    --color-grisCategorico-300: #666666;
    --color-grisCategorico-500: #333333;
    --color-grisCategorico-700: #262626;
    --color-grisCategorico-900: #1A1A1A;

    --color-Gris-200: #FAFAFA;
    --color-Gris-300: #F5F5F5;
    --color-Gris-400: #EFEFEF;
    --color-Gris-500: #B9B9B9;
    --color-Gris-600: #918E8E;
    --color-Gris-700: #5E5A5A;
    --color-Gris-800: #252323;

    --color-Cafe-100: #CAA787;
    --color-Cafe-300: #AD7B4D;
    --color-Cafe-500: #715032;
    --color-Cafe-700: #553C25;
    --color-Cafe-900: #392819;

    --color-cafeLigero-100: #C8BCA5;
    --color-cafeLigero-300: #AD9B78;
    --color-cafeLigero-500: #897753;
    --color-cafeLigero-700: #67593E;
    --color-cafeLigero-900: #453C2A;

    --color-Menta-100: #6DC5B9;
    --color-Menta-300: #3A9286;
    --color-Menta-500: #1D4943;
    --color-Menta-700: #163732;
    --color-Menta-900: #0E2521;

    --color-Violeta-100: #A493B5;
    --color-Violeta-300: #76608D;
    --color-Violeta-500: #493B57;
    --color-Violeta-700: #372C41;
    --color-Violeta-900: #241D2C;

    --color-Rojo-100: #FF8B7D;
    --color-Rojo-300: #FF6E5C;
    --color-Rojo-500: #FF4932;
    --color-Rojo-700: #B21400;
    --color-Rojo-900: #330F0A;

    --color-Verde-100: #9FE894;
    --color-Verde-300: #57EC41;
    --color-Verde-500: #2CCC14;
    --color-Verde-700: #186F0B;
    --color-Verde-900: #0D3D06;

    --color-Amarillo-100: #F9F7BD;
    --color-Amarillo-300: #F9F571;
    --color-Amarillo-500: #E2DB09;
    --color-Amarillo-700: #B5B007;
    --color-Amarillo-900: #575302;

    /* Color */
    --background-general: var(--color-Blanco-500);
    --background-body: var(--color-Gris-200);
    --background-disabled: var(--color-Gris-400);
    --background-overlay: #0A0E12 · 70%;
    --background-successPrimary: var(--color-Verde-500);
    --background-successSecondary: var(--color-Verde-100);
    --background-errorPrimary: var(--color-Rojo-500);
    --background-errorSecondary: var(--color-Rojo-100);
    --background-warningPrimary: var(--color-Amarillo-500);
    --background-warningSecondary: var(--color-Amarillo-100);
    --background-infoPrimary: var(--color-azulElectrico-300);
    --background-infoSecondary: var(--color-azulElectrico-100);

    --background-card-default: var(--color-Blanco-500);
    --background-card-hover: var(--color-Gris-300);

    --background-chip-default: var(--color-Blanco-500);
    --background-chip-hover: var(--color-Gris-300);
    --background-chip-selected: var(--color-azulElectrico-100);

    --background-collapse-default: #FFFFFF · 0%;
    --background-collapse-hover: var(--color-Blanco-500);
    --background-collapse-opened: var(--color-Blanco-500);

    --background-container-default: var(--color-Blanco-500);
    --background-container-hover: var(--color-Gris-300);

    --background-headerTable-default: var(--color-Gris-200);
    --background-headerTable-hover: var(--color-Gris-300);
    --background-headerTable-selected: var(--color-azulElectrico-100);

    --background-input-default: var(--color-Blanco-500);
    --background-input-hover: var(--color-Gris-300);

    --background-itemList-default: var(--color-Blanco-500);
    --background-itemList-hover: var(--color-Gris-300);

    --background-modal-default: var(--color-Blanco-500);
    --background-modal-hover: var(--color-Gris-300);
    --background-modal-selected: var(--color-azulElectrico-100);

    --background-row-default: var(--color-Blanco-500);
    --background-row-hover: var(--color-Gris-300);
    --background-row-selected: var(--color-azulElectrico-100);

    --background-tab-default: var(--color-Blanco-500);
    --background-tab-hover: var(--color-Gris-300);
    --background-tab-selected: var(--color-azulElectrico-100);

    --background-toast-default: var(--color-Blanco-500);
    --background-toast-hover: var(--color-Gris-300);
    --background-toast-selected: var(--color-azulElectrico-100);
    
    --background-tooltip-default: var(--color-azulAcompanamiento-400);
    --background-tooltip-hover: var(--color-Gris-300);
    --background-tooltip-selected: var(--color-azulElectrico-100);

    --chart-secuencial-level_01: #314566;
    --chart-secuencial-level_02: #5A6A85;
    --chart-secuencial-level_03: #838FA3;
    --chart-secuencial-level_04: #ADB5C2;
    --chart-secuencial-level_05: #D6DAE0;
    --chart-secuencial-level_06: #FAF4E8;
    --chart-secuencial-level_07: #EFDDB9;
    --chart-secuencial-level_08: #EBD5AC;
    --chart-secuencial-level_09: #EAD2A1;
    --chart-secuencial-level_10: #E5C78A;

    --chart-categorico-level_01: #314566;
    --chart-categorico-level_02: #E5C78A;
    --chart-categorico-level_03: #317A70;
    --chart-categorico-level_04: #B58657;
    --chart-categorico-level_05: #7A6391;
    --chart-categorico-level_06: #999999;
    --chart-categorico-level_07: #1D293D;
    --chart-categorico-level_08: #897753;
    --chart-categorico-level_09: #1D4943;
    --chart-categorico-level_10: #715032;
    --chart-categorico-level_11: #493B57;
    --chart-categorico-level_12: #333333;
    --chart-categorico-level_13: #838FA3;
    --chart-categorico-level_14: #EFDDB9;
    --chart-categorico-level_15: #83AFA9;
    --chart-categorico-level_16: #D3B69A;
    --chart-categorico-level_17: #AFA1BD;
    --chart-categorico-level_18: #CCCCCC;

    --control-default: var(--color-azulElectrico-500);
    --control-off: var(--color-azulElectrico-100);
    --control-disabled: var(--color-Gris-500);

    --icon-primary: var(--color-azulElectrico-500);
    --icon-secondary: var(--color-azulElectrico-100);
    --icon-tertiary: var(--color-Gris-700);
    --icon-strong: var(--color-azulElectrico-700);
    --icon-inverted: var(--color-Blanco-500);
    --icon-disabled: var(--color-Gris-500);
    --icon-emphasys: var(--color-Gris-800);
    --icon-success: var(--color-Verde-500);
    --icon-error: var(--color-Rojo-500);
    --icon-info: var(--color-azulElectrico-300);
    --icon-warning: var(--color-Amamrillo-500);

    --interaction-primary-default: var(--color-azulElectrico-500);
    --interaction-primary-hover: var(--color-azulElectrico-700);
    --interaction-primary-pressed: var(--color-azulElectrico-900);
    --interaction-primary-disabled: var(--color-Gris-500);
    --interaction-primary-accent: var(--color-azulElectrico-100);
    --interaction-primary-content: var(--color-Blanco-500);

    --interaction-secondary-default: var(--color-azulElectrico-300);
    --interaction-secondary-hover: var(--color-azulElectrico-200);
    --interaction-secondary-pressed: var(--color-azulElectrico-300);
    --interaction-secondary-disabled: var(--color-Gris-400);
    --interaction-secondary-accent: var(--color-azulElectrico-100);
    --interaction-secondary-content: var(--color-azulElectrico-700);
    --interaction-secondary-content-white: var(--color-Blanco-500);

    --interaction-tertiary-default: var(--color-azulElectrico-500);
    --interaction-tertiary-hover: var(--color-azulElectrico-700);
    --interaction-tertiary-pressed: var(--color-azulElectrico-900);
    --interaction-tertiary-disabled: var(--color-Gris-500);

    --stroke-default: var(--color-Gris-400);
    --stroke-disabled: var(--color-Gris-300);
    --stroke-primary: var(--color-azulElectrico-500);
    --stroke-secondary: var(--color-azulElectrico-700);
    --stroke-tertiary: var(--color-Gris-500);
    --stroke-decoration: var(--color-Arena-900);
    --stroke-success: var(--color-Verde-500);
    --stroke-error: var(--color-Rojo-500);
    --stroke-info: var(--color-azulElectrico-300);
    --stroke-warning: var(--color-Amarillo-500);

    --text-general-title: var(--color-Azul-Grandeza-500);
    --text-general-emphasys: var(--color-Gris-800);
    --text-general-body: var(--color-Gris-700);
    --text-general-legal: var(--color-Gris-600);
    --text-general-disabled: var(--color-Gris-500);
    --text-general-inverted: var(--color-Blanco-500);
    --text-general-action: var(--color-Azul-Electrico-500);
    --text-general-actionDisabled: var(--color-Azul-Electrico-100);
    --text-general-strong: var(--color-Azul-Electrico-700);
    --text-general-success: var(--color-Verde-500);
    --text-general-error: var(--color-Rojo-500);
    --text-general-info: var(--color-Azul-Electrico-500);
    --text-general-warning: var(--color-Amarillo-500);

    --text-link-default: var(--color-Azul-Electrico-500);
    --text-link-hover: var(--color-Azul-Electrico-700);
    --text-link-pressed: var(--color-Azul-Electrico-900);
    --text-link-visited: var(--color-Azul-Electrico-900);
    --text-link-focused: var(--color-Azul-Electrico-500);
    --text-link-inverted: var(--color-Blanco-500);
    --text-link-disabled: var(--color-Gris-500);

    /* Numbers */
    --viewports-viewportSize: 1440px; /* Checar en maqueta */

    --border-radius-none: 0;
    --border-radius-xxs: 4px;
    --border-radius-xs: 8px;
    --border-radius-s: 16px;
    --border-radius-m: 24px;
    --border-radius-l: 32px;
    --border-radius-xl: 80px;
    --border-radius-full: 500px;

    --spacing-1: 2px;
    --spacing-2: 4px;
    --spacing-3: 6px;
    --spacing-4: 8px;
    --spacing-5: 12px;
    --spacing-6: 16px;
    --spacing-7: 24px;
    --spacing-8: 32px;
    --spacing-9: 40px;
    --spacing-10: 48px;
    --spacing-11: 56px;
    --spacing-12: 64px;
    --spacing-13: 72px;
    --spacing-14: 80px;

    --stroke-thin: 1px;
    --stroke-thick: 2px;
    --stroke-thicker: 4px;
    --stroke-thickest: 6px;
}

/* Elementos HTML */
body {
    font-family: var(--family-body, "Open");
    color: var(--text-general-body);
    /*font-size: var(--font-size-body1, 18px);
    line-height: var(--font-lineHeight-body1, 16px);*/
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-primary, "Poppins");
    font-style: normal;
}
h1 {
    font-size: var(--font-size-h1);
    line-height: var(--font-lineHeight-h1);
}
h2 {
    font-size: var(--font-size-h2);
    line-height: var(--font-lineHeight-h2);
}
h3 {
    font-size: var(--font-size-h3);
    line-height: var(--font-lineHeight-h3);
}
h4 {
    font-size: var(--font-size-h4);
    line-height: var(--font-lineHeight-h4);
}
h5 {
    font-size: var(--font-size-h5);
    line-height: var(--font-lineHeight-h5);
}
h6 {
    font-size: var(--font-size-h6);
    line-height: var(--font-lineHeight-h6);
}
p {
    font-family: var(--font-family-secondary, "Open Sans");
    font-weight: 400;
    font-style: normal;
    line-height: var(--font-lineHeight-body3, 20px);
}

/*## ###############################################################################
## Tablet (min-width: 376px) and (max-width: 768px)
## ###############################################################################*/
@media (min-width: 376px) and (max-width: 768px) {
    :root {
        --font-size-display: 72px;
        --font-size-h1: 56px;
        --font-size-h2: 48px;
        --font-size-h3: 40px;
        --font-size-h4: 24px;    
        --font-size-h5: 20px;
        --font-size-h6: 18px;
        --font-size-body1: 18px;
        --font-size-body2: 16px;
        --font-size-body3: 14px;
        --font-size-legal: 12px;
        --font-size-caption: 10px;
        --font-size-overline: 8px;

        --font-lineHeight-display: 80px;
        --font-lineHeight-h1: 64px;
        --font-lineHeight-h2: 56px;
        --font-lineHeight-h3: 48px;
        --font-lineHeight-h4: 32px;
        --font-lineHeight-h5: 28px;
        --font-lineHeight-h6: 26px;

        --viewports-viewportSize: 768px;

        --spacing-1: 4px;
        --spacing-2: 4px;
        --spacing-3: 6px;
        --spacing-4: 8px;
        --spacing-5: 12px;
        --spacing-6: 16px;
        --spacing-7: 24px;
        --spacing-8: 32px;
        --spacing-9: 32px;
        --spacing-10: 40px;
        --spacing-11: 48px;
        --spacing-12: 56px;
        --spacing-13: 64px;
        --spacing-14: 72px;

        --stroke-thicker: 3px;
        --stroke-thickest: 4px;
    }
}

/*## ###############################################################################
## Mobile ( max: 375 )
## ###############################################################################*/
@media only screen and (max-width: 375px) {
    :root {
        --font-size-display: 56px;
        --font-size-h1: 40px;
        --font-size-h2: 36px;
        --font-size-h3: 32px;
        --font-size-h4: 20px;    
        --font-size-h5: 18px;
        --font-size-h6: 16px;

        --font-lineHeight-display: 64px;
        --font-lineHeight-h1: 48px;
        --font-lineHeight-h2: 44px;
        --font-lineHeight-h3: 40px;
        --font-lineHeight-h4: 28px;
        --font-lineHeight-h5: 26px;
        --font-lineHeight-h6: 24px;

        --viewports-viewportSize: 375px;

        --spacing-9: 24px;
        --spacing-10: 32px;
        --spacing-11: 40px;
        --spacing-12: 48px;
        --spacing-13: 56px;
        --spacing-14: 64px;

        --stroke-thicker: 3px;
        --stroke-thickest: 4px;
    }
}

/*## ###############################################################################
## Mobile xs ( max: 375 )
## ###############################################################################*/
/*@media only screen and (max-width: 576px) {
    :root {
        --size-display: 40px;
        --size-h1: 32px;
        --size-h2: 28px;
        --size-h3: 24px;
        --size-h4: 18px;    
        --size-h5: 16px;
        --size-h6: 14px;
        --font-size-body1: 16px;
        --font-size-body2: 14px;
        --font-size-body3: 12px;
        --font-size-legal: 10px;
        --font-size-caption: 8px;
        --font-size-overline: 6px;
        
        --font-lineHeight-display: 48px;
        --font-lineHeight-h1: 40px;
        --font-lineHeight-h2: 36px;
        --font-lineHeight-h3: 32px;
        --font-lineHeight-h4: 26px;
        --font-lineHeight-h5: 24px;
        --font-lineHeight-h6: 24px;
        --font-lineHeight-body1: 24px;
        --font-lineHeight-body2: 20px;
        --font-lineHeight-body3: 18px;
        --font-lineHeight-legal: 16px;
        --font-lineHeight-caption: 12px;
        --font-lineHeight-overline: 10px;

        --spacing-9: 24px;
        --spacing-10: 32px;
        --spacing-11: 40px;
        --spacing-12: 48px;
        --spacing-13: 56px;
        --spacing-14: 64px;

        --stroke-thicker: 3px;
        --stroke-thickest: 4px;
    }
}*/