/* ============================================================
   auth.css — Pantalla de login
   ============================================================ */

.auth-layout {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 60%, var(--color-accent) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
}

.auth-container {
    width: 100%;
    max-width: 440px;
}

.auth-card {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: var(--space-10) var(--space-10);
}

.auth-card__brand  { text-align: center; margin-bottom: var(--space-8); }
.auth-card__logo   { font-size: 3rem; margin-bottom: var(--space-3); }
.auth-card__title  { font-size: var(--text-xl); font-weight: var(--fw-bold); color: var(--color-primary); }
.auth-card__subtitle { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-1); }

.auth-form .btn--primary { margin-top: var(--space-2); height: 44px; font-size: var(--text-base); }

@media (max-width: 480px) {
    .auth-card { padding: var(--space-6); border-radius: var(--radius-lg); }
}