/* home-w4-graficos (06/10/2026): seção #acompanhamento como momento de dados.
   Padrões do guia /leadlovers2026/design/graficos/: número grande com a
   unidade e o recorte ao lado, barra ordenada com denominador visível, parte
   do todo em barra única (sem pizza), cor de série conferida nos dois temas.
   Tokens da Wave 1 com fallback próprio; contraste no relatório da wave. */

/* Rótulo do recorte, acima da faixa de números */
.w4-kpis-label {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 36px 0 0; color: var(--ink-secondary); font-size: .9rem; font-weight: 650; line-height: 1.5;
}
.w4-kpis-dot {
  flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%;
  background: var(--grad-aurora, linear-gradient(135deg, #0176d3, #7c5cff 55%, #ff5a5f));
}

/* Faixa de números-chave: cards com acento próprio */
.delivery-list.w4-kpis {
  display: grid; grid-template-columns: 1fr; gap: 16px;
  margin-top: 14px !important; border-top: 0;
}
@media (min-width: 720px) { .delivery-list.w4-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }

.w4-kpi--blue { --w4-fill: var(--acc-azul, #0176d3); --w4-ink: var(--acc-azul-ink, #005ea8); --w4-bg: var(--acc-azul-bg, #eaf4ff); }
.w4-kpi--violet { --w4-fill: var(--acc-violeta, #7c5cff); --w4-ink: var(--acc-violeta-ink, #5536d6); --w4-bg: var(--acc-violeta-bg, #f0edff); }
.w4-kpi--green { --w4-fill: var(--acc-verde, #12a150); --w4-ink: var(--acc-verde-ink, #0f6b3a); --w4-bg: var(--acc-verde-bg, #e8f6ee); }
.w4-kpi--yellow { --w4-fill: var(--acc-amarelo, #ffc531); --w4-ink: var(--acc-amarelo-ink, #7a5300); --w4-bg: var(--acc-amarelo-bg, #fff6dc); }
:root[data-theme="dark"] .w4-kpi--blue { --w4-fill: var(--acc-azul-ink, #8acaff); --w4-ink: var(--acc-azul-ink, #8acaff); --w4-bg: var(--acc-azul-bg, #12283d); }
:root[data-theme="dark"] .w4-kpi--violet { --w4-fill: var(--acc-violeta-ink, #b9a8ff); --w4-ink: var(--acc-violeta-ink, #b9a8ff); --w4-bg: var(--acc-violeta-bg, #211a3d); }
:root[data-theme="dark"] .w4-kpi--green { --w4-fill: var(--acc-verde-ink, #7ee2a8); --w4-ink: var(--acc-verde-ink, #7ee2a8); --w4-bg: var(--acc-verde-bg, #10291d); }
:root[data-theme="dark"] .w4-kpi--yellow { --w4-fill: var(--acc-amarelo-ink, #ffd76a); --w4-ink: var(--acc-amarelo-ink, #ffd76a); --w4-bg: var(--acc-amarelo-bg, #2e2610); }

.delivery-list.w4-kpis > .w4-kpi {
  overflow: hidden; display: flex; flex-direction: column; min-width: 0;
  padding: 26px 22px 22px; border: 1px solid var(--line); border-radius: var(--radius-lg, 24px);
  background: var(--w4-bg); color: var(--ink-secondary);
  box-shadow: var(--shadow-glow, 0 10px 30px -18px rgba(1, 118, 211, .35));
}
/* A barra de acento substitui o tique da lista; o hover do home.css não a gira. */
.delivery-list.w4-kpis > .w4-kpi::before,
.delivery-list.w4-kpis > .w4-kpi:hover::before {
  left: 0; right: 0; top: 0; width: auto; height: 6px;
  border: 0; border-radius: 0; background: var(--w4-fill); transform: none;
}
.delivery-list.w4-kpis > .w4-kpi > strong {
  margin-bottom: 10px; color: var(--w4-ink);
  font-size: clamp(2.25rem, 1.7rem + 2.2vw, 3.1rem); font-weight: 780; line-height: 1.05; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.delivery-list.w4-kpis > .w4-kpi p { margin: 0; color: var(--ink-secondary); font-size: 1rem; line-height: 1.65; text-align: left; hyphens: auto; }
.delivery-list.w4-kpis > .w4-kpi p a { color: var(--brand-text); }

/* Composição das entidades: parte do todo em uma barra só */
.w4-mix { margin-top: 18px; }
.w4-mix__bar { display: flex; gap: 3px; height: 14px; overflow: hidden; border-radius: 999px; transform-origin: left center; }
.w4-mix__seg { min-width: 6px; height: 100%; }
.w4-mix__seg--br, .w4-mix__key--br { background: var(--acc-azul-ink, #005ea8); }
.w4-mix__seg--anchor, .w4-mix__key--anchor { background: var(--acc-violeta-ink, #5536d6); }
.w4-mix__seg--control, .w4-mix__key--control { background: var(--acc-coral-ink, #b3262b); }
:root[data-theme="dark"] .w4-mix__seg--br, :root[data-theme="dark"] .w4-mix__key--br { background: var(--acc-azul-ink, #8acaff); }
:root[data-theme="dark"] .w4-mix__seg--anchor, :root[data-theme="dark"] .w4-mix__key--anchor { background: var(--acc-violeta-ink, #b9a8ff); }
:root[data-theme="dark"] .w4-mix__seg--control, :root[data-theme="dark"] .w4-mix__key--control { background: var(--acc-coral-ink, #ff9a9d); }
.w4-mix__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; padding: 0; list-style: none; color: var(--ink); font-size: .875rem; font-weight: 600; line-height: 1.4; }
.w4-mix__legend li { display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; }
.w4-mix__legend li::before { content: none; }
.w4-mix__key { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 3px; }

/* Gráfico: moldura com acento e selo do recorte */
.citacao-llm { position: relative; overflow: hidden; box-shadow: var(--shadow-glow, 0 14px 40px -24px rgba(124, 92, 255, .4)); }
.citacao-llm::before {
  position: absolute; content: ""; left: 0; right: 0; top: 0; height: 5px;
  background: var(--grad-aurora, linear-gradient(90deg, #0176d3, #7c5cff 55%, #ff5a5f));
}
.w4-badge {
  display: inline-flex; align-items: center; min-height: 28px; margin: 0 0 12px; padding: 3px 12px;
  border-radius: 999px; background: var(--acc-violeta-bg, #f0edff); color: var(--acc-violeta-ink, #5536d6);
  font-size: .875rem; font-weight: 650; line-height: 1.4;
}
:root[data-theme="dark"] .w4-badge { background: var(--acc-violeta-bg, #211a3d); color: var(--acc-violeta-ink, #b9a8ff); }
.citacao-llm[data-grafico] .citacao-llm__grafico { height: 400px; }
@media (max-width: 640px) {
  .citacao-llm[data-grafico] .citacao-llm__grafico { height: 440px; }
  .delivery-list.w4-kpis > .w4-kpi { padding: 24px 18px 20px; border-radius: 18px; }
}

@media (prefers-reduced-motion: no-preference) {
  .w4-mix--pending .w4-mix__bar { transform: scaleX(0); }
  .w4-mix__bar { transition: transform 900ms cubic-bezier(.22, 1, .36, 1) 150ms; }
}

@media print {
  .delivery-list.w4-kpis > .w4-kpi { box-shadow: none; background: none; }
  .citacao-llm { box-shadow: none; }
}