/*
  componentes.css — peças comuns das páginas da Aporta (login, entrevista,
  telas de erro, raiz). Só lê tokens.css: nenhuma cor, fonte ou medida de
  marca escrita aqui. Carregar DEPOIS de tokens.css.

  Não carregar dentro do cockpit do cliente: aqui há seletores de elemento
  (body, h1, button...). O cabeçalho da área logada usa cabecalho-cliente.css.
*/

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--aporta-surface);
  color: var(--aporta-ink);
  font-family: var(--aporta-fonte);
  font-weight: var(--aporta-peso-texto);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul { margin: 0; }
img { max-width: 100%; }

/* Títulos, números de destaque e pergunta: Archivo expandida, peso 500 */
.titulo {
  font-stretch: var(--aporta-largura-expandida);
  font-weight: var(--aporta-peso-titulo);
  line-height: 1.2;
}
.destaque { font-weight: var(--aporta-peso-destaque); }

/* Rótulo e nota: caixa baixa com inicial maiúscula, cinza, 13px */
.rotulo, .nota {
  font-size: var(--aporta-tamanho-rotulo);
  line-height: 1.5;
  color: var(--aporta-text-muted);
}

/* Wordmark: sempre a imagem, nunca texto. Mínimo 120px de largura; o espaço
   livre em volta (>= altura das letras) é dado pelo layout de cada página. */
.wordmark { display: block; width: var(--aporta-wordmark-min); height: auto; }
.wordmark--grande { width: calc(var(--aporta-wordmark-min) + var(--aporta-e12)); }

/* Foco visível em tudo que é clicável, mas só quando vem do teclado
   (:focus-visible). Clique com mouse ou toque não deixa contorno. */
:focus-visible {
  outline: var(--aporta-foco) solid var(--aporta-accent);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

a { color: inherit; }
/* Botão nunca tem texto sublinhado, em nenhum estado. Sublinhado é só de
   link de verdade (.link). O foco segue visível pelo contorno. */
button, .botao, .link-discreto,
button:hover, button:focus, button:active { text-decoration: none; }
.link {
  color: var(--aporta-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-discreto {
  background: none;
  border: 0;
  padding: var(--aporta-e2) 0;
  font: inherit;
  min-height: 44px;              /* alvo de toque */
  font-size: 14px;
  font-weight: var(--aporta-peso-titulo);
  color: var(--aporta-ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--aporta-e1);
}
.link-discreto:hover { color: var(--aporta-accent); }

/* Botões: cantos retos, sem sombra, sem ícone no principal */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--aporta-e2);
  min-height: 48px;
  padding: var(--aporta-e3) var(--aporta-e6);
  border: var(--aporta-linha) solid transparent;
  border-radius: var(--aporta-raio);
  font: inherit;
  font-weight: var(--aporta-peso-titulo);
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.botao--principal { background: var(--aporta-accent); color: var(--aporta-on-accent); }
.botao--principal:hover { background: var(--aporta-marinho-700); }
.botao--secundario {
  background: transparent;
  color: var(--aporta-ink);
  border-color: var(--aporta-rule);
}
.botao--secundario:hover { border-color: var(--aporta-ink); }
.botao:disabled { opacity: .5; cursor: default; text-decoration: none; }
.botao--largo { width: 100%; }

/* Campo: rótulo visível acima, borda borda-campo, raio 2px; foco em accent */
.campo { display: flex; flex-direction: column; gap: var(--aporta-e2); }
.campo label { font-size: var(--aporta-tamanho-rotulo); color: var(--aporta-text-muted); }
.campo input, .campo textarea {
  width: 100%;
  padding: var(--aporta-e3);
  border: var(--aporta-linha) solid var(--aporta-borda-campo);
  border-radius: var(--aporta-raio-campo);
  background: var(--aporta-surface);
  color: var(--aporta-ink);
  font: inherit;
  font-size: 16px;               /* 16px evita o zoom automático do iPhone */
  -webkit-appearance: none;
  appearance: none;
}
.campo textarea { min-height: 128px; resize: vertical; }
.campo input:focus, .campo textarea:focus {
  border-color: var(--aporta-accent);
  outline: var(--aporta-foco) solid var(--aporta-accent);
  outline-offset: 1px;
}
.campo [aria-invalid="true"] { border-color: var(--aporta-risco); }

/* Mensagem de status: ponto colorido à esquerda + texto. A cor nunca carrega
   a informação sozinha: o texto sempre diz o que aconteceu. */
.status {
  display: flex;
  align-items: baseline;
  gap: var(--aporta-e2);
  font-size: 14px;
  color: var(--aporta-ink);
}
.status::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--aporta-azul-300);   /* neutro: pulada, sem resposta */
}
.status--positivo::before { background: var(--aporta-positivo); }
.status--atencao::before { background: var(--aporta-atencao); }
.status--risco::before { background: var(--aporta-risco); }
.status--risco { color: var(--aporta-risco); }   /* erro: mensagem em risco */

/* Mensagem informativa: fundo clareza, texto ink (nunca cinza sobre clareza) */
.mensagem {
  background: var(--aporta-clareza);
  color: var(--aporta-ink);
  padding: var(--aporta-e3) var(--aporta-e4);
  font-size: 14px;
}

/* Ícone funcional (Lucide, traço 1.5px) */
.icone {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.oculto { display: none !important; }