/* --- Reset --- */

html, body {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

* {
    box-sizing: inherit;

    margin: 0;
    padding: 0;
    border: none;
    background: none;

    font: inherit;
    font-size: 100%;
    line-height: inherit;
    text-decoration: inherit;
    color: inherit;

    text-align: inherit;
    vertical-align: baseline;
}

*::placeholder {
    opacity: 1;
}

*:focus {
    outline: 0;
}

/* --- Variables and defaults --- */

:root {
    /* Colores del design system https://www.figma.com/file/ywB38nVKWcP6H1QZWZMPux/Suite-%2F-Design-System */
    --noche-normal: #151F2F;
    --eol-normal: #1556FF;
    --fondo-normal: #E5E8F7;
    --rojo-normal: #F5003B;
    --verde-normal: #51C6A1;
    --gris-normal: #7987A4;
    --gris-oscuro: #4C5A75;
}

body {
    font-family: Poppins, Verdana, Geneva, Tahoma, sans-serif;
    color: var(--noche-normal);
}

b { font-weight: 600; }


*:focus-visible {
    outline: 2px solid var(--eol-normal);
}

/* --- Utility classes --- */

.flex-row {
    display: flex;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.full-width {
    width: 100%;
}

/* --- Design system's typography variants --- */

.typography-h4 {
    font-size: 18px;
    line-height: 24px; 
    font-weight: 600;
}

.typography-caption {
    font-size: 11px;
    line-height: 16px;
}

/* --- Design system's filled input --- */

.form-field--filled {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-field--filled label {
    font-size: 13px;
    font-weight: 600;
    line-height: 16px; 
}

.form-field--filled input {
    border-radius: 8px;
    background: var(--fondo-normal);
    padding: 7px 15px;
    border: 1px solid var(--fondo-normal);
    font-size: 14px;
    line-height: 32px;
}

.form-field--filled input[aria-invalid] {
    border-color: var(--rojo-normal);
}

.form-field--filled [id$="-error"] {
    color: var(--rojo-normal);
    font-size: 11px;
    line-height: 16px; 
}

/* --- Design system's checkbox (without the svg) --- */

.checkbox-field {
    display: flex;
    gap: 8px;
    align-items: center;

    font-size: 14px;
    line-height: 24px;
}

/* --- Design system's level 1 button (without icon) --- */

.button--level1 {
    background-color: var(--noche-normal);
    color: white;
    border-radius: 50px;
    padding: 16px;
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
    text-align: center;
}

/* --- Footer link --- */

.underlined-gray-link {
    text-decoration: underline;
}

.underlined-gray-link:hover, .underlined-gray-link:focus, .underlined-gray-link:active {
    color: var(--gris-oscuro);
}