body{
    margin:0;
    height:100vh;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
}

/* WRAPPER */

.login-wrapper{
    display:flex;
    min-height:100vh;
    width:100%;
}

/* HERO */

.login-hero{

    flex:1.2;

    background-image:url("/static/custom/images/login-bg.jpg");
    background-size:cover;
    background-position:center;

    position:relative;

    display:flex;
    align-items:center;

    color:white;
}

/* overlay elegante */

.login-hero::before{

content:"";

position:absolute;

inset:0;

background: linear-gradient(120deg, rgb(80 20 20 / 85%), rgb(160 76 50 / 65%));
}

/* contenido hero */

.hero-content{

    position:relative;
    z-index:2;

    padding:80px;

    max-width:500px;

}

.hero-logo{

width: 100%;

margin-bottom:30px;

background: white;

padding: 8px;

border-radius: 12px;
}

.hero-content h2{

    font-weight:600;
    font-size:32px;
    margin-bottom:20px;

}

.hero-content p{

    font-size:16px;
    line-height:1.6;
    opacity:0.9;

}

/* PANEL LOGIN */

.login-panel{

    flex:1;

    display:flex;

    align-items:center;
    justify-content:center;

    background:#f7f9fb;
    position:relative;

}

.login-credits{

    position:absolute;
    bottom:16px;
    right:24px;

    display:flex;
    align-items:center;
    gap:6px;

    font-size:0.8rem;
    color:#6c757d;
    opacity:0.85;

}

.login-credits img{
    max-height:24px;

}

/* LOGIN BOX */

.login-box{

    width:380px;

}

/* TITULO */

.login-box h3{

    font-weight:600;
    margin-bottom:30px;

}

/* INPUT GROUP */

.input-group{

    border-radius:8px;
    overflow:hidden;

}

.input-group-text{

    background:#f1f3f5;
    border:none;

}

.form-control{
    height:48px;
}

.form-control:focus{
    box-shadow:none;
    background:#fff;
}

.password-group .btn{
    border:none;
    background:#f1f3f5;
}

/* BOTON */

.btn-login{

background: #ed1c24;

color:white;

border:none;

height:48px;

font-weight:600;

border-radius:8px;

transition:all .2s;
}

.btn-login:hover{

background: #b21016;

color: white;
}

/* CHECK */

.form-check{

    margin-top:10px;

}

/* MOBILE */

@media(max-width:900px){

.login-hero{
    display:none;
}

.login-panel{
    flex:1;
}

}