/* Componentes visuais dos artigos de outubro de 2026 (indicadores, linha do tempo,
   gráfico de barras e lista de ações). Cores por token do geo-design.css ou por
   currentColor; movimento só por CSS e só com "reduzir movimento" desligado.
   Sem script, todo o conteúdo fica visível. */

.av-icone { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; }

/* Indicadores */
.av-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 1.75rem 0; padding: 0; list-style: none; }
.av-kpi { display: grid; gap: 6px; padding: 16px; border: 1px solid var(--color-border, #d8dee6); border-radius: var(--radius-md, 12px); background: var(--color-bg-alt, #f8fafc); color: var(--color-text, #0b1220); }
.av-kpi .av-icone { color: var(--color-brand, #0176d3); width: 1.5rem; height: 1.5rem; }
.av-kpi-valor { font-size: 1.75rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--color-text, #0b1220); }
.av-kpi-rotulo { font-size: 0.95rem; line-height: 1.4; color: var(--color-text-secondary, #374151); }
.av-kpi-fonte { font-size: 0.85rem; color: var(--color-text-muted, #4b5563); }
number-flow { --number-flow-char-height: auto; }

/* Linha do tempo */
.av-linha { list-style: none; margin: 1.75rem 0; padding: 0 0 0 0; border-left: 2px solid var(--color-border, #d8dee6); }
.av-linha li { position: relative; display: grid; grid-template-columns: 2.5rem 1fr; gap: 12px; padding: 0 0 20px 16px; }
.av-linha-marca { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--color-bg-alt, #f8fafc); border: 1px solid var(--color-border, #d8dee6); color: var(--color-brand, #0176d3); }
.av-linha-data { display: block; font-size: 0.9rem; font-weight: 700; color: var(--color-brand-dark, #0b5cab); }
.av-linha-titulo { display: block; font-weight: 700; color: var(--color-text, #0b1220); }
.av-linha p { margin: 4px 0 0; }

/* Gráfico de barras horizontal em HTML e CSS (eixo começa em zero) */
.av-grafico { margin: 1.75rem 0; padding: 16px; border: 1px solid var(--color-border, #d8dee6); border-radius: var(--radius-md, 12px); background: var(--color-bg, #fff); }
.av-grafico figcaption { font-weight: 700; margin-bottom: 12px; color: var(--color-text, #0b1220); }
.av-barras { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.av-barra { display: grid; grid-template-columns: minmax(7rem, 30%) 1fr auto; gap: 10px; align-items: center; font-size: 0.95rem; color: var(--color-text, #0b1220); }
.av-barra-trilho { height: 14px; border-radius: 7px; background: var(--color-bg-section, #eef2f6); overflow: hidden; }
.av-barra-preenchida { display: block; height: 100%; width: var(--av-largura, 0%); border-radius: 7px; background: var(--color-brand, #0176d3); }
.av-barra-preenchida[data-tom="secundario"] { background: var(--color-text-muted, #4b5563); }
.av-barra-valor { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 4.5rem; text-align: right; }
.av-grafico-nota { margin: 12px 0 0; font-size: 0.85rem; color: var(--color-text-muted, #4b5563); }
.av-grafico details { margin-top: 12px; }
.av-grafico summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; color: var(--color-brand-dark, #0b5cab); }
.av-grafico summary:focus-visible, .av-acoes a:focus-visible { outline: 3px solid var(--color-border-focus, #0176d3); outline-offset: 3px; }

/* Lista de ações com ícone */
.av-acoes { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: 12px; }
.av-acoes li { display: grid; grid-template-columns: 2rem 1fr; gap: 12px; align-items: start; padding: 14px 16px; border: 1px solid var(--color-border, #d8dee6); border-radius: var(--radius-md, 12px); background: var(--color-bg-alt, #f8fafc); }
.av-acoes .av-icone { color: var(--color-brand, #0176d3); width: 1.5rem; height: 1.5rem; margin-top: 2px; }

/* Movimento: primeiro degrau, CSS puro. Entrada ligada à rolagem onde o
   navegador aceita animation-timeline; nos demais, nada se move. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .av-revela { animation: av-entrar linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    .av-barra-preenchida { animation: av-crescer linear both; animation-timeline: view(); animation-range: entry 10% cover 35%; transform-origin: left center; }
  }
}
@keyframes av-entrar { from { opacity: 0.55; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes av-crescer { from { transform: scaleX(0.2); } to { transform: scaleX(1); } }

@media (max-width: 560px) {
  .av-barra { grid-template-columns: 1fr auto; }
  .av-barra-trilho { grid-column: 1 / -1; grid-row: 2; }
}

/* Datas e números que não podem quebrar no meio */
.av-nowrap { white-space: nowrap; }

/* Impressão: tudo no estado final, sem animação */
@media print {
  .av-revela, .av-barra-preenchida { animation: none !important; opacity: 1 !important; transform: none !important; }
}