/* ============================================================
   Fila Fácil — fila de espera para restaurantes
   ============================================================ */
/* Paleta preto e branco (a casa troca as cores na engrenagem: ⚙ -> Identidade).
   As cores aparecem só onde comunicam ESTADO: o semáforo do prazo (verde→vermelho),
   o roxo do preferencial, o âmbar da chamada e o vermelho dos erros. */
:root{
  --brand:#1A1A1A;        /* preto do logo — cabeçalho e botões principais */
  --brand-dark:#000000;
  --brand-soft:#EDEDEA;   /* cinza claro para faixas e selos */
  --teal:#3D3D3A;         /* segundo tom do degradê do painel */
  --accent:#E8A33D;       /* âmbar (chamando — alta visibilidade) */
  --accent-dark:#c9861f;
  --pref:#6B5BA8;         /* roxo discreto do preferencial */
  --pref-soft:#ECEAF4;
  --meso:#3F5C63;         /* cinza-petróleo das mesas grandes */
  --meso-soft:#E7EBEC;
  --bg:#F2F2F0;           /* fundo geral (papel) */
  --card:#ffffff;
  --ink:#1A1A1A;
  --muted:#6E6E68;
  --line:#DCDCD6;
  --danger:#B3261E;
  --ok:#1E7A52;
  --radius:16px;
  --shadow:0 6px 22px rgba(0,0,0,.08);
  --shadow-lg:0 18px 50px rgba(0,0,0,.28);
  font-size:16px;
}

*{box-sizing:border-box}
/* o atributo hidden precisa vencer os display:flex/grid das classes abaixo */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  -webkit-text-size-adjust:100%;
}
button{font-family:inherit}

#app{
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  max-width:1200px;
  margin:0 auto;
}

/* ---------------- TOPO ----------------
   O cabeçalho é moldura, não conteúdo: no tablet do salão ele chegava a
   comer 13% da altura da tela, espaço que faz falta para o mapa e para a
   fila. Aqui ele é enxuto — no TOTEM, mais abaixo, volta ao tamanho grande,
   porque lá a tela é lida de longe pelo salão inteiro. */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;
  padding:6px 12px;
  background:var(--brand);
  color:#fff;
  position:sticky;top:0;z-index:20;
  padding-top:calc(6px + env(safe-area-inset-top));
}
.brand{display:flex;align-items:center;gap:9px;min-width:0}
/* o logo entra em branco (arte vazada) direto sobre o preto do cabeçalho */
.brand-logo{width:36px;height:36px;object-fit:contain;display:block}
.brand-txt{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.brand-txt strong{font-size:1rem}
.brand-sub{font-size:.72rem;opacity:.8}

.topbar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}

.badge{font-size:.72rem;padding:4px 9px;border-radius:999px;font-weight:600;white-space:nowrap}
.badge-local{background:#e8edf2;color:#5a6472}
.badge-online{background:#d6f5e3;color:#166b3f}
.badge-off{background:#ffd9d4;color:#8a2418}

.topbar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.pill-btn{border:0;border-radius:999px;padding:6px 12px;font-weight:700;font-size:.85rem;cursor:pointer;background:rgba(255,255,255,.16);color:#fff;white-space:nowrap}
.pill-btn:hover{background:rgba(255,255,255,.28)}
.pill-btn.is-closed{background:#ffd9d4;color:#8a2418}
.icon-btn-h{width:34px;height:34px;border:0;background:rgba(255,255,255,.16);color:#fff;border-radius:10px;font-size:1.1rem;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center}
.icon-btn-h:hover{background:rgba(255,255,255,.28)}
/* contador de fila no cabeçalho (perfil atendente) */
.fila-topo{
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  background:rgba(255,255,255,.16);color:#fff;border-radius:999px;
  padding:5px 11px;font-weight:700;font-size:.85rem;white-space:nowrap;
}
.fila-topo b{font-size:.98rem;line-height:1}
.fila-topo .ft-grupos{opacity:.8;font-weight:600}
/* lugares ocupados: mesma tarja, separado por um risco fino — de um lado
   quem espera, do outro o quanto da casa já está em uso */
.fila-topo .ft-lugares{
  display:inline-flex;align-items:center;gap:0;font-weight:600;
  margin-left:8px;padding-left:10px;border-left:1px solid rgba(255,255,255,.35);
}
.viewswitch{display:flex;background:rgba(255,255,255,.16);border-radius:999px;padding:2px}
.vs-btn{
  border:0;background:transparent;color:#fff;opacity:.85;
  padding:5px 12px;border-radius:999px;font-weight:600;font-size:.85rem;cursor:pointer;
}
.vs-btn.is-active{background:#fff;color:var(--brand);opacity:1}

/* ---- No TOTEM o cabeçalho volta a ser grande ----
   Aquela tela é lida de longe pelo salão: ali o nome da casa e o logo têm
   função. Nas telas da equipe, que são de trabalho de perto, o cabeçalho
   fica enxuto para sobrar altura ao mapa e à fila. */
#app[data-view="totem"] .topbar{padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top));gap:12px}
#app[data-view="totem"] .brand-logo{width:52px;height:52px}
#app[data-view="totem"] .brand-txt strong{font-size:1.15rem}
#app[data-view="totem"] .brand-sub{font-size:.78rem}

/* ---------------- BOTÕES ---------------- */
.btn{
  border:0;border-radius:12px;padding:11px 16px;font-size:1rem;font-weight:600;
  cursor:pointer;transition:transform .05s ease, filter .15s ease, background .15s;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{filter:brightness(1.06)}
.btn-accent{background:var(--accent);color:#3a2c00}
.btn-accent:hover{filter:brightness(1.05)}
.btn-ghost{background:rgba(255,255,255,.16);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.26)}
/* variação para usar dentro dos pop-ups (fundo branco) */
.btn-neutral{background:#EDEDEA;color:#41413C}
.btn-neutral:hover{background:#E1E1DC}
.btn-big{padding:15px 20px;font-size:1.1rem;width:100%}
.btn-link{background:none;color:var(--brand);text-decoration:underline;padding:6px}
.btn-danger{background:#fdecea;color:var(--danger)}
.btn-danger:hover{background:#fbdcd8}
.btn-sm{padding:8px 12px;font-size:.85rem;border-radius:10px}
.btn-wa{background:#25D366;color:#053b1e;text-decoration:none}
.btn-wa:hover{filter:brightness(1.06)}
.btn-link-inline{
  background:none;border:0;padding:0;margin:0;color:var(--brand);
  text-decoration:underline;font:inherit;font-size:inherit;cursor:pointer;
}

/* ---------------- CONTEÚDO ---------------- */
.content{padding:16px 16px 104px;display:flex;flex-direction:column;gap:16px;flex:1}

.card{
  background:var(--card);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px;border:1px solid var(--line);
}
.card-title{margin:0 0 14px;font-size:1.15rem;color:var(--brand-dark)}

/* ---------------- BOAS-VINDAS / AVISOS ---------------- */
.welcome{background:var(--brand-soft);color:var(--brand-dark);border-radius:var(--radius);padding:14px 18px;font-size:1.2rem;font-weight:700;text-align:center}
.closed-banner{background:#fdecea;color:#8a2418;border:1.5px solid #f0b7ae;border-radius:var(--radius);padding:13px 18px;font-weight:700;text-align:center}

/* ---------------- PAINEL CHAMANDO ---------------- */
.call-panel{
  background:linear-gradient(135deg,var(--brand),var(--teal));
  border-radius:var(--radius);padding:18px;color:#fff;box-shadow:var(--shadow);
  min-height:96px;display:flex;align-items:center;
}
.call-empty{width:100%;text-align:center;opacity:.75;font-size:1.05rem;padding:14px 0}
.call-list{display:flex;flex-wrap:wrap;gap:14px;width:100%}
.call-item{
  background:hsl(120,75%,44%);color:#fff;border-radius:14px;
  padding:14px 20px;flex:1 1 220px;box-shadow:0 6px 18px rgba(0,0,0,.18);
  display:flex;flex-direction:column;gap:2px;animation:pop .35s ease;position:relative;
  text-shadow:0 1px 2px rgba(0,0,0,.28);transition:background .8s linear;
}
.call-item .ci-label{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:rgba(255,255,255,.92)}
.call-item .ci-name{font-size:clamp(1.6rem,5vw,2.4rem);font-weight:800;line-height:1.05}
.call-item .ci-meta{font-size:.95rem;font-weight:600}
.call-item .ci-chips{font-size:.9rem;font-weight:700;margin-top:4px;background:rgba(0,0,0,.18);border-radius:999px;padding:3px 10px;align-self:flex-start}
.call-item.pref{border-left:7px solid var(--pref)}
.call-item .ci-x{
  position:absolute;top:8px;right:8px;width:30px;height:30px;border:0;color:inherit;cursor:pointer;
  background:rgba(0,0,0,.16);border-radius:50%;font-size:.95rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.call-item .ci-x:hover{background:rgba(0,0,0,.30)}
/* alvos de toque de 44px: a atendente usa o celular com uma mão só */
.ci-actions{display:flex;gap:12px;margin-top:12px;flex-wrap:wrap}
.ci-actions .btn{flex:1 1 auto;min-height:44px;padding:9px 12px;text-shadow:none}
.ci-actions .ci-wa{background:#25D366;color:#053b1e;text-decoration:none}
.ci-actions .ci-wa:hover{filter:brightness(1.06)}
.ci-actions .ci-ok{background:#fff;color:#12603f}
.ci-actions .ci-back{background:rgba(0,0,0,.18);color:inherit}
.ci-actions .ci-back:hover{background:rgba(0,0,0,.30)}
/* "Fim da fila" faz o cliente perder a vez: linha própria, longe do "Sentou" */
.ci-actions .ci-end{flex:1 0 100%;margin-top:2px;background:rgba(122,18,7,.42);color:inherit}
.ci-actions .ci-end:hover{background:rgba(122,18,7,.60)}
.call-item.expirado{box-shadow:0 0 0 3px #e74c3c, 0 6px 18px rgba(0,0,0,.20)}
.call-item.expirado .ci-label::after{
  content:" PRAZO ESGOTADO";color:#fff;font-weight:800;
  background:rgba(0,0,0,.45);border-radius:999px;padding:1px 8px;margin-left:6px;
}
/* "Pedido pronto" no painel do salão: cor própria (laranja) para ninguém
   confundir com a chamada de mesa, que é verde. Não recebe o semáforo de
   tempo — o aviso vale por alguns minutos e sai sozinho. */
.call-item.pronto{background:linear-gradient(135deg,#e67e22,#d35400)}
/* Cartão da fila da fila no painel do alto: roxo, a cor da antessala. Não
   recebe o semáforo de tempo — ali ninguém perde a vez por demorar. */
.call-item.is-previa{background:linear-gradient(135deg,#6B5BA8,#4B3E7D)}
.call-item.pronto .ci-label{color:#fff}
.call-item.is-me{box-shadow:0 0 0 4px #fff, 0 6px 18px rgba(0,0,0,.25)}
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes blink{0%,100%{box-shadow:0 6px 18px rgba(0,0,0,.18)}50%{box-shadow:0 0 0 4px rgba(255,255,255,.6),0 6px 18px rgba(0,0,0,.18)}}
.call-item.fresh{animation:pop .35s ease, blink 1s ease 2}

/* ---------------- GRID ---------------- */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media (max-width:820px){ .grid{grid-template-columns:1fr} }

/* ---------------- FORMULÁRIO ---------------- */
/* O formulário precisa CABER na tela do balcão e do totem sem rolar. O que
   encurta de verdade é texto e respiro — não o tamanho dos campos: eles são
   tocados com o dedo e continuam do mesmo tamanho. */
.join-form{display:flex;flex-direction:column;gap:11px}
.join-form .field{gap:4px}
.join-form .tm-tamanhos{margin:0}
.join-form .check-row{padding:10px 12px;align-items:center}
.join-form .check-txt{gap:0;font-size:.95rem}
/* No balcão a atendente já sabe o que cada campo é — as explicações existem
   para o cliente sozinho no totem. Escondê-las aqui é o que faz o formulário
   caber na tela do computador sem rolar. O aviso de mesa grande fica: esse
   ela precisa ler. */
#app[data-view="staff"] .join-form .hint:not(#fMesoHint),
#app[data-view="filafila"] .join-form .hint:not(#fMesoHint){display:none}
/* o pop-up de entrar aproveita mais a tela que os outros: é o mais longo */
#formModal{padding:10px}
#formModal .modal-box{padding:18px;max-height:96vh}
/* Quando o formulário não couber na tela, o botão de entrar não some no fim
   da rolagem: fica colado no rodapé do pop-up, sempre à mão.
   A sombra branca por cima esconde o conteúdo que passa atrás dele. */
.join-form>.btn-big{position:sticky;bottom:-2px;z-index:1;box-shadow:0 -12px 16px 6px #fff}
.field{display:flex;flex-direction:column;gap:7px}
.field>span{font-weight:600;font-size:.95rem;color:var(--ink)}
.field input[type=text],.field input[type=tel]{
  border:1.5px solid var(--line);border-radius:12px;padding:14px;font-size:1.05rem;background:#FAFAF8;
}
.field input:focus{outline:none;border-color:var(--brand);background:#fff}
.hint{color:var(--muted);font-size:.82rem}
.req{color:var(--danger)}

.stepper{display:flex;align-items:center;gap:14px}
.step-btn{
  width:52px;height:52px;border-radius:14px;border:1.5px solid var(--line);
  background:#FAFAF8;font-size:1.6rem;font-weight:700;color:var(--brand);cursor:pointer;line-height:1;
}
.step-btn:active{background:var(--brand-soft)}
.step-val{font-size:1.8rem;font-weight:800;min-width:48px;text-align:center}

.segmented{display:flex;gap:10px}
.seg{flex:1;position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;inset:0;cursor:pointer}
.seg>span{
  display:block;text-align:center;padding:14px;border-radius:12px;border:1.5px solid var(--line);
  background:#FAFAF8;font-weight:700;color:var(--muted);transition:.15s;
}
.seg input:checked+span{border-color:var(--brand);background:var(--brand);color:#fff}
.seg-pref input:checked+span{border-color:var(--pref);background:var(--pref);color:#fff}

/* caixas de marcar (pet / termos) */
.check-row{
  display:flex;align-items:flex-start;gap:12px;cursor:pointer;
  border:1.5px solid var(--line);border-radius:12px;padding:13px 14px;background:#FAFAF8;
}
.check-row:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}
.check-row input[type=checkbox]{width:26px;height:26px;flex:0 0 auto;accent-color:var(--brand);margin:1px 0 0}
.check-txt{display:flex;flex-direction:column;gap:3px;font-size:.98rem}
.check-txt b{font-weight:700}
.check-txt small{color:var(--muted);font-size:.83rem;line-height:1.35}
.check-sm{padding:10px 12px}

.form-msg{margin:4px 0 0;font-size:.95rem;font-weight:600;min-height:1.2em}
.form-msg.ok{color:var(--ok)}
.form-msg.err{color:var(--danger)}

/* ---------------- FILA ---------------- */
.queue-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.queue-head .card-title{margin:0}
.queue-stats{display:flex;gap:8px;flex-wrap:wrap}
.stat{background:var(--brand-soft);color:var(--brand-dark);border-radius:999px;padding:5px 12px;font-size:.85rem;font-weight:600}
.stat-avg{background:#eef7f4;color:#0f7a5a}
.stat[hidden]{display:none}
.avg-reset{margin-left:7px;border:0;background:rgba(15,122,90,.16);color:#0f7a5a;width:22px;height:22px;border-radius:50%;cursor:pointer;font-size:.95rem;line-height:1;vertical-align:middle;padding:0}
.avg-reset:hover{background:rgba(15,122,90,.30)}

/* grupos: mesas grandes, fila preferencial e fila normal */
.queue-group{margin-top:18px}
.queue-group:first-of-type{margin-top:6px}
.queue-group[hidden]{display:none}
.qg-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-weight:800;font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;
  padding:0 2px 8px;margin-bottom:10px;border-bottom:2px solid var(--line);
}
.qg-head.qg-pref{color:#5b34c9;border-color:var(--pref)}
.qg-head.qg-norm{color:var(--brand-dark);border-color:var(--brand)}
.qg-head.qg-meso{color:var(--meso);border-color:var(--meso)}
.qg-count{background:var(--brand-soft);color:var(--brand-dark);border-radius:999px;padding:2px 11px;font-size:.9rem}
.qg-head.qg-pref .qg-count{background:var(--pref-soft);color:#5b34c9}
.qg-head.qg-meso .qg-count{background:var(--meso-soft);color:var(--meso)}

.queue-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;counter-reset:pos}
.q-item{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border:1.5px solid var(--line);
  border-radius:14px;background:#FAFAF8;
}
.q-item.is-pref{border-color:var(--pref);background:var(--pref-soft)}
.q-item.is-called{border-color:var(--accent);background:#fff7e6}
.q-item.is-meso{border-width:2px}
.q-item.meso-urgente{box-shadow:0 0 0 2px rgba(231,76,60,.35)}
.q-item.is-meso-pub{border-color:var(--meso);background:var(--meso-soft)}
.q-item.is-me{outline:3px solid var(--brand);outline-offset:1px}
.q-pos{
  width:38px;height:38px;flex:0 0 auto;border-radius:10px;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.05rem;
}
.q-item.is-pref .q-pos{background:var(--pref)}
.q-item.is-meso-pub .q-pos{background:var(--meso)}
.q-main{flex:1;min-width:0}
.q-name{font-weight:700;font-size:1.05rem;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.q-tag{font-size:.7rem;font-weight:800;padding:2px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em}
.q-tag.pref{background:var(--pref);color:#fff}
.q-tag.called{background:var(--accent);color:#3a2c00}
.q-tag.perdeu{background:#e74c3c;color:#fff}
.q-tag.meso{background:var(--meso);color:#fff}
.q-tag.petx{background:#0f9d6c;color:#fff}
.q-tag.voce{background:var(--brand);color:#fff}
.q-item.is-perdeu{border-color:#e74c3c;background:#fdeceb}
.q-sub{color:var(--muted);font-size:.86rem;margin-top:2px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.q-time{font-variant-numeric:tabular-nums;font-weight:700;color:var(--brand-dark)}
.q-chip{background:#e8eef4;color:#41505f;border-radius:999px;padding:2px 9px;font-weight:700;font-size:.8rem}
.q-chip.chip-pet{background:#d9f5e9;color:#0b6b48}
.q-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.q-actions .btn{min-height:44px;padding:8px 14px}

.queue-empty{text-align:center;color:var(--muted);padding:14px 0;font-size:.95rem;font-style:italic}
.queue-empty[hidden]{display:none}

/* ---------------- BARRA ATENDENTE ---------------- */
.staff-bar{border:2px dashed var(--accent);background:#fffdf6}
.staff-install{margin-bottom:12px}
.staff-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.staff-head .card-title{margin:0}
.staff-head-actions{display:flex;align-items:center;gap:8px}
.icon-btn{width:42px;height:42px;border:1.5px solid var(--line);background:#fff;border-radius:12px;font-size:1.3rem;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center}
.icon-btn:hover{background:var(--brand-soft)}
.free-row{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap}
.free-field{flex:0 0 auto}
.free-row .btn-big{flex:1;min-width:220px;width:auto}

/* ---------------- BOTÃO FIXO INFERIOR ---------------- */
.add-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:15;
  display:flex;justify-content:center;
  padding:12px 16px calc(14px + env(safe-area-inset-bottom));
  background:var(--bg);box-shadow:0 -6px 16px rgba(0,0,0,.10);
}
.add-bar .btn{max-width:700px;width:100%}
/* a largura máxima vale para o conjunto, não para cada botão */
.add-bar{max-width:100%}

/* ---------------- MODAIS ---------------- */
.modal{position:fixed;inset:0;background:rgba(20,30,25,.55);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50}
.modal[hidden]{display:none}
.modal-box{position:relative;background:#fff;border-radius:18px;padding:22px;max-width:420px;width:100%;box-shadow:var(--shadow-lg);animation:pop .2s ease;max-height:92vh;overflow-y:auto}
.modal-box-lg{max-width:560px}
.modal-box-full{max-width:1150px}
.cfg-form{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.cfg-form select,.cfg-form textarea,.cfg-form input[type=number],.cfg-form input[type=text]{border:1.5px solid var(--line);border-radius:12px;padding:12px;font-size:1rem;background:#FAFAF8;font-family:inherit;width:100%}
.cfg-form select:focus,.cfg-form textarea:focus,.cfg-form input:focus{outline:none;border-color:var(--brand);background:#fff}
.cfg-form textarea{resize:vertical}
.cfg-sec{
  margin-top:10px;padding:8px 12px;border-radius:10px;background:var(--brand-soft);
  color:var(--brand-dark);font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;
}
.cfg-sec:first-child{margin-top:0}
/* cor da casa: o quadradinho do sistema, o código em texto e o "Padrão"
   na mesma linha — o dono escolhe do jeito que preferir */
.cfg-cor{display:flex;gap:10px;align-items:center}
.cfg-cor input[type=color]{width:52px;height:44px;flex:0 0 auto;padding:2px;border:1.5px solid var(--line);border-radius:12px;background:#FAFAF8;cursor:pointer}
.cfg-cor input[type=text]{flex:1 1 auto;text-transform:lowercase}
.cfg-cor .btn{flex:0 0 auto;padding:10px 12px}
.cfg-shortcuts{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 6px}
.cfg-shortcuts .btn{flex:1 1 auto}
.modal-box h3{margin:0 8px 8px 0;color:var(--brand-dark)}
.modal-x{
  position:absolute;top:10px;right:10px;width:40px;height:40px;border:0;cursor:pointer;
  background:#eef2f6;color:#55606c;border-radius:50%;font-size:1.6rem;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:.15s;z-index:2;
}
.modal-x:hover{background:#e0e6ec;color:var(--danger)}
.modal-x:active{transform:scale(.94)}
.modal-box p{margin:0 0 14px;color:var(--muted)}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.pin-input{width:100%;font-size:1.6rem;text-align:center;letter-spacing:.4em;padding:14px;border:1.5px solid var(--line);border-radius:12px}
.call-confirm{font-size:1.05rem}
.call-confirm .cc-name{font-size:1.6rem;font-weight:800;color:var(--brand-dark)}
.call-confirm .cc-meta{color:var(--muted);margin-top:4px}
.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.two-cols .field input{padding:12px}
.two-cols .field[hidden]{display:none}

/* ---------------- REGRAS / TERMOS ---------------- */
.termos-txt{
  max-height:50vh;overflow-y:auto;border:1.5px solid var(--line);border-radius:12px;
  padding:14px 16px;background:#FAFAF8;font-size:.94rem;line-height:1.55;color:var(--ink);
}
.termos-txt p{margin:0 0 12px;color:var(--ink)}
.termos-txt p:last-child{margin-bottom:0}

/* ---------------- ENTROU NA FILA (posição + QR) ---------------- */
.joined-box{display:flex;flex-direction:column;gap:16px}
.joined-pos{
  background:linear-gradient(135deg,var(--brand),var(--teal));color:#fff;border-radius:14px;
  padding:16px;text-align:center;display:flex;flex-direction:column;gap:2px;
}
.jp-label{font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;opacity:.85;font-weight:700}
.jp-num{font-size:3rem;font-weight:800;line-height:1}
.jp-sub{font-size:.92rem;opacity:.92;font-weight:600}
.joined-qr{text-align:center}
.joined-hint{margin:0 0 10px !important;font-size:.92rem}
.qr-box{width:215px;margin:0 auto;background:#fff;padding:6px;border-radius:12px;border:1.5px solid var(--line)}
.qr-box-lg{width:260px}
.qr-box svg{width:100%;height:auto;display:block}
.qr-fail{font-size:.75rem;word-break:break-all;color:var(--muted);margin:0 !important}
.joined-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.public-url{font-size:.8rem;word-break:break-all;text-align:center;color:var(--muted) !important;margin-top:10px !important}

/* ---------------- RELATÓRIO ---------------- */
.rel-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.rel-filter{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:.9rem}
.rel-filter select{border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;font-size:1rem;background:#FAFAF8;font-family:inherit}
.rel-actions{display:flex;gap:8px;flex-wrap:wrap}
.rel-cards{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.rel-card{
  background:var(--brand-soft);border-radius:12px;padding:10px 14px;min-width:110px;flex:1 1 110px;
  display:flex;flex-direction:column;gap:2px;
}
.rel-card b{font-size:1.35rem;color:var(--brand-dark);line-height:1.1}
.rel-card span{font-size:.76rem;color:var(--muted);font-weight:600}
.rel-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;max-height:52vh;overflow-y:auto}
.rel-table{border-collapse:collapse;width:100%;font-size:.85rem;white-space:nowrap}
.rel-table th{
  background:var(--brand-soft);color:var(--brand-dark);text-align:left;padding:10px 12px;
  position:sticky;top:0;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;z-index:1;
}
.rel-table td{padding:9px 12px;border-top:1px solid var(--line)}
.rel-table tbody tr:nth-child(even){background:#f7fafd}

/* ---------------- PÁGINA PÚBLICA (cliente) ---------------- */
.live-dot{font-size:.78rem;font-weight:700;background:rgba(255,255,255,.18);border-radius:999px;padding:5px 11px}
.live-dot.off{background:#ffd9d4;color:#8a2418}
.me-card{
  background:linear-gradient(135deg,var(--brand),var(--teal));color:#fff;border-radius:var(--radius);
  padding:20px;text-align:center;box-shadow:var(--shadow);
}
.me-card.me-chamado{background:linear-gradient(135deg,#0f9d6c,#14B8A6);animation:blink 1.2s ease 3}
/* Faixa do "pedido pronto": vive no topo do cartão, sem tomar o lugar da
   posição na fila nem do "é a sua vez". Laranja, a mesma cor do painel. */
.me-pedido{
  background:linear-gradient(135deg,#e67e22,#d35400);border-radius:12px;
  padding:10px 12px;margin:0 0 14px;font-weight:800;font-size:1.02rem;line-height:1.3;
  box-shadow:0 3px 10px rgba(0,0,0,.18);
}
.me-pedido span{display:block;font-weight:600;font-size:.8rem;opacity:.92;margin-top:2px}
.me-label{font-size:.9rem;text-transform:uppercase;letter-spacing:.06em;opacity:.9;font-weight:700}
.me-big{font-size:clamp(2rem,9vw,3.2rem);font-weight:800;line-height:1.05;margin:2px 0}
.me-sub{font-size:1rem;opacity:.95;font-weight:600}
.me-note{font-size:.82rem;font-weight:600;line-height:1.45;opacity:.95;margin-top:10px;
  background:rgba(255,255,255,.16);border-radius:10px;padding:8px 10px}
.pub-note{color:var(--muted);font-size:.82rem;margin:14px 0 0;text-align:center;line-height:1.5}
.pub-footer{padding:0 16px calc(20px + env(safe-area-inset-bottom));text-align:center;color:var(--muted);font-size:.78rem}
#app[data-view="publico"] .content{padding-bottom:16px}

/* ---------------- VISIBILIDADE POR MODO ---------------- */
/* visibilidade por aba: totem, atendente (staff), garçom e página pública */
#app:not([data-view="staff"]) .staff-only{display:none !important}
#app:not([data-view="totem"]) .totem-only{display:none !important}
#app:not([data-view="garcom"]) .garcom-only{display:none !important}
/* o painel de mesas livres aparece para a atendente E para o garçom */
#app[data-view="totem"] .salao-only,
#app[data-view="publico"] .salao-only{display:none !important}
/* a tela do garçom é só o que ele precisa: lançar mesas e ver as que liberou */
#app[data-view="garcom"] .queue-card,
#app[data-view="garcom"] .call-panel,
#app[data-view="garcom"] .welcome,
#app[data-view="garcom"] .closed-banner{display:none !important}

/* A antessala mostra a lista dela e, no alto, o painel dos já avisados — que
   ali é a chamada DELA. A fila de espera e as mesas livres são de outra
   pessoa: aqui só atrapalhariam. */
#app[data-view="filafila"] .queue-card,
#app[data-view="filafila"] .welcome,
#app[data-view="filafila"] .mesas-card,
#app[data-view="filafila"] .closed-banner{display:none !important}

/* ---------------- ÁREA PET (mesa que aceita animais) ---------------- */
/* selo de quem pediu para NÃO sentar perto de animais */
.q-chip.chip-sempet{background:#fdeceb;color:#a02a1c}
.q-tag.sempet{background:#c0392b;color:#fff}

/* "Esta mesa aceita pet?" — ao lado da quantidade, na barra da atendente */
.segmented-sm{gap:8px}
.segmented-sm .seg>span{padding:10px 14px;font-size:.95rem;white-space:nowrap}
.seg-pet input:checked+span{border-color:#0f9d6c;background:#0f9d6c;color:#fff}

/* pop-up de chamada: mesa escolhida e aviso de incompatibilidade */
.call-confirm .cc-mesa{margin-top:8px;font-size:.9rem;font-weight:700;color:var(--brand-dark);
  background:var(--brand-soft);border-radius:10px;padding:7px 10px;display:inline-block}
.call-confirm .cc-alerta{margin-top:10px;font-size:.92rem;font-weight:700;color:#8a2418;
  background:#fdeceb;border:1.5px solid #f3c2bd;border-radius:10px;padding:9px 11px}

/* formulário: comanda e pager lado a lado (só na aba da atendente) */
#formExtras{margin-top:2px}

/* ---------------- BOTÕES DE EDITAR E "PEDIDO PRONTO" ---------------- */
/* na lista da fila */
.btn-edit{background:#EDEDEA;color:#41413C}
.btn-edit:hover{background:#E1E1DC}
.btn-pedido{background:#25D366;color:#053b1e;text-decoration:none}
.btn-pedido:hover{filter:brightness(1.06)}
.btn-pedido.is-feito{background:#E4EFE9;color:#2c6b4f}
/* no painel de chamada (fundo colorido do semáforo) */
.ci-actions .ci-edit{background:rgba(0,0,0,.18);color:inherit}
.ci-actions .ci-edit:hover{background:rgba(0,0,0,.30)}
.ci-actions .btn-pedido{text-shadow:none}

/* pop-up da página do cliente: 3 botões podem não caber numa linha no celular */
.modal-actions-wrap{flex-wrap:wrap}
.modal-actions-wrap .btn{flex:1 1 auto;min-height:44px;text-decoration:none}

/* uma opção de pet trava a outra (não dá para estar com pet e recusar a área pet) */
.check-row.is-travado{opacity:.42;cursor:not-allowed}
.check-row.is-travado input{cursor:not-allowed}

/* ---------------- MESAS LIVRES (garçom → atendente) ---------------- */
.mesas-card{border:2px dashed var(--meso);background:#fbfdfd}
.mesas-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.mesas-head .card-title{margin:0}
.mesas-count{display:inline-block;background:var(--meso);color:#fff;border-radius:999px;
  padding:1px 11px;font-size:.9rem;font-weight:800;vertical-align:middle;margin-left:4px}
.mesas-list{display:flex;flex-wrap:wrap;gap:12px}
.mesa-item{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border:1.5px solid var(--line);
  border-radius:14px;background:#fff;flex:1 1 240px;max-width:340px;transition:.15s;
}
#app[data-view="staff"] .mesa-item{cursor:pointer}
#app[data-view="staff"] .mesa-item:hover{border-color:var(--meso);background:var(--meso-soft)}
.mesa-item.is-sel{border-color:var(--meso);background:var(--meso-soft);box-shadow:0 0 0 3px rgba(63,92,99,.18)}
.mesa-item.is-pet .mesa-lug{background:#0f9d6c}
.mesa-lug{
  width:52px;height:52px;flex:0 0 auto;border-radius:12px;background:var(--meso);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;
  font-weight:800;font-size:1.4rem;
}
.mesa-lug small{font-size:.55rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;opacity:.85;margin-top:2px}
.mesa-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mesa-nome{font-size:1rem}
.mesa-tags{display:flex;gap:6px;flex-wrap:wrap}
.mesa-tag{font-size:.7rem;font-weight:800;padding:2px 8px;border-radius:999px;background:#e8eef4;color:#41505f;text-transform:uppercase;letter-spacing:.03em}
.mesa-tag.pet{background:#d9f5e9;color:#0b6b48}
.mesa-acoes{display:flex;gap:8px;align-items:center}
/* os dois botões do cartão têm o mesmo tamanho: ✓ verde e ✕ vermelho */
.mesa-acoes .btn{width:44px;height:44px;min-height:44px;padding:0;font-size:1.05rem;flex:0 0 auto}
.btn-usei{background:#1E7A52;color:#fff}
.btn-usei:hover{filter:brightness(1.12)}
.mesas-empty{color:var(--muted);padding:12px 0;font-size:.95rem;font-style:italic;text-align:center}

/* números da mesa no pop-up do garçom (com o "+" para juntar mesas) */
.num-row{display:flex;gap:10px;align-items:stretch}
.num-row input{flex:1;border:1.5px solid var(--line);border-radius:12px;padding:14px;font-size:1.05rem;background:#FAFAF8}
.num-row input:focus{outline:none;border-color:var(--brand);background:#fff}
.num-add{flex:0 0 auto;width:58px;font-size:1.6rem;font-weight:800;border-radius:12px;padding:0}
.num-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:4px}
.num-chip{display:inline-flex;align-items:center;gap:6px;background:var(--meso);color:#fff;
  border-radius:999px;padding:5px 6px 5px 13px;font-weight:800;font-size:.95rem}
.num-chip button{border:0;background:rgba(0,0,0,.22);color:#fff;width:22px;height:22px;border-radius:50%;
  cursor:pointer;font-size:.75rem;line-height:1;display:flex;align-items:center;justify-content:center}
.num-chip button:hover{background:rgba(0,0,0,.40)}
.num-mais{font-weight:800;color:var(--muted)}
.mesa-obs{color:var(--muted);font-size:.85rem;font-style:italic}
.q-chip.chip-mesa{background:var(--meso-soft);color:#2c4349}
.mesa-sem-num{color:var(--muted);font-weight:600;font-style:italic;font-size:.9rem}

/* ---------------- TELA DE LOGIN ---------------- */
.login-screen{
  position:fixed;inset:0;z-index:60;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;padding:24px;overflow-y:auto;
}
.login-screen[hidden]{display:none !important}
.login-box{
  background:var(--card);color:var(--ink);border-radius:20px;padding:28px 24px;
  width:100%;max-width:400px;box-shadow:var(--shadow-lg);text-align:center;
}
.login-logo{width:96px;height:96px;border-radius:18px;margin:0 auto 12px;display:block;border:1px solid var(--line)}
.login-tit{margin:0;font-size:1.5rem;color:var(--brand-dark)}
.login-sub{margin:2px 0 20px;color:var(--muted);font-size:.9rem}
.login-form{display:flex;flex-direction:column;gap:14px;text-align:left}
.login-form input{
  border:1.5px solid var(--line);border-radius:12px;padding:14px;font-size:1.05rem;
  background:#FAFAF8;width:100%;font-family:inherit;
}
.login-form input:focus{outline:none;border-color:var(--brand);background:#fff}
.login-form .form-msg{text-align:center;margin:0}
.login-totem{margin-top:22px;padding-top:18px;border-top:1.5px dashed var(--line)}
.login-totem p{margin:0 0 10px;color:var(--muted);font-size:.88rem}
.login-totem .btn{width:100%;min-height:48px}

/* ---------------- ADMINISTRADOR: cabeçalho completo em qualquer aba ---------------- */
/* Os botões do topo são "staff-only" e sumiriam nas abas Totem e Garçom.
   Para quem entrou como administrador eles continuam à mão.
   O :not([hidden]) preserva o que o próprio app decide esconder
   (por exemplo, o botão de abrir/fechar fila quando está desligado). */
#app[data-papel="adm"] .topbar-right .icon-btn-h.staff-only:not([hidden]){display:flex !important}
#app[data-papel="adm"] .topbar-right .pill-btn.staff-only:not([hidden]){display:inline-block !important}

/* ---------------- BUSCA NA FILA (aba da atendente) ---------------- */
.busca-bar{
  display:flex;align-items:center;gap:8px;margin:0 0 12px;
  border:1.5px solid var(--line);border-radius:12px;background:#FAFAF8;padding:0 12px;
}
.busca-bar:focus-within{border-color:var(--brand);background:#fff}
.busca-lupa{font-size:1.05rem;opacity:.65}
.busca-bar input{
  flex:1;border:0;background:transparent;padding:13px 0;font-size:1.02rem;
  font-family:inherit;color:var(--ink);min-width:0;
}
.busca-bar input:focus{outline:none}
.busca-bar input::-webkit-search-cancel-button{display:none}
.busca-x{
  border:0;background:#E3E3DE;color:#41413C;width:32px;height:32px;border-radius:50%;
  cursor:pointer;font-size:.9rem;line-height:1;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
}
.busca-x:hover{background:#D5D5CF}
.busca-info{margin:-6px 0 12px;font-size:.88rem;font-weight:600;color:var(--muted)}
.busca-info.vazio{color:var(--danger)}
.btn-qr{background:#E7EBEC;color:#2c4349}
.btn-qr:hover{background:#D9DFE1}
/* página do cliente: aviso de "peça o seu QR" e resumo sem nomes */
.sem-codigo p{margin:0 0 10px;line-height:1.55}
.sem-codigo p:last-child{margin-bottom:0}
.resumo-card{display:flex;flex-direction:column;gap:12px}
.resumo-card .queue-stats{justify-content:center}

/* ---- mesas livres dentro do pop-up "cliente sentou" ------------------
   A atendente toca na mesa em vez de decorar o número e digitar depois. */
#sentouMesasBox{margin:0 0 14px}
.sentou-mesas-tit{
  display:block;font-size:.85rem;font-weight:600;color:var(--muted);
  margin:0 0 8px;
}
.sentou-mesas{
  display:flex;flex-wrap:wrap;gap:8px;
  /* numa noite cheia a lista não pode empurrar os botões para fora da tela */
  max-height:210px;overflow-y:auto;
}
.sm-mesa{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  min-width:104px;padding:10px 12px;cursor:pointer;text-align:left;
  background:var(--card);color:var(--ink);
  border:2px solid var(--line);border-radius:12px;
  font-family:inherit;line-height:1.2;
}
.sm-mesa:hover{border-color:var(--ink)}
.sm-num{font-size:1.05rem;font-weight:700}
.sm-lug{font-size:.82rem;color:var(--muted)}
.sm-pet{font-size:.78rem;color:var(--meso);font-weight:600}
/* mesa menor que o grupo: continua clicável, mas avisa que aperta */
.sm-mesa.is-aperta{opacity:.55}
.sm-mesa.is-aperta .sm-lug{color:var(--danger)}
/* a que ela escolheu */
.sm-mesa.is-sel{
  border-color:var(--ink);background:var(--ink);color:#fff;
}
.sm-mesa.is-sel .sm-lug,.sm-mesa.is-sel .sm-pet{color:#fff}

/* ---- pop-up "Chamar próxima mesa" ------------------------------------
   A tela principal ficou só com o botão; o tamanho da mesa é escolhido aqui. */
.tm-tit{display:block;font-weight:600;font-size:.95rem;margin:0 0 10px;color:var(--ink)}
.tm-tamanhos{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px}
.tm-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-width:78px;padding:12px 10px;cursor:pointer;
  background:var(--card);color:var(--ink);
  border:2px solid var(--line);border-radius:14px;font-family:inherit;line-height:1.1;
}
.tm-btn:hover{border-color:var(--ink)}
.tm-btn b{font-size:1.5rem;font-weight:700}
.tm-btn span{font-size:.78rem;color:var(--muted)}
.tm-btn.is-sel{background:var(--ink);color:#fff;border-color:var(--ink)}
.tm-btn.is-sel span{color:#fff}
.tm-outro b{font-size:1.25rem}
.tm-manual{margin:0 0 16px}
/* o botão único da tela da atendente */
.btn-chamar-mesa{width:100%}

/* ---- filas lado a lado na tela da atendente --------------------------
   Configurável na engrenagem. No celular volta a empilhar sozinho. */
.queue-groups.is-colunas{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  align-items:start;
}
.queue-groups.is-colunas .queue-group{margin:0}
/* média de cada fila, no cabeçalho do grupo */
.qg-avg{
  margin-left:auto;margin-right:10px;
  font-size:.78rem;font-weight:600;opacity:.75;white-space:nowrap;
}

/* ---- MAPA DO SALÃO ---------------------------------------------------
   O piso é uma caixa de proporção fixa; cada mesa é posicionada em % dela,
   então a planta fica igual em qualquer tela. */
.mapa-piso{
  position:relative;width:100%;aspect-ratio:3/2;
  background:#FAFAF8;
  border:2px solid var(--line);border-radius:var(--radius);
  overflow:hidden;
  /* o dedo precisa poder rolar a página passando por cima do mapa; só quando
     o garçom SEGURA uma mesa é que o mapa toma conta do gesto */
  touch-action:pan-x pan-y;   /* o dedo arrasta o mapa nos dois sentidos */
}
.mapa-piso.is-edit{cursor:grab}
.mapa-vazio{
  text-align:center;color:var(--muted);font-size:.9rem;line-height:1.5;
  padding:14px 8px 2px;
}

/* uma mesa no piso */
.mm-mesa{
  position:absolute;transform:translate(-50%, -50%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  min-width:56px;min-height:52px;padding:6px 8px;cursor:pointer;
  border:2px solid;border-radius:12px;font-family:inherit;line-height:1.05;
  box-shadow:0 2px 6px rgba(0,0,0,.10);
}
.mm-num{font-size:1.05rem;font-weight:800}
.mm-lug{font-size:.72rem;opacity:.85}
.mm-timer{font-size:.7rem;font-weight:700;margin-top:2px;white-space:nowrap}
.mm-mesa.is-arrastando{opacity:.85;box-shadow:0 8px 20px rgba(0,0,0,.25);z-index:5}

/* cores dos estados */
.mm-mesa.is-livre   {background:#E3ECFB;border-color:#2563EB;color:#17408B}
.mm-mesa.is-avisada {background:#E4F3EA;border-color:#1E7A52;color:#125E40}
.mm-mesa.is-ocupada {background:#FBE3E1;border-color:#B3261E;color:#8C1D18}
.mm-mesa.is-limpar  {background:#FCF0D8;border-color:#C9861F;color:#7A5210}
.mm-mesa.is-pet     {box-shadow:0 2px 6px rgba(0,0,0,.10), inset 0 0 0 2px rgba(63,92,99,.35)}

/* legenda */
.mapa-legenda{display:flex;gap:10px;flex-wrap:wrap}
.ml{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
    padding:3px 8px;border-radius:999px;border:2px solid}
.ml.aguardando{background:#E3ECFB;border-color:#2563EB;color:#17408B}
.ml.liberada  {background:#E4F3EA;border-color:#1E7A52;color:#125E40}
.ml.ocupada{background:#FBE3E1;border-color:#B3261E;color:#8C1D18}
.ml.limpar {background:#FCF0D8;border-color:#C9861F;color:#7A5210}

/* pop-up de ações */
.mapa-acao-info{margin:0 0 14px;line-height:1.5}
.mapa-acoes{display:flex;flex-direction:column;gap:8px;margin:0 0 6px}
.mapa-acoes .btn{width:100%}
.btn-amarelo{background:#FCF0D8;border:2px solid #C9861F;color:#7A5210;font-weight:700}
.btn-amarelo:hover{background:#F7E4BD}

/* editor */
.modal-wide .modal-box{max-width:760px;width:min(760px, 94vw)}
.mapa-edit-barra{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}

/* mesas juntadas e alvo do arrasto */
.mm-mesa{min-width:74px}
.mm-num{font-size:.86rem;font-weight:800;white-space:nowrap}
.mm-junta{
  font-size:.68rem;font-weight:700;margin-top:1px;
  padding:1px 5px;border-radius:999px;background:rgba(0,0,0,.10);white-space:nowrap;
}
/* ---- Nome de um bloco de mesas juntadas ----
   "Mesa 1+2+3+4" é mais comprido que o desenho e escapava pela borda, porque
   o número nunca quebrava linha. No bloco ele pode quebrar (e encolher, quando
   são três ou mais mesas) — o desenho cresce um pouco em altura e o texto fica
   dentro dele. */
.mm-mesa.is-junta .mm-num{white-space:normal;word-break:break-word;text-align:center}
.mm-mesa.is-junta.num-longo .mm-num{font-size:.74rem;line-height:1.15}
.mm-mesa.is-junta.sem-tamanho{max-width:150px}
/* a mesa que vai receber a arrastada */
.mm-mesa.is-alvo{outline:3px dashed var(--ink);outline-offset:3px}

/* o botão de sair virou texto: o símbolo ⏻ não existe nas fontes do Android
   e aparecia como quadradinho */
.btn-sair{
  width:auto;padding:0 12px;font-size:.82rem;font-weight:700;
  letter-spacing:.02em;
}

/* mesas juntadas: anel azul em volta do bloco */
:root{ --junta:#2563EB; }
.mm-mesa.is-junta{
  border-style:solid;border-width:2px;
  outline:3px solid var(--junta);outline-offset:2px;
}
.mm-junta{background:var(--junta);color:#fff}
/* pressionou e segurou: a mesa avisa que já pode ser arrastada */
.mm-mesa.is-pronto{
  transform:translate(-50%, -50%) scale(1.08);
  box-shadow:0 8px 20px rgba(0,0,0,.28);z-index:6;
}
.mm-mesa.is-arrastando{opacity:.9}

/* mesa chamada, esperando o cliente sentar: fica na lista, mas em vermelho */
.mesa-item.is-reservada{
  border-color:#B3261E;background:#FBE3E1;opacity:.95;cursor:default;
}
.mesa-item.is-reservada .mesa-lug{color:#8C1D18}
.mesa-reserva{
  display:block;margin-top:4px;font-size:.78rem;font-weight:700;color:#8C1D18;
}

/* ---- ficha do cliente (abre ao tocar no cartão da fila) --------------- */
.q-item.is-toque{cursor:pointer}
.q-item.is-toque:hover{background:#FAFAF8}
.cli-selos{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.cli-dados{
  display:grid;grid-template-columns:auto 1fr;gap:6px 14px;
  margin:0 0 18px;font-size:.94rem;
}
.cli-dados dt{font-weight:700;color:var(--muted);white-space:nowrap}
.cli-dados dd{margin:0;color:var(--ink)}
.cli-acoes{display:flex;flex-wrap:wrap;gap:8px}
.cli-acoes .btn{flex:1 1 46%;justify-content:center}

/* mesa vinda do garçom: os dados vêm travados (a atendente não tem como
   conferir os lugares à distância; um toque errado mandaria o grupo errado) */
.tm-travado{
  display:flex;flex-direction:column;gap:2px;width:100%;
  padding:12px 14px;border:2px solid var(--ink);border-radius:14px;background:#F2F2F0;
}
.tm-travado-nome{font-size:1.05rem;font-weight:800}
.tm-travado-info{font-size:.86rem;color:var(--muted)}
.tm-destravar{
  align-self:flex-start;margin-top:6px;padding:0;border:0;background:none;
  color:var(--muted);font-family:inherit;font-size:.8rem;text-decoration:underline;cursor:pointer;
}
.tm-destravar:hover{color:var(--ink)}


/* enquanto uma mesa está sendo arrastada, o mapa segura o gesto */
.mapa-piso.is-pegando{touch-action:none}

/* barra de baixo com dois botões: metade para cada um, mesma altura de antes */
.add-bar{gap:10px}
.add-bar .btn{flex:1 1 0;min-width:0}
.add-bar .btn[hidden]{display:none}
/* celular estreito: os dois rótulos precisam caber numa linha só, senão a
   barra dobra de altura */
@media (max-width: 430px){
  .add-bar{gap:8px}
  .add-bar .btn{font-size:.9rem;padding-left:8px;padding-right:8px;white-space:nowrap}
}

/* cartão enxuto da mesa livre (atendente): um toque chama, segurar abre as ações */
.mesa-item.is-enxuta{cursor:pointer}
.mesa-item.is-enxuta .mesa-info{gap:2px}
.mesa-item.is-pronto{transform:scale(1.03);box-shadow:0 8px 20px rgba(0,0,0,.20)}

/* botões de estado no pop-up da mesa do mapa */
.btn-verde{background:#E4F3EA;border:2px solid #1E7A52;color:#125E40;font-weight:700}
.btn-verde:hover{background:#D3EBDD}
.btn-vermelho{background:#FBE3E1;border:2px solid #B3261E;color:#8C1D18;font-weight:700}
.btn-vermelho:hover{background:#F6D2CF}
/* o estado em que a mesa já está fica marcado */
.mapa-acoes .btn.is-atual{
  outline:3px solid var(--ink);outline-offset:2px;
}

/* botão "aguardando" no pop-up da mesa */
.btn-azul{background:#E3ECFB;border:2px solid #2563EB;color:#17408B;font-weight:700}
.btn-azul:hover{background:#D3E1F8}
/* mesas juntadas: o anel fica FORA do cartão, para não se confundir com o
   azul de "aguardando", que é o preenchimento */
.mm-mesa.is-junta{outline-offset:4px}
/* o botão pequeno de "mover para aguardando" nos cartões de mesa */
.btn-sm.btn-azul{padding:0;width:34px;height:34px;display:flex;align-items:center;justify-content:center}

/* ---- pressionar e segurar não pode virar "selecionar texto" -------------
   No Android, segurar sobre um texto abre a alça de seleção e o menu de
   copiar — bem no meio do gesto de arrastar a mesa. Aqui o toque é comando,
   nunca leitura de texto. */
.mapa-piso, .mapa-piso *,
.mm-mesa, .mm-mesa *,
.mesa-item, .mesa-item *,
.q-item.is-toque, .q-item.is-toque *{
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;      /* iOS: sem o balãozinho de copiar */
  -webkit-tap-highlight-color:transparent;
}
/* botão de liberar todas, acima do mapa */
/* botão discreto: é uma ação de abertura de turno, não o comando do dia */
.mapa-card{display:flex;flex-direction:column}
.btn-liberar-todas{
  width:auto;margin:0 0 12px;align-self:flex-start;
  padding:8px 14px;font-size:.9rem;font-weight:700;
}

/* ======================================================================
   TOTEM EM TELA GRANDE (40")
   O totem é lido de pé, a metros de distância. Tudo o que o cliente
   precisa enxergar tem o dobro do tamanho da tela da equipe.
   ====================================================================== */
#app[data-view="totem"] .welcome{
  font-size:2.4rem;padding:26px 28px;text-align:center;line-height:1.25;
}
#app[data-view="totem"] .card-title{font-size:2.3rem;margin-bottom:20px}
#app[data-view="totem"] .stat{font-size:1.7rem;padding:9px 20px}
#app[data-view="totem"] .queue-stats{gap:14px}
#app[data-view="totem"] .qg-head{font-size:1.64rem;padding-bottom:12px;margin-bottom:16px}
#app[data-view="totem"] .qg-count{font-size:1.5rem;padding:4px 14px}
#app[data-view="totem"] .q-pos{width:76px;height:76px;font-size:2.1rem;border-radius:16px}
#app[data-view="totem"] .q-name{font-size:2.1rem;gap:12px}
#app[data-view="totem"] .q-sub{font-size:1.72rem;gap:20px;margin-top:6px}
#app[data-view="totem"] .q-tag{font-size:1.4rem;padding:4px 14px}
#app[data-view="totem"] .q-chip{font-size:1.6rem;padding:4px 16px}
#app[data-view="totem"] .q-item{padding:18px 16px;gap:16px}
#app[data-view="totem"] .queue-empty{font-size:1.7rem;padding:26px 12px}
#app[data-view="totem"] .closed-banner{font-size:1.9rem;padding:22px 24px}
/* o botão de entrar é o alvo principal: dobro de tudo */
#app[data-view="totem"] .add-bar .btn{font-size:2.2rem;padding:30px 24px;border-radius:20px}
#app[data-view="totem"] .add-bar{padding:18px 20px calc(20px + env(safe-area-inset-bottom))}

/* em telas menores (tablet de balcão fazendo as vezes de totem) o dobro
   não cabe: volta a crescer proporcional ao espaço */
@media (max-width: 900px){
  #app[data-view="totem"] .welcome{font-size:1.5rem;padding:16px 18px}
  #app[data-view="totem"] .card-title{font-size:1.5rem}
  #app[data-view="totem"] .q-pos{width:52px;height:52px;font-size:1.4rem}
  #app[data-view="totem"] .q-name{font-size:1.4rem}
  #app[data-view="totem"] .q-sub{font-size:1.15rem}
  #app[data-view="totem"] .q-tag{font-size:.95rem}
  #app[data-view="totem"] .q-chip{font-size:1.05rem}
  #app[data-view="totem"] .qg-head{font-size:1.15rem}
  #app[data-view="totem"] .stat{font-size:1.1rem}
  #app[data-view="totem"] .add-bar .btn{font-size:1.5rem;padding:20px}
}
/* na tela do totem o botão pode ser mais largo: é o alvo do dedo à distância */
#app[data-view="totem"] .add-bar .btn{max-width:900px}
/* cabeçalho do totem: logo e nome também são lidos de longe */
#app[data-view="totem"] .topbar{padding:20px 28px;padding-top:calc(20px + env(safe-area-inset-top))}
#app[data-view="totem"] .brand{gap:20px}
#app[data-view="totem"] .brand-logo{width:104px;height:104px}
#app[data-view="totem"] .brand-txt strong{font-size:2.3rem}
#app[data-view="totem"] .brand-sub{font-size:1.55rem;opacity:.9}
@media (max-width: 900px){
  #app[data-view="totem"] .topbar{padding:14px 18px;padding-top:calc(14px + env(safe-area-inset-top))}
  #app[data-view="totem"] .brand{gap:12px}
  #app[data-view="totem"] .brand-logo{width:64px;height:64px}
  #app[data-view="totem"] .brand-txt strong{font-size:1.45rem}
  #app[data-view="totem"] .brand-sub{font-size:1rem}
}

/* ---- painel "Chamando" no totem: é o que o salão inteiro precisa ler ----
   Três vezes o tamanho da tela da equipe. */
#app[data-view="totem"] .call-panel{padding:34px;min-height:240px;border-radius:24px}
#app[data-view="totem"] .call-list{gap:26px}
#app[data-view="totem"] .call-item{padding:30px 40px;border-radius:26px;gap:6px;flex:1 1 480px}
#app[data-view="totem"] .call-item .ci-label{font-size:2.4rem}
#app[data-view="totem"] .call-item .ci-name{font-size:clamp(4rem, 11vw, 7rem);line-height:1.02}
#app[data-view="totem"] .call-item .ci-meta{font-size:2.6rem}
#app[data-view="totem"] .call-item .ci-chips{font-size:2.2rem;padding:6px 22px;margin-top:10px}
#app[data-view="totem"] .call-empty{font-size:2.6rem;padding:34px 0}

@media (max-width: 900px){
  #app[data-view="totem"] .call-panel{padding:18px;min-height:120px;border-radius:var(--radius)}
  #app[data-view="totem"] .call-item{padding:16px 22px;flex:1 1 220px}
  #app[data-view="totem"] .call-item .ci-label{font-size:1.2rem}
  #app[data-view="totem"] .call-item .ci-name{font-size:clamp(2rem, 8vw, 3rem)}
  #app[data-view="totem"] .call-item .ci-meta{font-size:1.3rem}
  #app[data-view="totem"] .call-item .ci-chips{font-size:1.15rem}
  #app[data-view="totem"] .call-empty{font-size:1.4rem}
}

/* ---- cartões de mesa livre: do tamanho do que têm dentro ---------------
   Antes cada cartão esticava para preencher a linha e, com o conteúdo
   enxuto (número e lugares), sobrava um vazio grande à direita. */
.mesa-item{
  flex:0 0 auto;          /* não estica */
  max-width:100%;
  padding:8px 12px;gap:10px;
}
.mesa-lug{width:46px;height:46px;font-size:1.25rem;border-radius:10px}
.mesa-lug small{font-size:.52rem}
.mesa-nome{font-size:.98rem;white-space:nowrap}
.mesa-acoes .btn{width:38px;height:38px;min-height:38px;font-size:1rem}
.mesas-list{gap:10px}
/* o cartão da mesa chamada tem uma linha a mais e pode ocupar a linha toda */
.mesa-item.is-reservada{flex:1 1 260px}
/* os dois botões de ação em lote do mapa, lado a lado */
.mapa-botoes{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.mapa-botoes .btn-liberar-todas{margin:0}
.cfg-versao{margin:14px 0 0;font-size:.78rem;color:var(--muted);text-align:right}

/* ======================================================================
   EDITOR DO MAPA EM TELA CHEIA
   Antes era um pop-up menor que a planta: o desenho saía deformado e o
   que se via ali não era o que o garçom veria depois.
   ====================================================================== */
/* o palco ocupa toda a altura que sobra */
.em-zoom{
  width:38px;height:44px;border:2px solid var(--line);background:#fff;color:var(--ink);
  border-radius:12px;font-size:1.2rem;font-weight:800;cursor:pointer;font-family:inherit;
}
.em-zoom:hover{border-color:var(--ink)}

/* botõezinhos de editar/excluir dentro da mesa, só no editor do mapa */
.mm-mesa.is-edit{cursor:grab}
.mm-tools{
  position:absolute;top:-12px;right:-10px;display:flex;gap:4px;z-index:3;
}
.mm-tool{
  width:26px;height:26px;padding:0;border:2px solid var(--line);border-radius:50%;
  background:#fff;font-size:.75rem;line-height:1;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.mm-tool:hover{border-color:var(--ink)}
.mm-tool-x{border-color:#B3261E}

/* ---- mapa: rolagem quando ampliado, e o modo de edição na própria tela ---- */
.mapa-rolagem{overflow:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.mapa-rolagem .mapa-piso{min-width:100%}
.mapa-zoom{display:inline-flex;gap:6px;margin-left:auto}
.em-zoom{
  width:38px;height:38px;border:2px solid var(--line);background:#fff;color:var(--ink);
  border-radius:12px;font-size:1.1rem;font-weight:800;cursor:pointer;font-family:inherit;
}
.em-zoom:hover{border-color:var(--ink)}
/* no modo de edição a planta ganha um contorno, para ficar claro o estado */
.mapa-card.is-editando .mapa-piso{outline:3px solid var(--ink);outline-offset:2px}
/* na aba do Mapa só o mapa aparece: a fila e a barra de baixo saem da frente */
#app[data-view="mapa"] #queueCard,
#app[data-view="mapa"] .add-bar,
#app[data-view="mapa"] #callPanel{display:none !important}
#app[data-view="mapa"] .mapa-card{margin-top:0}

/* aba do Mapa: a planta preenche a tela e não rola a página */
#app[data-view="mapa"]{overflow:hidden}
#app[data-view="mapa"] .content{padding-bottom:8px}
#app[data-view="mapa"] .mapa-card{margin-bottom:0}
#app[data-view="mapa"] .mapa-rolagem{max-height:none}
#app[data-view="mapa"] .mesas-head{margin-bottom:8px}

/* ---- fila resumida na aba do garçom ---------------------------------
   Ele não precisa de nome nem telefone: precisa do tamanho do grupo e de
   há quanto tempo espera, para saber que mesa liberar primeiro. */
.resumo-lista{display:flex;flex-wrap:wrap;gap:8px}
.resumo-item{
  display:flex;align-items:center;gap:9px;padding:6px 12px 6px 6px;
  border:1.5px solid var(--line);border-radius:12px;background:#fff;
}
.resumo-pes{
  width:38px;height:38px;flex:0 0 auto;border-radius:10px;
  background:var(--brand);color:#fff;font-weight:800;font-size:1.15rem;
  display:flex;align-items:center;justify-content:center;
}
.resumo-txt{display:flex;flex-direction:column;line-height:1.15}
.resumo-lab{font-size:.78rem;color:var(--muted);font-weight:600}
.resumo-tempo{font-size:.92rem;font-weight:700}
/* Quem espera há mais tempo fica no topo. O destaque de "ficando para trás"
   vem do semáforo (fundo verde -> vermelho, aplicado em tickTimes); quando
   passa do prazo, o cartão ganha borda vermelha grossa e um leve pulsar. */
.resumo-item.meso-urgente{
  border-width:2.5px;box-shadow:0 0 0 3px rgba(231,76,60,.28);
  animation:resumoPulsa 1.6s ease-in-out infinite;
}
@keyframes resumoPulsa{50%{box-shadow:0 0 0 7px rgba(231,76,60,.12)}}
@media (prefers-reduced-motion: reduce){.resumo-item.meso-urgente{animation:none}}

/* ---- Fila resumida na aba do Mapa: uma faixa fina no topo ----
   Aqui a planta do salão é a estrela; a fila entra só de relance, numa linha
   só. O que não coube vira um "+N" no fim — o garçom abre a aba do garçom
   quando quiser a lista inteira. */
.fila-resumo.em-faixa{padding:10px 12px;gap:8px;margin-bottom:10px}
.fila-resumo.em-faixa .mesas-head{margin-bottom:0}
.fila-resumo.em-faixa .card-title{font-size:1rem}
.fila-resumo.em-faixa .resumo-lista{
  flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;padding-bottom:2px;
}
.fila-resumo.em-faixa .resumo-item{padding:4px 10px 4px 4px;gap:7px}
.fila-resumo.em-faixa .resumo-pes{width:32px;height:32px;font-size:1rem}
.fila-resumo.em-faixa .resumo-lab{font-size:.72rem}
.fila-resumo.em-faixa .resumo-tempo{font-size:.86rem}
.resumo-mais{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex:0 0 auto;padding:4px 12px;border:1.5px dashed var(--line);border-radius:12px;
  font-weight:800;color:var(--muted);line-height:1.1;
}
.resumo-mais small{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}

/* ---- Dobrar o cabeçalho do mapa ----
   Uma seta à esquerda esconde título, legenda e botões; a planta cresce e
   ocupa a tela toda. É o modo "só o salão" para o tablet do salão. */
.mapa-head{align-items:center;gap:10px}
.mapa-dobrar{
  flex:0 0 auto;width:34px;height:34px;border:1.5px solid var(--line);background:#fff;
  border-radius:10px;font-size:1rem;line-height:1;cursor:pointer;color:var(--muted);
}
.mapa-dobrar:hover{background:var(--brand-soft)}
/* Dobrado, o cabeçalho não pode custar ALTURA: ele sai do fluxo e flutua por
   cima do canto do mapa. Título e botões somem; a seta e a legenda ficam
   pousadas sobre a planta, para o garçom continuar sabendo o que cada cor
   significa sem perder um dedo de tela. */
.mapa-card.mapa-dobrado .mapa-titulo,
.mapa-card.mapa-dobrado .mapa-botoes{display:none}
.mapa-card.mapa-dobrado .mesas-head{
  position:absolute;top:6px;left:8px;right:8px;z-index:4;
  margin:0;pointer-events:none;
}
.mapa-card.mapa-dobrado .mesas-head > *{pointer-events:auto}
.mapa-card.mapa-dobrado .mapa-dobrar{
  background:rgba(255,255,255,.92);box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.mapa-card.mapa-dobrado .mapa-legenda{
  background:rgba(255,255,255,.88);border-radius:999px;padding:3px 8px;
  box-shadow:0 2px 6px rgba(0,0,0,.10);
}
.mapa-card.mapa-dobrado .ml{font-size:.62rem;padding:1px 7px}
.mapa-card{position:relative}
/* ---- Desenho da mesa no mapa ----
   O retângulo é o tampo; os risquinhos em volta são as cadeiras. A largura
   cresce com o número de lugares (--lados = cadeiras do lado comprido), então
   uma mesa de 8 é visivelmente maior que uma de 4 — dá para ler o salão de
   longe, sem precisar do texto. */
.mm-mesa{
  width:calc(30px + var(--lados, 2) * 22px);
  min-width:66px;
}
.mm-mesa.tem-pontas{min-height:64px}
.mm-cadeiras{position:absolute;inset:0;pointer-events:none}
.mm-cadeiras i{position:absolute;background:currentColor;opacity:.45;border-radius:3px}
.mm-cadeiras i.t,.mm-cadeiras i.b{width:15px;height:6px;margin-left:-7.5px}
.mm-cadeiras i.t{top:-9px}
.mm-cadeiras i.b{bottom:-9px}
.mm-cadeiras i.l,.mm-cadeiras i.r{width:6px;height:15px;margin-top:-7.5px}
.mm-cadeiras i.l{left:-9px}
.mm-cadeiras i.r{right:-9px}
/* mesa juntada: o anel do bloco não deve cortar as cadeiras */
.mm-mesa.is-junta{outline-offset:11px}

/* ---- Mesas juntadas ----
   Viram UM desenho só, no meio do conjunto: "Mesa 1+4", os lugares somados e
   o tempo de quem sentou. As outras ficam sobrepostas por baixo. Contorno em
   volta não é mais preciso — o desenho único já conta a história. */
/* o anel por mesa sai de cena: quem marca o bloco agora é o contorno */
.mm-mesa.is-junta{outline:none}
/* a mesa sem texto mantém a MESMA altura da outra: é isso que faz as bordas
   coincidirem quando elas se encaixam */
/* os lugares em negrito, na mesma pegada do tempo: é dado de decisão */
.mm-lug{font-weight:700;opacity:.95}

/* ---- Mesa reservada: preta ----
   É compromisso com quem ainda vai chegar. Fica de fora das junções e dos
   botões em lote, para uma reserva não sumir sem querer. */
.mm-mesa.is-reservada{background:#1C1F26;border-color:#000;color:#fff}
.ml.reservada{background:#1C1F26;border-color:#000;color:#fff}
.btn-preto{background:#1C1F26;border:2px solid #000;color:#fff;font-weight:700}
.btn-preto:hover{background:#31363F}


/* ---- Mapa da atendente: só de olhar ----
   Mesma planta do garçom, sem nenhum comando: nada de tocar, arrastar ou
   juntar. Na recepção o mapa é informação — quem muda o estado é o salão. */

/* ---- Escolher a mesa dentro do pop-up de chamada ----
   Caminho inverso do "tocar na mesa primeiro": escolhe-se a pessoa e depois
   a mesa. Confirmada a chamada, a mesa fica reservada — vermelha na lista —
   até o cliente sentar. */
.cc-mesas{margin-top:12px;border-top:1.5px dashed var(--line);padding-top:10px}
.cc-mesas-tit{font-size:.85rem;font-weight:700;color:var(--muted);margin-bottom:6px}
.cc-mesas-tit small{font-weight:600;opacity:.8}
.cc-mesas-lista{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-height:33vh;overflow-y:auto}
/* Na faixa do Mapa a fila inteira está ali: cabem ~6 na tela e o garçom
   arrasta para o lado para ver quem vem depois. Largura fixa por item para
   a linha não "pular" de tamanho a cada atualização. */
.fila-resumo.em-faixa .resumo-item{flex:0 0 auto;width:calc((100% - 5 * 8px) / 6);min-width:118px}
.fila-resumo.em-faixa .resumo-lista{scroll-snap-type:x proximity;scrollbar-width:thin}
.fila-resumo.em-faixa .resumo-item{scroll-snap-align:start}

/* ---- Filtros da busca (tela da atendente) ----
   Chips que somam ao texto digitado. Servem para as perguntas do dia a dia:
   "quem está com pet?", "quem tem comanda?", "quem já está esperando demais?" */
.busca-filtros{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px}
.bf-chip{
  font:inherit;font-size:.78rem;font-weight:700;cursor:pointer;
  padding:5px 10px;border-radius:999px;border:1.5px solid var(--line);
  background:#fff;color:var(--muted);line-height:1.1;
}
.bf-chip:hover{border-color:var(--ink)}
.bf-chip.is-on{background:var(--brand);border-color:var(--brand);color:#fff}
.bf-limpar{border-style:dashed;color:var(--danger)}

/* ---- Aba "Na mesa" (atendente) ----
   Quem já sentou hoje, com a mesma busca da fila. Serve para achar rápido a
   comanda, o pager ou a mesa de alguém que já está sentado. */
#app[data-view="sentados"] #queueCard,
#app[data-view="sentados"] #mesasCard,
#app[data-view="sentados"] #filaResumoCard,
#app[data-view="sentados"] .mapa-card,
#app[data-view="sentados"] .call-panel,
#app[data-view="sentados"] .welcome,
#app[data-view="sentados"] .closed-banner,
#app[data-view="sentados"] .add-bar{display:none !important}
.sent-lista{display:flex;flex-direction:column;gap:8px}
.sent-item{
  display:flex;align-items:center;gap:10px;padding:8px 12px;cursor:pointer;
  border:1.5px solid var(--line);border-radius:12px;background:#fff;text-align:left;
  font:inherit;width:100%;
}
.sent-item:hover{border-color:var(--brand);background:var(--brand-soft)}
.sent-mesa{
  flex:0 0 auto;min-width:52px;height:44px;border-radius:10px;padding:0 8px;
  background:var(--brand);color:#fff;font-weight:800;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05;
}
.sent-mesa small{font-size:.58rem;font-weight:700;text-transform:uppercase;opacity:.9}
.sent-mesa.sem{background:var(--muted)}
.sent-txt{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.sent-nome{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sent-meta{font-size:.8rem;color:var(--muted);font-weight:600}
.sent-selo{font-size:.72rem;font-weight:800;color:#b0480f}

/* ---- Alarme na página do cliente ----
   O WhatsApp passa batido no bolso; com isto ligado o próprio celular toca e
   vibra na hora da chamada. O botão existe porque o navegador só libera som
   depois de um toque da pessoa. */
.alerta-card{text-align:center;display:flex;flex-direction:column;gap:8px}
.alerta-card .btn-big{width:100%}
.alerta-nota{margin:0;font-size:.86rem;color:var(--muted);font-weight:600;line-height:1.4}
.alerta-teste{align-self:center;margin-top:2px}

/* ---- Aba "Pedidos" (cozinha/balcão) ----
   Uma linha por cliente com o botão do aviso à direita: o trabalho ali é achar
   a pessoa pela comanda ou pelo pager e avisar que o prato saiu. */
#app[data-view="pedidos"] #queueCard,
#app[data-view="pedidos"] #mesasCard,
#app[data-view="pedidos"] #filaResumoCard,
#app[data-view="pedidos"] #sentadosCard,
#app[data-view="pedidos"] .mapa-card,
#app[data-view="pedidos"] .call-panel,
#app[data-view="pedidos"] .welcome,
#app[data-view="pedidos"] .closed-banner,
#app[data-view="pedidos"] .add-bar{display:none !important}
.ped-item{cursor:default;gap:10px}
.ped-item:hover{border-color:var(--line);background:#fff}
.ped-acao{flex:0 0 auto;white-space:nowrap;text-decoration:none}

/* =====================================================================
   CABER NA TELA — regras gerais de encaixe
   ---------------------------------------------------------------------
   O que cortava os campos: numa grade, cada item tem largura mínima
   automática, e a mínima de um <input> é a de umas vinte letras. Com duas
   colunas num celular estreito isso estoura a caixa e o campo aparece
   cortado. As regras abaixo valem para o app inteiro, não só para o
   formulário onde o problema apareceu.
   ===================================================================== */

/* 1) nenhum campo pode exigir mais largura do que a coluna tem */
input, select, textarea, button { max-width:100%; min-width:0 }
.field, .field > * { min-width:0 }

/* 2) duas colunas viram uma sozinhas quando não cabem */
.two-cols{ grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)) }
.two-cols > *{ min-width:0 }

/* 3) itens de grade e de flex podem encolher (o padrão é não encolher) */
.grid > *, .queue-stats > *, .mesas-head > *, .free-row > *{ min-width:0 }

/* 4) texto comprido quebra em vez de empurrar a caixa */
.field > span, .hint, .card-title, .q-name, .sent-nome, .cc-name{ overflow-wrap:anywhere }

/* 5) telas estreitas de verdade: respira menos, mas cabe */
@media (max-width:380px){
  .modal-box{ padding:16px }
  .field input[type=text], .field input[type=tel], .field input[type=number]{ padding:12px; font-size:1rem }
  .two-cols{ gap:8px }
  .free-row .btn-big{ min-width:0 }
}
/* 6) A barra de abas cresceu (são sete) e o cabeçalho estava virando três
   faixas: marca, contador e abas, cada uma numa linha.
   `display:contents` faz o lado direito deixar de ser uma caixa: o contador
   e os botões passam a ser peças da MESMA linha da marca, e a barra de abas
   (order:9, largura 100%) fica com uma linha só para ela, rolando de lado
   quando não couber. Duas faixas em vez de três. */
.topbar-right{display:contents}
.topbar .fila-topo{margin-left:auto}
.viewswitch{
  order:9;flex:1 1 100%;max-width:100%;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.viewswitch::-webkit-scrollbar{display:none}
.vs-btn{flex:0 0 auto;white-space:nowrap}
@media (max-width:480px){
  .vs-btn{padding:7px 12px;font-size:.84rem}
  .topbar{gap:8px;padding:10px 12px}
}
/* o lado direito do cabeçalho é quem segurava a barra de abas: sem poder
   encolher, ele empurrava tudo para fora da tela */
.topbar-right{min-width:0;max-width:100%;flex:1 1 auto}
.brand{min-width:0}
.brand-txt{min-width:0;overflow:hidden}
.brand-txt strong,.brand-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}

/* ---- Engrenagem em seções que abrem e fecham ----
   Cada grupo diz a TELA que ele afeta. Fechados por padrão: quem entra para
   mexer numa coisa não passa os olhos por todas as outras. */
.cfg-barra{display:flex;gap:8px;justify-content:flex-end;margin-bottom:10px}
.cfg-grupo{border:1.5px solid var(--line);border-radius:14px;margin-bottom:10px;overflow:hidden;background:#fff}
.cfg-grupo .cfg-sec{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:0;padding:13px 14px;border:0;background:var(--brand-soft);
  font:inherit;font-weight:800;color:var(--ink);text-align:left;cursor:pointer;
}
.cfg-grupo .cfg-sec:hover{filter:brightness(.97)}
.cfg-seta{transition:transform .15s ease;opacity:.65;font-size:.9rem}
.cfg-grupo.is-aberto .cfg-seta{transform:rotate(180deg)}
.cfg-corpo{display:none;padding:14px;flex-direction:column;gap:14px}
.cfg-grupo.is-aberto .cfg-corpo{display:flex}
.cfg-versao{margin-top:14px}
.ml-previa{background:var(--brand-soft);border-radius:10px;padding:10px 12px;font-size:.88rem;font-weight:600;color:var(--ink);margin:4px 0 0}

/* ---- Teclado de números de mesa (garçom) ----
   Digitar o número no meio do salão, de pé e com pressa, é onde nasce o erro.
   Aqui ele toca no número: as opções vêm do mapa da casa quando existe. */
.num-teclado{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(48px, 1fr));gap:6px;
  margin-top:8px;max-height:34vh;overflow-y:auto;padding:2px;
}
.num-tecla{
  font:inherit;font-weight:800;font-size:1rem;padding:10px 4px;cursor:pointer;
  border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);
}
.num-tecla:hover{border-color:var(--brand)}
.num-tecla.is-sel{background:var(--brand);border-color:var(--brand);color:#fff}
.num-tecla.is-lancada{opacity:.45;text-decoration:line-through}

/* ---- Arrastar mesa no modo de edição ----
   O `touch-action:pan-y` do piso serve para o dia a dia (a página precisa
   rolar por cima do mapa). No EDITOR ele era justamente o que soltava a mesa
   no meio do caminho: ao mover o dedo na vertical, o navegador decidia que o
   gesto era rolagem, cancelava o ponteiro e a mesa voltava para o lugar.
   No editor a planta ocupa a tela e não há o que rolar — então o mapa fica
   com o gesto inteiro. */
.mapa-card.is-editando .mapa-piso,
.mapa-card.is-editando .mm-mesa{touch-action:none}
.mapa-piso.is-pegando,
.mapa-piso.is-pegando .mm-mesa{touch-action:none}
.rel-datas-linha{display:flex;gap:8px;flex-wrap:wrap}
.rel-datas-linha input{border:1.5px solid var(--line);border-radius:10px;padding:9px 10px;font:inherit;background:#FAFAF8;min-width:0}

/* ---- O dedo em cima da mesa é gesto DA MESA ----
   Com `pan-y` valendo também sobre a mesa, o navegador podia decidir no meio
   do caminho que aquele arrasto era rolagem da página, cancelar o ponteiro e
   soltar a mesa sozinha. O piso continua rolando; a mesa, não. */
.mm-mesa{touch-action:none}
/* mesas juntadas: sem anel em volta, o desenho único já basta */
.mm-mesa.is-junta{outline:none;box-shadow:0 3px 10px rgba(0,0,0,.18)}

/* ---------------- CÓPIA EM ARQUIVO (administrador, no computador) ---------------- */
/* O selo do cabeçalho precisa dizer de longe se a cópia está gravando: verde
   quando está, laranja piscando quando parou e espera um clique. */
#backupBtn{background:rgba(255,255,255,.16)}
#backupBtn.is-off{background:#FFD9A8;color:#8a4b00;animation:backupPisca 1.6s ease-in-out infinite}
@keyframes backupPisca{0%,100%{opacity:1}50%{opacity:.55}}
.cfg-backup{display:flex;gap:10px;flex-wrap:wrap}

/* ---------------- QR FIXO DO BALCÃO (engrenagem) ---------------- */
.qr-fixo{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.qr-fixo .qr-box{flex:0 0 auto;width:160px;height:160px;background:#fff;border-radius:12px;padding:8px}
.qr-fixo .qr-box svg{width:100%;height:100%;display:block}
.qr-fixo-lado{display:flex;flex-direction:column;gap:8px;flex:1 1 200px;min-width:200px}
.qr-fixo-lado .hint{word-break:break-all}

/* ---------------- BUSCA PELO TELEFONE (página do cliente) ---------------- */
.busca-tel{display:flex;flex-direction:column;gap:12px;margin:14px 0 10px}
.busca-tel input{
  border:1.5px solid var(--line);border-radius:12px;padding:14px;
  font-size:1.15rem;background:#FAFAF8;width:100%;
}
.busca-tel input:focus{outline:none;border-color:var(--brand);background:#fff}
.sem-codigo-pe{font-size:.85rem;color:var(--muted)}

/* ---------------- CONFIGURAR PAGER (ESP32 + CC1101) ---------------- */
.pg-base{
  display:flex;align-items:center;gap:10px;margin:0 0 14px;
  border:1.5px solid var(--line);border-radius:12px;padding:11px 14px;background:#FAFAF8;
  font-weight:600;font-size:.95rem;
}
/* a luz diz de relance se a base está viva e o que ela está fazendo */
.pg-luz{width:12px;height:12px;border-radius:50%;background:#c8ccd0;flex:0 0 auto}
.pg-luz.is-on{background:#1E7A52}
.pg-luz.is-escuta{background:#E8A33D;animation:pgPisca 1.1s ease-in-out infinite}
@keyframes pgPisca{0%,100%{opacity:1}50%{opacity:.35}}

.pg-secao{margin:0 0 18px}
.pg-tit{margin:0 0 4px;font-size:1rem;color:var(--brand-dark)}
.pg-botoes{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.pg-vazio{color:var(--muted);font-size:.9rem;margin:8px 0 0}

.pg-capturas,.pg-lista{display:flex;flex-direction:column;gap:8px}
.pg-cap,.pg-item{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff;
}
.pg-cap{border-style:dashed;background:#FFFDF6}
.pg-cap-cod{display:flex;flex-direction:column;flex:1 1 140px;min-width:0}
.pg-cap-cod b{font-family:ui-monospace,Consolas,monospace;font-size:.95rem;word-break:break-all}
.pg-cap-cod small{color:var(--muted);font-size:.8rem}
.pg-cap-num{
  width:110px;border:1.5px solid var(--line);border-radius:10px;padding:9px 10px;
  font-size:1rem;background:#FAFAF8;
}
.pg-cap-num:focus{outline:none;border-color:var(--brand);background:#fff}

.pg-num{
  min-width:44px;text-align:center;font-weight:800;font-size:1.1rem;
  background:var(--brand-soft);color:var(--brand-dark);border-radius:10px;padding:6px 10px;
}
.pg-cod{flex:1 1 120px;font-family:ui-monospace,Consolas,monospace;font-size:.85rem;
  color:var(--muted);word-break:break-all;min-width:0}

.pg-teste{display:flex;align-items:flex-end;gap:10px;margin-top:12px;flex-wrap:wrap}
.pg-teste .field{flex:1 1 160px}
.pg-teste input{border:1.5px solid var(--line);border-radius:12px;padding:12px;
  font-size:1rem;background:#FAFAF8;width:100%}
.pg-teste input:focus{outline:none;border-color:var(--brand);background:#fff}
/* selo do tipo de rádio na lista de pagers */
.pg-tipo{
  font-size:.75rem;font-weight:700;white-space:nowrap;flex:0 0 auto;
  background:#E7EDF0;color:#3F5C63;border-radius:999px;padding:4px 9px;
}
.pg-tipo.is-proprio{background:var(--brand-soft);color:var(--brand-dark)}

/* número da mesa na página do cliente: é o que ele procura ao voltar do
   banheiro, então tem tamanho de destaque, não de rodapé */
.me-mesa{
  display:inline-block;margin:10px 0 4px;padding:8px 18px;border-radius:999px;
  background:var(--brand-soft);color:var(--brand-dark);
  font-size:1.15rem;font-weight:700;
}
.me-mesa b{font-size:1.5rem;font-weight:800}

/* ---------------- SEM INTERNET ---------------- */
/* Fica na tela ENQUANTO durar o problema, ao contrário dos outros avisos que
   somem em segundos. Trabalhar sem rede sem saber disso é o pior dos mundos. */
.sem-rede-banner{
  margin:0 0 12px;padding:12px 16px;border-radius:12px;
  background:#FFE9C7;border:1.5px solid #E8A33D;color:#7a4a00;
  font-weight:600;font-size:.95rem;line-height:1.4;
}
.sem-rede-banner[hidden]{display:none !important}
/* cliente que ainda não subiu: a atendente precisa ver qual é */
.q-chip.chip-pendente{background:#FFE9C7;color:#7a4a00;border-color:#E8A33D}

/* ---------------- FILA DA FILA (a antessala) ---------------- */
.previa-card{border:2px dashed #6B5BA8;background:#FBFAFF}
.previa-explica{margin:0 0 12px}
.ff-cheio{color:var(--danger);font-weight:700}

.previa-lista{display:flex;flex-direction:column;gap:10px}
/* a linha inteira é um botão: toca e abre a ficha com as ações */
.previa-item{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;background:#fff;
  cursor:pointer;font:inherit;color:inherit;transition:.12s;
}
.previa-item:hover{border-color:#6B5BA8;background:#FBFAFF}
.previa-item:active{transform:scale(.995)}
.previa-seta{margin-left:auto;color:var(--muted);font-size:1.6rem;line-height:1;flex:0 0 auto}
/* já avisado que abriu vaga: some do "a fazer" da atendente sem sumir da lista */
.previa-item.is-avisado{background:#F4FBF7;border-color:#BEDFCD}

.previa-pos{
  min-width:46px;text-align:center;font-weight:800;font-size:1.05rem;
  background:#EDEAF7;color:#4B3E7D;border-radius:10px;padding:8px 6px;flex:0 0 auto;
}
.previa-txt{display:flex;flex-direction:column;gap:3px;flex:1 1 220px;min-width:0}
.previa-nome{font-weight:700;font-size:1.05rem}
.previa-meta{color:var(--muted);font-size:.85rem}
/* as ações da fila da fila ficam na ficha do cliente, não na lista */
#cliAcoes .btn{min-height:44px}

/* os dois relógios da fila da fila */
.ff-tempos{display:flex;gap:10px;flex-wrap:wrap;margin:2px 0 14px}
.ff-tempo{
  display:flex;align-items:center;gap:11px;flex:1 1 170px;
  border:1.5px solid var(--line);border-radius:14px;padding:11px 15px;background:#fff;
}
/* a espera da antessala é a dor do momento: ganha a cor do cartão */
.ff-tempo.is-previa{border-color:#CFC6EC;background:#FBFAFF}
.ff-ico{font-size:1.5rem;line-height:1;flex:0 0 auto;opacity:.85}
.ff-tempo-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.ff-tempo small{color:var(--muted);font-size:.76rem;text-transform:uppercase;letter-spacing:.04em}
.ff-tempo b{font-size:1.3rem;font-weight:800;color:var(--brand-dark);line-height:1.1}
.ff-tempo.is-previa b{color:#4B3E7D}
.cfg-nota{background:#F6F4FD;border-radius:10px;padding:10px 12px;margin:10px 0}
/* enviar para a fila da fila: roxo, a cor da antessala */
.btn-roxo{background:#EDEAF7;border:2px solid #6B5BA8;color:#4B3E7D;font-weight:700}
.btn-roxo:hover{background:#E2DDF3}

/* ---- Recém-chegado da fila da fila ----
   Cartão roxo enquanto a recepção não confere o cadastro (comanda/pager).
   Ele fica FORA do semáforo de espera de propósito: são dois avisos
   diferentes, e um pintando por cima do outro não diria nada. Assim que a
   atendente preenche, o cartão entra na régua normal de verde a vermelho. */
.q-item.is-daprevia{
  background:#F3EAFE !important;border-color:#7C3AED !important;
  box-shadow:0 0 0 2px rgba(124,58,237,.18);
}
.q-item.is-daprevia .q-pos{background:#7C3AED !important}
.q-tag.novo{background:#7C3AED;color:#fff}

/* ---- Mesa aguardando: quadrado limpo ----
   Sem cadeiras e sem contagem de lugares, porque nesse estado o tamanho
   ainda não foi informado — quem informa é o garçom, ao liberar. */
.mm-mesa.sem-tamanho{width:auto;min-width:64px;max-width:120px;min-height:48px}

/* ---- Passo 2 do pop-up da mesa ---- */
.mapa-passo-tit{font-weight:800;margin:12px 0 4px}
/* o "quais mesas vão junto" usa o mesmo .num-teclado do pop-up do garçom */
.num-eco{margin:6px 0 0;font-weight:700;color:var(--brand)}
#mapaLugaresManualBox{margin-top:10px}
#mapaPetField{margin-top:14px}
.btn-roxo{background:#7C3AED;border:2px solid #7C3AED;color:#fff;font-weight:700}
.btn-roxo:hover{background:#6D28D9}

/* ==========================================================
   TELA PEQUENA: A MESMA PLANTA, SÓ QUE MENOR
   ----------------------------------------------------------
   O app é desenhado para o tablet do balcão. No celular, em vez de
   reempilhar tudo numa coluna (o que muda o lugar das coisas e obriga a
   reaprender a tela), ele é REDUZIDO: mesma disposição, letras e botões
   proporcionalmente menores.

   O `zoom` faz isso de uma vez, sem tocar em cada medida: o conteúdo passa a
   enxergar uma tela maior do que a física, então as grades que se dobravam
   voltam a caber lado a lado. O toque acompanha — o navegador converte as
   coordenadas junto com o desenho.

   Os tamanhos foram escolhidos para o texto continuar legível: 0,85 no
   tablet pequeno e 0,72 no celular são o limite antes de o corpo do texto
   ficar miúdo demais para o corre-corre do serviço.
   ========================================================== */
@media (max-width:700px){ #app{zoom:.85} }
@media (max-width:480px){ #app{zoom:.72} }

/* ---- Mapa em modo CONSULTA (perfil Pedidos) ----
   Mesma planta, sem comando nenhum: somem os botões de ação e o toque nas
   mesas não abre nada. A LEGENDA fica — é ela que explica as cores, e sem
   ela o mapa vira um quebra-cabeça colorido. */
.mapa-card.so-olhar .mapa-botoes{display:none}
.mapa-card.so-olhar .mm-mesa{pointer-events:none;cursor:default}
.mapa-card.so-olhar .mapa-piso{touch-action:pan-x pan-y;cursor:default}

/* ---- Mesa CHAMADA: "aguardando sentar" ----
   Roxo, a mesma cor que o app usa para preferencial e para a antessala: é a
   cor de "tem dono, mas ainda não chegou". Não pode ser verde (a recepção
   ofereceria de novo) nem vermelha (ninguém sentou ali ainda). */
.mm-mesa.is-chamada{background:#EDEAF7;border-color:#6B5BA8;color:#3F3470}
.ml.chamada{background:#EDEAF7;border-color:#6B5BA8;color:#3F3470}

/* ---- Fila da fila: selo de preferencial e contador de pessoas ---- */
.previa-item.is-pref{border-color:var(--pref);background:#F6F3FF}
.previa-item.is-pref .previa-pos{background:var(--pref);color:#fff}
/* o "• N grupos" acompanha o número de pessoas, um degrau abaixo na leitura */
.mesas-count .ff-grupos{opacity:.75;font-weight:600;margin-left:6px}

/* ---- Selos do cliente na página dele (preferencial / pet) ----
   Ficam logo abaixo da linha de posição: o cliente confere o que a recepção
   anotou e reclama ANTES de ser chamado, quando ainda dá para corrigir. */
.me-selos{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.me-selo{
  font-size:.78rem;font-weight:800;letter-spacing:.03em;
  padding:4px 11px;border-radius:999px;background:rgba(255,255,255,.22);
  border:1.5px solid rgba(255,255,255,.45);white-space:nowrap;
}


/* ---- MAPA 2.0: a planta do salão atrás das mesas ----
   Camada própria, no fundo do piso: a transparência vale só para o desenho,
   e as mesas continuam com a cor cheia — é a cor delas que o garçom lê de
   longe. A imagem entra INTEIRA (contain), sem distorcer, e o encaixe fino
   (tamanho e posição) é feito à mão no pop-up da planta. */
.mapa-planta{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.mapa-planta img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;transform-origin:center center;
}
.mapa-piso > .mm-mesa{z-index:1}
/* prévia e controles dentro do pop-up */
.planta-previa{
  margin:10px 0;border:1.5px solid var(--line);border-radius:12px;overflow:hidden;
  background:#FAFAF8;
}
.planta-previa img{display:block;width:100%;height:auto}
.planta-ctrl{display:flex;flex-direction:column;gap:2px;margin:8px 0}
.planta-ctrl small{font-weight:700;font-size:.8rem;color:var(--muted)}
.planta-girar{display:flex;align-items:center;gap:8px}
.planta-girar input[type=range]{flex:1 1 auto;min-width:0}

/* ---- Aba do Mapa: o salão ocupa quase tudo ----
   Na tela do mapa sobram só o cabeçalho do app e a fila de espera em faixa.
   O resto é planta: cartão sem sombra nem respiro, e a rolagem grudada na
   faixa da fila. */
#app[data-view="mapa"] .mapa-card{padding:6px;box-shadow:none;border-radius:12px}
#app[data-view="mapa"] .content{padding-top:8px;gap:8px}
#app[data-view="mapa"] .fila-resumo{margin-bottom:0}
#app[data-view="mapa"] .mapa-card.mapa-dobrado{padding:2px}
/* arrastar o mapa: o dedo no vão entre as mesas leva a planta junto */
.mapa-rolagem{overscroll-behavior:contain;cursor:grab}
.mapa-piso.is-pegando{cursor:grabbing}
/* o piso deixa o dedo arrastar para os DOIS lados: com o zoom alto é assim
   que se chega nas mesas que ficaram fora da tela */
.mapa-piso{touch-action:pan-x pan-y}