body{
    margin:0;
    font-family:Arial;

    background-image: url("../assets/img/fondo.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    height:100vh;
    display:flex;

    /* mueve el formulario a la derecha */
    justify-content:flex-end;
    align-items:center;

    /* separación del borde derecho */
    padding-right:300px;
}

.login-box{
    width:450px;
    padding:30px;

    /* transparente */
    background:rgba(255,255,255,0.04);

    /* efecto vidrio */
    backdrop-filter:blur(10px);

    border-radius:18px;

    /* orilla azul turquesa */
    border:2px solid #06b6d4;

    box-shadow:0 10px 30px rgba(0,0,0,0.2);

    text-align:center;
}

.login-box h2{
    color:#06b6d4;
    margin-bottom:20px;
}

.login-box input{
    width:100%;
    padding:12px;
    margin-bottom:12px;

    border:1px solid rgba(255,255,255,0.3);
    border-radius:10px;

    background:rgba(255,255,255,0.15);
    color:white;

    outline:none;
}

.login-box input::placeholder{
    color:#e5e7eb;
}

.login-box input:focus{
    border-color:#06b6d4;
    box-shadow:0 0 12px rgba(6,182,212,0.5);
}

.login-box button{
    width:100%;
    padding:12px;
    border:none;
    border-radius:10px;

    background:linear-gradient(135deg,#06b6d4,#0ea5e9);

    color:white;
    font-weight:bold;
    cursor:pointer;

    transition:0.3s;
}

.login-box button:hover{
    transform:scale(1.03);
}

.error{
    color:#ff4d4d;
    margin-bottom:10px;
}