/* © 2026 Jose Carvalho. Intel Ceasa. Ver LICENSE. */
/* ============================================================
   A CAMADA VISUAL DA 017 (r95, programa 017, 04/10/2026): o vocabulario visual do Portal.

   O PEDIDO DO PRESIDENTE, nas palavras dele: "Quero coisas visuais, elegantes e bonitas, coloridas ate certo
   ponto." "Sem muitos textos!!!!!" A direcao inteira, com as medidas e as fontes, esta em
   specs/017-portal-intel-global/research.md (R6). O que mora AQUI:
     1. a cor do dado deixa de ser a cor da porta (a linha, o ponto, a area, a grade) e passa a ler os tokens de
        SENTIDO e de IDENTIDADE de tokens.css (camadas 2 e 3);
     2. o estilo das pecas novas de assets/js/grafico.js (halteres, barra de composicao, grade de unidades, o 6-12,
        as linhas por ano, o nome na ponta da linha, o selo no ultimo ponto, o traco da referencia na barra deitada);
     3. o numero grande (algarismo proporcional, o herói de 48 px) e a faixa "O que mudou" de assets/js/ui.js.

   POR QUE UMA FOLHA SO, CARREGADA POR ULTIMO: e a camada que sai inteira se precisar. Tirar a linha dela do
   index.html (e dos palcos) devolve as regras de componente de antes; nenhuma conta, rota, filtro ou permissao mora
   aqui (a regra da skill visual-redesign: a logica e sagrada, so a pele muda).

   NENHUMA COR E ESCRITA AQUI: tudo sai dos tokens, entao claro e escuro trocam sozinhos. O texto usa sempre tinta de
   texto (`--foreground`, `--muted-foreground`), nunca a cor da serie. A cor aparece em quatro lugares e so neles: a
   pastilha do assunto, o selo de variacao, a marca de dado com sentido ou identidade, e a moldura da porta.
   MOVIMENTO: nenhum novo. TOQUE: o que se toca tem 44 px no celular (`pointer: coarse`).
   `scripts/testar-cores-com-sentido.mjs` mede no navegador que nenhum dado sai na cor da porta.
   ============================================================ */

/* ---------- 1. a cor do dado fora da porta, em todo grafico de linha que ja existe ---------- */
/* A GRADE E CONTINUA E FINA: tracejado quer dizer "ano passado" (R6, regra de desenho que vale para todas). */
.grafico .grade-linha,
.grafico-colunas-agrupadas .grade-linha,
.grafico-cascata .grade-linha {
  stroke: var(--grafico-grade);
  stroke-width: 1;
  stroke-dasharray: none;
}
.grafico .linha-atual {
  stroke: var(--grafico-serie);
}
.grafico .ponto-ativo {
  stroke: var(--grafico-serie);
}
/* o ano passado: cinza de contexto, tracejado (a forma junto da cor, para quem nao separa as cores) */
.grafico .linha-anterior {
  stroke: var(--grafico-contexto);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}
/* os outros anos de uma safra: cinza fino e CHEIO (o tracejado e so do ano passado) */
.grafico .linha-anos-anteriores {
  fill: none;
  stroke: var(--grafico-contexto);
  stroke-width: 1;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0.85;
}
/* o nome na ponta da linha, no lugar da legenda; o ano atual em negrito e na tinta forte */
.grafico text.rotulo-ponta {
  fill: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}
.grafico text.rotulo-ponta.atual {
  fill: var(--foreground);
  font-weight: 700;
}
.grafico .rotulo-y,
.grafico .rotulo-x {
  font-variant-numeric: tabular-nums;
}

/* O SELO NO ULTIMO PONTO: o valor e a variacao colados no ponto, sobre o fundo do cartao (a linha nao corta o texto) */
.gr-selo-ultimo {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--card);
  pointer-events: none;
  white-space: nowrap;
}
.gr-selo-valor {
  font-family: var(--fonte-numero);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: proportional-nums;
  color: var(--foreground);
}

/* a linha pequena do ladrilho: a cor do sentido do numero (ou o azul de quantidade), nunca a cor do assunto do
   cartao (uma cor de linha por cartao era cor sem sentido, R6 secao 1) */
/* DESDE 05/10/2026 A COR MORA NO `color` DO SVG: a linha a usa direto (currentColor) e a area e um degrade (ui.js,
   `miniLinha`) cujas paradas leem a mesma currentColor; o `fill` da area e do proprio desenho, nenhuma regra o pinta. */
.miniserie {
  color: var(--grafico-serie);
}
.indicador.sentido-entra .miniserie {
  color: var(--sentido-entra);
}
.indicador.sentido-sai .miniserie {
  color: var(--sentido-sai);
}
.miniserie-linha {
  stroke: currentColor;
}

/* ---------- 2. barras deitadas: o traco do periodo de comparacao e o valor sem a monoespacada pesada ---------- */
.grafico-hbarras .hbarra-trilho {
  position: relative;
}
/* o traco "onde estava antes": tinta de texto com um fio da cor do cartao de cada lado, para separar de qualquer cor
   de barra (cinza sobre o azul da barra nao passaria de 1,3:1) */
.hbarra-ref {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--foreground);
  box-shadow:
    1px 0 0 var(--card),
    -1px 0 0 var(--card);
}
.grafico-hbarras .hbarra-valor {
  font-family: var(--fonte);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* O NUMERO DE TABELA EM SATOSHI COM ALGARISMO TABULAR, no lugar da monoespacada (R6 secao 4): alinha a coluna do
   mesmo jeito (tabular-nums: todo algarismo da mesma largura, medido na fonte) e pesa menos na leitura. A
   monoespacada fica so para codigo (CNPJ, box, numero de nota), que nao usa `.num`. */
.tabela .num {
  font-family: var(--fonte);
  font-variant-numeric: tabular-nums;
}

/* ---------- 3. o numero grande ---------- */
/* ALGARISMO PROPORCIONAL NO NUMERO GRANDE, tabular so onde coluna alinha (R6 secao 4: o tabular num numero solto e
   grande parece frouxo; Cal Sans tem os dois recursos, medido). */
.indicador-valor .numero {
  font-variant-numeric: proportional-nums;
}
/* O HERÓI: um por tela, 48 px no computador e 36 no celular, na tinta de texto (a cor fica no selo ao lado) */
.indicador.vt-heroi .indicador-valor .numero {
  font-size: min(48px, 15cqi);
  line-height: 1.05;
}
@media (max-width: 640px) {
  .indicador.vt-heroi .indicador-valor .numero {
    font-size: min(36px, 15cqi);
  }
}

/* ---------- 4. a faixa "O que mudou" (no maximo tres itens; ui.js faixaDoQueMudou) ---------- */
.faixa-mudou {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--espaco-cartao);
  margin: 0;
  padding: 0;
  list-style: none;
}
.faixa-mudou-link {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "valor selo" "rotulo rotulo";
  align-items: center;
  gap: 4px 10px;
  min-height: 44px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  color: var(--foreground);
  text-decoration: none;
}
a.faixa-mudou-link:hover {
  background: var(--superficie-3);
}
a.faixa-mudou-link:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
.faixa-mudou-valor {
  grid-area: valor;
  font-family: var(--fonte-numero);
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: proportional-nums;
}
.faixa-mudou-link > .selo {
  grid-area: selo;
  justify-self: start;
}
.faixa-mudou-rotulo {
  grid-area: rotulo;
  font-size: 13px;
  color: var(--muted-foreground);
}

/* ---------- 5. halteres ---------- */
.gr-hal {
  container-type: inline-size;
}
.gr-hal-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--muted-foreground);
}
.gr-hal-chave {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gr-hal-chave .gr-hal-ponto {
  position: static;
  transform: none;
}
.gr-hal-lista {
  display: grid;
  gap: 2px;
}
.gr-hal-linha {
  display: grid;
  grid-template-columns: minmax(80px, 26%) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 36px;
}
.gr-hal-nome {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--foreground);
}
/* O TRILHO DEIXA 72 PX DE CADA LADO para o valor que fica do lado de fora do ponto: o valor nunca cobre o vizinho
   nem sai do cartao, com "R$ 1,23 mi" (uns 62 px a 12 px de letra) como o maior caso */
.gr-hal-trilho {
  position: relative;
  height: 28px;
  margin: 0 72px;
}
.gr-hal-barra {
  position: absolute;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
  background: var(--border);
}
/* ponto de 10 px com anel de 2 px da cor do fundo (nao some em cima do outro); A cheio, B anel vazio: a forma separa */
.gr-hal-ponto {
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}
.gr-hal-ponto.a {
  background: var(--cor);
  box-shadow: 0 0 0 2px var(--card);
}
.gr-hal-ponto.b {
  background: var(--card);
  border: 3px solid var(--cor);
}
.gr-hal-valor {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
  white-space: nowrap;
}
@container (max-width: 520px) {
  .gr-hal-linha {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}
@media (pointer: coarse) {
  .gr-hal-linha {
    min-height: 44px;
  }
}

/* ---------- 6. barra de composicao ---------- */
.gr-comp-barra,
.gr-comp-antes {
  display: flex;
  gap: 2px;
  width: 100%;
}
.gr-comp-barra {
  height: 24px;
}
.gr-comp-pedaco {
  flex-basis: 0;
  min-width: 2px;
  height: 100%;
}
.gr-comp-pedaco:first-child {
  border-radius: 4px 0 0 4px;
}
.gr-comp-pedaco:last-child {
  border-radius: 0 4px 4px 0;
}
.gr-comp-pedaco:only-child {
  border-radius: 4px;
}
/* a composicao do periodo de comparacao: fina, cinza, na mesma ordem; o vao de 2 px mostra onde cada parte estava */
.gr-comp-antes {
  height: 6px;
  margin-top: 4px;
}
.gr-comp-antes-pedaco {
  flex-basis: 0;
  min-width: 2px;
  background: var(--grafico-contexto);
  opacity: 0.6;
}
.gr-comp-nomes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 8px;
}
/* quando todos cabem, cada nome fica embaixo do SEU pedaco (a mesma proporcao da barra) */
.gr-comp-nomes.alinhados {
  flex-wrap: nowrap;
  gap: 2px;
}
.gr-comp-nomes.alinhados .gr-comp-item {
  flex-basis: 0;
  min-width: 0;
}
.gr-comp-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 13px;
  color: var(--foreground);
}
.gr-comp-cor {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.gr-comp-nome {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gr-comp-pct {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.gr-comp-pp {
  flex: none;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--secondary);
  color: var(--secondary-foreground);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
@media (pointer: coarse) {
  .gr-comp-item {
    min-height: 44px;
  }
}

/* ---------- 7. grade de unidades ---------- */
.gr-unid-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, 14px);
  gap: 2px;
}
.gr-unid-q {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}
@media (max-width: 640px) {
  .gr-unid-grade {
    grid-template-columns: repeat(auto-fill, 12px);
  }
  .gr-unid-q {
    width: 12px;
    height: 12px;
  }
}
.gr-unid-legenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  margin-top: 10px;
}
.gr-unid-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--foreground);
}
.gr-unid-cor {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.gr-unid-n {
  font-family: var(--fonte-numero);
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: proportional-nums;
}
.gr-unid-escala {
  font-size: 12px;
  color: var(--muted-foreground);
}
@media (pointer: coarse) {
  .gr-unid-item {
    min-height: 44px;
  }
}

/* ---------- 8. o 6-12: a semana estreita, o ano largo; um embaixo do outro no celular ---------- */
.gr-seis-doze {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--espaco-cartao);
  container-type: inline-size;
}
.gr-seis-doze-lado {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.gr-seis-doze-rotulo {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted-foreground);
}
@media (max-width: 720px) {
  .gr-seis-doze {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- 9. a pilula de periodo (a barra de assets/js/telas/comum.js, compacta) ---------- */
/* A BARRA DE PERIODO TINHA UNS 155 PX (medido pela r98 nas vitrines do Grupo JAP: em 390 px, metade da primeira
   dobra): o rotulo PERIODO em caixa alta, o mes em letra de 28 px, as datas embaixo e os atalhos numa fileira propria.
   Vira UMA fileira: o nome do periodo e as datas, os atalhos ao lado, os filtros no fim. NADA SOME: o rotulo "Período"
   fica para o leitor de tela, e as datas com "com hoje incluído" continuam escritas (a pergunta do James, em audio, de
   14/09/2026). Tudo escopado em `.barra-periodo`: as classes de dentro sao reusadas por outros blocos (Posicao e
   resultado, o bloco "de quem" de telas.css), que nao mudam. */
.barra-periodo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 12px;
}
.barra-periodo > .barra-periodo-topo {
  display: contents;
}
.barra-periodo .barra-periodo-assunto {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  order: 1;
}
.barra-periodo .barra-periodo-rotulo {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.barra-periodo .barra-periodo-nome {
  font-family: var(--fonte);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}
.barra-periodo .barra-periodo-datas,
.barra-periodo .barra-periodo-base {
  font-size: 13px;
  color: var(--muted-foreground);
}
.barra-periodo > .barra-periodo-opcoes {
  order: 2;
  /* 8 px, o piso da regua da Apple da casa para dois botoes lado a lado (scripts/medir-layout-comum.mjs): com 6 px a
     bateria das telas do Maquina de Vendas reprovou os atalhos de periodo, 04/10/2026 */
  gap: 8px;
}
.barra-periodo > .barra-periodo-opcoes .btn {
  min-height: 32px;
  padding: 0 12px;
  font-size: 13px;
}
.barra-periodo .barra-periodo-filtros {
  order: 3;
  margin-left: auto;
}
.barra-periodo > .periodo-personalizado,
.barra-periodo > .periodo-recado {
  order: 4;
  flex-basis: 100%;
}
@media (pointer: coarse) {
  .barra-periodo > .barra-periodo-opcoes .btn {
    min-height: 44px;
  }
}
@media (max-width: 639.98px) {
  /* os atalhos quebram em duas linhas em vez de sair pela borda a 390 (r97, 04/10/2026) */
  .barra-periodo > .barra-periodo-opcoes {
    flex-basis: 100%;
    flex-wrap: wrap;
  }
}

/* ---------- 10. o anel de foco: cheio, nunca translucido ---------- */
/* A CAMINHADA DE TAB DA 017 (r94, T006, 04/10/2026) mediu 235 defeitos de foco nas telas de hoje, quase todos o anel
   abaixo de 3:1 contra o fundo: a busca do alto com 1,6 a 1,8:1. A causa e uma so: o anel era a cor do foco MISTURADA
   com transparente (45% na busca, 30% nos campos), e cor misturada com o fundo perde o contraste que a cor cheia tinha.
   Aqui o anel e a cor cheia, `--ring` (no claro, o verde 700: 5,13:1 na pagina e 5,69:1 no cartao; no escuro, 7,15:1
   na pagina). Os seletores sao os mesmos das regras de antes (casca.css, componentes.css, erp-kit.css), para vencer
   pela ordem de carga e nao por especificidade maior. */
.busca-global-caixa:focus-within,
.campo:focus-visible,
.seletor:focus-visible,
:is(.erp-ferramentas, .erp-form, .erp-dialogo, .erp-campo, .erp-busca, .tela-erp) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea):focus-visible {
  box-shadow: 0 0 0 2px var(--ring);
}

/* ---------- 11. as pecas de antes que pintavam o dado com um token que a porta redefine ---------- */
/* AS FOLHAS DAS PORTAS REDEFINEM `--chart-*` (assets/css/sistemas/): toda peca que pintava DADO com `--chart-2` mudava de
   cor conforme a porta (no Grupo JAP, o oliva da marca; no Maquina de Vendas, o terracota). Achado por critico de
   contexto limpo em 04/10/2026. Aqui cada peca comum passa ao token de sentido ou de quantidade, que porta nenhuma
   redefine: a barra do ranking de venda e dinheiro que entra; o medidor do limite de credito e quantidade (o vermelho
   de quando passa do limite continua na regra `.medidor.perigo`); as barras de quem caiu e quem subiu usam a marca de
   sentido (separada para quem nao distingue vermelho de verde), e nao o tom de texto. */
.barra-linha .trilho i {
  background: var(--sentido-entra);
}
.medidor i {
  background: var(--grafico-serie);
}
.gr-div-barra.caiu {
  background: var(--sentido-sai);
}
.gr-div-barra.subiu {
  background: var(--sentido-entra);
}
/* o quadrante de bolhas (05/10/2026): a bolha passou ao token de sentido (grafico.js, `quadranteDeBolhas`); a legenda e o
   fundo de cada metade vao junto, ou a bolinha da legenda sairia de outra cor que a bolha */
.mva-legenda .sobe::before {
  background: var(--sentido-entra);
}
.mva-legenda .cai::before {
  background: var(--sentido-sai);
}
.gr-bolhas-q.ganha {
  fill: color-mix(in srgb, var(--sentido-entra) 8%, transparent);
}
.gr-bolhas-q.perde {
  fill: color-mix(in srgb, var(--sentido-sai) 8%, transparent);
}

/* ---------- 12. o sinal de "em conferencia" num grafico inteiro (bloco() de assets/erp/marca.js) ---------- */
/* Num numero solto o sinal e o pontinho ambar colado nele (assets/css/marca.css). Num grafico inteiro embrulhado por
   `bloco(id, no)` ele vai no canto de cima, a direita, para nao cair no meio do desenho nem empurrar a altura dele. */
.metrica-bloco {
  position: relative;
}
.metrica-bloco > .metrica-sinal {
  position: absolute;
  top: 2px;
  right: 2px;
  margin: 0;
  vertical-align: baseline;
}

/* ---------- 13. o sinal de "em conferencia" uma vez por bloco, no numero grande ---------- */
/* COM O SANKHYA EM PAUSA, QUASE TODO NUMERO E NAO CONFERIDO, e o pontinho ambar depois de cada um virou poeira: a r97
   contou mais de 15 pontos na primeira dobra de uma vitrine, inclusive no texto de apoio ("6• inativos", "(1,8%•)").
   Decisao da r94 com a r95 (04/10/2026): o sinal continua no DOM em todo numero em conferencia (o portao da marca
   confere que ele existe, e a especificacao manda), e o DESENHO o mostra uma vez por bloco. Some no texto de apoio
   (linha de apoio, etiqueta, legenda, letra pequena) e no corpo da tabela: quando o cabecalho da coluna ja leva o
   sinal (opcao `marca` de tabela(), assets/js/ui.js), nenhuma celula repete; quando a tabela marca celula a celula,
   so a primeira linha mostra. O numero grande do cartao e o numero solto continuam com o ponto. */
.indicador-apoio .metrica-sinal,
.indicador-etiquetas .metrica-sinal,
.etiqueta .metrica-sinal,
.apoio .metrica-sinal,
small .metrica-sinal,
.gr-legenda .metrica-sinal,
.legenda .metrica-sinal,
.tabela:has(thead .metrica-sinal) tbody .metrica-sinal,
.tabela tbody tr:not(:first-child) .metrica-sinal {
  display: none;
}
/* o ponto cresce com a letra (0,4 em, assets/css/marca.css): no numero heroi ele virava uma bola de 22 px ao lado do
   valor (visto nas fotos de 04/10/2026). Discreto quer dizer do tamanho de um ponto, em qualquer numero. */
.metrica-sinal {
  max-width: 9px;
  max-height: 9px;
}

/* ---------- 14. a composicao em destaque (o cartao "Faturamento do mes" da Visao do grupo) ---------- */
/* Na Visao a barra de composicao divide a fileira com o ranking do a pagar, que e mais alto: com a barra de 24 px e a
   legenda miuda sobrava meio cartao vazio (foto de 04/10/2026). Em destaque, a parte de cada empresa e o numero grande
   do cartao (nome com a bolinha da cor em cima, a porcentagem embaixo), e o conjunto fica no meio da altura que sobra. */
.vt-composicao .cartao-corpo {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.vt-composicao .gr-comp-barra {
  height: 40px;
}
.vt-composicao .gr-comp-nomes {
  gap: 16px 32px;
  margin-top: 20px;
}
.vt-composicao .gr-comp-item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 8px;
}
.vt-composicao .gr-comp-pct {
  grid-column: 1 / -1;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  .vt-composicao .gr-comp-pct {
    font-size: 24px;
  }
}