/* =========================================================================
   Layout de autenticação (login / selecionar unidade) — base_auth.html.
   Card centralizado sobre fundo limpo, com a marca no topo. Sem o "chrome"
   do app (sidebar/banner) — relatório §3.6 / §4.
   ========================================================================= */
.auth-body {
  /* base.html define body como flex column; aqui centralizamos o conteúdo. */
  align-items: center; justify-content: center;
  background:
    radial-gradient(1200px 500px at 50% -10%, #fbecec 0%, transparent 60%),
    var(--bg);
  padding: 24px;
}
.auth-shell {
  width: 100%; max-width: 400px;
  display: flex; flex-direction: column; align-items: stretch; gap: 14px;
}
.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  padding: 28px 26px;
}
.auth-brand {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  margin-bottom: 22px;
}
.auth-logo { width: 56px; height: 56px; }
.auth-brand-nome { font-size: 1.2rem; font-weight: 700; color: var(--text); }
.auth-brand-tag {
  font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--amei-red);
  background: var(--amei-red-soft); border: 1px solid #f0c9c8;
  padding: 3px 10px; border-radius: var(--radius-pill);
}

/* Campos full-width empilhados (não usa <br>). */
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-campo { display: flex; flex-direction: column; gap: 6px; }
.auth-campo > span {
  font-size: 12px; font-weight: 600; color: var(--text-soft);
}
.auth-campo input, .auth-campo select { width: 100%; padding: 10px 12px; font-size: 14px; }
.auth-form .btn { width: 100%; padding: 11px 16px; font-size: 14px; margin-top: 4px; }

.auth-rodape {
  text-align: center; color: var(--muted); font-size: 12px; margin: 0;
}