/* ================================
   Login Ebook Profesional
================================ */


*{

    box-sizing:border-box;

}



body{

    margin:0;

    min-height:100vh;

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

    background:

    radial-gradient(
        circle at top left,
        #dbeafe,
        transparent 40%
    ),

    radial-gradient(
        circle at bottom right,
        #bfdbfe,
        transparent 35%
    ),

    linear-gradient(
        135deg,
        #f8fbff,
        #eef5ff
    );

}






/* ================================
   CONTENEDOR PRINCIPAL
================================ */


.login-page{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:30px;

}



.login-container{

    width:100%;

    max-width:1150px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:80px;

}







/* ================================
   CARD LOGIN
================================ */


.login-card{


    width:100%;


    max-width:440px;


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


    backdrop-filter:blur(12px);


    padding:45px;


    border-radius:30px;


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


    box-shadow:

    0 25px 60px rgba(15,23,42,.12);


    animation:

    aparecer .5s ease;


}





@keyframes aparecer{


from{

    opacity:0;

    transform:translateY(20px);

}


to{

    opacity:1;

    transform:translateY(0);

}


}







/* ================================
   LOGO
================================ */


.login-logo{


    width:90px;


    height:90px;


    margin:0 auto 20px;


    display:flex;


    justify-content:center;


    align-items:center;


}



.login-logo img{


    width:90px;


    height:90px;


    object-fit:contain;


}








/* ================================
   TITULOS
================================ */


.login-card h2{


    text-align:center;


    font-weight:800;


    font-size:29px;


    color:#111827;


    margin-bottom:10px;


}



.subtitle{


    text-align:center;


    color:#64748b;


    margin-bottom:30px;


    font-size:15px;


}









/* ================================
   FORMULARIO
================================ */


.login-card label{


    display:block;


    margin-bottom:8px;


    font-weight:600;


    color:#334155;


}



.login-card label i{


    margin-right:6px;


    color:#2563eb;


}




.login-card .form-control{


    width:100%;


    padding:14px 16px;


    border-radius:14px;


    border:1px solid #e2e8f0;


    margin-bottom:18px;


    background:#fff;


    transition:.25s;


}




.login-card .form-control:focus{


    outline:none;


    border-color:#2563eb;


    box-shadow:


    0 0 0 4px rgba(37,99,235,.12);


}









/* ================================
   PASSWORD
================================ */


.password-box{


    position:relative;


}



.password-box input{


    padding-right:55px;


}




.show-password{


    position:absolute;


    right:10px;


    top:50%;


    transform:translateY(-50%);


    background:transparent!important;


    border:none!important;


    color:#64748b!important;


    width:auto!important;


    padding:5px 10px!important;


}



.show-password:hover{


    color:#2563eb!important;


}









/* ================================
   BOTON INGRESAR
================================ */


.login-card form button[type="submit"]{


    width:100%;


    padding:15px;


    border:none;


    border-radius:14px;


    background:


    linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    );


    color:white;


    font-size:16px;


    font-weight:700;


    cursor:pointer;


    transition:.25s;


}



.login-card form button[type="submit"]:hover{


    transform:translateY(-2px);


    box-shadow:

    0 12px 25px rgba(37,99,235,.30);


}









/* ================================
   ALERTAS
================================ */


.alert{


    border-radius:14px;

}








/* ================================
   LINKS
================================ */


.login-links{


    margin-top:28px;


    display:flex;


    justify-content:center;


    align-items:center;


    gap:15px;


    flex-wrap:wrap;


}



.login-links a{


    display:flex;


    align-items:center;


    gap:6px;


    padding:10px 15px;


    border-radius:12px;


    background:#f8fafc;


    color:#2563eb;


    text-decoration:none;


    font-weight:600;


    border:1px solid #e2e8f0;


    transition:.25s;


}



.login-links a:hover{


    background:#2563eb;


    color:white;


    transform:translateY(-2px);


    box-shadow:

    0 10px 20px rgba(37,99,235,.20);


}



.login-links span{


    color:#cbd5e1;


    font-size:20px;


}








/* ================================
   IMAGEN DERECHA
================================ */


.login-image{


    flex:1;


    max-width:450px;


    text-align:center;


    display:flex;


    flex-direction:column;


    justify-content:center;


}



.login-image img{


    width:100%;


    max-width:420px;


    border-radius:

    40px 40px 40px 10px;


    box-shadow:


    0 25px 60px rgba(37,99,235,.20);


    transition:.3s;


}



.login-image img:hover{


    transform:translateY(-8px);


}







.login-image h3{


    margin-top:25px;


    font-size:34px;


    font-weight:800;


    color:#111827;


}



.login-image p{


    margin-top:10px;


    color:#64748b;


    font-size:18px;


    line-height:1.6;


}









/* ================================
   BENEFICIOS
================================ */


.login-benefits{


    margin-top:25px;


}



.login-benefits div{


    margin-bottom:12px;


    font-weight:600;


    color:#334155;


}



.login-benefits i{


    color:#2563eb;


    margin-right:8px;


}








/* ================================
   TABLET
================================ */


@media(max-width:950px){


.login-container{


    flex-direction:column;


    gap:40px;


}



.login-image{


    max-width:350px;


}



.login-image h3{


    font-size:28px;


}



}








/* ================================
   MOVIL
================================ */


@media(max-width:500px){


.login-page{


    padding:20px;


}



.login-card{


    padding:30px 22px;


}



.login-card h2{


    font-size:24px;


}



.login-image{


    display:none;


}



.login-links{


    flex-direction:column;


}



.login-links span{


    display:none;


}


}