@charset "UTF-8";

/*Estilos Globales para etiquetas*/

body {
    font-family: Lato !important;
}

p {
    font-size: 1rem;
    margin-bottom: 1rem;
}

input,textarea{
    font-size:1rem;
}


@media screen and (min-width: 768px) {
    p {
        font-size: 1.3rem;
    }

    ul li {
        font-size: 1.3rem;
    }

    input, textarea {
        font-size: 1.3rem;
    }
}

table th, td {
    font-size: 1.3rem !important;
}

.movil {
    display: none;
}

@media screen and (max-width: 767px) {
    .movil {
        display: block;
    }

    .escritorio {
        display: none;
    }

    table th, td {
        font-size: 1rem !important;
    }
}



/*Estilos Globales para etiquetas*/

/*Estilos para elementos globales*/
/****************BOT�N DE IR A INICIO****************/
#myBtnArriba {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 1px;
    z-index: 99;
    outline: none;
    background-color: transparent;
    color: white;
    cursor: pointer;
    padding: 0 15px 0 0;
    border-radius: 40px;
    bottom: 115px;
}

@media screen and (max-width: 767px) {
    #myBtnArriba {
        padding: 0 5px 0 0;
        bottom: 10px;
    }
}

/****************BOT�N DE IR A INICIO****************/


/*Estilos para elementos globales*/
.btn {
    text-transform: none !important;
    font-size:1rem !important;
}

@media screen and (min-width: 768px) {
    .btn {
        font-size: 1.3rem !important;
    }    
}


.seccion--con-fondo {
    padding-top: 2rem !important;
}



/* Cuadro bienvenida a m�dulo */
.inicio-modulo {
    width: 100%;
    margin: 1rem 0 2rem 0;
    padding: 20px 30px 5px 30px;
    border-radius: 10px;
    background: -prefix-linear-gradient(top, #459C9A, #5656BF);
    background: linear-gradient(to bottom, #459C9A, #5656BF);
    color: #fff;
}

@media screen and (max-width: 767px) {
    .inicio-modulo {
        padding: 20px 15px 5px 15px;
    }
}

/*Menu interior*/
.con-men-int {
    width: 100%;
    text-align: center;
    margin: 2rem 0 1rem 0;
}

.menu-interior {
    width: 820px;
    margin: 0 auto;
    font-size: 1.3rem;
}

    .menu-interior div {
        width: 180px;
        height: 220px;
        display: inline-block;
        margin: 0 10px;
        text-align: center;
        border-radius: 10px;
        background: #5656BF url("../../images/modulo-a/flechitaabajo.png") no-repeat center 25%;
    }

    .menu-interior a {
        color: #F7D589;
        padding: 90px 0 0 0;
        display: block;
    }

@media screen and (max-width: 991px) {
    .menu-interior {
        width: 665px;
    }

        .menu-interior div {
            width: 143px;
        }
}

@media screen and (max-width: 767px) {
    .menu-interior {
        width: 100%;
        font-size: 1rem;
    }

        .menu-interior div {
            width: 100%;
            height: auto;
            margin: 0;
            text-align: left;
            border-radius: 0;
            background: #5656BF url("../../images/modulo-a/flechitaderecha.png") no-repeat 5px 5px;
            padding-right: 5px;
        }

            .menu-interior div br {
                display: none;
            }

        .menu-interior a {
            padding: 3px 0 5px 27px;
        }
}


@media screen and (max-width: 500px) {
    .inicio-modulo {
        margin: 2rem 0 2rem 0;
    }
}

@media screen and (max-width: 767px) {
    .inicio-modulo {
        padding: 20px 15px 5px 15px;
    }
}

.inicio-modulo {
    width: 100%;
    margin: 1rem 0 2rem 0;
    padding: 20px 30px 5px 30px;
    border-radius: 10px;
    background: -prefix-linear-gradient(top, #459C9A, #5656BF);
    background: linear-gradient(to bottom, #459C9A, #5656BF);
    color: #fff;
}


.contenedor-menu-interior {
    max-width: 920px;
    margin: 2em auto 0;
    font-size: 1.3rem;
    justify-content: center;
}

.colapsador .expandido .btn-colapsar-texto {
    color: #565AD1;
}

.btn-colapsar-texto {
    padding: 0 0.5rem;
    text-align: left;
}

.con-task {
    width: 100%;
    margin: 3rem 0 2rem 0;
    font-size: 1.3rem;
}

.task {
    width: 180px;
    overflow: hidden;
    font-size: 1.3rem;
    border-radius: 23px 0 0 23px;
    border-right: 5px #fff solid;
    background: #d3eda9 url(../../images/modulo-1/PNG/INGLES2-M1_TASK.png) no-repeat 0 0;
    position: relative;
    display: inline-block;
    height: 50px;
    color: #5656BF;
    padding-left: 58px;
    background-size: 50px;
}

.text-task {
    display: inline-block;
    font-size: 1.3rem;
    overflow: hidden;
    line-height: 26px;
    min-height: 50px;
    color: #5656BF;
    padding: 0px 0 0 10px;
    border-left: 5px #5656BF solid;
}

@media screen and (max-width: 767px) {
    .con-task, .task, .text-task {
        font-size: 1rem;
    }
}


.pestana {
    width: 300px;
    background-color: #5656BF;
    color: #fff;
    border-radius: 10px 10px 0 0;
    font-weight: bolder;
    padding: 10px 10px;
    text-align: center;
    font-size: 1.3rem;
}

@media screen and (max-width: 500px) {
    .pestana {
        text-align: left;
        padding: 10px 1em;
    }
}

@media screen and (max-width: 767px) {
    .pestana, .descri-tarea ol, .descri-tarea li {
        font-size: 1rem;
    }
}


.descri-tarea {
    width: 100%;
    margin-bottom: 2rem;
    padding: 30px;
    background-color: #FDF9E8;
    background: -prefix-linear-gradient(top, #F3FFDC, #FFEFCF);
    background: linear-gradient(to bottom, #F3FFDC, #FFEFCF);
}



.con-seccion {
    width: 100%;
    position: relative;
    font-size: 1.3rem;
}

@media screen and (max-width: 767px) {
    .con-seccion {
        font-size: 1rem;
    }
}


/*.texto-seccion {
    background: -prefix-linear-gradient(left, #5656BF 80%, #BFF6EC);
    background: linear-gradient(to right, #5656BF 80%, #BFF6EC);
}
*/
.texto-seccion {
    width: 100%;
    background-color: #5656BF;
    padding: 5px 5px 5px 60px;
    color: #fff;
    font-weight: 700;
}

@media screen and (max-width: 409px) {
    .texto-seccion {
        line-height: 18px;
        border-radius: 50px 0 0 50px !important;
    }
}


.con-seccion img {
    position: absolute;
    top: -10px;
    left: -10px;
}

@media screen and (max-width: 409px) {
    .con-seccion img {
        top: -8px;
    }
}

@media screen and (max-width: 767px) {
    .con-seccion img {
        top: -14px;
        left: -6px;
    }
}


.con-seccion-2 {
    width: 100%;
    position: relative;
    font-size: 1.3rem;
}

@media screen and (max-width: 767px) {
    .con-seccion-2 {
        font-size: 1rem;
    }
}

.con-seccion-2 img {
    position: absolute;
    top: -10px;
    left: -10px;
}

@media screen and (max-width: 409px) {
    .con-seccion-2 img {
        top: -8px;
    }
}

@media screen and (max-width: 767px) {
    .con-seccion-2 img {
        top: -14px;
        left: -6px;
    }
}


.inicio-modulo {
    width: 100%;
    margin: 1rem 0 2rem 0;
    padding: 20px 30px 5px 30px;
    border-radius: 10px;
    background: -prefix-linear-gradient(top, #459C9A, #5656BF);
    background: linear-gradient(to bottom, #459C9A, #5656BF);
    color: #fff;
}

@media screen and (max-width: 500px) {
    .inicio-modulo {
        margin: 2rem 0 2rem 0;
    }
}

@media screen and (max-width: 767px) {
    .inicio-modulo {
        padding: 20px 15px 5px 15px;
    }
}

.text-amarillo {
    color: #F7D589;
}

.barra-colores1 {
    width: 100%;
    height: 18px;
}

.autoevaluaion {
    width: 100%;
    padding: 20px;
    background-color: #F9F9F9;
    -webkit-box-shadow: 0 2px 0 0 rgb(0 0 0 / 16%), 0 2px 0 0 rgb(0 0 0 / 12%) !important;
    box-shadow: 0 0px 0 0 rgb(0 0 0 / 16%), 0 -3px 10px 0 rgb(0 0 0 / 12%) !important;
}

.barra-colores2 {
    width: 100%;
    height: 18px;
    margin-top: -5px;
}

.barra-colores1 span, .barra-colores2 span {
    height: 10px;
    display: inline-block;
    padding: 0;
    margin: 0;
    border: none;
}

.color1 {
    width: 10%;
    background-color: #5656BF;
}

.barra-colores1 span, .barra-colores2 span {
    height: 10px;
    display: inline-block;
    padding: 0;
    margin: 0;
    border: none;
}

.color2 {
    width: 10%;
    background-color: #42A894;
}

.barra-colores1 span, .barra-colores2 span {
    height: 10px;
    display: inline-block;
    padding: 0;
    margin: 0;
    border: none;
}

.color3 {
    width: 5%;
    background-color: #D3EDA9;
}

.barra-colores1 .color4, .barra-colores2 .color4 {
    width: 75%;
}

.color4 {
    width: 74%;
    background-color: #F7D589;
}


/*Estilo de botones que gu�an a ventanas modales*/

.btn.btn-ventana-modal {
    text-transform: none;
    font-size: 1.3rem !important;
}


@media screen and (max-width: 767px) {
    .btn.btn-ventana-modal {
        text-transform: none;
        font-size: 1rem !important;
    }
}

/*Boton Amarillo con Hover Morado*/
.btn-amarillo {
    color: #5656BF;
    background-color: #F7D589;
    border-color: #F7D589;
    font-weight: bold;
    letter-spacing: 0.05em;
    border-radius: 0;
}

    .btn-amarillo:hover,
    .btn-amarillo:active,
    .btn-amarillo:focus,
    .btn-amarillo.active {
        background: #5656BF;
        color: #F7D589;
        border-color: #5656BF;
    }
/*Boton Amarillo con Hover Morado*/
/*Boton Morado con Hover Amarillo*/
/*Amarillo #F7D589*/
/*Morado #5656BF*/
.btn-morado {
    color: #F7D589;
    background-color: #5656BF;
    border-color: #5656BF;
    font-weight: bold;
    letter-spacing: 0.05em;
    border-radius: 0;
}

    .btn-morado:hover,
    .btn-morado:active,
    .btn-morado:focus,
    .btn-morado.active {
        background: #F7D589;
        color: #5656BF;
        border-color: #F7D589;
    }


.btn-verde {
    color: #fff;
    background-color: #478e4c;
    border-color: #478e4c;    
    letter-spacing: 0.05em;
    border-radius: 0;
}

    .btn-verde:hover,
    .btn-verde:active,
    .btn-verde:focus,
    .btn-verde.active {
        background: #478e4c;
        color: #fff;
        border-color: #478e4c;
    }


.btn-azul {
    color: #fff;
    background-color: #5656bf;
    border-color: #5656bf;    
    letter-spacing: 0.05em;
    border-radius: 0;
}

    .btn-azul:hover,
    .btn-azul:active,
    .btn-azul:focus,
    .btn-azul.active {
        background: #5656bf;
        color: #fff;
        border-color: #5656bf;
    }


/*#5656bf*/
/*Boton Morado con Hover Amarillo*/
/*Estilo de botones que gu�an a ventanas modales*/
/*ESTILOS VENTANA MODAL*/
.modal-modulos .modal-title {
    align-items: center;
    display: grid;
    font-size: 1.3rem;
    font-weight: 700;
    grid-template-columns: minmax(1rem, 6rem) 1fr minmax(1rem, 6rem);
    margin-top: 3rem;
    padding: 0 0.5rem;
    text-align: center;
    width: 100%;
}

.next-to-close .close {
    color: #F7D589;
    opacity: 1;
    position: absolute;
    right: 13px;
}

.modal-modulos .modal-title .linea {
    align-self: center;
}

@media screen and (max-width:767px) {
    .modal-modulos .modal-title {
        font-size: 1.1rem !important;
    }
}
/*ESTILOS VENTANA MODAL*/

/*Estilos para elementos interiores, como tablas, fondos */
.bg-blanco {
    background-color: #ffffff;
}

.bg-morado {
    background-color: #5656BF;
}

.bg-azul-primario {
    background-color: #2e52a9
}

.bg-azul-secundario {
    background-color: #3a94ca;
}

.bg-azul-claro {
    background-color: #cff1f7;
}

.bg-azul-claro-secundario {
    background-color: #E1EBFF;
}

.bg-azul {
    background-color: #7990D8;
}

.bg-verde-claro {
    background-color: #d6e6ce;
}

.bg-naranja {
    background-color: #ffc28d;
}

.bg-gris {
    background-color: #F2F2F2 !important
}

.bg-gris-claro {
    background-color: #f4f4f4 !important;
}

.bg-gris-claro-secundario {
    background-color: #f9f9f9 !important;
}

.bg-amarillo {
    background-color: #F7D589 !important;
}

.bg-verde-claro-secundario {
    background-color: #fdffdc;
}

/*Colores texto*/
.text-azul-primario {
    color: #2e52a9 !important;
}

.text-amarillo {
    color: #F7D589 !important;
}

.text-morado {
    color: #5656BF !important;
}

.borde-amarillo {
    border-color: #F7D589 !important;
}

.borde-morado {
    border-color: #5656BF !important;
}

.borde-azul {
    border-color: #7990D8 !important;
}

.circle-morado {
    border-radius: 50%;
    width: 34px;
    height: 34px;
    padding: 10px;
    background: #5656BF;
    border: 3px solid #5656BF;
    color: #fff;
    text-align: center;
    font: 32px Arial, sans-serif;
}

.bien { 
    box-shadow: 0 0 10px 3px green inset ;
    -webkit-box-shadow: 0 0 10px 3px green inset;
    -webkit-appearance: none !important;
}

.mal {
    box-shadow: inset 0 0 10px 3px red ;
    -webkit-box-shadow: inset 0 0 10px 3px red ;
    -webkit-appearance: none !important;
}


.borde-3x {
    border-width: 3px;
}

.borde-medio {
    border-width: .5rem;
}

.btn.btn-ventana-modal {
    text-transform: none;
    font-size: 1.3rem !important;
}


@media screen and (max-width: 767px) {
    .btn.btn-ventana-modal {
        text-transform: none;
        font-size: 1rem !important;
    }
}


table.table.table-slider th, table.table.table-slider td {
    padding-top: .6rem !important;
    padding-bottom: .5rem !important;
    /*font-size: 1.3rem !important;*/
}

.table.table-slider td, .table.table-slider th {
    padding: .35rem !important;
}

table.table-border-inside {
    border-collapse: collapse;
}

    table.table-border-inside td {
        border: 1px solid #5656BF;
    }

    table.table-border-inside tr:first-child td {
        border-top: 0;
    }

    table.table-border-inside tr td:first-child {
        border-left: 0;
    }

    table.table-border-inside tr:last-child td {
        border-bottom: 0;
    }

    table.table-border-inside.inferior-border tr:last-child td {
        border-bottom: 1px solid #5656BF;
    }

    table.table-border-inside tr td:last-child {
        border-right: 0;
    }

table.table-borde-negro {
    border: 1px solid #000;
}

table.table-borde-negro th, td {
    border: 1px solid #000;
}

    table.table-borde-negro thead th, td {
        border-bottom-width: 1px;
    }


@media screen and (max-width: 767px) {
    table.table.table-slider th, table.table.table-slider td {
        padding-top: .3rem !important;
        padding-bottom: .25rem !important;
        /*font-size: 1rem !important;*/
    }

    .encabezado-tablas-verbo {
        min-height: 60px;
    }
}




/*Estilos para elementos interiores, como tablas, fondos */

/*Estilización de los carruseles*/
.componente-slider-carousel {
    border: none;
    font-size: 1.3rem !important;
    webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important;
}

    .componente-slider-carousel .globo-con-carousel {
        border-radius: 0;
    }

    .componente-slider-carousel .globo-con-carousel {
        display: grid;
        grid-gap: 0.5rem;
        grid-template-columns: max-content 1fr max-content;
        grid-template-rows: 1fr max-content;
        margin-bottom: 0rem;
        padding: 2rem 0 0 0;
    }

    .componente-slider-carousel .contenedor-contenido-carousel-flex {
        display: flex;
        align-items:center;
        width: 100%;
    }

    .componente-slider-carousel .btn:hover, .btn:focus, .btn:active {
        box-shadow: none;
    }

.componente-slider-carousel.shadow-none {
    border: none;
    font-size: 1.3rem !important;
    webkit-box-shadow: none !important;
    box-shadow: none !important;
}



@media screen and (max-width: 767px) {
    .componente-slider-carousel {
        font-size: 1rem !important;
    }
}

.border-none{
    border:none !important;
}

.numero {
    display: inline-flex;
    height: 35px;
    width: 35px;
    border-radius: 50%;
    /*background: #5656bf;
    color: #fff !important;*/
    font-style: normal;
    justify-content: center;
    align-items: center;
}

/*Estilización de los carruseles*/

/*TABS*/
/*Tabs */
.tab-content, .con-pal-int {
    margin-bottom: 2rem;
}

li.nav-item.tab-1-item.waves-effect.waves-light a.active {
    color: #F7D589;
    background: #5656BF;
}

.tab-content {
    border: 2px solid #5656BF;
    border-top: 10px solid #5656BF;
}

li.nav-item.tab-1-item.waves-effect.waves-light a {
    color: #5656C9;
    background: #E1EBFF;
}

.tab-1-tab-img {
    width: 152px;
}

@media screen and (max-width:991px) {
    .contenedor-tab-1-contenido {
        width: 75%;
    }
}

@media screen and (max-width:767px) {
    .contenedor-tab-1-contenido {
        width: 100%;
        padding: 0;
    }

    .con-pal-int .colapsar-contenido {
        padding: .5rem;
    }
}
/*TABS*/