/* ============================================================
   SAE-CL Auth — pantallas de login, 2FA, recuperación
   Fuente única para el shell de páginas de autenticación.
   Todos los valores de color provienen de tokens.css.
   ============================================================ */

body { margin: 0; }

/* ── Fondo ───────────────────────────────────────────────── */
.sae-login-bg {
    min-height: 100vh;
    background: var(--auth-bg-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.sae-login-bg::before {
    content: '';
    position: absolute;
    width: 600px; height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37,99,235,0.15) 0%, transparent 70%);
    top: -200px; left: -200px;
    pointer-events: none;
}
.sae-login-bg::after {
    content: '';
    position: absolute;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124,58,237,0.12) 0%, transparent 70%);
    bottom: -100px; right: -100px;
    pointer-events: none;
}

/* ── Card ────────────────────────────────────────────────── */
.sae-login-card {
    background: var(--auth-card-bg);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid var(--auth-card-border);
    border-radius: 20px;
    box-shadow: var(--auth-card-shadow);
    padding: 2.5rem;
    width: 100%;
    max-width: 400px;
}
[data-bs-theme="light"] .sae-login-card h3,
[data-bs-theme="light"] .sae-login-card p { color: #0F172A; }

/* ── Logo icon ───────────────────────────────────────────── */
.sae-auth-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px; height: 64px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--accent-primary-hover), var(--accent-primary));
    box-shadow: 0 8px 24px var(--accent-primary-glow);
}
.sae-auth-logo .bi { font-size: 1.75rem; color: #fff; }

/* ── Form labels ─────────────────────────────────────────── */
.sae-auth-label {
    font-size: var(--auth-label-size);
    text-transform: uppercase;
    letter-spacing: var(--auth-label-track);
    color: var(--text-secondary);
    font-weight: 600;
}

/* ── Submit button ───────────────────────────────────────── */
.sae-auth-submit {
    border-radius: var(--radius-md);
    font-size: 1rem;
    background: linear-gradient(135deg, var(--accent-primary-hover), var(--accent-primary)) !important;
    border: none !important;
    box-shadow: 0 4px 16px var(--accent-primary-glow) !important;
    transition: all var(--transition-base) !important;
}
.sae-auth-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px var(--accent-primary-glow) !important;
}

/* ── Alerts ──────────────────────────────────────────────── */
.sae-login-card .alert { border-radius: var(--radius-md); }

/* ── Footer links y texto ────────────────────────────────── */
.sae-auth-link {
    color: var(--text-tertiary);
    font-size: .82rem;
    text-decoration: none;
}
.sae-auth-link:hover { color: var(--text-secondary); }

.sae-auth-footer {
    color: var(--text-tertiary);
    font-size: .75rem;
}