/* © 2026 Jose Carvalho. Intel Ceasa. Ver LICENSE. */
/* ================================================================================================
   A PELE DO JAMES (r102, 07/10/2026). O Carvalho, vendo as telas novas: "achei as telas novas horríveis, prefiro as
   telas do james, com cores nos cards e degradês". O desenho que manda esta em scratchpad/desenhos-do-james/ (1, 2 e 5),
   e o padrao decidido em cima dele, com os conflitos com o painel ja resolvidos, em
   scratchpad/fila/r102-fases/PADRAO-JAMES.md (secoes 1 a 6 moram aqui).

   POR ULTIMO de proposito (index.html e scripts/palco-graficos.html, depois de cores.css): e a camada que sai inteira
   tirando a linha dela, como vitrine.css e cores.css. Ela so muda APARENCIA: nenhum numero, texto, conta ou marca de
   conferencia depende dela.

   COR NENHUMA ESCRITA A MAO FORA DO BLOCO DE TOKENS logo abaixo: o resto le `--tom-*` (tokens.css, contraste medido la)
   e os `--james-*` daqui. Os tokens moram em `:root, body` e nao so em `:root` porque alguns misturam `--primary`, que
   cada porta escreve no `body` (assets/css/sistemas/): declarado so na raiz, o `var()` seria resolvido com a cor da casa
   e o fundo da pagina sairia igual nas cinco portas.
   ================================================================================================ */
:root,
body {
  /* a barra lateral: as pontas do degrade (as do Painel Intel, que valem tambem fora de porta) e a tinta por cima.
     O branco a 78% do titulo de grupo passa 4,5:1 nas cinco pontas (medido em scripts/testar-pele-james.mjs). */
  --james-lateral-alto: #1b4d3e;
  --james-lateral-baixo: #0c2a21;
  --james-lateral-tinta: #ffffff;
  --james-lateral-tinta-suave: rgb(255 255 255 / 0.78);
  --james-lateral-icone: rgb(255 255 255 / 0.9);
  --james-lateral-contorno: rgb(255 255 255 / 0.5);
  --james-lateral-ativo: rgb(255 255 255 / 0.16);
  --james-lateral-hover: rgb(255 255 255 / 0.08);
  --james-lateral-fio: rgb(255 255 255 / 0.14);
  --james-lateral-rolagem: rgb(255 255 255 / 0.3);
  /* a pastilha cheia: o icone e branco sobre o tom escuro (o 700 de tokens.css, 5:1 ou mais no branco), e a ponta de
     baixo do degrade escurece o proprio tom misturando preto */
  --james-pastilha-tinta: #ffffff;
  --james-pastilha-sombra: #000000;
  /* o fundo da pagina: o #f3f6f4 do molde do James puxado 4% para a cor da porta */
  --james-pagina: color-mix(in srgb, var(--primary) 4%, #f4f6f5);
  /* a tabela: cabecalho tingido pela porta (nao e dado: e moldura) e linha par um sopro mais escura */
  --james-tabela-cab: color-mix(in srgb, var(--primary) 8%, var(--card));
  --james-tabela-zebra: color-mix(in srgb, var(--foreground) 3%, var(--card));
  /* o rotulo e o apoio do cartao colorido: o cinza de apoio da casa (#5c5c5c) puxado 30% para a tinta de texto
     (#1c1c1c), a conta feita uma vez: #494949. O cinza de apoio da porta JAP dava 4,44:1 sobre o azul claro do cartao
     (medido em scripts/testar-pele-james.mjs). Valor simples e nao `color-mix`: as baterias da casa leem a cor pelo
     getComputedStyle e esperam rgb(), e a mistura sai como color(srgb ...), que a de Avarias leu como preto (achado do
     construtor C, 07/10/2026). Medido na bateria em 07/10/2026: 7,66:1 ou mais no claro (cinco portas) e 6,63:1 no escuro. */
  --james-tinta-suave: #494949;
}
/* O ESCURO: no tema escuro os `--tom-*` sao claros (o 300), entao a pastilha cheia leva o icone na cor do fundo, escuro;
   a pagina fica a de hoje (o grafite de tokens.css); e a LATERAL VIRA GRAFITE, sem a cor da porta. Pedido do Presidente
   de 02/10/2026 ("se colocar modo escuro fica fundo verde"), que a auditoria de tela mede (regra "croma",
   scripts/medir-layout-comum.mjs): fundo grande com matiz no escuro reprova, e a gaveta verde do celular reprovou. O
   degrade continua, do cartao do escuro para a pagina do escuro. Os dois blocos de tema da casa, os de tokens.css; o
   `body` junto porque as pontas de cada porta moram em `body[data-porta]`, e este seletor e mais forte que aquele. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]),
  :root:not([data-tema="claro"]) body {
    --james-pastilha-tinta: var(--background);
    --james-pastilha-sombra: var(--background);
    --james-pagina: var(--background);
    --james-lateral-alto: var(--cinza-875);
    --james-lateral-baixo: var(--cinza-950);
    /* o cinza de apoio do escuro (#a3a3a3) puxado 30% para a tinta (#ececec): #b9b9b9 */
    --james-tinta-suave: #b9b9b9;
  }
}
:root[data-tema="escuro"],
:root[data-tema="escuro"] body {
  --james-pastilha-tinta: var(--background);
  --james-pastilha-sombra: var(--background);
  --james-pagina: var(--background);
  --james-lateral-alto: var(--cinza-875);
  --james-lateral-baixo: var(--cinza-950);
  --james-tinta-suave: #b9b9b9;
}
/* as pontas do degrade da lateral em cada porta (PADRAO-JAMES secao 1; a da JAP e o verde exato do desenho do James).
   Sao da barra, que pode ter a cor da porta; dado nunca le estes tokens (scripts/testar-cores-com-sentido.mjs). */
body[data-porta="jap"] {
  --james-lateral-alto: #1a5c3a;
  --james-lateral-baixo: #0f3d26;
}
body[data-porta="intel"] {
  --james-lateral-alto: #1b4d3e;
  --james-lateral-baixo: #0c2a21;
}
body[data-porta="novaceasa"] {
  --james-lateral-alto: #1d5a2e;
  --james-lateral-baixo: #0b2a15;
}
body[data-porta="polo"] {
  --james-lateral-alto: #3c418a;
  --james-lateral-baixo: #1e2150;
}
body[data-porta="maquina"] {
  --james-lateral-alto: #9a3412;
  --james-lateral-baixo: #4a1a0a;
}

/* ---------- 6. o fundo da pagina ---------- */
body {
  background: var(--james-pagina);
}

/* ---------- 1. a barra lateral: degrade escuro na cor da porta (desenhos 1 a 5) ----------
   A mesma caixa vira a gaveta no celular (casca.css), entao a gaveta ganha o degrade sem regra propria. */
/* A COR CHEIA POR BAIXO DO DEGRADE e de proposito: os medidores da casa (a regua da Apple, a auditoria de tela) leem o
   fundo pelo `background-color`, e so com o degrade a lateral parecia branca para eles (o foco branco media 1,15:1). A
   ponta de cima e a mais clara, a pior para o texto branco: e ela que vale. */
.menu-caixa {
  background: linear-gradient(180deg, var(--james-lateral-alto), var(--james-lateral-baixo)) var(--james-lateral-alto);
  border-color: transparent;
  color: var(--james-lateral-tinta);
}
.menu-topo {
  border-bottom-color: var(--james-lateral-fio);
  /* o filete da porta (r84) some: o degrade inteiro ja e a cor da porta */
  box-shadow: none;
}
.menu .marca-texto b {
  color: var(--james-lateral-tinta);
}
.menu .marca-texto small {
  color: var(--james-lateral-tinta-suave);
}
/* O LOGOTIPO DE FUNDO ESCURO NOS DOIS TEMAS: a lateral agora e escura sempre, e a marca da JAP escreve "JAP" em branco
   (sumia no papel claro). O simbolo do Painel Intel, que e o mesmo arquivo nos dois temas, ganha o ladrilho de papel
   que casca.css ja dava a ele no escuro. */
.menu .marca-claro {
  display: none;
}
.menu .marca-escuro {
  display: block;
}
body[data-porta="intel"] .menu .marca-escuro {
  padding: 3px;
  border-radius: var(--radius);
  background: var(--papel-logotipo);
}
.menu .botao-portal {
  border-color: var(--james-lateral-contorno);
  color: var(--james-lateral-tinta);
}
.menu .botao-portal svg {
  background: var(--james-lateral-hover);
  color: var(--james-lateral-icone);
}
@media (hover: hover) and (pointer: fine) {
  .menu .botao-portal:hover {
    background: var(--james-lateral-hover);
    border-color: var(--james-lateral-tinta);
  }
  .menu .menu-item:hover {
    background: var(--james-lateral-hover);
  }
}
.menu-rolagem {
  scrollbar-color: var(--james-lateral-rolagem) transparent;
}
.menu .menu-grupo-titulo {
  color: var(--james-lateral-tinta-suave);
}
.menu .menu-item {
  color: var(--james-lateral-tinta);
}
.menu .menu-item svg {
  background: transparent;
  color: var(--james-lateral-icone);
}
.menu .menu-item[aria-current="page"] {
  background: var(--james-lateral-ativo);
  color: var(--james-lateral-tinta);
  font-weight: 700;
}
.menu .menu-item[aria-current="page"] svg {
  background: transparent;
  color: var(--james-lateral-tinta);
}
.menu :is(a, button):focus-visible {
  outline: 2px solid var(--james-lateral-tinta);
  outline-offset: 1px;
}
.menu-rodape {
  border-top-color: var(--james-lateral-fio);
}
/* o cartao do Sankhya no pe: texto branco e o botao vazado em branco (o primario cheio na cor da porta afundava no
   degrade da mesma cor) */
.menu .integracao-cartao {
  color: var(--james-lateral-tinta);
}
.menu .integracao-cartao .apoio {
  color: var(--james-lateral-tinta-suave);
}
.menu .integracao-cartao .barra-progresso {
  background: var(--james-lateral-ativo);
}
.menu .integracao-cartao .btn {
  background: transparent;
  border: 1px solid var(--james-lateral-contorno);
  color: var(--james-lateral-tinta);
}

/* ---------- 2. o cartao de numero (`.indicador`): colorido, com degrade (desenho 5, e a cor dos desenhos 1 a 3) ----------
   QUAL TOM: o que o cartao ja tem (`data-tom`, de `tom` ou do icone, TOM_DO_ICONE em ui.js). Os dois tokens locais
   `--james-tom` (a tinta, cheia na pastilha) e `--james-tom-fundo` (o fundo do cartao) carregam esse tom para as regras
   de baixo. Sem tom vale o azul de informacao, e o rodizio logo abaixo troca pela posicao. */
.indicador,
.faixa-mudou-link {
  --james-tom: var(--tom-azul);
  --james-tom-fundo: var(--tom-azul-fundo);
}
[data-tom="verde"] {
  --james-tom: var(--tom-verde);
  --james-tom-fundo: var(--tom-verde-fundo);
}
[data-tom="coral"] {
  --james-tom: var(--tom-coral);
  --james-tom-fundo: var(--tom-coral-fundo);
}
[data-tom="ambar"] {
  --james-tom: var(--tom-ambar);
  --james-tom-fundo: var(--tom-ambar-fundo);
}
[data-tom="azul"] {
  --james-tom: var(--tom-azul);
  --james-tom-fundo: var(--tom-azul-fundo);
}
[data-tom="turquesa"] {
  --james-tom: var(--tom-turquesa);
  --james-tom-fundo: var(--tom-turquesa-fundo);
}
[data-tom="violeta"] {
  --james-tom: var(--tom-violeta);
  --james-tom-fundo: var(--tom-violeta-fundo);
}
/* O RODIZIO DO CARTAO SEM TOM: azul, turquesa, violeta, de 3 em 3, contando so os irmaos sem tom. NUNCA verde, coral ou
   ambar por posicao: essas tres querem dizer bom, ruim e atencao, e um cartao neutro pintado de coral mentiria. */
.indicador:not([data-tom]):nth-child(3n + 2 of .indicador:not([data-tom])) {
  --james-tom: var(--tom-turquesa);
  --james-tom-fundo: var(--tom-turquesa-fundo);
}
.indicador:not([data-tom]):nth-child(3n of .indicador:not([data-tom])) {
  --james-tom: var(--tom-violeta);
  --james-tom-fundo: var(--tom-violeta-fundo);
}
/* `.grade.solta > .indicador` junto: a grade solta (componentes.css) pinta todo filho com o atalho `background:`, de
   especificidade maior, e sem ele o degrade sumia justo nas telas da cara nova */
.indicador,
.grade.solta > .indicador {
  /* a cor cheia por baixo: a ponta mais escura do degrade, a pior para o texto, e a que os medidores leem */
  background: linear-gradient(135deg, var(--james-tom-fundo) 0%, color-mix(in srgb, var(--james-tom-fundo) 40%, var(--card)) 100%) var(--james-tom-fundo);
  border-color: color-mix(in srgb, var(--james-tom) 24%, transparent);
  /* o numero de 26 px do padrao (era 28), ainda encolhendo com o espaco que ele tem */
  --kpi-valor-tamanho: min(26px, 11.5cqi);
}
/* A GRADE DE FIO COM INDICADOR VIRA GRADE SOLTA. A grade antiga (componentes.css, `.grade` sem `.solta`) junta os
   blocos num cartao unico com fio de 1 px entre eles; com o cartao tingido, tres indicadores viravam uma faixa so,
   encostados (achado da lider na foto da JAP, Produtos, 07/10/2026). No desenho 5 do James cada cartao e separado: aqui
   cada bloco ganha o vao da grade solta, borda e canto proprios, e o fio pontilhado que separava as fileiras sai. */
.grade:not(.solta):has(> .indicador) {
  gap: var(--grade-vao);
  background: none;
  border: 0;
}
.grade:not(.solta):has(> .indicador) > * {
  border: 1px solid var(--kpi-borda);
  border-radius: var(--kpi-raio);
}
.grade:not(.solta):has(> .indicador) > .cartao {
  overflow: clip;
}
.grade:not(.solta):has(> .indicador) > .indicador {
  border-color: color-mix(in srgb, var(--james-tom) 24%, transparent);
}
.grade:not(.solta):has(> .indicador) > .pontilhado {
  display: none;
}
.grade:not(.solta):has(> .indicador) > .sem-cartao {
  border: 0;
  background: none;
}
/* a pastilha CHEIA, 40 px e canto de 10, com o icone branco (no escuro, o icone na cor do fundo) */
.indicador-icone {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--james-tom), color-mix(in srgb, var(--james-tom) 70%, var(--james-pastilha-sombra)));
  color: var(--james-pastilha-tinta);
}
.indicador-rotulo {
  font-size: 13px;
  color: var(--james-tinta-suave);
}
/* O APOIO FICA EM 13 PX, e nao nos 12 do padrao: e um `<p>`, e a auditoria de tela reprova texto corrido abaixo de 13 px
   no computador (scripts/medir-layout-comum.mjs, regra "corpo", a regua da Apple). A regua vence o desenho. */
.indicador-apoio {
  font-size: 13px;
  color: var(--james-tinta-suave);
}
/* a etiqueta do cartao tinha o fundo do proprio tom, que agora e o fundo do cartao inteiro e a apagava: ela ganha o
   branco do cartao, com a mesma tinta (5,7:1 ou mais no cartao, tokens.css) */
.indicador .etiqueta {
  background: var(--card);
}
/* o heroi: 32 px (era 48), o numero maior da tela sem gritar mais que o desenho */
.indicador.vt-heroi .indicador-valor .numero {
  font-size: min(32px, 15cqi);
}
@media (max-width: 640px) {
  .indicador.vt-heroi .indicador-valor .numero {
    font-size: min(32px, 15cqi);
  }
}

/* ---------- 3. o cartao de secao (grafico e tabela): branco, sem sombra, com a pastilha cheia ---------- */
.grade.solta > .cartao {
  box-shadow: none;
}
.cartao-cab h2 {
  font-size: 15px;
  font-weight: 700;
}
/* a pastilha do titulo vira caixa em toda grade (antes so na solta), cheia como a do indicador */
.cartao-cab > .cartao-icone {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 10px;
}
/* `.cartao` na frente: a grade solta pinta a pastilha com `.grade.solta .cartao-cab > .cartao-icone` (quatro classes), e
   sem isso o titulo do cartao da Visao saia com a pastilha clara (achado da lider, 07/10/2026) */
.cartao .cartao-cab > .cartao-icone[data-tom] {
  background: linear-gradient(135deg, var(--james-tom), color-mix(in srgb, var(--james-tom) 70%, var(--james-pastilha-sombra)));
  color: var(--james-pastilha-tinta);
}
.cartao-cab > .cartao-icone > svg {
  width: 18px;
  height: 18px;
  color: inherit;
}

/* ---------- 4. a tabela: compacta, zebrada, cabecalho tingido (desenhos 1 e 2) ----------
   Fora da ficha do celular (`.em-fichas`, ui.js): la cada linha ja e um cartao, e zebra pintaria a ficha inteira. A zebra
   mora na CELULA e nao na linha para a primeira coluna parada (componentes.css, `position: sticky`) seguir a cor. */
.tabela:not(.em-fichas) thead th {
  background: var(--james-tabela-cab);
  color: var(--muted-foreground);
  font-size: 12px;
  font-weight: 600;
}
.tabela:not(.em-fichas) thead th button {
  color: inherit;
}
.tabela:not(.em-fichas) tbody tr:nth-child(even) > td {
  background: var(--james-tabela-zebra);
}
.tabela td.num {
  font-family: var(--fonte-numero);
  font-variant-numeric: tabular-nums;
}
/* no computador a linha fica mais baixa (8 px em cima e embaixo); no toque continua com os 44 px de alvo */
@media (pointer: fine) {
  .tabela:not(.em-fichas) td {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .tabela:not(.em-fichas) thead th {
    height: 36px;
  }
}

/* ---------- 5. a faixa "O que mudou": cada item um cartaozinho com o fundo do sentido ----------
   O sentido ja vem escrito no selo de variacao (`variacao()` em ui.js: `.tendencia.sobe` e bom, `.desce` e ruim, ja com
   o `inverso` aplicado), entao a cor do cartao segue o selo e nunca contradiz. Sem selo, o azul sem juizo. */
.faixa-mudou-link:has(.tendencia.sobe) {
  --james-tom: var(--tom-verde);
  --james-tom-fundo: var(--tom-verde-fundo);
}
.faixa-mudou-link:has(.tendencia.desce) {
  --james-tom: var(--tom-coral);
  --james-tom-fundo: var(--tom-coral-fundo);
}
.faixa-mudou .faixa-mudou-link {
  background: linear-gradient(135deg, var(--james-tom-fundo) 0%, color-mix(in srgb, var(--james-tom-fundo) 40%, var(--card)) 100%) var(--james-tom-fundo);
  border-color: color-mix(in srgb, var(--james-tom) 24%, transparent);
}
.faixa-mudou a.faixa-mudou-link:hover {
  border-color: var(--james-tom);
}