@charset "UTF-8";


*{

    margin:0;

    padding:0;

    box-sizing:border-box;

    font-family:'Segoe UI',sans-serif;

}



body{


    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;


}





/* FONDO GIF */

#background-gif{


    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100%;

    object-fit:cover;

    z-index:-2;


}






/* OSCURECER FONDO */

.overlay{


    position:fixed;

    top:0;

    left:0;


    width:100%;

    height:100%;


    background:rgba(0,0,0,.45);


    z-index:-1;


}






/* TARJETA LOGIN */

.login-card{


    width:420px;


    padding:45px;


    background:
    rgba(255,255,255,.12);



    backdrop-filter:blur(15px);



    border-radius:25px;



    border:
    1px solid rgba(255,255,255,.25);



    box-shadow:
    0 25px 50px rgba(0,0,0,.4);



    color:white;



    animation:
    aparecer .8s ease;



}





@keyframes aparecer{


from{

opacity:0;

transform:translateY(40px);


}


to{


opacity:1;

transform:translateY(0);


}


}







/* LOGO */


.logo{


    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:20px;


}



.logo img{


    width:300px;

    max-width:100%;

    height:auto;

    object-fit:contain;


}






h1{


    text-align:center;

    font-size:32px;

    margin-top:20px;


}






.subtitle{


    text-align:center;

    margin:10px 0 35px;


    color:#ddd;


}








/* INPUTS */


.input-group{


    display:flex;


    align-items:center;


    background:white;


    border-radius:12px;


    margin-bottom:20px;


    padding:0 15px;



}



.input-group i{


    color:#555;


    font-size:18px;


}






.input-group input{


    width:100%;


    padding:15px;


    border:none;


    outline:none;


    font-size:16px;


}






.password-toggle{


    cursor:pointer;


    transition:.3s;


}



.password-toggle:hover{


    color:#1976d2;


}








/* BOTON */


button{


    width:100%;


    padding:16px;


    border:none;


    border-radius:12px;



    background:
    linear-gradient(
    135deg,
    #1976d2,
    #00bcd4
    );



    color:white;



    font-size:17px;



    font-weight:bold;



    cursor:pointer;



    transition:.3s;



}





button:hover{


    transform:translateY(-3px);



    box-shadow:
    0 10px 25px #00bcd455;


}








footer{


    text-align:center;


    margin-top:25px;


    font-size:13px;


    color:#ccc;


}







/* RESPONSIVE */


@media(max-width:500px){



.login-card{


    width:90%;


    padding:30px;


}




.logo img{


    width:230px;


}



h1{


    font-size:26px;


}



}

/* MODO HORIZONTAL EN MOVILES */

@media (max-height: 600px) and (orientation: landscape) {


    body{

        overflow-y:auto;

        padding:20px 0;

    }


    .login-card{

        margin:20px auto;

        padding:25px;

        width:380px;

    }



    .logo img{

        width:180px;

    }



    h1{

        font-size:24px;

        margin-top:10px;

    }



    .subtitle{

        margin:8px 0 20px;

    }



    .input-group{

        margin-bottom:12px;

    }



    .input-group input{

        padding:12px;

    }



    button{

        padding:13px;

    }



}