/* diagramas e gráficos em código (docs/design-system.md, "Gráficos e mapas") */
.diagrama-titulo { font-family: var(--f-display); font-weight: 800; font-stretch: 112%; font-size: var(--t-h3); line-height: 1.2; margin: 0 0 var(--e-4); text-align: left; hyphens: manual; max-width: 40ch; }
.diagrama .fonte { margin-top: var(--e-3); }
.diagrama .apoio { margin: var(--e-3) 0 0; text-align: left; }
.tabela-dados { margin-top: var(--e-3); font-size: var(--t-apoio); }
.tabela-dados summary { cursor: pointer; font-weight: 700; min-height: var(--toque); display: inline-flex; align-items: center; padding: 0 var(--e-2); border: 2px solid var(--qmq-line); border-radius: var(--r-pilula); }
.tabela-dados table { margin-top: var(--e-3); min-width: 0; }
.destaque-municipio { background: var(--qmq-municipio) !important; }
.destaque-estado { background: var(--qmq-estado) !important; }
.destaque-uniao { background: var(--qmq-uniao) !important; }
.grafico-barras .barra-h { grid-template-columns: minmax(120px, 190px) minmax(0, 1fr) 90px; }
@media (max-width: 719px) { .grafico-barras .barra-h { grid-template-columns: minmax(96px, 120px) minmax(0, 1fr) 76px; } }
.grafico-barras .barra-rotulo { text-align: left; line-height: 1.2; hyphens: manual; }
.grafico-barras .barra-trilho { background: var(--qmq-bg-2); }
.grafico-barras .barra-valor { background: var(--qmq-neutro); }

/* fluxo em etapas (animado por rolagem em js/fluxo.js) */
.etapas { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; counter-reset: etapa; }
.etapa { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--e-3); position: relative; padding: var(--e-3) 0 var(--e-5); }
.etapa::before { content: ""; position: absolute; left: 23px; top: 48px; bottom: 0; width: 2px; background: var(--qmq-line-2); }
.etapa:last-child::before { display: none; }
.etapa-num { width: 48px; height: 48px; border-radius: 50%; background: var(--qmq-bg-2); border: 2px solid var(--qmq-line); display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-weight: 900; font-size: 20px; flex: none; position: relative; z-index: 1; transition: background-color 300ms, color 300ms; }
.etapa-corpo { display: flex; flex-direction: column; gap: 2px; text-align: left; hyphens: manual; }
.etapa-corpo strong { font-family: var(--f-display); font-weight: 800; font-stretch: 112%; font-size: var(--t-corpo); line-height: 1.2; }
.etapa-quem { font-size: var(--t-apoio); color: var(--qmq-ink-2); }
.etapa-texto { font-size: var(--t-apoio); }
.etapa-volta { grid-column: 2; font-size: var(--t-apoio); color: var(--qmq-municipio); display: inline-flex; align-items: center; gap: var(--e-1); border: 1px dashed var(--qmq-municipio); border-radius: var(--r-pilula); padding: var(--e-1) var(--e-3); width: fit-content; margin-top: var(--e-1); }
.etapa-volta svg { width: 18px; height: 18px; }
.etapa.acesa .etapa-num, .etapa-uniao.acesa .etapa-num { background: var(--qmq-uniao); color: #FBF7F0; border-color: var(--qmq-uniao); }
.etapa-estado.acesa .etapa-num { background: var(--qmq-estado); border-color: var(--qmq-estado); }
.etapa-municipio.acesa .etapa-num { background: var(--qmq-municipio); border-color: var(--qmq-municipio); }
.etapa.acesa::before { background: var(--qmq-ink); }
@media (prefers-reduced-motion: no-preference) {
  .fluxo-etapas .etapa { opacity: .35; transition: opacity 400ms var(--curva); }
  .fluxo-etapas .etapa.acesa { opacity: 1; }
  .etapa::before { transform: scaleY(0); transform-origin: top; transition: transform 400ms var(--curva), background-color 300ms; }
  .etapa.acesa::before { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) { .fluxo-etapas .etapa { opacity: 1; } .etapa::before { background: var(--qmq-ink); } .etapa .etapa-num { background: var(--qmq-ink); color: #FBF7F0; } }

/* quociente eleitoral */
.passos { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--e-3); }
.passos li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--e-3); align-items: start; }
.passos li > div { display: flex; flex-direction: column; gap: var(--e-1); text-align: left; hyphens: manual; }
.passos li > div > span { font-size: var(--t-apoio); }
.passo-num { width: 40px; height: 40px; background: var(--qmq-acao); color: var(--qmq-acao-ink); display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-weight: 900; font-size: 18px; }
.cadeiras { display: flex; flex-direction: column; gap: var(--e-2); margin-top: var(--e-2); }
.cadeiras-linha { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: var(--e-3); align-items: center; font-size: var(--t-apoio); }
.cadeiras-linha small, .cadeiras-num small { display: block; color: var(--qmq-ink-2); }
.cadeiras-fichas { display: flex; gap: 4px; flex-wrap: wrap; }
.ficha { width: 22px; height: 22px; border-radius: 3px; display: inline-block; }
.cadeiras-num { text-align: right; font-weight: 700; }
@media (max-width: 719px) { .cadeiras-linha { grid-template-columns: 1fr auto; } .cadeiras-fichas { grid-column: 1 / -1; } }

/* árvore da Justiça */
.arvore-topo { padding: var(--e-4); border-radius: var(--r-card); display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--e-4); text-align: left; }
.arvore-topo span { font-size: var(--t-apoio); opacity: .92; }
.arvore-ramos { display: grid; gap: var(--e-3); grid-template-columns: 1fr; }
@media (min-width: 720px) { .arvore-ramos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .arvore-ramos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ramo { border-top: 3px solid var(--qmq-line); padding-top: var(--e-3); display: flex; flex-direction: column; gap: var(--e-2); text-align: left; hyphens: manual; }
.instancias { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--e-1); font-size: var(--t-apoio); }
.instancias li { display: flex; gap: var(--e-2); align-items: baseline; padding: var(--e-1) 0; border-bottom: 1px solid var(--qmq-line-2); }
.inst-grau { font-family: var(--f-display); font-weight: 800; color: var(--qmq-ink-2); flex: none; width: 24px; }
.ramo .apoio { margin: 0; }

/* repasses: blocos percorrem as setas (loop de 6 s, pausa ao tocar) */
.repasses-grade { display: grid; grid-template-columns: 1fr; gap: 0; }
.rep-no { padding: var(--e-4); border-radius: var(--r-card); display: flex; flex-direction: column; gap: 2px; text-align: left; hyphens: manual; }
.rep-no span:not(.etiqueta) { font-size: var(--t-apoio); opacity: .92; }
.rep-setas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4); padding: var(--e-2) var(--e-6); }
.rep-seta { position: relative; height: 64px; border-left: 2px solid var(--qmq-ink); margin-left: 24px; }
.rep-seta::after { content: ""; position: absolute; left: -7px; bottom: -2px; border: 6px solid transparent; border-top: 10px solid var(--qmq-ink); }
.rep-rotulo { position: absolute; left: var(--e-3); top: 50%; transform: translateY(-50%); font-size: var(--t-apoio); font-weight: 700; white-space: nowrap; }
.rep-bloco { position: absolute; left: -7px; top: 0; width: 12px; height: 12px; border-radius: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .rep-bloco { animation: desce 6s linear infinite; }
  .rep-bloco.atraso { animation-delay: 3s; }
  .repasses.pausado .rep-bloco { animation-play-state: paused; }
  @keyframes desce { 0% { top: -4px; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: calc(100% - 8px); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) { .rep-bloco { top: 40%; } .rep-bloco.atraso { display: none; } }

/* barra empilhada */
.empilhada-barra { display: flex; height: 44px; border-radius: 6px; overflow: hidden; gap: 2px; background: var(--qmq-bg-2); }
.empilhada-parte { flex: 0 0 auto; min-width: 2px; }
.empilhada-legenda { display: grid; gap: var(--e-3); margin-top: var(--e-4); grid-template-columns: 1fr; }
@media (min-width: 720px) { .empilhada-legenda { grid-template-columns: 1fr 1fr; } }
.legenda-grupo { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--e-2) var(--e-3); text-align: left; hyphens: manual; }
.legenda-grupo .legenda-cor { width: 16px; height: 16px; border-radius: 3px; margin-top: 3px; }
.legenda-grupo strong { grid-column: 2; }
.legenda-grupo span:not(.legenda-cor) { grid-column: 2; font-size: var(--t-apoio); color: var(--qmq-ink-2); }

/* PNAD, árvore de decisão */
.pnad-arvore { display: flex; flex-direction: column; gap: var(--e-3); }
.pnad-no { padding: var(--e-3) var(--e-4); border-radius: var(--r-card); display: flex; flex-direction: column; gap: 2px; text-align: left; hyphens: manual; }
.pnad-raiz { border: 2px solid var(--qmq-line); }
.pnad-no b { font-family: var(--f-display); font-weight: 900; font-size: var(--t-numero); line-height: 1; }
.pnad-no span { font-size: var(--t-apoio); opacity: .92; }
.pnad-pergunta { font-weight: 700; padding: var(--e-2) var(--e-3); border-left: 4px solid var(--qmq-acao); background: var(--qmq-bg-2); text-align: left; }
.pnad-galhos { display: grid; grid-template-columns: 1fr; gap: var(--e-3); padding-left: var(--e-4); border-left: 2px solid var(--qmq-line-2); }
@media (min-width: 720px) { .pnad-galhos { grid-template-columns: 1fr 1fr; padding-left: 0; border-left: 0; } }
.pnad-galho { display: flex; flex-direction: column; gap: var(--e-3); }

/* escada */
.degraus { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.degrau-item { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--e-3); align-items: stretch; margin-left: calc(var(--i) * 6%); }
@media (max-width: 719px) { .degrau-item { margin-left: calc(var(--i) * 3%); } }
.degrau-n { font-family: var(--f-display); font-weight: 900; font-size: 26px; display: flex; align-items: center; justify-content: center; color: var(--qmq-ink-2); }
.degrau-caixa { padding: var(--e-3) var(--e-4); border-radius: var(--r-card); display: flex; flex-direction: column; gap: 2px; text-align: left; hyphens: manual; }
.degrau-caixa span { font-size: var(--t-apoio); opacity: .92; }

/* ===== passada visual "rua e jornal" ===== */
.etapa-num { border-radius: 0; }
.etapa-volta { border-radius: 0; }
.arvore-topo, .rep-no, .pnad-no, .degrau-caixa, .ficha, .empilhada-barra, .legenda-grupo .legenda-cor { border-radius: 0; }
.pnad-pergunta { border-left: 0; border-top: 2px solid var(--qmq-ink); background: transparent; padding: var(--e-2) 0; }
.tabela-dados summary { border-radius: 0; }
.rep-bloco { border-radius: 0; }