/* © 2026 Jose Carvalho. Intel Ceasa. Ver LICENSE. */
/* ============================================================
   OS NOVE GRAFICOS QUE EXPLICAM SOZINHOS (r84, 03/10/2026). O JS mora em assets/js/grafico.js, ao
   fim do arquivo (barraDeMeta, anelDeMeta, mapaDeArvore, cascataDeSaldo, calendarioDeCalor, funil,
   pequenosMultiplos, linhaFina, mapaDoPiaui); aqui mora so o que e estilo.

   NENHUMA COR E ESCRITA AQUI: tudo sai dos tokens (camada 3 `--grafico-*`, camada 2 `--chart-2` de
   "entra" e `--chart-5` de "sai", `--tendencia-*`), entao claro e escuro trocam sozinhos. O texto usa
   sempre tinta de texto (`--foreground`, `--muted-foreground`), nunca a cor da serie: a cor da serie
   mora na marca, e o nome escrito ao lado carrega a identidade.
   MOVIMENTO: so `--grafico-cresce` (200 ms) com a curva `--saida`, e nenhum com "reduzir movimento".
   TOQUE: tudo o que se toca tem 44 px de altura no celular (`@media (pointer: coarse)`).
   ============================================================ */
.gr-novo {
  position: relative;
  width: 100%;
  min-width: 0; /* a armadilha do flex e do grid: sem isto o desenho empurra a pagina para o lado no celular */
  font-family: var(--fonte);
  color: var(--foreground);
}
.gr-novo svg {
  display: block;
  width: 100%;
  overflow: visible;
}
.gr-novo text {
  font-family: var(--fonte);
  font-size: 12px;
  fill: var(--muted-foreground);
}
.gr-corpo {
  min-width: 0;
}
/* o desenho de "nao ha dado": caixa tracejada com a frase, nunca um grafico em zero */
.gr-novo.vazio {
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  min-height: 72px;
  border: 1px dashed var(--border);
  border-radius: var(--raio-3);
}
.gr-sem-dado {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 13px;
}
.gr-nota {
  margin: 8px 0 0;
  color: var(--muted-foreground);
  font-size: 12px;
}

/* ---------- a dica: no passar do mouse e no toque, valor exato, sem frase ---------- */
.gr-dica {
  position: absolute;
  z-index: 6;
  left: 0;
  top: 0;
  min-width: 120px;
  max-width: min(280px, 100%);
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--raio-2);
  background: var(--popover);
  color: var(--popover-foreground);
  box-shadow: var(--sombra-md);
  font-size: 13px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--rapido) var(--saida);
}
.gr-dica.visivel {
  opacity: 1;
}
.gr-dica-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.gr-dica-linha span {
  color: var(--muted-foreground);
}
.gr-dica-linha strong {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

/* a barra que cresce: 200 ms, so em quem tem direcao de crescimento */
.gr-cresce {
  transform-origin: left center;
  transform-box: fill-box;
  animation: gr-cresce var(--grafico-cresce) var(--saida) backwards;
}
@keyframes gr-cresce {
  from {
    transform: scaleX(0.02);
  }
}
.gr-multiplos-barra.gr-cresce {
  transform-origin: center bottom;
  animation-name: gr-sobe;
}
@keyframes gr-sobe {
  from {
    transform: scaleY(0.02);
  }
}
@media (prefers-reduced-motion: reduce) {
  .gr-cresce,
  .gr-multiplos-barra.gr-cresce {
    animation: none;
  }
  .gr-dica {
    transition: none;
  }
}

/* o chip: a passagem do funil e a porcentagem da meta. Seta e sinal escritos, a cor so reforca */
.gr-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--secondary);
  color: var(--foreground);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.gr-chip.bom {
  background: var(--tendencia-sobe-fundo);
  color: var(--tendencia-sobe-cor);
}

/* ---------- 1. barra de meta ---------- */
.gr-meta {
  display: grid;
  gap: 4px;
}
.gr-meta-cab {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.gr-meta-rotulo {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gr-meta-valor {
  font-family: var(--fonte-numero);
  font-size: 20px;
  line-height: 1.1;
}
.gr-meta-zona {
  display: flex;
  align-items: center;
  min-height: 28px;
}
.gr-meta-trilho {
  position: relative;
  width: 100%;
  height: 16px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--muted-foreground) 8%, transparent);
}
.gr-meta-faixa {
  position: absolute;
  top: 0;
  bottom: 0;
  background: color-mix(in srgb, var(--muted-foreground) calc(30% - var(--nivel) * 6%), transparent);
}
.gr-meta-barra {
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  border-radius: 3px;
}
.gr-meta-marca {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--foreground);
}
.gr-meta-marca::after {
  content: "";
  position: absolute;
  inset: -8px -12px; /* a area de toque do traco, que e fino */
}
.gr-meta-pe {
  color: var(--muted-foreground);
  font-size: 12px;
}

/* ---------- 2. anel de meta ---------- */
.gr-anel-trilho {
  stroke: color-mix(in srgb, var(--muted-foreground) 18%, transparent);
}
.gr-novo .gr-anel-centro {
  fill: var(--foreground);
  font-family: var(--fonte-numero);
  font-size: 28px;
  font-weight: 700;
}
.gr-novo .gr-anel-apoio {
  font-size: 12px;
}
.gr-anel-toque {
  cursor: default;
}

/* ---------- 3. mapa de arvore ---------- */
.gr-arvore-rect {
  fill: color-mix(in srgb, var(--cor) 22%, var(--card));
  stroke: color-mix(in srgb, var(--cor) 55%, var(--card));
  stroke-width: 1;
}
.gr-arvore-faixa {
  fill: var(--cor);
}
.gr-arvore-item {
  cursor: default;
}
.gr-arvore-item:hover .gr-arvore-rect {
  fill: color-mix(in srgb, var(--cor) 32%, var(--card));
}
.gr-novo .gr-arvore-rotulo {
  fill: var(--foreground);
  font-size: 12px;
  font-weight: 700;
}
.gr-novo .gr-arvore-valor {
  fill: var(--foreground);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* ---------- 4. cascata de saldo ---------- */
.gr-saldo-ligacao {
  stroke: var(--muted-foreground);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0.55;
}
.gr-saldo-zero {
  stroke: var(--muted-foreground);
  stroke-width: 1;
}
.gr-novo .gr-saldo-rotulo {
  fill: var(--foreground);
  font-size: 13px;
}
.gr-novo .gr-saldo-valor {
  fill: var(--foreground);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.gr-novo .gr-saldo-valor.entra {
  fill: var(--tendencia-sobe-cor);
}
.gr-novo .gr-saldo-valor.sai {
  fill: var(--tendencia-desce-cor);
}
.gr-saldo-semdado {
  fill: none;
  stroke: var(--muted-foreground);
  stroke-dasharray: 2 2;
}
.gr-saldo-linha:hover .gr-saldo-barra {
  opacity: 0.85;
}

/* ---------- 5. calendario de calor ---------- */
.gr-cal-mes {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
}
.gr-cal-grade {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.gr-cal-cab {
  color: var(--muted-foreground);
  font-size: 12px;
  text-align: center;
}
.gr-cal-dia {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  min-height: 44px;
  aspect-ratio: 1 / 1;
  padding: 4px 5px;
  overflow: hidden;
  border-radius: 6px;
  background: color-mix(in srgb, var(--cor) calc(var(--i) * 100%), var(--card));
  color: var(--foreground);
  cursor: default;
}
/* SEM DADO e outro desenho, nao outra cor: contorno tracejado e nenhum preenchimento */
.gr-cal-dia.sem-dado {
  border: 1px dashed color-mix(in srgb, var(--muted-foreground) 55%, transparent);
  background: transparent;
  color: var(--muted-foreground);
}
.gr-cal-dia.zero {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--muted-foreground) 25%, transparent);
}
.gr-cal-n {
  font-size: 12px;
  line-height: 1;
}
.gr-cal-v {
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  white-space: nowrap;
}
/* o valor so aparece na celula quando CABE (o JS mede e poe `hidden`); o que nao cabe fica na dica */
.gr-cal-v[hidden] {
  display: none;
}
.gr-cal-escala {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-top: 10px;
  color: var(--muted-foreground);
  font-size: 12px;
}
.gr-cal-rampa {
  width: 72px;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, color-mix(in srgb, var(--cor) 18%, var(--card)), color-mix(in srgb, var(--cor) 55%, var(--card)));
}
.gr-cal-legenda-sem {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.gr-cal-amostra-sem {
  width: 12px;
  height: 12px;
  border: 1px dashed color-mix(in srgb, var(--muted-foreground) 55%, transparent);
  border-radius: 3px;
}

/* ---------- 6. funil ---------- */
.gr-funil {
  display: grid;
  gap: 0;
}
.gr-funil-etapa {
  display: grid;
  gap: 6px;
  min-height: 44px;
}
.gr-funil-cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.gr-funil-rotulo {
  min-width: 0;
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gr-funil-valor {
  font-family: var(--fonte-numero);
  font-size: 20px;
  line-height: 1.1;
}
.gr-funil-trilho {
  display: flex;
  justify-content: center;
  height: 18px;
}
.gr-funil-barra {
  display: block;
  height: 100%;
  border-radius: 5px;
}
.gr-funil-semdado {
  display: block;
  width: 100%;
  border-top: 2px dashed color-mix(in srgb, var(--muted-foreground) 55%, transparent);
  align-self: center;
}
.gr-funil-passagem {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 36px;
}

/* ---------- 7. pequenos multiplos ---------- */
.gr-multiplos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--min, 150px), 1fr));
  gap: 12px;
}
.gr-multiplos-cartao {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--raio-3);
  background: var(--card);
}
.gr-multiplos-cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  min-width: 0;
}
.gr-multiplos-nome {
  min-width: 0;
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gr-multiplos-valor {
  font-family: var(--fonte-numero);
  font-size: 15px;
}
.gr-multiplos-desenho {
  position: relative;
  min-height: 44px;
}
.gr-multiplos-svg {
  height: 100%;
}
.gr-multiplos-linha {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.gr-multiplos-chao {
  stroke: var(--border);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.gr-multiplos-faltou {
  stroke: var(--muted-foreground);
  stroke-width: 2;
  stroke-dasharray: 2 2;
  vector-effect: non-scaling-stroke;
}
.gr-multiplos-fim {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border: 2px solid var(--card);
  border-radius: 50%;
  box-sizing: content-box;
  pointer-events: none;
}
.gr-multiplos-vazio {
  display: grid;
  place-items: center;
  height: 100%;
  border: 1px dashed var(--border);
  border-radius: 6px;
}

/* ---------- 9. mapa do Piaui ---------- */
.gr-mapa-contorno {
  fill: color-mix(in srgb, var(--muted-foreground) 10%, transparent);
  stroke: color-mix(in srgb, var(--muted-foreground) 55%, transparent);
  stroke-width: 1.25;
  stroke-linejoin: round;
}
/* O PONTO E SOLIDO E NUNCA LAVADO (r84, 03/10/2026). Com 72% de opacidade o verde padrao do tema claro, (6,152,95),
   sobre o cinza do contorno dava 2,32:1 medido por pixel por um critico, e o piso de marca de grafico e 3:1.
   A cor padrao e puxada 15% para a tinta de texto (`--foreground`), que SEMPRE se afasta do fundo, no claro e no
   escuro: o contraste contra o mapa nao depende de quem chama passar uma cor boa. O anel de `--card` em volta
   separa um ponto do outro onde se sobrepoem. */
.gr-mapa-ponto {
  fill: color-mix(in srgb, var(--cor) 85%, var(--foreground));
  stroke: var(--card);
  stroke-width: 1.5;
}
/* quem abre a dica e o JS (o ponto de centro mais perto), nao o elemento: os circulos so desenham */
.gr-mapa-toque,
.gr-mapa-ponto {
  pointer-events: none;
}
.gr-mapa-ponto.zero {
  fill: none;
  stroke: var(--muted-foreground);
  stroke-width: 1.5;
}
.gr-mapa-cidade.ativo .gr-mapa-ponto {
  fill: var(--cor);
}
.gr-novo .gr-mapa-nome {
  fill: var(--foreground);
  font-size: 12px;
  font-weight: 700;
  paint-order: stroke;
  stroke: var(--card);
  stroke-width: 3px;
  stroke-linejoin: round;
}

/* dedo: o que se toca tem 44 px */
@media (pointer: coarse) {
  .gr-meta-zona {
    min-height: 44px;
  }
  .gr-funil-passagem {
    min-height: 44px;
  }
}

/* o Piaui e alto e fino: largo, o mapa vai para a esquerda e os cinco maiores ficam na direita */
.gr-mapa .gr-corpo {
  position: relative;
}
.gr-mapa-lista {
  display: grid;
  gap: 2px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.gr-mapa-lista li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-height: 32px;
  padding: 0 4px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.gr-mapa-lista span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gr-mapa-lista strong {
  font-variant-numeric: tabular-nums;
}
.gr-mapa .gr-corpo.com-lista .gr-mapa-lista {
  position: absolute;
  top: 16px;
  right: 0;
  width: 216px;
  margin: 0;
}
.gr-meta-valor,
.gr-funil-valor,
.gr-multiplos-valor {
  font-variant-numeric: tabular-nums;
}