/* Fonte única dos tokens de design. Carregado antes de styles.css, operacao.css e tablet.css.
 *
 * MODELO 2027 (14/09/2026). A paleta é a do pacote `entrega-conceito/`: papel quase branco,
 * cartão branco, AZUL #2748b0 como cor única de interface e Inter como fonte. Antes disto a
 * navegação era marinha com acento dourado — o padrão do mockup "Plastfort App Funcional",
 * aprovado em 19/08/2026 e substituído por decisão do dono em 14/09/2026.
 *
 * Especificação: `entrega-conceito/GUIA-VISUAL.html` seções 2 (tokens), 3 (escalas) e 4
 * (movimento); os valores saem de `entrega-conceito/plastfort-estilos.css`.
 *
 * REGRA DA COR AZUL: azul é a cor da interface e, nos dados, de uma coisa só — Plastfortsul.
 * Nenhuma série de gráfico usa azul para outra coisa.
 *
 * Os nomes antigos continuam vivos no fim do arquivo, como apelidos dos novos, para que o CSS
 * e o JS que ainda não foram portados não fiquem sem cor no meio da travessia. Eles saem
 * quando `grep -r 'var(--marinho' frontend/` não achar mais nada.
 */
:root {
  color-scheme: light;

  /* ---------------------------------------------------------------- interface */
  --fundo:#f8f8f8;
  --carta:#ffffff;
  --borda:#e4e6e8;
  --borda-2:#cbcfd3;
  --tinta:#15171a;
  --tinta-2:#4b5158;
  --tinta-3:#676d74;

  --azul:#2748b0;
  --azul-2:#1b3179;
  --azul-fundo:#eaeffb;
  --azul-borda:#c9d8f4;
  --grad:linear-gradient(96deg,#1b3179 0%,#2748b0 58%,#4a6fd4 100%);
  --rolagem:#d3e0f9;
  --rolagem-2:#b3c9f0;

  /* Camada 2027 — superfícies. O conteúdo fica num cinza um pouco mais frio que `--fundo`,
     e o cabeçalho e os cartões ficam brancos: é o degrau que separa a moldura do dado. */
  /* 25/09/2026: o fundo geral é o #f8f8f8 do pedido (§1.6), e o fio do cartão é o mesmo #e4e6e8 da
     borda (§1.7) — um só cinza para o fio, em vez de dois quase iguais. */
  --fundo-2:#f8f8f8;
  --borda-cartao:#e4e6e8;
  --cabecalho-tabela:#f8f9fb;
  --linha-hover:#f3f6fc;
  /* Padrão do CRM (01/10/2026): o cinza NEUTRO de controle — o trilho das abas, o item aberto
     da lateral, o fundo do botão sob o cursor. É o `--muted` do Plastfortsul-CRM. A cor da
     interface continua o azul; ela fica no ícone e no que é ação, não na linha inteira. */
  --neutro:#f0f2f4;

  /* --------------------------------------------------------------- semânticos */
  --ok:#12a570;    --ok-f:#e7f7f1;
  --erro:#e03b52;  --erro-f:#fdedef;
  --aten:#e08c1a;  --aten-f:#fdf3e3;
  /* Os três de cima são cor de PREENCHIMENTO — fio de cartão, bolinha, barra, ícone grande.
     Como TEXTO pequeno no branco eles não passam: `--erro` dá 4,27 e `--aten` menos ainda, e
     o mínimo para texto abaixo de 14px é 4,5. Quem vira palavra escrita usa os de baixo.
     A conta é de 14/09/2026, quando a fita de navegação do tablet deixou de ser marinha: o
     vermelho de lá era um salmão escolhido para fundo escuro (8,76 sobre o marinho) e passou
     a dar 2,29 sobre a fita branca — ilegível, e sem nada na tela denunciando. */
  --erro-texto:#b3243a;   /* 6,50 no branco */
  --ok-texto:#0b784f;     /* 5,32 no branco */
  --aten-texto:#815309;   /* 6,29 no branco */
  /* O verde e o âmbar de BOTÃO são mais fundos que os de selo: o texto vai branco em cima. */
  --ok-botao:#0b784f;
  --aten-botao-f:#fff0d3; --aten-botao-t:#815309; --aten-botao-b:#e3c893;

  /* ------------------------------------------------- dados · cores da fábrica
   * Fixadas pela fábrica: não mudam de tela para tela e não dependem da ordem da série.
   * Dentro de um mesmo gráfico ou tabela nada repete cor; entre cartões diferentes, pode.
   * Amarelo e `--mao` não alcançam 3:1 no branco — são preenchimento de barra, bolinha e
   * chip, nunca texto. */
  --ext:#22c55e;      /* Extrusão — sempre verde */
  --cs:#f97316;       /* Corte e Solda — sempre laranja */
  --rec:#a855f7;      /* Recuperadora — sempre roxo */
  --pf:#2748b0;       /* Plastfortsul · produção própria */
  --mao:#cbd5e8;      /* Macrosul · mão de obra */

  /* uma cor por MÁQUINA: é por ela que se acha a linha certa em qualquer tabela ou gráfico.
   * Cores escolhidas pela fábrica (MODIFICACOES.md, item 7), bem diferentes entre si — eram tons
   * de um mesmo verde nas extrusoras e de um mesmo laranja nas cortes e soldas. A Extrusora 2 foi
   * branca, com contorno cinza; desde 03/10/2026 (item 26) é amarelo-ouro: o Matheus não gostou do
   * branco, e o amarelo é a cor mais diferente das outras cinco. */
  --m-ext1:#2563eb;   /* Extrusora 1 — azul */
  --m-ext2:#eab308;   /* Extrusora 2 — amarelo-ouro */
  --m-cs1:#16a34a;    /* Corte e Solda 1 — verde */
  --m-cs2:#ea580c;    /* Corte e Solda 2 — laranja */
  --m-cs3:#dc2626;    /* Corte e Solda 3 — vermelho */
  --m-rec:#9333ea;    /* Recuperadora — roxo */

  /* famílias de produto */
  --silagem:#0abab5;  /* sacos para silagem — azul tiffany */
  --boca:#ec4899;     /* boca de palhaço */
  --resina:#1f1f27;   /* sacos para resina */
  --capa:#9ca3af;     /* capa de fardo */
  --lixo:#145e00;     /* sacos de lixo — só histórico */
  --outro:#8a5a2b;    /* outros produtos */

  /* canais de venda */
  --direta:#6cc04a; --ml:#f5c400; --shopee:#ee4d2d; --outros:#4b5563;

  /* a barra fantasma da semana passada: cinza neutro com um fio no topo */
  --passado:#e6e8ef; --passado-fio:#c3c7d2;

  /* ----------------------------------------------------------------- tipo */
  /* Inter com as alternativas cv05/cv11 do desenho. No app real a fonte é hospedada junto:
     a fábrica fica sem internet e o Google Fonts cairia para a fonte do sistema no meio de
     um lançamento. Enquanto o arquivo não estiver no repositório, a pilha abaixo já cai em
     algo próximo sem baixar nada. */
  --t:'Inter','Segoe UI Variable Text','Segoe UI',system-ui,-apple-system,Roboto,'Helvetica Neue',Arial,sans-serif;
  --n:var(--t);           /* número: a mesma fonte, com tabular-nums */
  --lat:228px;            /* largura da barra lateral, a do modelo (pedido de 25/09/2026, §2) */

  /* ------------------------------------------------------------ movimento
   * Três durações e três curvas para o app inteiro (guia, seção 4). Antes cada lugar tinha
   * o seu número solto — .14, .15, .16, .19, .2, .22 — que é como se perde a coerência sem
   * ninguém notar.
   *   --mv-1  resposta imediata: cor de botão, borda de campo, linha sob o cursor.
   *   --mv-2  algo aparece ou some dentro da tela que já está aberta.
   *   --mv-3  algo que vem de fora ou vai embora de vez: diálogo, aviso, linha que mudou.
   * Quem pediu para reduzir movimento no sistema não recebe nenhum — ver o bloco
   * `prefers-reduced-motion` em styles.css e em tablet.css. */
  --mv-1:120ms; --mv-2:180ms; --mv-3:260ms;
  --cv-chega:cubic-bezier(.22,1,.36,1);   /* desacelera: chega e assenta */
  --cv-sai:cubic-bezier(.4,0,1,1);        /* acelera: sai de vez */
  --cv-troca:cubic-bezier(.4,0,.2,1);     /* troca de estado no lugar */

  /* ------------------------------------------------------------ raio e sombra
   * Raio da camada 2027: 5 selo · 7 aba · 8 botão/campo/tile · 10 interruptor ·
   * 12 KPI e cartão do tablet · 14 cartão · 16 diálogo · 999px pílula. */
  --raio-selo:5px; --raio-aba:7px; --raio-controle:8px; --raio-interno:12px;
  --raio-cartao:12px; --raio-dialogo:16px; --raio-pilula:999px;
  /* Padrão do CRM (01/10/2026): o cartão em repouso tem fio claro e uma sombra de 1px quase
     invisível — continua sem "sombra pesada" (§1.11), mas o branco descola do #f8f8f8. O
     cartão que se clica sobe um pouco sob o cursor (`--sombra-ergue`); pequena de propósito,
     porque um cartão erguido numa grade de trinta é um cartão que quebrou a grade. */
  --sombra-carta:0 1px 2px rgba(16,24,40,.05);
  --sombra-ergue:0 1px 2px rgba(16,24,40,.04), 0 4px 12px rgba(16,24,40,.06);
  --sombra-flutua:0 3px 10px rgba(15,15,34,.09);

  font-family:var(--t);
  color:var(--tinta);
  line-height:1.5;
  font-synthesis:none;

  /* ================================================================ APELIDOS
   * Os nomes do padrão marinho/dourado, apontando para o token novo equivalente. Existem
   * para que nada fique sem cor enquanto `styles.css`, `tablet.css` e `operacao.css` são
   * portados regra por regra. Não escreva regra nova usando estes nomes. */
  --papel:var(--fundo-2);
  --divisor:var(--borda);
  --tinta-fraca:var(--tinta-2);
  --tinta-apagada:var(--tinta-3);
  /* A navegação deixou de ser marinha: os quatro nomes de marinho viram a lateral branca e
     a sua tinta, para que um bloco ainda não portado não desenhe um retângulo escuro. */
  --marinho:var(--carta);
  --marinho-claro:var(--azul-fundo);
  --marinho-borda:var(--borda);
  --marinho-tinta:var(--tinta);
  --marinho-rotulo:var(--tinta-3);
  /* O dourado era o acento; o acento agora é o azul. */
  --dourado:var(--azul);
  --dourado-tinta:var(--azul-2);
  --dourado-fraco:var(--azul-2);
  --dourado-forte:var(--azul-2);
  --ok-tinta:var(--ok-texto);
  --ok-fundo:var(--ok-f);
  --atencao:var(--aten);
  --atencao-tinta:var(--aten-texto);
  --atencao-fundo:var(--aten-f);
  --erro-tinta:var(--erro-texto);
  --erro-fundo:var(--erro-f);
  --erro-claro:var(--erro);
  --info-tinta:var(--azul-2);
  --info-fundo:var(--azul-fundo);
  --roxo:var(--rec);
  --agua:var(--silagem);
  --titulo:var(--t);
  --texto:var(--t);
  --mono:var(--t);
  --raio:var(--raio-cartao);
}
* {
  box-sizing:border-box;
}
/* --- Comportamento de aplicativo, e não de página ---------------------------------------
 *
 * O tablet fica pendurado na parede e é usado com a mão suja, de pé. Os gestos que o navegador
 * traz por padrão atrapalham: puxar para baixo recarrega no meio de um lançamento, segurar o
 * dedo abre menu de cópia, e dois toques rápidos dão zoom e desalinham a tela inteira.
 *
 * `user-scalable=no` no viewport NÃO resolve: o iOS o ignora desde o iOS 10. Quem desliga o
 * zoom de toque duplo é `touch-action`.
 */
html, body {
  /* `contain` e não `none`: mantém o brilho de fim de rolagem, que é o sinal de "acabou a
     lista", e mata só o puxar-para-recarregar. */
  overscroll-behavior-y:contain;
}
button, .chip, .color-chip, .card-actions, .nav-button, label {
  touch-action:manipulation;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}
/* A seleção continua livre no conteúdo: copiar o texto de um recado ou de um apontamento é uso
   legítimo, e desligar isso na página inteira é hostil sem motivo. */
body {
  margin:0;
  min-height:100vh;min-height:100dvh;
  background:var(--fundo-2);
  color:var(--tinta);
  font-family:var(--t);
  font-size:14px;
  line-height:1.5;
  /* Revisão visual (item 24): o texto corre com números normais. Com tabular-nums no corpo inteiro, a
     Inter alarga também o hífen, e "OP-25" e "Bem-vindo" saíam "OP - 25" e "Bem - vindo". Os números
     que se alinham em coluna continuam tabulares — logo abaixo. */
  font-feature-settings:'cv05','cv11';
  font-variant-numeric:normal;
  -webkit-font-smoothing:antialiased;
}
/* O número que se alinha em coluna: as células numéricas, os números grandes dos cartões, os gráficos e
   o peso digitado. */
td.n, th.n, td.num, th.num, td.peso, .kpi-card strong, .gfx, input.big-number, input[inputmode="decimal"] { font-variant-numeric:tabular-nums; }
:focus-visible { outline:2px solid var(--azul); outline-offset:2px; }
::selection { background:var(--azul); color:#fff; }