/* =========================================================
   SDIA · visual 2 · BASE (todas as páginas, inclusive painel e PDV)
   Regra da casa: dois neutros (creme e tinta) e UM vermelho, que só aparece
   no que é para clicar e na palavra em destaque do título.
   As CORES do visual novo moram no style.css (os quatro blocos de tema no
   topo dele: escuro padrão, claro pelo sistema, claro pelo botão, escuro pelo
   botão). Ao mudar uma cor, mude nos quatro.
   Aqui ficam só os acertos de componentes do aplicativo.
   As páginas públicas somam o visual-2-site.css (títulos com serifa).
   Vem DEPOIS do style.css e do <style> da página: só sobrescreve.
   ========================================================= */

/* ---------- aplicativo (painel, PDV, admin) ---------- */
/* números e títulos na mesma letra do texto, com algarismos alinhados */
.kpi .val, .pdv-total b, .pdv-pag-total b, .pdv-troco b, .cp-total b { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.card h2, .modal h3 { letter-spacing: -.01em; }
/* título da tela em caixa normal e todo em tinta (a parte que era vermelha, como "caixa" em "Fluxo de caixa", fica igual ao resto) */
h1, .h1, body h2.h1 { text-transform: none; font-weight: 700; letter-spacing: -.01em; }
h1 em, .h1 em { color: inherit; font-style: normal; }
/* faixa da demonstração: neutra (era um degradê rosado) */
.demo-faixa { background: var(--surface-2); }
/* o primeiro cartão de cada tela tinha um brilho vermelho no canto: sai */
.kpi.hero::after { display: none; }
/* filtros: a fileira ocupa a largura toda (antes "Limpar filtros" e o último filtro caíam para a linha de baixo com espaço sobrando) */
.tools .l { flex: 1 1 auto; min-width: 0; }
/* tela larga: o conteúdo vai até 1680px e, acima disso, fica centralizado (antes parava em 1480px colado à esquerda) */
.content { max-width: 1680px; margin-inline: auto; }
/* cartão de plano recomendado: sem o brilho vermelho que piscava e sem a sombra vermelha ao passar o mouse */
.pl.hot::after, .pc.hot::after { display: none; }
.pl.hot:hover, .pc.hot:hover { box-shadow: 0 0 0 1px var(--fg), var(--sombra-2); }
/* catálogo on-line: a categoria escolhida em tinta (era letra branca sobre vermelho claro, difícil de ler no escuro) */
.ct-cats button.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
/* PDV: produto que não pode ser vendido fica esmaecido, mas o motivo ("sem estoque", "inativo") continua legível */
.pdv-prod.off { opacity: 1; }
.pdv-prod.off .nm, .pdv-prod.off .pr > :not(em) { opacity: .6; }
/* PDV em tela baixa: o carrinho cabe no que sobra da tela (o pg-pdv.js mede o topo em --pdv-topo) e os botões ficam mais compactos */
@media (min-width: 901px) {
  .pdv-cart { max-height: max(360px, min(calc(100dvh - 100px), calc(100dvh - var(--pdv-topo, 72px) - 12px))); }
}
@media (min-width: 901px) and (max-height: 720px) {
  .pdv-acts { gap: 6px; }
  .pdv-pagar { height: 48px; min-height: 48px; }
}
/* avisos temporários: somem ao toque (antes cobriam botões por alguns segundos sem dar para tirar) */
.toast { pointer-events: auto; cursor: pointer; }

/* impressão: sempre na paleta clara, mesmo com o tema escuro ligado (letra clara no papel branco ficava ilegível) */
@media print {
  :root, :root[data-theme="dark"], :root[data-theme="light"] {
    --bg: #ffffff; --surface: #ffffff; --surface-2: #f4f1ea; --line: #d9d2c4;
    --fg: #17120f; --muted: #4f483f;
    --accent: var(--v700); --destaque: #cf1a26; --good: #086a41; --warn: #7d4a00;
    --faixa: #f4f1ea; --atmosfera: transparent; --brilho: 0 0 0 0 transparent;
    --sombra-1: none; --sombra-2: none; --sombra-3: none;
    color-scheme: light;
  }
  .demo-faixa, .demo-tour, .toasts, .sd-cookies { display: none !important; }
}
/* alto contraste do Windows: a palavra em destaque dos títulos usa a cor de texto do sistema (sumia no tema escuro) */
@media (forced-colors: active) {
  mark, h1 em, .h1 em { color: CanvasText; background: none; }
}
/* celular estreito (320 px): os botões "Abertos / Viraram venda / Cancelados / Todos" quebram a linha em vez de empurrar a tela para o lado */
.seg-tog { flex-wrap: wrap; max-width: 100%; }