/* ===================================================================
   VeyronERP — base: reset, tipografia, componentes compartilhados
   (botões, campos, chips, cartões, tabela, modal, ficha lateral, toast,
   estado vazio, marca). Layouts ficam em operacao.css e gestao.css.
   =================================================================== */
/* K.22: o atributo hidden SEMPRE esconde — um display proprio (flex, grid, inline-flex do .btn) passava por cima dele e a coisa
   "escondida" aparecia (a aba desligada na barra do app, o IP manual, os botoes da central). A mesma regra do esqueleto de artefato. */
[hidden]{display:none!important}
*{box-sizing:border-box}
html{scrollbar-color:var(--gold-dark) var(--bg-alt);scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--bg-alt)}
::-webkit-scrollbar-thumb{background:var(--gold-dark);border-radius:99px;border:2px solid var(--bg-alt)}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--texto);font-family:var(--sans);font-size:var(--fs-3);line-height:1.45;-webkit-font-smoothing:antialiased}
/* fundo da marca: grade de 48px com halo dourado, fixo atrás de tudo */
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(at 50% 0,var(--brilho),transparent 70%),
    linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:auto,48px 48px,48px 48px}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.2}
h1{font-family:var(--serif);font-weight:500;font-size:var(--fs-5)}
h2{font-size:var(--fs-4)}
h3{font-size:var(--fs-3);color:var(--mudo);text-transform:uppercase;letter-spacing:.06em;font-size:var(--fs-1)}
p{margin:0 0 var(--e-3)}
a{color:var(--gold-2)}
small,.mudo{color:var(--mudo);font-size:var(--fs-2)}
.apagado{color:var(--apagado)}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono)}
.oculto{display:none!important}
.direita{text-align:right}
.centro{text-align:center}
.linha{display:flex;align-items:center;gap:var(--e-2)}
.linha.entre{justify-content:space-between}
.coluna{display:flex;flex-direction:column;gap:var(--e-2)}
.cresce{flex:1;min-width:0}
.quebra{flex-wrap:wrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ===== ícones ===== */
.ico{width:1.1em;height:1.1em;vertical-align:-.2em;flex:none;display:inline-block;fill:currentColor}
.ico.g{width:1.5em;height:1.5em}
.ico.gg{width:2.2em;height:2.2em}

/* ===== marca (assinatura VEYRON + nome do produto, tudo vetor) ===== */
.mv{display:block;width:120px;margin:0 auto;line-height:0;text-decoration:none;color:var(--texto)}
.mv .vy{display:block;width:100%;height:auto}
.mv .fio{display:block;height:1px;width:100%;margin:.40em 0 .30em;
  background:linear-gradient(90deg,rgba(168,137,79,0),var(--gold) 16%,var(--gold-2) 50%,var(--gold) 84%,rgba(168,137,79,0))}
.mv .prod{display:block;width:100%;height:auto;overflow:visible}
.mv .prod text{font-family:var(--sans);font-size:100px;font-weight:300;fill:currentColor}
.mv .prod .mais{font-weight:700;fill:var(--gold)}

/* ===== botões ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--e-2);min-height:40px;padding:0 var(--e-4);
  border:1px solid var(--borda-forte);border-radius:var(--r-2);background:var(--cartao);color:var(--texto);
  font:inherit;font-size:var(--fs-3);font-weight:500;cursor:pointer;white-space:nowrap;user-select:none;
  transition:background .15s,border-color .15s,color .15s,transform .05s}
.btn:hover{background:var(--cartao-hover);border-color:var(--gold-dark)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none;box-shadow:var(--foco)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.btn.primario{background:var(--gold);border-color:var(--gold);color:#1a1408}
.btn.primario:hover{background:var(--gold-2);border-color:var(--gold-2)}
.btn.perigo{border-color:var(--erro);color:var(--erro)}
.btn.perigo:hover{background:var(--erro);color:#fff}
.btn.ok{border-color:var(--ok);color:var(--ok-texto)}   /* 1.49: texto verde legivel no claro */
.btn.ok:hover{background:var(--ok);color:#06210f}
.btn.fantasma{background:transparent;border-color:transparent;color:var(--mudo)}
.btn.fantasma:hover{color:var(--texto);background:var(--cartao-hover);border-color:transparent}
.btn.pequeno{min-height:32px;padding:0 var(--e-3);font-size:var(--fs-2)}
.btn.grande{min-height:var(--toque-grande);padding:0 var(--e-5);font-size:var(--fs-4)}
.btn.toque{min-height:var(--toque)}
.btn.icone{padding:0;width:40px}
.btn.icone.pequeno{width:32px}
.btn kbd{margin-left:var(--e-1)}
kbd{display:inline-block;min-width:1.6em;padding:1px 6px;border:1px solid var(--borda-forte);border-bottom-width:2px;border-radius:5px;
  background:var(--bg-alt);color:var(--mudo);font-family:var(--mono);font-size:.7em;line-height:1.5;text-align:center}

/* ===== campos ===== */
label.rotulo,.rotulo{display:block;font-size:var(--fs-1);color:var(--mudo);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--e-1)}
.campo{width:100%;min-height:40px;padding:8px 11px;border:1px solid var(--borda);border-radius:var(--r-1);background:var(--bg-alt);color:var(--texto);
  font:inherit;font-size:var(--fs-3);outline:none;transition:border-color .15s,box-shadow .15s}
.campo:focus{border-color:var(--gold);box-shadow:var(--foco)}
.campo::placeholder{color:var(--apagado)}
.campo[disabled],.campo[readonly]{color:var(--mudo);background:var(--cartao-2)}
.campo.grande{min-height:var(--toque);font-size:var(--fs-4)}
.campo.num{text-align:right;font-family:var(--mono)}
textarea.campo{min-height:80px;resize:vertical;line-height:1.4}
select.campo{appearance:none;padding-right:30px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239a9aab'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat:no-repeat;background-position:right 8px center;background-size:16px}
.grupo-campo{display:flex;flex-direction:column;gap:2px;min-width:0}
.grupo-campo[hidden]{display:none}
/* K.2b: o campo de marcar com a bolinha ? ao lado (sem :has — o WebView velho da maquininha) */
.grupo-campo.marca-q{flex-direction:row;align-items:center;flex-wrap:wrap}
.grupo-campo.marca-q>.ajuda{flex-basis:100%}
.grupo-campo.marca-q>.marcar{max-width:calc(100% - 34px)}   /* rotulo longo quebra DENTRO; o ? fica ao lado */
.grade{display:grid;gap:var(--e-3)}
.grade.c2{grid-template-columns:repeat(2,1fr)}
.grade.c3{grid-template-columns:repeat(3,1fr)}
.grade.c4{grid-template-columns:repeat(4,1fr)}
.marcar{display:inline-flex;align-items:center;gap:var(--e-2);cursor:pointer;min-height:32px;user-select:none}
.marcar input{width:18px;height:18px;accent-color:var(--gold);margin:0}
.ajuda{font-size:var(--fs-1);color:var(--mudo);margin-top:2px;line-height:1.35}

/* ===== chips e selos ===== */
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-pill);border:1px solid var(--borda);background:var(--cartao);
  font-size:var(--fs-1);color:var(--mudo);white-space:nowrap;line-height:1.4}
.chip.ok{color:var(--ok-texto);border-color:var(--ok);background:var(--ok-fundo)}
.chip.aviso{color:var(--aviso-texto);border-color:var(--aviso);background:var(--aviso-fundo)}
.chip.erro{color:var(--erro-texto);border-color:var(--erro);background:var(--erro-fundo)}
.chip.info{color:var(--info);border-color:var(--info);background:var(--info-fundo)}
.chip.gold{color:var(--gold-2);border-color:var(--gold-dark)}
.chip.ativo{background:var(--gold);color:#1a1408;border-color:var(--gold)}
.chip.clic{cursor:pointer}
.chip.clic:hover{border-color:var(--gold-dark);color:var(--texto)}
.chip .fechar{opacity:.7;cursor:pointer;line-height:0}
.chip .fechar:hover{opacity:1}
.selo{font-size:.62rem;padding:1px 6px;border-radius:4px;background:var(--gold-dark);color:#1a1408;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.selo.breve{background:var(--borda-forte);color:var(--mudo)}

/* ===== cartões ===== */
.cartao{background:var(--cartao);border:1px solid var(--borda);border-radius:var(--r-3);padding:var(--e-4)}
.cartao .cabeca{display:flex;align-items:center;justify-content:space-between;gap:var(--e-3);margin-bottom:var(--e-3)}
.kpi{display:flex;flex-direction:column;gap:2px}
.kpi .valor{font-size:calc(var(--fs-6) * 1.05);font-weight:600;font-family:var(--serif);font-variant-numeric:tabular-nums}   /* 3.1: o numero decide */
.kpi-cartao{align-items:flex-start}
/* 5.4: a situacao do cliente (cores dos tokens: novo = info, ativo = ok, em risco = aviso, inativo = erro, sem compra = apagado) */
.sit-novo{color:var(--info-texto,var(--info));border-color:var(--info)}.sit-ativo{color:var(--ok);border-color:var(--ok)}.sit-em_risco{color:var(--aviso);border-color:var(--aviso)}.sit-inativo{color:var(--erro);border-color:var(--erro)}.sit-sem_compra{color:var(--mudo)}
.sit-ficha{gap:8px;margin:0 0 var(--e-2)}   /* 3.1: a moldura no alto, na linha do titulo */
.kpi .titulo{font-size:var(--fs-1);color:var(--mudo);text-transform:uppercase;letter-spacing:.05em}

/* ===== tabela ===== */
.tabela-caixa{overflow:auto;border:1px solid var(--borda);border-radius:var(--r-2);background:var(--cartao)}
table.tabela{width:100%;border-collapse:collapse;font-size:var(--fs-2)}
.tabela th{position:sticky;top:0;background:var(--cartao-2);color:var(--mudo);font-weight:600;text-align:left;padding:9px 12px;
  font-size:var(--fs-1);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--borda);white-space:nowrap;z-index:1}
.tabela td{padding:9px 12px;border-bottom:1px solid var(--borda);vertical-align:middle}
.tabela tr:last-child td{border-bottom:0}
.tabela tbody tr{cursor:default}
.tabela tbody tr.clic{cursor:pointer}
.tabela tbody tr:hover{background:var(--cartao-hover)}
.tabela tbody tr.selecionada{background:var(--cartao-hover);box-shadow:inset 3px 0 0 var(--gold)}
.tabela td.num,.tabela th.num{text-align:right;font-variant-numeric:tabular-nums}
.tabela .acoes{white-space:nowrap;text-align:right}

/* ===== modal ===== */
.modal-fundo{position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:var(--e-4);
  backdrop-filter:blur(2px);animation:aparecer .12s}
.modal{background:var(--cartao);border:1px solid var(--borda-forte);border-radius:var(--r-3);box-shadow:0 20px 60px var(--sombra-cor);
  width:min(560px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column;animation:subir .14s}
.modal.larga{width:min(860px,100%)}
.modal.estreita{width:min(400px,100%)}
.modal > .cabeca{display:flex;align-items:center;gap:var(--e-3);padding:var(--e-4) var(--e-5);border-bottom:1px solid var(--borda)}
.modal > .cabeca h2{flex:1;font-family:var(--serif);font-weight:500;font-size:var(--fs-4)}
.modal > .corpo{padding:var(--e-4) var(--e-5);overflow:auto;flex:1}
.modal > .rodape{display:flex;gap:var(--e-2);justify-content:flex-end;padding:var(--e-3) var(--e-5);border-top:1px solid var(--borda);flex-wrap:wrap}
.modal > .rodape .esq{margin-right:auto}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
@keyframes subir{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}

/* ===== ficha lateral (painel deslizante à direita) ===== */
.ficha-fundo{position:fixed;inset:0;z-index:850;background:rgba(0,0,0,.35);animation:aparecer .12s}
.ficha{position:fixed;top:0;right:0;bottom:0;z-index:860;width:min(520px,100%);background:var(--cartao);border-left:1px solid var(--borda-forte);
  box-shadow:-10px 0 40px var(--sombra-cor);display:flex;flex-direction:column;animation:deslizar .16s}
.ficha.larga{width:min(760px,100%)}
.ficha > .cabeca{display:flex;align-items:center;gap:var(--e-3);padding:var(--e-4) var(--e-5);border-bottom:1px solid var(--borda)}
.ficha > .cabeca h2{flex:1;font-family:var(--serif);font-weight:500}
.ficha > .corpo{padding:var(--e-4) var(--e-5);overflow:auto;flex:1}
.ficha > .rodape{display:flex;gap:var(--e-2);justify-content:flex-end;padding:var(--e-3) var(--e-5);border-top:1px solid var(--borda)}
.ficha > .rodape .esq{margin-right:auto}
@keyframes deslizar{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.abas{display:flex;gap:2px;border-bottom:1px solid var(--borda);margin-bottom:var(--e-4);overflow:auto}
.abas .aba{padding:8px 14px;border:0;background:none;color:var(--mudo);font:inherit;font-size:var(--fs-2);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.abas .aba:hover{color:var(--texto)}
.abas .aba.ativa{color:var(--gold-2);border-bottom-color:var(--gold)}

/* ===== toast ===== */
/* no ALTO (1.21): embaixo à direita o aviso nascia em cima do "Emitir / pagar" */
.toasts{position:fixed;right:var(--e-4);top:calc(var(--topo-altura) + var(--e-3));bottom:auto;z-index:1000;display:flex;flex-direction:column;gap:var(--e-2);pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:var(--e-2);padding:10px 14px;border-radius:var(--r-2);background:var(--cartao);border:1px solid var(--borda-forte);
  box-shadow:var(--sombra);font-size:var(--fs-2);max-width:360px;animation:subir .14s}
.toast.ok{border-color:var(--ok)}.toast.erro{border-color:var(--erro);font-size:var(--fs-3);max-width:480px}.toast.aviso{border-color:var(--aviso)}
.toast .ico{color:var(--gold)}.toast.ok .ico{color:var(--ok)}.toast.erro .ico{color:var(--erro)}.toast.aviso .ico{color:var(--aviso)}

/* ===== estado vazio (com imagem Thiings) ===== */
.vazio{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--e-2);padding:var(--e-6);text-align:center;color:var(--mudo)}
.vazio img{width:128px;height:128px;object-fit:contain;filter:drop-shadow(0 8px 16px rgba(0,0,0,.35));opacity:.95}
.vazio b{color:var(--texto);font-family:var(--serif);font-weight:500;font-size:var(--fs-4)}

/* ===== imagem de produto/módulo com fallback ===== */
/* 3.1 (aprovada pelo dono, 28/09): a MOLDURA das ilustracoes — as ilustracoes ficam; muda so o quadro: fundo com luz no alto, borda
   fina, cantos de 14 px e a ilustracao a 74% (todas com o mesmo tamanho aparente; a sombra curta, apoiada) */
.img-tile{display:inline-flex;align-items:center;justify-content:center;border-radius:14px;background:radial-gradient(130% 120% at 30% 15%, var(--cartao-hover), var(--cartao-2) 60%);border:1px solid var(--borda);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);overflow:hidden;flex:none;position:relative}
.img-tile img{width:74%;height:74%;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.img-tile .iniciais{font-family:var(--serif);font-weight:600;color:#fff;font-size:40%;letter-spacing:.02em}
.img-tile .ico{position:absolute;right:6%;bottom:6%;width:28%;height:28%;color:rgba(255,255,255,.7)}

/* ===== barra de rolagem interna / utilidades de página ===== */
.pagina{padding:var(--e-5);max-width:1400px;margin:0 auto;width:100%}
.pagina > .cabeca{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--e-3);margin-bottom:var(--e-4);flex-wrap:wrap}
.pagina > .cabeca .sub{color:var(--mudo);font-size:var(--fs-2);margin-top:2px}
.separador{height:1px;background:var(--borda);margin:var(--e-4) 0}
.aviso-caixa{display:flex;gap:var(--e-2);align-items:flex-start;padding:10px 12px;border-radius:var(--r-2);border:1px solid var(--aviso);background:var(--aviso-fundo);font-size:var(--fs-2)}
.aviso-caixa.info{border-color:var(--info);background:var(--info-fundo)}
.aviso-caixa.erro{border-color:var(--erro);background:var(--erro-fundo)}   /* 5.1d: o cupom que nao vale mais (o Pagamento) */
.aviso-caixa .ico{flex:none;margin-top:2px}
/* a bolinha "?" (js/nucleo/ajuda.js): a explicacao ao passar o mouse (PC) e ao tocar (tablet/celular) */
.ajuda-q{position:relative;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-left:6px;padding:0;border-radius:50%;border:1px solid var(--borda-forte);background:var(--cartao);color:var(--mudo);font:inherit;font-size:.78rem;font-weight:700;line-height:1;cursor:help;vertical-align:middle}
.ajuda-q::after{content:'';position:absolute;inset:-11px}   /* alvo de 44 px no toque, sem crescer o desenho */
.ajuda-balao{display:none;position:absolute;z-index:60;left:50%;top:calc(100% + 8px);transform:translateX(calc(-50% + var(--ajuda-desloca, 0px)));width:min(320px,86vw);padding:10px 12px;border-radius:var(--r-2);border:1px solid var(--borda-forte);background:var(--cartao);color:var(--texto);box-shadow:var(--sombra);font-size:var(--fs-2);font-weight:400;line-height:1.45;text-align:left;white-space:pre-line;cursor:auto}
.ajuda-q.acima .ajuda-balao{top:auto;bottom:calc(100% + 8px)}   /* K.2b: embaixo nao cabia (ajuda.js) */
@media (pointer:coarse){ .grupo-campo .marcar{min-height:48px} .ajuda-q::after{inset:-13px} }   /* K.2b: 48 px no toque */
.ajuda-q:hover .ajuda-balao,.ajuda-q:focus-visible .ajuda-balao,.ajuda-q.aberta .ajuda-balao{display:block}
.ajuda-q:hover,.ajuda-q.aberta{border-color:var(--gold);color:var(--gold)}

/* ===== overlay do mapa de atalhos ===== */
.mapa-teclas{columns:2;column-gap:var(--e-5);font-size:var(--fs-2)}
.mapa-teclas h3{break-after:avoid;margin:var(--e-2) 0 var(--e-1)}
.mapa-teclas .par{display:flex;justify-content:space-between;gap:var(--e-3);padding:3px 0;border-bottom:1px dashed var(--borda);break-inside:avoid}
.mapa-teclas .par span:first-child{color:var(--texto)}

/* ===== impressão ===== */
@media print{
  body::before{display:none}
  .nao-imprimir,.barra-teclas,.lado,.topo{display:none!important}
}
@media (max-width:720px){
  .grade.c2,.grade.c3,.grade.c4{grid-template-columns:1fr}
  .pagina{padding:var(--e-4)}
  .mapa-teclas{columns:1}
}
/* marca de origem: de qual mesa veio o item quando as mesas estão juntas */
.gold-txt{color:var(--gold-2)}
.chip.mini{padding:1px 5px;font-size:.66rem;vertical-align:middle}
/* 1.28: o aviso fica POR CIMA do caixa por ate 10 s — nao pode engolir o toque, e no
   celular nao cola na borda */
.toast{pointer-events:none}
@media (max-width:560px){.toasts{left:var(--e-3);right:var(--e-3)}.toast{max-width:none}}
/* 2.3: abrir sem servidor — uma tela de verdade, nao fundo preto com "HTTP 501" */
.sem-servidor{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--e-4);padding:var(--e-5) var(--e-4);text-align:center;background:var(--bg);color:var(--texto);max-width:560px;margin:0 auto}
.sem-servidor h1{font-family:var(--serif);font-weight:500;font-size:var(--fs-6, 1.6rem);margin:0}
.sem-servidor p{margin:0;color:var(--mudo);line-height:1.5}
.sem-servidor p b{color:var(--texto)}
.sem-servidor [data-tentar]{min-height:48px;min-width:220px}
.sem-servidor details{font-size:var(--fs-1);color:var(--mudo)}
.sem-servidor code{display:block;margin-top:6px;word-break:break-word}

/* A.8n (dono): o tipo da conta num quadradinho — moto = entrega, sacola = retirada, casinha = no restaurante */
.tipo-conta{display:inline-flex;align-items:center;justify-content:center;width:1.6em;height:1.6em;flex:none;margin-right:.35em;border:1px solid var(--borda-forte);border-radius:var(--r-1);vertical-align:middle;line-height:1}
.tipo-conta .ico{width:1.05em;height:1.05em}
.mesa-num .tipo-conta{margin-right:6px;font-size:.6em;vertical-align:.25em}

/* A.8o: o leitor da camera — preto enquanto abre (nunca o PLAY do video), moldura de 70% e o zoom */
.cam-caixa{position:relative;width:100%;aspect-ratio:3/4;max-height:62vh;background:#000;border-radius:var(--r-2);overflow:hidden}
.cam-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;opacity:0;transition:opacity .15s}
.cam-caixa.tocando .cam-video{opacity:1}
.cam-video::-webkit-media-controls,.cam-video::-webkit-media-controls-panel,.cam-video::-webkit-media-controls-play-button,
.cam-video::-webkit-media-controls-start-playback-button,.cam-video::-webkit-media-controls-overlay-play-button{display:none!important;-webkit-appearance:none;opacity:0}
.cam-moldura{position:absolute;left:15%;width:70%;top:50%;aspect-ratio:1/1;transform:translateY(-50%);border:3px solid var(--gold);border-radius:14px;box-shadow:0 0 0 9999px rgba(0,0,0,.38);pointer-events:none}
.cam-abrindo{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#fff;font-size:1rem;background:#000}
.cam-abrindo .ico{width:40px;height:40px;opacity:.8}
.cam-caixa.tocando .cam-abrindo{display:none}
.cam-zoom{display:flex;align-items:center;gap:10px;margin-top:10px}
.cam-zoom[hidden]{display:none}
.cam-zoom input{flex:1;min-height:44px}
.cam-dica{margin:8px 0 0;font-size:.9rem}

/* A.8s: botoes de opcao (sem padrao marcado) */
.escolha{display:flex;flex-direction:column;gap:4px}
.escolha .marcar{min-height:40px}