/* ===================================
   Recuperar contraseña Ebook
=================================== */

*{
    box-sizing:border-box;
}



body{

    margin:0;

    min-height:100vh;

    font-family:"Inter",Arial,sans-serif;

    background:
    linear-gradient(
        135deg,
        #f8fbff,
        #eaf2ff
    );

}



/* CONTENEDOR */

.login-page{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

}




/* TARJETA */

.login-card{


    width:100%;

    max-width:430px;

    background:white;

    padding:40px;


    border-radius:28px;


    box-shadow:

    0 25px 70px rgba(0,0,0,.12);


    animation:

    aparecer .4s ease;


}



@keyframes aparecer{


from{

    opacity:0;

    transform:translateY(20px);

}


to{

    opacity:1;

    transform:translateY(0);

}


}



/* LOGO */

.login-logo{


    width:90px;

    height:90px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:20px;


}



.login-logo img{


    width:85px;

    height:85px;

    object-fit:contain;


}



/* TITULOS */


h2{


    text-align:center;

    color:#111827;

    font-size:28px;

    font-weight:800;

    margin-bottom:10px;


}



.subtitle{


    text-align:center;

    color:#6b7280;

    margin-bottom:30px;


}



/* LABEL */


label{


    display:block;

    font-weight:600;

    color:#374151;

    margin-bottom:8px;


}



/* INPUT */


.form-control{


    width:100%;

    padding:14px 16px;

    border-radius:14px;

    border:1px solid #e5e7eb;

    font-size:15px;

    margin-bottom:20px;


}



.form-control:focus{


    outline:none;

    border-color:#0d6efd;


    box-shadow:

    0 0 0 4px rgba(13,110,253,.12);


}



/* BOTON */


button{


    width:100%;


    padding:14px;


    border:none;


    border-radius:14px;


    background:#0d6efd;


    color:white;


    font-weight:700;


    font-size:16px;


    cursor:pointer;


    transition:.3s;


}



button:hover{


    background:#0b5ed7;

    transform:translateY(-2px);


}




/* ALERTAS */


.alert{


    padding:15px;

    border-radius:14px;

    margin-bottom:20px;

    font-size:14px;


}



.alert-info{


    background:#e8f3ff;

    color:#084298;

    border:1px solid #b6d4fe;


}



.alert-warning{


    background:#fff3cd;

    color:#664d03;

    border-radius:14px;

}



/* ENLACE LOGIN */


a{


    color:#0d6efd;

    text-decoration:none;

    font-weight:600;


}



a:hover{


    text-decoration:underline;


}



/* MODO PRUEBA */


hr{


    margin:25px 0;

    border-color:#eee;


}



/* RESPONSIVE */


@media(max-width:500px){


.login-card{


    padding:30px 22px;


}


h2{


    font-size:24px;


}


}