/* ===================================================================
   VeyronERP — modo Operação: tela cheia, abas grandes no topo,
   barra de teclas fixa no rodapé. Salão, conta, delivery, cozinha,
   caixa e display ganham suas regras aqui conforme as etapas avançam.
   =================================================================== */
.app-operacao{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}   /* dvh: a altura VISIVEL (no celular a barra do navegador escondia o fim da lista) */
.app-operacao > .topo{height:var(--topo-altura);flex:none;display:flex;align-items:center;gap:var(--e-3);padding:0 var(--e-3) 0 var(--e-4);
  border-bottom:1px solid var(--borda);background:var(--bg-alt)}
.app-operacao > .topo .mv{width:84px;margin:0}
.app-operacao > .topo .mv .fio{display:none}
.app-operacao > .topo .mv .prod{display:none}
.abas-op{display:flex;gap:4px;flex:1;justify-content:center}
.abas-op .aba{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 18px;border-radius:var(--r-2);border:1px solid transparent;
  background:none;color:var(--mudo);font:inherit;font-size:var(--fs-3);font-weight:500;cursor:pointer;user-select:none}
.abas-op .aba:hover{color:var(--texto);background:var(--cartao-hover)}
.abas-op .aba.ativa{color:var(--gold-2);background:var(--cartao);border-color:var(--gold-dark)}
.abas-op .aba .ico{width:20px;height:20px}
.abas-op .aba kbd{opacity:.7}
.abas-op .aba .cont{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--erro);color:#fff;font-size:.68rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.app-operacao > .topo .estado{display:flex;align-items:center;gap:var(--e-2);font-size:var(--fs-2);color:var(--mudo)}
.app-operacao > .palco{flex:1;min-height:0;overflow:auto;position:relative;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}

/* barra de teclas: sempre visível, mostra as teclas do escopo atual */
.barra-teclas{height:var(--barra-teclas);flex:none;display:flex;align-items:center;gap:var(--e-1);padding:0 var(--e-3);overflow-x:auto;
  border-top:1px solid var(--borda);background:var(--bg-alt);font-size:var(--fs-2);white-space:nowrap}
.barra-teclas .tecla{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:var(--r-1);color:var(--mudo);cursor:pointer;user-select:none;flex:none}
.barra-teclas .tecla:hover{background:var(--cartao-hover);color:var(--texto)}
.barra-teclas .tecla kbd{color:var(--gold-2);border-color:var(--gold-dark)}
.barra-teclas .escopo{margin-left:auto;color:var(--apagado);font-size:var(--fs-1);text-transform:uppercase;letter-spacing:.08em;flex:none}

/* ===== salão: mapa de mesas (cartão neutro, a ilustração conta o estado) ===== */
.salao{padding:var(--e-3) var(--e-4);display:flex;flex-direction:column;gap:var(--e-3);min-height:100%}
.salao-topo .linha{gap:var(--e-3)}
.abrir-caixa{display:flex;gap:var(--e-2)}
.abrir-caixa .campo{width:110px;font-size:var(--fs-5);text-align:center}
.filtros-salao{display:flex;gap:6px;flex-wrap:wrap;align-items:center;flex:1}
.resumo-salao{margin-left:auto;display:flex;gap:6px;align-items:center;font-size:var(--fs-2)}
.salao-grade h3{margin:4px 0 8px}
.mesas{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--mesa),1fr));gap:var(--e-2)}
.mesa{position:relative;display:flex;flex-direction:column;min-height:var(--mesa);padding:6px 10px 8px;border-radius:var(--r-3);border:1px solid var(--borda-forte);border-top:3px solid var(--borda-forte);background:var(--cartao);color:var(--texto);font:inherit;cursor:pointer;text-align:left;transition:transform .08s,box-shadow .1s}
/* Bloco de mesas juntas (agrupadas): uma moldura dourada só, com os quadrados
   encostados dentro, no espírito da pasta de aplicativos do celular. */
.ilha{display:flex;flex-direction:column;gap:4px;padding:6px;border-radius:var(--r-3);
  border:1px solid var(--gold-dark);background:linear-gradient(180deg,rgba(191,155,74,.10),transparent 60%);
  box-shadow:inset 0 0 0 1px rgba(191,155,74,.14)}
.ilha-topo{display:flex;align-items:center;gap:6px;padding:0 4px;font-size:var(--fs-1);color:var(--gold-2)}
.ilha-topo .cresce{flex:1}
.ilha-topo .num{font-size:var(--fs-2);color:var(--texto)}
.ilha-mesas{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;flex:1}
/* quadrados encostados: some a borda entre eles e só as pontas ficam arredondadas */
.ilha-mesas .mesa{border-radius:0;border-right-width:0;box-shadow:none}
.ilha-mesas .mesa:first-child{border-top-left-radius:var(--r-2);border-bottom-left-radius:var(--r-2)}
.ilha-mesas .mesa:last-child{border-right-width:1px;border-top-right-radius:var(--r-2);border-bottom-right-radius:var(--r-2)}
.ilha-mesas .mesa:hover{transform:none;z-index:1;border-color:var(--gold)}
.ilha-base{display:flex;align-items:center;gap:8px;padding:0 4px;font-size:var(--fs-1)}
.ilha-base button{margin-left:auto}
@media (max-width:820px){.ilha{grid-column:span 1 !important}.ilha-mesas{grid-auto-flow:row}
  .ilha-mesas .mesa{border-right-width:1px;border-radius:0}
  .ilha-mesas .mesa:first-child{border-radius:var(--r-2) var(--r-2) 0 0}
  .ilha-mesas .mesa:last-child{border-radius:0 0 var(--r-2) var(--r-2)}}
.mesa:hover{transform:translateY(-2px);box-shadow:var(--sombra);border-color:var(--gold-dark)}
.mesa:focus-visible{outline:none;box-shadow:var(--foco)}
.mesa .mesa-topo{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.mesa .mesa-num{font-family:var(--serif);font-size:var(--fs-5);font-weight:600;line-height:1}
.mesa .mesa-topo small{font-size:var(--fs-1);color:var(--mudo)}
.mesa .mesa-ilustra{position:relative;flex:1;display:flex;align-items:center;justify-content:center;margin:2px -4px;background:radial-gradient(55% 22% at 50% 92%, rgba(255,255,255,.07), transparent 70%)}   /* 3.1: um piso de luz sob a cena */
.mesa .mesa-base{display:flex;flex-direction:column;gap:1px;line-height:1.2}
.mesa .mesa-base b{font-size:var(--fs-3)}
.mesa .mesa-base small{font-size:var(--fs-1);color:var(--mudo);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mesa .mesa-motivo{position:absolute;left:0;right:0;bottom:0;font-size:.62rem;padding:2px 8px;background:var(--erro);color:#fff;border-radius:0 0 12px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mesa.estado-livre{border-top-color:var(--mesa-livre-borda)}
.mesa.estado-ocupada{border-top-color:var(--mesa-ocupada-borda)}
.mesa.estado-consumindo{border-top-color:var(--mesa-consumindo-borda)}
.mesa.estado-sem_consumo{border-top-color:var(--mesa-sem-consumo-borda)}
.mesa.estado-bloqueada{border-top-color:var(--mesa-bloqueada-borda)}
.mesa.estado-reservada{border-top-color:var(--mesa-reservada-borda)}
.mesa.estado-anexada{border-top-color:var(--mesa-anexada-borda)}
.mesa.estado-outro_garcom{border-top-color:var(--mesa-outro-borda)}
.mesa.estado-conferencia{border-top-color:var(--mesa-conferencia-borda)}
.mesa.atual{outline:2px dashed var(--gold);outline-offset:2px}
.mesa:has(.mesa-motivo){padding-bottom:22px}
/* pedido do QR que ninguem atendeu (1.20): legivel do outro lado do salao — letra de
   verdade, icone, e a mesa inteira com a borda do aviso (antes: 9,9 px e a mesa se
   desenhava como "consumindo", sem nada ter ido para a cozinha) */
.mesa .mesa-pedido{background:var(--aviso);color:var(--sobre-aviso);font-size:var(--fs-3);font-weight:700;padding:6px 8px;white-space:normal;display:flex;gap:6px;align-items:center;justify-content:center}
.mesa .mesa-pedido .ico{fill:currentColor}
.mesa:has(.mesa-pedido){padding-bottom:40px;border-color:var(--aviso);box-shadow:0 0 0 2px var(--aviso)}
.legenda .leg-pedido{display:inline-flex;gap:4px;align-items:center;color:var(--texto);font-weight:600}
.legenda .leg-pedido .ico{fill:var(--aviso)}
/* a faixa do pedido do cliente no alto da conta: um toque, 48 px, largura total */
.conta-confirmar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-3);padding:var(--e-2) var(--e-3);margin-bottom:var(--e-2);background:var(--aviso-fundo);border:1px solid var(--aviso);border-radius:var(--r-2);font-size:var(--fs-3);font-weight:600}
.conta-confirmar > .ico{fill:var(--aviso);width:22px;height:22px}
.conta-confirmar .btn{min-height:48px;margin-left:auto}
@media (max-width:560px){.conta-confirmar .btn{width:100%;margin-left:0}}
.mesas.mini{grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px;max-height:160px;overflow:auto}
.mesas.mini .mesa{min-height:44px;padding:4px;align-items:center;justify-content:center;border-top-width:1px}
.mesas.mini .mesa.estado-livre{background:var(--mesa-livre)}.mesas.mini .mesa.estado-ocupada{background:var(--mesa-ocupada)}
.mesas.mini .mesa .mesa-num{font-size:var(--fs-4)}
/* a cena 3D: uma imagem pronta por estado (mesma escala e mesmo angulo em todas) */
.cena{position:relative;width:100%;aspect-ratio:3/2;display:flex;align-items:flex-end;justify-content:center}
.cena-img{width:100%;height:100%;object-fit:contain;object-position:bottom center;user-select:none;pointer-events:none;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.cena.estado-bloqueada .cena-img{filter:grayscale(.45) brightness(.78) drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.cena.estado-sem_consumo .cena-img{filter:brightness(.88) drop-shadow(0 6px 10px rgba(0,0,0,.45))}
/* moto e pacote são imagens quadradas: centraliza em vez de apoiar embaixo */
.cena-pedido{align-items:center}
.cena-pedido .cena-tipo{object-position:center;padding:2%}
.cena-mais{position:absolute;right:0;top:0;display:inline-flex;align-items:center;gap:3px;font-size:.68rem;font-weight:700;
  padding:2px 7px;border-radius:999px;background:var(--gold);color:#1a1408;box-shadow:0 2px 4px rgba(0,0,0,.4)}
.cena-mais .ico{width:.9em;height:.9em}
.cena-atende{position:absolute;right:2%;bottom:4%;width:26px;height:26px;border-radius:50%;background:var(--roxo);color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.cena-falta{color:var(--apagado);font-size:var(--fs-1);padding:20% 4%;text-align:center}
.mesa .mesa-ilustra{margin:2px -6px 4px;flex:1;display:flex;align-items:flex-end}
.mesa .mesa-ilustra .cena{height:100%}
/* 4.2 (aprovada pelo dono, opcao A): o salao inteiro sem rolar — cartao de altura fixa numa grade que se ajusta a tela
   (20 mesas cabem no PC de 1366 x 768 e 12 no tablet de 1024); a mesa LIVRE fica com a cena menor e apagada, o olho vai as ocupadas.
   Revisao de design: vale a partir de 821 px — ate 820 a ilha (mesas juntas) empilha as mesas numa coluna e, na altura fixa,
   cada mesa ficava com 27 px (a proposta foi medida em 1366 e 1024; o tablet em pe segue como era). */
@media (min-width:821px){
  .salao-grade .mesas{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-auto-rows:172px}
  .salao-grade .mesa{min-height:0;overflow:hidden}
  .salao-grade .mesa .mesa-ilustra{min-height:0;overflow:hidden}
  .salao-grade .mesa .mesa-ilustra .cena{aspect-ratio:auto}
  .salao-grade .mesa.estado-livre .mesa-ilustra{opacity:.38;transform:scale(.8);transform-origin:50% 85%}
  .salao-grade .ilha{overflow:hidden;gap:2px;padding:4px}
  .salao-grade .ilha-mesas{min-height:0}
  .salao-grade .ilha .mesa{padding:4px 8px}
  .salao-grade .ilha .mesa:has(.mesa-motivo){padding-bottom:22px}   /* a marca "a enviar" guarda a folga dela (a regra de cima a apagava) */
  .salao-grade .ilha .mesa .mesa-ilustra{flex:1;min-height:0}
  .salao-grade .ilha .mesa .cena{max-height:58px}
  .salao-grade .ilha .mesa .mesa-num{font-size:var(--fs-4)}
  .salao-grade .ilha-base{padding:0 4px}
  .salao-grade .ilha-base button{padding:2px 8px;min-height:0}
}
@keyframes pulsar{0%,100%{opacity:.5}50%{opacity:1}}
.legenda{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;font-size:var(--fs-1);color:var(--mudo)}
.legenda i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:4px;vertical-align:-2px;border:1px solid var(--borda-forte)}
.legenda i.estado-livre{background:var(--mesa-livre)}.legenda i.estado-ocupada{background:var(--mesa-ocupada)}.legenda i.estado-consumindo{background:var(--mesa-consumindo)}.legenda i.estado-sem_consumo{background:var(--mesa-sem-consumo)}.legenda i.estado-bloqueada{background:var(--mesa-bloqueada)}.legenda i.estado-reservada{background:var(--mesa-reservada)}.legenda i.estado-anexada{background:var(--mesa-anexada)}.legenda i.estado-outro_garcom{background:var(--mesa-outro)}.legenda i.estado-conferencia{background:var(--mesa-conferencia)}
.menu-sup{display:flex;flex-direction:column;gap:6px}
.menu-sup .btn{justify-content:flex-start}
.garcons{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.garcom-op{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--borda);border-radius:var(--r-2);background:var(--cartao-2);color:var(--texto);font:inherit;cursor:pointer;text-align:left;min-height:var(--toque)}
.garcom-op:hover{border-color:var(--gold-dark)}
.garcom-op small{display:block}

/* ===== conta aberta ===== */
.conta{display:grid;grid-template-columns:1fr 300px;height:100%;min-height:0}
.conta-esq{display:flex;flex-direction:column;min-width:0;min-height:0;padding:var(--e-3) var(--e-4);gap:var(--e-2)}
.conta-dir{border-left:1px solid var(--borda);background:var(--bg-alt);display:flex;flex-direction:column;min-height:0;overflow:hidden}
.conta-cabeca{display:flex;flex-direction:column;gap:6px}
.conta-titulo{display:flex;align-items:center;gap:12px}
.conta-titulo h1{font-size:var(--fs-5)}
.mesa-badge{display:inline-flex;align-items:center;justify-content:center;min-width:52px;height:52px;padding:0 10px;border-radius:var(--r-2);border:2px solid var(--borda-forte);font-family:var(--serif);font-size:var(--fs-5);font-weight:600}
.mesa-badge.estado-livre{background:var(--mesa-livre);border-color:var(--mesa-livre-borda)}.mesa-badge.estado-ocupada{background:var(--mesa-ocupada);border-color:var(--mesa-ocupada-borda)}.mesa-badge.estado-consumindo{background:var(--mesa-consumindo);border-color:var(--mesa-consumindo-borda)}.mesa-badge.estado-sem_consumo{background:var(--mesa-sem-consumo);border-color:var(--mesa-sem-consumo-borda)}.mesa-badge.estado-bloqueada{background:var(--mesa-bloqueada);border-color:var(--mesa-bloqueada-borda)}.mesa-badge.estado-conferencia{background:var(--mesa-conferencia);border-color:var(--mesa-conferencia-borda)}
.conta-chips{display:flex;gap:6px;flex-wrap:wrap}
.conta-chips .chip{min-height:32px;background:var(--cartao)}
.erro-txt{color:var(--erro-texto)}.aviso-txt{color:var(--aviso-texto)}   /* 1.52: token de TEXTO (o de fundo dava 2:1 no claro) */
.conta-itens{flex:1;min-height:120px;overflow:auto;border:1px solid var(--borda);border-radius:var(--r-2);background:var(--cartao)}
.tabela.itens td{padding:7px 10px;vertical-align:top}
.tabela.itens tr.cancelado td{opacity:.45;text-decoration:line-through}
.tabela.itens tr.cancelado td .obs{text-decoration:none}
.tabela.itens .adic{font-size:var(--fs-1);color:var(--mudo);margin-top:2px;line-height:1.4}
.tabela.itens .obs{font-size:var(--fs-1);color:var(--aviso);margin-top:2px}
.tabela.itens .por{display:flex;align-items:center;gap:4px;font-size:var(--fs-1);color:var(--mudo);margin-top:2px}
.tabela.itens .por svg{width:13px;height:13px;flex:none;opacity:.8}
.tabela.itens .por small{opacity:.7}
.tabela.itens .por.cliente{color:var(--info)}
.tabela.itens .acoes .btn{opacity:.5}
.tabela.itens tr:hover .acoes .btn,.tabela.itens tr.selecionada .acoes .btn{opacity:1}
.tabela.itens .acoes .btn[data-confirmar]{opacity:1}
.tabela.itens .st-chip{font-size:.62rem}
.tabela.itens tr.st-pronto .st-chip{color:var(--ok);border-color:var(--ok)}
.tabela.itens tr.st-preparando .st-chip,.tabela.itens tr.st-impresso .st-chip{color:var(--aviso);border-color:var(--aviso)}
.conta-rodape{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2px 16px;font-size:var(--fs-2)}
.conta-rodape .tot{display:flex;justify-content:space-between;gap:8px;padding:3px 6px;border-radius:6px}
.conta-rodape .tot.clic{cursor:pointer}
.conta-rodape .tot.clic:hover{background:var(--cartao-hover)}
.conta-rodape .tot.total{grid-column:1/-1;font-size:var(--fs-5);font-family:var(--serif);border-top:1px solid var(--borda);margin-top:4px;padding-top:6px}
.conta-rodape .tot.total b{color:var(--gold-2)}
.conta-acoes{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
/* linha de lançamento */
.linha-lanc{display:flex;flex-direction:column;gap:4px}
.prefixos{display:flex;gap:6px;align-items:center;min-height:26px;flex-wrap:wrap}
.prefixo-dica{font-size:var(--fs-1)}
.busca-caixa{position:relative}
.busca-caixa .campo{font-size:var(--fs-4)}
.resultados{position:absolute;left:0;right:0;top:100%;z-index:40;max-height:340px;overflow:auto;background:var(--cartao);border:1px solid var(--borda-forte);border-radius:var(--r-2);box-shadow:var(--sombra);margin-top:4px}
.res-item{display:flex;align-items:center;gap:10px;padding:6px 10px;cursor:pointer;border-bottom:1px solid var(--borda)}
.res-item:last-child{border-bottom:0}
.res-item:hover,.res-item.sel{background:var(--cartao-hover);box-shadow:inset 3px 0 0 var(--gold)}
.res-item small{display:block}
/* painel de favoritos / grupos */
.painel-grupos{display:flex;gap:6px;flex-wrap:wrap;padding:10px;border-bottom:1px solid var(--borda)}
.painel-titulo{padding:6px 12px 0;font-size:var(--fs-1);text-transform:uppercase;letter-spacing:.06em}
.painel-produtos{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;padding:10px;align-content:start}
.prod-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px;border:1px solid var(--borda);border-radius:var(--r-2);background:var(--cartao);color:var(--texto);font:inherit;cursor:pointer;text-align:center;min-height:110px}
.prod-card:hover{border-color:var(--gold-dark);background:var(--cartao-hover)}
.prod-card b{font-size:var(--fs-1);line-height:1.2}
.prod-card small{color:var(--gold-2);font-size:var(--fs-1)}
.prod-card .img-tile{background:transparent}
.prod-card.fora{opacity:.55}
.prod-card.fora small{color:var(--aviso)}
.res-item.fora b{color:var(--mudo)}
/* adicionais */
.ga{margin-bottom:12px}
.ga-cabeca{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.ga-opcoes{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px}
.ga-op{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--borda);border-radius:var(--r-2);background:var(--cartao-2);cursor:pointer;min-height:var(--toque)}
.ga-op:hover{border-color:var(--gold-dark)}
.ga-op.marcada{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,var(--cartao-2))}
.ga-op small{display:block}
/* pizza */
.pizza-etapas{display:flex;gap:6px;margin-bottom:10px}
.pizza-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.pizza-op{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 8px;border:1px solid var(--borda);border-radius:var(--r-2);background:var(--cartao-2);color:var(--texto);font:inherit;cursor:pointer;text-align:center;min-height:120px}
.pizza-op:hover{border-color:var(--gold-dark)}
.pizza-op.marcada{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,var(--cartao-2))}
.pizza-op small{font-size:var(--fs-1);color:var(--mudo);line-height:1.2}
.pizza-op .preco{color:var(--gold-2);font-size:var(--fs-2)}
.pizza-op .ordem{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;background:var(--gold);color:#1a1408;font-weight:700;font-size:.72rem;display:flex;align-items:center;justify-content:center}
.pizza-op .img-tile{background:transparent}
.pizza-resumo{display:flex;align-items:center;gap:12px;margin-top:12px;padding:10px 12px;border:1px solid var(--gold-dark);border-radius:var(--r-2);background:var(--cartao)}
.pizza-resumo .total{font-size:var(--fs-5);font-family:var(--serif);color:var(--gold-2)}
.pizza-resumo small{display:block}
/* cupom 80 mm */
.cupom{font-family:var(--mono);font-size:12px;line-height:1.35;background:#fff;color:#111;padding:14px 12px;border-radius:6px;max-width:320px;margin:0 auto;box-shadow:var(--sombra)}
.cupom .c{text-align:center}
.cupom .titulo{font-weight:700;font-size:13px}
.cupom .destaque{font-weight:700;margin:4px 0}
.cupom .mudo{color:#555;font-size:11px}
.cupom .sep{border-top:1px dashed #999;margin:6px 0}
.cupom .ed{display:flex;justify-content:space-between;gap:8px}
.cupom .ed span:first-child{flex:1;min-width:0;word-break:break-word}
.cupom .ed.total{font-weight:700;font-size:14px;margin-top:2px}
#area-impressao{display:none}
@media print{
  body.imprimindo > *:not(#area-impressao){display:none!important}
  body.imprimindo #area-impressao{display:block}
  #area-impressao .cupom{box-shadow:none;max-width:72mm;padding:0;border-radius:0;font-size:11px}
  #area-impressao .cartaz-qr{page-break-after:always;text-align:center;padding:18mm 10mm;color:#000;font-family:var(--fonte)}
  #area-impressao .cartaz-qr:last-child{page-break-after:auto}
  #area-impressao .cartaz-qr .marca{font-size:12pt;letter-spacing:.18em;text-transform:uppercase;color:#555}
  #area-impressao .cartaz-qr h1{font-size:30pt;margin:6mm 0 2mm}
  #area-impressao .cartaz-qr .chamada{font-size:13pt;color:#333;margin:0 0 8mm}
  #area-impressao .cartaz-qr .endereco{font-size:9pt;color:#666;margin-top:6mm;word-break:break-all}
  @page{margin:4mm}
}
@media (max-width:1000px){
  .conta{grid-template-columns:1fr}
  .conta-dir{display:none}
}

/* ===== cozinha (KDS) ===== */
.kds{display:flex;flex-direction:column;height:100%;padding:var(--e-3) var(--e-4);gap:var(--e-3)}
.kds-topo-barra{display:flex;justify-content:space-between;gap:var(--e-3);flex-wrap:wrap}
.kds-colunas{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e-3);flex:1;min-height:0}
.kds-col{display:flex;flex-direction:column;min-height:0;border:1px solid var(--borda);border-radius:var(--r-3);background:var(--bg-alt)}
.kds-col h3{padding:10px 12px;border-bottom:1px solid var(--borda);display:flex;align-items:center;gap:6px}
.kds-col h3 .chip{margin-left:auto}
.kds-lista{flex:1;overflow:auto;padding:8px;display:flex;flex-direction:column;gap:8px}
.kds-cartao{border:1px solid var(--borda-forte);border-left:5px solid var(--dep);border-radius:var(--r-2);background:var(--cartao);padding:8px 10px;cursor:pointer}
/* fixado no topo (pino): moldura dourada discreta, para a cozinha ver de longe */
.kds-cartao.fixado{border-color:var(--gold-dark);box-shadow:inset 0 0 0 1px rgba(191,155,74,.25)}
.kds-pino{color:var(--gold);display:inline-flex;margin-right:4px}
.kds-acoes .btn.ativo{color:var(--gold)}
/* delivery: entregue mas ainda não pago — a quarta cor, financeira, não temporal */
.ent-cartao.st-entregue.nao-pago{border-color:var(--info);box-shadow:inset 0 0 0 1px var(--info-fundo)}
.ent-cartao.st-entregue.nao-pago .ent-tipo{color:var(--info-texto)}   /* 1.63: token (a cor literal dava 2:1 no claro) */
.kds-cartao.sel{box-shadow:var(--foco)}
.kds-cartao.st-preparando{background:color-mix(in srgb,var(--aviso) 8%,var(--cartao))}
.kds-cartao.st-pronto{opacity:.75}
.kds-cartao.cancelamento{border-color:var(--erro);background:var(--erro-fundo)}
/* 4.2 (aprovada pelo dono): ATRASADO pinta a borda inteira (um anel vermelho, visivel do outro lado da bancada); a faixa da esquerda segue com a cor do departamento */
.kds-cartao.atrasado{border-color:var(--erro);border-left-color:var(--dep);box-shadow:0 0 0 2px var(--erro)}
.kds-cartao.atrasado.sel{box-shadow:0 0 0 2px var(--erro),var(--foco)}
/* 4.2: cartao com varios lancamentos da mesma conta: cada lote com a sua hora */
.kds-lote{display:flex;align-items:center;gap:4px;font-size:var(--fs-1);color:var(--mudo);font-family:var(--mono);padding-top:4px;border-top:1px dashed var(--borda)}
.kds-lote:first-child{border-top:0;padding-top:0}
.kds-lote .ico{width:.95em;height:.95em}
.kds-lote [data-lote-pronto]{margin-left:auto;font-family:var(--sans);min-height:28px;padding:2px 10px}   /* 4.2b: o Pronto de um lote so */
@media (pointer:coarse){.kds-lote [data-lote-pronto]{min-height:40px}}
/* 4.2: a coluna vazia fica estreita e a largura vai para os cartoes (em 2-3 colunas quando cabem) */
.kds-colunas.kds-cozinha{grid-template-columns:var(--kds-cols,repeat(3,1fr))}
.kds-cozinha .kds-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));align-content:start;align-items:start}   /* revisao de design: 300 (a estrela nao cai de linha) e nunca mais largo que a coluna vazia */
.kds-cozinha .kds-col.vazia h3 .chip{display:none}
@media (max-width:900px){.kds-colunas.kds-cozinha{grid-template-columns:1fr}}
.kds-topo{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:var(--fs-4)}
.kds-fila{flex:none;min-width:26px;padding:1px 6px;border-radius:var(--r-1);background:var(--cartao-2);color:var(--mudo);
  font-family:var(--mono);font-size:var(--fs-1);font-weight:700;text-align:center}
.kds-fila.primeiro{background:var(--gold);color:#1a1408}
.kds-topo .tempo{font-size:var(--fs-2);font-family:var(--mono);display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--r-pill)}
.kds-topo .tempo.ok{color:var(--ok);background:var(--ok-fundo)}.kds-topo .tempo.aviso{color:var(--aviso);background:var(--aviso-fundo)}.kds-topo .tempo.erro{color:var(--erro);background:var(--erro-fundo);animation:pulsar 1.2s infinite}
.kds-sub{font-size:var(--fs-1);margin-bottom:6px}
.kds-cancel{color:var(--erro);font-weight:700;letter-spacing:.06em;margin:4px 0}
.kds-itens{display:flex;flex-direction:column;gap:6px;margin:6px 0}
.kds-item{display:flex;gap:8px;align-items:flex-start;font-size:var(--fs-3)}
.kds-item .qtd{min-width:36px;font-family:var(--mono);color:var(--gold-2);font-size:var(--fs-4)}
.kds-item .adic{font-size:var(--fs-2);color:var(--mudo)}
.kds-item .obs{font-size:var(--fs-2);color:var(--aviso);font-weight:600}
.kds-acoes{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.vazio.mini{padding:var(--e-4);color:var(--apagado)}
.kds.tv{font-size:1.25rem}
.kds.tv .kds-item{font-size:1.25rem}
.kds.tv .kds-item .qtd{font-size:1.5rem}
.kds.tv .kds-acoes,.kds.tv .kds-sub{display:none}
@media (max-width:900px){.kds-colunas{grid-template-columns:1fr;overflow:auto}.kds-col{min-height:200px}}

/* ===== caixa ===== */
.caixa{padding:var(--e-3) var(--e-4);display:flex;flex-direction:column;gap:var(--e-3);max-width:1400px}
.caixa-fechado h2{font-family:var(--serif);font-weight:500}
/* modo "marcar para faturar" (F3): a classe fica no container da tela */
.marcando .caixa-faturar .mesa{outline:1px dashed var(--gold-dark);outline-offset:2px;cursor:copy}
.marcando .caixa-faturar .mesa.atual{outline:2px solid var(--gold);outline-offset:2px}
.marcando .caixa-faturar{box-shadow:inset 0 0 0 1px var(--gold-dark);border-radius:var(--r-3);padding:8px;background:color-mix(in srgb,var(--gold) 4%,transparent)}
.caixa-faturar h3{margin:8px 0}

/* ===== pagamento ===== */
/* minmax(0,1fr): sem isso a coluna da esquerda nao encolhe abaixo do proprio
   conteudo e empurra o painel de pagamento para fora da tela */
.pagamento{display:grid;grid-template-columns:minmax(0,1fr) 440px;height:100%;min-height:0;overflow:hidden}
.pag-esq{display:flex;flex-direction:column;gap:var(--e-2);padding:var(--e-3) var(--e-4);min-height:0}
.pag-cabeca h1{margin-bottom:6px}
.pag-itens{flex:1;overflow:auto;border:1px solid var(--borda);border-radius:var(--r-2);background:var(--cartao)}
.pag-dir{border-left:1px solid var(--borda);background:var(--bg-alt);display:grid;grid-template-columns:1fr;align-content:start;gap:var(--e-2);padding:var(--e-3);min-height:0;overflow:auto}
.pag-col{display:flex;flex-direction:column;gap:var(--e-2);min-height:0}
.pag-falta{display:flex;flex-direction:column;align-items:flex-end;padding:10px 14px;border-radius:var(--r-2);background:var(--cartao);border:1px solid var(--gold-dark)}
.pag-falta span{font-size:var(--fs-1);text-transform:uppercase;letter-spacing:.06em;color:var(--mudo)}
.pag-falta b{font-family:var(--serif);font-size:var(--fs-6);color:var(--gold-2);line-height:1.1}
.pag-falta.zerado{border-color:var(--ok)}
.pag-falta.zerado b{color:var(--ok)}
.pag-divisao{padding:8px 10px;border:1px dashed var(--borda-forte);border-radius:var(--r-2)}
.pag-formas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.pag-formas .forma{justify-content:flex-start}
.pag-formas .forma.ativa{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 14%,var(--cartao));color:var(--gold-2)}
.pag-valor .campo{font-size:var(--fs-5)}
.pag-valor [data-teclado]{margin-top:8px}
.pag-valor .teclado-num .btn{min-height:44px;font-size:var(--fs-4)}
.pag-troco{min-height:18px;font-size:var(--fs-2)}
.pag-lista{display:flex;flex-direction:column;gap:4px}
.pag-lista-topo{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:2px 2px 4px;
  font-size:var(--fs-1);letter-spacing:.06em;text-transform:uppercase;color:var(--mudo);border-bottom:1px solid var(--borda)}
.pag-lista-topo b{font-size:var(--fs-3);color:var(--ok);letter-spacing:0;text-transform:none}
.pag-linha{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:6px;background:var(--cartao);
  border:1px solid var(--borda);font-size:var(--fs-3)}
.pag-linha span{flex:1}
.pag-linha b{color:var(--gold-2)}
.pag-linha.mudo{opacity:.75}
.pag-acoes{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}
.pag-acoes .primario{flex:1;justify-content:center}
/* Tela larga: o painel de pagamento usa o espaco horizontal que sobra ao lado da
   lista de itens e vira DUAS colunas — leitura (falta, formas, pagamentos) e
   digitacao (valor e teclado). Some a barra de rolagem. */
/* Coluna unica (1000-1279): a lista de pagamentos rola dentro dela mesma, para
   o painel inteiro nao ganhar barra de rolagem. */
@media (max-width:1279px){ .pag-lista{max-height:16vh;overflow:auto} }
@media (min-width:1280px){
  .pagamento{grid-template-columns:minmax(0,1fr) 700px}
  /* Duas sub-colunas que ocupam a altura toda: a da esquerda e o que se le
     (falta, formas, pagamentos), a da direita e o que se digita. Sem rolagem. */
  .pag-dir{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;align-content:stretch;overflow:hidden}
  .pag-acoes{grid-column:1 / -1;margin-top:0}
  .pag-col{min-height:0}
  /* uma forma de pagamento por linha: os rotulos longos ("Cartao de credito")
     nao sao mais cortados, e os botoes esticam para preencher a coluna */
  .pag-formas{grid-template-columns:1fr;flex:1;min-height:0;grid-auto-rows:minmax(44px,84px);align-content:start}
  .pag-formas .forma{height:100%}
  /* o teclado fica COMPACTO no topo: o espaco que sobra embaixo e da lista de
     quem ja pagou, que e o que o caixa precisa conferir antes de finalizar */
  .pag-valor{display:flex;flex-direction:column}
  .pag-valor .teclado-num .btn{min-height:52px;font-size:var(--fs-5)}
  .pag-col.b > .pag-lista{flex:1;min-height:0;overflow:auto;margin-top:2px}
}
@media (min-width:1700px){ .pagamento{grid-template-columns:minmax(0,1fr) 820px} }
@media (max-width:1000px){.pagamento{grid-template-columns:1fr;overflow:auto}.pag-dir{border-left:0;border-top:1px solid var(--borda)}}

/* ===== delivery ===== */
.kds-colunas.cinco{grid-template-columns:repeat(5,1fr)}
.ent-topo{display:flex;flex-direction:column;gap:8px}
.ent-cartao{border:1px solid var(--borda-forte);border-radius:var(--r-2);background:var(--cartao);padding:8px 10px;cursor:pointer;display:flex;flex-direction:column;gap:4px;font-size:var(--fs-2)}
.ent-cartao.sel{box-shadow:var(--foco)}
.ent-cartao.st-recebido{border-left:5px solid var(--info)}
.ent-cartao.st-em_preparo{border-left:5px solid var(--aviso)}
.ent-cartao.st-aguardando_retirada,.ent-cartao.st-aguardando_entregador{border-left:5px solid var(--roxo)}
.ent-cartao.st-saiu{border-left:5px solid var(--gold)}
.ent-cartao.st-entregue{border-left:5px solid var(--ok);opacity:.8}
.ent-cartao.st-recusado,.ent-cartao.st-cancelado{border-left:5px solid var(--erro);opacity:.7}
.ent-cli{font-size:var(--fs-3)}
.ent-itens{font-size:var(--fs-1);line-height:1.3}
@media (max-width:1300px){.kds-colunas.cinco{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.kds-colunas.cinco{grid-template-columns:1fr}}

/* ===== display de senhas ===== */
.display{position:relative;height:100%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;background:var(--bg);color:var(--texto)}
.disp-esq{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:24px}
.disp-rotulo{font-size:var(--fs-4);text-transform:uppercase;letter-spacing:.2em;color:var(--mudo)}
.disp-senha{display:flex;flex-direction:column;align-items:center;gap:6px;padding:24px 48px;border:3px solid var(--gold);border-radius:24px;background:var(--cartao);transition:transform .2s}
.disp-senha.pulso{transform:scale(1.06);box-shadow:0 0 60px var(--gold-dark)}
.disp-num{font-family:var(--serif);font-size:var(--fs-display);font-weight:600;line-height:1;color:var(--gold-2)}
.disp-ant{text-align:center}
.disp-anteriores{display:flex;gap:16px;justify-content:center;margin-top:8px}
.disp-anteriores span{font-family:var(--serif);font-size:var(--fs-6);padding:6px 18px;border:1px solid var(--borda-forte);border-radius:12px;color:var(--mudo)}
.disp-dir{display:flex;align-items:center;justify-content:center;padding:24px;border-left:1px solid var(--borda)}
.disp-prod{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.disp-prod .img-tile{background:transparent}
.disp-prod b{display:block;font-family:var(--serif);font-size:var(--fs-6)}
.disp-prod span{display:block;font-size:var(--fs-5);color:var(--gold-2)}
.disp-msg{grid-column:1/-1;overflow:hidden;white-space:nowrap;border-top:1px solid var(--borda);background:var(--bg-alt);padding:10px 0;font-size:var(--fs-4)}
.disp-msg span{display:inline-block;padding-left:100%;animation:rolar 18s linear infinite}
@keyframes rolar{to{transform:translateX(-100%)}}
.disp-tela{position:absolute;top:8px;right:8px;opacity:.4}.disp-tela:hover{opacity:1}
.disp-chamar{position:absolute;top:8px;left:8px;opacity:.4}.disp-chamar:hover{opacity:1}
@media (max-width:800px){.display{grid-template-columns:1fr}.disp-dir{display:none}}

/* tela "em construção" das etapas seguintes */
.em-construcao{height:100%;display:flex;align-items:center;justify-content:center}

@media (max-width:720px){
  .abas-op .aba span.rot{display:none}
  .abas-op .aba kbd{display:none}
  .app-operacao > .topo .mv{width:64px}
}

/* faixa dos modos de seleção (F1 agrupar no salão, F3 faturar no caixa) */
.faixa-modo{display:flex;align-items:center;gap:var(--e-2);flex-wrap:wrap;margin-top:6px;padding:6px 10px;
  border:1px dashed var(--gold-dark);border-radius:var(--r-2);background:color-mix(in srgb,var(--gold) 6%,transparent)}
.faixa-modo .mudo{font-size:var(--fs-2)}
.faixa-modo .btn:last-child{margin-left:auto}
.marcando .mesas .mesa{cursor:copy}
.marcando .mesas .mesa.atual{outline:3px solid var(--gold);outline-offset:2px}
/* no modo agrupar toda mesa é clicável: a livre abre vazia e entra no grupo */
.marcando .mesas .mesa{cursor:copy}

.kds-colunas.seis{grid-template-columns:repeat(6,1fr)}

/* ---- NO FIM DO ARQUIVO, de proposito (1.27): na mesma especificidade vence quem vem
   depois, e no meio do arquivo o .conta-itens de base (flex:1; overflow:auto) anulava
   estas regras em silencio. ---- */
/* celular do garcom (1.27): a lista de itens aparece INTEIRA (antes a faixa ocupava a
   caixa e a tabela sumia numa rolagem interna), sem as colunas que nao decidem nada */
@media (max-width:560px){
  .conta-esq{overflow:auto}
  .conta-itens{flex:none;min-height:0;overflow:visible}
  .tabela.itens thead,.tabela.itens td:nth-child(1),.tabela.itens td:nth-child(4){display:none}
}
/* aparelho de toque, sem teclado: a barra de teclas e a dica de prefixos nao servem */
@media (pointer:coarse){.barra-teclas,.prefixo-dica{display:none}}
/* o "confirmar" da linha e secundario: o gesto principal e a faixa (1.27; eram tres botoes dourados) */
.tabela.itens .acoes .btn.confirma-linha{background:transparent;border:1px solid var(--aviso);color:var(--aviso)}
.tabela.itens .acoes .btn.confirma-linha .ico{fill:var(--aviso)}
/* ---- 1.28: salao, segunda passada (no fim, pela mesma razao do bloco acima) ---- */
/* o estado "pedido do cliente" nao apaga o foco do teclado (mesma especificidade: quem vem depois vence) */
.mesa:has(.mesa-pedido){border-style:dashed}
.mesa:has(.mesa-pedido):focus-visible{box-shadow:0 0 0 2px var(--aviso),0 0 0 5px var(--texto)}
.legenda{font-size:var(--fs-3)}
.legenda .ico{width:14px;height:14px;vertical-align:-2px;margin-right:3px;fill:currentColor}
.chip.aviso{border-color:var(--aviso);color:var(--aviso-texto)}   /* 1.66: texto, nao fundo */
.chip.aviso .ico{fill:var(--aviso)}
.chip.aviso.ativo{background:var(--aviso);color:var(--sobre-aviso)}

/* 1.35: pago a mais — o numero grande vira "Devolver ao cliente", na cor de aviso */
.pag-falta.devolver{border-color:var(--aviso);background:var(--aviso-fundo)}
.pag-falta.devolver b{color:var(--aviso)}
/* 1.35: "o que o cliente recebeu?" item por item, com alvo de toque de 48 px */
.modal .lista-marcar{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:4px}
.modal .lista-marcar label.marcar{display:flex;align-items:center;gap:10px;min-height:48px;padding:4px 8px;border:1px solid var(--borda);border-radius:var(--r-2);cursor:pointer}
.modal .lista-marcar input{width:22px;height:22px}
/* 1.35: no tablet (<= 1100 px) o "Sair" saía da tela. As abas rolam, o bloco da
   direita não encolhe, e o nome do terminal e do usuário saem (estão no Início). */
@media (max-width:1100px){
  .app-operacao > .topo .abas-op{min-width:0;overflow-x:auto;scrollbar-width:none}
  .app-operacao > .topo .estado{flex:none}
  .app-operacao > .topo .estado > span:not(.selo-conexao){display:none}   /* 2.1: o selo de conexao fica */
  .app-operacao > .topo .btn-modo kbd{display:none}
}
/* 1.35: no celular a linha do item vira grade — quantidade, nome e total em cima,
   os botões embaixo em largura inteira (antes o nome era espremido pelos botões) */
@media (max-width:560px){
  .tabela.itens tbody tr{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"q item total" "acoes acoes acoes";align-items:start;column-gap:8px;border-bottom:1px solid var(--borda);padding:6px 0}
  .tabela.itens tbody td{border:0;padding:2px 4px}
  .tabela.itens tbody td:nth-child(2){grid-area:q}
  .tabela.itens tbody td:nth-child(3){grid-area:item;min-width:0;overflow-wrap:anywhere}
  .tabela.itens tbody td:nth-child(5){grid-area:total}
  .tabela.itens tbody td:nth-child(6){grid-area:acoes;display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
  .tabela.itens tbody td:nth-child(6) .btn{min-height:44px;min-width:44px}
}

/* 1.39: com overflow, `center` escondia o comeco das abas (a aba Salao sumia no
   celular e nao dava para rolar ate ela). Quem rola comeca do inicio. */
@media (max-width:1100px){ .app-operacao > .topo .abas-op{justify-content:flex-start} }
/* 1.39: no tablet a lista de pagamentos ficava com altura 0 e Dividir/Voltar
   cobriam o teclado: as colunas nao encolhem, a lista tem altura, a coluna rola */
@media (max-width:1279px){
  .pag-dir{display:flex;flex-direction:column;overflow-y:auto}
  .pag-dir > *{flex:none}
  .pag-col{flex:none}
  .pag-lista{min-height:96px}
  .pag-acoes{margin-top:0}
}
/* 1.39: o campo que o servidor recusou fica marcado */
.grupo-campo.erro .campo{border-color:var(--erro);box-shadow:0 0 0 2px var(--erro-fundo)}
.grupo-campo.erro .rotulo{color:var(--erro)}
/* 1.39: "Devolver"/"Pago a mais" legivel nos dois temas */
.pag-falta.devolver b,.pag-falta.devolver span{color:var(--aviso-texto)}

/* 1.43: no tablet o Finalizar fica SEMPRE a vista (preso embaixo da coluna que rola);
   a lista nao rola por dentro da coluna que ja rola */
/* o .pag-rola so e caixa no tablet; no computador as colunas seguem na grade da .pag-dir */
.pag-rola{display:contents}
@media (max-width:1279px){
  .pag-dir{display:flex;flex-direction:column;overflow:hidden}
  .pag-rola{display:flex;flex-direction:column;gap:var(--e-2);flex:1;min-height:0;overflow-y:auto}
  .pag-acoes{flex:none;padding-top:8px;border-top:1px solid var(--borda)}
  .pag-lista{max-height:none;overflow:visible}
}
/* 1.43: no celular as quatro abas cabem: so icone e contador, e o topo solta o que nao serve ao toque */
@media (max-width:560px){
  .app-operacao > .topo .abas-op .aba{padding:0 10px;min-width:44px;justify-content:center}
  .app-operacao > .topo .abas-op .aba .rot,.app-operacao > .topo .abas-op .aba kbd{display:none}
  .app-operacao > .topo [data-acao="mapa"]{display:none}
  .app-operacao > .topo .btn-modo{font-size:0;gap:0;padding:0 10px}
  .app-operacao > .topo .btn-modo .ico{font-size:initial}
}
/* 1.43: atalho de tecla nas formas nao serve ao toque (e cortava na borda) */
@media (pointer:coarse){ .pag-formas .forma kbd{display:none} }
/* 1.43: o numero que decide legivel no tema claro */
.pag-falta b,.conta-rodape .tot.total b,.pag-formas .forma.ativa,.app-operacao > .topo .abas-op .aba.ativa{color:var(--gold-texto)}

/* 1.46: o gesto do "Pago a mais" se le (antes: 12,8 px cinza) */
.pag-falta small.gesto{font-size:var(--fs-3);font-weight:600;color:var(--aviso-texto);line-height:1.3}
/* 1.46: texto verde e dourado com token de TEXTO (legivel no claro) */
.pag-linha b{color:var(--gold-texto)}
.pag-lista-topo b,.pag-falta.zerado b{color:var(--ok-texto)}
/* 1.46: tamanho do dedo: o x que tira pagamento, o teclado e os botoes do pagamento */
.pag-linha .btn.icone{min-width:48px;min-height:48px}
.pag-valor .teclado-num .btn{min-height:var(--toque-grande)}
.pag-acoes .btn{min-height:var(--toque)}
.modal .rodape .btn{min-height:var(--toque)}
/* 1.46: no celular as quatro abas cabem de verdade (eram 154 px para 188): o tema sai do topo
   (continua no menu da Gestao) e as folgas encolhem */
@media (max-width:560px){
  .app-operacao > .topo{gap:8px;padding:0 8px 0 12px}
  .app-operacao > .topo [data-acao="tema"]{display:none}
  .app-operacao > .topo .abas-op{gap:2px}
  .app-operacao > .topo .abas-op .aba{min-width:48px;max-width:48px;min-height:48px;padding:0;gap:0;position:relative}
  /* o contador vira selo sobre o icone: a aba nao alarga quando chega pedido */
  .app-operacao > .topo .abas-op .aba .cont{position:absolute;top:3px;right:2px;min-width:16px;height:16px;padding:0 4px;font-size:.6rem}
}
@media (max-width:400px){
  .app-operacao > .topo{padding:0 6px 0 8px}
  /* 1.61: com os icones de toque em 48 px, a marca sai do topo no celular estreito (continua no login e na Gestao) */
  .app-operacao > .topo .mv{display:none}
}
/* 1.46: no "Pago a mais" nao ha o que cobrar: sai o campo e o teclado, a lista com o x sobe */
.pag-dir.pag-refazer .pag-valor{display:none}
/* 1.49: no "Pago a mais" as formas tambem saem (no celular o x ficava fora da vista) */
.pag-dir.pag-refazer .pag-formas{display:none}
/* ...e o total pago nao fica verde (a cor de "tudo certo") quando sobra */
.pag-dir.pag-refazer .pag-lista-topo b{color:var(--aviso-texto)}
/* 1.49/1.52: verde, ambar e vermelho como TEXTO usam o token de texto (o de fundo dava ~2:1 no claro) */
.ok-txt{color:var(--ok-texto)}
/* 1.49: forma de nome longo quebra a linha em vez de cortar na borda (360 px) */
.pag-formas .forma{min-width:0;white-space:normal;text-align:left;line-height:1.2}
/* 1.55: no "Pago a mais" os botoes que nao fazem nada saem junto com as teclas deles */
.pag-dir.pag-refazer .pag-acoes [data-acao="dividir"],.pag-dir.pag-refazer .pag-acoes [data-acao="parcelas"]{display:none}
/* 1.61: em tela de toque os icones do topo (tema, mapa, sair) tem o tamanho do dedo */
@media (pointer:coarse){ .app-operacao > .topo .btn.icone, .app-operacao > .topo [data-acao="sair"], .app-operacao > .topo [data-acao="mapa"], .app-operacao > .topo [data-acao="tema"]{min-width:48px;min-height:48px} }
/* 1.63: no toque, o botao Gestao e as abas tambem tem o tamanho do dedo; e tecla de atalho nao aparece */
@media (pointer:coarse){
  .app-operacao > .topo .btn-modo{min-width:48px;min-height:48px}
  .app-operacao > .topo .abas-op .aba{min-height:48px}
  .app-operacao > .topo kbd,.pag-acoes kbd,.modal .rodape kbd,.area > .topo kbd{display:none}
  .area > .topo [data-acao="tema"],.area > .topo .btn-menu{min-width:48px;min-height:48px}
}
/* 1.63: no celular estreito, Voltar e "O que fazer" dividem a linha; e os botoes de perigo da janela nao encostam */
@media (max-width:400px){
  .pag-acoes .btn{flex:1 1 0;justify-content:center}
  .modal > .rodape{gap:var(--e-4)}
}
/* 1.66: o anel de foco tambem nas abas e nos filtros (ficava o contorno padrao do navegador) */
.abas-op .aba:focus-visible,.chip.clic:focus-visible{outline:none;box-shadow:var(--foco)}
/* 1.66: dicas de tecla que ainda apareciam no toque; e as janelas com campos e botoes do tamanho do dedo */
@media (pointer:coarse){
  .chip kbd,.abrir-caixa kbd{display:none}
  .modal .campo,.modal .btn{min-height:48px}
}
/* 1.66: na Operacao o "Gestao" deixa o dourado cheio para a aba ativa (dourado so na acao principal) */
.app-operacao > .topo .btn-modo{background:transparent;color:var(--texto);border-color:var(--borda-forte, var(--borda))}
.app-operacao > .topo .btn-modo:hover{background:var(--cartao-hover);border-color:var(--gold-dark)}
/* 2.1: selo de conexao (ponto + palavra + cor) e a faixa quando o servidor cai */
.selo-conexao{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-1);font-weight:600;white-space:nowrap}
.selo-conexao::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.selo-conexao.ok{color:var(--ok-texto)}
.selo-conexao.caido{color:var(--erro-texto)}
.selo-conexao.aviso{color:var(--aviso-texto)}
.faixa-conexao.aviso{background:var(--aviso-fundo);color:var(--aviso-texto);border-bottom-color:var(--aviso)}
.faixa-conexao{display:flex;align-items:center;gap:var(--e-3);padding:8px var(--e-4);background:var(--erro-fundo);color:var(--erro-texto);border-bottom:1px solid var(--erro);font-size:var(--fs-2)}
.faixa-conexao span{flex:1;min-width:0}
.faixa-conexao .btn{flex:none}
@media (max-width:560px){
  .selo-conexao{font-size:0;gap:0;min-width:12px;justify-content:center}
  .faixa-conexao{flex-wrap:wrap}
}
/* ===== G.1: as mesas no celular — tres por linha, o estado num icone, o resto no botao + ===== */
.mesa-icone,.salao-mais{display:none}
.mesa .t-curto,.mesa-livre{display:none}   /* K.35: so no app (abaixo); no computador o tempo longo e a ilustracao */
@media (max-width:560px){
  .app-operacao .salao-topo .abrir-caixa,.app-operacao .resumo-salao,.app-operacao .salao-grade .legenda{display:none}
  .app-operacao .filtros-salao{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .app-operacao .filtros-salao .chip{flex:none}
  .app-operacao .mesas{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .app-operacao .mesa{min-height:0;padding:6px 6px 8px;gap:2px}
  .app-operacao .mesa .mesa-ilustra{display:none}
  .app-operacao .mesa .mesa-num{font-size:1.5rem;line-height:1.1}
  .app-operacao .mesa .mesa-topo small{font-size:.8125rem;white-space:nowrap}   /* K.35: 13 px (era 10,6) */
  .app-operacao .mesa .mesa-base b{font-size:.8125rem}   /* K.35: 13 px (era 12,8) */
  .app-operacao .mesa .mesa-base small{display:none}
  .app-operacao .mesa-icone{display:flex;align-items:center;justify-content:center;min-height:22px;color:var(--mudo)}
  .app-operacao .mesa.estado-consumindo .mesa-icone{color:var(--aviso-texto)}
  .app-operacao .mesa.estado-bloqueada .mesa-icone{color:var(--erro-texto)}
  .app-operacao .mesa.estado-reservada .mesa-icone,.app-operacao .mesa.estado-anexada .mesa-icone{color:var(--info-texto)}
  .app-operacao .salao-mais{display:flex;align-items:center;justify-content:center;position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));
    width:56px;height:56px;border-radius:50%;background:var(--gold);color:#1a1408;border:none;box-shadow:var(--sombra);z-index:40}
  .app-operacao .salao-mais .ico{width:26px;height:26px}
  .app-operacao .salao{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}   /* folga: o + nao cobre a ultima fileira */
  /* o motivo do bloqueio / pedido do cliente entra no fluxo do cartao (cobria o valor) */
  .app-operacao .mesa .mesa-motivo{position:static;margin:4px -6px -8px;font-size:.62rem;border-radius:0 0 var(--r-3) var(--r-3)}
}
.menu-mais{display:flex;flex-direction:column;gap:8px}
.menu-mais .btn{justify-content:flex-start;min-height:52px}
.resumo-mesas{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.resumo-mesas div{display:flex;flex-direction:column;padding:8px 10px;border:1px solid var(--borda);border-radius:var(--r-2)}
.resumo-mesas .largo{grid-column:1 / -1}
.resumo-mesas b{font-size:1.3rem}
/* ===== G.2: lancar tocando no cardapio (celular e tablet) ===== */
.btn-cardapio,.fechar-cardapio{display:none}
@media (max-width:1000px){
  .btn-cardapio{display:flex;width:100%;justify-content:center;min-height:52px;margin-top:8px}
  .conta.cardapio-aberto .conta-dir{display:flex;position:fixed;inset:0;z-index:55;border:none;background:var(--bg)}
  .conta.cardapio-aberto .painel-grupos{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:10px 10px 4px}
  .conta.cardapio-aberto .painel-grupos .chip{flex:none;min-height:40px}
  .conta.cardapio-aberto .painel-produtos{grid-template-columns:repeat(2,minmax(0,1fr));padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .conta.cardapio-aberto .prod-card{min-height:120px}
  .conta.cardapio-aberto .fechar-cardapio{display:flex;position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:56;justify-content:center;min-height:52px}
}
.tela-item{display:flex;flex-direction:column;gap:12px}
.ti-cabeca{display:flex;gap:10px;align-items:center}
.ti-cabeca div{display:flex;flex-direction:column}
.ti-cabeca small{color:var(--gold-texto)}
.ti-qtd{display:flex;align-items:center;justify-content:center;gap:18px}
.ti-qtd .btn{min-width:56px;min-height:56px}
.ti-qtd b{font-size:2rem;min-width:48px;text-align:center}
.ti-adic{justify-content:flex-start;min-height:52px}
.ti-chips{display:flex;flex-wrap:wrap;gap:6px}
.ti-chips .chip{min-height:40px}
/* ===== G.3: a conta no celular — o ⋮ da mesa e dos itens, rodape fixo com o total, Gravar e sair e Pagar ===== */
.conta-menu,.item-menu,.acoes-total,.so-cel{display:none}
@media (max-width:560px){
  .conta-titulo{display:flex;align-items:center}
  .conta-menu{display:flex;margin-left:auto;min-width:48px;min-height:48px;align-items:center;justify-content:center}
  .conta-chips{display:none}
  .tabela.itens .acoes [data-editar],.tabela.itens .acoes [data-cancelar]{display:none}
  .tabela.itens .acoes .item-menu{display:inline-flex;min-width:44px;min-height:44px;align-items:center;justify-content:center}
  .conta-rodape{display:none}
  .conta-rodape.aberto{display:grid}
  .conta-esq{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
  .conta-acoes{position:fixed;left:0;right:0;bottom:0;z-index:45;flex-wrap:nowrap;align-items:center;gap:8px;
    padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));background:var(--cartao);border-top:1px solid var(--borda-forte);box-shadow:var(--sombra)}
  .conta-acoes > .btn{display:none}
  .conta-acoes > [data-acao="fechar"],.conta-acoes > [data-acao="emitir"],.conta-acoes > [data-acao="liberar-mesa"]{display:flex;min-height:52px;justify-content:center;flex:1}
  .conta-acoes .acoes-total{display:flex;flex-direction:column;align-items:flex-start;background:none;border:none;color:var(--texto);font:inherit;padding:0 4px;min-height:48px;justify-content:center;cursor:pointer}
  .conta-acoes .acoes-total small{color:var(--mudo);font-size:.72rem}
  .conta-acoes .acoes-total b{font-size:1.15rem;color:var(--gold-texto)}
  .conta-acoes kbd{display:none}
  .so-pc{display:none}
  .so-cel{display:inline}
}
.item-resumo{margin:0 0 10px}
.menu-mais .btn small{margin-left:auto;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ===== A.2: o mapa do celular em GRADE FIXA (o dono, 23/09): toda mesa do mesmo tamanho; o grupo e uma coluna
   com a altura das N mesas dele (as de dentro um pouco menores); as outras sobem e preenchem o vazio ao lado ===== */
.ilha-separar{display:none}
@media (max-width:560px){
  .app-operacao{--mesa-alt:88px}
  .app-operacao .mesas{grid-auto-rows:var(--mesa-alt);grid-auto-flow:row dense;align-items:stretch}
  .app-operacao .mesas > .mesa{height:auto;overflow:hidden}
  .app-operacao .ilha{grid-column:span 1 !important;grid-row:span var(--n,2);padding:4px;gap:3px;min-height:0;overflow:hidden}
  .app-operacao .ilha-topo{font-size:.7rem;gap:3px;padding:0 2px;min-height:18px;white-space:nowrap;overflow:hidden}
  .app-operacao .ilha-topo b{overflow:hidden;text-overflow:ellipsis}
  .app-operacao .ilha-topo .mudo{display:none}
  .app-operacao .ilha-topo .num{display:none}   /* o total do grupo cortava; cada mesa ja mostra o valor */
  .app-operacao .ilha-topo b{font-size:.8125rem}   /* K.35: 13 px (era 11,8) */
  .app-operacao .mesa .mesa-base b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .app-operacao .ilha-separar{display:inline-flex;min-width:24px;min-height:18px;padding:0}
  .app-operacao .ilha-separar .ico{width:14px;height:14px}
  .app-operacao .ilha-base{display:none}
  .app-operacao .ilha-mesas{display:grid;grid-auto-flow:row;grid-auto-rows:1fr;min-height:0}
  .app-operacao .ilha-mesas .mesa{min-height:0;padding:3px 6px;gap:0;overflow:hidden}
  .app-operacao .ilha-mesas .mesa .mesa-num{font-size:1.2rem}
  .app-operacao .ilha-mesas .mesa-icone{min-height:16px}
  /* E.6: a marca (a enviar / pedido do cliente / bloqueio) cortava na grade fixa (4 px visiveis): com ela, o icone do
     estado sai (a cor fica na borda de cima) e a marca encolhe para caber inteira no cartao */
  .app-operacao .mesa:has(.mesa-motivo){padding-bottom:0}
  .app-operacao .mesa:has(.mesa-motivo) .mesa-icone{display:none}
  .app-operacao .mesa .mesa-motivo{margin:auto -6px 0;flex:none;line-height:1.25}
  .app-operacao .mesa .mesa-pedido{font-size:.8125rem;padding:2px 6px;gap:4px}   /* K.35: 13 px (era 11,5) */
  .app-operacao .mesa .mesa-pedido .ico{width:14px;height:14px}
  /* K.35 (mesas legiveis): tempo curto, a mesa livre com icone + palavra, a marca curta, a corrente do grupo sai (a moldura diz
     "grupo") e a comanda so com o numero (o titulo da tela ja diz "Comandas") — tudo para o texto de operacao caber a 13 px */
  .app-operacao .mesa .t-longo{display:none}
  .app-operacao .mesa .t-curto{display:inline}
  .app-operacao .mesa .mesa-livre{display:flex;align-items:center;gap:4px;font-size:.8125rem;font-weight:600;line-height:1.2;color:var(--ok-texto)}
  .app-operacao .mesa .mesa-livre .ico{width:16px;height:16px}
  .app-operacao .ilha-topo > .ico:first-child{display:none}
  .app-operacao .mesa .marca-extra{display:none}
  .app-operacao .mesa .mesa-num .tipo-palavra{display:none}
  /* K.35: no GRUPO a mesa tem ~63 px; a marca a 13 px passava 2 px da borda (S74) — a letra fica, o respiro vertical afina */
  .app-operacao .ilha-mesas .mesa .mesa-pedido{padding-block:1px}
}
/* K.1a: o aviso "Abra o caixa para comecar" no alto do mapa (o mesmo componente do Caixa; o botao a direita) */
.salao-sem-caixa{align-items:center;margin-bottom:var(--e-3)}
.salao-sem-caixa > div{flex:1}
.salao-sem-caixa .btn{flex:none;min-height:44px}
@media (max-width:560px){.salao-sem-caixa{flex-wrap:wrap}.salao-sem-caixa .btn{width:100%}}
/* A.2: os tres pontinhos maiores e EM PE (⋮), como no app de referencia (o dono pediu) */
@media (max-width:560px){
  .conta-menu{min-width:52px;min-height:52px}
  .conta-menu .ico{width:30px;height:30px;transform:rotate(90deg)}
  .tabela.itens .acoes .item-menu{min-width:48px;min-height:48px}
  .tabela.itens .acoes .item-menu .ico{width:26px;height:26px;transform:rotate(90deg)}
  .tabela.itens .acoes .item-menu,.conta-menu{color:var(--texto)}
}

/* C.8: a mesa com pendencia da queda de internet (decide-se no computador da central) */
.mesa-pendencia{position:absolute;top:-7px;right:-7px;width:24px;height:24px;border-radius:50%;background:var(--erro);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--bg);z-index:1}
.mesa-pendencia .ico{width:15px;height:15px}
.pendencia{border-top:1px solid var(--borda);padding:12px 0}
.pend-tabela{width:100%;border-collapse:collapse;margin:6px 0 10px}
.pend-tabela th,.pend-tabela td{padding:5px 8px;text-align:left;border-bottom:1px solid var(--borda)}
.pend-tabela tr.diferente td{background:var(--aviso-fundo);color:var(--aviso-texto)}
.pend-tabela tr.diferente td:first-child{font-weight:600}
/* 3.3: linha de total zerada (desconto, couvert) discreta — continua clicavel */
.conta-rodape .tot.zerada{color:var(--mudo);font-size:var(--fs-2)}
.conta-rodape .tot.zerada b{font-weight:400}
/* 3.3: o display de senhas (a TV do saguao) sem as barras do sistema; segurar o canto de cima mostra a barra por 5 s */
.app-operacao.modo-display:not(.mostra-barra) > .topo, .app-operacao.modo-display:not(.mostra-barra) > .barra-teclas{display:none}
.disp-canto{position:fixed;right:0;bottom:0;width:64px;height:64px;z-index:5;touch-action:none}   /* embaixo a direita: os botoes Chamar e Tela cheia ficam nos cantos de cima */