/* Diagnóstico gratuito e relatório (pacote P03). Só variáveis de tokens.css; mobile primeiro (390 px), sem rolagem
   horizontal em 390, 1440 e 1920 px; alvos de 44 px; foco visível herdado de base.css. */

.diag { padding-top: var(--esp-5); padding-bottom: var(--esp-7); max-width: 760px; }
.diag-relatorio { padding-top: var(--esp-6); padding-bottom: var(--esp-7); max-width: 1180px; }
/* enquanto o relatório chega pelo JS, o esqueleto ocupa a tela: o rodapé não pula quando ele entra (sem CLS) */
#rel-estado:has(> .sk) { min-height: 100vh; }
.diag-topo { margin-bottom: var(--esp-4); }
.diag-topo h1 { font-size: var(--fs-h1); line-height: var(--lh-titulo); margin: var(--esp-2) 0; }
.diag-topo h1:focus { outline: none; }
.diag-sub { color: var(--es-texto-2); margin: 0 0 var(--esp-4); }
.diag-h2 { font-size: var(--fs-h2); line-height: var(--lh-titulo); margin: 0 0 var(--esp-4); }
.diag-h2:focus { outline: none; }
.diag-h3 { font-size: var(--fs-h3); font-weight: var(--peso-h3); margin: var(--esp-5) 0 var(--esp-3); }
.diag-cartao { margin-bottom: var(--esp-5); }
.diag-etapa { margin-bottom: var(--esp-5); }
.diag-nota { font-size: var(--fs-peq); color: var(--es-texto-3); margin: var(--esp-3) 0 0; }
.diag-lista { padding-left: var(--esp-5); margin: 0 0 var(--esp-3); }
.diag-lista li { margin-bottom: var(--esp-2); }

/* grupos e opções da etapa A */
.diag-grupo { border: 0; padding: 0; margin: 0 0 var(--esp-4); min-width: 0; }
.diag-grupo legend { font-size: var(--fs-peq); font-weight: 500; margin-bottom: var(--esp-2); padding: 0; }
.diag-opcoes { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-4); margin-bottom: var(--esp-3); }
.diag-opcoes .check { align-items: center; }
.diag-linha-campo { display: flex; gap: var(--esp-2); align-items: stretch; }
.diag-linha-campo input { flex: 1 1 auto; min-width: 0; }
.diag-linha-campo .btn { flex: 0 0 auto; }
/* (0,2,0) vence `.campo select { width: 100% }` (0,1,1) de componentes.css: sem isso o código do país ocupava a linha
   e o campo do número ficava com 34 px (revisão do MVP v1) */
.diag-linha-campo .diag-ddi { flex: 0 0 auto; width: auto; min-width: 88px; }
.diag-sugestoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-bottom: var(--esp-3); }
.diag-sugestoes .ajuda { flex-basis: 100%; }
.diag-sugestao { min-height: var(--alvo); padding: 0 var(--esp-4); border-radius: var(--raio-pilula); border: 1px solid var(--es-linha-forte);
  background: var(--es-fundo); color: var(--es-texto); font: inherit; font-size: var(--fs-peq); cursor: pointer; }
.diag-sugestao[aria-pressed="true"] { background: var(--es-primaria); border-color: var(--es-primaria); color: var(--es-primaria-texto); }
.diag-escolhidos { list-style: none; padding: 0; margin: var(--esp-3) 0 0; display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.diag-chip { display: inline-flex; align-items: center; gap: var(--esp-2); background: var(--es-suave); color: var(--es-texto);
  border-radius: var(--raio-pilula); padding-left: var(--esp-4); max-width: 100%; }
.diag-chip span { overflow-wrap: anywhere; }
.diag-chip-remover { min-height: var(--alvo); min-width: var(--alvo); border: 0; background: transparent; color: var(--es-destaque);
  font: inherit; font-size: var(--fs-peq); text-decoration: underline; cursor: pointer; padding: 0 var(--esp-3); }
.diag-lista-cidades { list-style: none; margin: var(--esp-1) 0 0; padding: var(--esp-1); border: 1px solid var(--es-linha-forte);
  border-radius: var(--raio-sm); background: var(--es-fundo); max-height: 280px; overflow-y: auto; }
.diag-lista-cidades li { min-height: var(--alvo); display: flex; align-items: center; padding: 0 var(--esp-3); border-radius: var(--raio-sm); cursor: pointer; }
.diag-lista-cidades li:hover, .diag-lista-cidades li:focus { background: var(--es-suave); }
.diag-lista-cidades li[aria-disabled="true"] { cursor: default; color: var(--es-texto-2); }
.diag-opcionais { margin: 0 0 var(--esp-4); }
.diag-opcionais summary, .diag-glossario summary, .diag-score summary, .diag-hipoteses summary { min-height: var(--alvo); display: flex;
  align-items: center; cursor: pointer; color: var(--es-destaque); font-weight: var(--peso-ui); }
.diag-opcionais[open] summary { margin-bottom: var(--esp-3); }
.diag-mkt { margin-top: var(--esp-4); }
.diag-mkt legend { font-weight: 400; }
#etapa-c .btn-link, #etapa-d .btn-link, .diag-acoes .btn-link { min-height: var(--alvo); margin-top: var(--esp-3); }

/* etapa B e relatório */
.diag-intencoes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-2); }
.diag-intencoes li { background: var(--es-superficie); border-radius: var(--raio-sm); padding: var(--esp-3); display: flex; flex-direction: column; gap: var(--esp-1); }
.diag-intencoes strong { font-size: var(--fs-xl); line-height: 1; }
.diag-intencoes span { font-size: var(--fs-peq); color: var(--es-texto-2); }
.diag-termos { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--esp-2); counter-reset: termo; }
.diag-termo { border: 1px solid var(--es-linha); border-radius: var(--es-raio); padding: var(--esp-3) var(--esp-4); background: var(--es-fundo); }
.diag-termo-topo { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; justify-content: space-between; }
.diag-termo-nome { overflow-wrap: anywhere; }
.diag-volume { margin: var(--esp-2) 0 0; display: flex; flex-direction: column; gap: var(--esp-1); }
.diag-volume .texto-3 { font-size: var(--fs-peq); }
.diag-score ul { margin: var(--esp-2) 0 0; padding-left: var(--esp-5); font-size: var(--fs-peq); }
.diag-score li { margin-bottom: var(--esp-1); }
.diag-porque-titulo { margin: var(--esp-3) 0 0; font-weight: 600; font-size: var(--fs-peq); }
.diag-aviso-nota { margin: 0 0 var(--esp-3); }
.diag-opcoes-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--esp-3); }
.diag-opcoes-cards h4 { font-size: var(--fs-corpo); margin: 0 0 var(--esp-2); }
.diag-opcoes-cards p { margin: 0 0 var(--esp-2); }
.diag-op-tipo { font-size: var(--fs-peq); color: var(--es-texto-2); font-weight: var(--peso-ui); }
.diag-condicional { background: var(--es-superficie); }
.diag-projecao { margin-top: var(--esp-5); }
.diag-projecao p { margin: 0 0 var(--esp-2); }
.diag-rotulo-proj { font-size: var(--fs-peq); color: var(--es-texto-2); }
.diag-hipoteses .campo { margin-bottom: var(--esp-3); }
.diag-glossario { margin: var(--esp-5) 0; }
.diag-glossario dt { font-weight: var(--peso-ui); margin-top: var(--esp-3); }
.diag-glossario dd { margin: var(--esp-1) 0 0; color: var(--es-texto-2); }
.diag-acoes { display: flex; flex-direction: column; gap: var(--esp-2); margin-top: var(--esp-5); }

/* relatório (v2.2, revisão de design): resumo em três números com a fonte, índice num trilho fixo ao lado no computador
   e em pílulas que rolam no celular, seções com o rótulo de fio curto, tabelas em cartão e a contratação no painel Céu
   da chamada final do site */
.rel-topo { max-width: 760px; margin-bottom: var(--esp-5); }
.rel-corpo { display: grid; gap: var(--esp-6); }
.rel-corpo > * { min-width: 0; }
.rel-indice-titulo { display: none; }
.rel-indice ul { list-style: none; margin: 0; padding: 0 0 var(--esp-2); display: flex; gap: var(--esp-2); overflow-x: auto;
  scrollbar-width: thin; }
.rel-indice li { flex: none; max-width: none; }
.rel-indice a { display: inline-flex; align-items: center; min-height: var(--alvo); padding: 0 var(--esp-4); border-radius: var(--raio-pilula);
  border: 1px solid var(--es-linha-media); background: var(--es-fundo); color: var(--es-texto-2); text-decoration: none; font-weight: 500;
  white-space: nowrap; transition: border-color var(--es-dur-1), color var(--es-dur-1), background-color var(--es-dur-1); }
.rel-indice a:hover { border-color: var(--es-primaria); color: var(--es-destaque); }
.rel-indice a[aria-current="true"] { background: var(--es-suave); border-color: var(--es-suave-2); color: var(--es-destaque); }
@media (min-width: 1024px) {
  .rel-corpo { grid-template-columns: 232px minmax(0, 1fr); gap: var(--esp-8); align-items: start; }
  .rel-indice { position: sticky; top: calc(var(--topo-h) + var(--esp-5)); }
  .rel-indice-titulo { display: block; margin: 0 0 var(--esp-2); font-size: var(--fs-peq); font-weight: var(--peso-ui); color: var(--es-texto); }
  .rel-indice ul { flex-direction: column; gap: 0; overflow: visible; padding: 0; border-left: 1px solid var(--es-linha); }
  .rel-indice a { display: flex; margin-left: -1px; padding: 6px var(--esp-4); border: 0; border-left: 2px solid transparent; border-radius: 0;
    background: none; white-space: normal; line-height: 1.3; }
  .rel-indice a:hover { background: none; }
  .rel-indice a[aria-current="true"] { background: none; border-left-color: var(--es-primaria); font-weight: var(--peso-ui); }
  .rel-secoes { max-width: 840px; }
}

.diag-secao { padding-top: var(--esp-8); scroll-margin-top: calc(var(--topo-h) + var(--esp-4)); }
.diag-secao:first-child { padding-top: 0; }
.diag-secao > .rot { margin-bottom: var(--esp-2); }
.diag-secao h2 { font-size: var(--fs-h2); line-height: var(--lh-titulo); margin: 0 0 var(--esp-5); }
.rel-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-4); margin: 0 0 var(--esp-3);
  padding: var(--esp-5) 0; border-top: 2px solid var(--es-texto); border-bottom: 1px solid var(--es-linha); }
.rel-numeros > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--esp-1); min-width: 0; }
.rel-numeros dd { margin: 0; font-size: var(--fs-kpi); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; color: var(--es-dado);
  font-variant-numeric: tabular-nums; }
.rel-numeros dt { font-size: var(--fs-peq); color: var(--es-texto-2); }
.rel-numeros .rel-numero-texto dd { font-size: var(--fs-2xl); font-weight: var(--peso-ui); line-height: 1.2; letter-spacing: -0.01em;
  color: var(--es-texto); }
@media (max-width: 559px) { .rel-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rel-numeros .rel-numero-texto { grid-column: 1 / -1; } }
.nota-fonte { margin: 0 0 var(--esp-5); font-size: var(--fs-peq); color: var(--es-texto-3); }
.diag-grupos { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--esp-3); }
.diag-grupos > li { background: var(--es-fundo); border-color: var(--es-linha); }
.diag-grupos p { margin: 0 0 var(--esp-1); }
.diag-grupos .diag-h3 { margin-top: 0; }
.rel-mais > .diag-grupos { margin-top: var(--esp-2); }
.diag-rolagem { max-width: 100%; overflow-x: auto; margin-bottom: var(--esp-4); }
/* tabela em cartão (a do es-ui no site): a Linha e o raio do cartão; no celular cada linha vira um cartão com o nome
   de cada coluna (data-rotulo, componentes.css) */
.rel-tabela { border: 1px solid var(--es-linha); border-radius: var(--es-raio); background: var(--es-fundo); }
.rel-tabela .tabela thead th { background: var(--es-fundo-2); }
.rel-tabela .tabela th:first-child, .rel-tabela .tabela td:first-child { padding-left: var(--esp-4); }
.rel-tabela .tabela tbody tr:last-child > * { border-bottom: 0; }
.rel-tabela .tabela td { font-variant-numeric: tabular-nums; }
@media (max-width: 767px) {
  .rel-tabela { padding: 0 var(--esp-4); }
  .rel-tabela .tabela th[scope="row"] { display: block; padding: var(--esp-2) 0 var(--esp-1); border: 0; font-size: var(--fs-corpo);
    font-weight: var(--peso-ui); color: var(--es-texto); }
  .rel-tabela .tabela tbody tr:last-child { border-bottom: 0; }
}
.rel-mais { margin-top: var(--esp-3); }
.rel-mais > summary { display: flex; align-items: center; min-height: var(--alvo); cursor: pointer; color: var(--es-destaque);
  font-weight: var(--peso-ui); }
.rel-mais[open] > summary { margin-bottom: var(--esp-2); }
.diag-plano { margin-bottom: var(--esp-4); }
.diag-plano .selo { margin-bottom: var(--esp-2); }
.diag-preco { font-size: var(--fs-xl); font-weight: var(--peso-titulo); }
.diag-itens-plano { list-style: none; margin: 0 0 var(--esp-3); padding: 0; display: grid; gap: var(--esp-2); }
.diag-espera { margin-top: var(--esp-3); }
.diag-cta .btn-largo { margin-bottom: var(--esp-3); }
/* a contratação no painel Céu da chamada final do site (cta-final), com o plano num cartão branco */
.rel-secoes .diag-cta { margin-top: var(--esp-8); padding: var(--esp-6) var(--esp-5); background: var(--es-suave);
  border: 1px solid var(--es-primaria-linha); border-radius: var(--raio-xl); }
@media (min-width: 768px) { .rel-secoes .diag-cta { padding: var(--esp-7); border-radius: var(--raio-2xl); } }
.diag-cta > .rot { color: var(--es-destaque); }
.diag-cta .card { background: var(--es-fundo); border-color: var(--es-linha); }
.diag-cta .campo input { background: var(--es-fundo); }

/* simulador embutido na landing */
.diag-simulador { display: grid; gap: 0 var(--esp-4); }

@media (min-width: 720px) {
  .diag { padding-top: var(--esp-6); }
  .diag-intencoes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .diag-opcoes-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .diag-grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .diag-acoes { flex-direction: row; align-items: center; justify-content: space-between; }
  .diag-acoes .btn-largo { width: auto; }
  .diag-simulador { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .diag-simulador .btn { grid-column: 1 / -1; }
}