/* Dinonna OS — tema visual único do sistema.
   Fonte da verdade pra cor e tipografia — todo HTML do sistema (protótipo,
   pwa-gerente, e o que vier a seguir) linka este arquivo em vez de duplicar
   :root. Mudou uma cor? Muda só aqui. Ver docs/dinonna-os-plano-diretor.md §12.

   Paleta "Supabase" (01/08/2026) — direção vencedora, ver
   docs/dinonna-os-layout-mescla-cardapio.html. Troca de VALOR só, os
   MESMOS nomes de variável de antes ("Suave B", 13/07) — nada abaixo
   deste bloco precisa mudar, e nenhuma tela muda de conteúdo com isto.
   Cores medidas ao vivo no DevTools de supabase.com/dashboard hoje:
   fundo #0e0f0e (quase preto, puxado pro verde da marca, não #000), verde
   #3ecf8e só em ação/positivo, vermelho/âmbar como selo — fundo fraco +
   borda mais forte da MESMA cor, nunca sólido (conferido no botão real de
   alerta deles: `getComputedStyle` deu fundo rgb(29,20,18), não vermelho
   cheio). Roxo/rosa/turquesa (Escalas > Livre) são extensão só do Dinonna
   — o Supabase não tem essa família, e por isso ficam como estavam. */
:root{
  /* Faz o navegador desenhar o que é DELE na cor certa: seletor de data,
     barra de rolagem, autofill. Sem isto o tema claro fica com o calendário
     do <input type=date> preto — e são 20+ campos de data no app. */
  color-scheme:dark;
  --bg:#0e0f0e;
  --panel:#181a19;
  --panel-2:#1f2220;
  --panel-3:#272b29;
  /* Peças que NÃO são o painel e por isso precisam de token próprio (01/08):
     a barra de cima era `rgba(14,15,14,.94)` cravada — ou seja, o cabeçalho
     continuaria preto no tema claro. Translúcida de propósito (tem blur). */
  --topbar-bg:rgba(14,15,14,.94);
  --scrim:rgba(6,8,6,.72);      /* véu atrás dos modais */
  --hair:rgba(242,244,238,.05); /* risquinho interno, mais fraco que --line */
  --hair-2:rgba(242,244,238,.02);
  --line:rgba(242,242,242,.07);
  --line-strong:rgba(242,242,242,.14);
  --ink:#edefee;
  --mut:#bcbebc;
  --dim:#7c847f;
  --grn:#3ecf8e;
  --grn-ink:#85e0ba;
  --grn-soft:rgba(62,207,142,.13);
  --on-grn:#04160e;
  --red:#e2554a;
  --red-ink:#fa8880;
  --red-soft:rgba(226,85,74,.14);
  --amb:#c99a3a;
  --amb-ink:#e3b341;
  --amb-soft:rgba(227,179,65,.13);
  /* texto sobre fundo --amb cheio (botão de aviso). Medido: 7,0:1 aqui e 4,6:1
     no tema claro — cada tema precisa do seu, o mesmo par não serve nos dois. */
  --on-amb:#1b1408;
  --blue:#5b9dd9;
  --blue-ink:#a8c6ea;
  --blue-soft:rgba(91,157,217,.13);
  /* Escalas > Livre (15/07/2026): cores exclusivas pro card de criação livre
     do kanban de funcionários — nunca as mesmas de vermelho/âmbar/azul, que
     já têm significado fixo (folga/limpeza/lixo) nessa tela. Sem fonte no
     Supabase — mantidas como estavam na paleta "Suave B". */
  --purple:#9b7ecb;
  --purple-ink:#c3aee8;
  --purple-soft:rgba(155,126,203,.16);
  --pink:#d47ea9;
  --pink-ink:#eeb0d0;
  --pink-soft:rgba(212,126,169,.15);
  --teal:#4fb3ad;
  --teal-ink:#8ad6d1;
  --teal-soft:rgba(79,179,173,.16);
  --mono:'JetBrains Mono',monospace;
  --disp:'Bricolage Grotesque',sans-serif;
  --body:'Instrument Sans',sans-serif;
  --r:12px;
}
/* ─────────────────────────────────────────────────────────────────────
   TEMA CLARO — preparado, ainda ADORMECIDO. Nada no app hoje escreve
   data-theme="light" em lugar nenhum (não existe alternador de tema no
   pwa-gerente), então este bloco não muda NADA no que está no ar — é só
   a outra metade do sistema de cor pronta pra quando o alternador for
   construído (aí sim vira mudança de tela, fora do escopo de hoje).
   Valores de vermelho/âmbar/azul/verde vêm do mesmo painel do Supabase
   (tema claro); roxo/rosa/turquesa são estimativa minha (não medida em
   lugar nenhum) — conferir antes de usar de verdade. */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f7f8f7;
  --panel:#ffffff;
  --panel-2:#f0f2f0;
  --panel-3:#e6e9e6;
  --topbar-bg:rgba(255,255,255,.94);
  /* o véu continua ESCURO no tema claro — é assim em todo painel sério
     (inclusive o do Supabase): o véu existe pra apagar o fundo, não pra
     combinar com ele. Só um pouco mais leve. */
  --scrim:rgba(14,20,16,.42);
  --hair:rgba(14,20,16,.07);
  --hair-2:rgba(14,20,16,.03);
  --line:rgba(14,20,16,.09);
  --line-strong:rgba(14,20,16,.17);
  --ink:#12140f;
  --mut:#565f57;
  /* ⚠️ MEDIDO, não escolhido no olho (02/08): o #7c8580 que estava aqui vinha
     por espelho do escuro e REPROVAVA no claro — 3,38:1 contra o painel, onde
     o mínimo de texto é 4,5:1. É o cinza das dicas e dos rótulos de campo, ou
     seja, o texto que mais se lê de relance. Este dá 5,26 no branco e 4,67 no
     painel-2, que é o pior fundo em que ele aparece. */
  --dim:#656e6a;
  /* mesmo motivo: o #188a5c com texto branco em cima dava 4,35 — a aba ativa
     e o botão principal são texto branco sobre este verde. Este dá 5,34. */
  --grn:#157a51;
  --grn-ink:#0f6b47;
  --grn-soft:rgba(24,138,92,.10);
  --on-grn:#ffffff;
  --red:#c23b2e;
  --red-ink:#a8291d;
  --red-soft:rgba(194,59,46,.08);
  --amb:#9b6c0c;
  --amb-ink:#8a5f0a;
  --amb-soft:rgba(155,108,12,.10);
  --on-amb:#ffffff;
  --blue:#2266ad;
  --blue-ink:#1c5490;
  --blue-soft:rgba(34,102,173,.09);
  --purple:#8465b3;
  --purple-ink:#6b4f96;
  --purple-soft:rgba(132,101,179,.10);
  --pink:#b8558c;
  --pink-ink:#9c3f73;
  --pink-soft:rgba(184,85,140,.09);
  --teal:#2f8983;
  --teal-ink:#1f6a65;
  --teal-soft:rgba(47,137,131,.10);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:var(--grn-ink);text-decoration:none}
h1,h2,h3{font-family:var(--disp);font-weight:600;letter-spacing:-.01em}
.mono{font-family:var(--mono)}
.pos{color:var(--grn-ink)}
.neg{color:var(--red-ink)}
.mut{color:var(--mut)}

/* Gating por papel — Dinonna OS é um sistema só, Master é um usuário com
   mais telas liberadas na mesma casca, não um app separado. Qualquer tela
   marcada data-master/data-gerente-only some pro papel oposto. O JS de
   login soma a classe role-master/role-gerente/role-caixa no <body>. */
body.role-gerente [data-master]{display:none!important}
body.role-master [data-gerente-only]{display:none!important}
/* Caixa (15/07/2026, papel novo — Vanessa): ainda sem permissões definidas,
   então por padrão só enxerga o Dashboard — esconde qualquer outro item de
   navegação, seja ele data-master, data-gerente-only ou compartilhado (sem
   nenhum dos dois atributos, como Colaboradores/Notas/Cardápio hoje). Vai
   crescendo conforme as permissões dela forem decididas — Estoque
   (17/07/2026) foi a primeira exceção liberada, pedido explícito do dono. */
/* 20/07/2026: caixa ganhou Fechamento de caixa — o fechamento é feito tanto
   pelo gerente quanto pelo caixa (decisão do dono). Cada tela nova liberada
   aqui precisa do par no JS: um branch em mostrarApp() que a inicialize. */
/* 27/07/2026: o caixa ganhou CARDÁPIO e LANÇAMENTOS, mas só em parte — as
   sub-abas que não são dela levam data-sem-caixa (ver abaixo). Motivo:
   - Cardápio > Fim do dia: "sobras: gerente ou caixa" (dono, 27/07);
   - Lançamentos > Notas & recibos: "o caixa também recebe mercadorias e uma vez
     na semana o gerente está de folga… então ela precisa validar a mercadoria
     que chegou" (dono, 25/07) — a decisão estava registrada e nunca tinha
     chegado ao gating;
   - Estoque > Pedidos já vinha junto, por ser sub-aba de uma tela que ela via. */
body.role-caixa [data-screen]:not([data-screen="dashboard"]):not([data-screen="estoque"]):not([data-screen="caixa"]):not([data-screen="cardapio"]):not([data-screen="lanc"]){display:none!important}
/* 20/07/2026: `data-sem-caixa` = todo mundo vê, menos o caixa. Nasceu do
   painel de indicadores (CMV, ticket médio, margem, ranking de vendas): o
   gerente PRECISA ver, o caixa não. `data-master` não servia porque
   esconderia do gerente junto. */
body.role-caixa [data-sem-caixa]{display:none!important}
body.role-caixa [data-master],
/* 20/07/2026: Fechamento de caixa é feito pelo gerente E pelo caixa, mas NÃO
   pelo Master — gravarFechamento() usa sessao.unidadeId cru, que é null pra
   ele. Por isso a tela fica com data-gerente-only (some do Master) e o caixa
   ganha esta exceção pontual em vez de perder o atributo. */
body.role-caixa [data-gerente-only]:not([data-screen="caixa"]){display:none!important}

/* ---------------------------------------------------------------------------
   CAMPO DE NÚMERO — SEM SETINHA, SEMPRE (29/07/2026)

   Ordem do dono: "padronize os campos de quantidade, não precisa de botão para
   subir o número 1 por 1... o usuário digita. isso tem que ser padrão, não
   podemos ter mais erros nisso."

   Além de ser o gesto errado (ninguém chega a 100 clicando 100 vezes), a
   setinha é perigosa aqui: um giro de rolagem do mouse com o campo focado
   ALTERA a quantidade sem ninguém perceber — e quantidade errada só aparece
   semanas depois, no CMV. O `blur` desliga a rolagem; isto tira o botão.

   Regra global de propósito: vale pros 23 campos de número do app de uma vez,
   e pro próximo que alguém criar sem lembrar desta decisão.
   --------------------------------------------------------------------------- */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}