:root {
    --fsizes-title: 3rem;
    --fsizes-bigger: 2rem;
    --fsizes-big: 1.5rem;
    --fsizes-medium: 1.25rem;
    --fsizes-normal: 1rem;
    --fsizes-small: 0.85rem;
    --fsizes-micro: 0.75rem; 
    --var-shadow: 0 0.25rem 0.5rem 0 rgba(138, 138, 138, 0.5);

    /* 50 */
    --color-gris-1: #f5f9fa;
    /* 100 */
    /* --color-gris-2: #ebf2f3; */
    --color-gris-2: #e5eded; 
    /* 200 */
    /* --color-gris-3: #dee7e7; */
    --color-gris-3: #d2e3e5;
    /* 300 */
    /* --color-gris-4: #cdd5d5; */
    --color-gris-4: #9bc3c7;
    /* 400 */
    /* --color-gris-5: #aaafaf; */
    --color-gris-5: #7cb0b4;
    
    /* 50 */
    --color-azul-1: #edfefe; 
    /* 100 */
    --color-azul-2: #d2fbfb; 
    /* 300 */
    --color-azul-3: #70eaf0; 
    /* 700 */
    /* --color-azul-4: #167788;  */
    --color-azul-4: #1b616f;
    /* 950 */
    --color-azul-5: #0c3540;
    /* 500 */
    --color-primario: #13b9c7;


    /* Colores mensajes */
    --color-success: #4eb42a;
    --bgcolor-success: rgba(175, 232, 175, 0.5);

    --color-fail: #b42a2a;
    --bgcolor-fail: rgba(244, 182, 182, 0.5);

    --color-flag: #0c3540;
    --bgcolor-flag: rgba(182, 229, 244, 0.5);

    --color-warning: #b4af2a;
    --bgcolor-warning: rgba(242, 242, 191, 0.5);

    --color-alert: #00c0ff;
    --color-done: #d58011;
    --color-rojo: rgb(255, 0, 68);
    --color-verde: rgb(139, 228, 4);
    --color-azul: rgb(242, 11, 38);
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    /* Browser? */
    /* -webkit-transition-duration: 0.4s; */
    /* Safari */
    /* transition-duration: 0.4s; */
}

html {
    font-size: 16px; 
}

@media screen and (max-width: 1440px) {
    html {
        font-size: 14px;
    }
}

@media screen and (max-width: 1024px) {
    html {
        font-size: 12px;
    }
}

html,
body {
    padding: 0;
    margin: 0;
    background-color: var(--color-gris-2);
    font-size: var(--fsizes-normal);
    overflow-x: hidden;
    /* height: 100%;  */
}
/* @media screen and (max-width: 1024px) {
    html,
    body {
        height: auto;
    }
} */ 
body, 
body::-webkit-scrollbar { 
    scrollbar-color: var(--color-primario) var(--color-azul-2); 
    /* scrollbar-color: var(--color-primario) var(--color-azul-4); */
    scrollbar-width: thin; 
    scrollbar-gutter: stable both-edges; 
} 
body::-webkit-scrollbar-track {
    background: var(--color-azul-3);
    scrollbar-width: thin;
    scrollbar-gutter: stable both-edges; 
} 
body::-webkit-scrollbar-thumb {
    background-color: var(--color-azul-2);
    scrollbar-width: thin;
    scrollbar-gutter: stable both-edges; 
} 
body,
main,
section,
article,
div,
figure,
picture,
img,
h1,
h2,
h3,
h4,
h5,
p,
a,
i,
b,
span,
label,
form,
input,
select,
textarea,
button,
ol,
ol li,
ul,
ul li,
li,
footer {
    font-family: "Poppins", sans-serif;
    color: var(--color-azul-5);
    font-optical-sizing: auto;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    word-wrap: break-word;
    /* word-break: break-all; */
}

h1,
h2,
h3,
h4,
h5 {
    font-weight: 400;
    margin-bottom: 2rem;
}

h1.center,
h2.center,
h3.center,
h4.center {
    text-align: center;
}

h1.upper,
h2.upper,
h3.upper,
h4.upper {
    text-transform: uppercase;
}

/* H1 */ 
/* , .flex */
h1 {
    font-size: 3rem;
    line-height: 3rem;
} 
@media screen and (max-width: 1024px) { 
    h1, .h1 {
        font-size: 2.75rem;
        line-height: 2.75rem;
    } 
} 

/* H2 */ 
h2, .h2 {
    font-size: 2rem;
    line-height: 2rem; 
    /* background-color: rgba(125, 200, 250, 0.5);  */
}
@media screen and (max-width: 1024px) { 
    h2, .h2 {
        font-size: 1.75rem;
        line-height: 1.75rem;
    } 
}
/* h2 {
    margin-bottom: 4rem;
} */
@media screen and (max-width: 1024px) { 
    h2 {
        margin-bottom: 2rem;
    }
}

/* H3 */ 
h3, .h3, h3 b, .h3  b {
    font-size: 1.75rem;
    line-height: 1.75rem;
    letter-spacing: 1px; 
} 
h3, .h3 { 
    font-weight: 200; 
}
h3 b, .h3 b {
    font-weight: 400; 
}
h3.color-gris-2 b, .h3.color-gris-2 b{ 
    color:var(--color-gris-2); 
}
@media screen and (max-width: 1024px) { 
    h3, .h3, h3 b, .h3 b  {
        font-size: 1.5rem;
        line-height: 1.5rem;
    } 
}
h3#titleAsistencia{
    text-transform: uppercase;
}

@media screen and (max-width: 1024px) { 
    h3#titleAsistencia{
        font-size:var(--fsizes-medium);
        line-height:var(--fsizes-medium);
    }
}
@media screen and (max-width: 768px) { 
    h3#titleAsistencia{
        font-size:var(--fsizes-normal);
        line-height:var(--fsizes-normal);
        font-weight: 400;
    }
}

/* H4 */ 
h4, .h4 {
    font-size: 1.5rem;
    line-height: 1.5rem;
    font-weight: 200;
} 
@media screen and (max-width: 1024px) { 
    h4, .h4 {
        font-size: 1.25rem;
        line-height: 1.25rem;
        text-transform: uppercase;
    } 
}

/* H5 */ 
h5, .h5, h5 b {
    font-size: 1.25rem;
    line-height: 1.25rem;
    color: var(--color-azul-4);
    /*  
    font-weight: 300; 
    font-style: italic;
    */ 
}
@media screen and (max-width: 1024px) { 
    h5, .h5, h5 b {
        font-size: 1.12rem;
        line-height: 1.12rem;
    } 
} 

/* CLASES DE H1-H5 */
.h1, .h2, .h3, .h4, .h5{
    background-color: yellow !important; 
    color:red !important; 
} 

/* A HREF */ 
a {
    color: var(--color-primario);
    text-decoration: none;
}

/* P */ 
p a:hover {
    text-decoration: none;
    border-top: 1px solid var(--color-azul-5);
    border-bottom: 1px solid var(--color-azul-5);
}
p {
    font-size: 1rem;
}
p b, b {
    font-weight: 600;
}
p.big{
    font-size: 1.25rem;
    font-weight:300;
}
@media screen and (max-width: 1024px) {  
    p.big{
        font-size:1.25rem;
    }
}
p.alert-required-inputs{ 
    font-size: var(--fsizes-small); 
    color:var(--color-azul-4);
    font-style: italic;
    font-weight: 500; 
    margin: 0 auto 1rem auto;
    text-align: left;
}

p.alert-required-inputs:after{
    content:'Todos los campos con "*" son obligatorios.';
}



/* FIGURE */ 
figure {
    display: flex;
    align-items: center;
    justify-content: center;
}
figure img {
    /*  
    width: 65%;  
    */ 
    height: auto; 
    /* border:1px solid green;  */
}
figure,
figure img,
img,
a img {
    border: 0;
    line-height: 0;
}



/*** 
**** MAIN ****
***/

main {
    width: 100%;
    height: auto;
    margin: 0 auto;
    /* padding: 7rem 2rem 2rem 8rem; */
    padding: 7rem 2rem 2rem 7rem;
}

main.no-padding {
    background-color: pink;
    padding: 0;
}

main.center {
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 4rem 2rem 2rem 2rem;
}

@media screen and (max-width: 1024px) { 
    /* 
    main {
        padding: 6rem 2rem 2rem 2rem;
        border:1px solid red; 
    }  
    */
    main {
        padding: 6rem 0 2rem 0;
        width: 92%;
    }
}

section {
    padding: 2rem;
    background-color: var(--color-gris-1);
    /* margin-top: 2rem;
    margin-bottom: 2rem; */
    margin-bottom: 4rem;
    border-radius: 1rem;
}

section.no-padding {
    padding: 0;
}

section.no-color {
    background-color: transparent;
}

section.outline {
    border: 1px solid var(--color-gris-3);
}
section.section-breadcrumbs{
    margin-bottom: 2rem;
}
section.forbidden{
    background-color: var(--bgcolor-fail); 
    color: var(--color-fail); 
    font-size:var(--fsizes-medium);
}
section.forbidden::after{
    content:" No tienes permiso para acceder a esta sección.";
}


/*
*************************************************
Clases genericas 
**************************************************
*/

ul.no-style,
ul.no-style li {
    list-style: none;
    list-style-type: none;
}

.pointer {
    cursor: pointer;
}

.block {
    display: block;
}

.hr {
    height: 1px;
    border-left: 0;
    border-right: 0;
    border-top: 1px solid var(--color-gris-3);
    border-bottom: 0;
}


div.box-scroll-x { 
    width: 100%; 
    padding:0 0 2rem 0; 
    min-height: 20rem;
    overflow: scroll;
    scrollbar-color: var(--color-azul-5) var(--color-gris-3);
    scrollbar-width: thin; 
    scrollbar-gutter: stable both-edges;   
    /*
    height: auto;
    overflow-x: auto;
    scrollbar-gutter: stable both-edges;   
    */
    /* border-right: 1px dotted var(--color-gris-3); */  
} 

div.box-scroll-x.limit-height{ 
    max-height: 35rem;
}




@media screen and (max-width: 1024px) {
    .mobile-none {
        display: none !important;
    }
}
@media screen and (min-width: 1024px) {
    .desktop-none {
        display: none !important;
    }
}

.flex {
    display: flex;
    flex-wrap: wrap;
}
/* Para UIKIT */
.flex.gap {
    gap: 2rem;
}
.flex.gap-1 {
    gap: 1rem;
}

.block-line {
    /* background-color: rgba(10, 10, 10, 0.025); */
    /* background-color: rgba(13, 105, 162, 0.025);  */
    /* background-color: rgba(#7cb0b4, 0.7);  */
    margin: 0 auto; 
    margin-bottom:5rem; 
    border-radius: 3rem;
}
.block-line.w-half{
    width: 20%;
    min-width: 10rem;
    margin:0 auto; 
}
.block-line.w-75{
    width: 75%;
    min-width: 10rem;
    margin:0 auto; 
}
@media screen and (max-width: 1024px) { 
    .block-line.w-half{
        width: 100%;
    }
    .block-line.w-75{
        width: 100%;
    }
}
.block-line.bl-flex {  
    text-align: right; 
    display: flex; 
    align-items: flex-end;  
    justify-content: flex-end;  
    gap:0.5rem;
}
.block-line.hide{
    display: none;
}



/* Bloque Flex lineal */ 
.block-flex-line{
    display: flex;
    align-items: flex-start; 
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap:1rem;
    width: 100%; 
}
@media screen and (max-width: 1024px) { 
    .block-flex-line{ 
        flex-wrap: wrap;
    }
} 
.block-flex-line.justify-content-end{
    justify-content: flex-end !important;
}
.block-flex-line.align-items-stretch{
    align-items: stretch !important;
}
.block-flex-line.justify-content-space-between{
    justify-content: space-between;
}





.block-title{
    width: 100%;
    display: flex; 
    align-items: center;
    justify-content: space-between;
}
.block-title h2{
    margin:0;
}
@media screen and (max-width: 768px) { 
    .block-title{
       flex-direction:column-reverse; 
    }
    .block-title h2, 
    .block-title .block-line{ 
        width: 100%;
    }
    .block-title h2{ 
        margin-top:2rem;
    }
    .block-title.mb-2{
        margin-bottom: 1rem;
    }
}




.ul-kit-list-components{
    padding-left:2rem;
}
.ul-kit-list-components li{
    margin-bottom: 0.5rem;
    font-size: var(--fsizes-medium);
}
/* FIN - Para UIKIT */

.align-items-start {
    align-items: flex-start;
}

.align-items-center {
    align-items: center;
}

.align-items-end {
    align-items: flex-end;
}

.justify-content-start {
    justify-content: flex-start;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-end {
    justify-content: flex-end;
}

.justify-content-between {
    justify-content: space-between;
}


.ui-autocomplete {
    max-height: 350px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    max-width:40vw !important; 
}
@media screen and (max-width: 1024px) {
    .ui-autocomplete {
        max-width:88vw !important; 
    }
}

/* 
table{
    padding:0;
    margin:0;
    border:1px solid var(--color-gris-3);
    border-right: 0;
    border-bottom: 0; 
    border-radius: 1rem;
} 

table td, 
table th{
    border-right:1px solid var(--color-gris-3);
    border-bottom:1px solid var(--color-gris-3);
    padding:1rem;
}

table tr th:last-child{
    border-radius: 0 1rem 0 0;
}
table tr td:first-child{
    border-radius: 0 0 0 1rem ;
}
table tr td:last-child{
    border-radius: 0 0 1rem  0;
}
*/