/* Solo para el clases que aplica para todo mobile (xs, sm, md) */
@media (max-width: 991.98px) {
    .navbar {
        background-color: #0027C9 !important;
        /* tu color personalizado */
    }

    .navbar-brand {
        color: #FFFFFF !important;
    }

    .navbar-collapse,
    .navbar-collapse.show,
    .navbar-nav {
        background-color: #0027C9 !important;
    }

    .navbar .offcanvas {
        background-color: #0027C9 !important;
    }

    .navbar-nav .nav-link {
        color: #ffffff;
    }

}

/* Extra small devices (phones, less than 576px) */
@media (max-width: 575.98px) {

    footer .footer-img-amba {
        width: 120px;
    }

    footer .footer-img-aacsb {
        width: 120px;
    }

    footer .footer-img-cna {
        width: 120px;
    }

    footer .footer-img-ne {
        width: 100px;
    }

    .contenedor-index-nuevo-form .texto-index-1 {
        font-size: 26px;
        line-height: 30px;
    }

    .contenedor-index-nuevo-form .texto-index-1>span {
        font-size: 26px;
        line-height: 43px;
    }

    .contenedor-index-nuevo-form .texto-index-2 {
        font-size: 20px;
        line-height: 25px;
    }

    .contenedor-index-nuevo-form .text-index-bienvenidos {
        font-size: 20px;
        line-height: 25px;
        width: 80%;
    }



    .contenedor-curso-secciones-index>div {
        width: 100%;
    }

    .contenedor-cursos-recomendados-index .curso-recomendado,
    .contenedor-encuentros-index .encuentro {
        width: 100%;
    }

    .contenedor-header>div {
        width: 100%;
    }

    .div-login {
        width: 90%;
    }

    .contenedor-leccion-scorm {
        display: flex;
        flex-direction: column;
        gap: 10px;
        position: relative;
    }

    .contenedor-leccion-scorm iframe.rise {
        border: 2px solid #282828;
        min-height: 80vh;
    }

    .contenedor-leccion-scorm iframe.storyline {
        border: 2px solid #282828;
        min-height: 40vh;
    }

    .contenedor-leccion-scorm .contenedor-leccion-scorm-botones {
        display: flex;
        flex-direction: row;
        gap: 10px;
        position: relative;
        right: 0;
        width: 100%;
    }

    .contenedor-leccion-scorm .contenedor-leccion-scorm-botones a {
        width: 50px;
    }

    .contenedor-header .logos-fen a {
        height: auto;
        margin: 0 auto;
        width: 294px;
    }

    .contenedor-header .titulo-header span:nth-child(1) {
        font-size: 28px;
    }

    .contenedor-header .titulo-header span:nth-child(2) {
        font-size: 20px;
    }

    .div-foro-post .div-foro-post-user {
        flex-direction: row;
    }

    .div-foro-post .div-foro-post-user>div:nth-child(1) {
        align-items: center;
        display: flex;
        justify-content: center;
        width: 30%;
    }

    .div-foro-post .div-foro-post-user>div:nth-child(2) {
        align-items: center;
        display: flex;
        width: 70%;
    }

    .div-foro-post .div-foro-post-user>div:nth-child(2)>div {
        width: 100%;
    }

    .div-foro-post .div-foro-post-user .div-foro-post-user-img {
        margin-bottom: 0;
    }

    .imagen-perfil-usuario {
        width: 50%;
    }

    .titulo-seccion-index {
        font-size: 24px;
    }

    .contenedor-central {
        width: 98% !important;
    }

    .carousel-banner-index .contenido {
        font-size: 14px;
    }

    .seccion-index {
        margin-left: 5%;
        width: 90%;
    }

    .encuentros-titulo {
        font-size: 32px;
    }

    .encuentros-texto-filtros {
        font-size: 20px;
    }

    .div-login-input input[type="text"],
    .div-login-input input[type="password"] {
        font-size: 16px;
    }

    #btn-enviar-login {
        border-radius: 10px;
        font-size: 20px;
        font-weight: 700;
        height: auto;
        padding: 5px 20px;
        width: auto;
    }

    .curso-seccion-index .nombre-curso>span:first-child {
        font-size: 28px;
        line-height: 29px;
    }

    .curso-seccion-index .nombre-curso div span {
        font-size: 18px;
    }

    .contenedor-video {
        min-height: 60vh;
    }

    .swal2-popup.custom-gamification-popup {
        width: 90vw;
    }

    .contenedor-gamification-puntaje {
        padding: 24px;
    }

}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .contenedor-curso-secciones-index>div {
        width: 100%;
    }

    .contenedor-cursos-recomendados-index .curso-recomendado,
    .contenedor-encuentros-index .encuentro {
        width: calc(50% - 20px);
    }

    .contenedor-header>div {
        width: 100%;
    }

    .div-login {
        width: 70%;
    }

    .contenedor-leccion-scorm {
        display: flex;
        flex-direction: column;
        gap: 10px;
        position: relative;
    }

    .contenedor-leccion-scorm iframe.rise {
        border: 2px solid #282828;
        min-height: 80vh;
        width: 100%;
    }

    .contenedor-leccion-scorm iframe.storyline {
        border: 2px solid #282828;
        min-height: 40vh;
        width: 100%;
    }

    .contenedor-leccion-scorm .contenedor-leccion-scorm-botones {
        display: flex;
        flex-direction: row;
        gap: 10px;
        position: relative;
        right: 0;
        width: 100%;
    }

    .contenedor-leccion-scorm .contenedor-leccion-scorm-botones a {
        width: 50px;
    }

    .contenedor-header .titulo-header label:nth-child(1) {
        font-size: 28px;
    }

    .contenedor-header .titulo-header label:nth-child(2) {
        font-size: 28px;
    }

    .div-foro-post .div-foro-post-user {
        flex-direction: row;
    }

    .div-foro-post .div-foro-post-user>div:nth-child(1) {
        align-items: center;
        display: flex;
        justify-content: center;
        width: 30%;
    }

    .div-foro-post .div-foro-post-user>div:nth-child(2) {
        align-items: center;
        display: flex;
        width: 70%;
    }

    .div-foro-post .div-foro-post-user>div:nth-child(2)>div {
        width: 100%;
    }

    .div-foro-post .div-foro-post-user .div-foro-post-user-img {
        margin-bottom: 0;
    }

    .imagen-perfil-usuario {
        width: 50%;
    }

    .titulo-seccion-index {
        font-size: 24px;
    }

    .contenedor-central {
        width: 90% !important;
    }

    .curso-seccion-index .nombre-curso>span:first-child {
        font-size: 18px;
        line-height: 19px;
    }

    .curso-seccion-index .nombre-curso div span {
        font-size: 12px;
    }

    .carousel-banner-index .contenido {
        font-size: 16px;
    }

    .contenedor-header .titulo-header span:nth-child(1) {
        font-size: 28px;
    }

    .contenedor-header .titulo-header span:nth-child(2) {
        font-size: 20px;
    }

    .encuentros-titulo {
        font-size: 32px;
    }

    .div-login-input input[type="text"],
    .div-login-input input[type="password"] {
        font-size: 18px;
    }

    #btn-enviar-login {
        font-size: 22px;
    }

    .contenedor-video {
        min-height: 60vh;
    }

    .caja-encuentros .btn-favorito,
    .caja-encuentros .btn-abrir {
        height: 40px;
        width: 40px;
    }

    .caja-encuentros .btn-favorito .bi,
    .caja-encuentros .btn-abrir .bi {
        font-size: 32px;
    }

    .curso-recomendado .btn-curso-recomendado {
        height: 40px;
        width: 40px;
    }

    .curso-seccion-index.autocontenido::after {
        height: 50px;
        width: 50px;
    }

    .swal2-popup.custom-gamification-popup {
        width: 90vw;
    }

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .contenedor-curso-secciones-index>div:first-child {
        width: 100%;
    }

    .contenedor-curso-secciones-index>div:nth-child(2) {
        width: calc(50% - 20px);
    }

    .contenedor-curso-secciones-index>div:nth-child(3) {
        width: calc(50% - 20px);
    }

    .contenedor-cursos-recomendados-index .curso-recomendado,
    .contenedor-encuentros-index .encuentro {
        width: calc(50% - 20px);
    }

    .contenedor-header>div {
        width: 100%;
    }

    .div-login {
        width: 50%;
    }

    .contenedor-leccion-scorm {
        display: flex;
        flex-direction: column;
        gap: 10px;
        position: relative;
    }

    .contenedor-leccion-scorm .contenedor-leccion-scorm-botones {
        display: flex;
        flex-direction: row;
        gap: 10px;
        position: relative;
        right: 0;
        width: 100%;
    }

    .contenedor-leccion-scorm .contenedor-leccion-scorm-botones a {
        width: 50px;
    }

    .titulo-seccion-index {
        font-size: 24px;
    }

    .curso-seccion-index .nombre-curso>span:first-child {
        font-size: 16px;
        line-height: 15px;
    }

    .curso-seccion-index .nombre-curso div span {
        font-size: 12px;
    }

    .carousel-banner-index .contenido {
        font-size: 20px;
    }

    .encuentros-titulo {
        font-size: 40px;
    }

    .encuentros-texto-filtros {
        font-size: 20px;
    }

    .contenedor-video {
        min-height: 60vh;
    }

    .caja-encuentros .btn-favorito,
    .caja-encuentros .btn-abrir {
        height: 40px;
        width: 40px;
    }

    .caja-encuentros .btn-favorito .bi,
    .caja-encuentros .btn-abrir .bi {
        font-size: 32px;
    }

    .curso-recomendado .btn-curso-recomendado {
        height: 40px;
        width: 40px;
    }

    .curso-seccion-index.autocontenido::after {
        height: 50px;
        width: 50px;
    }

    .swal2-popup.custom-gamification-popup {
        width: 90vw;
    }

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    /* body {
        border: 1px solid red;
    } */

    .contenedor-curso-secciones-index>div:first-child {
        width: calc(40% - 20px);
    }

    .contenedor-curso-secciones-index>div:nth-child(2) {
        width: calc(30% - 20px);
    }

    .contenedor-curso-secciones-index>div:nth-child(3) {
        width: calc(30% - 20px);
    }

    .contenedor-cursos-recomendados-index .curso-recomendado,
    .contenedor-encuentros-index .encuentro {
        width: calc(33% - 20px);
    }

    .div-login {
        width: 50%;
    }

    .titulo-seccion-index {
        font-size: 24px;
    }

    .curso-seccion-index .nombre-curso>span:first-child {
        font-size: 24px;
        line-height: 23px;
    }

    .curso-seccion-index .nombre-curso div span {
        font-size: 16px;
    }

    .carousel-banner-index .contenido {
        font-size: 30px;
    }

    .contenedor-header .titulo-header span:nth-child(1) {
        font-size: 28px;
    }

    .contenedor-header .titulo-header span:nth-child(2) {
        font-size: 20px;
    }

    .contenedor-header .titulo-header.open-offcanvas span:nth-child(1) {
        font-size: 19px;
    }

    .contenedor-header .titulo-header.open-offcanvas span:nth-child(2) {
        font-size: 14px;
    }

    .encuentros-titulo {
        font-size: 32px;
    }

    .encuentros-texto-filtros {
        font-size: 20px;
    }

    a.btn-menu {
        font-size: 16px;
    }

    .curso-seccion-index.autocontenido::after {
        height: 60px;
        width: 60px;
    }

    .swal2-popup.custom-gamification-popup {
        width: 70vw;
    }

}

/* Extra large devices */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    /* body {
        border: 1px solid blue;
    } */

    .titulo-seccion-index {
        font-size: 24px;
    }

    .curso-seccion-index .nombre-curso>span:first-child {
        font-size: 20px;
        line-height: 21px;
    }

    .curso-seccion-index .nombre-curso div span {
        font-size: 14px;
    }

    .carousel-banner-index .contenido {
        font-size: 34px;
    }

    .contenedor-leccion-scorm {
        width: 90%;
    }

    .encuentros-titulo {
        font-size: 40px;
    }

    .encuentros-texto-filtros {
        font-size: 20px;
    }

    .contenedor-header .titulo-header.open-offcanvas span:nth-child(1) {
        font-size: 22px;
    }

    .contenedor-header .titulo-header.open-offcanvas span:nth-child(2) {
        font-size: 16px;
    }

    a.btn-menu {
        font-size: 18px;
    }
}


/* Extra extra large */
@media (min-width: 1400px) and (max-width: 1919.98px) {
    /* body {
        border: 3px solid pink;
    } */

    .contenedor-leccion-scorm {
        width: 80%;
    }

    .contenedor-header .titulo-header.open-offcanvas span:nth-child(1) {
        font-size: 30px;
    }

    .contenedor-header .titulo-header.open-offcanvas span:nth-child(2) {
        font-size: 22px;
    }
}

/* Monitores 24" 24" (QHD) */
@media (min-width: 1920px) and (max-width: 2559px) {
    /* body {
        border: 3px solid orangered;
    } */
}

/* Monitores 32"–34" (4K, Ultrawide) */
@media (min-width: 2560px) {
    /* body {
        border: 3px solid greenyellow;
    } */

    .curso-seccion-index .nombre-curso>span:first-child {
        font-size: 46px;
        line-height: 47px;
    }

    .curso-seccion-index .nombre-curso div span {
        font-size: 24px;
        line-height: 25px;
    }
}

/* Atajos */
@media (min-width: 1400px) {
    .contenedor-leccion-scorm {
        width: 80%;
    }
}