/* ============================================================
   Seiva · componente "ajuda" ("Como funciona")
   ------------------------------------------------------------
   Achado S4 da auditoria "Redline Seiva" (2026-09-02), item P1-B1:
   as telas abriam com texto de manual — tres caixas de explicacao
   antes do primeiro medicamento, um paragrafo dizendo o que existe
   "dentro de cada evolucao", dois avisos de que a calculadora nao
   salva. Renomados explicam UMA vez, em componente recolhido.

   O markup fica em app/templates/_ajuda.html (macro Jinja); aqui so
   a aparencia. Carregado DEPOIS dos tokens, no base.html, porque usa
   var(--nt-*) — e por isso vale nos DOIS temas sem uma regra a mais:
   os tokens e que viram no data-theme="dark".

   Nada aqui depende de JavaScript: e o <details>/<summary> nativo
   (a CSP com nonce nao executa atributo de evento).
   ============================================================ */

details.ajuda { margin: 8px 0 14px; }

/* O resumo e uma PILULA discreta, do tamanho do texto — nao uma faixa
   de largura inteira, senao volta a competir com o titulo da tela. */
details.ajuda > summary {
  display: inline-flex; align-items: center; gap: 7px;
  width: fit-content; max-width: 100%;
  padding: 5px 11px 5px 9px;
  border: 1px solid var(--nt-brand-soft-line, #CFE1CF);
  border-radius: 999px;
  background: var(--nt-brand-soft, #E7F0E7);
  color: var(--nt-brand-deep, #365A43);
  font-size: 13px; font-weight: 600; line-height: 1.3;
  cursor: pointer; user-select: none;
  list-style: none;               /* tira o triangulo padrao (Firefox) */
}
details.ajuda > summary::-webkit-details-marker { display: none; }
details.ajuda > summary::after {
  content: "\25B8"; font-size: 10px; opacity: .8; margin-left: 1px;
}
details.ajuda[open] > summary::after { content: "\25BE"; }
details.ajuda > summary:hover { border-color: var(--nt-brand, #4C7A5B); }
details.ajuda > summary:focus-visible {
  outline: 2px solid var(--nt-brand, #4C7A5B); outline-offset: 2px;
}
.ajuda-icone { flex: 0 0 auto; display: block; }

/* O corpo e um cartao SUAVE: nao e aviso nem alerta — e o manual que
   a pessoa foi buscar. Fica com a barra da marca a esquerda para se
   distinguir de .dica/.aviso, que continuam sendo recado do sistema. */
details.ajuda > .ajuda-corpo {
  margin-top: 8px;
  padding: 12px 15px;
  border: 1px solid var(--nt-line, #E4E1D3);
  border-left: 3px solid var(--nt-brand-soft-line, #CFE1CF);
  border-radius: var(--nt-r, 12px);
  background: var(--nt-panel2, #FAF8F1);
  color: var(--nt-body, #4C5548);
  font-size: 13.5px; line-height: 1.6;
}
.ajuda-corpo > :first-child { margin-top: 0; }
.ajuda-corpo > :last-child { margin-bottom: 0; }
.ajuda-corpo p { margin: 0 0 9px; }
.ajuda-corpo ul { margin: 0 0 9px; padding-left: 20px; }
.ajuda-corpo li { margin-bottom: 3px; }
.ajuda-corpo strong { color: var(--nt-ink, #1F281F); }
.ajuda-corpo code { font-size: 12.5px; }

/* Ao lado de um botao ou de um titulo, a pilula desce meio pixel para
   alinhar com a linha de base do vizinho. */
.acoes details.ajuda, h2 details.ajuda, h3 details.ajuda { margin: 0; }
.acoes details.ajuda > .ajuda-corpo { margin-bottom: 4px; }

/* Nota de rodape de tabela (o "Fonte: ..." que se repetia em toda linha
   do painel de exames virou UMA linha por grupo). */
.nota-fonte {
  margin: -6px 0 18px;
  font-size: 12.5px; line-height: 1.5;
  color: var(--nt-body, #4C5548);
}

@media (max-width: 640px) {
  details.ajuda > .ajuda-corpo { padding: 11px 12px; font-size: 13px; }
}