/* Portal do Gestor de Saúde · login — capa do boletim.
   Só o que é específico desta página. Tokens, módulo (.card), selo de cabeçalho,
   .pill, .theme-toggle e foco/seleção vêm de boletim.css (gerado da fonte única
   web/src/styles/tokens.css — não redefinir nada disso aqui). */

/* Controles nativos (autofill, caret, seleção de senha) seguem a edição escolhida,
   não a preferência do sistema — a SPA não precisa disso porque não tem formulário
   nativo na primeira dobra. */
:root { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

/* Capa: a Home reinicia o contador em P.01; a capa é a página anterior ao boletim,
   P.00 — gerado pelo mesmo contador, nunca escrito à mão. */
.login {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--pgs-space) * 2);
  padding: calc(var(--pgs-space) * 3) calc(var(--pgs-space) * 2) calc(var(--pgs-space) * 6);
  position: relative; z-index: 1;
  counter-reset: pagina -1;
}
.login > section { counter-increment: pagina; }

.login__masthead {
  width: 100%; max-width: 400px;
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(var(--pgs-space) * 2);
}
/* Instituição em azul institucional como TEXTO → --pgs-brand-text (= --hv-azul-texto),
   nunca --pgs-brand sólido, que reprova AA como texto sobre o canal escuro. */
.login__instituicao {
  font-family: var(--pgs-font-display); font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--pgs-brand-text);
}

.login-card { width: 100%; max-width: 400px; }
/* O selo de cabeçalho (.login-card__titulo) já vem do bloco compartilhado; aqui só o
   respiro do primeiro filho depois dele — equivalente de `.card > h2 + *`. */
.login-card__titulo + * { padding-top: calc(var(--pgs-space) * 2); }

.login-card__lede {
  margin: 0;
  font-family: var(--pgs-font-display); font-size: 11px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--pgs-text-dim);
}

/* Erro: severidade em bloco sólido ANTES do texto (regra Color-First), selo em mono,
   mensagem em Public Sans — dois runs separados, nunca misturados. */
.login-erro {
  display: flex; align-items: baseline; gap: calc(var(--pgs-space) * 1.5);
  padding-top: calc(var(--pgs-space) * 2);
  font-size: 13.5px; line-height: 1.5; color: var(--pgs-text);
}
.login-erro .pill { flex-shrink: 0; }
/* .pill--critico compartilhado já é o par AA --hv-alerta-suave/--hv-alerta-texto
   (Modelo 1, 07-set-26) — sem override local. */

.login-form {
  display: flex; flex-direction: column; gap: calc(var(--pgs-space) * 2);
  padding-top: calc(var(--pgs-space) * 2);
}
.login-form__campo { display: flex; flex-direction: column; gap: 6px; }
.login-form label {
  font-family: var(--pgs-font-display); font-size: 11px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--pgs-text-dim);
}
/* Campo: fundo no tom do papel/canal (--pgs-bg) dentro da superfície do módulo, borda
   em --pgs-text-dim e não --pgs-border — hairline estrutural dá 1,66:1 e um controle
   de formulário precisa de ≥3:1 (WCAG 1.4.11); text-dim dá 5,49:1 papel / 6,48:1 canal.
   16px evita o zoom automático do iOS ao focar. */
.login-form input {
  width: 100%; margin: 0;
  font-family: var(--pgs-font-body); font-size: 16px; line-height: 1.4;
  color: var(--pgs-text); background: var(--pgs-bg);
  border: 1px solid var(--pgs-text-dim); border-radius: var(--pgs-radius);
  padding: 9px 12px;
}
/* Foco: só o anel live-teal de :focus-visible do sistema (bloco compartilhado) —
   sem trocar a borda junto, senão vira anel duplo. */
/* Código 2FA é contado, não escrito → mono, com espaçamento de dígitos. */
.login-form__codigo { font-family: var(--pgs-font-mono); letter-spacing: 0.12em; }
.login-form__dica { font-size: 12.5px; line-height: 1.4; color: var(--pgs-text-dim); }

/* Ação primária: mesmo par live-teal dos botões primários da SPA (.fila__zona,
   .chat-widget__form). Texto em --pgs-surface e não --pgs-bg no papel: 4,66:1 vs 4,23:1
   (o par compartilhado fica abaixo de AA em 12px). No canal, tinta #05070a: 12,88:1. */
.login-form__enviar {
  margin-top: calc(var(--pgs-space) * 1);
  font-family: var(--pgs-font-display); font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--pgs-live); color: var(--pgs-surface);
  border: 1px solid var(--pgs-live); border-radius: var(--pgs-radius);
  padding: 11px 16px; cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}
[data-theme="dark"] .login-form__enviar { color: #05070a; }
.login-form__enviar:hover {
  background: color-mix(in srgb, var(--pgs-live) 86%, var(--pgs-text));
  border-color: color-mix(in srgb, var(--pgs-live) 86%, var(--pgs-text));
}

@media (max-width: 420px) {
  .login { padding-left: var(--pgs-space); padding-right: var(--pgs-space); }
}