/* ──────────────────────────────────────────────────────────────────────────
   Pantallas de acceso (login, registro, recuperar contraseña).
   Tema CLARO, comparte el lenguaje visual de la landing nueva (landing.css).
   Todo bajo .zofi-auth para no chocar con el tema del dashboard (zofi.css).
   ────────────────────────────────────────────────────────────────────────── */

.zofi-auth {
    --a-teal:        #0a6b7c;
    --a-teal-deep:   #0d3f49;
    --a-mint:        #2fa89b;
    --a-ink:         #10333c;
    --a-text:        #4a636b;
    --a-text-soft:   #5a727a;
    --a-page:        #eef1f2;
    --a-surface:     #f7fafb;
    --a-border:      #eaf0f1;
    --a-border-soft: #d7e3e5;

    min-height: 100vh;
    background: var(--a-page);
    color: var(--a-ink);
    font-family: 'Manrope', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.zofi-auth h1,
.zofi-auth h2,
.zofi-auth h3,
.zofi-auth h4 {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    letter-spacing: -.02em;
}

/* ── Marca ───────────────────────────────────────────────────────────────── */
.zofi-auth .auth-brand {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    color: var(--a-teal);
    letter-spacing: -.01em;
}

/* ── Panel de branding (izquierda, solo desktop) ─────────────────────────── */
.auth-hero-title { color: var(--a-ink); }
.auth-hero-title .accent { color: var(--a-teal); }
.auth-hero-text { color: var(--a-text); }
.auth-stat-n { color: var(--a-teal); font-family: 'Space Grotesk', sans-serif; }
.auth-stat-l { color: var(--a-text-soft); }
.auth-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #e7f4f1;
    color: var(--a-teal);
    font-weight: 700;
    font-size: 13px;
    padding: 7px 14px;
    border-radius: 999px;
}

/* ── Card del formulario ─────────────────────────────────────────────────── */
.zofi-auth .auth-card {
    background: #fff;
    border: 1px solid var(--a-border);
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 30px 70px rgba(16, 51, 60, .14);
}

.auth-title { color: var(--a-ink); }
.auth-sub   { color: var(--a-text-soft); }
.auth-label {
    font-size: .82rem;
    font-weight: 600;
    color: #3f5860;
    display: block;
    margin-bottom: .4rem;
}
.auth-optional  { color: var(--a-border-soft); }
.auth-divider   { border-color: var(--a-border-soft) !important; }

.auth-link        { color: var(--a-teal); text-decoration: none; font-weight: 600; }
.auth-link:hover  { color: var(--a-mint); }
.auth-link-muted        { color: var(--a-text-soft); text-decoration: none; }
.auth-link-muted:hover  { color: var(--a-teal); }

/* ── Inputs ──────────────────────────────────────────────────────────────── */
.zofi-auth .form-control {
    background: #fff;
    border: 1px solid var(--a-border-soft);
    color: var(--a-ink);
    border-radius: 10px;
    padding: .8rem 1rem;
    transition: border-color .2s, box-shadow .2s;
}
.zofi-auth .form-control:focus {
    background: #fff;
    border-color: var(--a-teal);
    box-shadow: 0 0 0 3px rgba(10, 107, 124, .15);
    color: var(--a-ink);
}
.zofi-auth .form-control::placeholder { color: #9db0b5; }

/* ── Botón primario alineado al teal de la landing ───────────────────────── */
.zofi-auth .btn-zofi {
    background: var(--a-teal);
    box-shadow: 0 8px 20px rgba(10, 107, 124, .18);
}
.zofi-auth .btn-zofi:hover {
    background: #085768;
}