/* TOTAL CRM - base visual.
   Paleta do logo: marinho do "Total", azul do "CRM", ciano do topo da nuvem.
   Fontes hospedadas aqui, nunca em CDN de terceiro.

   TEMA: claro é o padrão, sempre. Escuro só quando o usuário escolhe, via
   data-tema="escuro" na raiz. Sistema de gestão que fica aberto o dia inteiro
   em tela de balcão pede fundo claro; herdar o escuro do sistema operacional
   sem perguntar é agressivo.

   ORDEM DO ARQUIVO (não invente seção nova no meio):
     1  tokens
     2  reset e tipografia
     3  layout do painel
     4  menu lateral
     5  cabeçalho de página
     6  botões
     7  formulário
     8  filtros
     9  tabela e cartão de item
    10  cartões de número
    11  selos, chips e avisos
    12  abas
    13  menu de ações
    14  telas centradas (entrada, 404)
    15  módulos
    16  responsivo - três breakpoints, todos aqui no fim

   Regras: nenhum seletor definido duas vezes; nenhum @media de largura fora
   da seção 16; prefixo de classe não se repete entre módulos (ent- é da arte
   do login, eg- de entregas, ag- de agenda, cmd- de comandas, kds- de
   cozinha, g- de garçom, nf- de notas, fin- de financeiro). O pdv.css
   continua separado porque o PDV é tela cheia. */

/* ============================================================ 1 · tokens */

@font-face{font-family:'Inter';src:url('/assets/fontes/inter-var.woff2') format('woff2');
  font-weight:100 900;font-display:swap;font-style:normal}
@font-face{font-family:'Inter Tight';src:url('/assets/fontes/inter-tight-var.woff2') format('woff2');
  font-weight:100 900;font-display:swap;font-style:normal}

:root{
  color-scheme:light;
  --marinho:#14274E; --marinho-2:#1B3A6B; --azul:#1B8DD9; --azul-forte:#127AC0; --ciano:#00B5E8;
  --grad:linear-gradient(135deg,var(--marinho-2) 0%,var(--azul) 55%,var(--ciano) 100%);

  --fundo:#F5F7FA; --cartao:#FFFFFF; --cartao-2:#FBFCFE; --borda:#E4E9F0; --borda-forte:#CFD8E3;
  --txt:#14274E; --txt-medio:#4A5A72; --txt-fraco:#7C8AA0;
  --ok:#0F8B5F; --erro:#C8372D; --alerta:#B06A00;
  --erro-fundo:#FEF2F2; --ok-fundo:#F0FBF6; --alerta-fundo:#FFFBEB;

  /* Densidade de sistema de trabalho, não de site: o lojista fica aqui o dia
     inteiro e cada pixel de ar é uma rolagem a mais. Medido no emissor do
     sistemaonline, que é o que ele já conhece. */
  --fonte-base:14px; --fonte-tabela:13.5px; --fonte-rotulo:12px; --fonte-dica:12px;
  --h1:20px; --h2:16px; --h3:14px;

  --alt-campo:36px; --alt-botao:36px; --alt-botao-g:40px;
  --alt-linha:40px; --alt-filtro:32px; --alt-mini:28px;

  --esp-1:4px; --esp-2:8px; --esp-3:12px; --esp-4:16px; --esp-5:24px;
  --pad-conteudo:20px 24px; --pad-cartao:16px 18px; --larg-sidebar:232px;

  --r:8px; --r-g:12px;
  --sombra:0 1px 2px rgba(20,39,78,.05),0 2px 8px rgba(20,39,78,.05);
  --sombra-alta:0 8px 30px rgba(20,39,78,.10),0 2px 6px rgba(20,39,78,.05);
  --foco:0 0 0 3px rgba(27,141,217,.28);
  --marca-txt:var(--marinho);
}

:root[data-tema="escuro"]{
  color-scheme:dark;
  --fundo:#0C1524; --cartao:#131F33; --cartao-2:#16243B; --borda:#22314A; --borda-forte:#31425F;
  --txt:#EAF1FA; --txt-medio:#A8B8CE; --txt-fraco:#7789A3;
  --erro-fundo:#2A1618; --ok-fundo:#11241C; --alerta-fundo:#2A2110;
  --sombra:0 1px 2px rgba(0,0,0,.4),0 2px 10px rgba(0,0,0,.3);
  --sombra-alta:0 10px 36px rgba(0,0,0,.5);
  --marca-txt:#FFFFFF;
}

/* ================================================ 2 · reset e tipografia */

*,*::before,*::after{box-sizing:border-box}
/* hidden precisa vencer regra de classe com display */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fundo);color:var(--txt);
  font:400 var(--fonte-base)/1.5 'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Inter Tight','Inter',system-ui,sans-serif;font-weight:700;
  letter-spacing:-.02em;line-height:1.2;margin:0}
h1{font-size:var(--h1)} h2{font-size:var(--h2)} h3{font-size:var(--h3)}
/* Dinheiro, código e quantidade alinham em coluna. Sem isto, tabela de preço dança. */
td,th,.num,input[inputmode="numeric"]{font-variant-numeric:tabular-nums}
a{color:var(--azul-forte);text-decoration:none} a:hover{text-decoration:underline}
code{font:500 12.5px/1 ui-monospace,'SF Mono',Menlo,monospace;
  background:color-mix(in srgb,var(--txt) 7%,transparent);padding:2px 6px;border-radius:5px}
/* Texto que só o leitor de tela precisa ouvir. */
.sr-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.marca{display:inline-flex;align-items:center;gap:11px;font-family:'Inter Tight',sans-serif;
  font-weight:800;letter-spacing:-.03em;color:var(--marca-txt);line-height:1}
.marca img{display:block;flex:none}
.marca b{color:var(--azul);font-weight:800}
.marca-login{text-align:center;margin-bottom:26px}
.marca-login img{max-width:208px;height:auto}
.marca-img img{display:block;height:auto}
.tagline{color:var(--txt-fraco);font-size:12px;letter-spacing:.15em;text-transform:uppercase;
  margin:12px 0 0;font-weight:500}

/* ================================================ 3 · layout do painel */

.app{display:grid;grid-template-columns:var(--larg-sidebar) 1fr;min-height:100dvh}
.conteudo{padding:var(--pad-conteudo);min-width:0}
.cartao{background:var(--cartao);border:1px solid var(--borda);border-radius:var(--r-g);
  box-shadow:var(--sombra);padding:var(--pad-cartao)}
.cartao.vazio{text-align:center;padding:36px 22px}
.cartao.vazio h2{margin-bottom:6px}
.cartao.vazio p{color:var(--txt-fraco);margin:0 auto 16px;max-width:46ch;font-size:13.5px}
.linha-topo{display:flex;justify-content:space-between;align-items:center;gap:var(--esp-3);
  margin-bottom:var(--esp-3);flex-wrap:wrap}
.h-secao{font:700 var(--h2)/1.2 'Inter Tight',sans-serif;margin:0}
.sub-titulo{margin:0;font:650 14px/1.2 'Inter',sans-serif;color:var(--txt-medio)}
.veu-menu,.veu-filtros{display:none;position:fixed;inset:0;background:rgba(16,24,40,.42)}
.veu-menu{z-index:55} .veu-filtros{z-index:65;display:block}
.marcas-linha{display:flex;flex-wrap:wrap;gap:var(--esp-3) 20px;margin-top:var(--esp-1)}
.rolagem-tabela{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* Troca de empresa no cabeçalho: só quem atende mais de uma loja enxerga. */
.troca-loja{height:var(--alt-botao);padding:0 10px;border:1px solid var(--borda-forte);
  border-radius:var(--r);background:var(--cartao);color:var(--txt);
  font:500 13px/1 'Inter',sans-serif;max-width:200px}

/* ================================================== 4 · menu lateral */

.lado{background:var(--cartao);border-right:1px solid var(--borda);padding:16px 10px;
  display:flex;flex-direction:column;gap:2px}
.lado .topo-marca{display:flex;align-items:center;justify-content:center;padding:6px 8px 16px;position:relative}
.lado .topo-marca a{display:inline-block}
.lado .sep{height:1px;background:var(--borda);margin:8px 4px}
.nav{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--r);
  color:var(--txt-medio);font-size:13.5px;font-weight:500;transition:background .12s,color .12s}
.nav:hover{background:var(--cartao-2);color:var(--txt);text-decoration:none}
.nav[aria-current]{background:color-mix(in srgb,var(--mod,var(--azul)) 11%,transparent);
  color:var(--mod,var(--azul-forte));font-weight:600}
.nav .rot{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* O ponto colorido é o que faz o lojista achar o módulo antes de ler o nome.
   No menu ele deu lugar ao ícone; segue valendo nos cartões e nas listas. */
.ponto{width:8px;height:8px;border-radius:3px;background:var(--mod,var(--azul));flex:none}
/* O ícone herda a cor do módulo, então forma e cor dizem a mesma coisa. */
.nav .ico{flex:none;color:var(--mod,var(--azul));opacity:.9}
.nav:hover .ico,.nav[aria-current] .ico{opacity:1}
.nav.futuro .ico{opacity:.4}
.nav-area{margin:14px 10px 4px;font:700 11px/1 'Inter',sans-serif;letter-spacing:.09em;
  text-transform:uppercase;color:var(--txt-fraco)}
.nav-lista{display:flex;flex-direction:column;gap:6px}
.nav-lista > .nav:first-child{margin-bottom:2px}

/* ------------------------------------------------- áreas do menu em cartão
   Seis áreas e mais de trinta telas. Em lista corrida o lojista rola o menu
   inteiro atrás de "Contas a pagar"; fechado, ele vê as seis de uma vez. A
   borda esquerda colorida é o que deixa a área reconhecível antes da leitura,
   como o ponto faz com o módulo. */
.nav-grupo{border:1.5px solid color-mix(in srgb,var(--area,#4A5A72) 80%,transparent);
  border-radius:10px;overflow:hidden;
  background:color-mix(in srgb,var(--area,#4A5A72) 4%,var(--cartao));
  transition:border-color .14s,background .14s}
.nav-grupo:hover,.nav-grupo[open]{border-color:var(--area,#4A5A72)}
.nav-grupo > summary{display:flex;align-items:center;gap:8px;cursor:pointer;
  padding:10px 11px;list-style:none;
  font:700 15px/1.25 'Inter',sans-serif;color:var(--txt);
  transition:background .12s}
.nav-grupo > summary::-webkit-details-marker{display:none}
.nav-grupo > summary:hover{background:var(--cartao-2)}
.nav-grupo > summary:focus-visible{outline:2px solid var(--area,#4A5A72);outline-offset:-2px}
.area-nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Seta desenhada em CSS: um SVG por área seriam seis requisições ou seis
   blocos de markup repetido para uma forma de doze pixels. */
.area-seta{flex:none;width:9px;height:9px;border-right:2px solid var(--txt-fraco);
  border-bottom:2px solid var(--txt-fraco);transform:rotate(45deg);margin:-3px 2px 0 0;
  transition:transform .16s}
.nav-grupo[open] > summary{background:color-mix(in srgb,var(--area,#4A5A72) 8%,transparent);
  color:var(--area,var(--txt))}
.nav-grupo > summary .ico{flex:none;color:var(--area,#4A5A72);opacity:.95}

/* Área que é atalho: mesmo cartão, sem seta de abrir. */
.atalho-area{display:flex;align-items:center;gap:8px;padding:10px 11px;
  font:700 15px/1.25 'Inter',sans-serif;color:var(--txt);text-decoration:none}
.atalho-area:hover{text-decoration:none;background:var(--cartao-2);color:var(--txt)}
.atalho-area .ico{flex:none;color:var(--area,#4A5A72)}
.atalho-area .area-ir{margin-left:auto;color:var(--txt-fraco);font-size:19px;line-height:1;flex:none}
.atalho-area[aria-current]{background:color-mix(in srgb,var(--area,#4A5A72) 10%,transparent);
  color:var(--area)}
.atalho-area.solido,.atalho-area.solido:hover{color:#fff}
.atalho-area.solido .ico,.atalho-area.solido .area-ir{color:#fff}
/* O hover clareia a própria cor, não pinta por cima.
   `background:rgba(255,255,255,.12)` SUBSTITUÍA o azul do cartão por um branco
   quase opaco - e com o texto branco por cima o botão sumia ao passar o mouse. */
/* Escurece, não clareia: sobre azul claro o texto branco perde contraste, e
   o botão ficava mais apagado ao passar o mouse do que parado. */
.atalho-area.solido:hover{background:color-mix(in srgb,#000 13%,var(--area))}
.atalho-area.solido[aria-current]{background:color-mix(in srgb,#000 24%,var(--area))}

/* Área de cor cheia. Uma só no menu, de propósito: duas competiriam e o
   destaque deixaria de ser destaque. */
.nav-grupo.solido{background:var(--area,#6366F1);border-color:var(--area,#6366F1)}
.nav-grupo.solido > summary{color:#fff}
.nav-grupo.solido > summary .ico,
.nav-grupo.solido > summary .area-seta{color:#fff;border-color:#fff}
.nav-grupo.solido > summary:hover{background:color-mix(in srgb,#000 13%,var(--area))}
.nav-grupo.solido[open] > summary{background:color-mix(in srgb,#000 14%,var(--area));color:#fff}
.nav-grupo.solido .area-itens{background:var(--cartao);margin:0 2px 2px;border-radius:8px}
.nav-grupo[open] > summary .area-seta{transform:rotate(225deg);margin:2px 2px 0 0;
  border-color:var(--area,var(--txt-fraco))}
.area-itens{display:flex;flex-direction:column;gap:1px;padding:3px 6px 7px}
.area-itens .nav{font-size:13.5px;padding:8px 10px}

@media (prefers-reduced-motion:reduce){.area-seta{transition:none}}
/* Item de menu de tela que ainda não existe. Fica visível e apagado: o menu
   é o mapa do sistema, e o que falta precisa aparecer como falta. */
.nav.futuro{color:var(--txt-fraco);opacity:.72}
.nav.futuro .ponto{opacity:.35}
.nav.futuro:hover{opacity:1}
/* A tela que falta é marcada por um ponto discreto, não por um selo escrito:
   selo em todo item deixa o menu ilegível, e a explicação já está na tela que
   o clique abre. */
.tag-breve{margin-left:auto;color:var(--borda-forte);font-size:15px;line-height:1;flex:none}

/* O botão mais clicado do sistema. Altura de alvo de toque confortável: no
   balcão ele é apertado com o dedo, às vezes com a mão ocupada. */
.btn-pdv{display:flex;align-items:center;justify-content:center;gap:9px;margin:2px 4px 8px;
  padding:16px 14px;min-height:54px;border-radius:11px;background:var(--mod,#16A34A);color:#fff;
  font:700 15px/1 'Inter',sans-serif;letter-spacing:.01em;text-decoration:none;
  box-shadow:0 1px 2px rgba(16,24,40,.14),0 6px 16px color-mix(in srgb,var(--mod,#16A34A) 28%,transparent)}
.btn-pdv:hover{text-decoration:none;color:#fff;filter:brightness(1.06)}
.btn-pdv:active{transform:translateY(1px)}
.btn-pdv svg{flex:none}
.abre-menu{display:none;flex-direction:column;justify-content:center;gap:4px;width:38px;height:38px;
  padding:0 9px;border:1px solid var(--borda);border-radius:var(--r);background:var(--cartao);cursor:pointer}
.abre-menu span{display:block;height:2px;border-radius:2px;background:var(--txt-medio)}
/* Fora do fluxo para a marca ficar de fato no centro: com o X ocupando
   espaço, "centralizado" sairia deslocado para a esquerda pela largura dele. */
.fecha-menu{display:none;position:absolute;right:4px;top:0;border:0;background:none;font-size:26px;line-height:1;
  color:var(--txt-fraco);cursor:pointer;padding:0 4px}
/* No celular o PDV sobe para o cabeçalho: dentro da gaveta custaria dois
   toques na tela que o balcão mais abre. */
.pdv-mobile{display:none}

/* =========================================== 5 · cabeçalho de página */

/* 44px: título e subtítulo na mesma linha base, ações à direita. O subtítulo
   embaixo custava 22px de altura em toda tela do sistema. */
.cabec{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-3);
  min-height:44px;margin-bottom:var(--esp-4);flex-wrap:wrap}
.cabec-tit{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-width:0}
.cabec h1{font-size:var(--h1)}
.sub-cabec{margin:0;color:var(--txt-fraco);font-size:12.5px}
.cabec-dir{display:flex;align-items:center;gap:var(--esp-2);flex-wrap:wrap}
.usuario{display:flex;align-items:center;gap:8px}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--grad);color:#fff;
  display:grid;place-items:center;font:700 13px/1 'Inter',sans-serif}
.sair{font-size:12.5px;color:var(--txt-fraco)}
.tema{background:none;border:1px solid var(--borda-forte);color:var(--txt-medio);cursor:pointer;
  border-radius:var(--r);width:32px;height:32px;font-size:15px;line-height:1}
.tema:hover{background:var(--cartao-2)}

/* ==================================================== 6 · botões */

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--esp-2);
  width:100%;height:var(--alt-botao);padding:0 14px;
  border:0;border-radius:var(--r);cursor:pointer;font:600 13.5px/1 'Inter',sans-serif;color:#fff;
  background:var(--grad);transition:filter .15s,transform .05s;box-shadow:0 2px 10px rgba(27,141,217,.22);
  text-decoration:none}
.btn:hover{filter:brightness(1.06);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none;box-shadow:var(--foco)}
.btn:disabled{opacity:.55;cursor:default}
.btn svg{flex:none}
.btn.neutro{background:var(--cartao);color:var(--txt-medio);border:1px solid var(--borda-forte);box-shadow:none}
.btn.neutro:hover{background:var(--cartao-2);filter:none}
.btn.perigo{color:var(--erro);border-color:color-mix(in srgb,var(--erro) 35%,var(--borda))}
.btn.perigo:hover{background:var(--erro-fundo)}
/* .auto é herança: quase toda tela escreve "btn auto". Hoje é só largura. */
.btn.auto{width:auto}
/* A ação principal da página (Salvar, Novo) é a única mais alta que o resto. */
.btn.principal{height:var(--alt-botao-g);width:auto;padding:0 18px;font-size:14px}
/* Botão que vive dentro de linha de tabela. */
.btn.mini{height:var(--alt-mini);width:auto;padding:0 11px;font-size:13px}
.acoes-linha{display:flex;gap:6px;flex-wrap:wrap}
.acoes-linha .btn{height:var(--alt-mini);width:auto;padding:0 11px;font-size:13px}
.emitir-linha{display:flex;gap:6px}
.emitir-linha .btn.auto{height:var(--alt-mini);padding:0 11px;font-size:13px}
.btn-lixo{border:0;background:none;cursor:pointer;font-size:17px;line-height:1;padding:6px;
  border-radius:7px;color:var(--erro)}
.btn-lixo:hover{background:var(--erro-fundo)}

/* ================================================== 7 · formulário */

/* Grade de 12 colunas, uma definição só. Largura pelo conteúdo: campo de UF
   tem 2 caracteres e não pode ter o tamanho do campo de razão social.
   Sem classe o campo vale 4 colunas, que é o padrão sensato - antes valia 1
   e a dica quebrava em oito linhas dentro de 78px. */
.grade-form{display:grid;grid-template-columns:repeat(12,1fr);gap:0 var(--esp-3);align-items:start}
.campo{margin-bottom:var(--esp-3);grid-column:span 4;min-width:0}
.campo.c-xp{grid-column:span 2}
.campo.c-p{grid-column:span 3}
.campo.c-m{grid-column:span 4}
.campo.c-g{grid-column:span 6}
.campo.c-full,.campo.largo{grid-column:1/-1}

.campo label{display:block;font-size:var(--fonte-rotulo);font-weight:600;
  color:var(--txt-medio);margin-bottom:var(--esp-1)}
.campo input,.campo select,.campo textarea{width:100%;height:var(--alt-campo);padding:0 11px;
  font:400 14px/1 'Inter',sans-serif;color:var(--txt);background:var(--cartao);
  border:1px solid var(--borda-forte);border-radius:var(--r);
  transition:border-color .15s,box-shadow .15s}
.campo textarea{height:auto;padding:9px 11px;line-height:1.45}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--azul);
  box-shadow:var(--foco)}
.campo input::placeholder,.campo textarea::placeholder{color:var(--txt-fraco)}
.campo input[type=file]{height:auto;padding:8px 11px;font-size:13px;background:var(--fundo)}
.campo input[type=color]{padding:3px;height:var(--alt-campo)}
.dica{font-size:var(--fonte-dica);color:var(--txt-fraco);margin:3px 0 0;line-height:1.35}
/* Dica de campo estreito não pode quebrar a linha inteira da grade: numa
   coluna de 170px um texto de duas frases vira seis linhas e empurra todos
   os vizinhos. Aqui ela fica em uma linha; o texto longo vai para o title. */
.campo.c-xp .dica,.campo.c-p .dica{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acoes-form{display:flex;gap:var(--esp-2);margin-top:var(--esp-4);flex-wrap:wrap}
.acoes-form .btn{width:auto;padding:0 18px}
.marcar{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--txt-medio);
  margin:0 var(--esp-4) var(--esp-2) 0;cursor:pointer}
.marcar input{width:16px;height:16px;accent-color:var(--azul);cursor:pointer}
.marcar.sub{margin-top:10px;margin-left:24px}
.cep-linha{display:flex;gap:var(--esp-2)}
.cep-linha input{flex:1;min-width:0}
.cep-linha .btn{flex:none;width:auto;height:var(--alt-campo);padding:0 12px;font-size:13px}
.cor-par{display:flex;align-items:center;gap:10px}
.cor-par input[type=color]{width:48px;height:var(--alt-campo);padding:3px;border:1px solid var(--borda);
  border-radius:var(--r);background:var(--cartao);cursor:pointer}
.cor-par output{font:600 13px/1 'Inter',monospace;color:var(--txt-medio);letter-spacing:.02em}
.opcao-bloco{padding:12px 0;border-bottom:1px solid var(--borda)}
.opcao-bloco:last-of-type{border-bottom:0;padding-bottom:4px}
.opcao-bloco .dica{margin:6px 0 0 24px}
.lista-erros{margin:8px 0 0;padding-left:20px}
.lista-erros li{margin-bottom:4px}

/* Campo com ícone dentro (tela de entrada). */
.campo-ico{position:relative;display:flex;align-items:center}
.campo-ico > svg{position:absolute;left:12px;color:var(--txt-fraco);pointer-events:none;
  transition:color .15s ease}
.campo-ico input{padding-left:38px}
.campo-ico:focus-within > svg{color:var(--azul)}
.campo-ico input[type=password],.campo-ico input#senha{padding-right:44px}
.ver-senha{position:absolute;right:4px;width:30px;height:30px;display:grid;place-items:center;
  border:0;border-radius:6px;background:none;cursor:pointer;color:var(--txt-fraco)}
.ver-senha:hover{background:var(--fundo);color:var(--txt-medio)}
.ver-senha.ativo{color:var(--azul)}

/* Seção em faixa: o título de cada grupo ganha fundo próprio, como no emissor
   do sistemaonline. Num formulário de 60 campos o olho precisa de marco.
   .secao é o nome novo; .secao-nf continua valendo porque o emissor usa. */
.cartao.secao,.cartao.secao-nf{padding:0;overflow:hidden}
.cartao.secao > h2,.cartao.secao > summary,
.cartao.secao-nf > h2,.cartao.secao-nf > summary{display:block;margin:0;padding:10px 16px;
  background:var(--fundo);border-bottom:1px solid var(--borda);
  font:700 14.5px/1.3 'Inter Tight',sans-serif;color:var(--txt)}
.cartao.secao > *:not(h2):not(summary),
.cartao.secao-nf > *:not(h2):not(summary){margin-left:16px;margin-right:16px}
.cartao.secao > .grade-form,.cartao.secao-nf > .grade-form{margin-top:var(--esp-3);margin-bottom:0}
.cartao.secao > p:last-child,.cartao.secao > div:last-child,.cartao.secao > table:last-child,
.cartao.secao-nf > p:last-child,.cartao.secao-nf > div:last-child,
.cartao.secao-nf > table:last-child{margin-bottom:var(--esp-4)}
.cartao.secao > .rolagem-tabela,
.cartao.secao-nf > .rolagem-tabela{margin:0;padding:0 16px var(--esp-4)}
.cartao.secao > details,.cartao.secao-nf > details{margin-bottom:var(--esp-3)}

/* Seções recolhíveis dos campos que poucos usam. */
.bloco-extra{margin-top:var(--esp-2)}
.bloco-extra > summary{cursor:pointer;padding:9px 0;font:600 13.5px/1.3 'Inter',sans-serif;
  color:var(--azul-forte);list-style:none}
.bloco-extra > summary::-webkit-details-marker{display:none}
.bloco-extra > summary::before{content:"+ ";font-weight:700}
.bloco-extra[open] > summary::before{content:"− "}
details.cartao > summary{color:var(--txt)}
details.cartao > summary .dica{display:inline;margin:0;font-weight:400}

/* Variante densa do formulário fiscal (emissor NF-e e ajustes fiscais).
   Depois que a base virou 36px sobrou só a largura: num formulário de 60
   campos curtos as larguras fixas (série em 110px, data em 140px) empacotam
   muito melhor que as frações de 12 colunas, e é o desenho que o Daniel
   aprovou. Nenhuma outra tela usa - formulário comum é a grade de 12. */
.form-compacto .grade-form{display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 var(--esp-3)}
.form-compacto .campo{flex:0 0 auto;width:210px;max-width:100%;grid-column:auto}
.form-compacto .campo.c-xp{width:110px}
.form-compacto .campo.c-p{width:140px}
.form-compacto .campo.c-m{width:210px}
.form-compacto .campo.c-g{width:290px}
.form-compacto .campo.c-g:has(select){width:330px}
.form-compacto .campo.c-full,.form-compacto .campo.largo{width:100%;flex:1 1 100%}
.form-compacto .campo[style]{max-width:100%}
.form-compacto .campo .cep-linha{width:100%}
.form-compacto .cartao{box-shadow:none;border-color:var(--borda)}

/* ==================================================== 8 · filtros */

/* Uma linha só: busca que cresce à esquerda, até quatro seletores de 32px,
   Filtrar e Limpar. O que passar de quatro vai para "Mais filtros", que abre
   a segunda linha. 48px fechada, 88px aberta - o cartão de filtros antigo
   tinha 398px, quase metade da tela antes da primeira venda aparecer. */
.filtros{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-2);
  background:var(--cartao);border:1px solid var(--borda);border-radius:var(--r);
  padding:var(--esp-2);margin-bottom:var(--esp-3)}
.f-busca{flex:1 1 200px;min-width:120px;height:var(--alt-filtro);padding:0 10px;
  font:400 13.5px/1 'Inter',sans-serif;color:var(--txt);background:var(--cartao);
  border:1px solid var(--borda-forte);border-radius:7px}
.f-busca:focus{outline:none;border-color:var(--azul);box-shadow:var(--foco)}
/* display:contents no computador, para os campos participarem da linha da
   barra. No celular este mesmo nó vira a folha e volta a ser caixa. */
.f-campos{display:contents}
.f-campo{display:inline-flex;align-items:center;gap:6px;min-width:0}
.f-campo > span{font-size:var(--fonte-rotulo);color:var(--txt-fraco);white-space:nowrap}
.f-campo select,.f-campo input{height:var(--alt-filtro);max-width:100%;padding:0 8px;
  font:400 13px/1 'Inter',sans-serif;color:var(--txt);background:var(--cartao);
  border:1px solid var(--borda-forte);border-radius:7px}
.f-campo select:focus,.f-campo input:focus{outline:none;border-color:var(--azul);box-shadow:var(--foco)}
.f-extra{display:none;flex-wrap:wrap;align-items:center;gap:var(--esp-2);flex:1 0 100%}
.filtros.mais-aberto .f-extra{display:flex}
.f-mais,.f-limpar{border:0;background:none;cursor:pointer;padding:0 4px;white-space:nowrap;
  font:600 12.5px/1 'Inter',sans-serif;color:var(--azul-forte);text-decoration:none}
.f-mais:hover,.f-limpar:hover{text-decoration:underline}
.filtros .btn{height:var(--alt-filtro);width:auto;padding:0 14px;font-size:13px}
.f-abrir,.f-fechar{display:none}
/* Os filtros que estão valendo, em chip removível: é assim que o lojista
   lembra por que a lista está curta. */
.f-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--esp-3)}
.f-chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 7px 0 10px;
  border-radius:20px;background:color-mix(in srgb,var(--azul) 10%,transparent);
  color:var(--azul-forte);font:600 12px/1 'Inter',sans-serif;text-decoration:none}
.f-chip:hover{text-decoration:none;background:color-mix(in srgb,var(--azul) 18%,transparent)}
.f-chip i{font-style:normal;font-size:14px;line-height:1;opacity:.7}

/* Barra de busca simples, sem seletor: sobrou nas telas em que um campo só
   resolve (fornecedores, cardápio, cupons). */
.barra-busca{display:flex;gap:var(--esp-2);margin-bottom:var(--esp-3);flex-wrap:wrap;align-items:center}
.barra-busca input,.barra-busca select{min-width:0;height:var(--alt-filtro);padding:0 10px;
  font:400 13.5px/1 'Inter',sans-serif;color:var(--txt);background:var(--cartao);
  border:1px solid var(--borda-forte);border-radius:7px}
.barra-busca input{flex:1;min-width:180px}
.barra-busca input:focus,.barra-busca select:focus{outline:none;border-color:var(--azul);
  box-shadow:var(--foco)}
.barra-busca .btn{height:var(--alt-filtro);width:auto;padding:0 14px;font-size:13px}
.periodos{display:flex;gap:2px;background:var(--cartao);border:1px solid var(--borda);
  border-radius:var(--r);padding:3px}
.periodos a{padding:5px 11px;border-radius:6px;font:600 13px/1 'Inter',sans-serif;
  color:var(--txt-fraco);text-decoration:none;white-space:nowrap}
.periodos a:hover{color:var(--txt);text-decoration:none}
.periodos a[aria-current]{background:var(--azul);color:#fff}

/* ==================================== 9 · tabela e cartão de item */

table.grade{width:100%;border-collapse:collapse;font-size:var(--fonte-tabela)}
table.grade th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--txt-fraco);font-weight:600;padding:0 10px 8px;white-space:nowrap}
table.grade td{padding:5px 10px;border-top:1px solid var(--borda)}
/* Linha de 40px: dez vendas cabem na primeira tela. Com 65px cabiam quatro. */
table.grade tbody tr{height:var(--alt-linha)}
/* Zebra sutil em vez de só o hover: sem ela, oito colunas viram uma mancha. */
table.grade tbody tr:nth-child(even) td{background:var(--cartao-2)}
table.grade tbody tr:hover td{background:color-mix(in srgb,var(--azul) 6%,var(--cartao))}
table.grade input:not([type=checkbox]),table.grade select{width:100%;height:var(--alt-mini);
  padding:0 9px;font:400 13px/1 'Inter',sans-serif;
  border:1px solid var(--borda-forte);border-radius:7px;background:var(--cartao);color:var(--txt)}
table.grade input:focus,table.grade select:focus{outline:none;border-color:var(--azul);box-shadow:var(--foco)}
table.grade input.curto{text-align:right;padding-right:11px}
/* Pagamentos da nota: cada campo do tamanho do que cabe dentro dele. Nome de
   forma de pagamento não passa de trinta letras; valor de nota não passa de
   doze dígitos. A última coluna fica com a sobra da tela. */
.grade-pag .p-forma{width:clamp(180px,26vw,300px)}
.grade-pag .p-val{width:160px}
.grade-pag .p-ac{width:104px}
.grade-pag .p-sobra{width:auto}
.grade-pag td.p-sobra{padding:0}
table.grade input[type=checkbox]{width:16px;height:16px}
.grade td .marcar{margin:0}
.grade td .dica{margin-top:2px;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em}
table.grade tbody tr.linha-alerta td{background:var(--erro-fundo)}
small.atraso{color:var(--erro);font-weight:600}
input.em-linha{width:100%;max-width:260px;height:var(--alt-mini);padding:0 9px;font-size:13px}

/* Cartão único de item: é o que a tabela vira no celular e o que as listas
   em cartão (vendas, notas, comandas, entregas) usam no computador. Antes
   cada módulo tinha o seu, com padding e raio diferentes. */
.itens-cartao{display:grid;gap:var(--esp-2)}
.item-cartao{background:var(--cartao);border:1px solid var(--borda);border-radius:var(--r);
  padding:12px 14px;box-shadow:var(--sombra);display:flex;flex-direction:column;gap:6px}
.item-cartao > header{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-2)}
.ic-id{font:500 12px/1 'Inter',sans-serif;color:var(--txt-fraco)}
.ic-id b{font:700 16px/1 'Inter Tight',sans-serif;color:var(--txt);margin-left:4px}
.ic-id small{color:var(--txt-fraco)}
.ic-quem{margin:0;font-size:13.5px;font-weight:600;color:var(--txt)}
.ic-nota{margin:0;font-size:12px;line-height:1.4;color:var(--txt-fraco)}
/* A mesma linha, quando o conteúdo é recusa e não informação. Vermelho num
   cartão de venda normal faz o lojista procurar problema que não existe. */
.ic-motivo{margin:0;font-size:12px;line-height:1.4;color:var(--erro)}
.ic-pe{display:flex;align-items:baseline;justify-content:space-between;gap:var(--esp-2);
  font-size:12.5px;color:var(--txt-fraco)}
.ic-pe b{font:700 15px/1 'Inter Tight',sans-serif;color:var(--txt)}
.ic-acoes{margin-top:2px}
.ic-acoes .menu-acoes{display:block}
.ic-acoes .menu-acoes > button{width:100%}
.ic-acoes .ma-lista{left:0;right:auto}
.nf-mais{display:flex;flex-direction:column;align-items:center;gap:var(--esp-2);padding:16px 0 8px}
.so-estreito{display:none}
.motivo{color:var(--txt-fraco);font-size:12px;line-height:1.35;display:inline-block;max-width:34ch}
.chave{font:500 11.5px/1.4 ui-monospace,monospace;color:var(--txt-fraco);word-break:break-all}

/* ============================================ 10 · cartões de número */

/* Totais no topo de uma lista (valor do estoque, faturamento do período). */
.cartoes-topo{display:flex;gap:var(--esp-3);flex-wrap:wrap;margin-top:var(--esp-3)}
.ct-item{flex:1 1 200px;background:var(--cartao);border:1px solid var(--borda);
  border-radius:var(--r-g);padding:12px 16px;box-shadow:var(--sombra)}
.ct-item span{display:block;font-size:11px;color:var(--txt-fraco);
  text-transform:uppercase;letter-spacing:.04em}
.ct-item b{display:block;font:800 22px/1.15 'Inter Tight',sans-serif;margin-top:3px;
  font-variant-numeric:tabular-nums}
.ct-item small{display:block;font-size:11.5px;color:var(--txt-fraco);margin-top:2px}
.ct-item.ok b{color:var(--ok)}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--esp-3)}
.tile{position:relative;padding:16px 16px 14px}
.tile .ponto{position:absolute;top:14px;left:16px;width:20px;height:4px;border-radius:3px}
.tile .t-rot{margin:12px 0 2px;font-size:12px;color:var(--txt-fraco);font-weight:500}
.tile .t-val{margin:0;font:800 22px/1.1 'Inter Tight',sans-serif;letter-spacing:-.02em}

/* ======================================= 11 · selos, chips e avisos */

.chip{display:inline-flex;align-items:center;gap:6px;border-radius:7px;padding:2px 8px;
  font-size:12px;font-weight:600;background:color-mix(in srgb,var(--mod,var(--azul)) 13%,transparent);
  color:var(--mod,var(--azul-forte));margin:2px 4px 2px 0}
.selo{display:inline-block;border-radius:6px;padding:2px 8px;font-size:11.5px;font-weight:600}
.selo.ok{background:var(--ok-fundo);color:var(--ok)}
.selo.aviso{background:var(--alerta-fundo);color:var(--alerta)}
.selo.erro{background:var(--erro-fundo);color:var(--erro)}
.aviso{border-radius:var(--r);padding:10px 13px;font-size:13.5px;margin-bottom:var(--esp-3);
  border:1px solid transparent}
.aviso.erro{background:var(--erro-fundo);color:var(--erro);border-color:color-mix(in srgb,var(--erro) 28%,transparent)}
.aviso.ok{background:var(--ok-fundo);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 28%,transparent)}
.aviso.alerta{background:var(--alerta-fundo);color:var(--alerta);border-color:color-mix(in srgb,var(--alerta) 28%,transparent)}
.ajuda{margin-top:16px;font-size:13px;color:var(--txt-fraco);text-align:center}
.rodape-min{margin-top:22px;text-align:center;font-size:12px;color:var(--txt-fraco)}
/* Barra de uso do plano. Só aparece quando existe teto contratado. */
.barra-uso{height:5px;border-radius:3px;background:var(--fundo);margin-top:6px;overflow:hidden}
.barra-uso i{display:block;height:100%;background:var(--azul);border-radius:3px}

/* ====================================================== 12 · abas */

.abas{display:flex;gap:4px;border-bottom:1px solid var(--borda);margin-bottom:var(--esp-4);
  overflow-x:auto}
.abas a{padding:8px 13px;font-size:13.5px;font-weight:600;color:var(--txt-fraco);
  border-bottom:2px solid transparent;white-space:nowrap}
.abas a:hover{color:var(--txt);text-decoration:none}
.abas a[aria-current]{color:var(--azul-forte);border-bottom-color:var(--azul)}
.abas-rolam{-webkit-overflow-scrolling:touch;scrollbar-width:thin}
/* Sub-aba dentro de uma aba (Notas fiscais > NF-e, NFC-e, NFS-e). Precisa
   ser visivelmente mais leve que a aba de cima, senão as duas fileiras
   competem e ninguém sabe qual é o nível de cima. */
.sub-abas{border-bottom:0;margin:-6px 0 var(--esp-4);gap:6px}
.sub-abas a{padding:6px 12px;font-size:13px;border:1px solid var(--borda);border-radius:999px;
  background:var(--cartao);display:inline-flex;align-items:center;gap:7px}
.sub-abas a[aria-current]{background:color-mix(in srgb,var(--azul) 10%,var(--cartao));
  border-color:var(--azul);color:var(--azul-forte)}
.sub-abas .ponto{width:7px;height:7px;background:var(--borda-forte)}
.sub-abas .ponto.on{background:var(--ok)}

/* ============================================= 13 · menu de ações */

.menu-acoes{position:relative;display:inline-block}
.menu-acoes > button{height:var(--alt-mini);width:auto;padding:0 11px;font-size:13px;white-space:nowrap}
.ma-lista{position:absolute;right:0;top:calc(100% + 4px);z-index:20;min-width:186px;display:none;
  flex-direction:column;background:var(--cartao);border:1px solid var(--borda);border-radius:10px;
  box-shadow:var(--sombra-alta);padding:5px;overflow:hidden}
.menu-acoes.aberto .ma-lista{display:flex}
.ma-lista a{padding:8px 11px;border-radius:6px;font-size:13.5px;color:var(--txt);
  text-decoration:none;white-space:nowrap}
.ma-lista a:hover{background:var(--fundo);text-decoration:none}
.ma-lista a.perigo{color:var(--erro)}
.ma-lista a.perigo:hover{background:var(--erro-fundo)}

/* ================================== 14 · telas centradas (entrada, 404) */

.centro{min-height:100dvh;display:grid;place-items:center;padding:28px 20px;position:relative;
  overflow:hidden}
.centro::before{content:"";position:absolute;inset:-45% -20% auto -20%;height:75%;
  background:radial-gradient(55% 55% at 50% 0%,color-mix(in srgb,var(--azul) 14%,transparent),transparent 72%);
  pointer-events:none}
.caixa{width:100%;max-width:412px;background:var(--cartao);border:1px solid var(--borda);
  border-radius:var(--r-g);box-shadow:var(--sombra-alta);padding:32px 30px;position:relative}
.caixa.larga{max-width:620px}
.centro.texto{text-align:center}
.centro.texto .marca-img{display:inline-block;margin-top:24px}
.erro-num{font-family:'Inter Tight',sans-serif;font-weight:800;font-size:clamp(78px,17vw,136px);
  line-height:.9;letter-spacing:-.05em;background:var(--grad);-webkit-background-clip:text;
  background-clip:text;color:transparent;margin-bottom:6px}
.erro-txt{font-size:14.5px;color:var(--txt-medio);max-width:44ch;margin:10px auto 0}
.busca-loja{display:flex;gap:var(--esp-2);margin:20px auto 0;max-width:400px}
.busca-loja input{flex:1;height:var(--alt-botao-g);padding:0 14px;font:400 14px/1 'Inter',sans-serif;
  color:var(--txt);background:var(--cartao);border:1px solid var(--borda-forte);border-radius:var(--r)}
.busca-loja input:focus{outline:none;border-color:var(--azul);box-shadow:var(--foco)}
.busca-loja .btn{width:auto;height:var(--alt-botao-g);padding:0 20px;flex:none}
.achados{display:grid;gap:var(--esp-2);margin-top:20px;text-align:left}
.achado{display:flex;align-items:center;gap:var(--esp-3);padding:10px 12px;background:var(--cartao);
  border:1px solid var(--borda);border-radius:var(--r);transition:border-color .12s,transform .06s}
.achado:hover{border-color:var(--azul);text-decoration:none;transform:translateY(-1px)}
.a-ini{width:36px;height:36px;flex:none;border-radius:var(--r);background:var(--grad);color:#fff;
  display:grid;place-items:center;font:800 15px/1 'Inter Tight',sans-serif}
.achado b{display:block;font-size:14px;font-weight:600;color:var(--txt)}
.achado small{color:var(--txt-fraco);font-size:12px}

/* --- tela de entrada: cartão único no centro, sobre o fundo da casa ---
   A versão em duas colunas roubava atenção de uma página com uma função só. */
.corpo-entrada{margin:0}
.entrada{position:relative;min-height:100dvh;display:grid;place-items:center;
  padding:28px 20px;isolation:isolate}
.ent-arte{position:absolute;inset:0;z-index:-1;overflow:hidden;
  background:linear-gradient(145deg,#0B1830 0%,var(--marinho) 45%,#124E86 100%)}
.bolha{position:absolute;border-radius:50%;filter:blur(72px);will-change:transform}
.b1{width:52vmax;height:52vmax;left:-18vmax;top:-20vmax;background:var(--azul);opacity:.46;
  animation:flutua1 28s ease-in-out infinite}
.b2{width:40vmax;height:40vmax;right:-14vmax;bottom:-18vmax;background:var(--ciano);opacity:.34;
  animation:flutua2 34s ease-in-out infinite}
.b3{width:30vmax;height:30vmax;right:14vmax;top:-10vmax;background:#7C3AED;opacity:.24;
  animation:flutua3 40s ease-in-out infinite}
@keyframes flutua1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(7vmax,6vmax,0) scale(1.1)}}
@keyframes flutua2{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-8vmax,-7vmax,0) scale(1.12)}}
@keyframes flutua3{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-6vmax,8vmax,0)}}
/* Malha de pontos: dá textura e disfarça o banding do desfoque em tela grande. */
.ent-grade{position:absolute;inset:0;opacity:.42;
  background-image:radial-gradient(rgba(255,255,255,.18) 1px,transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(100% 70% at 50% 42%,#000 18%,transparent 76%);
  mask-image:radial-gradient(100% 70% at 50% 42%,#000 18%,transparent 76%)}
/* Halo atrás do cartão: separa o branco do fundo sem precisar de borda grossa. */
.ent-brilho{position:absolute;left:50%;top:44%;width:min(660px,92vw);height:min(660px,92vw);
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.14) 0%,transparent 62%)}
.ent-centro{width:100%;max-width:412px;display:flex;flex-direction:column;align-items:center;gap:18px}
.ent-cartao{position:relative;width:100%;background:var(--cartao);border-radius:18px;
  padding:32px 28px 28px;overflow:hidden;
  box-shadow:0 1px 2px rgba(4,12,28,.2),0 18px 50px -12px rgba(4,12,28,.5);
  animation:sobe .42s cubic-bezier(.22,.9,.3,1) both}
@keyframes sobe{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* Fio do gradiente da marca no topo, a assinatura da casa. */
.ec-faixa{position:absolute;inset:0 0 auto 0;height:4px;background:var(--grad)}
.ec-logo{text-align:center;margin-bottom:20px}
.ec-logo img{max-width:152px;height:auto;display:inline-block}
.ec-titulo{margin:0 0 22px;text-align:center;font:800 22px/1.2 'Inter Tight',sans-serif;
  letter-spacing:-.02em;color:var(--txt)}
.ec-titulo + .ec-sub{margin-top:-16px}
.ec-sub{margin:6px 0 22px;text-align:center;font-size:13.5px;color:var(--txt-fraco);line-height:1.45}
.ent-cartao .aviso{margin-bottom:16px}
.ent-cartao .btn{margin-top:8px;height:var(--alt-botao-g);font-size:14px}
.ent-cartao .campo input{height:var(--alt-botao-g)}
.ent-cartao .ajuda{margin-top:16px}
.ent-rodape{margin:0;text-align:center;font-size:12.5px;color:rgba(255,255,255,.66);
  text-shadow:0 1px 2px rgba(4,12,28,.35)}

/* ================================================== 15 · módulos */

/* --- aplicativos e cartões de módulo --- */
.modulos{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.modulo{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;align-items:center;cursor:pointer;
  border:1px solid var(--borda);border-radius:var(--r);padding:10px 12px;background:var(--cartao);
  transition:border-color .12s,background .12s}
.modulo:hover{border-color:var(--borda-forte)}
.modulo.on{border-color:color-mix(in srgb,var(--mod) 45%,transparent);
  background:color-mix(in srgb,var(--mod) 7%,transparent)}
.modulo input{grid-row:1/3;width:16px;height:16px;accent-color:var(--mod);cursor:pointer}
.modulo .ponto{display:none}
.modulo .m-nome{font-weight:600;font-size:13.5px}
.modulo .m-desc{font-size:12px;color:var(--txt-fraco);line-height:1.35}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--esp-3)}
.mod-card{position:relative;padding-top:20px}
.mod-card .ponto{position:absolute;top:16px;left:18px;width:24px;height:4px;border-radius:3px}
.mod-card h3{font-size:15px;margin:10px 0 4px}
.mod-card p{font-size:13px;color:var(--txt-fraco);margin:0 0 10px;min-height:34px}
.apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(226px,1fr));gap:var(--esp-3)}
.app-cartao{display:flex;flex-direction:column;gap:6px;padding:14px 14px 13px;border-radius:var(--r-g);
  background:var(--cartao);border:1px solid var(--borda);box-shadow:var(--sombra)}
.app-cartao.on{border-color:color-mix(in srgb,var(--mod) 45%,var(--borda))}
.ac-topo{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-2);margin-bottom:3px}
/* O quadradinho virou o ícone do módulo - o mesmo do menu, para o lojista
   aprender um símbolo só por conceito. O ::after continua valendo para o
   módulo que ainda não tem desenho. */
.ac-ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--mod,#7C8AA0) 14%,transparent);color:var(--mod,#7C8AA0);
  position:relative;flex:none}
.ac-ico:empty::after{content:"";position:absolute;inset:13px;border-radius:4px;background:var(--mod,#7C8AA0)}
.ac-ico .ico{width:20px;height:20px}
.ac-selo{font:700 10.5px/1 'Inter',sans-serif;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 8px;border-radius:20px;background:color-mix(in srgb,var(--ok) 13%,transparent);color:var(--ok)}
.ac-selo.breve{background:var(--fundo);color:var(--txt-fraco)}
.app-cartao b{font:650 14px/1.25 'Inter',sans-serif;color:var(--txt)}
.app-cartao p{margin:0;font-size:12.5px;line-height:1.45;color:var(--txt-fraco);flex:1}
.ac-acao{display:inline-flex;align-items:center;justify-content:center;height:var(--alt-botao);
  margin-top:var(--esp-2);border-radius:var(--r);font:600 13.5px/1 'Inter',sans-serif;
  text-decoration:none;background:var(--fundo);border:1px solid var(--borda);color:var(--txt-medio)}
.ac-acao:hover{text-decoration:none;border-color:var(--mod);color:var(--mod)}
.ac-acao.pedir{background:var(--mod);border-color:var(--mod);color:#fff}
.ac-acao.pedir:hover{color:#fff;filter:brightness(1.07)}
.app-cartao.futuro{opacity:.72}
.app-cartao.futuro .ac-ico{background:var(--fundo)}
.app-cartao.futuro .ac-ico{color:var(--borda-forte)}
.app-cartao.futuro .ac-ico:empty::after{background:var(--borda-forte)}

/* --- início do painel --- */
.atalhos{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:10px}
.atalho{display:flex;flex-direction:column;gap:8px;padding:14px 13px;border-radius:var(--r-g);
  background:var(--cartao);border:1px solid var(--borda);box-shadow:var(--sombra);
  text-decoration:none;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.atalho:hover{text-decoration:none;transform:translateY(-2px);border-color:var(--mod);
  box-shadow:0 4px 16px color-mix(in srgb,var(--mod) 20%,transparent)}
.atalho b{font:650 13.5px/1.25 'Inter',sans-serif;color:var(--txt)}
.a-ponto{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:color-mix(in srgb,var(--mod,#2563EB) 13%,transparent);color:var(--mod,#2563EB);flex:none}
.a-ponto:empty{width:10px;height:10px;border-radius:4px;background:var(--mod,#2563EB)}
/* Quadrado só quando não há ícone para aquele atalho. */
.a-ponto:empty::after{content:"";position:absolute;inset:7px;border-radius:3px;background:var(--mod)}
.grade-painel{display:grid;grid-template-columns:1fr 1fr;gap:var(--esp-4);margin-top:var(--esp-4);
  align-items:start}
.g-vendas .spark{width:100%;height:104px;display:block;margin:var(--esp-3) 0 2px}
.g-eixo{display:flex;justify-content:space-between;font-size:11.5px;color:var(--txt-fraco)}
.abertos{display:flex;flex-direction:column;margin-top:6px}
.aberto-item{display:grid;grid-template-columns:1fr auto auto;gap:var(--esp-3);align-items:center;
  padding:9px 4px;border-bottom:1px solid var(--borda);text-decoration:none}
.aberto-item:last-child{border-bottom:0}
.aberto-item:hover{text-decoration:none;background:var(--fundo)}
.ai-quem{display:flex;flex-direction:column;gap:2px;min-width:0}
.ai-quem b{font:600 13.5px/1.2 'Inter',sans-serif;color:var(--txt);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ai-quem small{font-size:11.5px;color:var(--txt-fraco)}
.ai-tempo{font:600 12px/1 'Inter',sans-serif;color:var(--txt-fraco);padding:4px 8px;border-radius:20px;
  background:var(--fundo);font-variant-numeric:tabular-nums}
.aberto-item.atencao .ai-tempo{background:var(--alerta-fundo);color:var(--alerta)}
.aberto-item.tarde .ai-tempo{background:var(--erro-fundo);color:var(--erro)}
.ai-val{font:700 13.5px/1 'Inter',sans-serif;color:var(--txt)}
.avisos-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(234px,1fr));gap:10px;
  margin-top:var(--esp-3)}
.aviso-item{display:flex;flex-direction:column;gap:3px;padding:11px 13px;border-radius:var(--r);
  background:var(--fundo);border:1px solid var(--borda);text-decoration:none}
.aviso-item:hover{text-decoration:none;border-color:var(--azul);background:var(--cartao)}
.aviso-item b{font:650 13.5px/1.25 'Inter',sans-serif;color:var(--txt)}
.aviso-item span{font-size:12.5px;color:var(--txt-fraco);line-height:1.4}
.passos{margin:var(--esp-3) 0 0;padding-left:20px;color:var(--txt-medio);font-size:13.5px}
.passos li{margin-bottom:6px}

/* --- cardápio, categorias e produtos --- */
.cat-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(166px,1fr));gap:var(--esp-3);
  margin-top:var(--esp-4)}
.cat-card{background:var(--cartao);border:1px solid var(--borda);border-radius:var(--r-g);
  overflow:hidden;box-shadow:var(--sombra);transition:border-color .12s,transform .06s;display:block}
.cat-card:hover{border-color:var(--azul);text-decoration:none;transform:translateY(-1px)}
.cat-capa{display:block;height:98px;background:var(--fundo);position:relative}
.cat-capa img{width:100%;height:100%;object-fit:cover;display:block}
.cat-capa .sem-foto{position:absolute;inset:0;display:grid;place-items:center;
  font:800 34px/1 'Inter Tight',sans-serif;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;opacity:.55}
.cat-card b{display:block;padding:10px 12px 2px;font-size:13.5px;font-weight:600;color:var(--txt)}
.cat-card small{display:block;padding:0 12px 11px;font-size:12px;color:var(--txt-fraco)}
.mini-foto{width:36px;height:36px;border-radius:7px;object-fit:cover;background:var(--fundo);flex:none}
.mini-foto.sem{background:var(--grad);opacity:.16;display:inline-block}
.cel-prod{display:flex;align-items:center;gap:10px}
.foto-atual{display:flex;align-items:center;gap:var(--esp-3);margin-bottom:8px}
.foto-atual img{width:64px;height:64px;border-radius:var(--r);object-fit:cover;border:1px solid var(--borda)}
.foto-atual span{font-size:12.5px;color:var(--txt-fraco)}
.acoes-massa{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:var(--esp-3)}
.acoes-massa .dica{margin:0}
.link-loja{display:flex;align-items:center;gap:var(--esp-3);flex-wrap:wrap;margin-top:10px}
.link-loja a{font-weight:600;word-break:break-all}

/* --- complementos --- */
.chips-prod{display:flex;flex-wrap:wrap;gap:var(--esp-2);margin-top:10px}
.chip-prod{display:inline-flex;align-items:center;gap:7px;padding:4px 6px 4px 10px;border-radius:var(--r);
  background:var(--fundo);border:1px solid var(--borda);font-size:13px}
.chip-prod .x{border:0;background:none;cursor:pointer;font-size:16px;line-height:1;color:var(--txt-fraco);
  padding:0 3px;border-radius:5px}
.chip-prod .x:hover{background:var(--borda);color:var(--txt)}
.sugestoes{position:relative;margin-top:4px;border:1px solid var(--borda);border-radius:var(--r);
  background:var(--cartao);box-shadow:var(--sombra);max-height:230px;overflow:auto;z-index:5}
.sugestoes button{display:block;width:100%;text-align:left;border:0;background:none;cursor:pointer;
  padding:9px 12px;font:400 13.5px/1.3 'Inter',sans-serif;color:var(--txt)}
.sugestoes button:hover,.sugestoes button:focus{background:var(--fundo);outline:none}
.item-extra{display:flex;align-items:baseline;gap:8px;margin-top:5px;font-size:13px;color:var(--txt-medio)}
.item-extra small{color:var(--txt-fraco);font-size:11.5px}
.item-extra b{margin-left:auto;font-weight:600;font-size:12.5px;color:var(--txt-fraco)}
.item-extra.obs span{font-style:italic;color:var(--txt-fraco)}
.total-pedido{display:flex;justify-content:space-between;align-items:baseline;margin:var(--esp-4) 0 0;
  padding-top:var(--esp-3);border-top:1px solid var(--borda);font-size:14px}
.total-pedido b{font:700 19px/1 'Inter Tight',sans-serif}

/* --- fiscal: lista, emissor e tabela de itens --- */
.sel-dfe{width:100%;max-width:280px}
.busca-dfe{width:100%;max-width:280px;margin-top:6px;height:var(--alt-campo);padding:0 11px;
  font:400 13.5px/1 'Inter',sans-serif;border:1px solid var(--borda-forte);border-radius:var(--r);
  background:var(--cartao);color:var(--txt)}
.busca-dfe:focus{outline:none;border-color:var(--azul);box-shadow:var(--foco)}
.tabela-itens{min-width:1020px}
.tabela-itens th{white-space:nowrap;font-size:11px}
table.grade.tabela-itens td{padding:7px 6px;vertical-align:middle}
table.grade.tabela-itens tbody tr{height:auto}
table.grade.tabela-itens input,table.grade.tabela-itens select{height:var(--alt-campo);padding:0 9px;font-size:13.5px}
.i-nome{min-width:190px}
.i-nome b{display:inline-block;font:600 13.5px/1.25 'Inter',sans-serif;vertical-align:middle}
.i-num{display:inline-grid;place-items:center;width:20px;height:20px;margin-right:7px;border-radius:5px;
  background:var(--fundo);color:var(--txt-fraco);font:700 11px/1 'Inter',sans-serif;vertical-align:middle}
.ci-cod{width:74px}.ci-qtd{width:66px;text-align:right}.ci-val{width:92px;text-align:right}
.ci-ncm{width:96px}.ci-cfop{width:62px}.ci-un{width:56px}
.ci-grupo{width:150px}.ci-somar{width:78px}
table.grade tbody tr.i-total td{background:var(--fundo);color:var(--txt-medio)}
table.grade tbody tr.i-compl td{padding-top:0;padding-bottom:12px;border-bottom:1px solid var(--borda)}
.i-compl input{width:100%;background:var(--fundo)}
.resumo-dest{display:flex;align-items:center;gap:var(--esp-3);flex-wrap:wrap;margin:var(--esp-3) 0 4px;
  padding:10px 13px;border-radius:var(--r);background:var(--fundo);border:1px solid var(--borda)}
.resumo-dest b{font:650 14px/1.2 'Inter',sans-serif;color:var(--txt)}
.resumo-dest span{font-size:13px;color:var(--txt-fraco);flex:1;min-width:180px}
.resumo-dest .btn{height:var(--alt-mini);width:auto;padding:0 12px;font-size:13px}
#aviso-dest{margin:var(--esp-3) 0 4px}

/* --- financeiro ---
   As linhas de subtotal do DRE precisam saltar aos olhos, senão viram mais
   uma linha de tabela e a conta se perde. */
table.grade.dre td{padding:8px 10px}
table.grade.dre tr.dre-sub td{background:var(--fundo);font-weight:600}
table.grade.dre tr.dre-total td{background:var(--cartao-2);font-weight:800;font-size:15px;
  border-top:2px solid var(--borda-forte)}

/* --- ajustes: manutenção de dados, uma linha por operação --- */
.linha-manutencao{display:flex;align-items:center;gap:var(--esp-3);flex-wrap:wrap;
  padding:12px 0;border-top:1px solid var(--borda)}
.linha-manutencao > div{flex:1 1 280px;min-width:0}
.linha-manutencao b{font-size:13.5px}
.linha-manutencao .dica{margin-top:3px}
.linha-manutencao .confirma{width:150px;height:var(--alt-campo);padding:0 11px;font-size:13px;
  text-transform:uppercase;letter-spacing:.04em}

/* --- comandas e mesas: o mapa do salão --- */
.cmd-grade{display:grid;gap:var(--esp-3);grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.cmd-card{background:var(--cartao);border:1px solid var(--borda);border-left:4px solid var(--borda-forte);
  border-radius:var(--r);padding:12px 14px;box-shadow:var(--sombra)}
.cmd-card.frio{border-left-color:var(--ok)}
.cmd-card.morno{border-left-color:var(--alerta)}
.cmd-card.quente{border-left-color:var(--erro)}
.cmd-card header{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.cmd-card header b{font:800 18px/1 'Inter Tight',sans-serif}
.cmd-tempo{font-size:12px;font-weight:600;color:var(--txt-fraco)}
.cmd-card.morno .cmd-tempo{color:var(--alerta)}
.cmd-card.quente .cmd-tempo{color:var(--erro)}
.cmd-quem{margin:7px 0 2px;font-size:14px;font-weight:600}
.cmd-meta{margin:0;font-size:12px;color:var(--txt-fraco)}
.cmd-total{margin:8px 0 10px;font:800 20px/1 'Inter Tight',sans-serif;font-variant-numeric:tabular-nums}
.cmd-acoes{display:flex;gap:var(--esp-2);flex-wrap:wrap}
.cmd-acoes .btn{flex:1;min-width:104px;text-align:center}
.cmd-mais{margin-top:10px;border-top:1px solid var(--borda);padding-top:9px}
.cmd-mais summary{cursor:pointer;font-size:12px;color:var(--txt-fraco);list-style:none}
.cmd-mais summary::-webkit-details-marker{display:none}
.cmd-mais summary::before{content:"+ "}
.cmd-mais[open] summary::before{content:"- "}
.cmd-form{display:flex;gap:7px;margin-top:8px}
.cmd-form select{flex:1;min-width:0;height:var(--alt-filtro);padding:0 9px;font-size:13px;
  border:1px solid var(--borda-forte);border-radius:7px;background:var(--cartao);color:var(--txt)}
.cmd-form .btn{flex:none;width:auto;height:var(--alt-filtro);padding:0 12px;font-size:13px}
.mesa-grade{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(142px,1fr))}
.mesa-card{display:block;padding:14px;border-radius:var(--r);text-align:center;
  background:var(--ok-fundo);border:1px solid color-mix(in srgb,var(--ok) 28%,var(--borda));
  color:var(--txt);border-left:4px solid var(--ok)}
.mesa-card:hover{text-decoration:none;box-shadow:var(--sombra)}
.mesa-card.ocupada{background:var(--erro-fundo);border-color:color-mix(in srgb,var(--erro) 28%,var(--borda));
  border-left-color:var(--erro)}
.mesa-card b{display:block;font:700 14.5px/1.2 'Inter Tight',sans-serif}
.mesa-card span{display:block;font-size:11.5px;color:var(--txt-fraco);margin-top:3px}

/* --- entregas: a fila do que precisa sair ---
   Prefixo eg- e não ent-: ent- já é da arte de fundo da tela de login, e a
   colisão em .ent-grade jogou a grade de entregas para fora do layout. */
.eg-grade{display:grid;gap:var(--esp-3);grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  margin-top:var(--esp-4)}
.eg-card{background:var(--cartao);border:1px solid var(--borda);border-left:4px solid var(--ok);
  border-radius:var(--r);padding:12px 14px;box-shadow:var(--sombra)}
.eg-card.morno{border-left-color:var(--alerta)}
.eg-card.quente{border-left-color:var(--erro)}
.eg-card.na-rua{background:var(--cartao-2)}
.eg-card header{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.eg-card header b{font:800 18px/1 'Inter Tight',sans-serif}
.eg-estado{font-size:12px;font-weight:600;color:var(--txt-fraco)}
.eg-card.morno .eg-estado{color:var(--alerta)}
.eg-card.quente .eg-estado{color:var(--erro)}
.eg-quem{margin:7px 0 3px;font-size:14px;font-weight:600}
.eg-end{margin:0;font-size:12.5px;line-height:1.45;color:var(--txt-medio)}
.eg-end.falta{color:var(--erro)}
.eg-ref{margin:4px 0 0;font-size:12px;color:var(--txt-fraco);font-style:italic}
.eg-valores{display:flex;gap:var(--esp-4);margin:9px 0 4px;font-size:12px;color:var(--txt-fraco)}
.eg-valores b{color:var(--txt);font-variant-numeric:tabular-nums}
.eg-acoes{display:flex;gap:var(--esp-2);flex-wrap:wrap;margin-top:9px}
.eg-volta{margin-top:8px;text-align:center}
.eg-volta button{border:0;background:none;color:var(--txt-fraco);font-size:12px;cursor:pointer;
  text-decoration:underline}
.eg-volta button:hover{color:var(--erro)}

/* --- agenda: calendário do mês, montado sem biblioteca --- */
.ag-barra{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-3);
  flex-wrap:wrap;margin-bottom:var(--esp-3)}
.ag-nav{display:flex;align-items:center;gap:var(--esp-2)}
/* Sem capitalize: ele maiusculiza o "de" também ("Setembro De 2026").
   A primeira letra vem maiúscula do PHP. */
.ag-mes{margin:0 0 0 8px;font:700 18px/1.2 'Inter Tight',sans-serif}
.ag-dir{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ag-proximos{background:var(--cartao);border:1px solid var(--borda);border-radius:var(--r);
  padding:10px 13px;margin-bottom:var(--esp-3);font-size:12.5px;display:flex;gap:10px;flex-wrap:wrap;
  align-items:baseline}
.ag-proximos b{color:var(--txt-fraco);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em}
.ag-proximos a{color:var(--txt);border-bottom:1px solid var(--borda-forte);text-decoration:none}
.ag-proximos a:hover{color:var(--azul-forte);border-color:var(--azul)}
.ag-semana{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;margin-bottom:1px}
.ag-semana span{padding:6px 8px;font-size:11px;font-weight:700;color:var(--txt-fraco);
  text-transform:uppercase;letter-spacing:.05em;background:var(--cartao);text-align:center}
.ag-grade{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--borda);
  border:1px solid var(--borda);border-radius:var(--r);overflow:hidden}
.ag-dia{position:relative;min-height:104px;background:var(--cartao);padding:6px 6px 8px}
.ag-dia.fora{background:var(--fundo)}
.ag-dia.fora span{color:var(--borda-forte);font-size:12px}
.ag-dia.hoje{background:color-mix(in srgb,var(--azul) 7%,var(--cartao))}
.ag-num{font-size:12px;font-weight:700;color:var(--txt-medio)}
.ag-dia.hoje .ag-num{color:var(--azul-forte)}
.ag-mais-dia{position:absolute;top:4px;right:5px;width:21px;height:21px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;color:var(--txt-fraco);
  font-size:15px;line-height:1;opacity:0;transition:opacity .12s;text-decoration:none}
.ag-dia:hover .ag-mais-dia{opacity:1}
.ag-mais-dia:hover{background:var(--azul);color:#fff;text-decoration:none}
.ag-itens{display:flex;flex-direction:column;gap:3px;margin-top:5px}
.ag-chip{display:block;padding:3px 6px;border-radius:5px;font-size:11.5px;line-height:1.35;
  background:color-mix(in srgb,var(--c) 13%,transparent);color:var(--txt);
  border-left:3px solid var(--c);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-chip:hover{background:color-mix(in srgb,var(--c) 24%,transparent);text-decoration:none}
.ag-chip.riscado{opacity:.5;text-decoration:line-through}
.ag-chip b{font-variant-numeric:tabular-nums}
.ag-resto{font-size:11px;color:var(--txt-fraco);padding-left:4px}
/* A lista da agenda no celular precisa virar bloco, não grade: .so-estreito
   é grid por padrão e isso esmagaria a tabela. */
.ag-lista-mobile{display:none}

/* ================================================ 16 · responsivo
   Três breakpoints e só estes três:
     900  a lateral vira gaveta, a tabela vira cartão, os filtros viram folha
     640  o formulário empilha por completo
     420  ajustes finos de toque
   Nenhum @media de largura mora fora daqui. */

@media (max-width:900px){
  /* Gaveta: fora da tela até o toque no hambúrguer. Faixa rolável no topo não
     serve para menu agrupado - o lojista rolaria de lado toda vez. */
  .app{grid-template-columns:1fr}
  .lado{position:fixed;inset:0 auto 0 0;width:260px;max-width:86vw;z-index:60;
    transform:translateX(-100%);transition:transform .22s ease;border-right:1px solid var(--borda);
    overflow-y:auto;padding-bottom:24px}
  .lado.aberto{transform:none;box-shadow:0 0 44px rgba(16,24,40,.22)}
  .veu-menu{display:block}
  .abre-menu{display:flex}
  .fecha-menu{display:block}
  .conteudo{padding:16px}

  /* Cabeçalho compacto: no celular o que importa é o título e a ação, não a
     barra de conta ocupando três linhas. */
  .cabec{flex-wrap:nowrap;gap:10px;align-items:center;margin-bottom:var(--esp-3)}
  .cabec-tit{min-width:0;flex:1}
  .cabec-tit h1{font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cabec-dir{gap:6px;margin-left:auto;flex-wrap:nowrap}
  .cabec-dir .btn.principal{height:var(--alt-botao);padding:0 13px;font-size:13.5px}
  .cabec .troca-loja{display:none}
  /* O nome da loja some do topo e fica só na tela de ajustes: em 375px ele
     empurra o conteúdo para baixo sem ajudar quem já sabe onde está. */
  .sub-cabec{display:none}
  .usuario .sair{display:none}
  /* A troca de loja volta dentro da gaveta, onde há largura para ela. */
  .lado .troca-loja{display:block;width:calc(100% - 8px);margin:4px;max-width:none}
  .pdv-mobile{display:inline-flex;align-items:center;gap:7px;flex:none;height:var(--alt-botao);
    padding:0 12px;border-radius:var(--r);background:var(--mod,#16A34A);color:#fff;
    text-decoration:none;font:700 13.5px/1 'Inter',sans-serif}
  .pdv-mobile:hover{color:#fff;text-decoration:none}

  /* Tabela vira cartão: no celular tabela de nove colunas vira zoom. */
  table.grade thead{display:none}
  table.grade,table.grade tbody,table.grade tr,table.grade td{display:block;width:100%}
  table.grade tbody tr{height:auto;border:1px solid var(--borda);border-radius:var(--r);
    margin-bottom:var(--esp-2);background:var(--cartao);padding:6px 4px}
  table.grade tbody tr:nth-child(even) td,table.grade tbody tr:hover td{background:none}
  table.grade td{border:0;padding:6px 11px;display:flex;justify-content:space-between;gap:var(--esp-3)}
  table.grade td::before{content:attr(data-rot);color:var(--txt-fraco);font-size:12px;
    font-weight:600;text-transform:uppercase;letter-spacing:.05em}
  table.grade td:first-child{font-weight:600;border-bottom:1px solid var(--borda);padding-bottom:9px}
  /* Célula que só existe para absorver largura não vira linha de cartão. */
  table.grade td.p-sobra{display:none}
  /* A tabela de itens da nota continua tabela: ela rola de lado dentro da
     própria caixa e virar cartão faria perder a conta por coluna. */
  .rolagem-tabela table.grade,.rolagem-tabela table.grade tbody,
  .rolagem-tabela table.grade tr{display:table;width:100%}
  .rolagem-tabela table.grade tbody{display:table-row-group}
  .rolagem-tabela table.grade tr{display:table-row}
  .rolagem-tabela table.grade thead{display:table-header-group}
  .rolagem-tabela table.grade td{display:table-cell;width:auto}
  .rolagem-tabela table.grade td::before{content:none}
  .so-largo{display:none}
  .so-estreito{display:grid}
  .ag-lista-mobile{display:block}

  /* Filtros viram folha: sete campos empilhados acima da lista empurram para
     fora da tela justamente o que a pessoa veio ver. */
  .f-abrir{display:inline-flex;align-items:center;justify-content:center;flex:none;
    height:var(--alt-filtro);padding:0 12px;border:1px solid var(--borda-forte);border-radius:7px;
    background:var(--cartao);color:var(--txt-medio);font:600 13px/1 'Inter',sans-serif;cursor:pointer}
  .f-campos{position:fixed;inset:auto 0 0 0;z-index:70;display:flex;flex-direction:column;
    align-items:stretch;gap:var(--esp-3);max-height:82vh;overflow-y:auto;background:var(--cartao);
    border-top:1px solid var(--borda);border-radius:var(--r-g) var(--r-g) 0 0;padding:16px;
    box-shadow:0 -8px 40px rgba(16,24,40,.25);transform:translateY(100%);
    transition:transform .2s ease;visibility:hidden}
  .filtros.folha-aberta .f-campos{transform:none;visibility:visible}
  .f-fechar{display:flex;align-items:center;justify-content:space-between;order:-1;border:0;
    background:none;padding:0 0 4px;cursor:pointer;color:var(--txt);
    font:700 15px/1 'Inter Tight',sans-serif}
  .f-campo{flex-direction:column;align-items:stretch;gap:4px}
  .f-campo select,.f-campo input{height:var(--alt-campo);width:100%}
  .f-extra{display:flex;flex-direction:column;align-items:stretch;gap:var(--esp-3);flex:none;order:1}
  .f-mais{display:none}
  .filtros .btn{width:100%;height:var(--alt-campo);order:2}
  .f-limpar{order:3;padding:4px 0}

  /* Abaixo de 900 o formulário já começa a empilhar: 6 colunas e 12. */
  .campo.c-xp,.campo.c-p{grid-column:span 4}
  .campo.c-m{grid-column:span 6}
  .campo.c-g{grid-column:1/-1}

  .grade-painel{grid-template-columns:1fr}
  .cartao.secao > h2,.cartao.secao > summary,
  .cartao.secao-nf > h2,.cartao.secao-nf > summary{padding:10px 14px;font-size:14px}
  .cartao.secao > *:not(h2):not(summary),
  .cartao.secao-nf > *:not(h2):not(summary){margin-left:14px;margin-right:14px}
  .cartao.secao > .rolagem-tabela,
  .cartao.secao-nf > .rolagem-tabela{padding:0 14px var(--esp-3)}

  /* Sete colunas em tela de celular viram sete tiras ilegíveis. O mês some e
     fica a lista, que é como se consulta agenda no telefone de qualquer jeito. */
  .ag-dia{min-height:70px;padding:4px}
  .ag-chip{font-size:0;padding:0;height:6px;border-radius:3px;border-left:0;background:var(--c)}
  .ag-chip b{font-size:0}
  .ag-resto{font-size:9.5px}
  .ag-mais-dia{opacity:1}
}

@media (max-width:640px){
  /* O formulário empilha por completo: campo cortado à direita é campo que
     ninguém preenche. */
  .campo,.campo.c-xp,.campo.c-p,.campo.c-m,.campo.c-g{grid-column:1/-1}
  .form-compacto .campo,
  .form-compacto .campo.c-xp,.form-compacto .campo.c-p,
  .form-compacto .campo.c-m,.form-compacto .campo.c-g{width:100%}
  .campo.c-xp .dica,.campo.c-p .dica{white-space:normal}
  .acoes-form .btn{flex:1 1 140px}

  /* Dois por linha: um cartão por linha empurra o gráfico e o "em aberto"
     para fora da primeira tela, e é justamente o que o lojista quer ver. */
  .tiles{grid-template-columns:1fr 1fr;gap:10px}
  .tile{padding:13px 13px 12px}
  .tile .t-rot{margin:10px 0 2px;font-size:11.5px}
  .tile .t-val{font-size:20px}
  .ct-item{flex:1 1 140px;padding:11px 13px}
  .ct-item b{font-size:19px}
  .atalhos{grid-template-columns:repeat(2,1fr);gap:10px}
  .atalho{padding:12px 11px}
  .aberto-item{grid-template-columns:1fr auto;row-gap:4px}
  .ai-val{grid-column:2}
  .ai-tempo{grid-column:1;justify-self:start}
  .linha-manutencao{padding:14px 0}
  .linha-manutencao .confirma{flex:1 1 140px;width:auto}
  .entrada{padding:20px 16px;align-items:start;padding-top:min(9vh,64px)}
  .ent-cartao{padding:26px 20px 22px;border-radius:16px}
  .ec-logo img{max-width:130px}
  .ec-titulo{font-size:20px}
  .ent-brilho{top:30%}
}

@media (max-width:420px){
  .conteudo{padding:14px 12px}
  .cabec-dir .btn.auto:not(:last-of-type){display:none}
  .pdv-mobile span{display:none}
  .pdv-mobile{padding:0 10px}
  .tiles{gap:8px}
  .cartoes-topo{gap:8px}
  .ct-item{flex:1 1 100%}
  .periodos a{padding:5px 8px;font-size:12px}
  .busca-loja{flex-direction:column}
  .busca-loja .btn{width:100%}
  .mesa-grade{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
}

/* Quem pediu menos movimento no sistema recebe o mesmo fundo, parado. */
@media (prefers-reduced-motion:reduce){
  .bolha{animation:none}
  .ent-cartao{animation:none}
}

/* O amarelo/azul do autopreenchimento do Chrome ignora o tema e deixa o
   campo ilegível no escuro. */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--txt);
  -webkit-box-shadow:0 0 0 1000px var(--cartao) inset;
  transition:background-color 9999s ease-in-out 0s}

/* Prévia do QR Pix nas configurações. */
.pix-teste{display:flex;gap:16px;align-items:center;margin:16px 20px 0;padding:14px;
  background:var(--fundo);border:1px solid var(--borda);border-radius:var(--r)}
.pix-qr{width:150px;height:150px;flex:none;background:#fff;padding:8px;border-radius:8px;
  display:grid;place-items:center}
.pix-qr svg{width:100%;height:100%;display:block}
.pix-teste b{display:block;font-size:14.5px;margin-bottom:4px}

/* -------- folha de impressão sobre a tela (imprimir.js) --------
   Os botões moram na barra de cima, ao lado do nome do documento. Faixa de
   botões no rodapé custava sessenta pixels de altura numa janela que existe
   para mostrar papel - e o papel é o conteúdo. */
body.imp-travado{overflow:hidden}
.imp-fundo{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px;
  background:rgba(12,16,22,.62);opacity:0;transition:opacity .16s ease}
.imp-fundo.aberto{opacity:1}
/* A folha de impressão mostra o comprovante em tamanho de leitura, com os
   botões em cima. Era 860px: o cupom de 80mm cabia, mas a nota em A4 saía
   miúda e o operador conferia valor apertando os olhos. */
.imp-folha{width:min(1040px,100%);max-height:96vh;display:flex;flex-direction:column;
  background:var(--cartao);border:1px solid var(--borda);border-radius:14px;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.34);transform:translateY(10px) scale(.985);
  transition:transform .18s cubic-bezier(.2,.9,.3,1)}
.imp-fundo.aberto .imp-folha{transform:none}

.imp-topo{display:flex;align-items:center;gap:12px;padding:11px 12px 11px 16px;
  border-bottom:1px solid var(--borda);background:var(--cartao)}
.imp-topo b{flex:1;min-width:0;font:600 14.5px/1.2 'Inter',sans-serif;color:var(--txt);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imp-papel{display:flex;gap:3px;flex:none;padding:2px;border-radius:8px;background:var(--fundo)}
.imp-papel button{height:26px;padding:0 9px;border-radius:6px;border:0;background:none;
  color:var(--txt-fraco);font:600 12px/1 'Inter',sans-serif;cursor:pointer}
.imp-papel button[aria-pressed="true"]{background:var(--cartao);color:var(--azul-forte);
  box-shadow:0 1px 2px rgba(0,0,0,.12)}
/* Botões grandes: são tocados com o dedo, de pé, com a fila esperando. */
.imp-btns{display:flex;gap:8px;flex:none}
.imp-b{display:inline-flex;align-items:center;gap:9px;height:50px;padding:0 20px;border-radius:11px;
  border:1px solid var(--borda-forte);background:var(--fundo);color:var(--txt-medio);
  font:700 15.5px/1 'Inter',sans-serif;cursor:pointer;white-space:nowrap}
.imp-b:hover{border-color:var(--azul);color:var(--azul-forte)}
.imp-b.primario{border-color:transparent;background:var(--azul);color:#fff}
.imp-b.primario:hover{background:var(--azul-forte);color:#fff}
.imp-b:disabled{opacity:.6;cursor:default}
.imp-b svg{flex:none}
.imp-b kbd{font:600 11px/1 'Inter',sans-serif;background:var(--cartao);
  border:1px solid var(--borda-forte);padding:4px 6px;border-radius:5px;color:var(--txt-fraco)}
.imp-b.imp-voltar:hover kbd{border-color:var(--azul);color:var(--azul-forte)}

.imp-corpo{flex:1;min-height:0;background:#f3f4f6}
.imp-corpo iframe{width:100%;height:min(74vh,820px);border:0;display:block;background:#fff}
.imp-resumo{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding:10px 14px;
  border-bottom:1px solid var(--borda);background:var(--fundo)}
.imp-resumo .ir-n{font:800 20px/1 'Inter Tight',sans-serif;color:var(--txt);
  font-variant-numeric:tabular-nums}
.imp-resumo .ir-troco{font:700 15px/1 'Inter Tight',sans-serif;color:var(--ok);
  font-variant-numeric:tabular-nums}
.imp-resumo .ir-nf{font:600 12.5px/1.3 'Inter',sans-serif;color:var(--txt-fraco)}
.imp-resumo .ir-nf.ok{color:var(--ok)} .imp-resumo .ir-nf.erro{color:var(--erro)}

/* No celular o rótulo sai e fica o ícone: cabem quatro botões em 375px. */
@media (max-width:640px){
  .imp-fundo{padding:0;place-items:end stretch}
  .imp-folha{width:100%;max-height:96vh;border-radius:14px 14px 0 0;border-bottom:0}
  .imp-corpo iframe{height:58vh}
  /* No celular o nome do documento sai: os botões valem mais que o título,
     e com ele na frente eles encolhiam até não caber o dedo. */
  .imp-topo{padding:9px 9px 9px 12px;gap:8px;flex-wrap:wrap}
  .imp-topo b{display:none}
  .imp-btns{flex:1;gap:7px}
  .imp-b{flex:1;justify-content:center;height:48px;padding:0 10px;font-size:14px;gap:7px}
  .imp-b kbd{display:none}
  .imp-b span{font-size:13.5px}
  .imp-resumo{padding:9px 12px;gap:10px}
  .imp-resumo .ir-n{font-size:17px}
}
}

/* -------- impressoras e agente (Ajustes > Impressão) -------- */
.grade-imp .i-nome{width:150px} .grade-imp .i-sis{width:230px}
.grade-imp .i-col{width:150px} .grade-imp .i-op{width:64px;text-align:center}
.grade-imp td{vertical-align:middle}
.i-chips{display:flex;flex-wrap:wrap;gap:5px}
.i-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:7px;
  border:1px solid var(--borda);background:var(--fundo);font-size:12.5px;cursor:pointer;
  color:var(--txt-medio);white-space:nowrap}
.i-chip input{width:14px;height:14px;margin:0}
.i-chip:has(input:checked){border-color:var(--azul);color:var(--azul-forte);
  background:color-mix(in srgb,var(--azul) 9%,transparent)}
.i-chip.perigo:has(input:checked){border-color:var(--erro);color:var(--erro);
  background:color-mix(in srgb,var(--erro) 9%,transparent)}
.grade-imp .i-larg{width:84px;display:inline-block;margin-right:6px}
.grade-imp .i-col-n{width:52px;display:inline-block;text-align:center}

/* Estado do agente: é a primeira coisa que o lojista olha quando o cupom
   não sai, então diz o que está acontecendo em vez de um ponto colorido. */
.ag-estado{display:flex;flex-direction:column;gap:2px;padding:11px 14px;border-radius:10px;
  margin:14px 0;border-left:4px solid var(--borda-forte);background:var(--fundo)}
.ag-estado b{font:700 14.5px/1.2 'Inter',sans-serif;color:var(--txt)}
.ag-estado span{font-size:12.5px;color:var(--txt-fraco)}
.ag-estado.ok{border-left-color:var(--ok)} .ag-estado.ok b{color:var(--ok)}
.ag-estado.frio{border-left-color:var(--alerta)} .ag-estado.frio b{color:var(--alerta)}
.ag-baixar{display:flex;gap:8px;flex-wrap:wrap}
.ag-token{padding:12px 14px;border-radius:10px;background:var(--fundo);
  border:1px solid var(--azul)}
.ag-token code{display:block;font:600 13px/1.5 ui-monospace,monospace;word-break:break-all;
  color:var(--txt);user-select:all}
.ag-ajuda{margin-top:16px;border-top:1px solid var(--borda);padding-top:12px}
.ag-ajuda summary{cursor:pointer;font-size:13.5px;color:var(--txt-medio);font-weight:600}
.ag-passos{margin:12px 0 0;padding-left:20px;font-size:13.5px;line-height:1.75;color:var(--txt-medio)}
.ag-passos code{font:500 12.5px/1.5 ui-monospace,monospace;background:var(--fundo);
  padding:2px 6px;border-radius:5px}
.ag-json{display:block;margin-top:5px;padding:8px 10px;word-break:break-all}
@media (max-width:900px){
  .grade-imp .i-nome,.grade-imp .i-sis,.grade-imp .i-col,.grade-imp .i-op{width:auto}
}

/* Campo com prefixo (@) ou sufixo (km, dias) colado na borda: o símbolo
   fica dentro da caixa, e o que se digita é só o valor. */
.com-prefixo,.com-sufixo{display:flex;align-items:stretch}
.com-prefixo i,.com-sufixo i{display:flex;align-items:center;padding:0 10px;font-style:normal;
  font-size:13.5px;font-weight:600;color:var(--txt-fraco);background:var(--fundo);
  border:1px solid var(--borda-forte)}
.com-prefixo i{border-right:0;border-radius:var(--r) 0 0 var(--r)}
.com-sufixo i{border-left:0;border-radius:0 var(--r) var(--r) 0}
.com-prefixo input{border-radius:0 var(--r) var(--r) 0;min-width:0;flex:1}
.com-sufixo input{border-radius:var(--r) 0 0 var(--r);min-width:0;flex:1}
/* Seta discreta no item que abre em outra janela: o aviso vem antes do
   clique, não depois de a tela sumir. */
.tag-fora{margin-left:auto;color:var(--txt-fraco);font-size:12px;line-height:1;flex:none}
.nav[aria-current] .tag-fora{color:inherit}

/* ------------------------------------------------ dashboard do lojista */
/* Ícone no lugar do ponto: quatro números lado a lado ficam iguais quando só
   a cor os separa. */
.tile .t-ico{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:color-mix(in srgb,var(--mod,#2563EB) 13%,transparent);color:var(--mod,#2563EB);
  margin-bottom:8px}

/* Mais vendidos: barra horizontal, porque comparar comprimento é mais fácil
   que comparar ângulo de pizza - e o que se quer saber é a ordem. */
.mais-vendidos{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.mv-linha{display:grid;grid-template-columns:20px minmax(80px,1.4fr) 2fr auto auto;
  align-items:center;gap:10px;font-size:13.5px}
.mv-pos{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;flex:none;
  background:var(--fundo);color:var(--txt-fraco);font:700 11px/1 'Inter',sans-serif}
.mv-linha:first-child .mv-pos{background:color-mix(in srgb,var(--azul) 16%,transparent);color:var(--azul)}
.mv-nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--txt)}
.mv-barra{height:8px;border-radius:5px;background:var(--fundo);overflow:hidden}
.mv-barra i{display:block;height:100%;border-radius:5px;
  background:linear-gradient(90deg,var(--azul),color-mix(in srgb,var(--azul) 55%,#7C3AED))}
.mv-q{min-width:2ch;text-align:right;font-weight:700}
.mv-t{color:var(--txt-fraco);min-width:9ch;text-align:right}
.link-mais{font-size:12.5px;color:var(--txt-fraco);text-decoration:none}
.link-mais:hover{color:var(--azul)}
@media (max-width:620px){
  .mv-linha{grid-template-columns:20px 1fr auto;row-gap:4px}
  .mv-barra{grid-column:2 / -1;order:3}
  .mv-t{display:none}
}

/* Marca d'água com a logo da loja: é o painel dela. Fica atrás de tudo e
   quase invisível - a 3% ela é reconhecida sem competir com um número. */
.conteudo{position:relative}
.painel-dagua{position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:var(--logo);background-repeat:no-repeat;
  background-position:center 46%;background-size:min(52%,480px) auto;
  opacity:.035;filter:grayscale(1)}
.conteudo > *:not(.painel-dagua){position:relative;z-index:1}
:root[data-tema="escuro"] .painel-dagua{opacity:.05}
@media (max-width:760px){.painel-dagua{background-size:70% auto}}

/* A palavra sob a marca. Caixa alta e espaçada para ler como rótulo do painel,
   não como mais um item de menu - e clicável, porque é o caminho de volta. */
.marca-dash{display:block;width:100%;margin-top:7px;text-align:center;
  font:700 11px/1 'Inter',sans-serif;letter-spacing:.22em;text-transform:uppercase;
  color:var(--txt-fraco);text-decoration:none;padding:4px 0;border-radius:6px;
  transition:color .12s,background .12s}
.marca-dash:hover{color:var(--txt);background:var(--cartao-2);text-decoration:none}
.marca-dash[aria-current]{color:var(--azul)}
.lado .topo-marca{flex-wrap:wrap}

/* Separa o atalho do PDV da lista de módulos. */
.sep-pdv{height:1px;background:var(--borda);margin:4px 6px 10px}

/* ------------------------------------------------- rodapé da barra lateral
   Fica colado embaixo: o menu cresce e encolhe conforme os módulos da loja,
   e um rodapé que sobe junto com a última área acaba no meio da tela. */
.lado{display:flex;flex-direction:column}
.nav-lista{flex:1 1 auto}
.lado-pe{margin-top:auto;padding-top:12px;border-top:1px solid var(--borda);
  display:flex;flex-direction:column;gap:9px}
.pe-suporte{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;
  font:600 13px/1 'Inter',sans-serif;color:var(--txt-medio);text-decoration:none;
  background:var(--cartao-2)}
.pe-suporte:hover{text-decoration:none;color:var(--ok,#16A34A);
  background:color-mix(in srgb,var(--ok,#16A34A) 10%,transparent)}
.pe-suporte .ico{flex:none;color:var(--ok,#16A34A)}
.pe-marca{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 4px 2px}
.pe-marca a{display:inline-flex;line-height:0;opacity:.6;transition:opacity .12s}
.pe-marca a:hover{opacity:1}
/* Uma arte por tema, e o tema aqui é SÓ o data-tema da raiz.
   O painel não segue prefers-color-scheme - é decisão antiga e deliberada
   (sistema aberto o dia inteiro não muda de cor sozinho ao anoitecer). Minha
   primeira versão olhava a preferência do sistema operacional: com o Mac no
   escuro e o painel claro, a arte branca ficava sobre fundo branco. */
.pe-marca img{height:22px;width:auto;display:none}
.pe-marca .so-claro{display:block}
:root[data-tema="escuro"] .pe-marca .so-claro{display:none}
:root[data-tema="escuro"] .pe-marca .so-escuro{display:block}
.pe-versao{font:600 11px/1 'Inter',sans-serif;color:var(--txt-fraco);letter-spacing:.04em;flex:none}

/* ------------------------------------------------------------ paginador */
.paginador{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;padding:14px 2px 2px;margin-top:10px;border-top:1px solid var(--borda)}
.pg-conta{font-size:12.5px;color:var(--txt-fraco)}
.pg-botoes{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.pg-n{min-width:34px;height:34px;padding:0 9px;display:inline-flex;align-items:center;
  justify-content:center;border-radius:9px;border:1px solid var(--borda);
  background:var(--cartao);color:var(--txt-medio);text-decoration:none;
  font:600 13px/1 'Inter',sans-serif}
.pg-n:hover{text-decoration:none;border-color:var(--azul);color:var(--azul)}
.pg-n.aqui{background:var(--azul);border-color:var(--azul);color:#fff}
.pg-gap{color:var(--txt-fraco);padding:0 2px}

/* Atalhos de período nas listas. A classe .chip já existe para selos dentro
   de tabela; aqui ela é botão de filtro, e por isso o tamanho é de alvo de
   toque, não de rótulo. */
.chips-periodo{display:flex;gap:7px;flex-wrap:wrap;margin:14px 0 4px}
.chips-periodo .chip{display:inline-flex;align-items:center;padding:8px 14px;border-radius:20px;
  border:1px solid var(--borda);background:var(--cartao);color:var(--txt-medio);
  text-decoration:none;font:600 12.5px/1 'Inter',sans-serif}
.chips-periodo .chip:hover{text-decoration:none;border-color:var(--azul);color:var(--azul)}
.chips-periodo .chip.aqui{background:var(--azul);border-color:var(--azul);color:#fff}

/* ------------------------------------ cardápio: canais por item e categoria */
.cat-bloco{border:1px solid var(--borda);border-radius:var(--r-g);overflow:hidden;
  margin-bottom:14px;background:var(--cartao)}
.cat-cab{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:12px 14px;background:var(--cartao-2);border-bottom:1px solid var(--borda)}
.cat-cab h3{margin:0;font:700 15px/1.2 'Inter',sans-serif;display:flex;align-items:baseline;gap:8px}
.cat-cab h3 small{font-weight:600;font-size:11.5px;color:var(--txt-fraco);
  background:var(--cartao);padding:2px 7px;border-radius:20px}
.cat-chaves{display:flex;align-items:center;gap:16px}
.ch-par{display:inline-flex;align-items:center;gap:7px}
.ch-par i{font-style:normal;font:600 11.5px/1 'Inter',sans-serif;color:var(--txt-fraco);
  text-transform:uppercase;letter-spacing:.06em}
.cardapio-grade{margin:0}
.cardapio-grade .col-ch{width:92px;text-align:center}
.cardapio-grade .cel-prod{display:flex;align-items:center;gap:9px;flex-wrap:wrap}

/* Interruptor. Caixa de seleção não diz "ligado/desligado" à distância, e esta
   tela é lida de relance: o lojista quer ver a coluna inteira de uma vez. */
.chave{display:inline-flex;align-items:center;cursor:pointer;position:relative}
.chave input{position:absolute;opacity:0;width:0;height:0}
.chave-tr{width:40px;height:23px;border-radius:14px;background:var(--borda-forte);
  position:relative;transition:background .15s;flex:none}
.chave-tr::after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;
  border-radius:50%;background:#fff;transition:transform .15s;
  box-shadow:0 1px 3px rgba(16,24,40,.28)}
.chave input:checked + .chave-tr{background:var(--ok,#16A34A)}
.chave input:checked + .chave-tr::after{transform:translateX(17px)}
.chave input:focus-visible + .chave-tr{outline:2px solid var(--azul);outline-offset:2px}
.chave.travada{opacity:.4;cursor:not-allowed}
@media (prefers-reduced-motion:reduce){.chave-tr,.chave-tr::after{transition:none}}

/* Categoria que recolhe, e alças de arrastar. */
.cat-bloco > summary.cat-cab{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px}
.cat-bloco > summary::-webkit-details-marker{display:none}
.cat-bloco > summary.cat-cab h3{flex:1;min-width:0}
.cat-seta{width:8px;height:8px;border-right:2px solid var(--txt-fraco);
  border-bottom:2px solid var(--txt-fraco);transform:rotate(-45deg);transition:transform .16s;flex:none;
  margin:0 2px}
.cat-cab .cat-chave{margin-left:auto;flex:none;cursor:default}
.cat-bloco[open] .cat-seta{transform:rotate(45deg)}
.cat-chaves{padding:10px 14px;border-bottom:1px solid var(--borda)}
.arrasta,.cat-arrasta{cursor:grab;color:var(--borda-forte);font-size:16px;line-height:1;
  user-select:none;flex:none;padding:2px 4px;border-radius:5px;background:none;border:0}
.arrasta:hover,.cat-arrasta:hover{color:var(--txt-medio);background:var(--cartao-2)}
.arrasta:active,.cat-arrasta:active{cursor:grabbing}
.cardapio-grade .col-ar{width:28px;text-align:center;padding-left:10px}
tr.arrastando,details.arrastando{opacity:.45}
tr[data-prod]{transition:background .12s}
tr[data-prod]:hover{background:var(--cartao-2)}
.acoes-massa{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}

/* --------------------------------------------- avisos de pedido novo */
/* O cabeçalho fica acima do resto do conteúdo. A marca d'água do painel
   põe cada bloco do .conteudo em z-index 1, e os cartões que vêm DEPOIS do
   cabeçalho pintavam por cima do popup do sino - o aviso ficava "por baixo". */
.conteudo > .cabec{z-index:40}
.sino{position:relative;height:40px;padding:0 13px 0 11px;border-radius:11px;border:1px solid color-mix(in srgb,var(--azul) 35%,var(--borda));
  background:color-mix(in srgb,var(--azul) 9%,var(--cartao));color:var(--azul);display:inline-flex;align-items:center;gap:7px;
  cursor:pointer;font:700 13px/1 'Inter',sans-serif}
.sino .ico{width:20px;height:20px}
.sino:hover{background:color-mix(in srgb,var(--azul) 16%,var(--cartao));border-color:var(--azul)}
.sino.tem{background:var(--azul);border-color:var(--azul);color:#fff;animation:sino-pulsa 1.8s ease-in-out infinite}
.sino.tem .ico{animation:sino-balanca 1.8s ease-in-out infinite;transform-origin:50% 10%}
@keyframes sino-pulsa{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--azul) 45%,transparent)}50%{box-shadow:0 0 0 8px transparent}}
@keyframes sino-balanca{0%,60%,100%{transform:rotate(0)}10%{transform:rotate(14deg)}20%{transform:rotate(-12deg)}30%{transform:rotate(8deg)}40%{transform:rotate(-5deg)}}
@media (prefers-reduced-motion:reduce){.sino.tem,.sino.tem .ico{animation:none}}
@media (max-width:640px){.sino{padding:0;width:40px;justify-content:center}.sino-rot{display:none}}
.sino.mudo{color:var(--txt-fraco)}
.sino.mudo::after{content:"";position:absolute;width:2px;height:22px;background:currentColor;
  transform:rotate(45deg);border-radius:2px}
.sino-n{position:absolute;top:-7px;right:-7px;min-width:21px;height:21px;padding:0 6px;border-radius:11px;
  background:var(--erro,#C8372D);color:#fff;font:800 11.5px/21px 'Inter',sans-serif;text-align:center;box-shadow:0 0 0 2px var(--cartao)}
.cabec-dir{position:relative}
.sino-pop{position:absolute;right:0;top:48px;z-index:95;width:min(340px,92vw);padding:14px;
  background:var(--cartao);border:1px solid var(--borda);border-radius:14px;box-shadow:var(--sombra-alta);
  display:flex;flex-direction:column;gap:10px}
.sino-pop h3{margin:0 0 2px;font:700 14px/1.2 'Inter',sans-serif}
.sp-l{display:flex;align-items:center;gap:9px;font-size:13.5px;cursor:pointer}
.sp-l input{width:18px;height:18px;accent-color:var(--azul)}
.sp-push{border-top:1px solid var(--borda);padding-top:10px;display:flex;flex-direction:column;gap:6px}
.sp-push .dica{margin:0}

/* Abaixo do cabeçalho: em cima dele o toast cobria o sino, o tema e o Sair -
   justamente os botões que a pessoa procura quando um aviso aparece. */
.toasts{position:fixed;top:72px;right:14px;z-index:200;display:flex;flex-direction:column;gap:8px;
  width:min(380px,calc(100vw - 28px))}
@media (max-width:899px){.toasts{top:64px}}
.toast{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;
  padding:12px 12px 12px 14px;border-radius:14px;background:var(--cartao);
  border:1px solid color-mix(in srgb,var(--ok,#16A34A) 45%,var(--borda));
  border-left:5px solid var(--ok,#16A34A);box-shadow:var(--sombra-alta);
  animation:tc-toast .22s cubic-bezier(.22,.8,.3,1)}
@keyframes tc-toast{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.to-ico{font-size:22px;line-height:1}
.to-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.to-txt b{font:700 14px/1.2 'Inter',sans-serif}
.to-txt span{font-size:12.5px;color:var(--txt-medio);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.to-ver{padding:8px 12px;border-radius:9px;background:var(--ok,#16A34A);color:#fff;text-decoration:none;
  font:700 13px/1 'Inter',sans-serif}
.to-ver:hover{color:#fff;filter:brightness(1.07);text-decoration:none}
.to-x{border:0;background:none;font-size:20px;line-height:1;color:var(--txt-fraco);cursor:pointer;padding:4px}
@media (prefers-reduced-motion:reduce){.toast{animation:none}}

/* Melhor Entrega dentro do cartão de entrega */
.me-bloco{margin:9px 0 4px;border:1px dashed var(--borda);border-radius:var(--r);padding:9px 11px;background:var(--cartao-2)}
.me-bloco form{margin:0}
.me-chamar{width:100%;background:#1B8DD9;border-color:#1B8DD9}
.me-chamar:hover{background:#1677B8;border-color:#1677B8;color:#fff}
.me-aviso{display:block;margin-bottom:6px;font-size:11.5px;color:var(--txt-fraco)}
.me-topo{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.me-marca{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#1B8DD9}
.me-topo b{font-size:13px}
.me-linha{margin:5px 0 0;font-size:12.5px;color:var(--txt-medio)}
.me-linha b{color:var(--txt)}
.me-acoes{display:flex;gap:8px;margin-top:8px}
.me-acoes form{flex:1}.me-acoes .btn{width:100%}
.me-procurando{border-color:#1B8DD9;animation:me-pulsa 1.6s ease-in-out infinite}
.me-acima_do_limite{border-color:var(--alerta);border-style:solid}
.me-coletada{border-color:var(--ok);border-style:solid}
.me-problema{border-color:var(--erro);border-style:solid}
@keyframes me-pulsa{0%,100%{box-shadow:0 0 0 0 rgba(27,141,217,.25)}50%{box-shadow:0 0 0 6px rgba(27,141,217,0)}}

/* -------- funcionamento da loja (23/09) -------- */
.hf-agora{display:grid;gap:14px;border-left:4px solid var(--erro)}
.hf-agora.aberta{border-left-color:var(--ok)}
.hf-status{display:flex;align-items:center;gap:12px}
.hf-status b{display:block;font:800 18px/1.2 'Inter Tight',sans-serif}
.hf-status small{display:block;color:var(--txt-fraco);font-size:12.5px;margin-top:3px}
.hf-bola{width:12px;height:12px;border-radius:50%;background:var(--erro);flex:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--erro) 18%,transparent)}
.hf-agora.aberta .hf-bola{background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 18%,transparent)}
.hf-ops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hf-op{display:flex;flex-direction:column;gap:3px;text-align:left;padding:12px 14px;border-radius:12px;
  border:1px solid var(--borda);background:var(--cartao);cursor:pointer;font:inherit;color:var(--txt)}
.hf-op b{font-size:14px}.hf-op span{font-size:12px;color:var(--txt-fraco)}
.hf-op:hover{border-color:var(--primaria,#1B8DD9)}
.hf-op.marcada{border-color:var(--primaria,#1B8DD9);box-shadow:inset 0 0 0 1px var(--primaria,#1B8DD9);background:color-mix(in srgb,var(--primaria,#1B8DD9) 7%,var(--cartao))}
.hf-prazo{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--txt-medio)}
.hf-prazo select{width:auto;height:36px}
.hf-grade{display:grid;gap:8px;margin-top:14px}
.hf-dia{display:grid;grid-template-columns:130px 1fr auto;gap:10px;align-items:start;padding:10px 12px;
  border:1px solid var(--borda);border-radius:12px}
.hf-nome{display:flex;align-items:center;gap:8px;padding-top:8px;cursor:pointer}
.hf-nome b{font-size:14px}
.hf-faixas{display:grid;gap:6px}
.hf-faixa{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hf-hora{width:78px !important;height:38px;text-align:center;font-variant-numeric:tabular-nums;font-weight:600}
.hf-hora.hf-erro{border-color:var(--erro);background:var(--erro-fundo)}
.hf-ate{font-size:12.5px;color:var(--txt-fraco)}
.hf-vira{font-size:11.5px;font-weight:600;color:var(--alerta);background:var(--alerta-fundo);border-radius:6px;padding:3px 7px}
.hf-tira{border:0;background:none;color:var(--txt-fraco);font-size:18px;cursor:pointer;padding:0 4px}
.hf-tira:hover{color:var(--erro)}
.hf-acoes{display:flex;flex-direction:column;gap:4px;align-items:flex-end;padding-top:6px}
.hf-acoes button{border:0;background:none;color:var(--primaria,#1B8DD9);font-size:12.5px;font-weight:600;cursor:pointer;padding:2px 0}
.hf-acoes .hf-copia{color:var(--txt-fraco);font-weight:500}
.hf-fechado-txt{display:none;padding-top:9px;color:var(--txt-fraco);font-size:13px}
.hf-dia.fechado{background:var(--cartao-2)}
.hf-dia.fechado .hf-faixas,.hf-dia.fechado .hf-acoes{display:none}
.hf-dia.fechado .hf-fechado-txt{display:block}
@media (max-width:640px){
  .hf-ops{grid-template-columns:1fr}
  .hf-dia{grid-template-columns:1fr}
  .hf-acoes{flex-direction:row;justify-content:flex-start;gap:14px;padding-top:0}
}
.hf-prazo span{color:var(--txt-fraco);font-size:12px}.hf-modos{display:grid;gap:10px}

/* -------- login em dois passos (23/09) -------- */
.ec-quem{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:0 0 16px;padding:10px 12px;border-radius:10px;
  background:var(--cartao-2);font-size:13px;color:var(--txt-fraco)}
.ec-quem b{color:var(--txt);font-size:14px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ec-quem a{font-size:12.5px;color:var(--primaria,#1B8DD9);font-weight:600;text-decoration:none}
.ec-pessoas{display:grid;gap:8px;max-height:260px;overflow-y:auto;padding:2px}
.ec-pessoa{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--borda);border-radius:12px;cursor:pointer;background:var(--cartao)}
.ec-pessoa input{position:absolute;opacity:0;pointer-events:none}
.ec-pessoa:has(input:checked){border-color:var(--primaria,#1B8DD9);box-shadow:inset 0 0 0 1px var(--primaria,#1B8DD9);background:color-mix(in srgb,var(--primaria,#1B8DD9) 7%,var(--cartao))}
.ec-ini{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--primaria,#1B8DD9);color:#fff;font:800 15px/1 'Inter',sans-serif;flex:none}
.ec-nome{display:flex;flex-direction:column;line-height:1.2;font-weight:600;font-size:14.5px}
.ec-nome small{font-weight:500;font-size:12px;color:var(--txt-fraco);margin-top:2px}
.sp-vol{justify-content:space-between}.sp-vol select{width:auto;height:32px;font-size:13px}

/* -------- Ajustes › Avisos de pedido (24/09) -------- */
.av-ops{display:grid;gap:8px;margin-top:12px}
.av-op{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--borda);border-radius:12px;cursor:pointer;background:var(--cartao)}
.av-op input{width:18px;height:18px;accent-color:var(--azul);flex:none}
.av-op.marcada{border-color:var(--azul);box-shadow:inset 0 0 0 1px var(--azul);background:color-mix(in srgb,var(--azul) 6%,var(--cartao))}
.av-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.av-txt b{font-size:14px}.av-txt small{font-size:12.5px;color:var(--txt-fraco)}
.av-grava{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.av-grava .btn{width:auto;padding:0 18px}
.av-envia{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
.av-envia input[type=file]{max-width:100%}
.sp-link{font-size:12.5px;font-weight:600;color:var(--azul);text-decoration:none}

/* -------- central de notificações (24/09) -------- */
.sino-pop.np{width:min(400px,94vw);padding:0;gap:0;overflow:hidden}
.np-topo{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px 10px;border-bottom:1px solid var(--borda)}
.np-topo h3{margin:0;font:800 15px/1.2 'Inter',sans-serif}
.np-todas{border:0;background:none;color:var(--azul);font:600 12.5px/1 'Inter',sans-serif;cursor:pointer;padding:4px 0}
.np-pend{display:block;padding:9px 16px;background:color-mix(in srgb,var(--alerta) 12%,var(--cartao));color:var(--txt);font-size:13px;font-weight:600;text-decoration:none;border-bottom:1px solid var(--borda)}
.np-lista{list-style:none;margin:0;padding:0;max-height:min(420px,60vh);overflow-y:auto}
.np-item{display:flex;align-items:flex-start;gap:10px;padding:11px 16px;border-bottom:1px solid var(--borda);cursor:pointer}
.np-item:hover{background:var(--cartao-2)}
.np-item.nova{background:color-mix(in srgb,var(--azul) 7%,var(--cartao))}
.np-item.nova .np-txt b{color:var(--txt)}
.np-ico{font-size:19px;line-height:1.2;flex:none}
.np-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.np-txt b{font:600 13.5px/1.3 'Inter',sans-serif;color:var(--txt-medio)}
.np-item.nova .np-txt b{font-weight:800}
.np-txt small{font-size:12.5px;color:var(--txt-fraco);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.np-txt i{font-style:normal;font-size:11.5px;color:var(--txt-fraco)}
.np-ler{flex:none;width:12px;height:12px;margin-top:5px;border-radius:50%;border:0;background:var(--azul);cursor:pointer;padding:0}
.np-ler:hover{box-shadow:0 0 0 4px color-mix(in srgb,var(--azul) 20%,transparent)}
.np-vazio{padding:22px 16px;text-align:center;color:var(--txt-fraco);font-size:13px}
.np-cfg{display:block;padding:12px 16px;text-align:center;font:600 13px/1 'Inter',sans-serif;color:var(--azul);text-decoration:none;background:var(--cartao-2)}
.np-cfg:hover{background:color-mix(in srgb,var(--azul) 8%,var(--cartao))}
.np-aparelho{display:flex;flex-direction:column;gap:10px;margin-top:12px;max-width:520px}

/* -------- Cardápio digital › Destaques (24/09) -------- */
.dq-lista{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.dq-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--borda);border-radius:10px;background:var(--cartao)}
.dq-item.fora{opacity:.6}
.dq-pos{width:22px;text-align:center;font:800 13px/1 'Inter',sans-serif;color:var(--txt-fraco);flex:none}
.dq-nome{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dq-nome b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dq-nome small{font-size:12px;color:var(--txt-fraco)}
.dq-acoes{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.dq-seta{min-width:36px;padding:0 8px}
.dq-seta-vazia{display:inline-block;width:36px}
.dq-busca{display:flex;gap:8px;margin-top:12px}
.dq-busca input{flex:1}
.dq-vazio{padding:12px;color:var(--txt-fraco);font-size:13px}
.av-frase{display:flex;gap:8px}.av-frase input{flex:1}