/* ============================================================
   Rolamentos Betim — Login / Cadastro / Recuperação de senha
   Reaproveita tokens.css (var(--rb-blue) etc.) e as classes de
   formulário já existentes em contato.css (.contato-form-row,
   .contato-form-feedback...) — só os componentes realmente novos
   (card de auth, indicador de força de senha, badge PF/PJ, toggle
   de senha) ficam aqui.
   ============================================================ */

.auth-section { padding: var(--section-pad) 0; min-height: 60vh; }
.auth-layout {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 480px;
  margin: 0 auto;
}
.auth-card {
  background: var(--bg-light);
  border: 1px solid var(--line-light);
  border-radius: 20px;
  padding: 36px;
  box-shadow: var(--shadow-soft);
}
.auth-card-head { margin-bottom: 24px; text-align: center; }
.auth-card-head h1 {
  font-size: clamp(22px, 3vw, 28px);
  margin: 10px 0 8px;
}
.auth-card-head p { color: var(--text-dark-muted); font-size: 14px; margin: 0; }

.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-form[hidden] { display: none; }

.auth-password-field { position: relative; }
.auth-password-toggle {
  position: absolute;
  right: 10px;
  top: 38px;
  background: none;
  border: none;
  color: var(--text-dark-muted);
  cursor: pointer;
  font-size: 15px;
  padding: 6px;
}
.auth-password-toggle:hover { color: var(--rb-blue); }

.auth-password-requirements {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 4px;
  font-size: 12px;
}
.auth-password-requirements li {
  list-style: none;
  color: var(--text-dark-muted);
  display: flex;
  align-items: center;
  gap: 5px;
}
.auth-password-requirements li::before {
  content: '\f111';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 6px;
  color: var(--rb-chrome-3);
}
.auth-password-requirements li.is-met { color: #1FAE5B; }
.auth-password-requirements li.is-met::before { content: '\f00c'; color: #1FAE5B; font-size: 10px; }

.auth-doc-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0, 94, 184, 0.08);
  color: var(--rb-blue);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-left: 8px;
  vertical-align: middle;
}

.auth-form-row-inline { display: flex; align-items: flex-start; gap: 10px; }
.auth-form-row-inline input[type="checkbox"] {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--rb-blue);
  flex-shrink: 0;
}
.auth-form-row-inline label { font-size: 13px; color: var(--text-dark-muted); line-height: 1.5; }
.auth-form-row-inline label a { color: var(--rb-blue); text-decoration: underline; }

.auth-form-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  flex-wrap: wrap;
  gap: 8px;
}
.auth-form-links a { color: var(--rb-blue); text-decoration: none; font-weight: 600; }
.auth-form-links a:hover { text-decoration: underline; }

.auth-card-footer {
  margin-top: 24px;
  text-align: center;
  font-size: 13.5px;
  color: var(--text-dark-muted);
}
.auth-card-footer a { color: var(--rb-blue); font-weight: 700; text-decoration: none; }
.auth-card-footer a:hover { text-decoration: underline; }

.auth-form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

@media (max-width: 640px) {
  .auth-card { padding: 24px; }
  .auth-form-grid-2 { grid-template-columns: 1fr; }
}

/* Texto de ajuda sob um campo (ex.: CPF/CNPJ no cadastro) */
.auth-field-help { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.5; color: var(--text-dark-muted); }
.auth-field-help i { color: var(--rb-blue); margin-right: 4px; }
.auth-field-help strong { color: var(--text-dark); }

/* Status da consulta de CPF/CNPJ (mesma aparência de .account-zip-status em account.css,
   que não é carregado nas páginas de autenticação). */
.auth-form .account-zip-status { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.5; color: #64748B; }
.auth-form .account-zip-status:empty { display: none; }
.auth-form .account-zip-status.is-error { color: #b3261e; }
.auth-form .account-zip-status.is-ok { color: #1b7a3d; font-weight: 600; }
.auth-form .account-zip-status.is-warning { color: #9a6700; }

/* Campos de pessoa jurídica: mesmo espaçamento vertical do restante do formulário. */
#cad-pj-fields:not([hidden]) { display: flex; flex-direction: column; gap: 16px; }