/* ==========================================================================
   PAGES / CALCULADORA
   Página raiz (index.html) — ferramenta educativa de interpretação de
   exames, NÃO diagnóstica. 3 telas (form. de dados > exame > resultado)
   trocadas via JS dentro da mesma page, sem reload. Reaproveita .section/
   .container/.btn/.field/.consent já existentes — só o que é específico
   dessas 3 telas mora aqui.
   ========================================================================== */

/* .section (layout.css raiz) usa 48→64→80px (768/1024) — menor que o padrão
   da Pré-Diabetes (64→80→96→120px, própria pipeline isolada dela). Aqui é
   sobrescrito só pra esta página (calculadora.css só carrega no index.html
   raiz, não afeta rotulo-simples/legais que também usam o layout.css
   compartilhado) pra igualar o respiro entre header e conteúdo.
   Escopado a "main .section" (não ".section" puro) pra não pegar o rodapé:
   .site-footer tem padding-block fixo de 40px por decisão de design
   (footer.css) e, como este arquivo carrega por último, um ".section" solto
   aqui ganharia da cascata e quebraria esse fixo. */
main .section {
  padding-block: 64px;
}

@media (min-width: 768px) {
  main .section {
    padding-block: 80px;
  }
}

@media (min-width: 1024px) {
  main .section {
    padding-block: 96px;
  }
}

@media (min-width: 1440px) {
  main .section {
    padding-block: 120px;
  }
}

/* Largura do passo cresce por breakpoint (igual ao resto do projeto —
   ver .container em layout.css: 768/1024/1280/1440 com valor próprio em
   cada um, nunca um único número fixo pra qualquer tela). Sem isso, o h1
   segue crescendo de fonte via base.css (36→48→56→64px) mas fica preso
   numa coluna que não cresce junto — o título gigante quebra em 4-5 linhas
   no desktop em vez de 2-3, como acontece na Pré-Diabetes. */
.calc__step {
  max-width: 560px;
  width: 100%;
  margin-inline: auto; /* bug: sem isso o passo fica colado à esquerda do
    .container em telas largas, já que .container não é flex — só .section
    é, e o wrapper direto do .calc__step é o .container. */
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .calc__step {
    max-width: 640px;
  }
}

@media (min-width: 1024px) {
  .calc__step {
    max-width: 720px;
  }
}

@media (min-width: 1280px) {
  .calc__step {
    max-width: 800px;
  }
}

.calc__step[hidden] {
  display: none;
}

/* Bug real: este bloco era um <div> sem classe/gap — como o reset zera toda
   margem (* { margin: 0 }), eyebrow/h1/intro ficavam colados sem nenhum
   espaço entre si. */
.calc__cabecalho {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.calc__eyebrow {
  display: inline-flex;
  align-self: center;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  border-radius: 50px;
  border: 1px solid var(--neutral-600);
  background: linear-gradient(90deg, var(--blue-3) 0%, var(--blue-2) 100%);
  color: var(--button-bg);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.calc__intro {
  color: var(--neutral-500);
}

.calc__semibold {
  font-weight: 600;
  color: var(--text-black);
}

/* Acolhimento na Tela 1 — tom calmo, não de alerta. Reaproveita o mesmo azul
   suave do badge "Simplifica Exame" (--blue-2/--blue-3), só que sólido em
   vez de gradiente, pra não competir com ele visualmente. */
.calc__validacao {
  padding: var(--space-5);
  border-radius: var(--radius-default);
  background: var(--blue-2);
  border: 1px solid var(--blue-3);
}

/* "Como funciona" — didática do objetivo da ferramenta na Tela 1 (home):
   3 passos curtos, pra pessoa saber exatamente o que vai acontecer antes
   de preencher qualquer dado. */
.calc__como-funciona {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.calc__como-funciona li {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: 15px;
  color: var(--text-black);
}

.calc__como-funciona-numero {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--button-bg);
  color: var(--text-white);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Autoridade — sinaliza que existe uma nutricionista de verdade por trás do
   cálculo. Credenciais reais (mesmas usadas na landing da Pré-Diabetes). */
.calc__autoridade {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-default);
  background: #fff;
  border: 1px solid var(--neutral-100);
}

.calc__autoridade-foto {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.calc__autoridade-nome {
  font-weight: 700;
}

.calc__autoridade-credencial {
  font-size: 14px;
  color: var(--neutral-400);
}

.calc__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.calc__form-error {
  color: var(--semantic-danger);
  font-size: 14px;
  display: none;
}

.calc__form-error.is-visible {
  display: block;
}

.calc__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.calc__submit[disabled] {
  opacity: 0.6;
  cursor: default;
}

.calc__refazer {
  align-self: center;
  color: var(--neutral-400);
  font-size: 14px;
  text-decoration: underline;
}

.calc__refazer:hover {
  color: var(--button-bg);
}

/* Tela de resultado — mais larga que os formulários pra caber a grade de
   cards de 2 colunas no desktop. */
.calc__step--resultado {
  max-width: 720px;
}

@media (min-width: 1024px) {
  .calc__step--resultado {
    max-width: 900px;
  }
}

@media (min-width: 1280px) {
  .calc__step--resultado {
    max-width: 1000px;
  }
}

.resultado-saudacao__titulo {
  font-size: var(--text-display-md);
}

.resultado-saudacao__nome {
  color: var(--button-bg); /* tom calmo/frio, não vermelho — acolhimento, não alarme */
}

/* Grade dos cards de marcador (glicemia, HbA1c, colesterol, triglicerídeos)
   — 1 coluna no mobile, 2 no desktop, sempre que couber (auto-fit evita
   coluna vazia com poucos marcadores preenchidos). */
.resultado-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .resultado-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

/* Base de qualquer card da tela de resultado (marcador, conexão, esperança) */
.resultado-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border-radius: var(--radius-default);
  background: #fff;
  border: 1px solid var(--neutral-100);
}

/* Mesmo bug (e mesma correção) do .calc__step[hidden] acima: display:flex
   tem a mesma especificidade do [hidden] do navegador, e como esta regra
   vem depois na cascata, ela ganha e o card continua visível mesmo com o
   atributo hidden — precisa do seletor [hidden] aqui pra vencer o empate. */
.resultado-card[hidden] {
  display: none;
}

.resultado-card__icon {
  font-size: 24px;
  line-height: 1;
}

.resultado-card__label {
  font-size: 14px;
  font-weight: 700;
  color: var(--neutral-400);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.resultado-card__valor {
  font-family: var(--font-display);
  font-size: 28px;
}

.resultado-card__texto {
  font-size: 15px;
}

/* ==========================================================================
   Card de marcador (glicemia, HbA1c, IMC).
   3 níveis, 1 tom sólido cada (monocromático dentro do próprio card, claro
   no fundo/trilho, escuro no badge/triângulo/negrito) — NUNCA vermelho: o
   nível "alto" usa roxo em vez de vermelho por decisão de produto, pra
   suavizar o impacto psicológico de um resultado bem alterado (diabetes,
   obesidade grau II/III) sem deixar de sinalizar que é diferente de
   "normal" ou "atenção". Variáveis são locais deste componente, não tokens
   globais — a paleta de marca (--brand-primary/--red-*) fica reservada pra
   alerta/CTA, não pra este contexto educativo. */
.resultado-card--marcador {
  gap: var(--space-4);
  background: var(--marcador-bg);
  border-color: var(--marcador-border);
}

/* Bom (normal / peso adequado) — verde, mesma lógica tonal do âmbar/roxo. */
.resultado-card--marcador--bom {
  --marcador-bg: #f3faf1;
  --marcador-border: #cbe8c4;
  --marcador-trilho: #dcefd6;
  --marcador-accent: #5b9a4e;
  --marcador-accent-dark: #3c6b33;
}

/* Atenção (pré-diabetes / sobrepeso / obesidade grau I / abaixo do peso) —
   âmbar/caramelo, o nível intermediário. */
.resultado-card--marcador--atencao {
  --marcador-bg: #fdf8ef;
  --marcador-border: #ecdcb8;
  --marcador-trilho: #f1e2c2;
  --marcador-accent: #b9852f;
  --marcador-accent-dark: #7a5518;
}

/* Alto (diabetes / obesidade grau II ou III) — roxo, não vermelho. */
.resultado-card--marcador--alto {
  --marcador-bg: #f7f3fb;
  --marcador-border: #ddccec;
  --marcador-trilho: #e8dcf2;
  --marcador-accent: #7e5aa8;
  --marcador-accent-dark: #573a7a;
}

.marcador__topo {
  display: flex;
  justify-content: flex-end;
}

.marcador__badge {
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--marcador-accent);
  color: var(--text-white);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.marcador__escala {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.marcador__trilho {
  position: relative;
  height: 8px;
  margin-top: 14px; /* espaço pro triângulo, que fica acima da barra — por
    isso o overflow:hidden mora só na .marcador__trilho-faixa (abaixo),
    nunca aqui: o triângulo é filho direto deste elemento e não pode ser
    cortado. */
}

/* Camada visual da barra (fundo + destaque + ticks) — só ela tem
   overflow:hidden, pra arredondar as pontas do segmento em destaque sem
   cortar o triângulo, que é irmão dela, não filho. */
.marcador__trilho-faixa {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--marcador-trilho);
  overflow: hidden;
}

/* Trecho do trilho sob a seta — mais escuro que o resto da barra, pra
   marcar visualmente a faixa em que o valor caiu (não só pela posição
   da seta em cima). */
.marcador__trilho-destaque {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--marcador-accent);
}

.marcador__tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--marcador-bg); /* "corta" a barra na cor de fundo do
    card — dá a impressão de divisória entre faixas sem precisar de mais
    de uma cor na barra */
  transform: translateX(-50%);
}

.marcador__indicador {
  position: absolute;
  top: -14px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid var(--marcador-accent-dark);
  transform: translateX(-50%);
  transition: left 0.3s ease;
}

.marcador__marcas {
  display: flex;
  justify-content: space-between;
  gap: var(--space-1);
}

.marcador__marcas span {
  flex: 1;
  font-size: 10px;
  line-height: 1.3;
  color: var(--neutral-400);
  text-align: center;
}

.marcador__marcas span:first-child {
  text-align: left;
}

.marcador__marcas span:last-child {
  text-align: right;
}

/* Faixas com mais de 4 marcas (IMC, 6 faixas) — rótulo só do número, sem
   texto/unidade, senão sobrepõe numa tela estreita. */
.marcador__marcas--compacta span {
  font-size: 9px;
}

.marcador__nome {
  font-size: 13px;
  font-weight: 700;
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.marcador__valor {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.marcador__valor-numero {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  color: var(--text-black);
  line-height: 1;
}

.marcador__valor-unidade {
  font-size: 15px;
  color: var(--neutral-400);
}

.marcador__texto {
  font-size: 15px;
  color: var(--neutral-500);
}

.marcador__texto strong {
  color: var(--marcador-accent-dark);
}

/* Card de esperança/reversão — o mais convidativo da tela, tom verde quente. */
/* Borda em degradê azul → marrom claro (mesmo tom do trilho "atenção" dos
   cards de marcador, --marcador-border) — técnica padding-box/border-box:
   o fundo branco do card ocupa até o padding-box, o degradê preenche só a
   faixa da borda. */
.resultado-card--esperanca {
  gap: var(--space-3);
  border: 2px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, var(--blue-6) 0%, #ecdcb8 100%) border-box;
}

/* Normal (verde) e diabetes (roxo) trocam só a 2ª cor do degradê — sempre
   azul no início, sempre o mesmo tom do "traçado" (--marcador-border) do
   nível equivalente nos cards de marcador, pra ficar consistente em toda
   a tela: bom=verde, atencao=âmbar (padrão acima), alto=roxo. */
.resultado-card--esperanca--bom {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, var(--blue-6) 0%, #cbe8c4 100%) border-box;
}

.resultado-card--esperanca--alto {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, var(--blue-6) 0%, #ddccec 100%) border-box;
}

.resultado-card--esperanca .resultado-card__texto {
  font-size: 16px;
  font-style: normal;
}

/* Bolha degradê no lugar do emoji — mesmo azul → marrom da borda do card.
   Centraliza o conteúdo (usada vazia no caminho alterado, com 🎉 dentro no
   caminho normal — precisa funcionar nos dois casos). */
.resultado-card__icon--bolha {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 18px;
  background: linear-gradient(135deg, var(--blue-6) 0%, #ecdcb8 100%);
}

.resultado-card__icon--bolha--bom {
  background: linear-gradient(135deg, var(--blue-6) 0%, #cbe8c4 100%);
}

.resultado-card__icon--bolha--alto {
  background: linear-gradient(135deg, var(--blue-6) 0%, #ddccec 100%);
}

/* Divisor antes do disclaimer — elemento à parte, NÃO um <p>: a regra
   global "p { max-width: 620px }" (base.css) trava a largura de leitura
   de qualquer parágrafo, então se o border-top morasse no próprio
   <p class="calc__disclaimer"> ele também ficaria travado em 620px em vez
   de ocupar 100% do container. */
.resultado-divisor {
  width: 100%;
  border-top: 1px solid var(--neutral-100);
}

/* calc__disclaimer/resultado-cta-ponte/calc__email-note são <p>, então
   herdam o max-width:620px acima — em telas largas (onde o step passa de
   620px) isso os deixa mais estreitos que os irmãos full-width (botão,
   FAQ), grudados na borda esquerda do flex column em vez de centralizados.
   margin-inline:auto centraliza o bloco quando isso acontece, sem mudar o
   text-align que cada um já tem (esquerda no disclaimer/nota, centro na
   ponte). */
.calc__disclaimer,
.resultado-cta-ponte,
.calc__email-note {
  margin-inline: auto;
}

/* Nota legal — sem negrito/emoji, pra parecer nota séria mesmo cercada de
   cards coloridos. */
.calc__disclaimer {
  padding-top: var(--space-4);
  font-size: 12px;
  color: var(--neutral-400);
  text-align: center;
}

@media (min-width: 768px) {
  .calc__disclaimer {
    font-size: 13px;
  }
}

.calc__email-note {
  font-size: 14px;
  color: var(--neutral-500);
}

@media (min-width: 768px) {
  .calc__email-note {
    font-size: 15px;
  }
}

/* ==========================================================================
   FAQ da Tela 3 — só no caminho pré-diabetes/diabetes (ver JS).
   Accordion nativo (<details>/<summary>), mesma técnica já usada no FAQ da
   Pré-Diabetes (pre-diabetes/assets/css/pages/home.css): seta em CSS puro
   que gira ao abrir, sem JS custom. Cada <details> abre/fecha
   independente das outras (sem atributo "name" no HTML).
   ========================================================================== */
.resultado-faq {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Mesma correção do .resultado-card[hidden] acima — sem isso, os dois FAQs
   (normal e alterado) ficam visíveis ao mesmo tempo. */
.resultado-faq[hidden] {
  display: none;
}

.resultado-faq__title {
  font-size: var(--text-display-md);
}

.resultado-faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.resultado-faq__item {
  padding: var(--space-4);
  background: #fff;
  border: 1px solid var(--neutral-100);
  border-radius: var(--radius-default);
}

.resultado-faq__question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  cursor: pointer;
  list-style: none;
  font-weight: 700;
}

.resultado-faq__question::-webkit-details-marker {
  display: none;
}

.resultado-faq__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  position: relative;
}

.resultado-faq__icon::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 3px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--neutral-400);
  border-bottom: 2px solid var(--neutral-400);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.resultado-faq__item[open] .resultado-faq__icon::before {
  transform: rotate(225deg);
}

.resultado-faq__answer {
  margin-top: var(--space-3);
  color: var(--neutral-500);
  font-size: 15px;
}

/* Linha de autoridade — credencial discreta, tom de rodapé. Card menor e
   mais claro que o de esperança acima (borda neutra, não azul), pra não
   competir visualmente nem com ele nem com o FAQ logo abaixo. */
.resultado-autoridade {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-default);
  background: #fff;
  border: 1px solid var(--neutral-100);
}

.resultado-autoridade__icon {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1.5;
}

.resultado-autoridade p {
  font-size: 13px;
  line-height: 1.5;
  font-style: italic;
  color: var(--neutral-400);
}

.resultado-autoridade strong {
  color: var(--neutral-500);
  font-weight: 600;
}

/* Microcopy de ponte — última frase antes do CTA, puxa o clique sem ser
   um título nem repetir o texto do próprio botão. */
.resultado-cta-ponte {
  text-align: center;
  font-weight: 600;
  color: var(--text-black);
}