@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap');
html {
    font-size: 16px;
}

body{
    font-family: 'DM Sans', sans-serif;
	min-width: 358px;
	
}

* {
    box-sizing: border-box;
}

/* Variables de color*/

:root {

    /* Primario */

    --P50: #fef9e8;
    --P100: #fffec2;
    --P200: #fff987;
    --P300: #ffee43;
    --P400: #ffde16;
    --P500: #efc403;
    --P600: #ce9800;
    --P700: #a46c04;
    --P800: #88540b;
    --P900: #734510;
    --P950: #432405;

    /* Shark */

    --S50: #f5f6f6;
    --S100: #e5e8e8;
    --S200: #cdd2d4;
    --S300: #aab3b6;
    --S400: #808c90;
    --S500: #657175;
    --S600: #565f64;
    --S700: #4a5154;
    --S800: #414649;
    --S900: #393d40;
    --S950: #26292b;


    /* Error */

    --error50: #fef2f2;
    --error100: #fde3e3;
    --error200: #fdcbcb;
    --error300: #faa7a7;
    --error400: #f46a6a;
    --error500: #eb4848;
    --error600: #d82a2a;
    --error700: #b52020;
    --error800: #961e1e;
    --error900: #7d1f1f;
    --error950: #440b0b;

    /* Exito */
    --exito50: #f0fdf5;
    --exito100: #dcfce8;
    --exito200: #bbf7d1;
    --exito300: #86efad;
    --exito400: #4ade80;
    --exito500: #22c55e;
    --exito600: #16a34a;
    --exito700: #15803c;
    --exito800: #166533;
    --exito900: #14532b;
    --exito950: #052e14;

    /* Alerta */

    --alerta50: #fef9e8;
    --alerta100: #fef0c3;
    --alerta200: #fee28a;
    --alerta300: #fdd147;
    --alerta400: #fac215;
    --alerta500: #eab308;
    --alerta600: #ca9a04;
    --alerta700: #a17c07;
    --alerta800: #85680e;
    --alerta900: #715a12;
    --alerta950: #423306;

    /* Información */

    --info50: #f0faff;
    --info100: #e0f5fe;
    --info200: #bae8fd;
    --info300: #7dd5fc;
    --info400: #38bcf8;
    --info500: #0ea5e9;
    --info600: #028ac7;
    --info700: #0370a1;
    --info800: #075e85;
    --info900: #0c506e;
    --info950: #083549;

    /* Variables de espacio */

    --medida8: 0.5rem;
    --medida12: 0.75rem;
    --medida16: 1rem;
    --medida20: 1.25rem;
    --medida24: 1.5rem;
    --medida28: 1.75rem;
    --medida32: 2rem;
    --medida36: 2.25rem;
    --medida40: 2.5rem;
    --medida44: 2.75rem;
    --medida48: 3rem;
    --medida52: 3.25rem;
    --medida56: 3.5rem;

    /* Variables de bordes radius */
    --radiusSm: 0.25rem;
    --radiusMd: 0.5rem;
    --radiusLg: 0.75rem;
}

/* Textos */

h1, h2, h3, h4{
    color: var(--S900);
}
span, label, p, small{
    color: var(--S950);
}

h1 {
    font-size: 2rem;
    line-height: 2.75rem;
    font-weight: 600;
}
h2 {
    font-size: 1.75;
    line-height: 2.25rem;
    font-weight: 600;
}
h3 {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 600;
}
h4 {
    font-size: 1rem;
    line-height: 1.25rem;
    font-weight: 600;
}
/*span{
    font-size: 1rem;
    line-height: 1.75rem;
    font-weight: 400;
}*/
label{
    font-size: 1rem;
    line-height: 1.75rem;
    font-weight: 400;
}
p{
    font-size: 1rem;
    line-height: 1.75rem;
    font-weight: 400;
    margin: 0rem;
}
small{
    font-size: 0.75rem;
    line-height: 1.25rem;
    font-weight: 400;
}
i{
    font-size: var(--medida24);
}
.link{
    color: var(--S900);
    text-decoration: none;
}
.link:hover{
    text-decoration: underline;
}
.link--strong{
    font-weight: 600;
}
.relative { position:relative;}


/* Scroll */
::-webkit-scrollbar {
    width: 9px;
}
::-webkit-scrollbar-track {
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #d5d6d9;
}

/* Clases adicionales */

.dBlock{
    display: block;
}