/* CONFIGURACIONES GENERALES */
:root {
    --bk-color: #252525;
    --bk-color-acceso: #3c3c3c;
    --bk-color-Repli: #505050; /*3c3c3c*/ 
    --text-color: white;
    --border-color: white;
    --text-shadow: white;
}

*{
    padding: 0;
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    /* color: white; */
}

a{
    text-decoration: none;
    text-align: center;
}

h2{
    font-size: 1.7rem;
    text-align: center;
}

h1{
    font-size: 2.2rem;
    text-align: center;
    color: white;
}

.title{
    text-align: center;
    font-size: 2.2rem;
    color: rgb(240 135 5);
    font-family: "Audiowide", sans-serif;
    font-style: normal;
}






/* MAIN */

.mainLogin{
    display: flex;
    /* background: radial-gradient(black,var(--bk-color)); */
    background: linear-gradient(45deg, #ff9800, #673ab7);
    min-height: 100dvh;
    width: 100%;
    flex-direction: row;
}

.contentMainLogin{
    display: flex;
    margin: auto;
    background: white;
    /* padding: 7dvh; */
    max-width: 85%;
    max-height: 90dvh;
    box-sizing: border-box;
    border-radius: 15px;
    flex-direction: row;
    filter: drop-shadow(3px 10px 5px black);
}

.bkCtnSide{
    min-width: 60%;
    max-width: 60%;
    box-sizing: border-box;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    padding: 5dvh;
    display: flex;
    gap: 2dvh;
    background-color: #1f2647;
    flex-direction: column;
}








.ctnImageLogin{
    width: 80%;
    margin: auto;
}

.ctnImageLogin img{
    width: 100%;    
}


/* FORMULARIO LOGIN */
.form_login{
    display: flex;
    flex-direction: column;
    /* gap: 4dvh; */
    width: 100%;
    padding: 7dvh;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    overflow-y: auto;
    justify-content: space-evenly;
    text-align: center;
}

.textExtra{
    color: #383838;
}

label{
    display: flex;
    flex-direction: row;
    gap: 1dvh;
    font-size: 1.2rem;
    align-items: center;
    justify-content: space-between;
}

input[type='email'],input[type='password'],input[type='text'],input[type='tel']{
    padding: 1dvh;
    color: black;
    border-radius: 10px;
    border: none;
    font-size: 1.2rem;
    background: none;
    width: 100%;
    box-sizing: border-box;
}

input:focus{
    outline: none;
}

.registrar-logear{
    background: none;
    color: black;
    padding: 1dvh;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    font-weight: 600;
    text-align: center;
}

.btn_google{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1dvh;
    background-color: white;
    color: black;
    padding: 1dvh;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 0 5px black;
    transition: filter 0.3s;
}

.btn_google:hover{
    filter: brightness(75%);
}

.btn{
    display: flex;
    gap: 5%;
    border: none;
}

button{
    width: 100%;
    padding: 1dvh;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: 600;
}

.btnIngresar{
    outline: solid 2px black;
    background-color: #1a3aea;
    color: white;
    transition: filter 0.3s;
    /* transition: opacity 0.3s; */

}

.btnSalir{
    background-color: red;
    color: white;
    width: 100%;
    padding: 1dvh;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: 600;
    outline: solid 2px black;
    transition: filter 0.3s;
    /* transition: opacity 0.3s; */
}

.btnIngresar:hover ,.btnSalir:hover{
    filter: brightness(85%);
    /* opacity: 0.8; */
}









/* FORMULARIO - REGISTRAR */
.form_registrar{
    display: flex;
    flex-direction: column;
    gap: 3dvh;
    width: 100%;
    padding: 7dvh;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;

    overflow-y: auto;
}

legend{
    border-radius: 8px;
    padding: 5px;
    color: white;
    background: #383838;
}

.ctnInput{
    border-radius: 15px;
    background: white;
}

.nota{
    font-size: 1rem;
    font-weight: 500;
    color: #ff0000;
}

.errorlist{
    list-style: none;
}

.errorlist li{
    list-style: none;
    font-weight: 600;
}

.errorlist li .errorlist{
    list-style: none;
    font-weight: 400;
    color: red;
}
/* ------------------------------------------------------------------------------ */






/*  */
.ctnMessageVerifi{
    display: flex;
    flex-direction: column;
    gap: 4dvh;
    padding: 7dvh;
    align-items: center;
    justify-content: center;
}

.ttlFormCelular{
    color: #ff9800;
    display: none;
}

.ctnEmailVerifi{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5dvh;
    gap: 4dvh;
    width: 100%;
}

.btnEmailvrf{
    border: none;
    outline: solid 2px black;
    padding: 1dvh 2dvh;
    width: 100%;
    color: white;
    text-align: center;
    cursor: pointer;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: 600;
    transition: filter 0.3s;
    background-color: #1a3aea;
}

.btnEmailvrf:hover{
    filter: brightness(85%);
}


/* Password reset */
.form_password_reset{
    width: 100%;
    padding: 5dvh;
    display: flex;
    flex-direction: column;
    gap: 4dvh;
    justify-content: center;
}

.form_password_change{
    display: flex;
    flex-direction: column;
    gap: 4dvh;
    margin: auto;
    width: 100%;
    padding: 7dvh;
}

.ctnPasswordChange{
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 4dvh;
}

.ctnPasswordReset{
    display: flex;
    flex-direction: column;
    gap: 3dvh;
    padding: 6dvh;
    align-items: center;
    margin: auto;
}


.ctnButtons{
    display: flex;
    flex-direction: row;
    gap: 2dvh;
}

.btnActions{
    border: none;
    outline: solid 2px black;
    padding: 1dvh 2dvh;
    width: 100%;
    color: white;
    text-align: center;
    cursor: pointer;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: 600;
    transition: filter 0.3s;
}

.enviar{
    background-color: #1a3aea;
}

.volver{
    background-color: red;
}


.ctnPasswordKeyDone{
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    box-sizing: border-box;
    padding: 5dvh;
    margin: auto;
    gap: 4dvh;
}

.ctnPasswordKeyDone .btnActions{
    width: auto;
}



.form_socialaccount_google_login{
    display: flex;
    flex-direction: column;
    gap: 4dvh;
    padding: 9dvh;
    margin: auto;
    width: 100%;
}


.copy{
    color: rgb(240 135 5);
    font-weight: 500;
    text-align: center;
    text-decoration: underline;
}



/* adaptable */
@media (max-width: 600px) {
    .ttlFormCelular{
        display: flex;
        justify-content:center;
    }
    .contentMainLogin{
        width: 80%;
    }

    .bkCtnSide{
        display: none;
    }

    .form_login{
        gap: 4dvh;
    }

    .textExtra{
        color: #b3b3b3;
    }

    .form_login,.form_registrar,.form_password_reset{
        padding: 4dvh;
        background-color: #1f2647;
        border-top-left-radius: 15px;
        color: white;
    }

    .form_socialaccount_google_login{
        padding: 6dvh;
    }

    .registrar-logear{
        color: white;
    }

    input[type='email'], input[type='password'], input[type='text']{
        width: 100%;
        color: black;
    }

    label{
        flex-direction: column;
        align-items: flex-start;
    }

    .form_password_change{
        padding: 4dvh;
    }
}


@media (min-width: 601px) and (max-width: 992px) {

    .form_registrar{
        padding: 4dvh;
    }

    .form_login{
        padding: 5dvh;
    }

    input[type='email'], input[type='password'], input[type='text']{
        width: 100%;
    }

    label{
        flex-direction: column;
        align-items: flex-start;
    }
}