/* =========================================================
   Login — SGT · colores institucionales (La Paz Este)
   Navy #003261 / azul #0055a3, card blanca, logo institucional.
   ========================================================= */

:root{
    --navy:#003261;
    --navy2:#002042;
    --blue:#004990;
    --bright:#0055a3;
    --edge:#E1E6EC;
    --ink:#16202B;
    --muted:#61707F;
}

*{ box-sizing:border-box; }

html, body{
    height:100%; margin:0;
    font-family:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
    color:var(--ink);
}

.login-page{
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    padding:24px;
    background:
        radial-gradient(120% 90% at 50% -10%, #0a4079 0%, var(--navy) 55%, var(--navy2) 100%);
}

.login-card{
    width:100%; max-width:400px;
    background:#fff; border-radius:18px;
    padding:38px 34px 26px;
    box-shadow:0 30px 70px -28px rgba(0,0,0,.55);
    text-align:center;
}

.login-logo{
    display:block; width:120px; height:auto; margin:0 auto 14px;
}

.login-title{
    margin:0 0 3px; color:var(--navy);
    font-size:1.4rem; font-weight:800; letter-spacing:-.01em; line-height:1.15;
}
.login-sub{
    margin:0 0 26px; color:var(--muted); font-size:.9rem;
}

.login-form{ text-align:left; }

.login-field{ margin-bottom:15px; }
.login-field label{
    display:block; font-size:.74rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.06em; color:var(--muted); margin-bottom:6px;
}
.login-field input{
    width:100%; padding:12px 14px;
    border:1.5px solid var(--edge); border-radius:10px;
    font:inherit; font-size:1rem; color:var(--ink); background:#fff;
    transition:border-color .15s ease, box-shadow .15s ease;
}
.login-field input:focus{
    outline:none; border-color:var(--bright);
    box-shadow:0 0 0 3px rgba(0,85,163,.15);
}

.login-btn{
    width:100%; margin-top:6px; padding:13px;
    border:0; border-radius:10px; cursor:pointer;
    background:var(--bright); color:#fff;
    font:inherit; font-size:1.02rem; font-weight:700; letter-spacing:.02em;
    box-shadow:0 10px 22px -10px rgba(0,85,163,.6);
    transition:background .15s ease, transform .1s ease;
}
.login-btn:hover{ background:var(--blue); }
.login-btn:active{ transform:translateY(1px); }

.login-error{
    background:#fbe4e3; color:#a3221d; border:1px solid #f0cfce;
    border-radius:10px; padding:11px 14px; margin-bottom:16px; font-size:.9rem;
    text-align:center;
}

.login-foot{
    margin:22px 0 0; font-size:.76rem; color:#9aa8b6;
}

@media (max-width:480px){
    .login-card{ padding:30px 24px 22px; }
    .login-logo{ width:100px; }
    .login-title{ font-size:1.25rem; }
}