*{
    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;
    position:relative;
    overflow:hidden;
}

/* ===== IMAGEN DE FONDO REAL (no cover) ===== */
body::before{
    content:'';
    position:fixed;
    inset:0;
    background:url('../img/login-bg.jpg') no-repeat center top;
    background-size:contain;   /* 👈 LA CLAVE */
    background-color:#0e1a14;
    z-index:-2;
}

/* capa oscura */
.overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.55);
    z-index:-1;
}

/* ===== CONTENEDOR ===== */
.login-container{
    width:90%;
    max-width:420px;
    background:rgba(0,0,0,0.75);
    padding:40px 30px;
    border-radius:12px;
    color:white;
    text-align:center;
    backdrop-filter:blur(6px);
}

.login-container h1{
    font-size:32px;
    margin-bottom:10px;
}

.login-container p{
    margin-bottom:25px;
    font-size:15px;
    opacity:.9;
}

/* FORM */
.login-container label{
    display:block;
    text-align:left;
    margin-top:12px;
    font-weight:600;
}

.login-container input{
    width:100%;
    padding:12px;
    margin-top:6px;
    border:none;
    border-radius:6px;
    font-size:16px;
}

.login-container button{
    width:100%;
    margin-top:25px;
    padding:12px;
    border:none;
    border-radius:6px;
    background:#ff7a00;
    color:white;
    font-weight:bold;
    font-size:16px;
    cursor:pointer;
}

.error{
    color:#ffb3b3;
    margin-top:15px;
}

/* ===== DESKTOP ===== */
@media(min-width:900px){
    body::before{
        background-size:cover;  /* en pc SI usamos cover */
        background-position:center;
    }

    .login-container{
        max-width:900px;
        display:flex;
        text-align:left;
        padding:60px;
        gap:60px;
    }

    .login-left{
        flex:1;
    }

    .login-right{
        flex:1;
    }
}