/* Base das telas internas da gestão — Contar, Vender, Estoque, Vitrine,
   Atender, A receber, Live, Painel, Financeiro e Enviar.

   Até 23/09/2026 este bloco estava copiado inteiro dentro de cada uma das dez
   telas, byte a byte. Uma troca de cor custava dez edições e a décima ficava
   pra trás — que é como paleta diverge sem ninguém decidir nada.

   Só entra aqui o que era IDÊNTICO nas dez. O que variava de tela pra tela
   (`.tela`, `.vazio`, `.selo`, `.cartao`) continua dentro de cada arquivo, de
   propósito: a largura da coluna da Live não tem por que ser a da Contagem.

   Não vale para as três telas que a CLIENTE vê — `catalogo.html`,
   `carrinho.html` e `pedido.html`. Aquelas já seguiam a paleta da loja. */

/* ---------------------------------------------------------------------------
   Paleta "Greige & Champagne" — a MESMA da loja e do site (29/09/2026).

   REVOGA a "Prata & Grafite" que vivia aqui, e com ela o argumento de que
   escuro servia porque "a contagem é num ambiente iluminado" — é o contrário:
   tela escura em showroom claro reflete e cansa mais. Decisão do dono: as telas
   de dentro passam a ter a cara da loja, igual ao site.

   Os NOMES dos tokens continuam os de sempre — `--preto` é o fundo, `--prata`
   é a cor de ação — pra não tocar ~90 usos nas dez telas. Os VALORES é que
   mudaram, exatamente como o site fez em 17/09. Reverter = restaurar este bloco.

   Os valores vêm de `site/src/index.css`, que por sua vez saiu da parede do
   showroom e das caixas. Se um dia divergirem, o site manda.
   --------------------------------------------------------------------------- */
:root {
  /* Superfícies. `--preto` virou o marfim da parede; `--carvao`, o busto branco. */
  --preto: #f4eee6;      /* fundo da página (a parede greige)   */
  --carvao: #ffffff;     /* cartão, barra, rodapé (o busto)     */
  --linha: #e1d9cd;      /* borda e divisor, quente             */
  --campo: #ffffff;      /* fundo de input, select e trilho     */

  /* Texto. Ambos passam em AA sobre o marfim. */
  --texto: #423d38;      /* corpo      (9,3:1) */
  --fraco: #6a6259;      /* secundário (5,0:1) */

  /* Ação. Bronze — o dourado da caixa, escurecido até passar em AA.
     O champagne puro (#b8965a) dá 2,8:1 com branco e reprova: fica só em
     filete e detalhe, nunca preenchendo botão. */
  --prata: #785e30;         /* ação principal (6,1:1 no branco) */
  --sobre-acento: #ffffff;  /* o que se escreve EM CIMA da ação */
  --dourado: #b8965a;       /* filete, detalhe — nunca fundo de botão */

  /* Estados. O verde é a caixa sálvia escurecida, pra que o "pago" na tela
     seja o verde da embalagem que a cliente abre em casa. */
  --ok: #4a5836;      --ok-fundo: #e4ebd7;
  --alerta: #8a6516;  --alerta-fundo: #f6e9ce;  --alerta-linha: #e0cda4;
  --erro: #a03c2c;    --erro-fundo: #f6e0d9;
  --selo-fundo: #eae4db;                        /* selo neutro, sem juízo */

  /* Roxo do robô e do carnê. Existe pra dizer "isto é automação", e por isso
     fica fora da paleta da loja de propósito. */
  --robo: #5c4a8a;    --robo-fundo: #ebe6f3;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0; background: var(--preto); color: var(--texto);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}

/* O menu entre as telas. Não existe no `index.html`: lá o menu é a própria
   página inicial. */
nav { display: flex; gap: 5px; margin-bottom: 14px; flex-wrap: wrap; }
nav a {
  flex: 1; min-width: 62px; text-align: center; padding: 10px 5px; border-radius: 10px;
  text-decoration: none; color: var(--fraco); background: var(--carvao);
  border: 1px solid var(--linha); font-size: 13.5px;
}
nav a.ativo {
  color: var(--sobre-acento); background: var(--prata);
  border-color: var(--prata); font-weight: 600;
}

/* Esconde o que nao e pra tela atual. Vive aqui porque `papel.js`
   depende dela em todas as dez telas. */
.oculto { display: none !important; }