/* Gráficos do portal (src/nucleo/graficos.js).
 *
 * Paleta das séries: os seis primeiros tons da paleta de referência do método
 * de visualização (skill dataviz), passados no validador de cores contra as
 * superfícies do portal: #121C29 no escuro e #FFFFFF no claro. Nos dois temas
 * passam todas as verificações obrigatórias (vizinhos distinguíveis também para
 * quem não enxerga vermelho ou verde). A ORDEM é fixa, porque é ela que garante
 * isso: nunca reordene nem acrescente um sétimo tom sem rodar o validador de
 * novo; o que passar de seis vira "Outros".
 *
 * No claro, os tons 3 a 5 ficam abaixo de 3:1 contra o branco. Por isso todo
 * gráfico daqui vem com os valores escritos (ranking ou tabela).
 * "Outros" é cinza de propósito: não é uma série, é o resto.
 */
:root {
  --serie-1: #3987e5;   /* azul */
  --serie-2: #d95926;   /* laranja */
  --serie-3: #199e70;   /* verde-água */
  --serie-4: #c98500;   /* amarelo */
  --serie-5: #d55181;   /* magenta */
  --serie-6: #008300;   /* verde */
  --serie-outros: #61789A;
}
:root[data-tema="claro"] {
  --serie-1: #2a78d6;
  --serie-2: #eb6834;
  --serie-3: #1baf7a;
  --serie-4: #eda100;
  --serie-5: #e87ba4;
  --serie-6: #008300;
  --serie-outros: #8CA2B2;
}

.grafico { position: relative; border-radius: 6px; }
.grafico:focus-visible { outline: 2px solid var(--rubi); outline-offset: 6px; }
.grafico svg { display: block; overflow: visible; }

.grafico .grade { stroke: var(--linha); stroke-width: 1; }
.grafico .base  { stroke: var(--linha-2); stroke-width: 1; }
.grafico .eixo {
  fill: var(--texto-4);
  font-family: var(--corpo); font-size: 11px; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.grafico .rotulo-pico {
  fill: var(--texto-2);
  font-family: var(--dado); font-size: 11px; font-weight: 600;
}
.grafico .parcial { fill: var(--cova); }
.grafico .parcial-rotulo {
  fill: var(--texto-4);
  font-family: var(--corpo); font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.grafico .coluna { transition: opacity .15s ease; }
/* a coluna de hoje ainda sobe a cada coleta: mais clara até o dia fechar */
.grafico .coluna.andamento { opacity: .55; }
.grafico.com-foco .coluna { opacity: .38; }
.grafico.com-foco .coluna.ativa { opacity: 1; }
.grafico .alvo { fill: transparent; }

/* A dica: o valor manda, o nome acompanha. Chave em traço, não em caixa. */
.grafico-dica {
  position: absolute; z-index: 5; pointer-events: none;
  min-width: 200px; max-width: 290px;
  padding: .7rem .85rem;
  border: 1px solid var(--linha-2); border-radius: var(--raio-p);
  background: var(--painel-alto);
  box-shadow: var(--sombra-2);
  font-size: .78rem; color: var(--texto-2);
}
.grafico-dica[hidden] { display: none; }
.grafico-dica p { margin: 0; }
.grafico-dica .titulo { font-size: .72rem; color: var(--texto-3); }
.grafico-dica .total {
  margin: .1rem 0 .5rem;
  font-family: var(--dado); font-size: 1.05rem; font-weight: 700; color: var(--texto);
}
.grafico-dica ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.grafico-dica li { display: grid; grid-template-columns: 12px auto minmax(0, 1fr); align-items: center; gap: .55rem; }
.grafico-dica .chave { width: 12px; height: 3px; border-radius: 2px; }
.grafico-dica .valor {
  font-family: var(--dado); font-size: .78rem; font-weight: 600; color: var(--texto);
  font-variant-numeric: tabular-nums;
}
.grafico-dica .nome { color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }