.login{
    min-height: 100dvh;
    padding: 5dvh 0;
}
input{
    text-align: center;
}
form{
    opacity: 0;
    transition: all 0.5s linear ;
}
.form-input{
    border-radius: 50px;
    width: 100%;
    border: none;
    background-color: var(--gris-claro);
    color: black;
}
.form-input[type="text"]::placeholder, .form-input[type="password"]::placeholder{
    color: var(--gris-oscuro);
}   
input[type="submit"]{
    border-radius: 50px;
    width: 100%;
    border: none;
}
input.errorinput{
    border: 1px solid red;
}
.separator{
    color: var(--gris-oscuro);
}
.invitado-enlace{
    background-color: white;
}
.invitado-enlace a{
    background-color: transparent;
    border: 1.5px solid var(--azul-oscuro);
    color: var(--azul-oscuro);
    font-weight: 600;
    text-decoration: none;
}
.modal-container{
    position: absolute;
    top: 0;
    height: 100dvh;
    width: 100dvw;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}
.modal-content{
    width: 90%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 5% 1%;
}
.modal-content .cerrar, .modal-content .cerrarInstrucciones{
    font-size: 3rem;
    max-width: 10%;
    margin: auto;
    cursor: pointer;
    background-color: var(--azul-oscuro);
    border-radius: 10px;
    filter: invert(1);
}

/* RECUPERAR PASS */

.enlacesLogin{
    color: var(--azul-oscuro);
    text-decoration: none;
}
.inputcode{
    height: 2.5rem;
    border: 1px solid black;
    border-radius: 5px;
}