* {
    padding:0;
    margin:0;
    box-sizing:border-box;
    font-family:sans-serif;
    font-size:1rem;
}
:root {   
    --color-azul-1: #2E688C;
    --color-azul-2: #4586BF;
    --color-azul-3: #AED3F2;
    --color-azul-4: #95c8f2;
    --color-amarillo-1: #F2B705;
    --color-verdoso:#486773; 
    --color-fondo: #F2F2F2;  
    --color-error: #E43F3F; 
  }
#vista_login{
    background-color: var(--color-fondo);
    background-repeat: no-repeat;
    background-size: cover;
  
    width:100%;

    padding:0;


    
    align-items: flex-end;
    min-height:100vh;
    flex-direction: column;
}
#form_login {
    font-family: "Poppins", sans-serif;
    background-color: white;
    border-radius: 1rem;
    border-top: 5rem var(--color-azul-1) solid;
    
    padding: 2rem ;
    box-shadow: 0 0 1rem 0.25rem var(--color-azul-1);

    
    margin:auto;
    width:50%;
    max-width:500px;
    
    position:relative;
   
}

#form_login h2{
    /*
    text-align:center;
    margin-bottom:20px;
    color:rgba(0,0,0,0.5);*/
    position: relative;
    top:-5rem;
    color: var(--color-azul-3);
    text-align: center;
    font-size:1.5rem;
    
}

#form_login h3{
    margin-top: -2rem;
    font-size: 1rem;
    color: var(--color-azul-2);
    text-align:center;
}

#form_login input{
    display:inline-block;
    padding:2%;
    width:100%;
    margin:3% 0;
    border: var(--color-verdoso) solid 1px;
}

#form_login input::placeholder{
    color: var(--color-azul-1);
    font-size:0.8em;
}
#form_login input:hover{
    border: var(--color-amarillo-1) solid 2px;
}
#form_login #clave{padding-right:11%}
.pos_rel{position:relative;}
#ojo{width:10%;display:inline-block;background: url("../images/ojo_cerrado.png") no-repeat center center;background-size:contain;padding:2%;cursor:pointer;position:absolute;right:1%;top:22%}

#form_login input[type="submit"]{
    background: linear-gradient(var(--color-azul-4),var(--color-azul-2));
    border: 0;
    color:rgb(5, 48, 77);
    opacity:0.9;
    cursor:pointer;
    border-radius:20px;
    margin-bottom:0;
    width:100%;
}

#form_login input[type="submit"]:hover{
    opacity:1;
}
#form_login input[type="submit"]:active{
    transform: scale(0.95);
}



#error_login{
    text-align:center;
    color:var(--color-error);
    font-style:italic;
    margin-top:0.75em;
    margin-bottom:0.5em;
}


.visible_flex{display:flex;}
.visible{display:block}
.oculta{display:none}
.olvido{text-align:center;margin:1em 0 1em 0;}


@media (max-width:768px){
    #form_login {
        width:75%;
    }
}

@media (max-width:480px){
    #form_login {
        width:95%;
    }
}