/* ============================================================
   vistas/login.css — Vista de inicio de sesión
   ============================================================ */

.login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.5rem 1rem;
    background:
        radial-gradient(1100px 520px at 12% -10%, rgba(37, 99, 235, 0.16), transparent 60%),
        radial-gradient(900px 480px at 92% 8%, rgba(15, 118, 110, 0.16), transparent 62%),
        var(--admin-bg);
}

.login-card {
    width: min(100%, 25rem);
    display: grid;
    gap: 0.55rem;
    padding: 2rem 1.75rem 1.75rem;
    border: 1px solid var(--admin-border);
    border-radius: 18px;
    background: var(--admin-surface);
    box-shadow: var(--admin-shadow-lg);
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.login-brand-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 10px;
    background: linear-gradient(135deg, #2563eb, #0f766e);
    color: #ffffff;
    font-size: 1.15rem;
}

.login-brand-title { display: block; font-size: 1.1rem; font-weight: 800; line-height: 1.2; color: var(--admin-text); }
.login-brand-subtitle { display: block; color: var(--admin-muted); font-size: 0.8rem; }

.login-title { margin: 0; font-size: 1.25rem; font-weight: 800; color: var(--admin-text); }
.login-subtitle { margin: 0 0 0.5rem; color: var(--admin-muted); font-size: 0.88rem; }

.login-card .form-group { display: grid; gap: 0.3rem; margin-bottom: 0.35rem; }

.login-error {
    margin: 0.15rem 0 0;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    background: rgba(220, 38, 38, 0.09);
    color: var(--admin-danger);
    font-size: 0.85rem;
    font-weight: 600;
}

.login-aviso {
    margin: 0.15rem 0 0;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    background: var(--sidebar-soft);
    color: var(--admin-muted);
    font-size: 0.85rem;
}

.login-boton { width: 100%; margin-top: 0.65rem; min-height: 44px; }

@media (max-width: 420px) {
    .login-card { padding: 1.5rem 1.15rem 1.25rem; }
}