/* ===== RESET BASE ===== */

*{
box-sizing:border-box;
margin:0;
padding:0;
}

body{
font-family: 'Inter', sans-serif;
color:#ffffff;
background:#0f1a17;
height:100vh;
overflow:hidden;
}


/* ===== FONDO ===== */

.app-background{

position:fixed;
top:0;
left:0;
right:0;
bottom:0;

background-image:url('/static/bg-startup.jpg');
background-size:cover;
background-position:center;

filter:blur(2px);

z-index:0;
}


/* ===== OVERLAY VERDE ===== */

.app-overlay{

position:fixed;
top:0;
left:0;
right:0;
bottom:0;

background:rgba(11,27,22,0.75);

z-index:1;
}


/* ===== LAYOUT LOGIN ===== */

.login-layout{

position:relative;
z-index:2;

height:100vh;

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

padding:40px;

}


/* ===== TARJETA GLASS ===== */

.glass-card{

background:rgba(255,255,255,0.08);

backdrop-filter:blur(18px);

border-radius:18px;

padding:40px;

width:420px;

box-shadow:

0 10px 40px rgba(0,0,0,0.4),

inset 0 1px 0 rgba(255,255,255,0.15);

border:1px solid rgba(255,255,255,0.18);

}


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

.eyebrow{

font-size:13px;
opacity:0.8;
margin-bottom:8px;

letter-spacing:1px;

}

.login-card h1{

font-size:30px;
margin-bottom:10px;
font-weight:700;

}

.muted{

opacity:0.75;
margin-bottom:30px;
line-height:1.4;

}


/* ===== ERROR ===== */

.error{

background:#ff4d4d;
padding:10px;
border-radius:8px;
margin-bottom:15px;
font-size:14px;

}


/* ===== FORM ===== */

.login-form label{

display:block;
margin-bottom:18px;

font-size:14px;

}

.login-form input{

width:100%;

padding:12px 14px;

border-radius:8px;

border:none;

margin-top:6px;

font-size:14px;

background:rgba(255,255,255,0.9);

color:#000;

}


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

.login-form button{

margin-top:10px;

width:100%;

padding:14px;

border:none;

border-radius:10px;

font-size:15px;

font-weight:600;

cursor:pointer;

background:#048012;

color:white;

transition:0.2s;

}


.login-form button:hover{

background:#06a018;
transform:translateY(-1px);

}


/* ===== RESPONSIVE ===== */

@media (max-width:600px){

.glass-card{

width:100%;
padding:30px;

}

}