/* saude.css — Busca em Saúde. Reusa resultados.css (tokens, casca, campo) e
   acrescenta só o que é próprio desta superfície.
   Não redeclara token nenhum: o teste verificar-tokens-visuais.sh compara a home
   com resultados.css, e um terceiro conjunto de tokens criaria a deriva que ele
   existe para impedir. */

/* AS DUAS BUSCAS COM PESO VISUAL IGUAL (SPEC.md §2) — mesma tipografia, mesmo
   tamanho, mesma distância. A diferença entre elas é o sublinhado de qual está
   ativa, não hierarquia. */
.abas{ display:flex; gap:.4rem; padding:.9rem 0 .2rem; }
.aba{
  font-size:.74rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--navy-3); text-decoration:none; padding:.5rem .9rem;
  border-bottom:2px solid transparent; border-radius:.2rem .2rem 0 0;
}
.aba:hover{ color:var(--navy); }
.aba[aria-current="page"]{ color:var(--navy); border-bottom-color:var(--navy); }

.saude-sub{
  margin:.55rem 0 0; font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--navy-3);
}

/* Convite a entrar. Deliberadamente sóbrio: é barreira de acesso, não anúncio. */
.saude-login{
  background:var(--surface); border:1px solid var(--line); border-radius:.6rem;
  padding:1.6rem 1.5rem; max-width:34rem;
}
.saude-login h2{ margin:0 0 .6rem; font-size:1.05rem; font-weight:500; }
.saude-login p{ margin:0 0 1.1rem; font-size:.92rem; font-weight:300; line-height:1.55; color:var(--navy-2); }
.botao-entrar{
  display:inline-block; background:var(--navy); color:#fff; text-decoration:none;
  border-radius:999px; padding:.65rem 1.6rem;
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
}
.botao-entrar:hover{ opacity:.9; }

/* Resultado. A CITAÇÃO é parte do item, não rodapé — RO-1. */
.saude-item{
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--navy); border-radius:.4rem;
  padding:1rem 1.15rem; margin:0 0 1.1rem;
}
.saude-item__fonte{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-bottom:.5rem; }
.saude-selo{
  font-size:.66rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--navy); background:var(--mist-2); border-radius:999px; padding:.2rem .6rem;
}
.saude-camada, .saude-versao{
  font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--navy-3);
}
.saude-item h2{ margin:0 0 .45rem; font-size:1rem; font-weight:500; line-height:1.4; }
.saude-item h2 a{ color:var(--navy); text-decoration:none; }
.saude-item h2 a:hover{ text-decoration:underline; }
.saude-trecho{ margin:0; font-size:.93rem; font-weight:300; line-height:1.6; color:var(--navy-2); }
/* Proveniência visível: publicação, captura e extrator lado a lado. */
.saude-meta{
  margin-top:.55rem; font-family:var(--mono); font-size:.7rem; color:var(--navy-3);
}
/* Confiança baixa de extração não fica escondida num campo de API. */
.saude-alerta{
  margin-top:.55rem; font-size:.8rem; line-height:1.45;
  background:#FFF8E1; border:1px solid #E8D9A0; border-radius:.35rem; padding:.5rem .7rem;
}

@media (max-width:620px){ .abas{ padding:.7rem 0 .1rem; } .aba{ padding:.45rem .6rem; } }

/* ---------- MODO CONVERSA (2026-07-30) ----------
   A prosa ganha peso tipográfico e os trechos viram apoio, invertendo a hierarquia
   da versão anterior (lista de resultados). É a diferença que o dono pediu entre
   esta aba e a Busca Geral: aqui se lê uma resposta, não se varre uma lista. */
.conversa{
  border-left: 3px solid var(--azul, #3987BF);
  padding: .2rem 0 .2rem 1.1rem;
  margin: .4rem 0 1.6rem;
  max-width: 62rem;
}
.conversa-texto{
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.72;
  color: var(--navy, #1D293D);
}
/* A citação é alvo de clique, então tem área de clique — número de 8px com
   sublinhado fino é decorativo, não usável. */
.cit{
  display: inline-block;
  min-width: 1.15rem;
  margin: 0 .12rem;
  padding: 0 .22rem;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.35rem;
  text-align: center;
  text-decoration: none;
  vertical-align: super;
  border-radius: .22rem;
  color: #fff;
  background: var(--azul, #3987BF);
}
.cit:hover{ filter: brightness(1.12); }
.conversa-rodape{
  margin-top: .9rem;
  font-size: .72rem;
  line-height: 1.5;
  color: var(--navy-3, #6B7A90);
}
.conversa-secao{
  margin: 2rem 0 .8rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--navy-3, #6B7A90);
}
/* Numeração do trecho: casa visualmente com o `.cit` da prosa, senão o número na
   frase e o número no trecho não se reconhecem como a mesma coisa. */
.saude-num{
  display: inline-block;
  min-width: 1.3rem;
  padding: 0 .3rem;
  font-size: .72rem;
  font-weight: 600;
  text-align: center;
  border-radius: .22rem;
  color: #fff;
  background: var(--azul, #3987BF);
}
.aviso-linha{ margin-top: .4rem; }
/* Alvo de âncora não pode ficar debaixo do cabeçalho fixo. */
.saude-item[id]{ scroll-margin-top: 5rem; }

/* ---------- FONTES COMO REFERÊNCIA, não como lista de resultados ----------
   Pedido do dono (2026-07-30): a resposta em prosa estava certa, mas oito trechos
   de 600 caracteres logo abaixo dela faziam a tela parecer um buscador. Aqui a
   fonte é uma linha; o trecho abre no clique. Verificar continua a um toque de
   distância — só deixou de disputar o olho com a resposta. */
.ref{
  border-bottom: 1px solid rgba(29,41,61,.09);
  padding: .1rem 0;
}
.ref-linha{
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .62rem .2rem;
  cursor: pointer;
  list-style: none;
}
.ref-linha::-webkit-details-marker{ display: none; }
.ref-linha:hover{ background: rgba(57,135,191,.05); }
.ref-meio{ flex: 1; min-width: 0; }
.ref-titulo{
  display: block;
  font-size: .92rem;
  line-height: 1.4;
  color: var(--navy, #1D293D);
}
.ref-miudo{
  display: block;
  margin-top: .18rem;
  font-size: .7rem;
  color: var(--navy-3, #6B7A90);
}
.ref-abrir{
  flex-shrink: 0;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--azul, #3987BF);
}
.ref-abrir:hover{ text-decoration: underline; }
.ref-trecho{
  margin: 0 0 .8rem;
  padding: .7rem .9rem;
  font-size: .86rem;
  line-height: 1.62;
  color: var(--navy-2, #47566B);
  background: rgba(29,41,61,.035);
  border-radius: .3rem;
}
.ref[open] .ref-titulo{ font-weight: 600; }
.ref[id]{ scroll-margin-top: 5rem; }

/* ---------- PROGRESSO E RETORNO (itens 6 e 10) ---------- */
.progresso{
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1.1rem 0;
  max-width: 62rem;
}
.progresso-etapa{
  font-size: .95rem;
  color: var(--navy, #1D293D);
}
/* A animação é o sinal de vida. Sem ela, texto parado por 8 s continua parecendo
   travado, mesmo trocando de etapa — a troca acontece a cada 2 a 3 segundos e o olho
   não registra ausência de movimento nesse intervalo. */
.progresso-etapa::after{
  content: '';
  display: inline-block;
  width: .5rem; height: .5rem;
  margin-left: .45rem;
  border-radius: 50%;
  background: var(--azul-solido, #2E6E93);
  animation: pulso 1.1s ease-in-out infinite;
}
@keyframes pulso{ 0%,100%{ opacity:.25; transform:scale(.8) } 50%{ opacity:1; transform:scale(1.15) } }
@media (prefers-reduced-motion: reduce){
  /* Quem pediu menos movimento no sistema não deve receber pulsação. O sinal de vida
     passa a ser só a troca de texto. */
  .progresso-etapa::after{ animation: none; opacity: .7; }
}
.progresso-detalhe{
  font-size: .78rem;
  line-height: 1.5;
  color: var(--navy-3, #5C6982);
}

.retorno{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .2rem 0 1.6rem;
  padding: .75rem 0 0;
  border-top: 1px solid rgba(29,41,61,.09);
  max-width: 62rem;
}
.retorno-rotulo{ font-size: .8rem; color: var(--navy-3, #5C6982); margin-right: .2rem; }
.retorno-btn{
  padding: .34rem .8rem;
  font-family: inherit;
  font-size: .78rem;
  color: var(--navy, #1D293D);
  background: transparent;
  border: 1px solid rgba(29,41,61,.22);
  border-radius: 1rem;
  cursor: pointer;
}
.retorno-btn:hover:not(:disabled){ border-color: var(--azul-solido, #2E6E93); color: var(--azul-solido, #2E6E93); }
.retorno-btn:disabled{ opacity: .4; cursor: default; }
.retorno-ok{ font-size: .8rem; color: var(--azul-solido, #2E6E93); }

/* Nota que separa "fontes que sustentam" de "outros resultados". A distinção é o produto:
   inflar a contagem de lastro seria o oposto do que esta tela promete. */
.conversa-nota{
  margin: -.3rem 0 .8rem;
  font-size: .78rem;
  line-height: 1.55;
  color: var(--navy-3, #5C6982);
  max-width: 62rem;
}

/* ---------------------------------------------------------------------------
   PREÇO DE MEDICAMENTO

   Fechado por padrão (`<details>`), e isso é decisão de hierarquia: a Busca em
   Saúde é o assistente que responde em prosa; preço é consulta pontual a uma
   tabela. Aberto de saída, ele disputaria o olho com a resposta — que foi
   exatamente o erro corrigido em 2026-07-30, quando as fontes inteiras
   afogavam a conversa.

   `<details>` nativo em vez de acordeão em JavaScript: funciona sem script, é
   acessível por teclado de graça e não tem estado para dessincronizar.
   --------------------------------------------------------------------------- */
.preco {
  margin: 28px auto 0;
  max-width: 900px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.preco summary {
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 10px;
  list-style: none;
  padding: 6px 0;
}
.preco summary::-webkit-details-marker { display: none; }
.preco summary::before {
  content: "▸";
  color: var(--navy-3);
  transition: transform .15s ease;
}
.preco details[open] summary::before { transform: rotate(90deg); }
.preco-rotulo { font-weight: 600; color: var(--navy); }
/* "sem IA no caminho" não é enfeite: é a diferença entre este número e a prosa
   acima dele, e quem lê precisa saber qual está olhando. */
.preco-fonte { font-size: .82rem; color: var(--navy-3); }

.preco-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin: 14px 0 10px;
}
.preco-campo { display: flex; flex-direction: column; gap: 4px; flex: 1 1 220px; }
.preco-estreito { flex: 0 1 190px; }
.preco-campo > span { font-size: .78rem; color: var(--navy-3); }
.preco-campo input,
.preco-campo select {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  font: inherit;
  color: var(--navy);
  background: var(--surface);
}
.preco-go {
  border: 0;
  border-radius: 8px;
  padding: 10px 18px;
  background: var(--navy);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.preco-nota { font-size: .84rem; color: var(--navy-3); margin: 6px 0 12px; line-height: 1.5; }

.preco-item {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--surface);
}
.preco-cabeca { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.preco-marca { color: var(--navy-3); font-size: .9rem; }
.preco-apresentacao { font-size: .88rem; color: var(--navy-2); margin-top: 2px; }
.preco-miudo { font-size: .78rem; color: var(--navy-3); margin-top: 4px; }

.preco-valores { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 10px; }
.preco-principal { display: flex; flex-direction: column; }
.preco-valor { font-family: var(--mono); font-size: 1.15rem; font-weight: 600; color: var(--navy); }
.preco-legenda { font-size: .74rem; color: var(--navy-3); }
/* O valor COM alíquota ganha destaque só quando a pessoa pediu uma — nunca por
   escolha nossa. Ver o comentário em saude.js. */
.preco-destaque .preco-valor { color: var(--navy); }
.preco-destaque .preco-legenda { color: var(--navy-2); font-weight: 600; }

/* A tabela inteira, quando nenhuma alíquota foi informada. Grade e não lista:
   26 valores em lista viram rolagem, e o ponto é poder comparar de relance. */
.preco-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.preco-celula { display: flex; justify-content: space-between; gap: 8px; font-size: .82rem; }
.preco-celula-rotulo { color: var(--navy-3); }
.preco-celula-valor { font-family: var(--mono); color: var(--navy); }

.preco-etiqueta {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--mist-2);
  color: var(--navy-2);
  font-size: .74rem;
}

@media (max-width: 560px) {
  .preco-form { flex-direction: column; align-items: stretch; }
  .preco-estreito { flex: 1 1 auto; }
}

/* ---------------------------------------------------------------------------
   FAIXA DE PROCEDÊNCIA DO PREÇO

   No TOPO do resultado e com peso visual, não no rodapé em letra miúda. A data
   decide se o número serve: preço de medicamento é regulado por lista mensal, e
   quem contesta uma glosa precisa saber de quando é ANTES de usar, não depois.

   A cor muda com a idade, mas o TEXTO carrega a informação — cor sozinha não
   comunica para quem não a distingue, e o recado precisa sobreviver a isso.
   --------------------------------------------------------------------------- */
.preco-procedencia {
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: var(--surface);
}
.preco-proc-datas { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.preco-proc-datas strong { color: var(--navy); }
.preco-proc-idade {
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--navy-3);
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--mist-2);
}
.preco-proc-coleta { font-size: .8rem; color: var(--navy-3); margin-top: 3px; }
.preco-proc-recado { font-size: .84rem; color: var(--navy-2); margin-top: 7px; line-height: 1.5; }
.preco-proc-link {
  display: inline-block;
  margin-top: 7px;
  font-size: .8rem;
  color: var(--azul-solido);
}

/* Corrente: sem alarme. A ausência de aviso também é informação. */
.preco-corrente { border-left-color: var(--navy-3); }
/* Envelhecendo: passou um ciclo de publicação. PODE haver lista mais nova — e
   "pode" é o que se sustenta, porque nós não fomos conferir. */
.preco-envelhecendo { border-left-color: var(--acento); }
.preco-envelhecendo .preco-proc-recado { color: var(--navy); font-weight: 500; }
/* Velha ou sem data: o número vira referência histórica, e a tela diz isso. */
.preco-velha,
.preco-sem-data { border-left-color: var(--acento); background: var(--mist); }
.preco-velha .preco-proc-recado,
.preco-sem-data .preco-proc-recado { color: var(--navy); font-weight: 600; }