/* ═══════════════════════════════════════════════════════════════
   auth.css — Estilos compartilhados entre todas as páginas auth
   login, register, forgot_password, set_password, verify_account
   ═══════════════════════════════════════════════════════════════ */

:root {
  --muted:  #71717a;
  --border: #e4e4e7;
  --light:  #f4f4f5;
  --green:  #16a34a;
}

.auth * { font-family: 'Barlow', sans-serif; }

/* ── LAYOUT ──────────────────────────────────────────────────── */
.auth-wrap {
  min-height: 72vh; display: flex;
  align-items: center; justify-content: center;
  padding: 2rem 1rem;
}
.auth-card {
  width: 100%; max-width: 420px;
  background: white; border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
}

/* ── CARD HEADER ─────────────────────────────────────────────── */
.auth-card-top { background: var(--brand); padding: 2rem 2rem 1.75rem; }
.auth-brand {
  font-family: 'Barlow Condensed', sans-serif; font-size: .72rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.35); margin-bottom: .75rem;
  animation: fadeSlideUp .6s ease both;
}
.auth-title {
  font-family: 'Barlow Condensed', sans-serif; font-size: 2rem; font-weight: 900;
  text-transform: uppercase; color: white; line-height: 1;
  animation: fadeSlideUp .7s .08s ease both;
}
.auth-title--lg { font-size: 2.2rem; }
.auth-sub { font-size: .85rem; color: rgba(255,255,255,.45); margin-top: .4rem; line-height: 1.5; animation: fadeSlideUp .7s .16s ease both; }

/* ── BODY ────────────────────────────────────────────────────── */
.auth-body { padding: 1.75rem 2rem 2rem; }

/* ── FIELDS ──────────────────────────────────────────────────── */
.auth-field { margin-bottom: 1.1rem; }
.auth-field.full { grid-column: 1 / -1; }

.auth-label {
  font-family: 'Barlow Condensed', sans-serif; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
  display: block; margin-bottom: .35rem;
}
.auth-input {
  width: 100%; padding: .65rem .9rem;
  border: 1.5px solid var(--border); border-radius: 6px;
  font-family: 'Barlow', sans-serif; font-size: .9rem; color: var(--brand);
  background: white; outline: none; transition: border-color .15s; box-sizing: border-box;
}
.auth-input:focus { border-color: var(--brand); }
.auth-input.error { border-color: var(--accent); }

.auth-hint { font-size: .7rem; color: var(--muted); margin-top: .3rem; }
.auth-field-error { font-size: .7rem; color: var(--accent); margin-top: .3rem; display: none; }
.auth-field-error.show { display: block; }

/* ── SUBMIT BUTTON ───────────────────────────────────────────── */
.auth-submit {
  width: 100%; padding: .85rem; background: var(--brand); color: white;
  border: none; border-radius: 6px; cursor: pointer; margin-top: .5rem;
  font-family: 'Barlow Condensed', sans-serif; font-size: .92rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; transition: opacity .15s;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
}
.auth-submit:hover { opacity: .88; }
.auth-submit:disabled { opacity: .4; cursor: not-allowed; }

/* ── FOOTER ──────────────────────────────────────────────────── */
.auth-footer {
  padding: 1.25rem 2rem; border-top: 1px solid var(--border);
  font-size: .82rem; color: var(--muted); text-align: center;
}
.auth-footer a {
  color: var(--brand); font-weight: 700; text-decoration: none;
  border-bottom: 1px solid var(--border); transition: border-color .15s;
}
.auth-footer a:hover { border-color: var(--brand); }

/* ── ALERTS (erro / sucesso) ─────────────────────────────────── */
.auth-alert {
  border-radius: 6px; padding: .75rem 1rem; margin-bottom: 1rem;
  font-size: .82rem; display: none; align-items: center; gap: .5rem;
}
.auth-alert.show { display: flex; }
.auth-alert.err { background: #fff5f5; border: 1px solid #fecaca; color: #ef4444; }
.auth-alert.ok  { background: #f0fdf4; border: 1px solid #bbf7d0; color: var(--green); }

/* ── REGISTER — grid de campos ───────────────────────────────── */
.auth-card--wide { max-width: 460px; }
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
@media (max-width: 480px) { .auth-row { grid-template-columns: 1fr; } }

.auth-section-label {
  font-family: 'Barlow Condensed', sans-serif; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .15em; color: var(--muted);
  grid-column: 1 / -1; padding-top: .5rem;
  border-top: 1px solid var(--border); margin-top: .25rem;
}

/* ── SET PASSWORD — barra de força ───────────────────────────── */
.strength-wrap { margin-top: .5rem; }
.strength-bar {
  height: 4px; border-radius: 4px; background: #e4e4e7; overflow: hidden; margin-bottom: .3rem;
}
.strength-fill { height: 100%; border-radius: 4px; transition: width .3s, background .3s; width: 0; }
.strength-label { font-size: .7rem; color: var(--muted); }

.field-err { font-size: .7rem; color: #ef4444; margin-top: .3rem; display: none; }
.field-err.show { display: block; }

/* ── VERIFY — inputs de código ───────────────────────────────── */
.code-hint {
  background: var(--light); border-radius: 8px; padding: 12px 16px;
  font-size: .82rem; color: var(--muted); margin-bottom: 1.5rem;
  display: flex; align-items: center; gap: .6rem;
}
.code-hint strong { color: #3f3f46; }

.code-inputs { display: flex; gap: 10px; justify-content: center; margin-bottom: 1.25rem; }
.code-digit {
  width: 52px; height: 60px; text-align: center;
  font-size: 1.6rem; font-weight: 700;
  font-family: 'Barlow Condensed', sans-serif;
  border: 2px solid var(--border); border-radius: 8px;
  background: white; color: var(--brand); outline: none; transition: border-color .15s;
  -moz-appearance: textfield;
}
.code-digit:focus { border-color: var(--brand); }
.code-digit.filled { border-color: var(--brand); background: var(--light); }
.code-digit::-webkit-outer-spin-button,
.code-digit::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.resend-wrap { margin-top: 1.25rem; text-align: center; font-size: .82rem; color: var(--muted); }
.resend-btn {
  background: none; border: none; color: var(--brand);
  font-weight: 700; cursor: pointer;
  font-family: 'Barlow', sans-serif; font-size: .82rem; text-decoration: underline;
}
.resend-btn:disabled { color: var(--muted); text-decoration: none; cursor: default; }