﻿html {
    box-sizing:border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    margin: 0;
    background-color: #fff!important;
    font-family: 'Roboto', sans-serif;
    line-height: 1.5;
}

body > footer {
position: sticky;
top: 100vh;
    }  



:root {
--font-color:#000;
--padding-btn: 0.3rem 1.8rem;
--yellow:#FFD803;
--blue:#0063AF;
--gris:#ccc;
--font-family-titles:  "Roboto Slab", serif;
--font-family-main: "Roboto", sans-serif;
--font-size-p:1rem;
--font-size-h1: 2rem;
--font-size-small:0.8rem;
--border-radius-btn:40px;
--border-main-btn:none;
--padding-boxes: 14px 14px;
--padding-p:10px 0;
--margin-btn: 6px 0;
}        


/*HEADING*/

h1, h2, h3, h4 {
    font-family: var(--font-family-titles);
}

h1 {
    font-size: var(--font-size-h1);
    color: var(--font-color);
    font-weight: 700;
}

/*BOTONES*/


button.btn-blue_01 {
    background-color: var(--blue);
    color: #fff;
    font-size: var(--font-size-p);
    border-radius: var(--border-radius-btn);
    padding: var(--padding-btn);
    border: var(--border-main-btn);
    position: relative;
    margin: var(--margin-btn);
}

button.btn-blue_01::after {
    content: ''; /* Agrega contenido al pseudo-elemento */
    position: absolute; /* Posiciona el pseudo-elemento absolutamente */
    left: 14px; /* Ajusta la posición del pseudo-elemento */
    bottom: 5px; /* Ajusta la posición del pseudo-elemento */
    width: 73%; /* Ancho completo */
    height: 1px; /* Grosor del subrayado */
    background-color: transparent; /* Color del subrayado (transparente por defecto) */
    transition:  0.3s; /* Transición suave del color del subrayado */
}

button.btn-blue_01:hover::after {
    background-color: var(--yellow); /* Cambia el color del subrayado al hacer hover */
}



button.btn-blue_02 {
    background-color: var(--blue);
    color: #fff;
    font-size: var(--font-size-p);
    border-radius: var(--border-radius-btn);
    padding: var(--padding-btn);
    border: var(--border-main-btn);
    position: relative;
    background-image: url(images/icon_arrow_btn_postular.svg);
    background-repeat: no-repeat;
    background-position: 89% 50%;
    background-size: 10px 10px;  
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: inline-block;  
}


button.btn-blue_02:hover {
    background-color: var(--yellow);
    background-image: url(images/icon_arrow_btn_postular_hover.svg);
    background-repeat: no-repeat;
    background-position: 89% 50%;
    background-size: 10px 10px;
    color: var(--font-color);       
    transition: all 0.35s;

}


button.btn-blue_03 {
    background-color: white;
    color: var(--font-color);
    font-size: var(--font-size-p);
    border-radius: var(--border-radius-btn);
    padding: var(--padding-btn);
    border: 1px solid var(--font-color);
    position: relative;

}
button.btn-blue_03:hover {
    background-color:var(--gris);
    color: var(--font-color);
}

/*button.btn-blue_02::after {
    content: "";
    background: var(--yellow);  color de fondo hover 
    position: absolute;
    z-index: -1;
    display: block;
    top: 0;
    bottom: 0;
    left: 100%;
    right: -100%;
    -webkit-transition: all 0.35s;
    transition: all 0.35s;

}
button.btn-blue_02:hover::after {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    -webkit-transition: all 0.35s;
    transition: all 0.35s;
    
  }*/


    
/*BOTONES*/



/*TAB INICIO*/

.tab-content.tab-container {
padding: 1.8rem 0;
max-width: 1280px;
margin: 0 auto;
background-color:var(--gris);
}

ul.nav.nav-tabs.module-tabs-inicio{
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center; /* Centra horizontalmente los elementos */
}


.nav-tabs .nav-link.module-tabs-inicio  {
color: var(--font-color);
font-size: 1.2rem;
margin: 0 4px;
padding: 11px 22px;
border: 1px solid #594343;
border-bottom: none;

}

.tab-inicio-w100{
    background-color: var(--gris);
    width: 100%;
}

.nav-tabs .nav-link.module-tabs-inicio.active  {
    background-color: #ccc!important;
}

/*TAB INICIO ASESORIA CDN*/
.container-boxes-cdn {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(
            306px,
            1fr
        )
    );
    gap: 20px;
    word-wrap: break-word;
    word-break: break-all;
}

.container-boxes-cdn .box-item-cdn {
    background-color: #fff;
    border-radius: 5px;
    padding: var(--padding-boxes);
}

.container-boxes-cdn .box-item-cdn p {
    padding: 0;
    margin: 0 0 0 10px;
    font-size: 1rem;
    color: var(--font-color);
}

.container-boxes-cdn .box-item-cdn h2 {
    padding: 0;
    margin: 0 0 0 10px;
    font-size: 1.1rem;
    font-family: var(--font-family-main);
    color: var(--font-color);
    font-weight: 500;
    word-break: break-word;
}

/*TAB INICIO ASESORIA CDN*/

/*TAB INICIO POSTULACIONES*/

.box-item-postulaciones {
    background-color: white;
    border-left: 6px solid var(--blue);
    padding: var(--padding-boxes);
    display: flex;
    gap: 30px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 0 20px 0;
}
.box-item-postulaciones a {
    color:var(--font-color);
    text-decoration: none;
    padding: var(--padding-p);
    display: block;
    font-weight: 700;
}

.box-item-postulaciones a:hover {
    color:var(--font-color);
    text-decoration: underline;
}

.box-item-postulaciones p {
    padding: 0 0.4rem 0 0.2rem ;
}

/*TAB INICIO POSTULACIONES*/


.container-titulo {
    max-width: 1140px;
    margin:28px auto;
    display: flex;
    gap: 20px;
    align-content: center;
    justify-content: center;
}

.form-switch .form-check-input {
    height: 24px;
    width: 48px;
}
.form-switch .form-check-input:focus {
    border-color: rgba(0, 0, 0, 0.25);
    outline: 0;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(102,102,102,1)'/></svg>");
}
.form-switch .form-check-input:checked {
    background-color: var(--yellow);
    border-color: var(--yellow);
    border: none;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255,255,255,1.0)'/></svg>");
}


