@fayz-ai/pos 0.20.5 → 0.21.1

package/dist/styles.css

@@ -24,6 +24,19 @@
   --pos-line: #242427;        /* hairline between regions */
   --pos-line-strong: #35353A; /* control borders          */
 
+  /* --- o véu, a cortina e a sombra --------------------------------------
+     Três coisas que o CSS costuma escrever à mão como `rgba(255,255,255,.06)`
+     ou `rgba(0,0,0,.5)` — e que, escritas à mão, PRENDEM a folha ao fundo
+     escuro: clarear é o gesto certo sobre carvão e o errado sobre papel.
+     Como token, a pele clara inverte o véu num lugar só. */
+  --pos-veil: rgba(255, 255, 255, 0.06);    /* preenchimento de campo       */
+  --pos-veil-2: rgba(255, 255, 255, 0.09);  /* o mesmo, sob o cursor        */
+  --pos-veil-3: rgba(255, 255, 255, 0.28);  /* alça, divisórias sobre vidro */
+  --pos-scrim: rgba(0, 0, 0, 0.45);         /* cortina atrás de uma folha   */
+  --pos-shadow: rgba(0, 0, 0, 0.55);        /* sombra projetada             */
+  --pos-shadow-strong: rgba(0, 0, 0, 0.8);  /* foco e cartão levantado      */
+  --pos-primary-hover: color-mix(in srgb, var(--pos-primary) 88%, #FFF); /* mais vivo */
+
   /* --- text: three steps, all AA on --pos-1 or darker ------------------- */
   --pos-fg: #F7F7F8;
   --pos-fg-2: #A0A0A6;
@@ -39,34 +52,109 @@
   --pos-accent-dim: #1C2436;
   --pos-primary: #F7F7F8;
   --pos-primary-fg: #121214;
-
-  /* --- status: its own language, always paired with icon + word --------- */
-  --pos-ok: #4AA76C;
-  --pos-warn: #D3982F;
+  /* A tinta sobre o card já lançado. No escuro o preenchimento é o matiz a
+     26%, e é o CLARO que cabe em cima (6,9:1). */
+  --pos-on-filled: #F7F7F8;
+
+  /* --- status: its own language, always paired with icon + word ---------
+     OS NÚMEROS SÃO OS DO V1, decisão do founder em 29-09.
+     O V2 vinha com variantes mais surdas (#4AA76C, #D3982F, #E0722F, #DC5C55)
+     e uma razão escrita: cor forte em meia sala atrasada faz nada chamar. O
+     founder preferiu paridade literal, então aqui estão os tokens dele em
+     `hsl()` — e não convertidos para hex — para ficarem conferíveis contra
+     `beautyplace/src/index.css` linha por linha.
+     Este é o tema ESCURO, então vêm de `.dark` do V1 onde ele sobrescreve;
+     `--success` e `--warning` ele não sobrescreve, e herdam o `:root`. */
+  --pos-ok: hsl(142 76% 36%);      /* V1 --success (:root)     */
+  --pos-warn: hsl(38 92% 50%);     /* V1 --warning (:root)     */
+  /* «Atrasada»: entre o âmbar de ocupada e o vermelho de parada. O V1 tem um
+     token só para isto (`--late`), e sem ele os dois estados colapsam num. */
+  /* `24 85% 45%` = #D45F11. Contraste com o rótulo BRANCO do glifo: 3,86:1 —
+     MELHOR que o #E0722F que estava aqui (2,98:1), porque escurecer o fundo
+     aumenta o contraste com texto claro. Abaixo de 4,5:1 (texto normal) e acima
+     de 3:1 (texto grande), que é o caso: o número da mesa é desenhado grande no
+     `<svg>`. Eu tinha anotado o contrário no commit dos tons; era engano. */
+  --pos-late: hsl(24 85% 45%);     /* V1 --late (.dark)        */
   --pos-info: #5B8DEF;
-  --pos-danger: #DC5C55;
-
-  /* --- category identity: assigned per category by data, never a status --
-     Saturados, na mesma força do mapa de mesas. Os pastéis vinham de quando o
-     salão também era discreto; com as mesas pintadas em cheio, uma grade de
-     cartões leitosos ao lado lia como outra tela, de outro produto.
-     Continuam LONGE dos quatro tons de status em matiz — nenhum verde-livre,
-     nenhum vermelho-atenção — porque cor aqui é identidade de categoria e lá é
-     estado; iguais, a mesma mancha significaria duas coisas na mesma sessão.
-     Todos escuros o bastante para texto `--pos-on-light` por cima passar AA. */
-  --pos-tone-mint: #59C08A;
-  --pos-tone-lilac: #A98BE0;
-  --pos-tone-sky: #4FA3DE;
-  --pos-tone-periwinkle: #7B86E4;
-  --pos-tone-blush: #E0719E;
-  --pos-tone-sand: #C9A268;
-  --pos-tone-teal: #3FB8A0;
-  --pos-tone-rose: #E07A6B;
-
-  /* --- shape: softer than an instrument panel, tighter than a phone app -- */
-  --pos-r: 10px;
-  --pos-r-sm: 7px;
-  --pos-r-xs: 5px;
+  --pos-danger: hsl(0 62.8% 30.6%);/* V1 --destructive (.dark) */
+
+  /* --- identidade de categoria: as SEIS cores do cardápio do V1 ----------
+     Aqui a cor não SINALIZA estado, como no salão — ela IDENTIFICA a família,
+     e identificador se decora: o garçom aprende "verde é almoço" e para de ler
+     o rótulo. Isso muda o registro exigido.
+
+     Por que sólida a 50% e não pastel: um tint de 14% sobre o quase-preto
+     sobrevive no escritório e converge para cinza no salão com sol, porque a
+     reflexão do ambiente lava a cromaticidade antes de lavar a luminosidade —
+     e cor que converge não se decora. Sólido a 50% é menos luminoso que o
+     pastel (0,45 contra 0,65 de luminância) e muito mais cromático: menos
+     brilho, mais cor.
+
+     Portado literal de `beautyplace/src/components/orders/ProductCatalog.tsx`,
+     matiz por matiz. */
+  --pos-tone-mint: hsl(145 60% 50%);        /* verde     */
+  --pos-tone-blush: hsl(340 68% 50%);       /* rosa      */
+  --pos-tone-sky: hsl(213 70% 50%);         /* azul      */
+  --pos-tone-sand: hsl(38 85% 50%);         /* âmbar     */
+  --pos-tone-teal: hsl(172 62% 50%);        /* turquesa  */
+  --pos-tone-lilac: hsl(270 58% 50%);       /* roxo      */
+  /* As duas sobras da paleta antiga, mantidas para cardápio com mais de seis
+     categorias — a rotação continua e ninguém fica sem cor. */
+  --pos-tone-periwinkle: hsl(255 62% 50%);
+  --pos-tone-rose: hsl(12 68% 50%);
+
+  /* O card do produto JÁ LANÇADO na comanda: o mesmo matiz rebaixado até a
+     tinta voltar a caber em cima. No escuro desce a 26%; no claro SOBE a 86%,
+     porque a tinta que tem de caber é a escura — num cardápio claro, o item
+     lançado ficar mais escuro que a folha é o que o olho lê como "este
+     entrou". Preencher com a cor CHEIA transformava o card num bloco sólido,
+     que foi o "layout quebrando ao marcar o item". */
+  --pos-tone-mint-on: hsl(145 45% 26%);
+  --pos-tone-blush-on: hsl(340 53% 26%);
+  --pos-tone-sky-on: hsl(213 55% 26%);
+  --pos-tone-sand-on: hsl(38 70% 26%);
+  --pos-tone-teal-on: hsl(172 47% 26%);
+  --pos-tone-lilac-on: hsl(270 43% 26%);
+  --pos-tone-periwinkle-on: hsl(255 47% 26%);
+  --pos-tone-rose-on: hsl(12 53% 26%);
+
+  /* --- shape ------------------------------------------------------------
+     UM número manda em todas as quinas do PDV.
+     Antes havia 108 `border-radius` no arquivo, dezoito valores diferentes —
+     10px, 9px, 8px, 6px, 50%, 999px — e mudar o desenho do produto era caçar
+     um por um, deixando sempre algum para trás. Agora as quatro variáveis
+     derivam de `--pos-radius`: zero deixa tudo reto, `10px` devolve o
+     arredondado de antes, e a decisão é um toque.
+
+     `--pos-r-pill` (cápsulas: pastilhas, selos, a chave de modo) e
+     `--pos-r-round` (o que é círculo de verdade: avatar, ponto de estado)
+     seguem o mesmo botão por padrão, e podem ser soltos do conjunto se a casa
+     quiser cápsula redonda num produto de quinas retas. */
+  /* --- vidro ------------------------------------------------------------
+     As superfícies que FLUTUAM sobre o conteúdo — o cabeçalho, a régua de
+     categorias, a bandeja de comandas, o filtro de praças — usam o mesmo
+     vidro, e ele sai de três números. Mexer aqui muda as quatro de uma vez,
+     em vez de caçar `backdrop-filter` espalhado pelo arquivo.
+
+     `saturate` é o que separa vidro de fumaça: sem ele o desfoque só apaga o
+     que está atrás. `--pos-glass-bg` é a opacidade da camada — quanto mais
+     baixa, mais o salão aparece por trás. */
+  --pos-glass-blur: 22px;
+  --pos-glass-sat: 1.9;
+  --pos-glass-bg: 56%;
+
+  --pos-radius: 0px;
+  /* A folha que sobe do rodapé fica FORA do botão de quina da casa, de
+     propósito: a quina arredondada no topo de um bottom sheet é o que faz o
+     polegar ler "isto sobe e desce" antes de qualquer rótulo, e é convenção de
+     sistema (iOS), não escolha de marca. Quadrá-la junto com o resto faria a
+     folha parecer uma tela que colou no fundo. */
+  --pos-r-drawer: 18px;
+  --pos-r: var(--pos-radius);
+  --pos-r-sm: var(--pos-radius);
+  --pos-r-xs: var(--pos-radius);
+  --pos-r-pill: var(--pos-radius);
+  --pos-r-round: var(--pos-radius);
 
   /* --- rhythm: 4px base, and nothing off it ----------------------------- */
   --pos-1x: 4px;  --pos-2x: 8px;  --pos-3x: 12px;
@@ -97,6 +185,87 @@
   --pos-safe-b: env(safe-area-inset-bottom, 0px);
   --pos-safe-l: env(safe-area-inset-left, 0px);
 
+}
+
+/* ---------------------------------------------------------------------------
+   A pele clara.
+
+   O PDV nasceu escuro (referência CosyPOS) porque um terminal dedicado vive
+   sozinho num balcão. Mas ele também abre POR CIMA da retaguarda, e ali o
+   operador estava numa tela clara meio segundo antes — a troca de fundo lê
+   como "troquei de programa", não como "troquei de lado da mesma casa". O V1
+   resolveu assim, e é o que se porta.
+
+   Só COR muda. Alturas de toque, ritmo, raio, tempo e curva são os mesmos: a
+   pele não é um segundo design system, é a mesma peça sob outra luz.
+
+   O véu inverte — sobre papel, "mais claro" não destaca nada, então o campo
+   afunda em vez de subir. A sombra afrouxa, porque sombra forte sobre branco
+   lê como sujeira. E o primário deixa de ser branco: numa tela clara a coisa
+   mais brilhante não pode ser o botão, tem de ser o papel.
+--------------------------------------------------------------------------- */
+.pos.pos-light {
+  --pos-0: #F6F5F2;   /* canvas — o papel quente da retaguarda, não branco */
+  --pos-1: #FFFFFF;   /* painéis, trilha                                   */
+  --pos-2: #FFFFFF;   /* cartões sobre painel — separados por borda, não   */
+  --pos-3: #F1EFEA;   /* hover / cartão levantado                          */
+  --pos-4: #E7E4DD;   /* pressionado / selecionado                         */
+
+  --pos-line: #E4E1DA;
+  --pos-line-strong: #C8C4BA;
+
+  --pos-fg: #1C1B18;
+  --pos-fg-2: #6B6862;
+  --pos-fg-3: #97938B;
+  /* Sobre um tom saturado o texto continua sendo o quase-preto: os tons de
+     categoria não clareiam junto com o fundo. */
+  --pos-on-light: #121214;
+
+  --pos-accent: #2F6FB5;
+  --pos-accent-fg: #FFFFFF;
+  --pos-accent-dim: #E3ECF7;
+  /* O primário é a tinta, não o papel. */
+  --pos-primary: #1C1B18;
+  --pos-primary-fg: #FFFFFF;
+  /* O hover DERIVA do primário, e não é um hex próprio.
+     Com um valor fixo, quem troca a marca troca só metade: o ChefControl
+     redefine `--pos-primary` para o Ouro e o hover continuava o preto do tema
+     — um botão dourado que ficava PRETO ao passar o mouse. Escurecer o próprio
+     primário funciona para qualquer marca, inclusive as que ainda não
+     existem. */
+  --pos-primary-hover: color-mix(in srgb, var(--pos-primary) 86%, #000);
+
+  /* Tema CLARO: os tokens do `:root` do V1, verbatim. */
+  --pos-ok: hsl(142 76% 36%);      /* V1 --success  */
+  --pos-warn: hsl(38 92% 50%);     /* V1 --warning  */
+  --pos-late: hsl(24 95% 50%);     /* V1 --late     */
+  --pos-info: #2F6FB5;
+  --pos-danger: hsl(0 84% 60%);    /* V1 --destructive → --error (:root) */
+
+  /* O véu escurece em vez de clarear. */
+  --pos-veil: rgba(0, 0, 0, 0.04);
+  --pos-veil-2: rgba(0, 0, 0, 0.07);
+  --pos-veil-3: rgba(0, 0, 0, 0.18);
+  --pos-scrim: rgba(28, 27, 24, 0.32);
+  --pos-shadow: rgba(28, 27, 24, 0.14);
+  --pos-shadow-strong: rgba(28, 27, 24, 0.22);
+
+  /* O item lançado, sob a luz clara: o tint SOBE a 86% em vez de descer a
+     26%. Mesmo gesto, outra direção — num cardápio claro, o item lançado
+     ficar mais escuro que a folha é o que o olho lê como "este entrou". */
+  --pos-tone-mint-on: hsl(145 50% 86%);
+  --pos-tone-blush-on: hsl(340 58% 86%);
+  --pos-tone-sky-on: hsl(213 60% 86%);
+  --pos-tone-sand-on: hsl(38 75% 86%);
+  --pos-tone-teal-on: hsl(172 52% 86%);
+  --pos-tone-lilac-on: hsl(270 48% 86%);
+  --pos-tone-periwinkle-on: hsl(255 52% 86%);
+  --pos-tone-rose-on: hsl(12 58% 86%);
+  /* E aqui o preenchimento é 86%: a tinta que cabe é a escura. */
+  --pos-on-filled: #101318;
+}
+
+.pos {
   position: fixed;
   /* Height, not `inset: 0`: installed on iOS the fixed box is laid out against
      the LAYOUT viewport, which stays tall when the keyboard is up — the dock
@@ -146,6 +315,15 @@
 @media (prefers-reduced-motion: reduce) {
   .pos *, .pos *::before, .pos *::after {
     transition-duration: 0.01ms !important; animation-duration: 0.01ms !important;
+    /* O ATRASO também, e não só a duração.
+     *
+     * A entrada dos cartões (`pos-card-in`) usa `animation-fill-mode: backwards`
+     * com `animation-delay: var(--pos-stagger)`: antes da sua vez, o cartão
+     * segura o estado inicial, que é `opacity: 0`. Zerar só a duração deixava o
+     * atraso de pé — até 220 ms de cardápio INVISÍVEL para quem pediu para não
+     * ter movimento. Quem desliga a animação espera ver a tela, não esperar por
+     * ela. */
+    animation-delay: 0ms !important;
   }
 }
 
@@ -156,7 +334,7 @@
   scrollbar-width: thin; scrollbar-color: var(--pos-line-strong) transparent;
 }
 .pos-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
-.pos-scroll::-webkit-scrollbar-thumb { background: var(--pos-line-strong); border-radius: 5px; border: 3px solid transparent; background-clip: padding-box; }
+.pos-scroll::-webkit-scrollbar-thumb { background: var(--pos-line-strong); border-radius: var(--pos-r-xs); border: 3px solid transparent; background-clip: padding-box; }
 .pos-scroll::-webkit-scrollbar-track { background: transparent; }
 
 /* --- type scale ---------------------------------------------------------
@@ -183,7 +361,7 @@
   background: var(--pos-2); font-size: 13px; color: var(--pos-fg-2);
 }
 .pos-pill strong { color: var(--pos-fg); font-weight: 600; }
-.pos-pill__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
+.pos-pill__dot { width: 7px; height: 7px; border-radius: var(--pos-r-round); flex: none; }
 .pos-pill[data-state='online'] .pos-pill__dot { background: var(--pos-ok); }
 .pos-pill[data-state='reconnecting'] .pos-pill__dot { background: var(--pos-warn); }
 .pos-pill[data-state='offline'] .pos-pill__dot { background: var(--pos-danger); }
@@ -192,7 +370,12 @@
 
 .pos-body {
   display: grid;
-  grid-template-columns: 232px minmax(0, 1fr) 400px;
+  /* 224px é a trilha da RETAGUARDA (`w-56` do AdminShell), e as duas têm de
+     ser a mesma largura. Em 232px o seletor de conta e a chave de modo nasciam
+     7px mais largos no PDV que na retaguarda — e como são a MESMA peça nos
+     dois lados, atravessar de um para o outro fazia os dois controles saltarem
+     de tamanho debaixo do dedo. Trocar de modo não pode mexer a mobília. */
+  grid-template-columns: 224px minmax(0, 1fr) 400px;
   min-height: 0; overflow: hidden; position: relative;
   transition: grid-template-columns 200ms var(--pos-e);
 }
@@ -239,25 +422,40 @@
 .pos-nav__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .pos-nav__count {
   margin-left: auto; min-width: 22px; height: 20px; padding: 0 6px;
-  display: grid; place-items: center; border-radius: 10px;
+  display: grid; place-items: center; border-radius: var(--pos-r);
   background: var(--pos-3); color: var(--pos-fg-2); font-size: 12px; font-weight: 650;
 }
 .pos-nav__item[aria-current='page'] .pos-nav__count { background: color-mix(in srgb, var(--pos-accent) 32%, transparent); color: var(--pos-fg); }
 
 /* Uma fenda para o host pôr o que diz onde esta tela ESTÁ (a chave Balcão ⇄
    Retaguarda de quem abre o PDV de dentro de um back office). */
-.pos-rail__top { padding: var(--pos-2x) var(--pos-1x) 0; }
+/* Sem recuo lateral próprio: o rail já tem o dele, e um segundo empurrão aqui
+   punha o seletor de conta 4px à direita de tudo o que vem abaixo — enquanto a
+   chave de modo, que NÃO é filha desta caixa, ficava 8px mais larga e vazava
+   para fora do rail. Três larguras diferentes na mesma coluna de 208px.
+   Agora conta, chave, busca e menu compartilham a mesma margem. */
+/* Sem respiro próprio: os 12px do `.pos-rail` são os mesmos 12px do `pt-3` da
+   trilha da retaguarda, e os 8px daqui empurravam o seletor de conta do PDV
+   para baixo do da retaguarda. As duas peças são a MESMA, e atravessar de um
+   modo para o outro não pode mexê-las de lugar. */
+/* Sem respiro ACIMA — os 12px do `.pos-rail` já são os 12px do `pt-3` da
+   trilha da retaguarda — e 8px ENTRE as duas peças, que é o vão que a
+   retaguarda tem entre o seletor de conta e a chave de modo. As duas peças são
+   as MESMAS nos dois modos, e atravessar de um para o outro não pode mexê-las
+   de lugar. */
+.pos-rail__top { display: grid; gap: var(--pos-2x); padding: 0; }
+.pos-rail__top > * { width: 100%; }
 
 /* A busca, logo abaixo daquela chave. Só existe com a trilha por extenso: numa
    trilha de 68px de ícones o campo não cabe, e ali ele volta para a faixa da
    view (ver `useWideRail` na tela). */
-.pos-rail__search { padding: var(--pos-2x) var(--pos-1x) var(--pos-1x); }
+.pos-rail__search { padding: var(--pos-2x) 0 var(--pos-1x); }
 
 /* O disco com a inicial de quem atende. Sobrou da lista de turno que saiu do
    rail — a escolha do atendente ao abrir a mesa ainda o usa. */
 .pos-person__av {
   width: 28px; height: 28px; flex: none; display: grid; place-items: center;
-  border-radius: 50%; font-size: 12px; font-weight: 700; color: #101318;
+  border-radius: var(--pos-r-round); font-size: 12px; font-weight: 700; color: #101318;
 }
 
 /* --- content ------------------------------------------------------------ */
@@ -284,7 +482,10 @@
   min-height: 69px; padding: var(--pos-3x) var(--pos-6x);
   display: flex; align-items: center; justify-content: center; gap: var(--pos-3x);
   border-top: 1px solid var(--pos-line);
-  background: rgba(11, 11, 12, 0.88);
+  /* A faixa toma a cor do TEMA. Era `rgba(11,11,12,.88)` cravado — uma barra
+     preta atravessada no PDV claro, e o aviso "1 pedido enviado à cozinha"
+     saía em tinta escura sobre tinta escura. */
+  background: color-mix(in srgb, var(--pos-1) 88%, transparent);
   -webkit-backdrop-filter: blur(20px) saturate(130%);
   backdrop-filter: blur(20px) saturate(130%);
   font-size: 16px; font-weight: 600; letter-spacing: -0.014em; color: var(--pos-fg);
@@ -296,7 +497,7 @@
 }
 .pos-notice[data-leaving='true'] { animation: pos-notice-out 260ms var(--pos-e) both; }
 .pos-notice__i {
-  width: 30px; height: 30px; flex: none; border-radius: 50%;
+  width: 30px; height: 30px; flex: none; border-radius: var(--pos-r-round);
   display: grid; place-items: center;
   background: var(--pos-3); color: var(--pos-fg);
 }
@@ -335,7 +536,16 @@
      ponta, ficava por baixo do botão. Fora de um takeover a variável não
      existe e o valor cai em 0. */
   padding: 0 calc(var(--pos-4x) + var(--fz-takeover-inset-right, 0px)) 0 var(--pos-4x);
-  border-bottom: 1px solid var(--pos-line);
+  /* O cabeçalho é FIXO — ele fica sobre o salão enquanto as mesas rolam por
+     baixo. Em vidro, essa sobreposição se lê como o que é: uma camada. Opaco,
+     ele cortava a tela numa faixa que parecia outra seção, e o conteúdo
+     simplesmente sumia na borda. Mesmo conjunto da régua, da bandeja e do
+     filtro de praças — três números em `--pos-glass-*`. */
+  position: relative; z-index: 11;
+  background: color-mix(in srgb, var(--pos-0) var(--pos-glass-bg), transparent);
+  backdrop-filter: blur(var(--pos-glass-blur)) saturate(var(--pos-glass-sat));
+  -webkit-backdrop-filter: blur(var(--pos-glass-blur)) saturate(var(--pos-glass-sat));
+  border-bottom: 1px solid color-mix(in srgb, var(--pos-fg) 8%, transparent);
 }
 /* Coluna 1: a view e a unidade, lado a lado. `min-width: 0` para que seja o
    TÍTULO a encurtar com reticências, e não a unidade — o nome da unidade é o
@@ -351,12 +561,13 @@
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
 
-.pos-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--pos-2); border-radius: 999px; }
-/* Título à esquerda, busca no meio, e à direita TODOS os segmentados — os de
-   forma (Grade|Planta) e os de área (Salão|Balcão|…) numa fila só, e não um
-   empurrando o outro para uma segunda linha. */
+.pos-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--pos-2); border-radius: var(--pos-r-pill); }
+/* O segmentado de forma vive na ESQUERDA da faixa, como no V1.
+   À direita ele ficava encostado na comanda, longe do salão que comanda — e
+   a leitura de uma tela de operação vai da esquerda para a direita: primeiro
+   "como estou vendo", depois o que está sendo visto. */
 .pos-head__views {
-  grid-column: 3; justify-self: end;
+  grid-column: 1; justify-self: start;
   display: flex; align-items: center; gap: var(--pos-2x); min-width: 0;
 }
 .pos-head__views:empty { display: none; }
@@ -364,13 +575,80 @@
    coluna do meio fica vazia e o `1fr` dela é justamente o ar entre o título e
    os segmentados. */
 .pos-head > .pos-field { grid-column: 2; }
+/* `inline-flex` + `nowrap`: com o ícone dentro, o botão era uma caixa de
+   bloco e o rótulo caía para a linha de baixo — ícone em cima, palavra
+   embaixo, o dobro da altura. */
 .pos-seg__btn {
-  min-height: 36px; padding: 0 var(--pos-4x);
-  border: none; border-radius: 999px; background: transparent;
+  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
+  min-height: 36px; padding: 0 var(--pos-3x);
+  border: none; border-radius: var(--pos-r-pill); background: transparent;
   color: var(--pos-fg-2); font-size: 13px; font-weight: 550; cursor: pointer;
   transition: background var(--pos-t) var(--pos-e), color var(--pos-t) var(--pos-e);
 }
 .pos-seg__btn:hover { color: var(--pos-fg); }
+
+/* «Descontos aplicados» — o que esta comanda já recebeu, antes de oferecer
+   mais um. Discreto: é contexto para a decisão, não a decisão. */
+.pos-dsc__applied { display: flex; flex-direction: column; gap: 6px; }
+.pos-dsc__grant {
+  padding: 8px 10px; border-radius: var(--pos-r-xs);
+  border: 1px solid color-mix(in srgb, var(--pos-primary) 22%, transparent);
+  background: color-mix(in srgb, var(--pos-primary) 7%, transparent);
+}
+.pos-dsc__grantt {
+  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
+  font-size: 13px; font-weight: 600;
+}
+.pos-dsc__granta { color: var(--pos-danger); white-space: nowrap; }
+/* O rastro, com o «•» do V1 desenhado pela borda — sem um <span> por
+   separador, que some quando o campo do meio não existe. */
+.pos-dsc__grantm {
+  display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 3px;
+  font-size: 11px; color: var(--pos-fg-3);
+}
+.pos-dsc__grantm > * + *::before { content: '• '; }
+.pos-dsc__grantmemo { font-style: italic; }
+
+/* O socorro da taxa pendente. Âmbar como no V1 — é aviso, não erro: o caminho
+   normal fechou e este ainda está aberto. */
+.pos-svc__waive {
+  display: flex; flex-direction: column; gap: 10px;
+  padding: 12px; border-radius: var(--pos-r);
+  border: 1px solid color-mix(in srgb, var(--pos-warn) 45%, transparent);
+  background: color-mix(in srgb, var(--pos-warn) 10%, transparent);
+}
+.pos-svc__waivet { font-size: 12.5px; line-height: 1.45; color: var(--pos-fg); }
+.pos-svc__waiveb { width: 100%; justify-content: center; }
+
+/* A estrela do padrão da casa. Âmbar como no V1, e alinhada ao texto —
+   ela qualifica o rótulo, não é um ícone de ação ao lado dele. */
+.pos-svc__star { display: inline-block; margin-left: 4px; vertical-align: -1px; color: #F59E0B; }
+
+/* A condição escrita sob o valor da cortesia — a linha do V1. Fica apagada de
+   propósito: é regra a saber, não aviso a atender. */
+.pos-svc__note {
+  margin-top: 6px; font-size: 11px; line-height: 1.35; color: var(--pos-fg-3);
+}
+/* O contador do motivo. À direita, sob o campo, porque é sobre o que acabou de
+   ser digitado — e tabular para não dançar a cada tecla. */
+.pos-dsc__count {
+  margin-top: 4px; text-align: right;
+  font-size: 11px; color: var(--pos-fg-3); font-variant-numeric: tabular-nums;
+}
+
+/* A variante ALTA do segmentado: rótulo em cima, a frase do V1 embaixo.
+   `nowrap` é do botão normal, que é de uma linha só; aqui a frase é a razão
+   de o botão existir e precisa caber, então a coluna empilha e o texto quebra. */
+.pos-seg__btn--tall {
+  flex-direction: column; align-items: flex-start; gap: 2px;
+  white-space: normal; min-height: 48px; padding: 6px var(--pos-3x); text-align: left;
+}
+.pos-seg__t { font-size: 13px; font-weight: 650; }
+.pos-seg__h { font-size: 11px; font-weight: 500; color: var(--pos-fg-3); line-height: 1.3; }
+/* Modo sem destino possível: apagado e sem cursor, como no V1 — e a frase
+   embaixo continua legível, porque ela é justamente o motivo. */
+.pos-seg__btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.pos-seg__btn:disabled:hover { background: transparent; color: var(--pos-fg-2); }
 .pos-seg__btn[aria-pressed='true'] { background: var(--pos-4); color: var(--pos-fg); }
 
 .pos-field {
@@ -388,11 +666,11 @@
      um preenchimento mais claro do mesmo tom já diz "campo" sem desenhar uma
      caixa, e deixa o contorno livre para significar FOCO, que é o que ele
      precisa significar. */
-  border: 1px solid transparent; border-radius: 999px;
-  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid transparent; border-radius: var(--pos-r-pill);
+  background: var(--pos-veil);
   transition: background var(--pos-t) var(--pos-e), border-color var(--pos-t) var(--pos-e);
 }
-.pos-field:hover { background: rgba(255, 255, 255, 0.09); }
+.pos-field:hover { background: var(--pos-veil-2); }
 .pos-field:focus-within {
   border-color: var(--pos-line-strong); background: var(--pos-1);
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--pos-accent) 20%, transparent);
@@ -406,10 +684,36 @@
 
 /* --- floor -------------------------------------------------------------- */
 
+/* O salão vem em GRUPOS — ocupadas em cima, livres embaixo —, então o
+   contêiner é uma coluna de seções e a grade mora dentro de cada uma. Antes
+   ele era a própria grade, e por isso as mesas saíam em ordem de número: numa
+   casa de 207 mesas, as três ocupadas ficavam enterradas no meio de duzentas
+   livres. */
 .pos-floor {
-  flex: 1; display: grid; align-content: start; padding-bottom: var(--pos-6x);
-  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
-  gap: var(--pos-3x); padding: var(--pos-4x);
+  flex: 1; display: flex; flex-direction: column; align-content: start;
+  gap: var(--pos-2x); padding: var(--pos-4x); padding-bottom: var(--pos-6x);
+}
+.pos-floor__g {
+  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
+  gap: var(--pos-3x);
+}
+/* O cabeçalho do grupo: ponto, contagem e — só nas ocupadas — a média.
+   Versalete e pequeno: ele organiza, não compete com o número da mesa. */
+.pos-floor__h {
+  display: flex; align-items: center; gap: var(--pos-2x);
+  padding: var(--pos-2x) 2px var(--pos-1x);
+}
+.pos-floor__h + .pos-floor__g { margin-bottom: var(--pos-3x); }
+.pos-floor__dot { width: 8px; height: 8px; border-radius: var(--pos-r-round); flex: none; }
+.pos-floor__h[data-tone='busy'] .pos-floor__dot { background: var(--pos-warn); }
+.pos-floor__h[data-tone='free'] .pos-floor__dot { background: var(--pos-ok); }
+.pos-floor__n {
+  font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
+  color: var(--pos-fg-2);
+}
+.pos-floor__x {
+  display: inline-flex; align-items: center; gap: 4px;
+  font-size: 12px; font-weight: 600; color: var(--pos-fg-3);
 }
 .pos-tbl {
   position: relative; display: flex; flex-direction: column; gap: var(--pos-2x);
@@ -427,7 +731,7 @@
 .pos-card[aria-current='true'],
 .pos-lrow[aria-current='true'] {
   border-color: var(--pos-fg); background: var(--pos-3);
-  box-shadow: 0 0 0 2px var(--pos-fg), 0 8px 22px -8px rgba(0, 0, 0, 0.8);
+  box-shadow: 0 0 0 2px var(--pos-fg), 0 8px 22px -8px var(--pos-shadow-strong);
 }
 .pos-card[aria-current='true'] { --pos-edge: var(--pos-fg); }
 .pos-tbl__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--pos-2x); }
@@ -436,7 +740,27 @@
 .pos-tbl__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--pos-2x); }
 .pos-tbl__time { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--pos-fg-2); }
 .pos-tbl__total { font-size: 15px; font-weight: 650; }
-.pos-tbl__who { font-size: 12px; color: var(--pos-fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* O SELO DA SEGUNDA CONTA.
+   Discreto de propósito: ele não compete com o valor, que é o que o garçom
+   procura. Só precisa dizer «o número ao lado não é a mesa inteira». */
+.pos-tbl__bills {
+  font-size: 11px; font-weight: 600; line-height: 1;
+  padding: 2px 6px; border-radius: 999px; white-space: nowrap;
+  /* O mesmo idioma do selo de «ocupada» logo abaixo — `--pos-warn` tem valor
+     claro e escuro, então o selo acompanha o tema em vez de fixar uma cor. */
+  color: var(--pos-warn);
+  background: color-mix(in srgb, var(--pos-warn) 15%, transparent);
+}
+/* `inline-flex`, não `block`: com a contagem de pessoas a linha ganhou um
+   ícone, e num contêiner de texto o SVG virava a primeira "palavra" — ele
+   ficava sozinho em cima e "2 pessoas" caía para a linha de baixo, ocupando
+   duas linhas onde o cartão só tem uma. */
+.pos-tbl__who {
+  display: inline-flex; align-items: center; gap: 5px; min-width: 0;
+  font-size: 12px; color: var(--pos-fg-3);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.pos-tbl__who > svg { flex: none; }
 
 /* One edge treatment across every card surface: the stripe is the card's own
    left edge, clipped by its radius. A `border-left` squares off against the
@@ -467,39 +791,66 @@
  * que a planta já usa, e os que passam contraste. A pastilha continua escrita,
  * porque cor sozinha nunca carrega o estado — 8% dos homens não separa
  * vermelho de verde, e um deles está no salão. */
-.pos-tbl[data-status='free'] {
-  --pos-edge: var(--pos-ok);
-}
-.pos-tbl[data-status='occupied'] {
-  --pos-edge: var(--pos-warn);
-  background: var(--pos-warn); border-color: var(--pos-warn); color: var(--pos-on-light);
-}
-.pos-tbl[data-status='bill_requested'] {
-  --pos-edge: var(--pos-info);
-  background: var(--pos-info); border-color: var(--pos-info); color: #fff;
-}
-.pos-tbl[data-status='attention'] {
-  --pos-edge: var(--pos-danger);
-  background: var(--pos-danger); border-color: var(--pos-danger); color: #fff;
-}
-
-/* Dentro de um cartão pintado, todo texto herda a cor da frente: os cinzas
-   (`--pos-fg-2/3`) foram calculados contra o fundo escuro e somem no âmbar. */
-.pos-tbl[data-status='occupied'] :is(.pos-tbl__seats, .pos-tbl__who, .pos-tbl__time, .pos-tbl__total),
-.pos-tbl[data-status='bill_requested'] :is(.pos-tbl__seats, .pos-tbl__who, .pos-tbl__time, .pos-tbl__total),
-.pos-tbl[data-status='attention'] :is(.pos-tbl__seats, .pos-tbl__who, .pos-tbl__time, .pos-tbl__total) {
-  color: inherit; opacity: 0.85;
-}
-.pos-tbl[data-status='occupied'] .pos-tbl__total,
-.pos-tbl[data-status='bill_requested'] .pos-tbl__total,
-.pos-tbl[data-status='attention'] .pos-tbl__total { opacity: 1; }
-
-/* A pastilha, sobre o cartão pintado, vira um vidro do próprio tom em vez de
-   um segundo bloco de cor brigando com o primeiro. */
-.pos-tbl[data-status='occupied'] .pos-badge,
-.pos-tbl[data-status='bill_requested'] .pos-badge,
-.pos-tbl[data-status='attention'] .pos-badge {
-  background: rgba(0, 0, 0, 0.18); color: inherit;
+/* Os SEIS tons do V1, com a receita dele: borda no tom a 50% e um BANHO a 5%
+   — não tinta cheia.
+   O V2 pintava a mesa ocupada de âmbar sólido, e o salão virava um mosaico em
+   que nada chamava. O V1 é explícito sobre isso: "um cartão carrega UM sinal;
+   borda de 2px + fundo + ícone + pastilha + pulsar diziam cinco vezes a mesma
+   coisa, e quando meia sala está atrasada nada mais aparece".
+   LIVRE fica quase sem pintura de propósito: se toda mesa tem cor, nenhuma
+   cor chama. A pastilha continua escrita, porque cor sozinha nunca carrega o
+   estado — 8% dos homens não separa vermelho de verde, e um deles está no
+   salão. */
+.pos-tbl[data-tone='livre'] {
+  --pos-tone-c: var(--pos-ok);
+}
+.pos-tbl[data-tone='ocupada'] {
+  --pos-tone-c: var(--pos-warn);
+}
+/* «Atrasada» tem cor PRÓPRIA — nem o âmbar de ocupada, nem o vermelho de
+   parada. Sem ela, "aberta há mais de uma hora" e "sem pedir nada há uma hora"
+   viram o mesmo sinal, e o vermelho perde o que ele tem de dizer. */
+.pos-tbl[data-tone='atrasada'] {
+  --pos-tone-c: var(--pos-late);
+}
+.pos-tbl[data-tone='parada'] {
+  --pos-tone-c: var(--pos-danger);
+}
+.pos-tbl[data-tone='reservada'],
+.pos-tbl[data-tone='manutencao'] {
+  /* Cinza de propósito: não são urgência, e cor demais esconde a atrasada. */
+  --pos-tone-c: var(--pos-fg-3);
+}
+
+.pos-tbl[data-tone] {
+  --pos-edge: var(--pos-tone-c);
+  border-color: color-mix(in srgb, var(--pos-tone-c) 50%, transparent);
+  background: color-mix(in srgb, var(--pos-tone-c) 5%, var(--pos-2));
+}
+.pos-tbl[data-tone] .pos-badge {
+  background: color-mix(in srgb, var(--pos-tone-c) 12%, transparent);
+  color: var(--pos-tone-c);
+}
+.pos-tbl[data-tone='manutencao'] { background: var(--pos-3); }
+
+/* «Fechar conta» é um PEDIDO esperando resposta, e mora POR CIMA do tom: a
+   mesa continua ocupada, atrasada ou parada, e o anel é o único sinal que ela
+   ganha — para seguir visível quando o salão inteiro estiver colorido. */
+.pos-tbl[data-bill] {
+  box-shadow: 0 0 0 2px var(--pos-1), 0 0 0 4px var(--pos-danger);
+}
+
+/* A etiqueta de canto do V1: vermelha, fora da borda, por cima de qualquer
+   tom. Ela diz O QUE a mesa está esperando; o anel diz QUAL mesa, de longe.
+   As duas juntas porque o anel sozinho não se lê num salão colorido, e a
+   etiqueta sozinha não se acha numa grade de duzentas mesas. */
+.pos-tbl__bill {
+  position: absolute; z-index: 1; top: -8px; right: -8px;
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 2px 8px; border-radius: 999px;
+  background: var(--pos-danger); color: #FFFFFF;
+  font-size: 10px; font-weight: 700; line-height: 16px; white-space: nowrap;
+  box-shadow: 0 1px 3px rgb(0 0 0 / 0.28);
 }
 
 /* O hover não pode clarear um cartão já pintado — ele apagaria o estado. */
@@ -520,11 +871,50 @@
 
 /* --- catalogue ---------------------------------------------------------- */
 
+/* A faixa some quando não tem nada — ver `headHasContent` no PosScreen. */
+.pos-head[data-empty] { display: none; }
+
 .pos-cats {
-  display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
-  /* The selected card's outer ring needs somewhere to be. */
-  gap: var(--pos-3x); padding: calc(var(--pos-3x) + 3px) var(--pos-4x) 3px;
-}
+  /* UMA faixa que rola na horizontal, como no V1 — não uma grade que quebra
+     em linhas.
+     Em grade, vinte categorias viravam cinco fileiras e comiam metade da tela
+     antes do primeiro produto; e o número de fileiras mudava com a largura, de
+     modo que a posição de "Bebidas" nunca era a mesma duas vezes. Numa faixa,
+     a ordem é estável e o polegar aprende onde as coisas ficam.
+     `scroll-padding` alinha o chip ao chegar pela seta do teclado. */
+  display: flex; flex-wrap: nowrap; align-items: stretch;
+  /* NÃO encolhe. Como filho de uma coluna flex, o padrão `shrink: 1` deixava a
+     régua ceder quando a janela ficava baixa: numa tela de 652px ela passava de
+     72px para 20px e os chips apareciam como faixas coloridas sem texto. A
+     régua é o SELETOR do cardápio — ela não é a sobra da tela. */
+  flex: 0 0 auto;
+  /* E NÃO SOBE com o scroll. A régua é como se troca de seção do cardápio;
+     rolando até "Sobremesas" ela saía da tela, e voltar para as bebidas exigia
+     rolar o cardápio inteiro de volta só para alcançar o seletor. Fixa no topo
+     da área que rola, ela continua sendo o caminho entre as seções.
+     O fundo é obrigatório: sem ele os itens passam por baixo e se leem
+     sobrepostos aos chips. */
+  position: sticky; top: 0; z-index: 10;
+  background: color-mix(in srgb, var(--pos-0) var(--pos-glass-bg), transparent);
+  backdrop-filter: blur(var(--pos-glass-blur)) saturate(var(--pos-glass-sat));
+  -webkit-backdrop-filter: blur(var(--pos-glass-blur)) saturate(var(--pos-glass-sat));
+  overflow-x: auto; overscroll-behavior-x: contain;
+  scroll-snap-type: x proximity; scroll-padding-inline: var(--pos-4x);
+  gap: var(--pos-3x);
+  /* O respiro vertical é OBRIGATÓRIO aqui: `overflow-x: auto` também recorta
+     em cima e embaixo, e a ficha selecionada sobe 2px e carrega um anel de
+     5px. Sem o respiro, o anel e o topo da ficha saem cortados — foi
+     exatamente o que apareceu ao trocar a grade pela faixa. */
+  padding: 10px var(--pos-4x);
+  /* A barra de rolagem não entra na conta da altura nem aparece: a faixa se
+     arrasta com o dedo e com a roda, e uma barra cinza sob as fichas leria
+     como uma régua que ninguém pediu. */
+  scrollbar-width: none;
+}
+.pos-cats::-webkit-scrollbar { display: none; }
+/* A ficha não encolhe nem estica: largura pelo conteúdo, com um piso para o
+   nome de uma palavra não virar uma ficha estreitinha ao lado de uma larga. */
+.pos-cats > .pos-cat { flex: 0 0 auto; min-width: 156px; scroll-snap-align: start; }
 /* A rule between the filter and what it filtered. Without it the two grids run
    together and the eye has to work out where the choosing stops. */
 .pos-cats-rule {
@@ -570,13 +960,341 @@
 .pos-cat__icon {
   order: 2; margin-left: auto; flex: none;
   width: 26px; height: 26px; display: grid; place-items: center;
-  border-radius: 50%; background: rgba(0, 0, 0, 0.10);
+  border-radius: var(--pos-r-round); background: rgba(0, 0, 0, 0.10);
 }
 .pos-cat__name { display: block; font-size: 14px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; }
 .pos-cat__n { font-size: 11px; font-weight: 600; color: rgba(16, 19, 24, 0.60); line-height: 1.2; }
 
+/* O vazio da planta: ele EXPLICA, em vez de ser um salão em branco. */
+.pos-plan__none {
+  flex: 1; display: grid; place-content: center; justify-items: center;
+  gap: var(--pos-2x); padding: var(--pos-8x) var(--pos-6x); text-align: center;
+  color: var(--pos-fg-3);
+}
+.pos-plan__none .pos-empty__h { max-width: 46ch; }
+
+/* A segunda fileira do filtro — as praças do ambiente escolhido. Menor e
+   mais quieta: ela é o RECORTE de dentro, e a de cima é a que manda. */
+.pos-zones--sub { padding-top: 0; }
+.pos-zones--sub .pos-zone { font-size: 11.5px; padding-top: 4px; padding-bottom: 4px; }
+
+/* A conta de recebimento, entre a forma e o botão de confirmar. */
+.pos-acct { display: grid; gap: 5px; padding: var(--pos-3x) var(--pos-4x) 0; }
+.pos-acct__l {
+  font-size: 11px; font-weight: 600; text-transform: uppercase;
+  letter-spacing: 0.04em; color: var(--pos-fg-3);
+}
+.pos-acct__s {
+  width: 100%; min-height: 44px; padding: 0 var(--pos-3x);
+  border: 1px solid var(--pos-line-strong); border-radius: var(--pos-r);
+  background: var(--pos-1); color: var(--pos-fg); font: inherit; font-size: 14px;
+}
+.pos-acct__s:focus-visible { outline: none; border-color: var(--pos-primary); }
+
+/* O aviso de escopo — de quem são as mesas que estão à vista. */
+.pos-scope {
+  display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--pos-3x);
+  margin: 0 var(--pos-4x); padding: 6px var(--pos-3x);
+  border: 1px solid color-mix(in srgb, var(--pos-primary) 30%, transparent);
+  border-radius: var(--pos-r);
+  background: color-mix(in srgb, var(--pos-primary) 5%, transparent);
+  font-size: 11.5px; color: var(--pos-fg-2);
+}
+.pos-scope > svg { flex: none; color: var(--pos-primary); }
+.pos-scope__t { min-width: 0; }
+.pos-scope__b {
+  margin-left: auto; padding: 3px var(--pos-2x); border: 0;
+  border-radius: var(--pos-r-sm); background: none;
+  font: inherit; font-weight: 700; color: var(--pos-primary); cursor: pointer;
+}
+.pos-scope__b:hover { background: color-mix(in srgb, var(--pos-primary) 12%, transparent); }
+/* Sem praça atribuída: o mesmo lugar, o tom mais quieto — é um fato, não um
+   alerta, e a pessoa continua vendo tudo. */
+.pos-scope--none {
+  border-style: dashed; border-color: var(--pos-line-strong);
+  background: none; color: var(--pos-fg-3);
+}
+.pos-scope--none > svg { color: var(--pos-fg-3); }
+
+/* As mesas que ainda não entraram na planta. */
+.pos-unass { display: grid; gap: var(--pos-3x); padding: var(--pos-4x); align-content: start; min-height: 0; }
+.pos-unass__t { margin: 0; font-size: 14px; font-weight: 700; color: var(--pos-fg); }
+.pos-unass__h { margin: 3px 0 0; font-size: 11.5px; color: var(--pos-fg-3); }
+.pos-unass__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; overflow-y: auto; min-height: 0; }
+.pos-unass__row {
+  display: flex; align-items: center; justify-content: space-between; gap: var(--pos-2x);
+  padding: 6px var(--pos-2x); border: 1px solid var(--pos-line); border-radius: var(--pos-r);
+  font-size: 13px; color: var(--pos-fg);
+}
+.pos-unass__n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pos-unass__sub { color: var(--pos-fg-3); font-size: 11.5px; }
+.pos-unass__b {
+  flex: none; display: inline-flex; align-items: center; gap: 4px;
+  padding: 4px var(--pos-2x); border: 1px solid var(--pos-line-strong);
+  border-radius: var(--pos-r-pill); background: var(--pos-1);
+  font-size: 11.5px; font-weight: 600; color: var(--pos-fg-2); cursor: pointer;
+}
+.pos-unass__b:hover:not(:disabled) { border-color: var(--pos-primary); color: var(--pos-fg); }
+.pos-unass__b:disabled { opacity: 0.45; cursor: not-allowed; }
+
+/* ── A FICHA DA MESA, no rail ────────────────────────────────────────────
+   Sem botão de salvar: cada campo grava ao sair, e o gerente vê a planta
+   mudar atrás. Por isso ela mora aqui e não num diálogo — um diálogo cobriria
+   justamente o que se está conferindo. */
+.pos-insp { display: grid; gap: var(--pos-3x); padding: var(--pos-4x); align-content: start; }
+/* O cabeçalho da ficha recua do canto: a casca flutua ali o «Voltar à
+   retaguarda», e o «Aproximar» nascia com 36px debaixo dele — clicável em
+   parte, ilegível no resto. Vale para a ficha da mesa e a da praça: as duas
+   moram neste slot e as duas têm um botão no canto. */
+.pos-insp__head {
+  display: flex; align-items: flex-start; justify-content: space-between;
+  gap: var(--pos-2x); padding-right: 44px;
+}
+.pos-insp__t { display: block; font-size: 17px; font-weight: 700; color: var(--pos-fg); line-height: 1.2; }
+.pos-insp__where { display: block; margin-top: 2px; font-size: 11.5px; color: var(--pos-fg-3); }
+.pos-insp__zoom {
+  flex: none; display: inline-flex; align-items: center; gap: 5px;
+  padding: 5px var(--pos-2x); border: 1px solid var(--pos-line-strong);
+  border-radius: var(--pos-r-pill); background: var(--pos-1);
+  font-size: 11.5px; font-weight: 600; color: var(--pos-fg-2); cursor: pointer;
+}
+.pos-insp__zoom:disabled { opacity: 0.45; cursor: not-allowed; }
+.pos-insp__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pos-2x); }
+.pos-insp__f { display: grid; gap: 4px; min-width: 0; }
+.pos-insp__l {
+  display: flex; align-items: baseline; justify-content: space-between;
+  font-size: 11px; font-weight: 600; text-transform: uppercase;
+  letter-spacing: 0.04em; color: var(--pos-fg-3);
+}
+.pos-insp__deg { text-transform: none; letter-spacing: 0; color: var(--pos-fg-2); }
+.pos-insp__f input[type='number'],
+.pos-insp__f input[type='text'],
+.pos-insp__f input:not([type]) {
+  width: 100%; min-height: 40px; padding: 0 var(--pos-3x);
+  border: 1px solid var(--pos-line-strong); border-radius: var(--pos-r);
+  background: var(--pos-1); color: var(--pos-fg); font: inherit; font-size: 14px;
+}
+.pos-insp__f input:focus-visible { outline: none; border-color: var(--pos-primary); }
+.pos-insp__f input[type='range'] { width: 100%; accent-color: var(--pos-primary); }
+.pos-insp__detach {
+  display: inline-flex; align-items: center; gap: 6px; justify-content: flex-start;
+  padding: var(--pos-2x); border: 0; border-radius: var(--pos-r);
+  background: none; font-size: 12px; color: var(--pos-fg-3); cursor: pointer;
+}
+.pos-insp__detach:hover { background: var(--pos-2); color: var(--pos-danger); }
+
+/* A FICHA DA PRAÇA: o que a da mesa não tem. */
+/* A dica e o vazio explicado — a mesma tinta, porque são a mesma voz. */
+.pos-insp__hint {
+  margin: 0; padding: 6px var(--pos-2x); border-radius: var(--pos-radius);
+  background: var(--pos-2); font-size: 11.5px; line-height: 1.45; color: var(--pos-fg-3);
+}
+.pos-insp__cores { display: flex; flex-wrap: wrap; gap: var(--pos-2x); }
+.pos-insp__cor {
+  width: 26px; height: 26px; padding: 0; border-radius: var(--pos-r-round);
+  border: 2px solid transparent; cursor: pointer; transition: border-color var(--pos-fast);
+}
+/* A escolhida ganha um aro da COR DO TEXTO, não da própria cor: um aro na
+   mesma tinta some contra a amostra, e o operador não vê qual está valendo. */
+.pos-insp__cor[aria-pressed='true'] { border-color: var(--pos-fg); }
+
+.pos-insp__mhead { display: flex; align-items: center; justify-content: space-between; gap: var(--pos-2x); }
+.pos-insp__pick {
+  display: inline-flex; align-items: center; gap: 5px; padding: 4px var(--pos-2x);
+  border: 1px solid var(--pos-line-strong); border-radius: var(--pos-r-pill);
+  background: var(--pos-1); font-size: 11.5px; font-weight: 600;
+  color: var(--pos-fg-2); cursor: pointer; transition: all var(--pos-fast);
+}
+.pos-insp__pick:hover { border-color: var(--pos-primary); color: var(--pos-fg); }
+.pos-insp__pick[aria-pressed='true'] {
+  border-color: var(--pos-primary); background: var(--pos-primary); color: var(--pos-primary-fg);
+}
+
+/* A lista rola sozinha: numa praça de vinte e quatro mesas ela empurraria o
+   «Apagar praça» para fora da ficha, e o gerente rolaria a coluna inteira
+   procurando um botão que estava logo abaixo. */
+.pos-insp__mesas {
+  display: grid; gap: 4px; max-height: 220px; overflow-y: auto;
+  margin: 0; padding: 0 2px 0 0; list-style: none;
+}
+.pos-insp__mesas li {
+  display: flex; align-items: center; justify-content: space-between; gap: var(--pos-2x);
+  padding: 5px var(--pos-2x); border: 1px solid var(--pos-line); border-radius: var(--pos-radius);
+  font-size: 12.5px;
+}
+.pos-insp__mn { min-width: 0; }
+.pos-insp__mx { color: var(--pos-fg-3); }
+.pos-insp__malso { display: block; font-size: 10.5px; color: var(--pos-fg-3); }
+.pos-insp__mdrop {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 22px; height: 22px; flex: none; border: 0; border-radius: var(--pos-r-pill);
+  background: none; color: var(--pos-fg-3); cursor: pointer;
+}
+.pos-insp__mdrop:hover { background: var(--pos-2); color: var(--pos-danger); }
+
+.pos-insp__confirm {
+  display: grid; gap: var(--pos-2x); padding: var(--pos-3x);
+  border: 1px solid color-mix(in srgb, var(--pos-danger) 40%, transparent);
+  border-radius: var(--pos-radius);
+  background: color-mix(in srgb, var(--pos-danger) 6%, transparent);
+}
+.pos-insp__ct { margin: 0; font-size: 13px; font-weight: 700; color: var(--pos-fg); }
+.pos-insp__cbtns { display: flex; gap: var(--pos-2x); }
+.pos-insp__cbtns .pos-btn { flex: 1; }
+.pos-btn--danger {
+  border-color: var(--pos-danger); background: var(--pos-danger); color: #fff;
+}
+.pos-btn--danger:hover:not(:disabled) { filter: brightness(1.08); }
+
+/* A barra da planta: o que existe, e o botão de mexer nela. */
+.pos-planbar__n { font-size: 12px; color: var(--pos-fg-3); }
+.pos-planbar__b {
+  display: inline-flex; align-items: center; gap: 5px;
+  margin-left: auto; padding: 5px var(--pos-3x);
+  border: 1px solid var(--pos-line-strong); border-radius: var(--pos-r-pill);
+  background: var(--pos-1); font-size: 12px; font-weight: 600;
+  color: var(--pos-fg-2); cursor: pointer; transition: all var(--pos-fast);
+}
+.pos-planbar__b:hover { border-color: var(--pos-primary); color: var(--pos-fg); }
+/* O «Organizar automaticamente» não é a ação principal da barra — o
+   «Concluir» é. Sem `margin-left: auto` ele fica ao lado das ferramentas,
+   onde a sequência é: desenhar praça, organizar mesas, concluir. */
+.pos-planbar__b--flat { margin-left: 0; }
+.pos-planbar__b[aria-pressed='true'] {
+  border-color: var(--pos-primary); background: var(--pos-primary);
+  color: var(--pos-primary-fg);
+}
+/* COM O CADEADO LIGADO, «Organizar automaticamente» é a única saída.
+   O V1 o torna o botão primário nesse estado, e a razão é a da régua do
+   porte: ação bloqueada diz o que falta E oferece o caminho. As três
+   ferramentas apagadas ao lado explicam o problema; este botão é a resposta,
+   e uma resposta não pode ter o mesmo peso visual do resto da barra. */
+.pos-planbar__b--go {
+  border-color: var(--pos-warn);
+  background: color-mix(in srgb, var(--pos-warn) 16%, var(--pos-1));
+  color: var(--pos-fg);
+}
+.pos-planbar__b--go:hover { background: color-mix(in srgb, var(--pos-warn) 26%, var(--pos-1)); }
+/* «Salva sozinho» é promessa: o aviso a cumpre, e some quando se conclui. */
+.pos-planbar__hint { font-size: 11.5px; color: var(--pos-fg-3); }
+
+/* AS TRÊS FERRAMENTAS DE PRAÇA, agrupadas numa moldura só.
+   A moldura importa: soltos na barra, os três ícones leriam como mais três
+   botões avulsos ao lado de «Editar planta», e nada diria que eles são uma
+   escolha entre si. A palavra «Praça» dentro da moldura é o rótulo do grupo —
+   é assim no V1, e é o que impede o operador de ler «quadrado» como forma da
+   MESA. */
+.pos-planbar__tools {
+  display: inline-flex; align-items: center; gap: 2px;
+  padding: 3px; border: 1px solid var(--pos-line); border-radius: var(--pos-r-pill);
+}
+.pos-planbar__tl {
+  padding: 0 5px 0 3px; font-size: 11px; font-weight: 600;
+  color: var(--pos-fg-3); letter-spacing: 0.01em;
+}
+.pos-planbar__t {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 28px; height: 28px; border: 0; border-radius: var(--pos-r-pill);
+  background: none; color: var(--pos-fg-2); cursor: pointer;
+  transition: background var(--pos-fast), color var(--pos-fast);
+}
+.pos-planbar__t:hover:not(:disabled) { background: var(--pos-2); color: var(--pos-fg); }
+.pos-planbar__t[aria-pressed='true'] { background: var(--pos-primary); color: var(--pos-primary-fg); }
+/* Travado NÃO é invisível: o ícone apagado guarda o lugar e o `title` diz o
+   que falta. Sumir com a ferramenta deixaria o operador procurando por ela. */
+.pos-planbar__t:disabled { opacity: 0.4; cursor: not-allowed; }
+
+/* As duas faixas da planta, abaixo da barra: o cadeado e a instrução do
+   gesto. Largura inteira porque são frases, não rótulos — espremidas na barra
+   elas empurrariam o censo para fora. */
+.pos-planbar__lock,
+.pos-planbar__tip {
+  display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
+  margin: 0 var(--pos-4x) var(--pos-3x);
+  padding: 6px var(--pos-3x); border-radius: var(--pos-radius);
+  font-size: 11.5px; line-height: 1.45;
+}
+.pos-planbar__lock {
+  border: 1px solid color-mix(in srgb, var(--pos-warn) 40%, transparent);
+  background: color-mix(in srgb, var(--pos-warn) 8%, transparent);
+  color: var(--pos-fg-2);
+}
+.pos-planbar__lock svg { flex: none; color: var(--pos-warn); }
+.pos-planbar__tip {
+  border: 1px solid color-mix(in srgb, var(--pos-primary) 30%, transparent);
+  background: color-mix(in srgb, var(--pos-primary) 7%, transparent);
+  color: var(--pos-fg-2);
+}
+/* Em edição o palco não rola com o dedo — o dedo está movendo mesa. */
+/* O vazio da planta ocupa o lugar do desenho, com a mesma moldura tracejada que
+   o V1 usa: uma borda pontilhada diz "aqui vai entrar coisa" de um jeito que
+   texto centrado sozinho não diz. */
+.pos-plan__empty {
+  flex: 1 1 auto; min-height: 220px;
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: var(--pos-2x); padding: var(--pos-6x) var(--pos-4x);
+  border: 1px dashed var(--pos-line); border-radius: var(--pos-r);
+  color: var(--pos-fg-3); text-align: center;
+}
+.pos-plan__empty-t { font-size: 13px; font-weight: 600; color: var(--pos-fg-2); }
+.pos-plan__empty-h { font-size: 11px; line-height: 1.5; max-width: 34ch; }
+
+.pos-plan2[data-editing] { touch-action: none; }
+
+/* A planta e a trilha dela, numa coluna só. */
+.pos-plan__wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
+.pos-plan__crumbs {
+  flex: none; display: flex; align-items: center; gap: 4px;
+  padding: var(--pos-3x) var(--pos-4x) 0; font-size: 13px; color: var(--pos-fg-3);
+}
+.pos-plan__crumb {
+  padding: 3px var(--pos-2x); border: 0; border-radius: var(--pos-r-sm);
+  background: none; font: inherit; font-weight: 600; color: var(--pos-fg-3);
+  cursor: pointer; transition: background var(--pos-fast), color var(--pos-fast);
+}
+.pos-plan__crumb:hover { color: var(--pos-fg); }
+.pos-plan__crumb[aria-current='page'] { background: var(--pos-2); color: var(--pos-fg); cursor: default; }
+/* A contagem do que está EM FOCO — não a do salão inteiro. */
+.pos-plan__count { margin-left: auto; font-size: 12px; font-weight: 600; }
+
+/* Os ambientes como atalho. Um salão de 64m não se lê inteiro. */
+.pos-plan__areas {
+  flex: none; display: flex; gap: var(--pos-2x);
+  padding: var(--pos-2x) var(--pos-4x) 0; overflow-x: auto; scrollbar-width: none;
+}
+.pos-plan__area {
+  flex: none; padding: 5px var(--pos-3x);
+  border: 1px solid var(--pos-line); border-radius: var(--pos-r-pill);
+  background: var(--pos-1); font-size: 12px; font-weight: 600;
+  color: var(--pos-fg-2); cursor: pointer;
+  transition: all var(--pos-fast);
+}
+.pos-plan__area:hover { border-color: var(--pos-line-strong); color: var(--pos-fg); }
+.pos-plan__area[aria-pressed='true'] {
+  border-color: var(--pos-primary); background: var(--pos-primary);
+  color: var(--pos-primary-fg);
+}
+
+/* A PLANTA em metros. O `viewBox` faz a conta de escala; o CSS só dá a caixa
+   em que ela cabe, e a folga para o dedo não encostar nas bordas. */
+.pos-plan2 {
+  flex: 1; min-height: 0; width: 100%;
+  padding: var(--pos-3x);
+  background: var(--pos-1);
+}
+
+/* O nome da seção, acima da grade dela. Discreto de propósito: ele DIVIDE, e
+   quem tem de gritar é o cartão do prato. */
+.pos-sect {
+  margin: 0; padding: var(--pos-4x) var(--pos-4x) 0;
+  font-size: 11px; font-weight: 800; text-transform: uppercase;
+  letter-spacing: 0.06em; color: var(--pos-fg-3);
+}
+/* A grade abaixo de um rótulo não repete o respiro de cima. */
+.pos-sect + .pos-items { padding-top: var(--pos-2x); }
+
 .pos-items {
-  flex: 1; display: grid; align-content: start; padding-bottom: var(--pos-6x);
+  display: grid; align-content: start; padding-bottom: var(--pos-6x);
   grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
   gap: var(--pos-3x); padding: var(--pos-4x);
 }
@@ -599,7 +1317,12 @@
   background: var(--pos-item-tone, var(--pos-line-strong));
   transition: width 280ms var(--pos-spring);
 }
-.pos-item[data-filled='true']::before { width: 100%; }
+.pos-item[data-filled='true']::before {
+  width: 100%;
+  /* O preenchimento é o tom REBAIXADO, não a cor da tira. Ver a nota na
+     paleta: com a cor cheia o card vira um bloco sólido e a tinta some. */
+  background: var(--pos-item-tone-on, var(--pos-item-tone, var(--pos-3)));
+}
 /* Content rides above the growing edge. */
 .pos-item > * { position: relative; z-index: 1; }
 
@@ -616,7 +1339,7 @@
 .pos-item__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
 .pos-item__img {
   flex: none; display: block; overflow: hidden;
-  width: 52px; height: 52px; border-radius: var(--pos-r-sm, 8px);
+  width: 52px; height: 52px; border-radius: var(--pos-r-sm);
   background: var(--pos-3);
 }
 .pos-item__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
@@ -626,14 +1349,14 @@
 /* Quantity on the ticket paints the card in its own category identity — the
    most legible selected state there is at arm's length. */
 .pos-item { transition: background var(--pos-t) var(--pos-e), border-color var(--pos-t) var(--pos-e), color 180ms 90ms linear; }
-.pos-item[data-filled='true'] { color: #121214; border-color: transparent; }
+.pos-item[data-filled='true'] { color: var(--pos-on-filled, #121214); border-color: transparent; }
 .pos-item__route { font-size: 10px; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase; color: var(--pos-fg-3); }
 .pos-item__name { font-size: 15px; font-weight: 600; line-height: 1.25; }
 .pos-item__price { font-size: 13px; font-weight: 550; color: var(--pos-fg-2); }
 /* On a filled card the secondary text needs its own ink: --pos-fg-2 is tuned
    for a dark surface and turns invisible on a pastel one. */
-.pos-item[data-filled='true'] .pos-item__route { color: rgba(16, 19, 24, 0.6); }
-.pos-item[data-filled='true'] .pos-item__price { color: rgba(16, 19, 24, 0.72); }
+.pos-item[data-filled='true'] .pos-item__route { color: color-mix(in srgb, var(--pos-on-filled, #101318) 60%, transparent); }
+.pos-item[data-filled='true'] .pos-item__price { color: color-mix(in srgb, var(--pos-on-filled, #101318) 72%, transparent); }
 .pos-item__foot { margin-top: auto; display: flex; align-items: center; justify-content: flex-end; gap: var(--pos-2x); }
 
 /* The stepper on the card: add to THIS table without leaving the grid. */
@@ -656,6 +1379,9 @@
 .pos-item[data-filled='true'] .pos-step__b:hover:not(:disabled) { background: rgba(255,255,255,0.85); }
 .pos-item[data-filled='true'] .pos-step__b:disabled { color: rgba(0,0,0,0.35); }
 .pos-step__n { min-width: 26px; text-align: center; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
+/* Zero apagado: numa grade de quarenta cartões é o que separa "não lancei" de
+   "lancei um" sem obrigar a ler o número de cada um. */
+.pos-step__n[data-zero] { color: var(--pos-fg-3); font-weight: 600; }
 
 /* --- list view ---------------------------------------------------------- */
 
@@ -686,7 +1412,7 @@
 
 
 .pos-kbd {
-  padding: 1px 5px; border: 1px solid var(--pos-line-strong); border-radius: 4px;
+  padding: 1px 5px; border: 1px solid var(--pos-line-strong); border-radius: var(--pos-r-xs);
   background: var(--pos-0); color: var(--pos-fg-3);
   font-size: 10px; font-weight: 700; font-family: inherit; letter-spacing: 0.03em;
 }
@@ -698,7 +1424,7 @@
 
 .pos-tkt__collapse {
   display: none; margin-left: auto; place-items: center;
-  height: 34px; width: 34px; border: none; border-radius: 999px;
+  height: 34px; width: 34px; border: none; border-radius: var(--pos-r-pill);
   background: none; color: var(--pos-fg-2); cursor: pointer;
 }
 .pos-tkt__collapse:hover { background: var(--pos-2); color: var(--pos-fg); }
@@ -748,20 +1474,25 @@
 .pos-tab[aria-selected='true'] { color: var(--pos-fg); border-bottom-color: var(--pos-accent); }
 .pos-tab__n {
   min-width: 20px; height: 18px; padding: 0 5px; display: grid; place-items: center;
-  border-radius: 9px; background: var(--pos-3); color: var(--pos-fg-2);
+  border-radius: var(--pos-r-sm); background: var(--pos-3); color: var(--pos-fg-2);
   font-size: 11px; font-weight: 700;
 }
 .pos-tab[aria-selected='true'] .pos-tab__n { background: var(--pos-4); color: var(--pos-fg); }
-.pos-tab__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pos-warn); }
+.pos-tab__dot { width: 7px; height: 7px; border-radius: var(--pos-r-round); background: var(--pos-warn); }
 
 .pos-activity { padding: var(--pos-3x) var(--pos-4x); display: grid; gap: var(--pos-4x); }
 
 
 
 .pos-ln {
-  /* A coluna do marcador encolheu de 22px para 14px: com o ponto no lugar da
-     bolha, o resto era recuo pago pelo NOME do prato, que é o que se lê. */
-  display: grid; grid-template-columns: 14px minmax(0, 1fr) auto auto;
+  /* TRÊS colunas: nome · selo · preço.
+     Havia uma quarta, de 14px, só para o marcador de estado. Ela existia para
+     a linha pendente e sobrava na enviada — e quando a enviada deixou de
+     desenhar o marcador, o NOME caiu naquela coluna de 14px: "Cerveja
+     Therezopolis 600ml" quebrava em três linhas com o selo "Enviado" por cima
+     delas. O estado do pendente já é a barra âmbar do `::before`, que não
+     ocupa coluna nenhuma. */
+  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
   align-items: center; gap: var(--pos-2x);
   min-height: 58px; margin: 0 var(--pos-3x) var(--pos-2x);
   padding: var(--pos-2x) var(--pos-3x) var(--pos-2x) var(--pos-2x);
@@ -782,46 +1513,100 @@
 .pos-tot { padding: var(--pos-3x) var(--pos-4x); border-top: 1px solid var(--pos-line); background: transparent; }
 .pos-tot__r { display: flex; align-items: baseline; justify-content: space-between; gap: var(--pos-3x); font-size: 13px; color: var(--pos-fg-2); margin-bottom: 6px; }
 .pos-tot__r > span:last-child { color: var(--pos-fg-2); font-weight: 500; }
+
+/* O que já entrou. Verde porque é dinheiro recebido, e o sinal é o MENOS: a
+   linha desconta do total logo acima, ela não soma a ele. */
+.pos-paid { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
+.pos-paid__h { display: flex; align-items: center; justify-content: space-between; gap: var(--pos-3x);
+  width: 100%; background: none; border: 0; padding: 2px 0; cursor: pointer;
+  font-size: 12px; font-weight: 600; color: var(--pos-ok); }
+.pos-paid__h:hover { opacity: .8; }
+.pos-paid__n { display: inline-flex; align-items: center; gap: 4px; }
+.pos-paid__r { display: flex; align-items: baseline; justify-content: space-between; gap: var(--pos-3x);
+  font-size: 12px; color: var(--pos-ok); padding-left: 16px; }
+.pos-paid__who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pos-paid__v { font-weight: 600; white-space: nowrap; }
+
+/* «Número de Pessoas»: o passo-a-passo do V1. Os botões são redondos e grandes
+   porque o dedo do operador acerta um círculo de 44px, não um retângulo de 28. */
+.pos-gcount { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 4px 0 8px; }
+.pos-gcount__step { display: inline-flex; align-items: center; justify-content: center;
+  width: 46px; height: 46px; border-radius: 999px; flex: 0 0 auto; cursor: pointer;
+  border: 1px solid var(--pos-edge, var(--pos-4)); background: var(--pos-2); color: var(--pos-fg-1); }
+.pos-gcount__step:hover:not(:disabled) { background: var(--pos-3); }
+.pos-gcount__step:disabled { opacity: .4; cursor: not-allowed; }
+.pos-gcount__n { width: 84px; height: 54px; text-align: center; font-size: 26px; font-weight: 700;
+  border-radius: var(--pos-r); border: 1px solid var(--pos-4); background: var(--pos-1);
+  color: var(--pos-fg-1); padding: 0 8px; }
+.pos-gcount__list { display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow-y: auto; padding-right: 4px; }
+.pos-gcount__row { display: flex; align-items: center; gap: 8px; }
+.pos-gcount__row--new { opacity: .6; }
+.pos-gcount__i { display: inline-flex; align-items: center; justify-content: center;
+  width: 28px; height: 28px; border-radius: 999px; flex: 0 0 auto; font-size: 11px; font-weight: 700;
+  background: color-mix(in srgb, var(--pos-primary) 15%, transparent); color: var(--pos-primary); }
+.pos-gcount__i[data-anon] { background: var(--pos-3); color: var(--pos-fg-3); }
+.pos-gcount__i--new { background: none; border: 1px dashed var(--pos-4); color: var(--pos-fg-3); }
+.pos-gcount__ghost { display: flex; flex: 1; align-items: center; height: 36px; padding: 0 12px;
+  border: 1px dashed var(--pos-4); border-radius: var(--pos-r); font-size: 13px; color: var(--pos-fg-3); }
+
+/* Um pedaço clicável dentro de uma linha de texto: sublinhado pontilhado, e
+   não cor — a linha toda é secundária, e pintar um trecho dela de primário
+   faria ele competir com o total. */
+.pos-tkt__link { background: none; border: 0; padding: 0; font: inherit; color: inherit;
+  cursor: pointer; text-decoration: underline; text-decoration-style: dotted;
+  text-underline-offset: 2px; }
+.pos-tkt__link:hover { color: var(--pos-fg-1); }
 .pos-tot__g { margin-top: var(--pos-2x); padding-top: var(--pos-2x); border-top: 1px dashed var(--pos-line-strong); }
 .pos-tot__g { display: flex; justify-content: space-between; align-items: baseline; gap: var(--pos-3x); margin-top: var(--pos-3x); padding-top: var(--pos-3x); border-top: 1px dashed var(--pos-line-strong); }
 
-.pos-pay { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--pos-3x); padding: var(--pos-3x) var(--pos-4x) 0; }
+/* De três a nove formas de pagamento.
+   `grid-auto-flow: column` cabia as três do começo e espremia as nove de uma
+   casa que aceita Pix, débito, crédito, vale e conta — cada ladrilho ficava
+   com 35px de largura e o nome quebrava em três linhas. Em `auto-fit` elas
+   passam a QUEBRAR em linhas, e a faixa rola se passar da altura. */
+.pos-pay {
+  display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
+  gap: var(--pos-3x); padding: var(--pos-3x) var(--pos-4x) 0;
+  max-height: 30vh; overflow-y: auto;
+}
 /* Square holds the glyph; the word sits outside it. Keeping the label out of
    the box lets the box stay a proper touch square instead of a tall pill
    stretched to fit two lines of text. */
+/* O NOME mora DENTRO do quadrado que se aperta.
+   Fora dele, o rótulo não era o alvo do toque — o dedo caía no quadrado e a
+   palavra ficava ali como legenda — e, com o ladrilho escolhido em laranja
+   cheio, o nome continuava preto por baixo, como se pertencesse a outra
+   coisa. Dentro, o botão inteiro é uma peça só: alvo, ícone e palavra. */
 .pos-pay__b {
-  display: flex; flex-direction: column; align-items: center; gap: 7px;
-  border: none; background: none; padding: 0; cursor: pointer;
-  color: var(--pos-fg-2); font-size: 13px; font-weight: 550;
-  transition: color var(--pos-t) var(--pos-e);
-}
-.pos-pay__b:hover { color: var(--pos-fg); }
-.pos-pay__b span {
-  width: 100%; min-height: var(--pos-hit);
-  display: grid; place-items: center;
+  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
+  min-height: calc(var(--pos-hit) + 22px); padding: var(--pos-2x) 6px;
   border: 1px solid var(--pos-line-strong); border-radius: var(--pos-r);
-  background: var(--pos-2);
+  background: var(--pos-2); cursor: pointer;
+  color: var(--pos-fg-2); font-size: 12px; font-weight: 550; line-height: 1.2;
+  text-align: center; overflow-wrap: anywhere; hyphens: auto;
   transition: background var(--pos-t) var(--pos-e), border-color var(--pos-t) var(--pos-e), color var(--pos-t) var(--pos-e);
 }
-.pos-pay__b:hover span { background: var(--pos-3); }
+.pos-pay__b:hover { color: var(--pos-fg); background: var(--pos-3); }
+.pos-pay__b span { display: grid; place-items: center; }
 /* The radio reports itself with aria-checked, not aria-pressed — the selected
    method has to read as chosen from across the counter, so it goes solid. */
-.pos-pay__b[aria-checked='true'] { color: var(--pos-fg); font-weight: 620; }
-.pos-pay__b[aria-checked='true'] span {
-  background: var(--pos-primary); border-color: var(--pos-primary); color: var(--pos-primary-fg);
+.pos-pay__b[aria-checked='true'] {
+  background: var(--pos-primary); border-color: var(--pos-primary);
+  color: var(--pos-primary-fg); font-weight: 700;
   box-shadow: 0 0 0 3px rgba(247, 247, 248, 0.16);
 }
+.pos-pay__b[aria-checked='true']:hover { background: var(--pos-primary); }
 
 .pos-cta { padding: var(--pos-4x); padding-bottom: calc(var(--pos-4x) + var(--pos-safe-b)); }
 .pos-btn {
   display: inline-flex; align-items: center; justify-content: center; gap: var(--pos-2x);
   width: 100%; min-height: 60px;
-  border: 1px solid var(--pos-primary); border-radius: var(--pos-r-pill, 999px);
+  border: 1px solid var(--pos-primary); border-radius: var(--pos-r-pill);
   background: var(--pos-primary); color: var(--pos-primary-fg);
   font-size: 17px; font-weight: 620; letter-spacing: -0.012em; cursor: pointer;
   transition: background var(--pos-t) var(--pos-e), transform var(--pos-t) var(--pos-e);
 }
-.pos-btn:hover:not(:disabled) { background: #FFFFFF; border-color: #FFFFFF; }
+.pos-btn:hover:not(:disabled) { background: var(--pos-primary-hover); border-color: var(--pos-primary-hover); }
 .pos-btn:active:not(:disabled) { transform: scale(0.99); }
 .pos-btn:disabled { background: var(--pos-2); border-color: var(--pos-line); color: var(--pos-fg-3); cursor: not-allowed; }
 .pos-btn .pos-kbd { background: rgba(0,0,0,0.08); border-color: rgba(0,0,0,0.16); color: inherit; opacity: 0.75; }
@@ -838,20 +1623,57 @@
   flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
   gap: var(--pos-2x); padding: var(--pos-8x) var(--pos-4x); text-align: center; color: var(--pos-fg-3);
 }
-.pos-empty__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--pos-2); color: var(--pos-fg-3); }
+.pos-empty__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--pos-r-round); background: var(--pos-2); color: var(--pos-fg-3); }
 .pos-empty__t { font-size: 15px; font-weight: 600; color: var(--pos-fg-2); }
 .pos-empty__s { font-size: 13px; max-width: 34ch; }
 
 /* --- bottom dock: open tickets ------------------------------------------ */
 
-.pos-dock {
-  display: flex; gap: 0; padding: 0 var(--pos-2x);
-  background: var(--pos-0); border-top: 1px solid var(--pos-line);
-  /* Scroll snapping so a chip never comes to rest half-cut at the edge. */
+/* A BANDEJA é a moldura; quem rola é a fita de dentro.
+   Enquanto a alça de recolher vivia na mesma caixa que rola, ela ficava a doze
+   comandas de distância do polegar numa noite cheia — que é exatamente a noite
+   em que alguém quer a grade inteira à vista. */
+.pos-dock { position: relative; display: flex; }
+.pos-dock__strip {
+  display: flex; gap: 0; padding: 0 var(--pos-2x); flex: 1; min-width: 0;
   scroll-snap-type: x proximity; scroll-padding-inline: var(--pos-4x);
   overflow-x: auto; scrollbar-width: none;
 }
+.pos-dock__strip::-webkit-scrollbar { display: none; }
+/* A alça, encostada no canto de cima à direita — a medida e o lugar do V1. */
+.pos-dock__shut {
+  position: absolute; right: 0; top: 0; z-index: 2;
+  display: grid; place-items: center; width: 28px; height: 28px;
+  border: 1px solid var(--pos-line); border-top: none; border-right: none;
+  border-bottom-left-radius: var(--pos-r);
+  background: var(--pos-1); color: var(--pos-fg-3); cursor: pointer;
+  transition: background var(--pos-fast), color var(--pos-fast);
+}
+.pos-dock__shut:hover { background: var(--pos-3); color: var(--pos-fg); }
+/* Recolhida, a bandeja é UMA linha que diz quantas estão abertas e volta. */
+.pos-dock--shut { padding: 0; }
+.pos-dock__reopen {
+  display: flex; align-items: center; justify-content: center; gap: 6px;
+  width: 100%; height: 34px; border: none; background: none; cursor: pointer;
+  font-size: 12px; font-weight: 600; color: var(--pos-fg-2);
+  transition: background var(--pos-fast), color var(--pos-fast);
+}
+.pos-dock__reopen:hover { background: var(--pos-3); color: var(--pos-fg); }
+
+.pos-dock {
+  display: flex; gap: 0;
+  /* Mesmo vidro do filtro de praças: a bandeja fica SOBRE o salão em vez de
+     ser mais uma faixa opaca cortando a tela. As mesas continuam aparecendo
+     por trás, e a fita de comandas se lê como uma camada — que é o que ela é.
+     Uma cor sólida a cada canto empilhava três planos de fundo diferentes no
+     mesmo rodapé. */
+  background: color-mix(in srgb, var(--pos-0) var(--pos-glass-bg), transparent);
+  backdrop-filter: blur(var(--pos-glass-blur)) saturate(var(--pos-glass-sat));
+  -webkit-backdrop-filter: blur(var(--pos-glass-blur)) saturate(var(--pos-glass-sat));
+  border-top: 1px solid color-mix(in srgb, var(--pos-fg) 8%, transparent);
+}
 .pos-dock::-webkit-scrollbar { display: none; }
+
 .pos-dchip {
   flex: 0 0 auto; display: flex; align-items: center; gap: var(--pos-3x);
   min-height: 68px; padding: 0 var(--pos-4x);
@@ -890,7 +1712,7 @@
 }
 .pos-dchip__st {
   margin-left: var(--pos-2x); width: 26px; height: 26px; flex: none;
-  display: grid; place-items: center; border-radius: 50%;
+  display: grid; place-items: center; border-radius: var(--pos-r-round);
 }
 .pos-dchip__st[data-status='occupied']       { background: color-mix(in srgb, var(--pos-warn) 18%, transparent); color: var(--pos-warn); }
 .pos-dchip__st[data-status='bill_requested'] { background: color-mix(in srgb, var(--pos-info) 18%, transparent); color: var(--pos-info); }
@@ -926,7 +1748,7 @@
   .pos-body { grid-template-columns: 60px minmax(0, 1fr); }
   .pos-aside {
     position: absolute; inset: 0 0 0 auto; width: min(420px, 88vw); z-index: 30;
-    transform: translateX(101%); box-shadow: -24px 0 48px rgba(0,0,0,0.5);
+    transform: translateX(101%); box-shadow: -24px 0 48px var(--pos-shadow);
     transition: transform 220ms var(--pos-e);
   }
   .pos-aside[data-open='true'] { transform: translateX(0); }
@@ -952,7 +1774,14 @@
    Acima de 640px nada disto existe: a trilha da esquerda volta a ser a
    navegação, que é o desenho certo para um terminal de balcão de 15".
    -------------------------------------------------------------------------- */
-.pos-navbar { display: none; }
+/* Peças de CELULAR: existem só dentro da media query de 640px.
+   Sem esta linha, o `.pos-cartbar` (a barra "Mesa 11 · 2 itens · R$ 74,00" que
+   reabre a comanda no celular) nascia visível no desktop e ocupava a TERCEIRA
+   COLUNA do grid — a coluna da comanda. O aside era empurrado para a linha 2,
+   embaixo do rail esquerdo, com 208px de largura. O caminho para ver isso é
+   estreito e por isso escapou: só acontece com a mesa selecionada, comanda com
+   itens, ao tocar "Adicionar itens". */
+.pos-navbar, .pos-cartbar { display: none; }
 .pos-more { display: none; }
 
 @media (max-width: 640px) {
@@ -1072,7 +1901,7 @@
   .pos-navbar__text { font-size: 11px; font-weight: 550; letter-spacing: 0.01em; }
   .pos-navbar__count {
     position: absolute; top: -4px; right: -10px;
-    min-width: 16px; padding: 0 4px; border-radius: 999px;
+    min-width: 16px; padding: 0 4px; border-radius: var(--pos-r-pill);
     background: var(--pos-accent); color: var(--pos-accent-fg);
     font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
   }
@@ -1080,7 +1909,7 @@
   .pos-more { display: block; position: fixed; inset: 0; z-index: 50; }
   .pos-more__scrim {
     position: absolute; inset: 0; border: none; padding: 0;
-    background: rgba(0, 0, 0, 0.55); cursor: pointer;
+    background: var(--pos-scrim); cursor: pointer;
   }
   /* Entra pela ESQUERDA, de onde a trilha saiu: é a mesma navegação, guardada
      no mesmo lado em que ela morava na tela larga. */
@@ -1099,7 +1928,7 @@
   .pos-more__head { display: flex; align-items: center; gap: var(--pos-2x); }
   .pos-more__close {
     margin-left: auto; display: grid; place-items: center;
-    height: 36px; width: 36px; border: none; border-radius: 999px;
+    height: 36px; width: 36px; border: none; border-radius: var(--pos-r-pill);
     background: none; color: var(--pos-fg-2); cursor: pointer;
   }
   .pos-more__close:hover { background: var(--pos-2); color: var(--pos-fg); }
@@ -1177,20 +2006,31 @@
   .saas-takeover-panel:has(.pos[data-cart-open]) ~ .saas-takeover-close { display: none; }
 
   .pos-sheet-scrim {
+    /* 55: ABAIXO do `.pos-aside`, que é 60.
+       Este scrim é o fundo escuro ATRÁS da comanda-folha do celular, e não
+       tem nada a ver com o das folhas de diálogo (que têm o seu, interno).
+       Subi os dois juntos ao levar `.pos-sheet` para 200 e este passou a
+       cobrir o drawer: o detalhe da mesa aparecia inteiro sob um desfoque de
+       10px, ilegível. */
     display: block; position: fixed; inset: 0; z-index: 55;
     border: none; padding: 0;
-    background: rgba(0, 0, 0, 0.45);
+    background: var(--pos-scrim);
     -webkit-backdrop-filter: blur(10px) saturate(115%);
     backdrop-filter: blur(10px) saturate(115%);
   }
   .pos-aside {
     top: max(4rem, env(safe-area-inset-top));
-    border-radius: 22px 22px 0 0;
-    border-top: 1px solid rgba(255, 255, 255, 0.10);
-    background: color-mix(in srgb, var(--pos-1) 88%, transparent);
-    -webkit-backdrop-filter: blur(24px) saturate(160%);
-    backdrop-filter: blur(24px) saturate(160%);
-    box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.55);
+    border-radius: var(--pos-r-drawer) var(--pos-r-drawer) 0 0;
+    /* A 88% a régua de categorias passava por trás como uma FAIXA de verde,
+       laranja e roxo atravessando o alto da comanda — vidro virou vitral, e no
+       fechamento de conta era a primeira coisa que o olho encontrava. A 96% o
+       salão continua insinuado e nenhuma cor atravessa. */
+    background: color-mix(in srgb, var(--pos-1) 96%, transparent);
+    -webkit-backdrop-filter: blur(28px) saturate(140%);
+    backdrop-filter: blur(28px) saturate(140%);
+    box-shadow: 0 -18px 48px var(--pos-shadow);
+    /* A quina só existe se ela CORTAR o que está dentro. */
+    overflow: hidden;
   }
   /* A alça: 36×5 centrada, com respiro acima e abaixo — a medida do iOS, e a
      que o polegar reconhece como "isto se arrasta" sem nenhum rótulo. */
@@ -1199,11 +2039,30 @@
     height: 26px; flex: none; cursor: grab; touch-action: none;
   }
   .pos-aside__grab::before {
-    content: ''; width: 36px; height: 5px; border-radius: 999px;
-    background: rgba(255, 255, 255, 0.28);
+    content: ''; width: 36px; height: 5px; border-radius: var(--pos-r-pill);
+    background: var(--pos-veil-3);
   }
   .pos-aside[data-dragging='true'] { transition: none; }
   .pos-aside[data-dragging='true'] .pos-aside__grab { cursor: grabbing; }
+
+  /* A FOLHA também sobe do rodapé no celular.
+     Centrada, ela virava um cartão branco no meio do drawer — e o founder leu
+     exatamente assim: "os modais estão carregando dentro do bottom drawer".
+     Ancorada embaixo, largura cheia e quina de iOS no topo, ela é
+     inconfundivelmente uma camada acima de tudo, e o polegar a alcança sem
+     subir a mão. */
+  .pos-sheet { place-items: end stretch; }
+  .pos-sheet__panel {
+    width: 100%; max-height: min(88vh, 100% - 3rem);
+    border: none; border-top: 1px solid var(--pos-line-strong);
+    border-radius: var(--pos-r-drawer) var(--pos-r-drawer) 0 0;
+    padding-bottom: env(safe-area-inset-bottom);
+    animation: pos-sheet-up 220ms var(--pos-e);
+  }
+  @keyframes pos-sheet-up { from { transform: translateY(100%); } }
+  @media (prefers-reduced-motion: reduce) {
+    .pos-sheet__panel { animation: none; }
+  }
   @media (prefers-reduced-motion: reduce) {
     .pos-aside { transition: none; }
   }
@@ -1231,7 +2090,7 @@
 .pos-skel { pointer-events: none; cursor: default; }
 .pos-skel::before { display: none; }
 .pos-skel__b {
-  display: block; border-radius: 6px;
+  display: block; border-radius: var(--pos-r-sm);
   background: linear-gradient(
     90deg,
     var(--pos-3) 25%,
@@ -1278,7 +2137,7 @@
   transition: background var(--pos-t) var(--pos-e), border-color var(--pos-t) var(--pos-e), transform var(--pos-t) var(--pos-e);
 }
 .pos-pt:hover { transform: scale(1.03); z-index: 3; }
-.pos-pt[data-shape='round'] { border-radius: 50%; }
+.pos-pt[data-shape='round'] { border-radius: var(--pos-r-round); }
 .pos-pt[data-shape='bar'] { border-radius: var(--pos-r-xs); }
 .pos-pt[data-status='free']           { background: var(--pos-3); border-color: var(--pos-line-strong); color: var(--pos-fg-2); }
 .pos-pt[data-status='occupied']       { background: var(--pos-warn); border-color: var(--pos-warn); color: var(--pos-on-light); }
@@ -1290,7 +2149,7 @@
 .pos-pt[aria-current='true'] {
   outline: 3px solid var(--pos-fg);
   outline-offset: 3px;
-  box-shadow: 0 0 0 7px var(--pos-1), 0 8px 26px -6px rgba(0, 0, 0, 0.8);
+  box-shadow: 0 0 0 7px var(--pos-1), 0 8px 26px -6px var(--pos-shadow-strong);
   transform: scale(1.04);
   z-index: 5;
 }
@@ -1299,7 +2158,7 @@
 
 /* Seats: small dots hugging the table, so a six-top reads as a six-top. */
 .pos-seat {
-  position: absolute; width: 13px; height: 13px; border-radius: 50%;
+  position: absolute; width: 13px; height: 13px; border-radius: var(--pos-r-round);
   background: var(--pos-3); border: 1px solid var(--pos-line-strong);
   pointer-events: none;
 }
@@ -1313,14 +2172,20 @@
   border-top: 1px solid var(--pos-line); font-size: 12px; color: var(--pos-fg-2);
 }
 .pos-legend__k { display: inline-flex; align-items: center; gap: 6px; }
-.pos-legend__sw { width: 12px; height: 12px; border-radius: 3px; }
+.pos-legend__sw { width: 12px; height: 12px; border-radius: var(--pos-r-xs); }
 
 /* --- modifier sheet -----------------------------------------------------
    Only for items that ask a question. A sheet in front of a beer is a tax on
    every round.
 ------------------------------------------------------------------------- */
 
-.pos-sheet { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; }
+/* Acima da CASCA, não só acima do PDV.
+   Enquanto a folha morava dentro do takeover, `z-index: 60` só competia com
+   irmãos do PDV. Levada ao `body` pelo portal, ela passou a ser irmã do
+   próprio takeover — que é `z-[120]` — e abria ATRÁS dele: o clique em
+   "Desconto" montava a folha, e a tela não mudava. Daí o número alto e o
+   comentário: quem mexer no z-index da casca precisa passar por aqui. */
+.pos-sheet { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; }
 .pos-sheet__scrim {
   position: absolute; inset: 0;
   /* Strong enough to isolate the foreground; below that the floor behind keeps
@@ -1332,9 +2197,14 @@
   position: relative; display: flex; flex-direction: column;
   width: min(560px, 92vw); max-height: min(80vh, 720px);
   border: 1px solid var(--pos-line-strong); border-radius: var(--pos-r);
-  background: var(--pos-1); box-shadow: 0 32px 64px rgba(0, 0, 0, 0.55);
+  background: var(--pos-1); box-shadow: 0 32px 64px var(--pos-shadow);
   animation: pos-sheet-in 180ms var(--pos-e);
 }
+/* «Organizar automaticamente» é uma folha LARGA: a etapa 2 tem duas listas
+   lado a lado — o que já está no ambiente e o catálogo inteiro —, e empilhar
+   as duas faria o operador rolar entre elas para conferir cada mesa. */
+.pos-sheet__panel--wide { width: min(1000px, 94vw); max-height: min(88vh, 820px); }
+
 @keyframes pos-sheet-in { from { opacity: 0; transform: translateY(8px) scale(0.99); } }
 @media (prefers-reduced-motion: reduce) { .pos-sheet__panel { animation: none; } }
 
@@ -1342,7 +2212,136 @@
   display: flex; align-items: flex-start; justify-content: space-between; gap: var(--pos-3x);
   padding: var(--pos-4x); border-bottom: 1px solid var(--pos-line);
 }
-.pos-sheet__body { padding: var(--pos-4x); display: grid; gap: var(--pos-4x); min-height: 0; }
+/* O CORPO É QUE ROLA — não a folha inteira, e não a página atrás dela.
+   Sem `overflow-y` aqui, o painel (flex column com `max-height`) simplesmente
+   cortava o conteúdo que não coubesse: a folha da escala, com a lista da
+   equipe e as pessoas já escaladas, ficava sem o botão "Escalar" e sem o
+   rodapé do corte do dia. Vale para TODAS as folhas — a escala só foi a
+   primeira alta o bastante para mostrar. O `flex: 1 1 auto` com `min-height:
+   0` é o par que faz um filho de coluna flex poder encolher e rolar. */
+.pos-sheet__body {
+  padding: var(--pos-4x); display: grid; gap: var(--pos-4x);
+  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
+}
+/* Cabeçalho e rodapé não encolhem: são o título e o botão que decide. */
+.pos-sheet__head, .pos-sheet__foot { flex: 0 0 auto; }
+
+/* ── A folha de desconto ───────────────────────────────────────────────── */
+.pos-sheet__title { display: flex; align-items: center; gap: var(--pos-2x); margin: 0; font-size: 19px; font-weight: 660; }
+/* O subtítulo da folha: a frase que explica a ETAPA. Ela muda entre a 1 e a
+   2, e é o único lugar que diz o que o operador está respondendo agora. */
+.pos-sheet__sub { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--pos-fg-3); }
+.pos-sheet__x {
+  width: var(--pos-hit-3); height: var(--pos-hit-3); flex: none;
+  display: grid; place-items: center; border: 0; border-radius: var(--pos-r-sm);
+  background: transparent; color: var(--pos-fg-2); cursor: pointer;
+}
+.pos-sheet__x:hover { background: var(--pos-3); color: var(--pos-fg); }
+/* O motivo de não poder confirmar fica ABAIXO do botão, onde o olho volta
+   depois de bater nele — e não num tooltip que exige uma segunda tentativa. */
+/* A dica que explica um campo VAZIO. Em branco não é zero — é "usa a taxa da
+   mesa" —, e essa é a frase que o operador precisa ler antes de apagar. */
+.pos-sheet__hint {
+  margin: 6px 0 0; font-size: 11.5px; color: var(--pos-fg-3);
+}
+.pos-sheet__why {
+  margin: 0; padding: 0 var(--pos-4x) var(--pos-4x);
+  font-size: 13px; color: var(--pos-warn); text-align: right;
+}
+
+.pos-dsc__sec { display: grid; gap: var(--pos-2x); }
+.pos-dsc__lbl {
+  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
+  color: var(--pos-fg-3);
+}
+/* A lista rola sozinha: numa comanda de quinze itens ela empurrava o botão
+   para fora da folha, e o operador escolhia sem ver o que ia aplicar. */
+.pos-dsc__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 208px; overflow-y: auto; }
+.pos-dsc__line {
+  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto;
+  align-items: center; gap: var(--pos-2x);
+  min-height: var(--pos-hit-3); padding: 0 var(--pos-2x);
+  border-radius: var(--pos-r-sm); cursor: pointer;
+}
+.pos-dsc__line:hover { background: var(--pos-3); }
+.pos-dsc__n { font-size: 13px; font-weight: 650; color: var(--pos-fg-3); }
+.pos-dsc__name { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pos-dsc__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--pos-2x); align-items: center; }
+.pos-dsc__val, .pos-dsc__sel, .pos-dsc__memo, .pos-dsc__pin {
+  min-height: var(--pos-hit-2); padding: 0 var(--pos-3x);
+  border: 1px solid var(--pos-line-strong); border-radius: var(--pos-r-sm);
+  background: var(--pos-2); color: var(--pos-fg); font: inherit; font-size: 15px;
+}
+.pos-dsc__memo { padding: var(--pos-2x) var(--pos-3x); resize: vertical; line-height: 1.4; }
+.pos-dsc__val { text-align: right; font-variant-numeric: tabular-nums; }
+/* O valor em dinheiro do que foi digitado, ao lado — o operador confere o
+   resultado sem fazer a conta de cabeça, que é onde o desconto erra. */
+.pos-dsc__eq { font-size: 15px; font-weight: 650; color: var(--pos-warn); min-width: 96px; text-align: right; }
+
+/* ── A folha de taxa de serviço ────────────────────────────────────────── */
+/* As taxas cadastradas em fileira: escolher a da casa é um toque, e digitar
+   é a exceção. Em coluna, a lista empurrava os dois números que decidem
+   (elegível e total) para fora da folha. */
+.pos-svc__presets { display: flex; flex-wrap: wrap; gap: var(--pos-2x); }
+.pos-svc__preset {
+  display: grid; gap: 1px; justify-items: start;
+  min-height: var(--pos-hit-2); padding: var(--pos-2x) var(--pos-3x);
+  border: 1px solid var(--pos-line-strong); border-radius: var(--pos-r-sm);
+  background: var(--pos-2); color: var(--pos-fg); cursor: pointer; font: inherit;
+}
+.pos-svc__preset[aria-pressed='true'] {
+  border-color: var(--pos-accent);
+  background: color-mix(in srgb, var(--pos-accent) 14%, var(--pos-2));
+}
+.pos-svc__pn { font-size: 13px; color: var(--pos-fg-2); }
+.pos-svc__preset[aria-pressed='true'] .pos-svc__pn { color: var(--pos-fg); }
+
+/* Os dois números que decidem, num bloco próprio. O "elegível" é o que mais
+   surpreende quem opera — a taxa não incide sobre o subtotal —, e escondê-lo
+   faria o total sair de uma base invisível. */
+.pos-svc__sum {
+  display: grid; gap: var(--pos-1x);
+  padding: var(--pos-3x); border-radius: var(--pos-r);
+  background: var(--pos-3);
+}
+.pos-svc__line { display: flex; justify-content: space-between; gap: var(--pos-3x); font-size: 14px; color: var(--pos-fg-2); }
+.pos-svc__line--strong { font-size: 15px; font-weight: 650; color: var(--pos-fg); }
+.pos-svc__line--strong .pos-num { color: var(--pos-accent); }
+
+.pos-svc__guest {
+  display: grid; grid-template-columns: minmax(0, 1fr) 84px auto;
+  align-items: center; gap: var(--pos-2x);
+  min-height: var(--pos-hit-3); padding: 0 var(--pos-2x);
+}
+.pos-svc__gv { min-height: 36px; }
+/* O preço tem COLUNA, não largura própria.
+   Cada linha é a sua própria grade, e a terceira coluna é `auto`: «R$ 8,90»
+   empurrava o seletor 9px para a direita e a fileira inteira ficava serrilhada.
+   Largura mínima e alinhamento à direita fazem as três colunas se
+   corresponderem de uma linha para a outra. */
+.pos-dsc__lines .pos-svc__guest > .pos-num {
+  min-width: 76px; text-align: right; font-variant-numeric: tabular-nums;
+}
+
+/* "Adicionar itens", ao pé das linhas da comanda. Sem preenchimento e sem
+   contorno cheio: ele é um caminho, não a ação da tela — o botão que decide
+   está no rodapé e não pode ter concorrente. */
+.pos-tr__add {
+  display: flex; align-items: center; justify-content: center; gap: var(--pos-2x);
+  width: calc(100% - var(--pos-3x) * 2); margin: var(--pos-2x) var(--pos-3x) var(--pos-4x);
+  min-height: var(--pos-hit-2);
+  border: 1px dashed var(--pos-line-strong); border-radius: var(--pos-r);
+  background: transparent; color: var(--pos-fg-2);
+  font: inherit; font-size: 14.5px; font-weight: 550; cursor: pointer;
+  transition: background var(--pos-t) var(--pos-e), color var(--pos-t) var(--pos-e);
+}
+.pos-tr__add:hover { background: var(--pos-3); color: var(--pos-fg); }
+
+/* "Mesa atual:" — de onde se sai. Sem isto a folha pergunta o destino sem
+   dizer a origem, e numa casa de 207 mesas o operador confere no que já
+   fechou atrás da folha. */
+.pos-sheet__from { margin: 0; font-size: 14px; color: var(--pos-fg-2); }
+.pos-sheet__from strong { color: var(--pos-fg); font-weight: 650; }
 .pos-sheet__foot {
   display: grid; grid-template-columns: auto 1fr; gap: var(--pos-2x);
   padding: var(--pos-3x) var(--pos-4x) var(--pos-4x); border-top: 1px solid var(--pos-line);
@@ -1412,11 +2411,11 @@
 
 .pos-ln__state {
   width: 14px; height: 22px; flex: none;
-  display: grid; place-items: center; border-radius: 50%;
+  display: grid; place-items: center; border-radius: var(--pos-r-round);
   color: var(--pos-fg-3);
 }
 .pos-ln[data-state='pending'] .pos-ln__state::before {
-  content: ''; width: 8px; height: 8px; border-radius: 50%;
+  content: ''; width: 8px; height: 8px; border-radius: var(--pos-r-round);
   background: currentColor;
 }
 /* Pending is the only state that still needs someone to do something, so it
@@ -1457,7 +2456,7 @@
 .pos-pt__badge {
   position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
   min-width: 24px; height: 18px; padding: 0 5px;
-  display: grid; place-items: center; border-radius: 9px;
+  display: grid; place-items: center; border-radius: var(--pos-r-sm);
   background: var(--pos-4); color: var(--pos-fg);
   font-size: 11px; font-weight: 700; border: 1px solid var(--pos-0);
 }
@@ -1500,7 +2499,7 @@
 
 .pos-pin__dots { display: flex; justify-content: center; gap: var(--pos-3x); padding: var(--pos-2x) 0; }
 .pos-pin__dot {
-  width: 16px; height: 16px; border-radius: 50%;
+  width: 16px; height: 16px; border-radius: var(--pos-r-round);
   border: 2px solid var(--pos-line-strong); background: transparent;
   transition: background var(--pos-t) var(--pos-e), border-color var(--pos-t) var(--pos-e);
 }
@@ -1561,11 +2560,29 @@
 }
 /* Columns are lanes, not floating cards: giving them a surface makes an empty
    "Pronto" read as a state of the kitchen instead of a rendering gap. */
+/* As cores das colunas do delivery, no matiz do V1.
+ *
+ * O `DeliveryKanban` pinta a borda de cada coluna com um Tailwind 500 — e são
+ * ESTES hexes, não parecidos: o operador aprende o quadro pela cor antes de ler
+ * o nome, e um verde diferente é um quadro diferente.
+ *
+ * `slate-400` é o único 400 da lista, e também no V1: «Entregue» é o que já
+ * saiu de cena e não deve competir com o que ainda está na esteira. */
+:root {
+  --pos-deliv-blue: #3b82f6;    /* border-blue-500    — Pedidos */
+  --pos-deliv-emerald: #10b981; /* border-emerald-500 — Aguardando preparo, Pronto */
+  --pos-deliv-amber: #f59e0b;   /* border-amber-500   — Preparando */
+  --pos-deliv-violet: #8b5cf6;  /* border-violet-500  — Em rota */
+  --pos-deliv-slate: #94a3b8;   /* border-slate-400   — Entregue */
+}
+
 .pos-col {
   display: flex; flex-direction: column; min-height: 0;
   border: 1px solid var(--pos-line); border-radius: var(--pos-r);
   background: var(--pos-1); overflow: hidden;
 }
+/* No TOPO, como no V1 — ele usa `border-t-4` na seção da coluna. */
+.pos-col[style*="--pos-col-edge"] { border-top: 3px solid var(--pos-col-edge); }
 .pos-col__head {
   display: flex; align-items: center; gap: var(--pos-2x);
   padding: var(--pos-3x); border-bottom: 1px solid var(--pos-line);
@@ -1574,7 +2591,7 @@
 .pos-col__t { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pos-fg); }
 .pos-col__n {
   margin-left: auto; min-width: 20px; height: 18px; padding: 0 5px;
-  display: grid; place-items: center; border-radius: 9px;
+  display: grid; place-items: center; border-radius: var(--pos-r-sm);
   background: var(--pos-2); font-size: 11px; font-weight: 700; color: var(--pos-fg-2);
 }
 .pos-col__body {
@@ -1704,7 +2721,7 @@
 }
 .pos-user__av {
   width: 30px; height: 30px; flex: none; display: grid; place-items: center;
-  border-radius: 50%; background: var(--pos-primary); color: var(--pos-primary-fg);
+  border-radius: var(--pos-r-round); background: var(--pos-primary); color: var(--pos-primary-fg);
   font-size: 13px; font-weight: 700;
 }
 .pos-user__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
@@ -1715,7 +2732,7 @@
 /* Sem segunda linha, o ponto acompanha o nome em vez de flutuar sob ele. */
 .pos-user__name--dotted { display: flex; align-items: center; gap: 6px; }
 .pos-user__meta { display: flex; align-items: center; gap: 5px; font-size: 11px; line-height: 1.25; }
-.pos-user__dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--pos-ok); }
+.pos-user__dot { width: 6px; height: 6px; border-radius: var(--pos-r-round); flex: none; background: var(--pos-ok); }
 .pos-user[data-state='reconnecting'] .pos-user__dot { background: var(--pos-warn); }
 .pos-user[data-state='offline'] .pos-user__dot { background: var(--pos-danger); }
 /* Losing the network is the one thing worth shouting about from the rail. */
@@ -1735,12 +2752,12 @@
 /* The hint only fits once the field is open; collapsed it just spills. */
 .pos-field__clear {
   flex: none; width: 26px; height: 26px; display: grid; place-items: center;
-  border: none; border-radius: 50%; background: var(--pos-3); color: var(--pos-fg-2);
+  border: none; border-radius: var(--pos-r-round); background: var(--pos-3); color: var(--pos-fg-2);
   cursor: pointer;
 }
 .pos-field__clear:hover { background: var(--pos-4); color: var(--pos-fg); }
 .pos-field__hint {
-  flex: none; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--pos-line-strong);
+  flex: none; padding: 2px 6px; border-radius: var(--pos-r-xs); border: 1px solid var(--pos-line-strong);
   background: var(--pos-0); color: var(--pos-fg-3); font-size: 10px; font-weight: 700;
 }
 
@@ -1767,11 +2784,11 @@
    sees, and then the markers read as three unrelated bullets. */
 .pos-ev:not(:last-child)::before {
   content: ''; position: absolute; left: 10px; top: 16px; bottom: -2px; width: 2px;
-  border-radius: 1px; background: var(--pos-4);
+  border-radius: var(--pos-r-xs); background: var(--pos-4);
 }
 .pos-ev__mark {
   position: relative; z-index: 1;
-  width: 10px; height: 10px; margin: 5px auto 0; border-radius: 50%;
+  width: 10px; height: 10px; margin: 5px auto 0; border-radius: var(--pos-r-round);
   background: var(--pos-fg-2); box-shadow: 0 0 0 3px var(--pos-1);
 }
 .pos-ev[data-done='false'] .pos-ev__mark {
@@ -1910,7 +2927,11 @@
 .pos-back {
   display: flex; align-items: center; gap: var(--pos-2x);
   width: 100%; min-height: 56px; padding: 0 var(--pos-4x);
-  border: none; border-bottom: 1px solid var(--pos-line);
+  /* Sem régua embaixo. O cabeçalho do passo vem logo abaixo com a sua, e as
+     duas juntas — mais a borda do topo do drawer e a do primeiro cartão —
+     empilhavam quatro linhas horizontais nos primeiros 120px da tela. O
+     caminho de volta se separa pelo espaço, não por mais um traço. */
+  border: none;
   background: transparent; color: var(--pos-fg-2);
   font-size: 15px; font-weight: 550; text-align: left; cursor: pointer;
   transition: background var(--pos-t) var(--pos-e), color var(--pos-t) var(--pos-e);
@@ -1919,11 +2940,6 @@
 .pos-back:active { background: var(--pos-3); }
 .pos-back svg { flex: none; }
 
-.pos-checkout__head {
-  display: flex; align-items: center; gap: var(--pos-2x);
-  padding: var(--pos-4x) var(--pos-4x) 0;
-}
-
 .pos-empty__b {
   margin-top: var(--pos-2x); min-height: var(--pos-hit-2); padding: 0 var(--pos-4x);
   border: 1px solid var(--pos-line-strong); border-radius: var(--pos-r);
@@ -2018,7 +3034,7 @@
 .pos-res__b {
   display: inline-flex; align-items: center; justify-content: center; gap: 7px;
   min-height: 52px; padding: 0 var(--pos-4x);
-  border: 1px solid var(--pos-line-strong); border-radius: 999px;
+  border: 1px solid var(--pos-line-strong); border-radius: var(--pos-r-pill);
   background: transparent; color: var(--pos-fg-2);
   font-size: 14px; font-weight: 600; cursor: pointer;
   transition: background var(--pos-t) var(--pos-e), color var(--pos-t) var(--pos-e), transform var(--pos-t) var(--pos-e);
@@ -2030,7 +3046,7 @@
   background: var(--pos-primary); border-color: var(--pos-primary); color: var(--pos-primary-fg);
   font-weight: 650;
 }
-.pos-res__b--primary:hover { background: #fff; border-color: #fff; color: var(--pos-primary-fg); }
+.pos-res__b--primary:hover { background: var(--pos-primary-hover); border-color: var(--pos-primary-hover); color: var(--pos-primary-fg); }
 .pos-res__at {
   min-width: 116px;
   border-color: color-mix(in srgb, var(--pos-ok) 45%, transparent);
@@ -2046,48 +3062,80 @@
   .pos-res__do { grid-column: 2 / -1; justify-content: flex-end; }
 }
 
-/* --- seating a party ----------------------------------------------------
-   A booking waiting for a table. It rides in the dock with the open tickets
-   because that is where the operator already looks for "what is in my hands
-   right now".
+/* --- acomodação em curso -------------------------------------------------
+   Um grupo esperando mesa. Ela vivia DENTRO da bandeja de comandas abertas,
+   e aquilo é a régua de comandas — não um lugar para o modo do aplicativo:
+   espremida entre as pastilhas de praça e a ficha da comanda ativa, a única
+   instrução da tela saía ilegível.
+
+   Agora ela FLUTUA sobre a planta, ancorada no `.pos-main` (que já é
+   `position: relative` por causa da faixa de aviso). Fica acima da bandeja e
+   do aviso no empilhamento, centrada, e larga o suficiente para o nome caber
+   sem quebrar — é o nome que o anfitrião procura quando olha para cá.
 ------------------------------------------------------------------------- */
 
 .pos-seating {
-  /* Same borderless language as the rest of the strip, but FILLED: this is not
-     another table to pick from, it is the app being in a mode, and a mode has
-     to be visible from anywhere on screen.
-     It also has to stop touching the strip: two filled blocks flush against
-     each other read as one confused thing, which is exactly what happened next
-     to the inverted active chip. */
-  /* Sticky, because it is the MODE and not an item in the list: when the strip
-     scrolls to the active table it would carry the one thing the operator has
-     to finish off the screen. */
-  position: sticky; left: 0; z-index: 2;
-  flex: 0 0 auto; display: flex; align-items: center; gap: var(--pos-3x);
-  min-height: 68px; padding: 0 var(--pos-3x) 0 var(--pos-4x);
-  margin-right: var(--pos-3x);
-  border: none; border-right: 2px solid var(--pos-0); border-radius: 0;
-  background: var(--pos-accent); color: #fff;
-  box-shadow: 6px 0 12px -6px rgba(0, 0, 0, 0.6);
-}
-/* While a party is waiting, nothing else in the strip claims to be primary:
-   the mode is the one thing the operator has to finish. */
-.pos-dock:has(.pos-seating) .pos-dchip[aria-current='true'] {
-  background: var(--pos-3); color: var(--pos-fg);
-}
-.pos-dock:has(.pos-seating) .pos-dchip[aria-current='true'] .pos-dchip__t { color: var(--pos-fg); }
-.pos-dock:has(.pos-seating) .pos-dchip[aria-current='true'] .pos-dchip__s { color: var(--pos-fg-2); }
-.pos-dock:has(.pos-seating) .pos-dchip[aria-current='true'] .pos-dchip__tag { background: var(--pos-4); color: var(--pos-fg); }
+  position: absolute; z-index: 45;
+  left: 50%; transform: translateX(-50%);
+  /* EM CIMA — mas SOBRE A GRADE, não sobre o cabeçalho.
+     Ela estava acima do rodapé, disputando com as fichas e as pastilhas de
+     praça. Subiu; e subiu demais: encostada nas abas, ela flutuava sobre a
+     barra clara, onde não há o que desfocar e o vidro não se lê como vidro.
+     Agora ela desce o bastante para pousar sobre os CARTÕES — que é o que dá
+     profundidade ao desfoque e o que o olho está olhando. */
+  top: 104px;
+  max-width: min(520px, calc(100% - var(--pos-6x) * 2));
+  display: flex; align-items: center; gap: var(--pos-3x);
+  min-height: 60px; padding: var(--pos-2x) var(--pos-2x) var(--pos-2x) var(--pos-5x);
+  border-radius: var(--pos-r-pill);
+  /* VIDRO, não tinta chapada.
+     A faixa cobre parte da grade enquanto o operador escolhe, e um bloco opaco
+     apaga as mesas que estão debaixo dela — justamente as que ele está
+     olhando. Com o fundo translúcido e desfocado, ela continua legível e o
+     salão continua visível através dela. O `-webkit-` fica: o Safari do
+     terminal ainda o pede. */
+  /* Mais vidro que tinta: a 82% sobre fundo claro a translucidez não aparecia
+     e a peça lia como um bloco chapado. A 60%, com desfoque maior, as mesas
+     atravessam — e é isso que diz «isto está POR CIMA, e é temporário». */
+  background: color-mix(in srgb, var(--pos-accent) 60%, transparent);
+  -webkit-backdrop-filter: blur(22px) saturate(180%);
+  backdrop-filter: blur(22px) saturate(180%);
+  /* A borda clara é o que desenha a quina do vidro contra o que passa por
+     baixo; sem ela a peça se dissolve na grade em vez de flutuar sobre ela. */
+  border: 1px solid color-mix(in srgb, #fff 45%, transparent);
+  color: #fff;
+  /* A sombra é o que a faz parecer POR CIMA em vez de colada: sem ela, sobre a
+     planta clara, o bloco lê como mais um retângulo do salão. */
+  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.2);
+  animation: pos-seating-in 180ms var(--pos-e) both;
+}
+/* Sem `backdrop-filter` (navegador antigo), a translucidez sozinha deixaria o
+   texto sobre as mesas. Aí a tinta volta a ser chapada — feio é melhor que
+   ilegível. */
+@supports not (backdrop-filter: blur(4px)) {
+  .pos-seating { background: var(--pos-accent); }
+}
+@keyframes pos-seating-in {
+  from { opacity: 0; transform: translate(-50%, -10px); }
+  to   { opacity: 1; transform: translate(-50%, 0); }
+}
+@media (prefers-reduced-motion: reduce) { .pos-seating { animation: none; } }
+.pos-seating__who { min-width: 0; }
+/* A regra que descontava a altura da bandeja saiu junto com a bandeja: durante
+   a escolha da mesa não há régua embaixo para desviar. */
 .pos-seating__pulse {
-  width: 9px; height: 9px; flex: none; border-radius: 50%;
+  width: 9px; height: 9px; flex: none; border-radius: var(--pos-r-round);
   background: #fff; animation: pos-pulse 1.6s ease-in-out infinite;
 }
 @keyframes pos-pulse { 50% { opacity: 0.25; } }
 @media (prefers-reduced-motion: reduce) { .pos-seating__pulse { animation: none; } }
-.pos-seating__t { display: block; font-size: 13.5px; font-weight: 650; }
-.pos-seating__s { display: block; font-size: 12.5px; color: rgba(255, 255, 255, 0.82); }
+.pos-seating__t {
+  display: block; font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.pos-seating__s { display: block; font-size: 12.5px; color: rgba(255, 255, 255, 0.86); }
 .pos-seating__x {
-  width: 32px; height: 32px; flex: none; display: grid; place-items: center;
+  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
   border: none; border-radius: var(--pos-r-xs); background: transparent;
   color: rgba(255, 255, 255, 0.82); cursor: pointer;
 }
@@ -2119,6 +3167,78 @@
 
 /* The order stage can carry two actions: what to do next, and the way past it. */
 .pos-cta--stack { display: grid; gap: var(--pos-2x); }
+
+/* ── O "…" da comanda ──────────────────────────────────────────────────────
+   `auto` e não uma largura fixa: o gatilho tem o tamanho do piso de toque e o
+   botão principal fica com todo o resto, em qualquer largura de coluna. */
+.pos-cta__row { display: grid; grid-template-columns: 1fr auto; gap: var(--pos-2x); }
+/* Imprimir e Desconto dividem a linha, meio a meio — nenhum dos dois é a ação
+   da tela, e dar mais peso a um seria escolher por quem opera. */
+.pos-cta__aux { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pos-2x); }
+
+/* O ✕ de descartar, sobre o canto da ficha. Discreto até o ponteiro chegar:
+   ele é a saída de um engano, não uma ação do turno. */
+.pos-dchip__wrap { position: relative; display: flex; flex: none; }
+.pos-dchip__x {
+  position: absolute; top: 4px; right: 4px; z-index: 2;
+  width: 20px; height: 20px; display: grid; place-items: center;
+  border: 0; border-radius: var(--pos-r-round); cursor: pointer;
+  background: var(--pos-3); color: var(--pos-fg-2);
+  opacity: 0; transition: opacity var(--pos-t) var(--pos-e), background var(--pos-t) var(--pos-e);
+}
+.pos-dchip__wrap:hover .pos-dchip__x,
+.pos-dchip__x:focus-visible { opacity: 1; }
+.pos-dchip__x:hover { background: var(--pos-danger); color: #fff; }
+/* Num toque não há ponteiro: ali ele fica sempre visível, senão o gesto não
+   existe para quem opera de tablet — que é a maioria. */
+@media (hover: none) { .pos-dchip__x { opacity: 1; } }
+.pos-cta__auxb {
+  width: 100%; min-height: 48px; padding: 0 var(--pos-3x);
+  display: inline-flex; align-items: center; justify-content: center; gap: var(--pos-2x);
+  border: 1px solid var(--pos-line-strong); border-radius: var(--pos-r);
+  font-size: 14.5px;
+}
+.pos-cta__auxb:hover:not(:disabled) { background: var(--pos-3); color: var(--pos-fg); }
+.pos-cta__auxb:disabled { opacity: 0.45; cursor: not-allowed; }
+
+/* NOME PRÓPRIO, e não é capricho: `.pos-more` já era o painel «Mais
+   opções» da navbar de celular, que nasce `display:none` no desktop. As duas
+   coisas dividindo a classe faziam o `⋯` da comanda — as CINCO ações do V1 —
+   sumir da tela grande, alcançáveis só por atalho. */
+.pos-acts { position: relative; }
+.pos-acts__t {
+  width: var(--pos-hit-2); min-width: var(--pos-hit-2); padding: 0;
+  display: inline-flex; align-items: center; justify-content: center;
+}
+/* Sobe a partir do rodapé, encostado à direita: é de lá que ele foi aberto, e
+   um menu que nasce longe do dedo faz o olho procurar. */
+.pos-acts__m {
+  position: absolute; bottom: calc(100% + var(--pos-2x)); right: 0; z-index: 30;
+  min-width: 248px; padding: var(--pos-1x);
+  display: grid; gap: 2px;
+  background: var(--pos-1);
+  border: 1px solid var(--pos-line-strong);
+  border-radius: var(--pos-r);
+  box-shadow: 0 18px 40px -12px var(--pos-shadow);
+}
+.pos-acts__i {
+  display: grid; gap: 1px; justify-items: start; text-align: left;
+  padding: var(--pos-2x) var(--pos-3x);
+  border: 0; border-radius: var(--pos-r-sm);
+  background: transparent; color: var(--pos-fg); cursor: pointer;
+  font: inherit;
+}
+.pos-acts__i:hover:not(:disabled) { background: var(--pos-3); }
+/* Desabilitado continua LEGÍVEL: a linha existe para ser lida junto com o
+   motivo, e um cinza de 35% torna inútil justamente o texto que a explica. */
+.pos-acts__i:disabled { cursor: not-allowed; color: var(--pos-fg-2); }
+.pos-acts__i--danger:not(:disabled) { color: var(--pos-danger); }
+.pos-acts__sep {
+  height: 1px; margin: var(--pos-1x) calc(var(--pos-1x) * -1);
+  background: var(--pos-line);
+}
+.pos-acts__l { font-size: 15px; font-weight: 550; }
+.pos-acts__why { font-size: 12.5px; color: var(--pos-fg-3); line-height: 1.3; }
 .pos-btn--wide { width: 100%; min-height: 48px; font-size: 14px; }
 .pos-hint {
   display: flex; align-items: center; justify-content: center; gap: 7px;
@@ -2129,3 +3249,1380 @@
 
 .pos-scroll-x { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
 .pos-scroll-x::-webkit-scrollbar { display: none; }
+
+/* ---------------------------------------------------------------------------
+   Participantes: as pastilhas em cima, os cartões por pessoa na conta.
+   Portado de GuestBar.tsx + OrderCart.tsx do V1.
+--------------------------------------------------------------------------- */
+.pos-guests {
+  display: flex; align-items: center; gap: var(--pos-2x);
+  /* Respiro em cima: a barra encostava na linha "4 pessoas · 2h14" do
+     cabeçalho, e as duas se liam como um bloco só. */
+  padding: var(--pos-3x) var(--pos-3x) var(--pos-2x);
+  border-bottom: 1px solid var(--pos-line);
+  background: var(--pos-veil);
+}
+.pos-guests__add {
+  flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--pos-r-pill);
+  display: grid; place-items: center;
+  border: 1px dashed var(--pos-line-strong); background: transparent; color: var(--pos-fg-2);
+  cursor: pointer;
+}
+.pos-guests__add:hover { background: var(--pos-veil-2); color: var(--pos-fg); }
+.pos-guests__scroll {
+  display: flex; align-items: center; gap: 6px;
+  min-width: 0; flex: 1; overflow-x: auto; scrollbar-width: none;
+  padding: 2px;
+}
+.pos-guests__scroll::-webkit-scrollbar { display: none; }
+.pos-gchip__wrap { position: relative; display: inline-flex; flex: 0 0 auto; }
+.pos-gchip {
+  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
+  min-height: 34px; padding: 6px 13px; border-radius: var(--pos-r-pill);
+  font-size: 13px; font-weight: 600; line-height: 1;
+  border: 1px solid var(--pos-line); background: var(--pos-2); color: var(--pos-fg);
+  cursor: pointer; white-space: nowrap;
+}
+.pos-gchip:hover { background: var(--pos-veil-2); }
+.pos-gchip[aria-pressed='true'] {
+  background: var(--pos-primary); border-color: var(--pos-primary); color: var(--pos-on-filled);
+}
+/* A cadeira sem nome está PEDINDO alguma coisa — o tracejado diz isso. */
+.pos-gchip[data-anon] {
+  border-style: dashed; background: transparent; color: var(--pos-fg-2);
+}
+.pos-gchip[data-settled] { opacity: 0.72; }
+.pos-gchip__i {
+  display: inline-grid; place-items: center; width: 19px; height: 19px;
+  border-radius: var(--pos-r-pill); font-size: 10px; font-weight: 800;
+  background: color-mix(in srgb, var(--pos-primary) 20%, transparent);
+  color: var(--pos-primary);
+}
+.pos-gchip[aria-pressed='true'] .pos-gchip__i {
+  background: color-mix(in srgb, var(--pos-on-filled) 26%, transparent);
+  color: var(--pos-on-filled);
+}
+.pos-gchip[data-anon] .pos-gchip__i {
+  background: var(--pos-veil-2); color: var(--pos-fg-2);
+}
+.pos-gchip__ok {
+  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
+  color: var(--pos-ok);
+}
+/* O ✕ mora FORA do botão: botão dentro de botão não é HTML válido. */
+.pos-gchip__x {
+  position: absolute; top: -3px; right: -3px; width: 16px; height: 16px;
+  border-radius: var(--pos-r-pill); border: none; display: grid; place-items: center;
+  background: var(--pos-danger); color: var(--pos-on-filled);
+  cursor: pointer; opacity: 0; transition: opacity 120ms ease;
+}
+.pos-gchip__wrap:hover .pos-gchip__x,
+.pos-gchip__x:focus-visible { opacity: 1; }
+
+.pos-gfield { display: flex; align-items: center; gap: 8px; color: var(--pos-fg-2); }
+.pos-gfield .pos-dsc__val { flex: 1; text-align: left; }
+.pos-gmatch {
+  display: inline-flex; align-items: center; gap: 5px; margin-top: 6px;
+  font-size: 11px; font-weight: 600; color: var(--pos-ok);
+}
+
+.pos-gsec[data-grouped] {
+  border: 1px solid var(--pos-line); border-radius: var(--pos-r);
+  overflow: hidden; margin: var(--pos-3x) var(--pos-3x) 0;
+  background: var(--pos-2);
+}
+/* O último respira embaixo também — senão o cartão encosta no "Adicionar
+   itens" e os dois viram um bloco só. */
+.pos-gsec[data-grouped]:last-of-type { margin-bottom: var(--pos-3x); }
+.pos-gsec__head {
+  padding: 8px var(--pos-3x); border-bottom: 1px solid var(--pos-line);
+  background: var(--pos-veil-2); display: grid; gap: 3px;
+  /* O cabeçalho é um <button>: sem isto ele herda a fonte do agente do
+     usuário e a linha inteira muda de tipo ao virar controle. */
+  width: 100%; border-left: 0; border-right: 0; border-top: 0;
+  font: inherit; color: inherit; text-align: left; cursor: pointer;
+  transition: background var(--pos-fast);
+}
+.pos-gsec__head:hover { background: var(--pos-3); }
+/* O chevron gira; ele é o único sinal de que a seção abre. */
+.pos-gsec__chev {
+  color: var(--pos-fg-3); flex: 0 0 auto;
+  transition: transform var(--pos-fast);
+}
+.pos-gsec__chev[data-open] { transform: rotate(90deg); }
+.pos-gsec__n {
+  margin-left: auto; font-size: 11px; font-weight: 600; color: var(--pos-fg-3);
+  white-space: nowrap;
+}
+
+/* ---- Fechamento: a MESMA seção, com uma caixa de marcar ----------------
+   Marcar decide quem paga; o resto da linha abre a lista. Dois alvos, porque
+   conferir os itens de alguém não pode tirá-lo da cobrança. */
+.pos-gsec--pick { transition: border-color var(--pos-fast), background var(--pos-fast); }
+.pos-gsec--pick[data-picked] {
+  border-color: var(--pos-primary);
+  background: color-mix(in srgb, var(--pos-primary) 5%, var(--pos-2));
+}
+/* A LINHA INTEIRA marca; a seta e o nome expandem. Dois alvos, e o maior é o
+   gesto que mais se repete. */
+/* O RECUO é do botão, não da linha.
+   Com o padding na linha, a faixa à esquerda da seta pertencia ao alvo de
+   MARCAR: o dedo mirava no nome, caía dois pixels antes e desmarcava a conta
+   em vez de abrir a lista. Passando o recuo para dentro do botão, tudo o que
+   parece "nome e seta" é o alvo de expandir. */
+.pos-gsec__head--pick {
+  display: flex; align-items: center; gap: var(--pos-2x);
+  padding: 0 var(--pos-2x) 0 0;
+}
+.pos-gsec__head--pick > .pos-gsec__open { padding: 8px var(--pos-2x) 8px var(--pos-3x); }
+.pos-gsec__head--pick[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; }
+/* A caixa fica à DIREITA: o polegar direito alcança a borda direita do tablet
+   sem atravessar a tela. */
+.pos-gsec__pick {
+  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px;
+  border: 2px solid var(--pos-line-2); background: var(--pos-1);
+  display: inline-flex; align-items: center; justify-content: center;
+  color: var(--pos-primary-fg); transition: all var(--pos-fast);
+}
+.pos-gsec__pick[data-on] { border-color: var(--pos-primary); background: var(--pos-primary); }
+.pos-gsec__open {
+  order: 1; flex: 1 1 auto; min-width: 0; display: flex; align-items: center;
+  padding: 0; border: 0; background: none; font: inherit; color: inherit;
+  text-align: left; cursor: pointer;
+}
+/* A ordem da linha: nome → taxa → contagem → total → caixa. Sem `order`
+   explícito na pastilha da taxa ela caía em `order: 0` e saltava para ANTES
+   da seta, virando a primeira coisa da linha. */
+.pos-gsec__head--pick > .pos-gsec__pct { order: 2; }
+.pos-gsec__head--pick > .pos-gsec__n { order: 3; margin-left: auto; }
+.pos-gsec__head--pick > .pos-gsec__tot { order: 4; }
+.pos-gsec__head--pick > .pos-gsec__pick { order: 5; }
+
+/* A linha "Todos": a mesma caixa e a MESMA sangria dos cartões — recuada, ela
+   parecia de outra lista, e o olho procurava a que coluna cada caixa pertence. */
+.pos-gsec__all {
+  display: flex; align-items: center; gap: var(--pos-2x);
+  margin: 0; padding: 10px var(--pos-3x);
+  border: 0; border-bottom: 1px solid var(--pos-line-strong);
+  cursor: pointer; transition: background var(--pos-fast), border-color var(--pos-fast);
+}
+.pos-gsec__all:hover { background: var(--pos-2); }
+.pos-gsec__all[aria-checked='true'] { border-bottom-color: var(--pos-primary); }
+.pos-gsec__all-t {
+  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
+  color: var(--pos-fg);
+}
+.pos-gsec__all > .pos-gsec__n { margin-left: auto; }
+
+/* O X da casca sai do caminho enquanto se cobra. */
+:root[data-pos-checkout] .saas-takeover-close { display: none; }
+/* A taxa dentro do cartão: em primária, e com a régua fina de cima que o V1
+   desenha entre os itens e ela. */
+.pos-gsec__r--svc {
+  padding-top: 6px; margin-top: 3px; border-top: 1px solid var(--pos-line);
+  color: var(--pos-primary); font-weight: 650;
+}
+.pos-gsec__r--paid { color: var(--pos-ok); font-weight: 600; }
+.pos-gsec__r--paid > span:first-child { display: inline-flex; align-items: center; gap: 4px; }
+/* "Selecionar todos" mora no cabeçalho do passo, onde estava "Passo N de 3". */
+.pos-checkout__all {
+  padding: 0; border: 0; background: none; cursor: pointer;
+  font-size: 11px; font-weight: 700; color: var(--pos-primary);
+  white-space: nowrap; text-decoration: underline; text-underline-offset: 2px;
+}
+.pos-gsec__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.pos-gsec__name {
+  display: inline-flex; align-items: center; gap: 6px;
+  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
+  color: var(--pos-fg);
+}
+.pos-gsec__name > svg { color: var(--pos-primary); }
+.pos-gsec__pct {
+  padding: 1px 6px; border-radius: var(--pos-r-pill); font-size: 10px; font-weight: 700;
+  text-transform: none; letter-spacing: 0;
+  background: color-mix(in srgb, var(--pos-primary) 12%, transparent); color: var(--pos-primary);
+}
+/* A pastilha da taxa do participante herda o mesmo tracejado do rodapé: a
+   mesma pergunta, atendida pela mesma folha, tem de parecer a mesma coisa. */
+.pos-gsec__pct.pos-tot__link { gap: 0; text-underline-offset: 2px; }
+.pos-gsec__tot { font-size: 12px; font-weight: 700; color: var(--pos-fg-2); }
+.pos-gsec__paid { display: flex; align-items: center; justify-content: space-between; font-size: 11px; }
+.pos-gsec__ok { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--pos-ok); }
+.pos-gsec__due { font-weight: 700; color: var(--pos-primary); }
+
+/* A recusa do servidor é vermelha; o impedimento local segue discreto. Os dois
+   ocupam a mesma linha porque nunca importam ao mesmo tempo: enquanto falta
+   preencher, não houve tentativa; depois da tentativa, o que importa é a
+   resposta. */
+.pos-sheet__why[data-error] {
+  color: var(--pos-danger);
+  font-weight: 600;
+}
+
+/* ---------------------------------------------------------------------------
+   «Escala de hoje». Portado de EscalaPanel.tsx do V1.
+--------------------------------------------------------------------------- */
+/* Na COLUNA, não numa folha: ela ocupa a largura do rail e rola dentro dele. */
+.pos-shift { display: flex; flex-direction: column; min-height: 0; }
+.pos-shift .pos-sheet__body { padding-top: 0; }
+.pos-shift__sub {
+  flex: 0 0 auto;
+  margin: 0; padding: 0 var(--pos-4x) var(--pos-3x);
+  font-size: 12px; color: var(--pos-fg-2);
+}
+.pos-shift__form {
+  display: grid; gap: var(--pos-3x);
+  padding: var(--pos-3x); border: 1px solid var(--pos-line); border-radius: var(--pos-r);
+  background: var(--pos-veil);
+}
+.pos-shift__swap {
+  margin-left: auto; border: none; background: none; cursor: pointer;
+  font: inherit; font-size: 11px; text-transform: none; letter-spacing: 0;
+  color: var(--pos-primary); text-decoration: underline; text-underline-offset: 2px;
+}
+.pos-shift__target {
+  display: flex; align-items: center; gap: 6px; margin: 0;
+  padding: 7px 10px; border-radius: var(--pos-r-sm); background: var(--pos-veil-2);
+  font-size: 13px; font-weight: 600; color: var(--pos-fg);
+}
+/* Um espaço À ESPERA, não um campo vazio: o tracejado diz que falta um gesto
+   na planta — e é lá que o gesto acontece. */
+.pos-shift__await {
+  margin: 0; padding: 12px 10px; text-align: center;
+  border: 1px dashed var(--pos-line-strong); border-radius: var(--pos-r-sm);
+  font-size: 11px; line-height: 1.45; color: var(--pos-fg-2);
+}
+.pos-shift__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pos-2x); }
+.pos-shift__go { width: 100%; justify-content: center; gap: 6px; }
+.pos-shift__err { display: grid; gap: 6px; justify-items: center; padding: var(--pos-4x) 0; }
+.pos-shift__list { display: grid; gap: var(--pos-3x); margin-top: var(--pos-4x); }
+.pos-shift__group { display: grid; gap: 5px; }
+.pos-shift__gname {
+  display: flex; align-items: center; gap: 6px; margin: 0;
+  font-size: 13px; font-weight: 700; color: var(--pos-fg);
+}
+.pos-shift__dot { width: 10px; height: 10px; border-radius: var(--pos-r-xs); flex: none; }
+.pos-shift__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
+.pos-shift__row {
+  display: flex; align-items: center; justify-content: space-between; gap: 8px;
+  padding: 7px 10px; border: 1px solid var(--pos-line); border-radius: var(--pos-r-sm);
+  font-size: 13px;
+}
+.pos-shift__who { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
+.pos-shift__name { font-weight: 600; color: var(--pos-fg); }
+.pos-shift__when { font-size: 11px; color: var(--pos-fg-2); }
+.pos-shift__act { display: flex; align-items: center; gap: 6px; flex: none; }
+.pos-shift__role {
+  padding: 2px 7px; border-radius: var(--pos-r-pill); font-size: 10px; font-weight: 700;
+  background: var(--pos-veil-2); color: var(--pos-fg-2);
+}
+.pos-shift__out {
+  display: grid; place-items: center; width: 24px; height: 24px;
+  border: none; border-radius: var(--pos-r-sm); background: none; cursor: pointer;
+  color: var(--pos-danger);
+}
+.pos-shift__out:hover { background: color-mix(in srgb, var(--pos-danger) 12%, transparent); }
+.pos-shift__out:disabled { opacity: 0.4; cursor: default; }
+.pos-shift__foot {
+  flex: 0 0 auto;
+  display: flex; align-items: center; gap: 6px;
+  padding: var(--pos-3x) var(--pos-4x);
+  border-top: 1px solid var(--pos-line);
+  font-size: 11px; line-height: 1.4; color: var(--pos-fg-2);
+  /* Em edição entram rótulo, campo e dois botões: sem quebra, o Cancelar
+     escapa pela direita numa gaveta estreita. */
+  flex-wrap: wrap;
+}
+/* «mudar» é um LINK no meio da frase, e não um botão: ele continua a leitura,
+   e um botão ali roubaria o peso da própria regra que a frase enuncia. */
+.pos-shift__mudar {
+  border: 0; background: none; padding: 0; cursor: pointer;
+  font: inherit; color: var(--pos-primary); text-underline-offset: 2px;
+}
+.pos-shift__mudar:hover { text-decoration: underline; }
+.pos-shift__cut {
+  height: 26px; padding: 0 6px;
+  border: 1px solid var(--pos-line); border-radius: var(--pos-r-sm);
+  background: var(--pos-1); color: var(--pos-fg); font: inherit;
+  /* O campo de hora do navegador ignora `font-size` herdado em alguns temas;
+     fixar evita que ele cresça e empurre os botões para a linha de baixo. */
+  font-size: 12px;
+}
+
+/* A raiz que o app monta só para as FOLHAS, fora da tela do PDV.
+   Ela existe para as variáveis `--pos-*` chegarem lá; sem ocupar espaço nem
+   capturar o clique quando nenhuma folha está aberta. */
+/* A raiz das folhas NÃO PINTA.
+   Ela existe só para as variáveis `--pos-*` alcançarem as folhas, e herdava o
+   `background` do `.pos` — sendo `fixed; inset: 0`, cobria a tela inteira com
+   o bege do PDV e apagava o salão atrás. Com a cortina por cima disso, o
+   resultado era um modal boiando num fundo lavado, sem a tela de trás. */
+.pos-sheets {
+  position: fixed; inset: 0; pointer-events: none; z-index: 70;
+  background: transparent;
+}
+.pos-sheets:empty { display: none; }
+.pos-sheets > * { pointer-events: auto; }
+
+/* ---------------------------------------------------------------------------
+   «Mesas fechadas» — a coluna da direita sem mesa selecionada.
+   Portado de PosClosedTablesPanel.tsx do V1.
+--------------------------------------------------------------------------- */
+.pos-closed { display: flex; flex-direction: column; min-height: 0; flex: 1; }
+.pos-closed__head {
+  display: flex; align-items: baseline; gap: var(--pos-2x); flex: 0 0 auto;
+  padding: var(--pos-4x) var(--pos-4x) var(--pos-3x);
+}
+.pos-closed__title {
+  margin: 0; font-size: 17px; font-weight: 660; color: var(--pos-fg);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.pos-closed__when { font-size: 12px; color: var(--pos-fg-2); }
+.pos-closed__sum {
+  display: flex; align-items: center; justify-content: space-between;
+  flex: 0 0 auto; padding: 8px var(--pos-4x);
+  border-block: 1px solid var(--pos-line); background: var(--pos-veil);
+  font-size: 12px; font-weight: 600; color: var(--pos-fg-2);
+}
+.pos-closed__sum .pos-num { font-size: 14px; color: var(--pos-fg); }
+.pos-closed__list {
+  flex: 1 1 auto; min-height: 0; overflow-y: auto;
+  padding: var(--pos-2x) var(--pos-3x) var(--pos-4x);
+  display: grid; gap: 4px; align-content: start;
+}
+.pos-closed__row {
+  display: flex; align-items: center; justify-content: space-between; gap: var(--pos-3x);
+  width: 100%; padding: 9px 11px; border: 1px solid transparent; border-radius: var(--pos-r-sm);
+  background: none; font: inherit; text-align: left; cursor: pointer;
+}
+.pos-closed__row:hover:not(:disabled) { background: var(--pos-veil-2); border-color: var(--pos-line); }
+.pos-closed__row:disabled { cursor: default; }
+.pos-closed__who { display: grid; gap: 1px; min-width: 0; }
+.pos-closed__where {
+  font-size: 14px; font-weight: 620; color: var(--pos-fg);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.pos-closed__meta {
+  font-size: 11.5px; color: var(--pos-fg-2);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.pos-closed__total { flex: none; font-size: 14px; font-weight: 700; color: var(--pos-fg); }
+/* O PLACAR do turno: duas colunas com uma régua no meio, como no V1. */
+.pos-closed__score {
+  display: flex; align-items: stretch; text-align: center;
+  border-bottom: 1px solid var(--pos-line); flex: none;
+}
+.pos-closed__sc { flex: 1; padding: var(--pos-2x) var(--pos-3x); display: grid; gap: 1px; }
+.pos-closed__scd { width: 1px; background: var(--pos-line); }
+.pos-closed__scl {
+  font-size: 10px; font-weight: 600; text-transform: uppercase;
+  letter-spacing: 0.05em; color: var(--pos-fg-3);
+}
+.pos-closed__scv { font-size: 14px; font-weight: 700; color: var(--pos-fg-2); }
+.pos-closed__scv[data-tone='ok']   { color: var(--pos-ok); }
+.pos-closed__scv[data-tone='warn'] { color: var(--pos-warn); }
+.pos-closed__scn { font-size: 10px; color: var(--pos-fg-3); }
+
+/* Não saber ≠ saber que não. O aviso existe para essas duas não se parecerem. */
+.pos-closed__warn {
+  flex: none; margin: 0; padding: var(--pos-2x) var(--pos-4x);
+  border-bottom: 1px solid var(--pos-line);
+  background: color-mix(in srgb, var(--pos-warn) 12%, transparent);
+  font-size: 11.5px; color: var(--pos-warn);
+}
+
+/* O selo: ícone E palavra. De longe, cor sozinha não responde "saiu nota?". */
+.pos-closed__seal {
+  display: inline-flex; align-items: center; gap: 3px; flex: none;
+  margin-left: 6px; padding: 1px 5px; border-radius: var(--pos-r-sm);
+  font-size: 10px; font-weight: 600; text-transform: none; letter-spacing: 0;
+}
+.pos-closed__seal[data-seal='ok'] {
+  background: color-mix(in srgb, var(--pos-ok) 14%, transparent); color: var(--pos-ok);
+}
+.pos-closed__seal[data-seal='partial'] {
+  background: color-mix(in srgb, var(--pos-warn) 16%, transparent); color: var(--pos-warn);
+}
+.pos-closed__seal[data-seal='none'] {
+  background: var(--pos-veil-2); color: var(--pos-fg-3);
+}
+
+.pos-closed__empty {
+  flex: 1; display: grid; place-content: center; justify-items: center; gap: 5px;
+  padding: var(--pos-6x) var(--pos-4x); text-align: center; color: var(--pos-fg-3);
+}
+.pos-closed__empty > svg { color: var(--pos-fg-3); margin-bottom: 2px; }
+
+/* ---------------------------------------------------------------------------
+   «Fechar conta» é VERDE.
+   -------------------------------------------------------------------------
+   O botão usava a primária da casa, e no ChefControl isso é o Ouro — a mesma
+   cor do aviso de taxa e do realce do cardápio. O gesto que TERMINA o
+   atendimento e move dinheiro precisa de uma cor só dele, que não se repete em
+   mais nada da tela.
+
+   O verde vem do token de "deu certo" (`--pos-ok`), e não de um hex novo: é a
+   mesma cor que já diz "pago" na comanda, então a tela continua com um
+   vocabulário de cor só.                                                    */
+.pos-btn--commit {
+  background: var(--pos-ok);
+  border-color: var(--pos-ok);
+  color: var(--pos-on-filled);
+  width: 100%;
+}
+.pos-btn--commit:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--pos-ok) 88%, #000);
+  border-color: color-mix(in srgb, var(--pos-ok) 88%, #000);
+}
+.pos-btn--commit .pos-kbd {
+  background: color-mix(in srgb, var(--pos-on-filled) 16%, transparent);
+  border-color: color-mix(in srgb, var(--pos-on-filled) 26%, transparent);
+}
+/* Com o `⋯` dentro dela, a linha auxiliar passa a ter três peças: os dois
+   rótulos dividem o espaço e o `⋯` fica do tamanho do toque. */
+.pos-cta__aux { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--pos-2x); }
+
+/* A barra de volta, enquanto a atividade está aberta no lugar do pedido. */
+.pos-tkt__back {
+  display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
+  width: 100%; padding: 9px var(--pos-4x);
+  border: none; border-bottom: 1px solid var(--pos-line);
+  background: var(--pos-veil); color: var(--pos-fg-2);
+  font: inherit; font-size: 12.5px; font-weight: 600; text-align: left; cursor: pointer;
+}
+.pos-tkt__back:hover { background: var(--pos-veil-2); color: var(--pos-fg); }
+.pos-tkt__pend { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--pos-warn); }
+
+/* Os botões de AÇÃO falam mais alto.
+   Fechar conta, Enviar, Imprimir, Desconto: são o que a mão procura sem ler.
+   O peso normal deixava o rótulo com o mesmo tom do texto da comanda logo
+   acima, e o botão virava mais uma linha da lista. */
+/* `.pos` na frente porque o reset de `button` do hospedeiro traz
+   `font: inherit` — e o atalho `font` zera o peso. Sem a raiz na regra, o
+   rótulo voltava a 400 e o botão desaparecia dentro da lista. */
+.pos .pos-btn { font-weight: 700; }
+.pos .pos-btn__l1 { font-weight: 700; }
+.pos .pos-btn .pos-num { font-weight: 700; }
+
+/* ---------------------------------------------------------------------------
+   O subcabeçalho de configuração da planta, e o filtro de praças flutuante.
+--------------------------------------------------------------------------- */
+/* A barra da planta ENVOLVE, mas o rótulo de um botão não quebra ao meio.
+   Com o rail aberto sobram ~800px, e «Organizar automaticamente» nascia em
+   duas linhas dentro do próprio botão — um controle com a altura de dois e o
+   texto partido no meio da palavra. Quem envolve é a BARRA; cada peça fica
+   inteira ou desce para a linha de baixo. */
+.pos-subhead {
+  display: flex; align-items: center; flex-wrap: wrap; gap: var(--pos-2x); flex: 0 0 auto;
+  padding: 0 var(--pos-4x) var(--pos-3x);
+}
+.pos-subhead > * { white-space: nowrap; }
+/* AS DUAS ZONAS da barra da planta: à esquerda o que ela É (contagem,
+   ferramentas de desenho); à direita o que se FAZ com ela (estado, escala,
+   organizar, concluir). É o `ml-auto` do `EditorToolbar` do V1, e é ele mesmo
+   — `margin-left: auto` empurra o bloco para a direita quando sobra espaço e
+   se rende quando não sobra, sem um elemento vazio para isso.
+   As ações são UM bloco, não itens soltos: a barra mede ~856px com o rail
+   aberto, e soltos quem quebrava era só o último — «Organizar
+   automaticamente» descia sozinho, alinhado à ESQUERDA, parecendo pertencer à
+   outra zona. */
+.pos-subhead__acts {
+  display: flex; align-items: center; gap: var(--pos-2x);
+  flex-wrap: wrap; justify-content: flex-end;
+  margin-left: auto;
+}
+/* O censo é a única peça que pode envolver: ele é frase, não rótulo. */
+.pos-planbar__n { white-space: normal; }
+
+/* As praças flutuam sobre as mesas, no rodapé.
+   `absolute` dentro de `.pos-main` (que é `relative`), e não `sticky`: como
+   irmã da área que rola, a barra sticky se prendia ao TOPO do fluxo, que é
+   onde ela nasce. Ancorada ao pé da coluna do salão ela fica onde o polegar
+   já está — e continua dentro da coluna, sem cobrir a comanda ao lado. */
+/* A PILHA flutuante: ambientes em cima, praças embaixo.
+   Cada fileira era `position: absolute` com o mesmo `bottom`, então a segunda
+   caía exatamente sobre a primeira e só a de cima aparecia. Quem flutua é a
+   pilha; as fileiras dentro dela empilham normalmente. */
+.pos-zonestack {
+  position: absolute; left: 50%; transform: translateX(-50%);
+  bottom: calc(var(--pos-4x) + var(--pos-safe-b)); z-index: 12;
+  display: grid; gap: 5px; justify-items: center;
+  max-width: calc(100% - var(--pos-6x));
+}
+.pos-zones {
+  display: flex; align-items: center; gap: 4px; width: max-content; max-width: 100%;
+  padding: 5px; overflow-x: auto; scrollbar-width: none;
+  border: 1px solid color-mix(in srgb, var(--pos-fg) 10%, transparent);
+  border-radius: var(--pos-r-pill);
+  /* Vidro: as mesas continuam visíveis por trás, e a barra não corta o salão
+     em dois. `saturate` é o que dá o brilho de vidro em vez de fumaça. */
+  background: color-mix(in srgb, var(--pos-1) var(--pos-glass-bg), transparent);
+  backdrop-filter: blur(var(--pos-glass-blur)) saturate(var(--pos-glass-sat));
+  -webkit-backdrop-filter: blur(var(--pos-glass-blur)) saturate(var(--pos-glass-sat));
+  box-shadow: 0 6px 24px -8px var(--pos-shadow), 0 1px 0 color-mix(in srgb, var(--pos-fg) 6%, transparent) inset;
+}
+.pos-zones::-webkit-scrollbar { display: none; }
+@supports not (backdrop-filter: blur(1px)) {
+  .pos-zones { background: var(--pos-1); }
+  .pos-head, .pos-cats, .pos-dock { background: var(--pos-0); }
+}
+.pos-zone {
+  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
+  min-height: 32px; padding: 0 13px; border-radius: var(--pos-r-pill);
+  border: none; background: none; color: var(--pos-fg-2);
+  font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
+  transition: background var(--pos-t) var(--pos-e), color var(--pos-t) var(--pos-e);
+}
+.pos-zone:hover { color: var(--pos-fg); background: var(--pos-veil-2); }
+.pos-zone[aria-pressed='true'] {
+  background: var(--pos-fg); color: var(--pos-1);
+}
+.pos-zone__dot { width: 8px; height: 8px; border-radius: var(--pos-r-round); flex: none; }
+.pos-zone[aria-pressed='true'] .pos-zone__dot { box-shadow: 0 0 0 2px color-mix(in srgb, var(--pos-1) 40%, transparent); }
+
+/* ---------------------------------------------------------------------------
+   Carrinho × enviado: dois desenhos, como no V1.
+--------------------------------------------------------------------------- */
+/* A linha ENVIADA é de leitura: sem controles, mais baixa, e com a hora ao
+   lado do nome. Numa mesa de oito são quarenta linhas na noite, e o que o
+   operador quer ali é caber tudo na tela. */
+.pos-ln[data-state='fired'], .pos-ln[data-state='delivered'] { min-height: 44px; padding-block: 6px; }
+.pos-ln__q { margin-right: 6px; color: var(--pos-fg-2); font-weight: 700; }
+.pos-ln__at {
+  display: inline-flex; align-items: center; gap: 3px; margin-left: 7px;
+  font-size: 11px; font-weight: 500; color: var(--pos-fg-3); white-space: nowrap;
+}
+.pos-ln__sent {
+  flex: none; padding: 2px 8px; border-radius: var(--pos-r-pill);
+  background: var(--pos-veil-2); color: var(--pos-fg-2);
+  font-size: 10.5px; font-weight: 700; white-space: nowrap;
+}
+
+/* ---------------------------------------------------------------------------
+   O CARRINHO: o que ainda não foi para a cozinha.
+   -------------------------------------------------------------------------
+   Um bloco à parte, em destaque, como no V1. Misturado com o que já saiu, o
+   item pendente some — e o operador fecha a conta achando que mandou tudo
+   enquanto a cozinha nunca viu os dois últimos pratos.                      */
+.pos-cart {
+  margin: 0 var(--pos-3x) var(--pos-3x);
+  border: 1px solid color-mix(in srgb, var(--pos-accent) 40%, transparent);
+  border-radius: var(--pos-r);
+  background: color-mix(in srgb, var(--pos-accent) 8%, var(--pos-1));
+  overflow: hidden;
+}
+.pos-cart__head {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 7px var(--pos-3x);
+  border-bottom: 1px solid color-mix(in srgb, var(--pos-accent) 26%, transparent);
+  background: color-mix(in srgb, var(--pos-accent) 14%, transparent);
+}
+.pos-cart__t {
+  font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
+  color: var(--pos-fg);
+}
+.pos-cart__v { font-size: 13px; font-weight: 700; color: var(--pos-fg); }
+/* Dentro do carrinho a linha não tem fundo próprio: o bloco já é o destaque. */
+.pos-cart .pos-ln { background: transparent; }
+
+/* A conta do rodapé: o couvert e a taxa clicável. */
+.pos-tot__how { font-size: 11px; color: var(--pos-fg-3); }
+/* O que se pode MUDAR fica em primária com sublinhado TRACEJADO.
+   Só a cor não basta: num rodapé de números a primária lê como destaque de
+   valor, não como convite a tocar — o founder pediu a taxa de novo depois de
+   ela já estar clicável. O tracejado é a convenção de "isto abre alguma
+   coisa" que não se confunde com link de navegação. */
+.pos-tot__link {
+  display: inline-flex; align-items: center; gap: 5px;
+  border: none; background: none; padding: 0; cursor: pointer;
+  font: inherit; color: var(--pos-primary); text-align: left;
+  text-decoration: underline dashed;
+  text-decoration-thickness: 1px; text-underline-offset: 3px;
+}
+.pos-tot__link:hover { text-decoration-style: solid; }
+.pos-tot__link:hover { text-decoration: underline; text-underline-offset: 2px; }
+
+/* A cadeira que ainda não tem nome: tracejada, como a anônima — as duas estão
+   pedindo a mesma coisa, e desenhá-las igual é dizer isso sem texto. */
+.pos-gchip--empty {
+  border-style: dashed; background: transparent; color: var(--pos-fg-3);
+}
+.pos-gchip--empty:hover { color: var(--pos-fg-2); background: var(--pos-veil-2); }
+.pos-gchip--empty .pos-gchip__i {
+  background: var(--pos-veil-2); color: var(--pos-fg-3); font-size: 13px; font-weight: 600;
+}
+
+/* A explicação curta abaixo de um campo do diálogo de pessoa. */
+.pos-gnote { display: block; margin-top: 5px; font-size: 11px; color: var(--pos-fg-3); }
+
+/* ---------------------------------------------------------------------------
+   «Precisa de autorização»: o QUE está sendo aprovado, antes do PIN.
+--------------------------------------------------------------------------- */
+.pos-auth__what {
+  padding: var(--pos-3x); border: 1px solid var(--pos-line); border-radius: var(--pos-r);
+  background: var(--pos-veil);
+}
+.pos-auth__action {
+  display: block; margin-bottom: 7px;
+  font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
+  color: var(--pos-fg-2);
+}
+.pos-auth__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
+.pos-auth__line {
+  display: flex; align-items: baseline; justify-content: space-between; gap: var(--pos-3x);
+  font-size: 14px; color: var(--pos-fg);
+}
+.pos-auth__v { font-weight: 700; flex: none; }
+.pos-auth__line[data-danger] .pos-auth__v { color: var(--pos-danger); }
+
+/* A linha ENVIADA fica ainda mais compacta: sem moldura e mais baixa.
+   Seis linhas com borda são seis quadros competindo com a única coisa que
+   importa ali — o que a mesa consumiu. Um filete entre elas basta. */
+.pos-ln[data-state='fired'], .pos-ln[data-state='delivered'] {
+  min-height: 38px; padding-block: 4px;
+  border: none; border-radius: 0;
+  border-bottom: 1px solid var(--pos-line);
+}
+.pos-gsec .pos-ln[data-state='fired']:last-child,
+.pos-gsec .pos-ln[data-state='delivered']:last-child { border-bottom: none; }
+
+/* ---------------------------------------------------------------------------
+   Fechar conta em passos: modo → participantes → pagamento.
+--------------------------------------------------------------------------- */
+.pos-mode { display: grid; gap: var(--pos-2x); padding: 0 var(--pos-4x); }
+.pos-mode__b {
+  display: flex; align-items: center; gap: var(--pos-3x);
+  padding: var(--pos-3x); border: 1px solid var(--pos-line); border-radius: var(--pos-r);
+  background: var(--pos-2); text-align: left; cursor: pointer; font: inherit;
+}
+.pos-mode__b:hover { border-color: var(--pos-primary); background: var(--pos-3); }
+.pos-mode__i {
+  display: grid; place-items: center; width: 38px; height: 38px; flex: none;
+  border-radius: var(--pos-r-round);
+}
+.pos-mode__i[data-tone='who'] { background: color-mix(in srgb, var(--pos-info) 14%, transparent); color: var(--pos-info); }
+.pos-mode__i[data-tone='all'] { background: color-mix(in srgb, var(--pos-ok) 14%, transparent); color: var(--pos-ok); }
+.pos-mode__t { display: block; font-size: 14px; font-weight: 700; color: var(--pos-fg); }
+.pos-mode__h { display: block; margin-top: 2px; font-size: 12px; color: var(--pos-fg-2); }
+
+.pos-paywho { display: grid; gap: 4px; padding: 0 var(--pos-3x); overflow-y: auto; }
+.pos-paywho__b {
+  display: flex; align-items: center; justify-content: space-between; gap: var(--pos-3x);
+  padding: 11px var(--pos-3x); border: 1px solid var(--pos-line); border-radius: var(--pos-r);
+  background: var(--pos-2); font: inherit; text-align: left; cursor: pointer;
+}
+.pos-paywho__b[aria-pressed='true'] {
+  border-color: var(--pos-primary);
+  background: color-mix(in srgb, var(--pos-primary) 10%, var(--pos-2));
+}
+.pos-paywho__n { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--pos-fg); }
+.pos-paywho__s {
+  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px;
+  border-radius: var(--pos-r-sm); background: var(--pos-veil-2);
+  font-size: 11px; font-weight: 700; color: var(--pos-fg-2);
+}
+
+/* ---------------------------------------------------------------------------
+   Linhas selecionáveis (desconto, cancelamento, transferência).
+   -------------------------------------------------------------------------
+   Eram `<input type="checkbox">` crus: o quadradinho do sistema operacional no
+   meio de campos desenhados, com outro azul, outro raio e outro tamanho de
+   toque. Agora a LINHA inteira é o alvo e o estado se lê pela linha — que é
+   como as pastilhas de participante já funcionam.                           */
+.pos-dsc__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
+.pos-dsc__line {
+  display: flex; align-items: center; gap: var(--pos-3x);
+  padding: 9px var(--pos-3x);
+  border: 1px solid var(--pos-line); border-radius: var(--pos-r);
+  background: var(--pos-2); cursor: pointer;
+  transition: background var(--pos-t) var(--pos-e), border-color var(--pos-t) var(--pos-e);
+}
+.pos-dsc__line:hover { background: var(--pos-3); }
+.pos-dsc__line:has(input:checked) {
+  border-color: var(--pos-primary);
+  background: color-mix(in srgb, var(--pos-primary) 10%, var(--pos-2));
+}
+.pos-dsc__line input[type='checkbox'] {
+  appearance: none; -webkit-appearance: none;
+  width: 18px; height: 18px; flex: none; margin: 0;
+  border: 1.5px solid var(--pos-line-strong); border-radius: var(--pos-r-xs);
+  background: var(--pos-1); cursor: pointer; position: relative;
+}
+.pos-dsc__line input[type='checkbox']:checked {
+  border-color: var(--pos-primary); background: var(--pos-primary);
+}
+.pos-dsc__line input[type='checkbox']:checked::after {
+  content: ''; position: absolute; inset: 0;
+  background: var(--pos-primary-fg);
+  clip-path: polygon(14% 46%, 8% 54%, 38% 82%, 92% 26%, 85% 19%, 38% 68%);
+}
+.pos-dsc__line .pos-dsc__name { flex: 1; min-width: 0; font-size: 14px; color: var(--pos-fg); }
+.pos-dsc__line .pos-dsc__n { color: var(--pos-fg-2); font-weight: 700; margin-right: 6px; }
+.pos-dsc__line .pos-num { flex: none; font-weight: 600; }
+
+/* O campo de PIN: as bolinhas mostram, o input invisível recebe.
+   O input fica por cima e transparente — assim o toque levanta o teclado do
+   aparelho e o foco tem onde morar, sem um segundo teclado na tela. */
+.pos-pin__field { position: relative; display: block; }
+.pos-pin__input {
+  position: absolute; inset: 0; width: 100%; height: 100%;
+  border: none; background: transparent; color: transparent;
+  caret-color: transparent; font-size: 16px; /* 16px: abaixo disso o iOS dá zoom */
+  cursor: pointer;
+}
+.pos-pin__input:focus { outline: none; }
+.pos-pin__field:focus-within .pos-pin__dots {
+  border-color: var(--pos-primary);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pos-primary) 22%, transparent);
+}
+.pos-pin__field .pos-pin__dots {
+  display: flex; align-items: center; justify-content: center; gap: var(--pos-3x);
+  min-height: var(--pos-hit-2); padding: 0 var(--pos-3x);
+  border: 1px solid var(--pos-line-strong); border-radius: var(--pos-r);
+  background: var(--pos-1);
+  transition: border-color var(--pos-t) var(--pos-e), box-shadow var(--pos-t) var(--pos-e);
+}
+
+/* Histórico de transferências. */
+.pos-thist { display: grid; gap: var(--pos-2x); }
+.pos-thist__c {
+  display: grid; gap: 7px; padding: var(--pos-3x);
+  border: 1px solid var(--pos-line); border-radius: var(--pos-r); background: var(--pos-2);
+}
+.pos-thist__h { display: flex; align-items: center; justify-content: space-between; gap: var(--pos-2x); }
+.pos-thist__k {
+  display: inline-flex; align-items: center; gap: 7px;
+  font-size: 12px; font-weight: 700; color: var(--pos-fg);
+}
+.pos-thist__i {
+  display: grid; place-items: center; width: 26px; height: 26px;
+  border-radius: var(--pos-r-sm);
+  background: color-mix(in srgb, var(--pos-primary) 14%, transparent);
+  color: var(--pos-primary);
+}
+.pos-thist__w { font-size: 11px; color: var(--pos-fg-3); font-variant-numeric: tabular-nums; }
+.pos-thist__b { display: grid; gap: 2px; }
+.pos-thist__r {
+  display: flex; align-items: center; gap: 5px; margin: 0;
+  font-size: 13px; color: var(--pos-fg-2);
+}
+.pos-thist__r strong { color: var(--pos-fg); font-weight: 650; }
+.pos-thist__r--who { font-size: 11.5px; color: var(--pos-fg-3); }
+
+/* A taxa que está valendo, no alto do seletor. */
+.pos-svc__now {
+  display: flex; align-items: baseline; justify-content: space-between;
+  padding: var(--pos-3x); border: 1px solid var(--pos-line); border-radius: var(--pos-r);
+  background: var(--pos-veil);
+}
+.pos-svc__nowl {
+  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
+  color: var(--pos-fg-2);
+}
+.pos-svc__nowv { font-size: 22px; font-weight: 700; color: var(--pos-fg); }
+
+/* Modo indisponível: apagado, mas ainda legível — o subtítulo diz por quê. */
+.pos-mode__b:disabled { opacity: 0.55; cursor: not-allowed; }
+.pos-mode__b:disabled:hover { border-color: var(--pos-line); background: var(--pos-2); }
+
+/* ---------------------------------------------------------------------------
+   Os passos do fechamento têm SEMPRE a mesma forma.
+   -------------------------------------------------------------------------
+   Voltar no topo, o assunto do passo ao lado, o conteúdo rolando no meio e a
+   ação presa embaixo. Um botão que muda de altura a cada passo obriga o garçom
+   a procurá-lo — e ele está com o cliente esperando e a maquininha na mão.   */
+.pos-checkout { display: flex; flex-direction: column; min-height: 0; flex: 1; }
+.pos-checkout__head {
+  display: flex; align-items: baseline; justify-content: space-between; gap: var(--pos-2x);
+  flex: 0 0 auto; padding: var(--pos-2x) var(--pos-4x) var(--pos-3x);
+}
+.pos-step__of {
+  font-size: 11px; font-weight: 600; color: var(--pos-fg-3); white-space: nowrap;
+}
+/* O corpo é o ÚNICO que rola. */
+.pos-checkout__body {
+  flex: 1 1 auto; min-height: 0; overflow-y: auto;
+  align-content: start; padding-bottom: var(--pos-3x);
+}
+.pos-checkout .pos-cta { flex: 0 0 auto; }
+.pos-checkout .pos-tot { flex: 0 0 auto; }
+.pos-checkout .pos-back { flex: 0 0 auto; }
+
+/* ---------------------------------------------------------------------------
+   «Resumo da conta» — o que vai ser cobrado, por pessoa.
+   -------------------------------------------------------------------------
+   Um cartão por conta, com o estado no alto. O corpo separa o que a pessoa
+   pediu do que a mesa rateou, e fecha com taxa, couvert e o que falta pagar —
+   é a tela que o garçom vira para o cliente antes de passar o cartão.       */
+.pos-sumy { display: grid; gap: var(--pos-3x); padding: 0 var(--pos-3x); }
+.pos-sumy__c {
+  border: 1px solid var(--pos-line); border-radius: var(--pos-r);
+  background: var(--pos-2); overflow: hidden;
+}
+.pos-sumy__h {
+  display: flex; align-items: center; justify-content: space-between; gap: var(--pos-2x);
+  padding: 8px var(--pos-3x);
+  border-bottom: 1px solid var(--pos-line); background: var(--pos-veil-2);
+}
+.pos-sumy__n {
+  display: inline-flex; align-items: center; gap: 6px;
+  font-size: 13px; font-weight: 700; color: var(--pos-fg);
+}
+.pos-sumy__n > svg { color: var(--pos-fg-2); }
+/* O estado é a primeira coisa que se lê: quem já pagou não se cobra de novo. */
+.pos-sumy__st {
+  padding: 2px 8px; border-radius: var(--pos-r-pill);
+  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
+}
+.pos-sumy__st[data-st='settled'] { background: color-mix(in srgb, var(--pos-ok) 14%, transparent); color: var(--pos-ok); }
+.pos-sumy__st[data-st='partial'] { background: color-mix(in srgb, var(--pos-warn) 16%, transparent); color: var(--pos-warn); }
+.pos-sumy__st[data-st='open']    { background: color-mix(in srgb, var(--pos-info) 14%, transparent); color: var(--pos-info); }
+
+.pos-sumy__b { display: grid; gap: 3px; padding: var(--pos-3x); }
+.pos-sumy__r {
+  display: flex; align-items: baseline; justify-content: space-between; gap: var(--pos-3x);
+  font-size: 13px; color: var(--pos-fg);
+}
+.pos-sumy__r > span:first-child { min-width: 0; overflow-wrap: anywhere; }
+/* O rateio em itálico e apagado: é o que a pessoa NÃO pediu, e a diferença
+   precisa se ver sem ler o rótulo. */
+.pos-sumy__r--shared { font-style: italic; color: var(--pos-fg-2); }
+.pos-sumy__lbl {
+  display: inline-flex; align-items: center; gap: 5px; margin-top: 6px;
+  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
+  color: var(--pos-fg-3);
+}
+.pos-sumy__r--sum {
+  margin-top: 6px; padding-top: 7px; border-top: 1px dashed var(--pos-line-strong);
+  font-weight: 700;
+}
+.pos-sumy__r--paid { color: var(--pos-ok); font-weight: 600; }
+.pos-sumy__r--due { color: var(--pos-primary); font-weight: 700; font-size: 14px; }
+
+/* As linhas de detalhe dentro do cartão de cada pessoa — usadas na comanda
+   e no resumo do fechamento, porque são a MESMA coisa. */
+/* No FECHAMENTO os cartões se encostam: doze contas com respiro entre cada
+   uma empurram o total para fora da tela, e a régua de 1px já separa. */
+/* ── Participantes finalizados ──────────────────────────────────────────
+   Quem pagou sai da lista ativa e reaparece aqui. O cartão é mais quieto que
+   o de cima de propósito: é histórico, não trabalho — o garçom passa o olho
+   para conferir quem já foi, não para agir. */
+.pos-done { margin: var(--pos-4x) var(--pos-3x) var(--pos-3x); }
+.pos-done__head { padding-top: var(--pos-3x); border-top: 1px solid var(--pos-line); }
+.pos-done__t {
+  margin: 0; font-size: 11px; font-weight: 800; text-transform: uppercase;
+  letter-spacing: 0.06em; color: var(--pos-fg-2);
+}
+.pos-done__h { margin: 4px 0 0; font-size: 11.5px; color: var(--pos-fg-3); }
+.pos-done__c {
+  margin-top: var(--pos-2x); padding: var(--pos-3x);
+  border: 1px solid var(--pos-line); border-radius: var(--pos-r);
+  background: var(--pos-veil-2);
+}
+.pos-done__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--pos-3x); }
+.pos-done__n { display: block; font-size: 13.5px; font-weight: 700; color: var(--pos-fg); }
+.pos-done__ok { display: block; margin-top: 1px; font-size: 11px; font-weight: 600; color: var(--pos-primary); }
+.pos-done__vals { text-align: right; flex: none; }
+.pos-done__paid { display: block; font-size: 13.5px; font-weight: 700; color: var(--pos-fg); }
+.pos-done__tot { display: block; margin-top: 1px; font-size: 11px; color: var(--pos-fg-3); }
+/* Os quatro miúdos numa linha que quebra: numa coluna estreita eles viram
+   duas, e nunca uma palavra cortada no meio. */
+.pos-done__parts {
+  display: flex; flex-wrap: wrap; gap: 2px var(--pos-3x);
+  margin-top: var(--pos-2x); font-size: 11px; color: var(--pos-fg-3);
+}
+
+.pos-gsecs { display: grid; gap: 0; padding: 0; align-content: start; }
+.pos-gsecs > .pos-gsec + .pos-gsec { border-top: 1px solid var(--pos-line); }
+.pos-gsec__lines { display: grid; gap: 3px; padding: var(--pos-2x) var(--pos-3x) var(--pos-3x); }
+.pos-gsec__r {
+  display: flex; align-items: baseline; justify-content: space-between; gap: var(--pos-3x);
+  font-size: 13px; color: var(--pos-fg);
+}
+.pos-gsec__r > span:first-child { min-width: 0; overflow-wrap: anywhere; }
+/* O que a pessoa NÃO pediu se lê diferente, sem precisar do rótulo. */
+.pos-gsec__r--shared { font-style: italic; color: var(--pos-fg-2); }
+.pos-gsec__lbl {
+  display: inline-flex; align-items: center; gap: 5px; margin-top: 4px;
+  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
+  color: var(--pos-fg-3);
+}
+.pos-gsec__st {
+  margin-left: 6px; padding: 2px 7px; border-radius: var(--pos-r-pill);
+  font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
+}
+.pos-gsec__st[data-st='settled'] { background: color-mix(in srgb, var(--pos-ok) 14%, transparent); color: var(--pos-ok); }
+.pos-gsec__st[data-st='partial'] { background: color-mix(in srgb, var(--pos-warn) 16%, transparent); color: var(--pos-warn); }
+.pos-gsec__st[data-st='open']    { background: color-mix(in srgb, var(--pos-info) 14%, transparent); color: var(--pos-info); }
+
+
+/* ── «Organizar automaticamente» ──────────────────────────────────────── */
+.pos-arr__e1, .pos-arr__e2 { display: grid; gap: var(--pos-4x); }
+
+.pos-arr__ambs { display: grid; gap: var(--pos-2x); margin: 0; padding: 0; list-style: none; }
+.pos-arr__amb {
+  display: flex; align-items: center; gap: var(--pos-3x); width: 100%;
+  padding: var(--pos-3x); border: 1px solid var(--pos-line); border-radius: var(--pos-radius);
+  background: var(--pos-1); font-size: 13.5px; color: var(--pos-fg); cursor: pointer;
+  transition: all var(--pos-fast); text-align: left;
+}
+.pos-arr__amb:hover { border-color: var(--pos-line-strong); }
+.pos-arr__amb[aria-pressed='true'] {
+  border-color: var(--pos-primary);
+  background: color-mix(in srgb, var(--pos-primary) 8%, transparent);
+}
+.pos-arr__an { flex: 1; min-width: 0; font-weight: 600; }
+.pos-arr__ac { color: var(--pos-fg-3); font-size: 12px; }
+/* A marca é um quadrado que EXISTE mesmo vazio: sem ele a linha marcada e a
+   não marcada têm larguras diferentes, e a lista dança a cada toque. */
+.pos-arr__check {
+  display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none;
+  border: 1.5px solid var(--pos-line-strong); border-radius: 4px;
+  font-size: 12px; font-weight: 800; color: var(--pos-primary-fg);
+}
+[aria-pressed='true'] > .pos-arr__check { background: var(--pos-primary); border-color: var(--pos-primary); }
+
+.pos-arr__opt { display: flex; align-items: flex-start; gap: var(--pos-2x); font-size: 12.5px; cursor: pointer; }
+.pos-arr__opt input { margin-top: 2px; accent-color: var(--pos-primary); }
+.pos-arr__ox { color: var(--pos-fg-3); }
+
+.pos-arr__tabs { display: flex; flex-wrap: wrap; gap: var(--pos-2x); }
+.pos-arr__tab {
+  padding: 5px var(--pos-3x); border: 1px solid var(--pos-line); border-radius: var(--pos-r-pill);
+  background: var(--pos-1); font-size: 12.5px; font-weight: 600; color: var(--pos-fg-2); cursor: pointer;
+}
+.pos-arr__tab[aria-selected='true'] {
+  border-color: var(--pos-primary); background: var(--pos-primary); color: var(--pos-primary-fg);
+}
+
+.pos-arr__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pos-4x); min-height: 0; }
+.pos-arr__left, .pos-arr__right { display: grid; gap: var(--pos-2x); align-content: start; min-width: 0; }
+.pos-arr__faixa { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--pos-2x); align-items: end; }
+.pos-arr__lhead { display: flex; align-items: center; justify-content: space-between; gap: var(--pos-2x); }
+.pos-arr__chips {
+  display: flex; flex-wrap: wrap; gap: 4px; max-height: 200px; overflow-y: auto;
+  margin: 0; padding: 0; list-style: none;
+}
+.pos-arr__chip {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 3px 7px; border: 1px solid var(--pos-line); border-radius: var(--pos-r-pill);
+  background: var(--pos-2); font-size: 11.5px; color: var(--pos-fg-2); cursor: pointer;
+}
+.pos-arr__chip:hover { border-color: var(--pos-danger); color: var(--pos-danger); }
+
+.pos-arr__busca {
+  display: flex; align-items: center; gap: var(--pos-2x);
+  padding: 0 var(--pos-3x); border: 1px solid var(--pos-line); border-radius: var(--pos-radius);
+  color: var(--pos-fg-3);
+}
+.pos-arr__busca input {
+  flex: 1; min-width: 0; padding: 7px 0; border: 0; background: none;
+  font: inherit; font-size: 13px; color: var(--pos-fg); outline: none;
+}
+.pos-arr__todas {
+  display: grid; gap: 2px; max-height: 260px; overflow-y: auto;
+  margin: 0; padding: 0; list-style: none;
+}
+.pos-arr__row {
+  display: flex; align-items: center; gap: var(--pos-2x); width: 100%;
+  padding: 5px var(--pos-2x); border: 0; border-radius: var(--pos-radius);
+  background: none; font-size: 12.5px; color: var(--pos-fg); cursor: pointer; text-align: left;
+}
+.pos-arr__row:hover:not(:disabled) { background: var(--pos-2); }
+.pos-arr__row:disabled { opacity: 0.5; cursor: not-allowed; }
+.pos-arr__rn { flex: 1; min-width: 0; }
+.pos-arr__rw { color: var(--pos-fg-3); font-size: 11px; }
+
+/* A PRÉVIA: uma linha por ambiente, e a que vai crescer fica em âmbar. */
+.pos-arr__previa {
+  display: grid; gap: 4px; margin: 0; padding: var(--pos-3x); list-style: none;
+  border: 1px solid var(--pos-line); border-radius: var(--pos-radius);
+  background: var(--pos-2); font-size: 12px; color: var(--pos-fg-2);
+}
+.pos-arr__previa li { display: flex; align-items: center; gap: 6px; }
+.pos-arr__previa li[data-cresce] { color: var(--pos-warn); font-weight: 600; }
+
+
+/* ── «Editar contorno» do ambiente ────────────────────────────────────── */
+.pos-out__cols { display: grid; grid-template-columns: 280px 1fr; gap: var(--pos-4x); align-items: start; }
+.pos-out__form { display: grid; gap: var(--pos-3x); align-content: start; min-width: 0; }
+.pos-out__formas { display: grid; gap: var(--pos-2x); }
+.pos-out__forma {
+  padding: 7px var(--pos-3x); border: 1px solid var(--pos-line); border-radius: var(--pos-radius);
+  background: var(--pos-1); font-size: 12.5px; color: var(--pos-fg); cursor: pointer;
+  text-align: left; transition: all var(--pos-fast);
+}
+.pos-out__forma[aria-pressed='true'] {
+  border-color: var(--pos-primary);
+  background: color-mix(in srgb, var(--pos-primary) 8%, transparent);
+  font-weight: 600;
+}
+.pos-out__tools { display: flex; gap: var(--pos-2x); }
+.pos-out__tools .pos-btn { flex: 1; }
+.pos-out__count { margin: 0; font-size: 12px; color: var(--pos-fg-3); }
+
+/* O canvas rola nos DOIS sentidos: um salão de 29 m dá 1160px de desenho, e
+   cortá-lo esconderia justamente a parede que se está medindo. */
+.pos-out__canvas {
+  overflow: auto; max-height: 460px;
+  border: 1px solid var(--pos-line); border-radius: var(--pos-radius);
+  background: var(--pos-2);
+}
+.pos-out__canvas svg { display: block; }
+
+/* O caminho para o contorno não é destrutivo — não pode herdar o vermelho do
+   «Tirar da planta», que mora na mesma classe. */
+.pos-insp__outline:hover { color: var(--pos-fg); }
+
+
+/* ── O aviso de escopo do salão ───────────────────────────────────────── */
+.pos-scope {
+  display: flex; align-items: center; gap: var(--pos-2x); flex: 0 0 auto;
+  margin: 0 var(--pos-4x) var(--pos-3x);
+  padding: 6px var(--pos-3x); border-radius: var(--pos-radius);
+  border: 1px solid color-mix(in srgb, var(--pos-primary) 30%, transparent);
+  background: color-mix(in srgb, var(--pos-primary) 7%, transparent);
+  font-size: 11.5px; line-height: 1.45; color: var(--pos-fg-2);
+}
+.pos-scope svg { flex: none; color: var(--pos-primary); }
+.pos-scope__t { min-width: 0; }
+/* «Sem praça atribuída» é informação, não alerta: ninguém fez nada errado, e
+   o tracejado diz "provisório" sem pintar a faixa de aviso. */
+.pos-scope--none {
+  border-style: dashed; border-color: var(--pos-line-strong);
+  background: none; color: var(--pos-fg-3);
+}
+.pos-scope--none svg { color: var(--pos-fg-3); }
+.pos-scope__b {
+  margin-left: auto; flex: none; padding: 3px var(--pos-2x);
+  border: 0; border-radius: var(--pos-r-pill);
+  background: none; font-size: 11.5px; font-weight: 600;
+  color: var(--pos-primary); cursor: pointer;
+}
+.pos-scope__b:hover { background: color-mix(in srgb, var(--pos-primary) 12%, transparent); }
+
+
+/* «Configurar mesas», ao lado do segmentado de vista. Quadrado como o
+   segmentado é alto: dois controles na mesma coluna precisam da mesma
+   altura, senão a linha fica com um degrau. */
+.pos-seg__gear {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 34px; height: 34px; flex: none;
+  border: 1px solid var(--pos-line-strong); border-radius: var(--pos-radius);
+  background: var(--pos-1); color: var(--pos-fg-2); cursor: pointer;
+  transition: all var(--pos-fast);
+}
+.pos-seg__gear:hover { border-color: var(--pos-primary); color: var(--pos-fg); }
+
+/* Reabrir uma conta fechada. O botão mora FORA da linha (botão dentro de botão
+   não recebe clique) e fica discreto: reabrir é exceção, não rotina. */
+.pos-closed__wrap { position: relative; display: block; }
+.pos-closed__reopen {
+  position: absolute; right: 6px; top: 6px; z-index: 1;
+  display: grid; place-items: center; width: 24px; height: 24px;
+  border: none; border-radius: var(--pos-r-xs); background: transparent;
+  color: var(--pos-fg-3); cursor: pointer;
+}
+.pos-closed__reopen:hover { background: var(--pos-3); color: var(--pos-fg); }
+/* A razão de a cortesia não reabrir, sob a linha. */
+.pos-closed__why {
+  display: block; padding: 0 var(--pos-3x) 6px;
+  font-size: 11px; line-height: 1.35; color: var(--pos-fg-3);
+}
+
+/* A folha de CONFIRMAÇÃO é estreita: ela faz UMA pergunta, e uma folha larga
+   para uma pergunta curta parece que esconde mais coisa abaixo da dobra. */
+.pos-sheet__panel--sm { max-width: 420px; }
+
+/* «Cancelar todos os itens» — a caixa vermelha do topo do cancelamento.
+   Ela não é mais uma linha da lista: é a alternativa à lista inteira, e por
+   isso tem a cor do que vai sair da conta. Herda o desenho da caixa das linhas
+   selecionáveis, trocando só o azul pelo vermelho. */
+.pos-dsc__all {
+  display: flex; align-items: center; gap: var(--pos-3x);
+  padding: 11px var(--pos-3x);
+  border: 1px solid color-mix(in srgb, var(--pos-danger) 34%, transparent);
+  border-radius: var(--pos-r);
+  background: color-mix(in srgb, var(--pos-danger) 7%, var(--pos-2));
+  cursor: pointer; font-size: 14.5px; font-weight: 600; color: var(--pos-danger);
+  transition: background var(--pos-t) var(--pos-e);
+}
+.pos-dsc__all:hover { background: color-mix(in srgb, var(--pos-danger) 12%, var(--pos-2)); }
+.pos-dsc__all input[type='checkbox'] {
+  appearance: none; -webkit-appearance: none;
+  width: 18px; height: 18px; flex: none; margin: 0;
+  border: 1.5px solid color-mix(in srgb, var(--pos-danger) 55%, transparent);
+  border-radius: var(--pos-r-xs);
+  background: var(--pos-1); cursor: pointer; position: relative;
+}
+.pos-dsc__all input[type='checkbox']:checked {
+  border-color: var(--pos-danger); background: var(--pos-danger);
+}
+.pos-dsc__all input[type='checkbox']:checked::after {
+  content: ''; position: absolute; inset: 0;
+  background: var(--pos-1);
+  clip-path: polygon(14% 46%, 8% 54%, 38% 82%, 92% 26%, 85% 19%, 38% 68%);
+}
+
+/* O grupo por participante. A faixa é discreta de propósito: ela responde
+   «de quem», e quem decide continua sendo o seletor de quantidade. */
+.pos-dsc__grp {
+  border: 1px solid var(--pos-line); border-radius: var(--pos-r);
+  overflow: hidden; margin-bottom: var(--pos-2x);
+}
+.pos-dsc__grph {
+  display: flex; align-items: center; gap: var(--pos-2x);
+  padding: 7px var(--pos-3x);
+  background: var(--pos-3);
+  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
+  color: var(--pos-fg-2);
+}
+.pos-dsc__grph svg { color: var(--pos-primary); }
+.pos-dsc__grp .pos-dsc__lines {
+  padding: var(--pos-2x);
+  /* SEM rolagem própria. A lista solta tem teto de 208px e rola por dentro —
+     dentro de um grupo isso vira vinte e três áreas de rolagem empilhadas, cada
+     uma cortando a própria última linha ao meio. Quem rola é o corpo da folha,
+     uma vez. */
+  max-height: none; overflow: visible;
+}
+
+/* A linha de outro dono, na transferência de itens. Apagada, não escondida:
+   o operador precisa ver que o item existe e entender por que não pode entrar
+   nesta transferência — é a regra do «um participante por vez» dita antes do
+   clique, em vez de recusada depois dele. */
+.pos-dsc__line[data-off] { opacity: .42; }
+.pos-dsc__line[data-off]:hover { background: var(--pos-2); }
+
+/* A linha que explica a operação, no alto do corpo da folha. Texto de leitura,
+   não rótulo: tamanho de corpo e a cor secundária, para não competir com o
+   número que vem logo abaixo. */
+.pos-sheet__lead {
+  margin: 0 0 var(--pos-3x); font-size: 13.5px; line-height: 1.45;
+  color: var(--pos-fg-2);
+}
+
+/* «Não consegui ler os descontos já aplicados».
+   Âmbar, e no topo do corpo: é um aviso sobre o que a tela NÃO sabe, e quem
+   vai conceder dinheiro precisa lê-lo antes de digitar o valor — não depois. */
+.pos-dsc__blind {
+  display: flex; align-items: flex-start; gap: var(--pos-2x);
+  padding: 9px var(--pos-3x); margin-bottom: var(--pos-2x);
+  border: 1px solid color-mix(in srgb, var(--pos-warn) 34%, transparent);
+  border-radius: var(--pos-r);
+  background: color-mix(in srgb, var(--pos-warn) 8%, var(--pos-2));
+  color: var(--pos-fg);
+}
+.pos-dsc__blind svg { flex: none; margin-top: 1px; color: var(--pos-warn); }
+.pos-dsc__blind > span { display: grid; gap: 2px; }
+.pos-dsc__blind strong { font-size: 13.5px; font-weight: 650; }
+.pos-dsc__blind > span > span { font-size: 12.5px; color: var(--pos-fg-2); }
+
+/* --- fila de espera ------------------------------------------------------
+   Irmã da lista de reservas, e de propósito: reserva e fila são a MESMA
+   operação vista da porta — quem quer mesa, antes e durante o serviço. Duas
+   telas vizinhas com dois desenhos fazem o anfitrião reaprender a mesma coisa
+   ao trocar de aba.
+
+   A diferença é o que a borda esquerda diz: na reserva ela marca atraso; aqui
+   ela marca o CHAMADO, que é o estado que o anfitrião precisa achar de longe
+   com uma bandeja na mão.
+------------------------------------------------------------------------- */
+.pos-wl { flex: 1; padding: var(--pos-4x); display: grid; gap: var(--pos-3x); align-content: start; }
+.pos-wl__head {
+  display: flex; align-items: center; justify-content: space-between; gap: var(--pos-3x);
+  padding-bottom: var(--pos-2x); border-bottom: 1px solid var(--pos-line);
+}
+.pos-wl__count { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--pos-fg-2); }
+.pos-wl__new {
+  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+  min-height: 40px; padding: 0 var(--pos-4x);
+  border: 1px solid var(--pos-primary); border-radius: var(--pos-r-pill);
+  background: var(--pos-primary); color: var(--pos-primary-fg);
+  font-size: 14px; font-weight: 650; cursor: pointer;
+  transition: background var(--pos-t) var(--pos-e), transform var(--pos-t) var(--pos-e);
+}
+.pos-wl__new:hover { background: var(--pos-primary-hover); border-color: var(--pos-primary-hover); }
+.pos-wl__new:active { transform: scale(0.985); }
+
+.pos-wl__list { display: grid; gap: var(--pos-2x); }
+/* O título só aparece quando há DOIS grupos: com uma origem só, nomeá-la é
+   ruído — a tela inteira já é aquilo. */
+.pos-wl__group {
+  margin: var(--pos-3x) 0 0; font-size: 11.5px; font-weight: 700;
+  letter-spacing: 0.06em; text-transform: uppercase; color: var(--pos-fg-3);
+}
+.pos-wl__group:first-child { margin-top: 0; }
+
+/* A RESERVA se distingue pela borda, não por outra caixa: é a mesma linha da
+   fila com outra origem, e desenhá-la diferente faria o anfitrião ler duas
+   tabelas onde existe uma lista de entrada só. */
+.pos-wl__row[data-booked='true']::before { background: var(--pos-accent); }
+.pos-wl__row[data-booked='true'] .pos-wl__pos { font-size: 17px; color: var(--pos-fg); }
+/* Chegou: a linha acende como a do chamado — nas duas origens, a cor quer
+   dizer "esta gente está de pé aí fora agora". */
+.pos-wl__row[data-booked='true'][data-called='true'] { background: color-mix(in srgb, var(--pos-accent) 9%, var(--pos-2)); }
+.pos-wl__row[data-booked='true'][data-called='true']::before { background: var(--pos-ok); }
+.pos-wl__row[data-booked='true'] .pos-wl__state { color: var(--pos-ok); }
+.pos-wl__row {
+  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto;
+  align-items: center; gap: var(--pos-3x);
+  min-height: var(--pos-hit); padding: var(--pos-3x);
+  border: 1px solid var(--pos-line); border-radius: var(--pos-r);
+  background: var(--pos-2);
+  position: relative; overflow: hidden;
+}
+.pos-wl__row::before {
+  content: ''; position: absolute; inset: 0 auto 0 0; width: 4px;
+  background: var(--pos-line-strong);
+}
+.pos-wl__row[data-called='true']::before { background: var(--pos-primary); }
+/* O prazo estourado NÃO é um erro do sistema: é uma informação para o
+   anfitrião decidir. Por isso a cor pinta a borda e o estado, e não um alerta
+   sobre a linha. */
+.pos-wl__row[data-overdue='true']::before { background: var(--pos-danger); }
+.pos-wl__row[data-called='true'] { background: color-mix(in srgb, var(--pos-primary) 7%, var(--pos-2)); }
+.pos-wl__row[data-overdue='true'] { background: color-mix(in srgb, var(--pos-danger) 8%, var(--pos-2)); }
+
+/* A POSIÇÃO é a coisa maior do cartão: é a resposta da única pergunta que a
+   fila responde, e ela é lida de pé, a um metro de distância. */
+.pos-wl__pos {
+  display: inline-flex; align-items: center; justify-content: center;
+  font-size: 22px; font-weight: 750; letter-spacing: -0.03em;
+  color: var(--pos-fg-2); padding-left: 4px;
+}
+.pos-wl__row[data-called='true'] .pos-wl__pos { color: var(--pos-primary); }
+.pos-wl__row[data-overdue='true'] .pos-wl__pos { color: var(--pos-danger); }
+
+.pos-wl__who { min-width: 0; }
+.pos-wl__name { display: block; font-size: 15px; font-weight: 620; }
+.pos-wl__meta { display: flex; flex-wrap: wrap; gap: var(--pos-2x); margin-top: 3px; }
+.pos-wl__chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--pos-fg-2); }
+.pos-wl__state { display: block; margin-top: 4px; font-size: 12px; font-weight: 650; color: var(--pos-primary); }
+.pos-wl__row[data-overdue='true'] .pos-wl__state { color: var(--pos-danger); }
+.pos-wl__note { display: block; margin-top: 3px; font-size: 12px; color: var(--pos-fg-2); font-style: italic; }
+.pos-wl__warn { display: block; margin-top: 4px; font-size: 12px; color: var(--pos-warn); }
+.pos-wl__known {
+  display: inline-flex; align-items: center; gap: 5px; margin-top: 4px;
+  font-size: 12px; font-weight: 600; color: var(--pos-ok);
+}
+
+.pos-wl__do {
+  /* TRÊS POSIÇÕES FIXAS, e é por isso que elas não se mexem.
+     A reserva tem duas ações e o grupo da fila tem três; com largura `auto`
+     cada linha media pelo próprio conteúdo e «Acomodar» — a ação que a mão
+     procura — caía em coluna diferente a cada linha. Numa lista que se lê de
+     pé, o alvo tem de estar sempre no mesmo lugar.
+     A célula vazia é declarada no JSX com um `<span aria-hidden />`: é o que
+     segura a coluna quando a ação não existe naquela linha. */
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
+  align-items: center; gap: var(--pos-2x);
+  width: min(408px, 52vw);
+}
+.pos-wl__b {
+  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
+  min-height: 52px; padding: 0 var(--pos-4x);
+  border: 1px solid var(--pos-line-strong); border-radius: var(--pos-r-pill);
+  background: transparent; color: var(--pos-fg-2);
+  font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
+  transition: background var(--pos-t) var(--pos-e), color var(--pos-t) var(--pos-e), transform var(--pos-t) var(--pos-e);
+}
+.pos-wl__b:hover:not(:disabled) { background: var(--pos-3); color: var(--pos-fg); }
+.pos-wl__b:active:not(:disabled) { transform: scale(0.985); }
+.pos-wl__b:disabled { opacity: 0.45; cursor: default; }
+.pos-wl__b--primary {
+  background: var(--pos-primary); border-color: var(--pos-primary); color: var(--pos-primary-fg); font-weight: 650;
+}
+.pos-wl__b--primary:hover:not(:disabled) { background: var(--pos-primary-hover); border-color: var(--pos-primary-hover); color: var(--pos-primary-fg); }
+/* «Não veio» fecha a linha para sempre. Ele não compete de cor com as duas
+   ações que fazem a fila andar. */
+.pos-wl__b--quiet { border-color: transparent; color: var(--pos-fg-3); }
+
+.pos-wl__notes {
+  width: 100%; resize: vertical; min-height: 56px; padding: 10px 12px;
+  border: 1px solid var(--pos-line-strong); border-radius: var(--pos-r);
+  background: var(--pos-1); color: var(--pos-fg);
+  font: inherit; font-size: 14px;
+}
+.pos-wl__notes::placeholder { color: var(--pos-fg-3); }
+.pos-wl__notes:focus-visible { outline: none; border-color: var(--pos-accent); }
+
+@media (max-width: 1180px) {
+  /* Os botões caem para baixo antes de qualquer coisa ser truncada: um nome
+     que o anfitrião não lê é pior do que uma linha de duas alturas. */
+  .pos-wl__row { grid-template-columns: 56px minmax(0, 1fr); }
+  .pos-wl__do { grid-column: 1 / -1; justify-content: flex-end; min-width: 0; flex-wrap: wrap; }
+}
+/* O cadastro de complementos quebrado — e por que ele é um aviso e não um
+   campo apagado: quem lê precisa saber a quem recorrer, não adivinhar. */
+.pos-mgroup__bad {
+  margin: 0; padding: var(--pos-3x);
+  border: 1px solid color-mix(in srgb, var(--pos-warn) 40%, transparent);
+  border-radius: var(--pos-r);
+  background: color-mix(in srgb, var(--pos-warn) 10%, transparent);
+  color: var(--pos-fg); font-size: 14px; line-height: 1.4;
+}
+
+/* A FAIXA DO MAPA VELHO — ver `floorStale.ts`.
+   Fica no alto do palco e NÃO some sozinha: ela descreve um estado, não um
+   evento. `--pos-warn` já tem tom claro e escuro. */
+.pos-stale {
+  display: flex; align-items: center; gap: var(--pos-2x);
+  padding: 8px var(--pos-3x); font-size: 13px; line-height: 1.35;
+  color: var(--pos-warn);
+  background: color-mix(in srgb, var(--pos-warn) 12%, transparent);
+  border-bottom: 1px solid color-mix(in srgb, var(--pos-warn) 30%, transparent);
+}
+.pos-stale > span { min-width: 0; }
+.pos-stale__b {
+  margin-left: auto; flex: none; cursor: pointer;
+  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
+  color: var(--pos-warn); background: transparent;
+  border: 1px solid color-mix(in srgb, var(--pos-warn) 45%, transparent);
+}
+.pos-stale__b:hover { background: color-mix(in srgb, var(--pos-warn) 18%, transparent); }
+
+/* A LEGENDA DA ESTEIRA — a regra dos 3 minutos, dita na própria tela.
+   Miúda e apagada como no V1: ela explica, não compete com as colunas. */
+.pos-board__note {
+  margin: 0 var(--pos-3x) var(--pos-2x);
+  font-size: 12px; line-height: 1.4; color: var(--pos-fg-3);
+}
+
+/* EDITAR O COUVERT — uma linha por participante, nome à esquerda e a
+   quantidade à direita, como no diálogo do V1. */
+.pos-cvr { display: flex; flex-direction: column; gap: var(--pos-2x); }
+.pos-cvr__row { display: flex; align-items: center; gap: var(--pos-3x); }
+.pos-cvr__who { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pos-cvr__n {
+  flex: none; width: 72px; height: 34px; text-align: center; font-size: 15px;
+  border-radius: var(--pos-r-2, 8px); border: 1px solid var(--pos-edge);
+  background: var(--pos-1); color: var(--pos-fg);
+}
+/* O total fica à ESQUERDA do rodapé e empurra os botões: ele é o número que a
+   pessoa confere antes de salvar, não um detalhe ao lado do botão. */
+.pos-cvr__tot { margin-right: auto; display: inline-flex; align-items: baseline; gap: var(--pos-2x); }
+
+/* O LÁPIS do couvert, na linha dos totais. Discreto: ele não compete com o
+   valor, que é o que a pessoa lê. Aparece só quando há participante. */
+.pos-tot__edit {
+  flex: none; cursor: pointer; margin-left: var(--pos-2x);
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 20px; height: 20px; border-radius: 999px;
+  border: 0; background: transparent; color: var(--pos-fg-3);
+}
+.pos-tot__edit:hover { background: var(--pos-2); color: var(--pos-fg); }
+
+/* O motivo de a linha não aceitar desconto, ao lado do nome. Discreto: é
+   explicação, não alerta — a linha não está errada, só já foi abatida. */
+/* `--pos-fg-3`, e não um `--pos-muted` inventado: esse token NÃO EXISTE neste
+   arquivo, e a regra teria caído na cor herdada em silêncio. */
+.pos .pos-dsc__why {
+  font-size: 11.5px;
+  font-weight: 520;
+  color: var(--pos-fg-3);
+  white-space: nowrap;
+}
+.pos .pos-dsc__line[data-locked] { opacity: .62; }
+.pos .pos-dsc__line[data-locked] input { cursor: not-allowed; }