/* 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 { max-width: 880px; }
.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(--raio-md); 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-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 */
.diag-indice { background: var(--es-superficie); border-radius: var(--raio-md); padding: var(--esp-4); margin-bottom: var(--esp-5); }
.diag-indice ol { margin: 0; padding-left: var(--esp-5); columns: 1; }
.diag-indice li { min-height: var(--alvo); }
.diag-indice a { display: inline-flex; align-items: center; min-height: var(--alvo); }
.diag-secao { padding: var(--esp-5) 0; border-top: 1px solid var(--es-linha); scroll-margin-top: var(--esp-5); }
.diag-secao h2 { font-size: var(--fs-h2); line-height: var(--lh-titulo); margin: 0 0 var(--esp-4); }
.diag-grupos { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--esp-3); }
.diag-grupos p { margin: 0 0 var(--esp-1); }
.diag-rolagem { max-width: 100%; overflow-x: auto; margin-bottom: var(--esp-4); }
.diag-tabela { min-width: 480px; }
.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-espera { margin-top: var(--esp-3); }
.diag-cta .btn-largo { margin-bottom: var(--esp-3); }

/* 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-indice ol { columns: 2; }
  .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; }
}