*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}

body{
height:100vh;
}

/* fondo */

.login-background{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;

background-image:url('../img/fondo.jpg');
background-size:cover;
background-position:center;

filter:blur(6px) brightness(0.7);

z-index:-1;
}

/* contenedor */

.login-container{
height:100vh;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
}

/* tarjeta */

.login-card{
background:white;
padding:40px;
border-radius:12px;

width:100%;
max-width:380px;

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

text-align:center;
}

/* logo */

.logo-container img{
width:80px;
margin-bottom:10px;
}

/* titulo */

.login-card h2{
margin-bottom:20px;
color:#1f2937;
}

/* inputs */

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

border:1px solid #d1d5db;
border-radius:6px;

font-size:14px;
}

/* botón */

.login-card button{
width:100%;
padding:12px;

background:#2563eb;
color:white;

border:none;
border-radius:6px;

font-size:16px;
cursor:pointer;
}

.login-card button:hover{
background:#1d4ed8;
}

/* error */

.login-error{
background:#fee2e2;
color:#b91c1c;

padding:10px;
border-radius:6px;

margin-bottom:15px;

font-size:14px;
}

/* responsive */

@media (max-width:480px){

.login-card{
padding:30px 20px;
}

.logo-container img{
width:60px;
}

}

.login-warning{
background:#fef3c7;
color:#92400e;
padding:12px;
border-radius:8px;
margin-bottom:15px;
font-size:14px;
text-align:center;
}