/*------------------------------------
   ?ICONS
------------------------------------*/

:root {
    --logoIcon--secondary: url("data:image/svg+xml,%3Csvg width='90' height='120' viewBox='0 0 90 120' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 63.14C0.190972 58.522 0.193988 53.3817 0.66687 48.2868C1.09125 43.7592 1.4307 39.2136 2.1279 34.7042C2.60382 31.6224 2.93122 28.4954 3.43744 25.4167C4.44383 19.2895 5.5594 13.1532 7.57824 7.2734C9.09389 2.8485 12.8012 -0.341895 18.1878 0.0293623C20.6462 0.207445 22.7347 1.40272 24.8717 2.4863C31.6133 5.93024 38.3034 9.47077 44.7571 13.4339C51.9034 17.7893 58.7446 22.6227 65.2335 27.9008C70.1589 31.9811 74.8165 36.3717 79.1774 41.0457C83.0545 45.1537 86.4738 49.6269 88.6472 54.9301C90.134 58.4368 90.4039 62.337 89.4141 66.0135C88.5047 69.4061 86.4222 72.2011 84.3064 74.9388C78.7743 82.0923 71.878 87.8151 64.7999 93.3507C59.0928 97.7582 53.0945 101.779 46.8456 105.385C42.1925 108.101 37.388 110.589 32.5318 112.961C28.1425 115.107 23.7199 117.187 19.2366 119.103C13.947 121.379 7.90255 119.245 5.56845 113.586C3.93458 109.635 3.44652 105.436 2.80994 101.262C2.38556 98.488 1.97033 95.7111 1.65204 92.9221C1.33376 90.1332 1.14581 87.3261 0.891183 84.5311C0.43952 79.5599 0.394006 74.5705 0.23941 69.5903C0.16969 67.6102 0.127314 65.6241 0 63.14Z' fill='%237F13F0'/%3E%3C/svg%3E");
    --logoIcon--gray: url("data:image/svg+xml,%3Csvg width='90' height='120' viewBox='0 0 90 120' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 63.14C0.190972 58.522 0.193988 53.3817 0.66687 48.2868C1.09125 43.7592 1.4307 39.2136 2.1279 34.7042C2.60382 31.6224 2.93122 28.4954 3.43744 25.4167C4.44383 19.2895 5.5594 13.1532 7.57824 7.2734C9.09389 2.8485 12.8012 -0.341895 18.1878 0.0293623C20.6462 0.207445 22.7347 1.40272 24.8717 2.4863C31.6133 5.93024 38.3034 9.47077 44.7571 13.4339C51.9034 17.7893 58.7446 22.6227 65.2335 27.9008C70.1589 31.9811 74.8165 36.3717 79.1774 41.0457C83.0545 45.1537 86.4738 49.6269 88.6472 54.9301C90.134 58.4368 90.4039 62.337 89.4141 66.0135C88.5047 69.4061 86.4222 72.2011 84.3064 74.9388C78.7743 82.0923 71.878 87.8151 64.7999 93.3507C59.0928 97.7582 53.0945 101.779 46.8456 105.385C42.1925 108.101 37.388 110.589 32.5318 112.961C28.1425 115.107 23.7199 117.187 19.2366 119.103C13.947 121.379 7.90255 119.245 5.56845 113.586C3.93458 109.635 3.44652 105.436 2.80994 101.262C2.38556 98.488 1.97033 95.7111 1.65204 92.9221C1.33376 90.1332 1.14581 87.3261 0.891183 84.5311C0.43952 79.5599 0.394006 74.5705 0.23941 69.5903C0.16969 67.6102 0.127314 65.6241 0 63.14Z' fill='%23ccc'/%3E%3C/svg%3E");
 }








/*------------------------------------
   ?LOGIN
------------------------------------*/

.loginPage {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    color: #333;

    background-image: url(/pix/login-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

@media (min-width: 767px) {
    .loginPage {
        grid-template-columns: 1fr minmax(440px, 40%);
    }
}

.loginPage__column {
    padding: 20px 5% 40px;
}

@media (min-width: 767px) {
    .loginPage__column {
        padding: 40px 5%;
    }
}

.loginPage__container {
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
    background-color: white;
    padding: 30px 20px 20px;
    border-radius: 10px;
    box-shadow: 0px 8px 12px 6px hsla(0, 0%, 0%, 0.15), 0px 4px 4px hsla(0, 0%, 0%, 0.3);
}

.loginPage__header {
    text-align: center;
    margin-bottom: 15px;
}

.loginPage__title {
    color: var(--secondary);
    text-align: center;
    margin-bottom: 30px;
}

.potentialidplist {
    text-align: center;
}

.potentialidp {
    display: inline-block;
}

.titleSeparator {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    align-items: center;
    text-align: center;
    color: #565656;
    margin-bottom: 20px;
}

.titleSeparator::before,
.titleSeparator::after {
    content: "";
    height: 1px;
    width: 100%;
    background-color: #c6d0d2;
}

.signInAnotherAccount {
    margin-bottom: 20px;
}

.signIn__formGroup {
    margin-bottom: 20px;
}

.signIn__formGroup:last-child {
    margin-bottom: 10px;
}

.rememberpass {
    margin-bottom: 15px;
}

.signIn__buttonContainer {
    text-align: center;
}

.signIn__button {
    margin: 0 0 20px;
}

.forgetpass {
    margin-bottom: 10px;
}

.loginPage__cookies {
    position: relative;
    display: inline-block;
    margin-bottom: 10px;
}

.loginPage__cookies:hover::before {
    content: "Este sitio utiliza dos cookies: La cookie esencial es la de sesión, normalmente llamada MoodleSession. Debe permitir que su navegador la acepte para poder mantener el servicio funcionando mientras navega el sitio. Cuando sale de la plataforma o cierra su navegador la 'cookie' se destruye (en su navegador y en el servidor). La otra 'cookie', normalmente llamada MOODLEID o similar, es para su comodidad. Se limita a recordar su nombre de usuario dentro del navegador. Esto significa que cuando regresa al sitio, se escribirá automáticamente su nombre en el campo nombre de usuario Si desea mayor seguridad no utilice esta opción: sólo tendrá que escribir su nombre manualmente cada vez que quiera iniciar sesión.";
    font-size: 14px;
    line-height: 1.2;
    position: absolute;
    z-index: 9;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: 280px;
    height: 150px;
    overflow: auto;
    background-color: #fff;
    padding: 3px;
    border-radius: 8px;
    border: 5px solid #fff;
    box-shadow: 0 0 6px hsla(0, 0%, 0%, .2);
}

.loginPage__cookies .icon {
    display: inline-block;
    width: 16px;
    height: 16px;
}

.tool_dataprivacy {
    display: none;
    text-align: center;
    margin-bottom: 10px;
}

.loginPage__imgColumn {
    padding: 40px 5% 20px;
}

@media (min-width: 767px) {
    .loginPage__imgColumn {
        padding: 40px 5%;
    }
}

.loginPageLogo {
    text-align: center;
    margin-bottom: 30px;
}

.loginPageLogo__logo {
    max-width: 100%;
    width: 400px;
    text-align: center;
    margin-bottom: 10px;
}

.videoLogin {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--border-radius);
    background: var(--gradient-primary);
    padding: 6px;
    box-shadow: var(--elevation-2);
}

.videoLogin__video.video-responsive {
    border: none;
    border-radius: var(--border-radius-sm);
}






/*------------------------------------
   ?REGISTER MODAL
------------------------------------*/

.signInModal .modal-dialog {
    background: var(--gradient-primary);
    padding: 10px;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--elevation-2);
}

.signInModal .modal-content {
    border: none;
    border-radius: var(--border-radius);
    background-color: transparent;
}

.signInModal.modal h2 {
    color: #fff;
    border-bottom: 3px solid #fff;
}

.signInModal .close {
    color: #fff;
}

.signInModal .modal-body {
    background-color: #fff;
    border-radius: var(--border-radius-sm);
}


.regCourse__form {
    max-width: 390px;
    margin: .5rem auto;
}

@keyframes fadeIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.step {
    display: none;
}

.step.active {
    display: block;
    animation: fadeIn 600ms forwards;
    transform-origin: top center;
}

.step__header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 1.6rem;
}

.step__number {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 38px;
    padding-right: 3px;
    background-image: var( --logoIcon--gray);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    color: #fff;
    font-size: 1.2rem;
}

.step-1 .step__number--1 {
    background-image: var(--logoIcon--secondary);
}

.step-2 .step__number--2 {
    background-image: var(--logoIcon--secondary);
}

.alert {
    animation: fadeIn 600ms forwards;
}






/*------------------------------------
   ?INPUTS
------------------------------------*/

.groupInput {
    position: relative;
    margin-bottom: 2rem;
}

.groupInput__input {
    transition: border 400ms;
    border-color: var(--secondary);
}

.groupInput__input:focus {
    outline: none;
}

.groupInput__input.invalid {
    border-color: var(--red);
}

.groupInput__label {
    position: absolute;
    pointer-events: none;
    left: 15px;
    top: 0.45rem;
    margin-bottom: 0;
    transition: all 400ms;
}

.groupInput__input:focus~.groupInput__label,
.groupInput__input:valid~.groupInput__label {
    color: var(--primary);
}

.groupInput__input:focus~.groupInput__label,
.groupInput__input:valid~.groupInput__label,
[type="date"].groupInput__input~.groupInput__label {
    top: -1rem;
    left: 0;
    background-color: var(--white);
    padding: 0px 6px 1px 2px;
}

.groupInput__input.invalid~.groupInput__label,
.already-exists~.groupInput__label {
    top: -1rem;
    left: 0;
    color: var(--red);
    background-color: var(--white);
    padding: 0px 6px 1px 2px;
}

.obligatoryField {
    display: block;
    color: #fff;
    background-color: var(--red);
    font-size: .9rem;
    padding: 0 10px 1px;
    border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
    position: absolute;
    top: calc(100% - 1px);
    right: 12px;
    border: 1px solid var(--red);
    border-top: 0;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    transition: clip-path 400ms;
}

.groupInput__input.invalid:hover~.obligatoryField {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.groupInput__input:valid {
    border-color: var(--primary);
}

.groupInput__input:valid~.groupInput__label {
    color: var(--primary);
}

.groupInput__input:valid~.obligatoryField {
    display: none;
}

.groupInput__input.already-exists~.groupInput__label {
    color: var(--green);
}

.groupInput__input.already-exists {
    border-color: var(--green);
}

.alreadyExists__message {
    display: none;
    color: #fff;
    background-color: var(--green);
    font-size: .9rem;
    padding: 0 10px 1px;
    border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
    position: absolute;
    top: calc(100% - 1px);
    right: 12px;
    border: 1px solid var(--green);
    border-top: 0;
}

.already-exists~.alreadyExists__message {
    display: block;
}



.passwordToggle {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    background: no-repeat;
    border: none;
    padding: 5px 10px;
    color: var(--primary);
}

[type="password"]~.passwordToggle .fa-eye {
    display: none;
}

[type="text"]~.passwordToggle .fa-eye-slash {
    display: none;
}






/*------------------------------------
   ?LOADING
------------------------------------*/

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.loading.modal.show::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: hsla(0,0%,0%,.8);
    animation: fadeIn 600ms forwards;
}

.loading .modal-content {
    background: var(--gradient-highlight);
    border: none;
}

.loading__container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15px 10px 10px;
}

@keyframes loading {
    0% {
       transform: rotate(0);
    }

    100% {
       transform: rotate(360deg);
    }
 }

 .loading__brand {
    width: 210px;
    max-width: 100%;
    margin-bottom: 30px;
    margin-top: 20px;
 }

.loading__preloadIcon {
    width: 44px;
    animation: loading 0.9s infinite;
 }

 .loading__message {
    display: block;
    text-align: center;
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 10px;
 }

 .btn--disabled {
     pointer-events: none;
     background-color: #ccc;
     border: 1px solid #ccc !important
 }