/* RESTAURANT OS — instrumento de bancada.
 *
 * A tese do sistema é uma frase: ele mostra o que mediu e admite o que não
 * mediu. Este arquivo é essa frase virando aparência.
 *
 * Por isso a tela não é um painel de cartões flutuando: é uma **placa** de
 * instrumento. Superfície fosca, filete gravado no lugar de sombra, rótulo
 * pequeno em caixa alta, e o número grande em fonte de dado — a mesma
 * largura para todo dígito, porque coluna de valor que dança é coluna que se
 * lê errado.
 *
 * ## Uma cor, um significado
 *
 * - **âmbar** é DINHEIRO. Preço, total, troco, margem. Nada mais.
 * - **ardósia** é MEDIDA que não é dinheiro: contagem, hora, quantidade.
 *   Antes tudo o que não era dinheiro era branco, e branco é o texto — então
 *   "38 chopps" tinha a mesma voz que uma frase.
 * - **verde** é a ação que conclui: receber, enviar, confirmar.
 * - **vermelho** é perda e cancelamento.
 * - **hachura** é o que ninguém mediu. Não é cor, é ausência com textura —
 *   e é a assinatura do produto. Um travessão some entre números; hachura
 *   não passa despercebida, que é o ponto.
 *
 * ## O trilho
 *
 * Sob o número principal corre um trilho de marcas: uma por hora do dia, por
 * dia do mês, por item do cardápio — conforme a placa. Ele não decora: ele
 * mostra de **onde** o número veio, e onde não veio nada.
 */

/* Geist, servida pela casa (OFL, em /v2/fontes). Fonte de sistema mudava a
   cara do produto de aparelho para aparelho — o mesmo «R$ 59,80» tinha
   larguras diferentes no PC do caixa e no celular do garçom. `swap`: até a
   fonte chegar, o texto aparece na de sistema em vez de sumir. */
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/v2/fontes/Geist-Variable.woff2?v=83a2ff94d3") format("woff2");
}

:root {
  /* Papel, não vidro. O dono do restaurante abre isto no celular, no meio do
     salão, com luz de teto forte — e depois no notebook, de manhã. Fundo
     claro é o que se enxerga nas duas situações sem ninguém tocar em brilho.

     Três superfícies e um filete quase invisível. A pesquisa de painel B2B
     converge para isso: superfície quase monocromática, UM acento, e borda de
     baixo contraste. Tabela se lê por separação de linha e estado de foco,
     não por moldura forte. */
  --chao: #f5f5f5;
  --placa: #ffffff;
  /* ── Camadas ─────────────────────────────────────────────────────────
     Número solto de z-index é como cada tela descobriu a barra sozinha: o
     diálogo de pagamento do balcão nasceu em 10, o do garçom em 20, o de
     fechar conta do PDV em 20 — todos ABAIXO da barra, que está em 40. Com
     o diálogo de «Receber R$ 47,00» aberto, o toque no alto da tela ainda
     pegava um link da barra e levava o operador embora no meio do
     pagamento, com a venda em pé. Diálogo de tela cobre a barra E o menu
     dela: quem está recebendo dinheiro não navega por acidente. */
  --camada-barra: 40;
  --camada-veu-menu: 44;
  --camada-menu: 45;
  --camada-modal: 60;
  --placa-alta: #fafafa;
  --campo: #f5f5f5;
  --filete: #e5e5e5;
  --filete-forte: #d4d4d4;

  --tinta: #0a0a0a;
  --tinta-fraca: #6b6b6b;
  --tinta-apagada: #6b6b6b;

  /* Dinheiro. Só dinheiro. Âmbar escurecido: o âmbar de tela escura não tem
     contraste sobre papel, e número de dinheiro ilegível é o pior lugar
     possível para economizar contraste. */
  --dinheiro: #0a0a0a;
  --dinheiro-fundo: #f5f5f5;
  /* Medida que NÃO é dinheiro: contagem, hora, quantidade. */
  --medida: #0a0a0a;
  --acao: #171717;
  --acao-alta: #0a0a0a;
  /* Texto sobre cor cheia. Ele existe como token porque, quando a paleta
     virou clara, `--texto` passou a ser quase preto — e as telas que
     escreviam `color: var(--texto)` em cima do verde de ação ficaram com
     3,2:1, abaixo do mínimo legível. Cor de fundo forte pede tinta clara, e
     isso não é escolha de tela: é do sistema. */
  --tinta-sobre-cor: #fafafa;
  --perda: #dc000a;
  --atencao: #525252;

  --hachura: repeating-linear-gradient(-45deg,
      #d4d4d4 0 1.5px, transparent 1.5px 7px);

  --fonte-ui: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI",
              system-ui, "Helvetica Neue", sans-serif;
  /* O número usa a MESMA família do texto, com algarismos tabulares — todo
     dígito da mesma largura, que é o que a fonte monoespaçada garantia, sem
     a cara de terminal. Monoespaçada fazia «R$ 59,80» no visor parecer
     saída de programa, e o «outubro de 2026» do eco embaixo do campo
     parecer código. A coluna continua sem dançar: quem alinha é o
     `tabular-nums` do `body`. */
  --fonte-dado: var(--fonte-ui);

  /* Escala: cada degrau tem função. Micro rotula, base lê, título separa,
     visor mede. Sem degrau intermediário "por garantia" — é assim que
     hierarquia vira mingau. */
  --t-micro: 12px;
  --t-base: 14px;
  --t-corpo: 14px;
  --t-titulo: 18px;

  /* ── Degraus da reforma ────────────────────────────────────────────
     A escala de cima nasceu de uma placa de instrumento: rótulo pequeno em
     caixa alta e número grande. Ela continua valendo para a placa, e os
     degraus abaixo são para o resto — página, seção, cartão, legenda.

     O que muda de verdade não é o tamanho: é que RÓTULO DE SEÇÃO DEIXA DE
     SER CAIXA ALTA DE 11 px. Caixa alta é ruim de ler em bloco e, quando
     ela rotula tudo, o olho perde o único lugar onde ela ainda significa
     alguma coisa — o olho da placa. */
  --t-pagina: 24px;
  --t-secao: 18px;
  --t-cartao: 16px;
  --t-legenda: 13px;
  --t-meta: 12px;
  /* O visor encolhe com a placa: "R$ 12.400,00" em 30 px estoura uma placa
     de 200 px, e número cortado é pior que número pequeno. */
  --t-visor: clamp(20px, 1.6vw, 24px);
  --t-visor-grande: clamp(38px, 4.6vw, 56px);

  /* Escala de 4, sem degrau torto. Era 4/8/14/22/36/56 — uma progressão
     quase geométrica em que nenhum valor era múltiplo confiável do outro,
     e por isso duas telas que "usam o mesmo respiro" terminavam com 14 de
     um lado e 16 do outro assim que alguém somava um padding. */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 32px;
  --esp-7: 48px;

  /* ── Curvatura concêntrica ─────────────────────────────────────────
     O raio de um filho tem que ser MENOR que o do pai pela espessura do
     respiro entre eles, senão o canto interno "aperta" e a peça parece
     desencaixada. Era um raio só de 8 px para tudo: campo dentro de placa
     dentro de diálogo, os três com o mesmo canto, e o encaixe se perdia. */
  --raio-janela: 24px;
  --raio-painel: 24px;
  --raio-secao: 24px;
  --raio-campo: 18px;
  --raio-capsula: 999px;
  --raio: var(--raio-campo);
  --raio-pequeno: 10px;
  /* A placa de gestão tem canto de folha, não de cartão de aplicativo. Com
     20 px de raio e sombra, cada placa parecia um bloco solto de outro
     site; com 10 px e só o filete, ela volta a ser a folha da bancada. */
  --raio-placa: 24px;
  /* Gráficos: oito tons para fatias e séries que NÃO são uma das cores com
     significado (âmbar = dinheiro, verde = conclui, vermelho = perda). Uma
     rosca de canais não pode pintar o salão de vermelho e fazer o salão
     parecer prejuízo. Ordem pensada para vizinhos contrastarem. */
  --grafico-1: #0a0a0a; --grafico-2: #737373; --grafico-3: #a1a1a1;
  --grafico-4: #d4d4d4; --grafico-5: #404040; --grafico-6: #8a8a8a;
  --grafico-7: #262626; --grafico-8: #bdbdbd;

  /* DOIS alvos, e a diferença é a mão de quem usa.
     `--alvo` é o caminho quente: o botão que o garçom aperta cem vezes numa
     sexta cheia, em pé, com o aparelho numa mão só. O polegar médio ocupa 45
     a 57 px — 46 px é acertado por sorte, e errar lançamento é o defeito que
     volta como conta errada na mesa.
     `--alvo-leitura` é para quem está sentado, com mouse ou o aparelho
     apoiado: cockpit, dia, engenharia. */
  --alvo: 64px;
  --alvo-leitura: 44px;

  /* O alvo também existe no TEMPO, e essa metade é mais fácil de esquecer.
     Um controle que MUDA DE LUGAR entre o momento em que a pessoa mira e o
     momento em que ela toca é um alvo de 0 px, por mais largo que seja.
     Vale para o eco que aparece embaixo do campo, para a linha que cresce
     quando chega dado, para o aviso que empurra a tela.

     A regra que sai disso, e ela já decidiu duas vezes aqui:
     CAMPO QUE PULA EMBAIXO DO DEDO É PIOR QUE CAMPO DESALINHADO — o
     primeiro erra o toque, o segundo só é feio. Quando os dois estiverem
     em jogo, reserve o espaço ou tire o elemento do fluxo; nunca conserte
     escondendo o que vai reaparecer. */
  --rapido: 120ms cubic-bezier(.2, .8, .3, 1);
  /* Três durações e nenhuma acima de 220 ms. Animação que explica uma
     mudança tem que caber no tempo em que a pessoa ainda está olhando para
     onde a mudança aconteceu; passou disso, ela já foi para outro lugar da
     tela e a animação vira enfeite atrasado. */
  --normal: 180ms cubic-bezier(.2, .8, .3, 1);
  --lento: 220ms cubic-bezier(.2, .8, .3, 1);

  /* Elevação de papel: sombra curta e clara, só onde alguma coisa flutua de
     verdade (menu, diálogo). Placa não flutua — ela é a folha. */
  --sombra-flutua: 0 0 0 1px rgba(23, 23, 23, .06), 0 12px 32px -8px rgba(0, 0, 0, .18);
  /* A placa da v2: anel de 1 px + sombra curta. Antes a placa era folha
     plana com filete; a v2 trata cada bloco como cartão — o fundo cinza da
     página precisa de um degrau para o branco não se fundir nele. */
  --sombra-placa: 0 0 0 1px rgba(23, 23, 23, .05), 0 1px 3px 0 rgba(0, 0, 0, .1),
                  0 1px 2px -1px rgba(0, 0, 0, .1);

  /* ── Ação que ABRE não é ação que CONCLUI ──────────────────────────
     O verde é da ação que conclui: receber, enviar, confirmar. Só que ele
     virou a cor de todo botão do sistema — procurar, atualizar, cadastrar,
     abrir a loja — e cor que serve para tudo deixa de avisar qualquer
     coisa. Quando «Procurar» e «Receber R$ 240,00» têm o mesmo verde, o
     verde não é sinal, é o fundo do botão.

     A saída NÃO é uma segunda cor de ação. Foi a primeira tentativa aqui —
     azul para abrir/procurar/atualizar — e ela morre no inventário: o azul
     desta casa já é `--medida` (contagem, hora, quantidade) **e** é o anel
     de foco. Terceiro significado na mesma cor é pior que o verde
     sobrecarregado, porque um dos três não é conteúdo: é o mapa de onde o
     teclado está.

     Então a hierarquia é de PESO, não de matiz — que é como a própria
     recomendação de botão se descreve: proeminente, padrão, quieto,
     destrutivo. O proeminente é preenchimento de grafite: contraste alto,
     nenhuma cor gasta, e o verde volta a significar uma coisa só. */
  --acao-abrir: #171717;
  --acao-abrir-alta: #0a0a0a;

  /* ── Vidro: material da CAMADA QUE FLUTUA ──────────────────────────
     Barra, menu, sheet, popover, ação flutuante. Nada mais.

     Vidro no conteúdo é o erro clássico de quem gosta do efeito: cada
     cartão fica translúcido, o texto passa a depender do que está atrás
     dele, e uma tabela de dinheiro vira um teste de leitura. A camada de
     baixo — produto, pedido, valor, ficha — é SÓLIDA, sempre.

     Três coisas fazem o vidro parecer vidro e não plástico fosco: o
     desfoque, a saturação (o que está atrás precisa continuar colorido) e
     uma borda clara de um pixel, que é o brilho da quina. Sem a borda, o
     painel some no fundo claro. */
  --vidro-claro: rgba(255, 255, 255, .68);
  --vidro-claro-forte: rgba(255, 255, 255, .82);
  --vidro-escuro: rgba(22, 25, 30, .68);
  --vidro-borda: rgba(255, 255, 255, .55);
  --vidro-borda-escuro: rgba(255, 255, 255, .12);
  --vidro-desfoque: 22px;
  --vidro-saturacao: 155%;
  --vidro-sombra: 0 8px 28px rgba(24, 26, 30, .10),
                  0 1px 2px rgba(24, 26, 30, .06);
  /* O opaco que entra no lugar do vidro quando o navegador não desfoca, ou
     quando a pessoa pediu menos transparência. Não é "o vidro sem o
     desfoque": vidro sem desfoque é uma camada suja por onde o texto de
     baixo aparece. É superfície cheia. */
  --vidro-sem: var(--placa);

  /* ── Nomes antigos, mantidos: as telas que ainda não passaram pela
     reforma continuam usando estes. Trocar tudo de uma vez seria reescrever
     a casa inteira num dia para ganhar consistência de nome. ── */
  --fundo: var(--chao);
  --painel: var(--placa);
  --alto: var(--placa-alta);
  --painel-alto: var(--placa-alta);
  --cartao: var(--placa);
  --linha: var(--filete);
  --linha-forte: var(--filete-forte);
  --texto: var(--tinta);
  --fraco: var(--tinta-fraca);
  --apagado: var(--tinta-apagada);
  --sobre-acao: var(--tinta-sobre-cor);
  --chopp: var(--dinheiro);
  --forte: var(--dinheiro);
  --acao-forte: var(--acao-alta);
  --ok: var(--acao);
  --novo: var(--acao);
  --perigo: var(--perda);
  --tarde: var(--perda);
  --sombra: none;
}

/* ── Parede ────────────────────────────────────────────────────────────
 *
 * O painel de senhas não é interface de trabalho: é display de parede, lido
 * a cinco metros por quem está sentado na praça de alimentação, de relance,
 * enquanto conversa. Ninguém toca nele.
 *
 * Por isso ele inverte a superfície — TV branca à noite numa praça é
 * holofote, e o número precisa saltar do fundo, não o contrário. O que ele
 * NÃO faz é ter paleta própria: os tokens são os mesmos, com outros valores,
 * declarados aqui e não na tela. Paleta na tela é o defeito que fez a `/dia`
 * ficar clara enquanto o sistema era escuro.
 *
 * A variação é por CONTEXTO DE USO — parede, salão, escritório —, nunca por
 * tela. Duas telas no mesmo contexto usam a mesma variação.
 */
.parede {
  --parede-chao: #07090c;
  --parede-placa: #10141a;
  --parede-filete: #1b1f27;
  --parede-tinta: #ffffff;
  --parede-tinta-fraca: #98a1af;
  /* Verde, e não o âmbar do dinheiro: aqui a mensagem é "está pronto, pode
     vir buscar" — que é conclusão, não preço. Gastar o âmbar num painel de
     senha era gastar a cor mais cara do sistema onde não há dinheiro. */
  --parede-chamada: #4ee0a1;
  --parede-chamada-fundo: #35c98a;
}

/* O sistema esconde o `<h1>` do cabeçalho e pinta o cabeçalho de placa —
   porque na tela de trabalho quem diz onde você está é a barra, e repetir o
   nome logo abaixo gastava 100 px para dizer duas vezes a mesma coisa.
   
   Na parede não existe barra: o `<h1>` é o único letreiro, e o cabeçalho
   branco vira uma faixa de luz no alto de uma TV escura. Herdar o sistema
   sem desfazer o que é chrome de aplicativo foi o que apagou o "PEDIDOS
   PRONTOS" da tela. */
.parede > header {
  background: transparent;
  border-bottom: 1px solid var(--parede-filete);
}
.parede > header > h1 { display: block; }

* { box-sizing: border-box; }

/* `hidden` precisa ganhar de qualquer classe que declare `display`.

   O atributo vale `display: none` na folha do NAVEGADOR, que perde para
   qualquer seletor de classe da nossa. Uma `.linha` com `display: flex` e
   `hidden` continuava na tela: a engenharia escondia o formulário de
   simular numa casa sem venda e ele ficava lá, com o seletor vazio e o
   botão aceso, embaixo da frase dizendo que não dava para simular.

   `!important` aqui não é atalho: é a única forma de um atributo vencer
   uma classe, e esconder é a intenção mais forte que a marcação sabe
   declarar. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--chao);
  color: var(--tinta);
  font: 400 var(--t-corpo)/1.5 var(--fonte-ui);
  /* Algarismos tabulares na casa inteira: coluna de valor que dança é
     coluna que se lê errado. */
  font-variant-numeric: tabular-nums;
  /* Os alternativos da Geist que a v2 liga: «a» de um andar e «l» com
     cauda, que não se confunde com «1» numa coluna de quantidade. */
  font-feature-settings: "ss01" on, "cv11" on;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Todo número do sistema é tabular. */
.n, .num, .valor, .total, .preco, td.n, td.v, .visor, .numero,
/* `.linhaz` não existe e nunca existiu — era `.linha .n`, escrito com um
   z. A regra ficou na folha sem alvo nenhum, e o inventário e o DRE
   passaram a declarar `font-variant-numeric` à mão sem saber que a folha
   já tentava dar isso. Uma classe que ninguém escreve não é regra: é
   linha morta que faz parecer que o assunto está resolvido. */
input[type="number"], .dinheiro {
  font-variant-numeric: tabular-nums;
}

:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 2px;
  border-radius: var(--raio-pequeno);
}

* { scrollbar-width: thin; scrollbar-color: var(--filete-forte) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--filete-forte); border-radius: 99px;
  border: 3px solid transparent; background-clip: content-box;
}

/* ── Estrutura da página ───────────────────────────────────────────── */

/* O respiro entre blocos é do CONTÊINER, não do vizinho.
   Com `.placa + .placa` a margem só existia entre irmãos diretos: duas
   placas em `<section>` diferentes ficavam **encostadas**, borda com borda,
   e a tela parecia montada errada. Coluna com `gap` espaça tudo o que a
   página empilhar — placa, seção, aviso — sem depender de quem é vizinho
   de quem. */
.folha {
  max-width: 1220px; margin: 0 auto;
  padding: var(--esp-5) var(--esp-4) var(--esp-6);
  display: flex; flex-direction: column; gap: var(--esp-4);
}
.folha > * { min-width: 0; }
/* Elemento vazio some. Toda tela publica um `<p role="status">` que só tem
   texto quando dá erro — e, numa coluna com `gap`, ele cobrava 22 px de
   respiro em cima e embaixo de nada. Era um buraco no meio da tela que
   ninguém sabia de onde vinha. */
.folha > :empty { display: none; }
/* Respiro entre o que a folha empilha — inclusive dentro do
   `<div id="conteudo">` que várias telas usam para trocar o miolo inteiro.
   Sem isto, uma placa seguida de uma grade ficava colada: a margem entre
   irmãos só olha placa contra placa, e a grade não é placa.

   Por MARGEM e não por `display: flex`: forçar coluna num `<div>` que a tela
   não escreveu para ser coluna vira desastre silencioso — o cabeçalho da
   tela do dia, que é uma fila com o título à esquerda e a data à direita,
   virou uma pilha alinhada à direita. Margem não muda o eixo de ninguém. */
.folha > section > * + *,
.folha > div:not(.linha):not(.grade):not(.faixa):not(.topo):not(.abas) > * + * {
  margin-top: var(--esp-3);
}


/* Botão solto na placa ganha respiro por cima e espaço entre vizinhos. Dois
   botões encostados leem como um controle segmentado — e aí o operador
   acha que está escolhendo entre duas coisas, não disparando duas ações
   diferentes. */
.placa > button { margin-top: var(--esp-3); }
.placa > button + button, .linha > button + button { margin-left: var(--esp-2); }

/* A faixa de ação fecha o formulário: filete em cima, ações à direita. Sem
   ela, o botão de gravar fica no meio do campo seguinte e o olho não sabe
   onde o formulário termina. Em tela estreita ele ocupa a largura toda, que
   é o alvo mais fácil de acertar com o polegar. */
.placa > .acoes, .placa > form > .acoes {
  display: flex; gap: var(--esp-2); flex-wrap: wrap;
  justify-content: flex-end; align-items: center;
  margin-top: var(--esp-4); padding-top: var(--esp-3);
  border-top: 1px solid var(--filete);
}
.placa .acoes > .fraco, .placa .acoes > p { margin-right: auto; }
/* Formulário de uma linha só (campos e botão lado a lado): o botão não leva
   o filete nem o respiro de rodapé, senão fica mais baixo que os campos e
   com um risco em cima que separa o que é uma coisa só. */
.placa > form.linha > * { margin-top: 0; }
.placa > form.linha > .acoes { border-top: 0; padding-top: 0; margin-top: 0; }
@media (max-width: 600px) {
  .placa .acoes { flex-direction: column-reverse; align-items: stretch; }
  .placa .acoes button { width: 100%; }
}

/* O título da placa se separa do conteúdo com um filete: sem ele, o
   formulário começa colado no cabeçalho e a placa vira um bloco só. */
/* O título da placa não leva filete embaixo: título, filete e a primeira
   linha da tabela com o filete dela eram três riscos em 40 px, e a placa
   inteira lia como formulário de repartição. */
.placa > h2 {
  padding-bottom: 0;
  border-bottom: 0;
  /* Sem margem embaixo: quem afasta o conteúdo do título é o ritmo da placa.
     Com as duas, o respiro dependia de o vizinho ser bloco — margem de
     blocos vizinhos se funde, margem contra caixa em linha não. O selo de
     competência, que é `inline-flex`, ficava com o dobro do respiro que a
     tabela da placa ao lado. */
  margin-bottom: 0;
}

/* ── «Entenda»: o resto da explicação, quando for pedido ───────────────
 *
 * Toda tela desta casa abre explicando o que ela é, e a explicação é boa —
 * ela é metade do produto. O problema não é o texto: é ele ser PERMANENTE.
 * Quem abre a tela pela quinquagésima vez lê de novo um parágrafo de quatro
 * linhas antes de chegar ao primeiro controle, e passa a pular tudo o que
 * está ali em cima — inclusive o aviso que não é explicação.
 *
 * A primeira frase fica: ela responde «o que é esta tela». O resto — o
 * porquê, o caso que originou a regra, a armadilha — entra aqui, a um
 * toque, e some depois de a pessoa já saber.
 *
 * `<details>` nativo pelo mesmo motivo da `.dobra`: o navegador já sabe
 * abrir, fechar, anunciar o estado ao leitor de tela e responder ao teclado.
 */
.abertura .entenda { margin-top: var(--esp-2); max-width: 62ch; }
.abertura .entenda > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center;
  gap: 6px; min-height: var(--alvo-leitura);
  color: var(--tinta-fraca); font-size: var(--t-base); font-weight: 600;
}
.abertura .entenda > summary::-webkit-details-marker { display: none; }
.abertura .entenda > summary::before {
  content: "›"; font-size: 16px; line-height: 1;
  transition: transform var(--rapido);
}
.abertura .entenda[open] > summary::before { transform: rotate(90deg); }
.abertura .entenda > summary:hover { color: var(--tinta); }
.abertura .entenda p {
  margin: 0 0 var(--esp-2); color: var(--tinta-fraca);
  font-size: var(--t-base); line-height: 1.55;
}

/* O cabeçalho da tela: uma linha só, e a pergunta que a tela responde. */
.abertura { margin-bottom: var(--esp-2); }
.abertura h1 {
  margin: 0;
  /* O degrau de PÁGINA — 28 px —, e não o do visor, que é o tamanho do
     número medido. O título da tela e o «R$ 12.400,00» do painel tinham o
     mesmo corpo, e por isso nenhum dos dois liderava. */
  font-size: var(--t-pagina);
  font-weight: 600;
  letter-spacing: -.024em;
  line-height: 1.08;
  text-wrap: balance;
}
.abertura p {
  margin: var(--esp-1) 0 0;
  max-width: 62ch;
  color: var(--tinta-fraca);
  font-size: var(--t-base);
}

/* ── Placa ─────────────────────────────────────────────────────────── */

.placa {
  position: relative;
  background: var(--placa);
  border: 1px solid var(--filete);
  /* Raio de PAINEL, e não o do campo. Enquanto os dois eram 8 px, o campo
     dentro da placa tinha o mesmo canto da placa e o encaixe se perdia — a
     peça lia como um retângulo dentro de outro, não como conteúdo dentro de
     um continente. */
  border-radius: var(--raio-placa);
  padding: 20px var(--esp-5);
  /* Sem sombra. Ela voltou aqui «para separar a placa do chão cinza», e o
     efeito foi o oposto da tese do arquivo: toda placa virou um cartão
     flutuando, e cartão dentro de cartão. Quem separa é o filete, um tom
     mais forte que antes; sombra fica para o que flutua de verdade —
     menu, diálogo, painel lateral. */
  box-shadow: var(--sombra-placa);
  /* Tabela larga rola DENTRO da placa, e não a página inteira. No celular do
     gerente, a página que rola de lado tira o cabeçalho da tela do campo de
     visão e faz o polegar perder a referência do que estava lendo. */
  overflow-x: auto;
}
/* O filete gravado no topo é o que dá o parentesco de instrumento. Sombra
   fazia cada placa parecer um cartão solto de outro site. */
/* No papel, o filete gravado vira ruído: a borda já separa. O que sobra é
   a marca de assunto — 2 px de cor no topo, só na placa acesa. */
.placa--acesa::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  border-radius: var(--raio) var(--raio) 0 0;
  background: var(--dinheiro);
}
/* Empilhadas, as placas respiram; dentro de uma grade, quem espaça é o
   `gap` — a margem aqui empurrava só a segunda e a terceira, e o olho lê
   isso como alinhamento errado. */
/* Fora da folha (telas ainda não convertidas) a margem entre irmãos ainda
   vale. Dentro dela quem espaça é o `gap`, e a margem viraria espaço em
   dobro entre uns e não entre outros. */
.placa + .placa { margin-top: var(--esp-3); }
/* Zera SÓ onde o contêiner já espaça com `gap`. A primeira versão zerava em
   toda a folha, e as telas que empilham placas dentro de um `<div>` comum —
   sem gap nenhum — voltaram a ficar coladas. Espaçamento é do contêiner
   quando ele tem um; onde não tem, o vizinho continua respondendo. */
/* `<section>` deixou de ter `gap` quando o respiro passou a ser por margem —
   e esta linha, que zerava a margem lá dentro, continuou zerando. Duas
   placas dentro da mesma seção voltaram a ficar coladas por causa de uma
   regra que existia para o contrário. Sobram os contêineres que de fato
   espaçam sozinhos. */
.grade > .placa + .placa,
.grade-resumo > .placa + .placa,
.faixa > .placa + .placa,
.folha > .placa + .placa { margin-top: 0; }
/* `.grade-resumo` faltava aqui: na fileira de indicadores do cockpit, do
   financeiro e do pessoal, o primeiro cartão ficava 12 px acima dos
   outros — a margem de irmão somada ao `gap` da grade. */

/* Placa dentro de placa vira DIVISÃO, não caixa: duas molduras aninhadas
   engordam a tela e a segunda não separa nada que a primeira já não tenha
   separado. Fica o filete e o respiro. */
.placa > .placa {
  border: 0; background: transparent; border-radius: 0; box-shadow: none;
  padding: var(--esp-3) 0 0; margin-top: var(--esp-3);
  border-top: 1px solid var(--filete);
}
.placa > .placa:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.placa > .placa::before { display: none; }
/* A placa acesa marca ASSUNTO com 2 px no topo, e mantém a borda neutra:
   moldura colorida inteira pinta a placa de marrom e rouba a atenção do
   número, que é o que ela existe para mostrar. */
.placa--acesa { border-color: var(--filete); }

/* Fora da vista, dentro do alcance de quem lê a tela por voz. `display:none`
   tiraria dos DOIS. */
.so-para-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Rótulo com cara de botão, para o campo de arquivo — cujo botão nativo o
   navegador escreve na língua dele. */
.botao-arquivo {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--alvo-leitura); padding: 0 var(--esp-3); margin: 0;
  border: 1px solid var(--filete-forte); border-radius: var(--raio-pequeno);
  background: var(--placa); color: var(--tinta);
  font-size: var(--t-base); font-weight: 500; cursor: pointer;
}
.botao-arquivo:hover { background: var(--placa-alta); }
.so-para-leitor:focus-visible + .botao-arquivo,
.botao-arquivo:has(+ .so-para-leitor:focus-visible) {
  outline: 2px solid var(--medida); outline-offset: 2px;
}

/* ── Topo da folha: o título à esquerda, o controle à direita ──────────

   Três telas escreveram a própria versão desta fila, e uma delas esqueceu
   o `flex-wrap`. A 390 px o título do dia espremia para metade da largura,
   o olho da abertura quebrava em duas linhas e encostava no `h1`, e o campo
   de data ficava colado no título.

   Não é erro de quem escreveu: é o que acontece quando o mesmo arranjo
   existe em três lugares — a correção acerta um e os outros dois seguem
   errados até alguém abrir cada um no celular. */
.topo {
  display: flex; align-items: flex-end; flex-wrap: wrap;
  gap: var(--esp-3); justify-content: space-between;
}
/* O título encolhe até 260 px e então QUEBRA a linha, em vez de continuar
   espremendo: abaixo disso ele deixa de caber e o controle vai para baixo. */
.topo > .abertura { flex: 1 1 260px; }
.topo .abertura { margin: 0; }
/* Sem isto, filho de flex não encolhe abaixo do próprio conteúdo — e uma
   abertura embrulhada num `<div>` empurra a página inteira para o lado. */
.topo > * { min-width: 0; }

/* ── Reconhecer o que fica de fora ────────────────────────────────────

   Nasceu na importação de cardápio e já vale em duas telas, então mora
   aqui. É a caixa que transforma OMISSÃO em DECISÃO: a importação que
   engole três linhas caladas e a nota fiscal que dá entrada em sete de dez
   erram do mesmo jeito — o operador fecha a tela achando que entrou tudo, e
   a diferença aparece semanas depois, sem ninguém saber de onde veio.

   Bloquear seria pior: numa nota de trinta linhas, travar tudo por causa de
   uma deixa a pessoa sem saída. Reconhecer é a saída que deixa rastro. */
.caixa-ciente {
  display: flex; align-items: flex-start; gap: 10px; margin: 0;
  min-height: var(--alvo-leitura); padding: 4px 0;
  font-size: var(--t-base); color: var(--tinta); line-height: 1.45;
  cursor: pointer;
}
.caixa-ciente input {
  width: 20px; height: 20px; margin: 3px 0 0; flex: none; cursor: pointer;
}

/* ── Abas: recortes da MESMA tela ──────────────────────────────────────

   Aba não é navegação, é o mesmo assunto visto de outro ângulo — saldo,
   entrada, notas, locais são todos "estoque". Por isso ela mora na folha,
   embaixo do título, e não na barra do sistema.

   Duas telas publicavam as abas delas no cabeçalho, e a barra as adotava:
   quatro botões de moldura com 40 px de altura espremidos ao lado do nome
   do programa. Além de apertado, mentia sobre a hierarquia — na barra está
   o sistema inteiro, e "dar entrada" não é um lugar do sistema, é uma
   aba do estoque. Quem procurasse pelo menu não achava.

   Sublinhado e não pastilha: a aba marca posição, não estado. Pastilha é
   o vocabulário do selo (`.estado`), que diz como uma coisa está. */
/* Controle segmentado, e não um sublinhado.
   O sublinhado de 2 px marcava a aba escolhida com a menor diferença que o
   olho consegue registrar — e num tablet, de pé, a pessoa tocava a aba
   errada e só percebia pelo conteúdo. A pastilha diz onde se está com a
   SUPERFÍCIE, que é a mesma linguagem da fileira de modos na barra: quem
   aprendeu a ler uma lê a outra. */
.abas {
  display: inline-flex; gap: 4px; align-items: stretch;
  padding: 4px; border: 1px solid var(--filete);
  border-radius: var(--raio-campo); background: var(--chao);
  overflow-x: auto; scrollbar-width: none;
  /* A pastilha tem a largura das abas, e não a da página. `inline-flex`
     sozinho não garante isso: em pai grid ou flex o item estica por padrão,
     e a tira ficava de ponta a ponta com as abas amontoadas à esquerda —
     que é a aparência de uma barra quebrada, não de um controle. */
  width: fit-content; max-width: 100%;
  align-self: start; justify-self: start;
}
.abas::-webkit-scrollbar { display: none; }
/* As setas presas às pontas da faixa que rola (campos.js). Ficam por cima
   da primeira/última aba — margem negativa — para não empurrar nada quando
   aparecem, e o degradê diz que há mais por baixo. */
.seta-rolagem {
  position: sticky; z-index: 2; flex: none; align-self: stretch;
  display: flex; align-items: center; justify-content: center;
  width: 44px; min-height: 44px; cursor: pointer; user-select: none;
  font: 600 26px/1 var(--fonte-ui); color: var(--tinta);
}
.seta-rolagem[hidden] { display: none; }
/* Um círculo com borda em cima do degradê: só o degradê com «‹» solto
   passava por pedaço de texto cortado. */
.seta-rolagem--esq { left: 0; margin-right: -44px;
  background: radial-gradient(circle at 50% 50%, var(--placa) 15px, var(--filete-forte) 16px, transparent 17px),
              linear-gradient(to right, var(--chao) 60%, transparent); }
.seta-rolagem--dir { right: 0; margin-left: -44px;
  background: radial-gradient(circle at 50% 50%, var(--placa) 15px, var(--filete-forte) 16px, transparent 17px),
              linear-gradient(to left, var(--chao) 60%, transparent); }
.seta-rolagem { font-size: 22px; padding-bottom: 2px; }
.seta-rolagem:hover { color: var(--medida); }
.abas > button {
  /* Altura E largura. A aba "Salão" tinha 56 px de altura e 42 de largura —
     o alvo é o RETÂNGULO, e medir só a altura deixava o lado estreito
     passar. Palavra curta é justamente a que fica estreita. */
  flex: none; min-height: var(--alvo-leitura); min-width: var(--alvo-leitura);
  padding: 0 14px;
  border: 1px solid transparent; border-radius: 14px;
  background: transparent; color: var(--tinta-fraca);
  font-size: var(--t-base); font-weight: 500; letter-spacing: 0;
}
.abas > button:hover { background: transparent; color: var(--tinta); }
/* `aria-pressed` também: filtro de categoria é botão de alternância, e não
   aba de `tablist`. A semântica é diferente e a pastilha é a mesma — cinco
   telas escrevem `aria-pressed` numa tira que é este componente. */
.abas > button[aria-selected="true"],
.abas > button[aria-pressed="true"] {
  color: var(--tinta); font-weight: 500;
  background: var(--placa); border-color: transparent;
  box-shadow: var(--sombra-placa);
}

/* Rótulo micro. Ele nomeia a unidade e o recorte — nunca repete o número. */
/* O olho é o rótulo de assunto da placa, acima do título.
   Continua em caixa alta — é o ÚNICO lugar do sistema onde ela sobrou, e é
   por isso que ela ainda significa alguma coisa. O que mudou é o peso: 11 px
   em 700 com espaçamento largo gritava tanto quanto o título logo abaixo, e
   dois textos com a mesma voz não fazem hierarquia. */
/* O olho é o CONTEXTO do que vem embaixo («Competência de outubro»,
   «Recebimento»), escrito como frase. Era caixa alta espaçada com um traço
   na frente, em toda placa e em todo cabeçalho de página: repetido em todo
   lugar, ele virou ornamento, e o rótulo que de fato precisa de destaque —
   a família na tabela do estoque, o selo de estado — perdia o lugar. */
.olho {
  display: block;
  color: var(--tinta-apagada);
  font-size: var(--t-legenda); font-weight: 600;
  letter-spacing: 0; text-transform: none;
}
.olho::first-letter { text-transform: uppercase; }
/* A contagem que acompanha o rótulo («Na cozinha 3») ganha o respiro que o
   `gap` do flex dava; o olho virou bloco para a primeira letra subir. */
.olho > * { margin-left: .45em; }
.olho::before { content: none; }
.olho--sem-traco::before { display: none; }

.placa h2, .placa h3 {
  font-size: var(--t-cartao); font-weight: 600; letter-spacing: -.01em;
}
.placa h3 { font-size: var(--t-corpo); margin-bottom: var(--esp-3); }

/* ── Visor: o número que a placa mede ──────────────────────────────── */

.visor {
  font-family: var(--fonte-dado);
  font-size: var(--t-visor);
  overflow-wrap: anywhere;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
  margin: 0;
}
.visor--grande { font-size: var(--t-visor-grande); }
.visor--dinheiro { color: var(--dinheiro); }
.visor--medida { color: var(--medida); }
.visor--perda { color: var(--perda); }
.visor .unidade {
  font-family: var(--fonte-ui); font-size: var(--t-base); font-weight: 500;
  color: var(--tinta-apagada); margin-left: 6px; letter-spacing: 0;
}
/* A nota é TEXTO, e texto tem largura de leitura.
   Solta numa placa de 1.220 px ela virava uma linha de 200 caracteres: o olho
   chega ao fim e não acha o começo da seguinte. É a legenda que explica o
   número — quem precisa dela precisa conseguir lê-la. */
.nota {
  margin: 0; color: var(--tinta-apagada);
  font-size: var(--t-micro); line-height: 1.5;
  max-width: 78ch;
}

/* ── O ritmo vertical da placa tem UM dono ─────────────────────────────

   A versão anterior listava os pares que deviam respirar: tabela depois de
   tabela, grade depois de título. Lista de casos nunca fecha — todo par
   fora dela ficava colado, e a tela só denunciava no navegador. Medindo as
   dezenove telas, sobravam onze pares grudados com 0 px, entre eles o selo
   de competência encostado nos valores e duas filas de filtro sem nada
   entre elas.

   Agora é o contrário: TUDO que a placa empilha respira, e a exceção é
   quem precisa colar. Lista de exceções é sempre menor que lista de casos,
   e a tela nova nasce certa sem ninguém lembrar de cadastrar o par dela. */
.placa > *, .placa > form > * { margin-top: 0; }
.placa > * + *, .placa > form > * + * { margin-top: var(--esp-3); }

/* A exceção: rótulo cola no que ele nomeia. Um respiro cheio entre o nome
   da medida e a medida faz o olho ler duas coisas soltas em vez de um par —
   e o par é a unidade de leitura da placa. Vale fora da placa também, que é
   onde a faixa de indicadores monta os mesmos pares. */
.olho + * { margin-top: var(--esp-2); }
/* Campo cola no rótulo dele — e a especificidade tem que passar por cima do
   ritmo da placa, senão o rótulo fica a 20 px do próprio campo e mais perto
   do campo de baixo do que do de cima. */
.folha label + :is(input, select, textarea) { margin-top: 0; }

/* Parágrafo do navegador vem com 1em de margem em cima e embaixo. Numa tela
   onde quem espaça é o contêiner, isso não some: soma. Dava 15 px onde o
   resto da tela dava 14 — perto demais para parecer erro, longe demais para
   ser a mesma coisa. */
.folha p { margin-bottom: 0; }

/* Telas que ainda não foram reescritas montam a placa com `<small>` de
   rótulo e `<h3>` de valor. Em vez de esperar a reescrita de cada uma para
   elas falarem a língua do sistema, o sistema lê a marcação delas: `small`
   vira olho, `h3` de dinheiro vira visor. É o mesmo desenho, sem tocar em
   dezoito arquivos no mesmo dia. */
.placa > small {
  display: block; color: var(--tinta-apagada);
  font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase;
}
.placa > small + h3 {
  margin: 6px 0 0;
  font-family: var(--fonte-dado); font-size: var(--t-visor);
  font-weight: 600; letter-spacing: -.02em;
}
.placa > small + h3.dinheiro { color: var(--dinheiro); }

/* ── Não medido: a assinatura ──────────────────────────────────────── */

/* Dentro de TABELA o não medido é uma palavra em itálico, não hachura: a
   textura ocuparia a célula inteira e a linha viraria um bloco cinza. E
   não é travessão: `—` numa coluna de números lê como sinal de menos ou
   como sobra de outra coluna. Nasceu copiada em `contador` e
   `conciliacao`; a terceira cópia ia para o `inventario`. */
.em-branco { color: var(--tinta-apagada); font-style: italic; }

.nao-sei {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 10px;
  border: 1px solid var(--filete-forte);
  border-radius: var(--raio-pequeno);
  background: var(--hachura);
  color: var(--tinta-fraca);
  font-family: var(--fonte-ui); font-size: var(--t-base);
  font-style: italic; letter-spacing: .01em;
}
.nao-sei::before {
  content: ""; width: 3px; align-self: stretch; border-radius: 2px;
  background: var(--tinta-apagada);
}
.visor.nao-sei { font-size: var(--t-titulo); font-weight: 500; }

/* ── Trilho de medida ──────────────────────────────────────────────── */

.trilho {
  display: flex; align-items: flex-end; gap: 2px;
  /* 34px e não 26: com a régua da semana passada em cima, a diferença de
     um quarto do movimento cabia em 4px e ficava no limite do perceptível.
     Aumentar o trilho aumenta o SINAL — exagerar a barra seria mentir sobre
     a proporção; dar mais altura ao mesmo desenho, não. */
  height: 34px; margin-top: var(--esp-3);
}
.trilho i {
  flex: 1; min-width: 2px; height: 4px; border-radius: 1px;
  background: var(--filete-forte);
  transition: height var(--rapido), background var(--rapido);
}
.trilho i[data-v] { background: var(--medida); }
.trilho i.dinheiro { background: var(--dinheiro); }
.trilho i.vazio { background: var(--hachura); height: 4px; }

/* A régua: onde a mesma hora da semana passada chegou.
 *
 * Risco, e não barra cheia atrás. Uma segunda barra disputaria a leitura com
 * o dinheiro de hoje, e o que se lê primeiro tem que ser hoje; o risco diz
 * "a marca a bater" sem competir. Fica em `--medida` porque comparação é
 * MEDIDA e não dinheiro — o âmbar é do valor, não da régua.
 *
 * `overflow: visible` é o padrão e é o que faz o risco aparecer quando a
 * semana passada foi MAIOR que hoje: é exatamente o dia em que o dono mais
 * precisa vê-lo, e recortá-lo esconderia a única leitura que importa. */
.trilho i.com-regua { position: relative; }
.trilho i.com-regua::after {
  content: ""; position: absolute; left: -2px; right: -2px;
  bottom: var(--regua, 0); height: 2px;
  background: var(--medida); border-radius: 1px;
}
.trilho-legenda {
  display: flex; justify-content: space-between;
  margin-top: 6px; color: var(--tinta-apagada);
  font-family: var(--fonte-dado); font-size: var(--t-micro);
}

/* ── Grade de placas ───────────────────────────────────────────────── */

.grade {
  display: grid; gap: var(--esp-3); align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
}
.grade--dupla { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
/* Placa de formulário não estica. Numa grade de altura igual, o formulário
   curto ganha o vão do formulário longo — e um retângulo branco vazio do
   tamanho de um cartão lê como tela que não terminou de carregar. Só faz
   sentido esticar quando as placas mostram a mesma coisa lado a lado. */
.grade--topo { align-items: start; }
.faixa { display: flex; gap: var(--esp-3); flex-wrap: wrap; align-items: flex-end; }

/* `.linha` é a fila de controles: rótulo em cima, campo embaixo, botão ao
   lado. Ela existia em quinze telas, cada uma com a sua definição; quando as
   cópias saíram, ninguém tinha ficado com o original e toda barra de filtro
   do sistema virou uma pilha vertical. É o risco de centralizar: o que se
   apaga em quinze lugares precisa existir em um. */
.linha {
  display: flex; flex-wrap: wrap; gap: var(--esp-2);
  align-items: flex-end;
}
.linha > * { min-width: 0; }
.linha > label { align-self: center; }

/* ── Tabela ────────────────────────────────────────────────────────── */

.tabela { width: 100%; border-collapse: collapse; }
/* `max-content` só DENTRO da placa, que é quem tem a rolagem própria. Solta
   numa tela sem esse embrulho, a tabela empurrava a página inteira para o
   lado no celular. */
.placa .tabela { min-width: max-content; }
/* Tabela larga fora de placa também precisa de alguém que role por ela. Sem
   isto, a ficha empurrava a página inteira para o lado no celular — e a
   página que rola de lado tira o cabeçalho do campo de visão. */
.folha :is(div, section):has(> .tabela) { overflow-x: auto; }
@media (min-width: 760px) { .placa .tabela { min-width: 100%; } }

/* ── Beira de rolagem ──────────────────────────────────────────────── */
/* A barra de rolagem some sozinha no macOS e no celular, e aí o que rola
   de lado passa a mentir: a ficha técnica mostra NOME · FICHA · ORIGEM e
   nada na tela conta que CUSTO e VALIDADE existem à direita. No celular
   do gerente a tabela do lote esconde 70% das colunas sem avisar.
   A sombra abaixo aparece só onde há conteúdo além da borda e some ao
   chegar no fim: dois gradientes presos ao CONTEÚDO (`local`) cobrem dois
   presos à CAIXA (`scroll`). Sem overflow, um tapa o outro e nada aparece
   — o aviso é correto por construção, sem uma linha de JavaScript. */
.placa,
.abas,
.ros-contexto,
.ros-topo,
.rolagem,
.categorias,
.formula,
.manual pre,
.folha :is(div, section):has(> .tabela) {
  --beira-fundo: var(--placa);
  /* A capa fica SÓLIDA por metade da largura antes de desbotar. Desbotando
     desde a borda, ela não cobria a sombra inteira e sobrava uma faixa
     cinza de 10 px na beira direita de TODA placa — inclusive das que não
     rolam nada. */
  background-image:
    linear-gradient(to right, var(--beira-fundo) 50%, transparent),
    linear-gradient(to left,  var(--beira-fundo) 50%, transparent),
    linear-gradient(to right, rgba(10, 10, 10, .12), transparent),
    linear-gradient(to left,  rgba(10, 10, 10, .12), transparent);
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 28px 100%, 28px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}
.abas { --beira-fundo: var(--chao); }
.ros-contexto, .ros-topo { --beira-fundo: #ffffff; }
/* Moram no <style> da tela, mas a beira é vocabulário do sistema: quem
   rola de lado avisa igual em toda tela, e o fundo é o da superfície
   em que a tira está deitada. */
.formula { --beira-fundo: var(--placa-alta); }
/* O bloco de comando do manual é uma tira que rola: comando longo não
   quebra linha, e sem a beira ele parece terminar onde a caixa termina. */
.manual pre { --beira-fundo: var(--placa-alta); }
/* O cabeçalho ROTULA a coluna; ele não é a informação.
   Em caixa alta de 11 px com espaçamento de .1em ele tinha mais presença
   que o número embaixo — e num painel o número é o que se lê. Caixa normal,
   peso 600, e o filete de baixo mais leve. */
.tabela th {
  padding: 0 var(--esp-3) var(--esp-2);
  text-align: left; color: var(--tinta-fraca);
  font-size: var(--t-meta); font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase;
  border-bottom: 1px solid var(--filete);
  white-space: nowrap;
}
.tabela td {
  /* Centro e não linha de base: a linha que tem um botão alinhava o texto
     pela base do botão, e aí o nome do prato ficava sete pixels acima do
     resto da coluna. Sete pixels em quinze linhas o olho lê como tabela
     torta, sem saber dizer por quê. */
  vertical-align: middle;
  /* Respiro de 14 px, e não 11. Numa tabela de quinze insumos as linhas
     coladas viram uma massa cinza que o olho percorre sem parar em nenhuma
     — e é justamente a linha vermelha do que faltou que precisa ser
     achada de relance. 12 px é o meio: a gestão compara vinte linhas de
     uma vez, e com 14 elas não cabiam numa tela de notebook. */
  padding: 12px var(--esp-3);
  border-bottom: 1px solid var(--filete);
  font-size: var(--t-base);
}
.tabela td :is(button, .estado, input, select) { vertical-align: middle; }
.tabela tbody tr:last-child td { border-bottom: 0; }
/* A linha responde ao mouse. No escritório a tabela é lida com o cursor
   correndo por ela, e uma linha que não reage deixa o olho perder a altura
   no meio de sete colunas de número. */
.tabela tbody tr:hover > td { background: var(--placa-alta); }
.tabela tbody tr { transition: background var(--rapido); }
/* Linha que abre um detalhe é alcançável pelo Tab; o foco precisa aparecer
   nela inteira, e não só num contorno que a borda da célula esconde. */
.tabela tbody tr[tabindex]:focus-visible { outline: 2px solid var(--tinta); outline-offset: -2px; }
.tabela tbody tr[tabindex] { cursor: pointer; }
.tabela tbody tr:hover { background: var(--placa-alta); }
.tabela .n, .tabela td.n, .tabela th.n {
  font-family: var(--fonte-dado); text-align: right; white-space: nowrap;
}
/* Cabeçalho de coluna de número à direita, junto do número. O «Saldo» do
   estoque ficava à esquerda e o valor à direita, separados por 150 px: o
   olho não sabia de qual coluna era o número. `campos.js` marca a coluna
   sozinho quando todas as células dela são número. */
.tabela .dinheiro { color: var(--dinheiro); }

/* ── Controles ─────────────────────────────────────────────────────── */

/* Rótulo de campo é para LER, não para rotular seção. Em caixa alta e 11 px
   ele tinha a mesma voz do olho da placa — e quando tudo tem a mesma voz,
   nada tem hierarquia. Caixa normal, 13 px, e o olho continua sendo o único
   texto em caixa alta da tela. */
label {
  display: block; margin-bottom: 6px;
  color: var(--tinta);
  font-size: 13px; font-weight: 500; letter-spacing: 0;
}
input, select, textarea {
  font: inherit; color: var(--tinta);
  /* Campo cinza com filete, da v2: o cinza diz «escreva aqui» sem moldura
     pesada, e o filete segura o campo quando ele está direto no fundo da
     página, que é do mesmo cinza. */
  background: var(--campo);
  border: 1px solid var(--filete);
  /* Raio de CAMPO e alvo de leitura. Eram 6 px e altura livre — um campo de
     34 px com canto quase reto, que é a caixa de texto de 2010. O dedo do
     gerente no celular pede 44, e o canto acompanha o do botão ao lado. */
  border-radius: var(--raio-campo);
  min-height: var(--alvo-leitura);
  padding: 10px 14px;
  transition: border-color var(--rapido), box-shadow var(--rapido);
}
input:hover, select:hover, textarea:hover { border-color: var(--filete-forte); }
input:focus, select:focus, textarea:focus {
  background: var(--placa); border-color: var(--filete-forte);
  box-shadow: 0 0 0 2px var(--tinta);
  outline: none;
}
input::placeholder, textarea::placeholder { color: var(--tinta-fraca); }
input[type="date"], input[type="month"], input[type="number"] {
  font-family: var(--fonte-dado);
}
textarea { width: 100%; min-height: 76px; resize: vertical; }

/* Campo largo demais mente sobre o que cabe nele: um CNPJ tem 18 caracteres
   e uma caixa de 400 px sugere que o sistema espera outra coisa. A largura
   é uma dica de formato — a mais barata que existe. */
.folha input:not([type="checkbox"]):not([type="radio"]):not(.so-para-leitor),
.folha select { max-width: 320px; width: 100%; }
/* Campo de conteúdo longo (nome de prato, referência de ficha, insumo da
   nota): o teto de 320 px cortava «Especial pedra contra/tilápia p/2». */
.folha :is(input, select).largo { max-width: 560px; }
.folha input[type="number"], .folha input[type="date"],
.folha input[type="month"], .folha input[type="time"] { max-width: 190px; }

/* O botão sem classe é NEUTRO, e essa é a mudança de fundo da reforma.
 *
 * Ele era verde. Como quase todo botão do sistema é escrito sem classe, o
 * verde acabou em «Procurar», «Atualizar», «Renomear», «Abrir a loja» e
 * «Cadastrar» — e uma cor que serve para tudo deixa de avisar qualquer
 * coisa. Quando «Procurar» e «Receber R$ 240,00» têm o mesmo verde, o verde
 * não é sinal: é o fundo do botão.
 *
 * Agora o verde é pedido pelo nome — `.b-conclui` — e só a ação que conclui
 * o pede: receber, enviar, confirmar, aprovar, fechar. O que sobra continua
 * sendo um botão inteiro, com contorno, alvo de 44 px e todos os estados;
 * ele só parou de gritar.
 */
button {
  font: 500 var(--t-base)/1 var(--fonte-ui);
  min-height: var(--alvo-leitura); padding: 0 16px;
  color: var(--tinta); background: var(--placa);
  border: 1px solid var(--filete); border-radius: var(--raio-campo);
  cursor: pointer; letter-spacing: 0;
  transition: background var(--rapido), transform var(--rapido),
              border-color var(--rapido);
}
/* `:hover` SEM `:not(:disabled)` de propósito.
   Com ele, a regra vale (0,2,1) e vence qualquer `.classe button` de tela —
   e o verde de "ação que conclui" vazava para todo botão neutro: passar o
   mouse sobre o "5" do teclado de PIN pintava a tecla de verde escuro com o
   dígito em tinta escura, ilegível, na primeira tela do produto.
   Sem ele, a especificidade empata com `.classe button` e ganha quem vem
   depois — a tela, que é quem sabe se aquele botão é uma ação ou um dígito.
   O desligado continua protegido pela regra logo abaixo, que vem depois. */
button:hover { background: var(--chao); border-color: var(--filete-forte); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled, button:disabled:hover {
  opacity: .5; cursor: not-allowed; background: var(--placa);
  border-color: var(--filete);
}
button.sec:disabled, button.sec:disabled:hover { background: transparent; }
button.sec {
  color: var(--tinta); background: transparent;
  border: 1px solid var(--filete);
  /* Secundário é o peso VISUAL, não o tamanho do alvo. "Assumir" no cockpit
     é um botão secundário que atribui uma exceção a alguém — quem lê a tela
     no celular precisa acertá-lo igual. Media 38 px. */
  min-height: var(--alvo-leitura);
}
button.sec { background: var(--placa); }
button.sec:hover:not(:disabled) { background: var(--chao); border-color: var(--filete-forte); }
/* `--tinta-sobre-cor`, e não `#fff`: no tema escuro `--perda` clareia para
   `#ef6a5b`, e branco sobre ele dá 3,05 : 1. O token vira quase preto no
   escuro e devolve 6,19. Foi o último `#fff` literal sobre cor da casa —
   os outros 27 saíram na mesma varredura. */
button.perigo { color: var(--tinta-sobre-cor); background: var(--perda); }
button[data-armado="1"] { background: var(--perda); color: var(--tinta-sobre-cor); }

/* O eco do campo: o que vai ser GRAVADO, mostrado enquanto se digita.
   Ele existe porque dinheiro erra calado — um preço cem vezes maior não dá
   mensagem nenhuma, entra no cardápio e só aparece quando o cliente
   reclama. Ver `R$ 12,90` embaixo do campo é a defesa mais barata. */
.eco {
  display: block; margin-top: 4px; min-height: 1.2em;
  font-family: var(--fonte-dado); font-size: var(--t-micro);
  color: var(--tinta-fraca);
}
.eco.erro { color: var(--perda); }

/* Numa FILA de campos, o eco não pode entrar na conta da altura.

   O campo de dinheiro carrega um eco embaixo — "R$ 12,90" — e o campo comum
   não. Dentro de uma `.linha`, que alinha os filhos pela base, isso deixava
   o campo de dinheiro 17 px mais alto que os vizinhos: numa cotação, o
   "Preço por unidade" ficava desalinhado dos três campos ao lado, e o olho
   lê isso como tela montada às pressas.

   Fora de fluxo, e não `display:none` quando vazio: escondê-lo enquanto
   está vazio faria o campo PULAR na primeira tecla, e campo que pula
   embaixo do dedo é pior que campo desalinhado. O respiro reservado embaixo
   da fila é para o eco não encostar no que vem depois. */
.linha > .campo,
.linha > div:has(> .eco) { position: relative; }
.linha > .campo > .eco,
.linha > div:has(> .eco) > .eco {
  position: absolute; top: 100%; left: 0; right: 0;
}
/* O campo de mês e data monta um `<div>` simples com o eco embaixo, e não
   `.campo`. Sem esta regra o eco ficava no fluxo, o campo ficava mais alto
   que o botão ao lado, e «Ver» e «Atualizar» desciam meio campo. */
/* O respiro é, no mínimo, uma linha de eco (15 px). Eco que QUEBRA — «10 de
   outubro de 2026 · sábado» num campo estreito ocupa duas linhas — é medido
   por `ligarData`, em campos.js, que escreve a altura real em
   `--eco-reserva`. Antes o respiro era fixo, o eco de 36 px passava 9 px por
   cima do cartão seguinte, e só aparecia com data de nome longo. */
.linha:has(> .campo, > div > .eco) { padding-bottom: max(15px, var(--eco-reserva, 0px)); }

/* A unidade fica DENTRO do campo: unidade ao lado do número é a diferença
   entre 2 kg e 2 g, e ela não pode depender de a pessoa lembrar qual era a
   unidade daquele insumo. */
/* `inline-block` e não `block`: em bloco a caixa ocupa a largura do
   contêiner e a marca da unidade ia parar do outro lado da tela, longe do
   número que ela mede. Ela precisa estar colada no valor. */
.com-unidade { position: relative; display: inline-block; max-width: 100%; }
.com-unidade > input { padding-right: 52px; }
.com-unidade > .unidade {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: var(--tinta-apagada); font-size: var(--t-micro);
  font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  pointer-events: none;
}

/* ── Link ──────────────────────────────────────────────────────────── */
/*
 * O sistema nunca disse a cor do link, e por isso ela era a do NAVEGADOR: o
 * azul de 1994, `#0000EE`. Em tela clara ele já é o único elemento fora da
 * paleta; no tema escuro é azul-marinho sobre grafite, e a lista «Como está
 * a casa» — que é toda de links — ficava ilegível.
 *
 * A cor é a da MEDIDA, e ela cabe: link é navegação, gesto reversível, o
 * mesmo lugar semântico do anel de foco. E o sublinhado fica — cor sozinha
 * não diz «isto é clicável» para quem não a distingue.
 */
a {
  color: var(--medida);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--tinta); }

/* ── Estados de texto ──────────────────────────────────────────────── */

/* O aviso da tela: recado curto, com cor de estado e caixa própria. Antes
   era texto solto vermelho, que num fundo claro parece link quebrado.
   
   Ele pede a CLASSE do estado, e não só `role="status"`. `role` é papel de
   acessibilidade: o chip que diz "sincronizado" também é um status, e a
   primeira versão pintava ele de vermelho a noite inteira na tela do garçom.
   Boa notícia com cara de erro é pior que notícia nenhuma — ensina a ignorar
   o vermelho. */
[role="status"].erro:not(:empty), .aviso:not(:empty) {
  margin: 0; padding: 11px 14px; border-radius: var(--raio-pequeno);
  border: 1px solid color-mix(in srgb, var(--perda) 30%, var(--filete));
  background: color-mix(in srgb, var(--perda) 7%, var(--placa));
  color: var(--perda); font-size: var(--t-base);
}
[role="status"].ok:not(:empty), .aviso.ok:not(:empty) {
  border: 1px solid color-mix(in srgb, var(--acao) 32%, var(--filete));
  background: color-mix(in srgb, var(--acao) 8%, var(--placa));
  color: var(--acao-alta);
  margin: 0; padding: 11px 14px; border-radius: var(--raio-pequeno);
  font-size: var(--t-base);
}

.fraco { color: var(--tinta-fraca); }
.apagado { color: var(--tinta-apagada); }
.erro { color: var(--perda); }
.ok { color: var(--acao-alta); }
/* Vazio é um estado, não a falta de um. Texto solto na placa parece que a
   tela não terminou de carregar; a caixa tracejada diz "aqui é onde as
   coisas aparecem, e ainda não tem nenhuma". */
.vazio {
  padding: var(--esp-4); color: var(--tinta-apagada);
  font-size: var(--t-base); text-align: center;
  border: 1px dashed var(--filete-forte); border-radius: var(--raio-pequeno);
  background: var(--placa-alta);
  /* O aviso de vazio fala da ÁREA inteira, nunca de uma célula: dentro de
     grade ele caía numa coluna de 118 px, uma palavra por linha, e lia
     como cartão quebrado em vez de recado. Fora de grade a declaração é
     ignorada, então vale para todas sem precisar acertar o seletor da
     grade de cada tela. */
  grid-column: 1 / -1;
}
.selo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px; border-radius: var(--raio-campo);
  border: 1px solid var(--filete); background: var(--placa);
  color: var(--tinta);
  font-size: var(--t-meta); font-weight: 500; letter-spacing: 0;
  line-height: 1.33;
}

@media (max-width: 760px) {
  .folha { padding: var(--esp-4) var(--esp-3) var(--esp-5); }
  .abertura h1 { font-size: 24px; }
}
/* ── Barra e menu ──────────────────────────────────────────────────── */

/* A barra segura o CONTEXTO da operação — quem está no turno, o que está na
   praça, o controle que a tela publica. A navegação mora no menu, que abre
   por cima: vinte telas cabem numa lista agrupada, sessenta só cabem se dá
   para procurar pelo nome.

   Cores literais, não variáveis: a barra é a mesma em toda tela, inclusive
   nas que ainda têm paleta própria. Herdando a paleta da página ela ficava
   com texto escuro sobre fundo escuro — ilegível, e ninguém percebe até
   abrir a tela certa. */

.ros-topo {
  position: sticky; top: 0; z-index: var(--camada-barra);
  display: flex; align-items: center; gap: 12px;
  height: 56px; padding: 0 16px;
  /* A barra não deixa nada dela transbordar: quem tem controle largo é o
     `.ros-contexto`, e ele rola por dentro. Sem isto, três abas absorvidas
     empurravam a página inteira para o lado no celular. */
  overflow: hidden;
  /* VIDRO, e a distinção que faltava da primeira vez.
     A barra virou opaca porque o título da página aparecia por trás dela ao
     rolar, e duas camadas de texto no mesmo lugar leem como tela quebrada.
     Só que aquilo era translucidez SEM desfoque — uma janela suja, onde o
     texto de baixo continua legível e briga com o de cima.
     Com desfoque de verdade, o que passa por trás vira massa de cor: dá a
     profundidade sem nenhuma segunda leitura. E quem não desfoca — navegador
     antigo, ou quem pediu menos transparência ao sistema — recebe a
     superfície cheia de volta, logo abaixo. */
  background: var(--vidro-claro);
  -webkit-backdrop-filter: blur(var(--vidro-desfoque)) saturate(var(--vidro-saturacao));
  backdrop-filter: blur(var(--vidro-desfoque)) saturate(var(--vidro-saturacao));
  border-bottom: 1px solid rgba(10, 10, 10, .08);
  font: 500 14px/1 var(--fonte-ui); color: #525252;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ros-topo { background: #ffffff; border-bottom-color: #e5e5e5; }
}
@media (prefers-reduced-transparency: reduce) {
  .ros-topo {
    background: #ffffff; border-bottom-color: #e5e5e5;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
[data-tema="escuro"] .ros-topo { background: rgba(23, 23, 23, .74); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-tema="escuro"] .ros-topo { background: #171717; }
}
@media (prefers-reduced-transparency: reduce) {
  [data-tema="escuro"] .ros-topo { background: #171717; }
}
.ros-menu-botao {
  display: inline-flex; flex-direction: column; justify-content: center;
  align-items: center; gap: 4px;
  /* `flex: none` porque ele estava sendo ESMAGADO, não desenhado pequeno:
     a 320 px o flex o espremia a 17 px de largura — o botão que abre o menu
     inteiro virava um risco de dois dedos de altura e meio de largura. O
     `--alvo` declarado não é o alvo renderizado quando o flex aperta, e
     essa diferença é invisível para qualquer teste que leia só o CSS. */
  flex: none;
  width: var(--alvo-leitura); min-height: var(--alvo-leitura); padding: 0;
  background: transparent; border: 1px solid #d4d4d4; border-radius: 6px;
  cursor: pointer; transition: border-color 120ms, background 120ms;
}
/* Especificidade acima do `button:hover` do sistema: o verde de "ação que
   conclui" não pode vazar para o botão que só abre o menu. */
.ros-topo button.ros-menu-botao:hover,
.ros-topo button.ros-menu-botao:focus-visible,
.ros-topo button.ros-menu-botao:active {
  background: #f5f5f5; border-color: #a3a3a3; transform: none;
}
.ros-menu-botao span { display: block; width: 15px; height: 1.5px; background: #525252; }
.ros-marca {
  display: flex; align-items: center; gap: 9px;
  color: #0a0a0a; text-decoration: none;
  font-size: 14px; font-weight: 600; letter-spacing: .005em;
  /* O nome do sistema é a âncora da barra e não quebra: no celular do
     balcão, do PDV e do garçom — as três telas que carregam selos ao lado —
     ele virava "Restaurant / OS" em duas linhas dentro de 56 px. Quem cede
     espaço é a tira de selos, que rola; o nome, não. */
  /* A altura do alvo é a do dedo, não a da letra. O `a` media 18 px de
     altura — a do tarjinha âmbar ao lado do nome — e era um link que leva
     para a tela inicial. Dentro de uma barra de 56 px, 44 não muda um pixel
     do desenho: só deixa de exigir mira. */
  flex: none; white-space: nowrap; min-height: var(--alvo-leitura);
}
/* ...mas em tela estreita ALGUÉM tem que ceder, e o nome do sistema é o que
   o operador menos precisa ler: ele sabe em que sistema está. Travar o nome
   sem dizer quem cede no lugar dele fez o `.ros-contexto` — a tira onde a
   tela publica o que importa — ir a ZERO no celular: a pílula "4 pedidos em
   aberto" existia com 0 px de largura. Aqui o texto sai e a tarjinha fica,
   que é o suficiente para o toque de voltar ao início. O nome continua na
   árvore, para quem ouve a tela. */
@media (max-width: 700px) {
  /* Aperta o que é respiro e deixa rolar o que sobrar. Num aparelho de
     390 px a barra pede 445: menu 44, marca 7, modos 144, praças 70,
     contexto 88, mais 60 de vão e 32 de recuo. Com `overflow: hidden` o
     excesso era CORTADO em silêncio — a tira de contexto começava em 363
     numa caixa de 386, e o operador via 23 px de uma pílula sem saber que
     havia mais.
     Rolar é pior que caber e melhor que cortar: quem rola tem caminho, e a
     beira de rolagem do sistema desenha a sombra dizendo que há mais. O
     `overflow` fica no eixo X só — vertical continua cortado, senão a barra
     ganharia altura e empurraria a página. */
  .ros-topo {
    gap: 8px; padding: 0 10px;
    overflow: hidden;
  }
  .ros-marca > span {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .ros-marca { gap: 0; }
  .ros-espaco { display: none; }
  .ros-contexto { flex: 1; justify-content: flex-end; overflow: hidden; }
  /* `min-width: 0` é o que faz as reticências acontecerem. Sem ele o item
     de flex se recusa a encolher abaixo do próprio conteúdo: os dois
     controles somavam 242 px numa tira de 144, a linha transbordava para a
     ESQUERDA e o `overflow: hidden` da barra cortava o começo do primeiro.
     No telefone lia-se «zinha» — a cauda de «tudo na cozinha» — como se a
     barra estivesse quebrada. Reticências dizem "tem mais"; um pedaço de
     palavra não diz nada. */
  .ros-contexto > :not(.ros-quem, #quem-sou) {
    flex: 0 1 auto; min-width: 0;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Quem está no turno não encolhe: é por ele que se troca de operador, e
     um nome pela metade no fim do turno é a pior hora para adivinhar.
     Duas formas do mesmo bloco: `.ros-quem`, que a barra monta, e
     `#quem-sou`, que a tela de operação publica — quando a tela publica o
     seu, a barra não monta o dela, e a regra precisa alcançar os dois. */
  .ros-contexto > :is(.ros-quem, #quem-sou) { flex: none; }
}
.ros-marca::before {
  content: ""; width: 7px; height: 18px; border-radius: 2px;
  background: linear-gradient(180deg, #0a0a0a, #0a0a0a);
}
.ros-atual {
  padding-left: 12px; border-left: 1px solid #e5e5e5;
  color: #525252; font-size: 13px; white-space: nowrap;
}
.ros-espaco { flex: 1; }
/* O que a página publica na barra pode ser largo — três campos e dois
   botões. No celular isso empurrava a barra e, com ela, a página inteira
   para fora da tela. Ele rola DENTRO da barra e nunca encolhe os controles:
   campo espremido é campo errado. */
/* ── A fileira de modos ────────────────────────────────────────────────

   Por onde o pedido entra: mesa, balcão e — quando existir — entrega. Fica
   ao lado da marca, com posição fixa, porque é a troca mais frequente do
   dia e o operador precisa achá-la sem procurar.

   Pastilha e não sublinhado, ao contrário da aba: a aba recorta a MESMA
   tela e mora na folha; o modo troca a tela inteira e mora no cromo. Dois
   desenhos diferentes porque são duas coisas diferentes — se fossem
   iguais, o operador aprenderia que sublinhado às vezes muda tudo. */
.ros-modos {
  display: flex; align-items: center; gap: 2px; flex: none;
  margin-left: var(--esp-3); padding: 3px;
  border: 1px solid var(--filete); border-radius: 999px;
  background: var(--chao);
}
.ros-modo {
  display: inline-flex; align-items: center; gap: 7px;
  /* 44 px, que é o alvo de leitura da casa. Cabe: 44 + 6 de recheio do
     grupo = 50, dentro dos 56 da barra. Era 34 — abaixo do dedo de quem
     troca de modo com a mão molhada, no meio do salão. */
  height: var(--alvo-leitura); padding: 0 13px; border-radius: 999px;
  color: var(--tinta-fraca); text-decoration: none;
  font-size: 13px; font-weight: 500; white-space: nowrap;
  transition: background var(--rapido), color var(--rapido);
}
.ros-modo svg { width: 19px; height: 19px; flex: none; }
.ros-modo:hover { background: rgba(255,255,255,.72); color: var(--tinta); }
.ros-modo[aria-current="page"] {
  background: var(--placa); color: var(--tinta); font-weight: 600;
  box-shadow: 0 1px 2px rgba(10,10,10,.10);
}
/* Abaixo disto o nome sai e fica o desenho. A alternativa era a fileira
   empurrar o nome da tela para fora da barra — e saber ONDE se está vale
   mais que ler "Balcão" ao lado de um ícone de balcão. */
/* 1200 e não 900: no balcão de 1024 px a barra transbordava e cortava o
   saldo da gaveta e o «sair» de quem está no caixa — justamente o que a
   operadora precisa ver. O nome continua no `title` e no leitor de tela. */
@media (max-width: 1200px) {
  /* Sem o nome, a pastilha vira só o desenho: 19 px de ícone e 20 de
     recheio dão 39 de largura. A altura ficou certa e a LARGURA passou —
     alvo é retângulo, e o lado estreito é o que a mira erra. */
  .ros-modo { padding: 0 10px; min-width: var(--alvo-leitura); justify-content: center; }
  .ros-modo-rotulo { display: none; }
}

.ros-contexto {
  display: flex; align-items: center; gap: 10px;
  min-width: 0; overflow-x: auto; scrollbar-width: none;
  padding-bottom: 2px;
}
/* Chão de largura para quem TEM conteúdo. `min-width: 0` deixava a tira ser
   espremida até sumir, e o comentário logo acima promete o contrário —
   "nunca encolhe os controles: campo espremido é campo errado". Espremer
   até zero é a forma extrema disso: o controle não fica errado, fica
   invisível, e a tela deixa de dizer o que ela existe para dizer.
   `:not(:empty)` porque tira vazia não pode abrir buraco na barra. */
.ros-contexto:not(:empty) { min-width: 88px; }
/* Os 88 px de piso são para o MONITOR, onde sobra barra. A 700 px eles
   viravam um piso que empurrava a marca e o menu para fora — e a tira já
   corta o próprio conteúdo com reticências, então piso ali não protege
   nada. Mesmo motivo do `.ros-pracas` para estar depois, e não antes. */
@media (max-width: 700px) { .ros-contexto:not(:empty) { min-width: 0; } }
.ros-contexto::-webkit-scrollbar { display: none; }
.ros-contexto > * { flex: none; }
/* O controle que a tela publica continua sendo um alvo de toque: ele está
   na barra por economia de espaço, não porque virou decoração. 40 px é o
   piso frio do sistema — abaixo disso, botão não é botão, é armadilha. */
/* Altura de controle é do CONTEXTO, não do elemento: dentro da folha de
   leitura, 44 px; no caminho quente das telas de operação, quem manda é o
   `--alvo` de 64 px que a própria tela aplica. Um piso global aqui descia o
   alvo do garçom sem ninguém pedir. */
.folha input, .folha select, .folha textarea, .folha button {
  min-height: var(--alvo-leitura);
}
/* O que a tela publica na barra continua sendo alvo de toque de verdade.
   Eram 40 px — perto, e perto não conta: são os controles que a própria
   tela considerou importantes o bastante para ficarem sempre à vista. Cabem
   nos 56 px da barra com folga. */
.ros-contexto input, .ros-contexto select, .ros-contexto button {
  min-height: var(--alvo-leitura); font-size: 13px;
}

/* As praças: para onde o pedido foi, sempre à vista.
   Vizinha da fileira de modos e com o mesmo desenho de pastilha, porque a
   pergunta é a mesma — onde o pedido está agora. Diferente delas em uma
   coisa só, que é a que importa: esta carrega número. */
.ros-pracas {
  display: flex; align-items: center; gap: 2px; flex: none;
  margin-left: var(--esp-2); padding: 3px;
  border: 1px solid var(--filete); border-radius: 999px;
  background: var(--chao);
}
.ros-pracas[hidden] { display: none; }
/* No celular a fileira de praças encosta na anterior: cada pixel de margem
   é largura que o estado da operação perde.
   Depois da definição, e não junto das outras regras de 700 px lá em cima —
   mesma especificidade perde pela ordem do arquivo, e a regra escrita antes
   é regra que não acontece. */
@media (max-width: 700px) { .ros-pracas { margin-left: 0; } }
/* ── A espiada: venda e caixa a um toque ─────────────────────────── */
.ros-espiada {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  min-width: var(--alvo-leitura); height: var(--alvo-leitura); padding: 0 13px; margin-left: var(--esp-2);
  border: 1px solid var(--filete-forte); border-radius: 999px;
  background: var(--placa); color: var(--tinta);
  font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.ros-espiada[hidden] { display: none; }
.ros-espiada svg { width: 18px; height: 18px; color: var(--dinheiro); }
.ros-espiada[aria-expanded="true"] { border-color: var(--dinheiro); background: var(--dinheiro-fundo); }
.ros-espiada-valor { color: var(--dinheiro); font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  .ros-espiada { margin-left: 0; padding: 0 9px; }
  /* No celular, «Caixa» escrito tirava a largura do nome de quem está
     logado, que saía cortado. O ícone basta; o valor do dono fica. */
  .ros-espiada.sem-venda .ros-espiada-valor { display: none; }
}
.ros-espiada-painel {
  position: fixed; top: 64px; right: 16px; z-index: calc(var(--camada-menu) + 1);
  width: min(380px, calc(100vw - 24px)); max-height: calc(100vh - 80px); overflow-y: auto;
  padding: var(--esp-4); border-radius: var(--raio-painel);
  background: var(--placa); border: 1px solid var(--filete-forte);
  box-shadow: var(--sombra-flutua);
}
.ros-espiada-painel[hidden] { display: none; }
.ros-espiada-bloco + .ros-espiada-bloco { margin-top: var(--esp-3); padding-top: var(--esp-3);
  border-top: 1px dashed var(--filete-forte); }
.ros-espiada-bloco h3 { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--tinta-fraca); }
.ros-espiada-grande { font-size: 34px; font-weight: 600; line-height: 1.05; color: var(--dinheiro);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ros-espiada-nota { margin: 2px 0 8px; font-size: 13px; color: var(--tinta-fraca); }
.ros-espiada-linha { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0;
  font-size: 14px; color: var(--tinta-fraca); }
.ros-espiada-linha b { color: var(--tinta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ros-espiada-linha.forte span { color: var(--tinta); font-weight: 600; }
.ros-espiada-linha.forte b { color: var(--dinheiro); }
.ros-espiada-acoes { display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px; margin-top: var(--esp-4); }
.ros-espiada-acoes > :first-child { grid-column: 1 / -1; }
.ros-espiada-acoes a { white-space: nowrap; }
.ros-espiada-acoes a { text-decoration: none; }
.ros-praca {
  display: inline-flex; align-items: center; gap: 7px;
  height: var(--alvo-leitura); padding: 0 11px; border-radius: 999px;
  color: var(--tinta); text-decoration: none;
  font-size: 13px; font-weight: 500; white-space: nowrap;
  transition: background var(--rapido), color var(--rapido);
}
.ros-praca:hover { background: rgba(255,255,255,.72); }
.ros-praca svg { width: 19px; height: 19px; flex: none; }

/* Os dois números nunca se confundem, e não é só a cor que os separa: o de
   fazer é contorno, o de entregar é sólido. Quem não distingue verde de
   âmbar continua distinguindo cheio de vazio. */
.ros-praca-fazendo, .ros-praca-pronto {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px;
  font-weight: 600; font-size: 12px; font-variant-numeric: tabular-nums;
}
.ros-praca-fazendo {
  /* Tinta cheia: o cinza fraco dava 4,4:1 sobre o fundo da pastilha, abaixo
     do mínimo — e é o número que a casa lê de longe. */
  border: 1px solid var(--filete); color: var(--tinta);
}
.ros-praca-pronto { background: #171717; color: #fff; gap: 3px; }
/* O tique antes do número. Cor não basta: verde e cinza são o mesmo cinza
   para quem não distingue os dois, e "0 1" sem marca nenhuma é um enigma
   para qualquer um. O tique diz "feito" sem depender de ver cor. */
.ros-praca-pronto::before { content: "✓"; font-size: 11px; line-height: 1; }
.ros-praca-pronto[hidden] { display: none; }
.ros-praca-fazendo[hidden] { display: none; }

/* Fila vazia continua no lugar — some o peso, não o botão. Era o defeito
   que isto veio consertar: o controle sumia quando zerava, e ninguém
   aprendia que ele existia. */
.ros-praca.vazia .ros-praca-fazendo {
  color: var(--tinta-apagada); border-style: dashed;
}

/* O pedido mais antigo passou do que o balcão aguenta.
   `--atencao`, e não `--dinheiro`: o âmbar desta casa é do dinheiro e só
   dele, e tempo não é dinheiro aqui. `--atencao` é a outra cor — a mesma que
   a produção usa no bilhete que passou dos sete minutos e a entrega no cartão
   que demorou. Três lugares, um significado.

   E marca por CONTORNO, não trocando o fundo. Era `background:#fdf0e7`, cor
   literal: no tema escuro a pastilha ficava creme com a tinta clara da barra
   (`#b3bac6`) por cima — **1,75 : 1**, justamente na praça que está avisando
   que tem pedido atrasado. Literal é sempre a causa, porque literal não sabe
   que existe um segundo tema. */
.ros-praca.demorando {
  /* A TINTA normal, e o aviso no contorno e no número.
     `color: var(--atencao)` no texto inteiro dava 4,37 : 1 sobre o fundo da
     barra — abaixo dos 4,5 de AA por pouco, que é o pior lugar para ficar:
     passa despercebido e reprova. O nome da praça é o que se lê; o que
     avisa é a moldura. */
  /* v2: atraso de pedido é problema da cozinha, e o único tom de alarme
     da casa é o vermelho. O cinza de «atenção» sumia na barra. */
  box-shadow: inset 0 0 0 1px var(--perda);
}
.ros-praca.demorando .ros-praca-fazendo {
  border-color: var(--perda); color: var(--perda); font-weight: 600;
}

/* Abaixo de 900px o nome sai e ficam desenho e números, como nos modos —
   mas os NÚMEROS ficam, sempre: eles são a razão de a pastilha existir. */
@media (max-width: 1200px) {
  .ros-praca { padding: 0 8px; gap: 5px; min-width: var(--alvo-leitura);
               justify-content: center; }
  .ros-praca-rotulo { display: none; }
  .ros-marca > span { position: absolute; width: 1px; height: 1px; overflow: hidden;
                      clip-path: inset(50%); white-space: nowrap; }
}

.ros-quem {
  display: flex; flex-direction: column; gap: 1px;
  justify-content: center; min-height: var(--alvo-leitura);
  padding: 4px 11px; border-left: 1px solid #e5e5e5;
  color: #0a0a0a; text-decoration: none; line-height: 1.15;
}
.ros-quem strong { font-size: 13px; font-weight: 600; }
.ros-quem span {
  /* `#6f737d` e não `#8b8f99`: em 10 px, caixa alta e espaçado, o cinza
     antigo dava 3,24 : 1 sobre a barra. É o PAPEL de quem está no turno —
     quem confere se está logado como gerente ou como garçom lê exatamente
     esta linha. */
  color: #6b6b6b; font-size: 10px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}
.ros-quem:hover strong { color: #0a0a0a; }
/* A conta não some no celular: ela desce para o menu, com nome completo e uma
   ação de saída que não disputa largura com o estado da operação.
   E a regra mora AQUI, depois do bloco que define `.ros-quem`, não lá em cima
   junto das outras regras de 700 px. Escrita antes, ela tinha a mesma
   especificidade e perdia para a definição do componente pela ordem do
   arquivo: a intenção estava escrita, a media query casava, e a conta
   continuava aparecendo nos dois lugares. */
@media (max-width: 700px) {
  .ros-quem { display: none; }
}

/* ── O menu ────────────────────────────────────────────────────────── */

.ros-veu { position: fixed; inset: 56px 0 0; z-index: var(--camada-veu-menu); background: rgba(10,10,10,.4); }
.ros-veu[hidden] { display: none; }

.ros-menu {
  position: fixed; inset: 56px 0 auto 0; z-index: var(--camada-menu);
  max-height: calc(100vh - 56px); overflow-y: auto;
  padding: var(--esp-5) var(--esp-5) var(--esp-6);
  /* SUPERFÍCIE CHEIA, e não vidro. A barra de cima é translúcida COM
     desfoque: o que passa por trás vira massa de cor. O menu tinha a
     translucidez sem o desfoque — a "janela suja" que o comentário da
     barra descreve — e a 82% de branco sobre o chão claro ele quase não
     existia: o menu parecia solto na página, com o texto da tela de baixo
     aparecendo no meio das colunas. Ele cobre a tela inteira; cobrir pela
     metade não é profundidade, é sujeira. */
  background: var(--placa); border-bottom: 1px solid var(--filete);
  box-shadow: var(--sombra-flutua);
}
.ros-menu[hidden] { display: none; }

.ros-busca {
  /* Encostada na esquerda do MESMO container das colunas. Centralizada, ela
     era o único elemento do painel fora do eixo: o olho recomeçava a
     leitura em três lugares diferentes descendo a mesma tela. */
  position: sticky; top: 0; z-index: 1;
  width: 100%; max-width: 1180px; margin: 0 auto var(--esp-4); display: block;
  box-sizing: border-box;
  padding: 13px 15px; font: 400 15px/1.2 var(--fonte-ui);
  color: #0a0a0a; background: #fafafa;
  border: 1px solid #d4d4d4; border-radius: 8px;
}
.ros-busca::placeholder { color: #737373; }
.ros-busca:focus {
  border-color: #0a0a0a; background: #fff; outline: none;
  box-shadow: 0 0 0 3px rgba(10,10,10,.08);
}

/* A faixa de utilidades é OUTRA coisa que a lista de telas: aparência e
   operador de um lado, navegação do outro. Sem o filete e sem o vão, o
   «Trocar operador / sair» ficava a oito pixels de «GESTÃO» e as duas
   coisas liam como uma só. */
/* Aparência e conta moram no RODAPÉ do menu: são ajustes de vez em quando,
   e no topo empurravam as telas — que é o que se procura aqui — para baixo. */
.ros-utilidades-menu {
  max-width: 1180px; margin: var(--esp-5) auto 0;
  padding-top: var(--esp-4); border-top: 1px solid var(--filete);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--esp-4); flex-wrap: wrap;
}
.ros-temas, .ros-conta-menu { display: flex; align-items: center; gap: 6px; }
.ros-utilidade-rotulo {
  margin-right: 3px; color: var(--tinta-fraca); font-size: 12px;
  font-weight: 600;
}
.ros-tema, .ros-sair-menu {
  min-height: var(--alvo-leitura); padding: 0 11px; border: 1px solid var(--filete);
  border-radius: 999px; background: var(--placa); color: var(--tinta-fraca);
  font: 600 12px/1 var(--fonte-ui); text-decoration: none;
}
.ros-tema[aria-pressed="true"] {
  border-color: var(--acao-abrir); color: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--acao-abrir);
}
.ros-conta-menu[hidden] { display: none; }
.ros-conta-identidade { display: flex; flex-direction: column; line-height: 1.15; }
.ros-conta-identidade strong { font-size: 13px; }
.ros-conta-identidade small { color: var(--tinta-fraca); font-size: 11px; }
.ros-sair-menu { display: inline-flex; align-items: center; }
@media (max-width: 620px) {
  .ros-utilidades-menu { align-items: stretch; }
  .ros-temas { width: 100%; flex-wrap: wrap; }
  .ros-utilidade-rotulo { position: absolute; width: 1px; overflow: hidden; clip-path: inset(50%); }
  .ros-conta-menu { width: 100%; justify-content: space-between; padding-top: 10px;
    border-top: 1px solid var(--filete); }
}

.ros-colunas {
  display: grid; gap: var(--esp-6); align-items: start;
  grid-template-columns: 210px 1fr;
  max-width: 1180px; margin: 0 auto;
}
.ros-atalhos { display: grid; gap: var(--esp-5); padding-right: var(--esp-4);
  border-right: 1px solid var(--filete); }
.ros-atalhos[hidden] { display: none; }
/* Procurando, a coluna de atalhos some — e a grade precisa ocupar o lugar
   dela. Sem isto o resultado da busca começava 230 px à direita, num vão
   vazio, e parecia que a tela tinha ficado torta. */
.ros-colunas:has(.ros-atalhos[hidden]) { grid-template-columns: 1fr; }
/* Grupos em COLUNAS corridas, como um índice: cada grupo desce logo abaixo
   do anterior. Na grade de linhas, o grupo curto deixava um buraco do
   tamanho do grupo longo ao lado, e o menu parecia ter metade vazia. */
.ros-grade { column-width: 230px; column-gap: var(--esp-6); }
.ros-grupo { break-inside: avoid; display: inline-block; width: 100%; margin-bottom: var(--esp-5); }
.ros-grupo[hidden] { display: none; }
/* O nome do grupo em frase, na cor de destaque: é título de seção, e caixa
   alta espaçada de 11 px era a voz mais fraca do menu justo no que organiza
   tudo. */
.ros-grupo-nome {
  margin: 0 0 var(--esp-1); padding: 0 8px;
  color: var(--medida); font-size: 15px; font-weight: 600;
  letter-spacing: 0; text-transform: none;
}
/* #8b8f99 dava 3,24:1 em 12 px — abaixo dos 4,5:1 que texto pequeno exige.
   Ela é a frase que ensina o menu a funcionar ("toque na estrela"), então é
   exatamente a que alguém lê UMA vez, com pressa, e não pode custar
   esforço. */
.ros-nada { margin: 0; color: #6b6b6b; font-size: 12px; line-height: 1.4; }
.ros-sem-resultados {
  max-width: 1180px; margin: var(--esp-4) auto 0;
  padding: var(--esp-5); color: var(--tinta-fraca);
  border: 1px dashed var(--filete-forte); border-radius: 8px;
  text-align: center; font-size: 14px;
}
.ros-sem-resultados[hidden] { display: none; }

/* Resultados da busca (Ctrl+K): grupos em colunas, cada linha com o nome e,
   embaixo, de onde vem — «Cancelamentos de hoje», «mesa 12 · aberta». O
   `[hidden]` precisa de regra própria: `display: grid` vence o atributo. */
.ros-colunas[hidden], .ros-achados[hidden] { display: none; }
.ros-achados {
  max-width: 1180px; margin: var(--esp-4) auto 0;
  display: grid; gap: var(--esp-4) var(--esp-6);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: start;
}
.ros-achados .ros-grupo { margin-bottom: 0; }
.ros-achado { padding: 8px 9px; }
.ros-achado-texto { display: grid; min-width: 0; }
.ros-achado-detalhe {
  color: var(--tinta-fraca); font-size: 12px; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ros-achado:focus-visible { outline: 2px solid var(--tinta); outline-offset: -2px; }
@media (pointer: coarse) {
  .ros-achado { min-height: var(--alvo-leitura); }
}

/* A estrela fica na MESMA coluna em todas as linhas. Colada no nome ela
   acompanha o comprimento de cada rótulo e a borda direita vira serrote —
   e a estrela de «Margem do cardápio», que quebra em duas linhas, ia parar
   no meio do vão. Uma coluna reta se varre com o olho; um serrote, não. */
.ros-linha { display: flex; align-items: center; gap: 2px; }
.ros-linha[hidden] { display: none; }
.ros-item {
  flex: 1; min-width: 0;
  display: grid; grid-template-columns: 18px 1fr;
  align-items: center; gap: 10px;
  padding: 8px 9px; border-radius: 6px;
  color: #333333; text-decoration: none; font-size: 14px;
  transition: background 120ms, color 120ms;
}
/* Nas colunas o nome basta: o ícone em cada linha era uma segunda coluna
   de desenhos competindo com a leitura. Ele fica nos Favoritos e Recentes,
   que são poucos e se reconhecem pelo desenho. */
.ros-grade .ros-item { grid-template-columns: 1fr; padding: 6px 8px; color: var(--tinta); }
.ros-grade .ros-item svg { display: none; }
.ros-item svg { width: 18px; height: 18px; opacity: .8; }
.ros-item:hover { background: #f5f5f5; color: #0a0a0a; }
.ros-item[aria-current="page"] { color: #0a0a0a; font-weight: 600; }
.ros-item[aria-current="page"] svg { color: #0a0a0a; opacity: 1; }
.ros-estrela {
  /* A estrela é o alvo mais fácil de errar do menu: ela fica colada no nome
     da tela, e errar significa NAVEGAR quando se queria favoritar. 44 px de
     lado, como o resto. */
  width: var(--alvo-leitura); min-height: var(--alvo-leitura); padding: 0;
  background: transparent; border: 0; border-radius: 4px;
  /* A estrela apagada era #b9b5aa: 2,05:1 no branco. Ela não é enfeite — é
     o controle que marca favorito, e quem não a enxerga não descobre que o
     menu tem favoritos.
     Escurecê-la não confunde com a marcada, e não porque a cor mude o
     bastante — as duas ficam perto de 5,3:1 — mas porque o ESTADO nunca
     esteve na cor: o desenho troca, `☆` vira `★`. O âmbar reforça o que o
     glifo já diz, que é a ordem certa das duas coisas. */
  color: #6b6b6b; font-size: 15px; cursor: pointer;
}
.ros-linha button.ros-estrela:hover,
.ros-linha button.ros-estrela:focus-visible {
  color: #0a0a0a; background: #f5f5f5; transform: none;
}
.ros-estrela[aria-pressed="true"] { color: #0a0a0a; }
/* Com mouse, a lista fica densa como um índice: a estrela encolhe e só
   aparece na linha apontada (ou se já é favorita). No toque continua com
   44 px e sempre visível — lá o dedo não tem «passar por cima». */
@media (pointer: fine) {
  .ros-grade .ros-estrela { width: 28px; min-height: 28px; opacity: 0; }
  .ros-grade .ros-linha:hover .ros-estrela, .ros-grade .ros-estrela:focus-visible,
  .ros-grade .ros-estrela[aria-pressed="true"] { opacity: 1; }
  /* Densidade da gestão (fim do arquivo): com mouse, campo, botão e aba de
     tela de gestão medem 36 px — `--ds-alvo-compacto`. No toque o piso de
     44 px continua, e PDV, balcão e garçom não têm a classe `.gestao`. */
  .gestao input, .gestao select { min-height: 36px; padding-block: 6px; }
  .gestao button, .gestao a.b-quieto, .gestao a.b-padrao { min-height: 36px; }
  .gestao .abas > button { min-height: 36px; }
  .gestao details.explica-bloco > summary { min-height: 36px; }
}

body.ros-menu-aberto { overflow: hidden; }

@media (max-width: 860px) {
  .ros-colunas { grid-template-columns: 1fr; }
  .ros-atual { display: none; }
}
@media print { .ros-topo, .ros-menu, .ros-veu { display: none; } }
@media print {
  .placa, .abas, .ros-contexto, .rolagem, .categorias, .formula,
  .folha :is(div, section):has(> .tabela) { background-image: none; }
}

/* ── O cabeçalho da página ─────────────────────────────────────────── */

/* A barra já diz em que tela você está. Repetir o nome logo abaixo dela era
   o que fazia a tela ter dois cabeçalhos empilhados — 100 px gastos para
   dizer duas vezes a mesma coisa, no lugar onde o produto deveria estar.

   Some do OLHO, não da árvore. Isto era `display: none`, e `display: none`
   apaga o elemento para o leitor de tela também: três telas de operação
   ficaram sem `h1` nenhum, e quem navega por título perdia a âncora que diz
   em que tela está. Custa zero pixel e devolve a resposta a "onde eu
   estou?". */
body > header > h1 {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

body > header {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; min-height: 0;
  background: var(--placa);
  border-bottom: 1px solid var(--filete);
}
/* Cabeçalho que sobrou só com o `h1` não ocupa espaço — e continua existindo
   para quem lê por título. `display: none` aqui levava o `h1` junto, que é o
   mesmo defeito da regra de cima um nível acima. */
body > header:not(:has(> *:not(h1))) {
  padding: 0; min-height: 0; border-bottom: 0; background: none;
}

/* ── Botões ────────────────────────────────────────────────────────── */

button {
  font: inherit; cursor: pointer;
  transition: background var(--rapido), border-color var(--rapido),
              transform var(--rapido);
}
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .38; cursor: default; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Fila de decisão sobre lançamento atrasado. Cada item é um bloco com as
   três saídas à vista: quem está com a mesa presa precisa ver a alternativa
   inteira de uma vez, não descobrir a terceira depois de recusar as duas. */
.linha-decisao {
  border: 1px solid var(--filete);
  border-radius: 10px;
  padding: var(--esp-3);
}
.linha-decisao + .linha-decisao { margin-top: var(--esp-3); }
.linha-decisao > * + * { margin-top: var(--esp-2); }
.linha-decisao .acoes { flex-wrap: wrap; }
/* Escolhida fica marcada de verdade, e não só por cor: quem não distingue
   as duas precisa ver a diferença na borda. */
.linha-decisao .acoes button[aria-pressed="true"] {
  border-color: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--tinta);
  font-weight: 600;
}


/* ══ FUNDAÇÃO ═══════════════════════════════════════════════════════════
 *
 * O que vem daqui para baixo é a biblioteca compartilhada: material,
 * hierarquia de botão, estados vazios, chips, sheets e a barra inferior.
 * Existe porque a casa tinha ~2.250 linhas de CSS espalhadas dentro das 35
 * telas, e uma decisão visual só valia onde alguém lembrou de repeti-la.
 *
 * Regra da camada, e ela é a única que não se negocia:
 *
 *   CONTEÚDO É SÓLIDO. VIDRO É SÓ O QUE FLUTUA.
 *
 * Produto, pedido, mesa, tabela, valor e ficha ficam em superfície cheia.
 * Barra, menu, sheet, popover e ação flutuante são a camada de vidro. O
 * inverso — cada cartão translúcido — é bonito em captura de tela e
 * ilegível no salão, porque o texto passa a depender do que está atrás.
 */

/* ── Material: vidro ────────────────────────────────────────────────── */

.vidro {
  background: var(--vidro-claro);
  -webkit-backdrop-filter: blur(var(--vidro-desfoque)) saturate(var(--vidro-saturacao));
  backdrop-filter: blur(var(--vidro-desfoque)) saturate(var(--vidro-saturacao));
  border: 1px solid var(--vidro-borda);
  box-shadow: var(--vidro-sombra);
}
.vidro--forte { background: var(--vidro-claro-forte); }

/* Navegador sem desfoque não ganha "vidro sem desfoque": ganha superfície
   cheia. Camada translúcida sem o blur é uma janela suja — o texto de baixo
   atravessa e a barra deixa de ser legível justamente onde ela importa. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vidro, .vidro--forte { background: var(--vidro-sem); }
}

/* Quem pediu menos transparência ao sistema operacional está dizendo que a
   translucidez atrapalha a leitura dela. Não é preferência estética. */
@media (prefers-reduced-transparency: reduce) {
  .vidro, .vidro--forte {
    background: var(--vidro-sem);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: var(--filete-forte);
  }
}

/* ── Tipografia da página ───────────────────────────────────────────── */


/* ── Botão: quatro pesos, e cada um diz uma coisa ───────────────────── */
/*
 * principal — a ÚNICA ação principal daquele contexto. Cheia de cor.
 * padrão    — ação comum de barra e sheet. Superfície, não cor.
 * quieto    — ação secundária. Só texto, sem caixa, até o hover.
 * perigo    — ação que destrói ou tira dinheiro. Sempre com confirmação.
 *
 * O peso é do BOTÃO, não do alvo: `quieto` continua com 44 px de altura.
 * Encolher o alvo junto com o peso visual é como uma ação secundária vira
 * inalcançável no celular.
 */
.b-principal, .b-padrao, .b-quieto, .b-perigo {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--esp-2);
  min-height: var(--alvo-leitura); padding: 0 18px;
  border-radius: var(--raio-campo);
  font: 500 var(--t-base)/1 var(--fonte-ui);
  letter-spacing: 0; cursor: pointer;
  transition: background var(--rapido), border-color var(--rapido),
              color var(--rapido);
}
/* Caminho quente pede 64 px: é o botão que a mão aperta cem vezes por
   noite, em pé, com o aparelho numa mão só. */
.b-quente { min-height: var(--alvo); font-size: var(--t-cartao); padding: 0 24px; }

.b-principal {
  color: var(--tinta-sobre-cor); background: var(--acao-abrir);
  border: 1px solid var(--acao-abrir);
}
.b-principal:hover:not(:disabled) {
  background: var(--acao-abrir-alta); border-color: var(--acao-abrir-alta);
}
/* Concluir é VERDE, e só concluir: receber, enviar, confirmar, entregar.
   Abrir, procurar, atualizar e cadastrar são azuis — são reversíveis. */
.b-principal.b-conclui {
  background: var(--acao); border-color: var(--acao);
}
.b-principal.b-conclui:hover:not(:disabled) {
  background: var(--acao-alta); border-color: var(--acao-alta);
}
.b-padrao {
  color: var(--tinta); background: var(--placa);
  border: 1px solid var(--filete);
}
.b-padrao:hover:not(:disabled) {
  background: var(--chao); border-color: var(--filete-forte);
}
.b-quieto {
  color: var(--tinta-fraca); background: transparent; border: 1px solid transparent;
}
.b-quieto:hover:not(:disabled) { color: var(--tinta); background: var(--chao); }
.b-perigo {
  color: var(--tinta-sobre-cor); background: var(--perda);
  border: 1px solid var(--perda);
}
.b-perigo:hover:not(:disabled) { filter: brightness(.92); }

.b-padrao:disabled, .b-quieto:disabled, .b-perigo:disabled {
  opacity: .4; cursor: default;
}
/* O principal desligado fica CINZA, e não translúcido.
   `opacity` sobre verde continua verde: no balcão, «Receber» com o total
   zerado ficava verde-claro, a operadora tocava e nada acontecia. A cor é a
   promessa, e promessa desbotada continua sendo promessa. Isto morava na
   tela do balcão; vale para toda ação que conclui e nasce desligada. */
.b-principal:disabled, .b-principal:disabled:hover,
.b-principal[disabled], .b-principal[disabled]:hover {
  background: var(--chao); border-color: var(--filete);
  color: var(--tinta-fraca); box-shadow: none;
  opacity: 1; cursor: not-allowed;
}

/* Carregando NÃO troca o texto nem encolhe o botão.
   Botão que vira "Enviando…" muda de largura no meio do toque, e o dedo que
   já estava mirando cai fora dele — ou, pior, cai no botão vizinho. A
   largura fica travada e o estado aparece por opacidade e cursor. */
.b-principal[data-carregando="1"], .b-padrao[data-carregando="1"],
.b-quieto[data-carregando="1"], .b-perigo[data-carregando="1"] {
  cursor: progress; opacity: .72; pointer-events: none;
}
.b-principal[data-carregando="1"]::after, .b-padrao[data-carregando="1"]::after,
.b-quieto[data-carregando="1"]::after, .b-perigo[data-carregando="1"]::after {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: girando 700ms linear infinite;
}
@keyframes girando { to { transform: rotate(360deg); } }

/* ── Chip de estado ─────────────────────────────────────────────────── */
/* Estado NUNCA é só cor: o chip carrega texto sempre. Quem não distingue
   verde de âmbar precisa ler "Pago" e "Aguardando" — e quem enxerga as duas
   lê mais rápido com a palavra do que com a cor. */
/* Sem `min-height`, e não por descuido: nesta casa `min-height` é promessa
   de ALVO — o gate de toque cobra 44 px de tudo que declara um. O chip não
   é para tocar, é para ler; quem dá corpo a ele é o respiro interno, como
   no `.selo`, que é a mesma família. */
/* `.estado` é o MESMO componente, e o nome que as telas já escrevem.
   Seis telas definiam a própria versão — quatro delas praticamente iguais,
   copiadas uma da outra. Renomear o markup de dezoito telas para ganhar um
   nome mais bonito seria trabalho sem retorno; adotar o nome que já está
   escrito adota o componente de verdade. As variantes de domínio
   (`.estado.vigente`, `.estado.fechada`) continuam morando na tela — elas
   são vocabulário do assunto, não do sistema. */
.estado,
.chip-estado {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px;
  border-radius: var(--raio-campo);
  font-size: var(--t-meta); font-weight: 500;
  border: 1px solid transparent;
  color: var(--tinta); background: var(--chao);
}
.estado::before,
.chip-estado::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: none;
}
/* v2: o estado se diz por PESO, não por matiz — concluído é o selo cheio,
   atenção é o de contorno, perda é o único com cor. A palavra continua
   dizendo o estado; o peso só ajuda a achar. */
.estado--conclui, .chip-estado--conclui { color: var(--tinta-sobre-cor); background: var(--acao); border-color: var(--acao); }
.estado--atencao, .chip-estado--atencao { color: var(--tinta); background: var(--placa); border-color: var(--filete-forte); }
.estado--perda, .chip-estado--perda { color: var(--perda); background: color-mix(in srgb, var(--perda) 8%, transparent); border-color: transparent; }
.estado--medida, .chip-estado--medida { color: var(--tinta); }

/* ── Estado vazio que serve para alguma coisa ───────────────────────── */
/* "Nada aqui" no meio de uma área de 800 px é tela quebrada, não estado
   vazio. Um vazio útil responde quatro perguntas: o que aparece aqui, por
   que ainda não apareceu, qual é o próximo passo e de quem ele é. */
/* `.vazio` é o nome que vinte e seis telas já escrevem, e `.vazio-util` era
   o mesmo componente com nome melhor e zero uso. Quem manda é o nome
   escrito: a forma rica passa a valer para `.vazio` também, e a diferença
   deixa de ser a CLASSE — passa a ser o CONTEÚDO. Vazio com uma frase
   continua sendo uma frase; vazio com `<h3>`, `<p>` e `.quem` ganha a
   composição inteira, na mesma classe, sem tocar em markup nenhum. */
.vazio-util,
.vazio:has(h3) {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--esp-3);
  padding: var(--esp-6) var(--esp-4);
  text-align: center; color: var(--tinta-fraca);
}
.vazio-util h3, .vazio h3 {
  margin: 0; font-size: var(--t-cartao); font-weight: 600; color: var(--tinta);
}
.vazio-util p, .vazio p { margin: 0; max-width: 46ch; font-size: var(--t-base); }
.vazio-util .quem, .vazio .quem {
  font-size: var(--t-meta); color: var(--tinta-apagada);
}
/* O próximo passo é uma AÇÃO, e ação no vazio é o ponto inteiro dele: sem
   botão, o vazio informa e deixa a pessoa procurar sozinha onde se faz. */
.vazio-util .b-principal, .vazio .b-principal,
.vazio-util .b-padrao, .vazio .b-padrao { margin-top: var(--esp-1); }

/* ── Dobra: o formulário que aparece quando é pedido ─────────────────── */
/*
 * Em Compras, «Novo fornecedor» ocupava a primeira dobra da tela — quatro
 * campos e um botão — e a fila de compras, que é o que se olha todo dia,
 * ficava embaixo de tudo. A tela respondia uma pergunta que quase ninguém
 * estava fazendo.
 *
 * `<details>` e não um acordeão escrito à mão: o navegador já sabe abrir,
 * fechar, anunciar o estado ao leitor de tela e responder ao teclado — e o
 * que a casa escrever à mão vai saber fazer menos disso.
 */
.dobra { margin: 0; }
.dobra > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: var(--esp-2);
  min-height: var(--alvo-leitura); padding: 0 14px;
  border: 1px solid var(--filete-forte); border-radius: var(--raio-campo);
  background: var(--placa); color: var(--tinta-fraca);
  font-size: var(--t-base); font-weight: 600;
}
.dobra > summary::-webkit-details-marker { display: none; }
.dobra > summary::before {
  content: "›"; font-size: 18px; line-height: 1;
  transition: transform var(--rapido);
}
.dobra[open] > summary::before { transform: rotate(90deg); }
.dobra > summary:hover { background: var(--placa-alta); color: var(--tinta); }
.dobra[open] > summary { margin-bottom: var(--esp-3); }

/* ── Lista e detalhe, lado a lado ───────────────────────────────────── */
/*
 * A lista à esquerda, o que está aberto à direita — e a lista continua
 * visível o tempo todo.
 *
 * Empilhado, abrir um item empurra a lista para cima da dobra: quem
 * comparou dois clientes rolava para achar o primeiro de novo, e perdia a
 * posição na lista a cada troca. Lado a lado, trocar de item é um toque, e
 * a lista não se mexe.
 *
 * Sem detalhe aberto a lista ocupa a largura inteira — uma coluna vazia de
 * 420 px esperando é a tela dizendo que falta alguma coisa.
 */
/* `minmax(0, 1fr)` já na base, e não só quando há detalhe.
   Sem template, a coluna do grid é `auto` — e coluna `auto` cresce até o
   `max-content` do conteúdo. Em `/clientes` a 320 px isso dava uma coluna de
   404,8 px: a placa ficava mais larga que o aparelho, o `overflow-x` dela
   nunca chegava a rolar porque a caixa não estava restrita, e a PÁGINA é que
   rolava de lado. Rolagem lateral de página tira o cabeçalho do campo de
   visão — é o critério de aceite que esta reforma escreveu para si mesma. */
.lista-detalhe {
  display: grid; gap: var(--esp-4); align-items: start;
  grid-template-columns: minmax(0, 1fr);
}
.lista-detalhe.tem-detalhe {
  grid-template-columns: minmax(0, 1fr) minmax(0, 430px);
}
/* O detalhe acompanha a rolagem: numa ficha comprida, o alto dela — que é
   quem diz de QUEM é a ficha — sairia da tela junto com a lista. */
.lista-detalhe > .detalhe { position: sticky; top: calc(56px + var(--esp-3)); }
@media (max-width: 900px) {
  .lista-detalhe.tem-detalhe { grid-template-columns: minmax(0, 1fr); }
  /* Empilhado, o detalhe vem PRIMEIRO: ele é a resposta ao toque que a
     pessoa acabou de dar, e quem toca num nome quer ver o nome, não rolar
     atrás dele. */
  .lista-detalhe > .detalhe { position: static; order: -1; }
}

/* A linha da lista que está aberta fica marcada — e não só por cor: a
   barra à esquerda diz onde o olho estava sem depender de distinguir
   tons. */
.tabela tr.aberta > td:first-child { box-shadow: inset 3px 0 0 var(--medida); }
.tabela tr.aberta > td { background: var(--placa-alta); }

/* ── Barra de ação fixa ─────────────────────────────────────────────── */
/* A ação que fecha o fluxo não pode depender de rolagem: "Receber" e
   "Finalizar" ficam colados no fim da área, sobre vidro, sempre à mão. */
.acoes-fixas {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; gap: var(--esp-2); align-items: center;
  padding: var(--esp-3);
  border-top: 1px solid var(--filete);
}
.acoes-fixas > .principal, .acoes-fixas > .b-principal { flex: 1; }

/* ── Métrica ────────────────────────────────────────────────────────── */
/* Terceira vez que o mesmo componente aparece com dois nomes, e a terceira
   vez que o nome VIVO ganha. `.metrica > .rot + .n` era o vocabulário do
   estudo; `.placa > .olho + .visor` é o que quinze telas escrevem. Em vez de
   trocar quinze telas para ganhar nomes mais bonitos, `.metrica` passa a
   entender os dois — quem escrever qualquer um dos dois recebe o componente,
   e a folha para de ter duas verdades sobre a mesma coisa. */
.metrica { display: flex; flex-direction: column; gap: 2px; }
.metrica .rot, .metrica .olho {
  font-size: var(--t-legenda); font-weight: 500; color: var(--tinta-fraca);
}
.metrica .n, .metrica .visor {
  font-size: var(--t-visor); font-weight: 600; letter-spacing: -.025em;
  line-height: 1.15;
}
.metrica--dinheiro .n, .metrica--dinheiro .visor { color: var(--dinheiro); }
.metrica--medida .n, .metrica--medida .visor { color: var(--medida); }
/* Número que é perda (venda sem extrato, diferença que sobrou): vermelho, e
   a nota embaixo diz por quê. Existia na conciliação sem regra nenhuma, e o
   número saía preto como qualquer outro. */
.metrica--perda .n, .metrica--perda .visor { color: var(--perda); }
.metrica .nota-metrica, .metrica .nota { font-size: var(--t-meta); color: var(--tinta-apagada); }
/* «Não medido» no lugar do número: é frase, não valor. No corpo do número
   ela virava um bloco âmbar enorme, que lia como o maior dado da faixa. */
.metrica .n.nao-sei {
  font-size: var(--t-base); font-weight: 500; letter-spacing: .01em;
  line-height: 1.3; align-self: flex-start; margin: var(--esp-1) 0; color: var(--tinta-fraca);
}

/* ── Erro de formulário ───────────────────────────────────────────────
   Embaixo do campo, em texto, com a borda do campo marcada — a cor sozinha
   não diz nada a quem não a distingue, e o texto diz como corrigir. */
[aria-invalid="true"] {
  border-color: var(--perda) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--perda) 14%, transparent) !important;
}
.erro-campo {
  margin: 4px 0 0 !important; color: var(--perda);
  font-size: var(--t-legenda); font-weight: 500; line-height: 1.4;
}
.erro-form {
  margin: var(--esp-3) 0 0; padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--perda) 35%, transparent);
  border-left-width: 3px; border-radius: var(--raio-pequeno);
  background: color-mix(in srgb, var(--perda) 6%, var(--placa));
  color: var(--tinta); font-size: var(--t-base); line-height: 1.45;
}
/* O botão que envia o formulário é o principal dele. Era o mesmo botão de
   contorno de «Limpar» e «Ver»: num formulário de seis campos, a pessoa
   procurava onde terminar. */
.folha form > button:last-child:not([type="button"]):not([class]),
.folha form .acoes > button:last-child:not([type="button"]):not([class]) {
  color: var(--placa); background: var(--tinta); border-color: var(--tinta);
}
.folha form > button:last-child:not([type="button"]):not([class]):hover:not(:disabled),
.folha form .acoes > button:last-child:not([type="button"]):not([class]):hover:not(:disabled) {
  background: var(--acao-abrir-alta); border-color: var(--acao-abrir-alta);
}

/* ── Sem acesso ─────────────────────────────────────────────────────── */
.sem-acesso { max-width: 640px; }
.sem-acesso p { color: var(--tinta-fraca); }
.sem-acesso a { text-decoration: none; }

/* ── Recorte: busca, filtros e quantos sobraram ─────────────────────── */
.recorte-conta {
  display: flex; align-items: center; gap: var(--esp-2);
  margin: 0 0 0 auto; align-self: flex-end; min-height: var(--alvo-leitura);
  color: var(--tinta-fraca); font-size: var(--t-legenda);
  font-variant-numeric: tabular-nums;
}
.recorte-conta .b-quieto { padding: 0 10px; }
/* Botão que É um número do resumo: o total leva às linhas que o explicam. */
.metrica--botao {
  font: inherit; text-align: left; color: inherit; cursor: pointer;
  transition: background var(--rapido);
}
.metrica--botao:hover { background: var(--placa-alta) !important; }
.metrica--botao[aria-pressed="true"] { background: var(--placa-alta) !important;
  box-shadow: inset 0 -2px 0 var(--medida), -1px 0 0 var(--filete), 0 -1px 0 var(--filete) !important; }
.metrica--botao .acao-metrica { font-size: var(--t-meta); color: var(--medida); font-weight: 600; }

/* ── Faixa de indicadores ────────────────────────────────────────────
   Uma fileira de números que se leem JUNTOS (venda, recebível, liquidação)
   é uma régua só, dividida por filetes — e não seis cartões. Cartão por
   número dava a cada um o mesmo peso de um assunto inteiro, e dentro de uma
   placa virava cartão dentro de cartão.

   O filete entre células é sombra de 1 px para a esquerda e para cima,
   cortada pelo `overflow` da faixa: a célula da borda esquerda e a da
   primeira fila perdem o risco sozinhas, inclusive quando a fila quebra em
   1024 px. Sem uma linha de JavaScript nem `:nth-child` por largura. */
.grade-resumo,
.placa .grade:has(> .placa),
.placa .grade:has(> .metrica) {
  display: grid; gap: 0; margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border: 1px solid var(--filete); border-radius: var(--raio-pequeno);
  overflow: hidden; background: var(--placa);
}
.folha > .grade-resumo, .folha > section > .grade-resumo { margin: 0; }
.grade-resumo > :is(.metrica, .placa),
.placa .grade > .placa,
.placa .grade > .metrica {
  margin: 0; padding: var(--esp-3) var(--esp-4);
  border: 0; border-radius: 0; background: transparent;
  box-shadow: -1px 0 0 var(--filete), 0 -1px 0 var(--filete);
}
.placa .grade > .placa::before, .grade-resumo > .placa::before { display: none; }
:is(.grade-resumo, .placa .grade) > :is(.placa, .metrica) > * + * { margin-top: var(--esp-1); }
:is(.grade-resumo, .placa .grade) .visor { font-size: var(--t-visor); }

/* ── Sheet ──────────────────────────────────────────────────────────── */
/* Formulário que aparece quando é pedido, e não antes. "Novo fornecedor"
   ocupando a primeira dobra de Compras faz a tela responder uma pergunta
   que quase ninguém está fazendo — a de todo dia é acompanhar o que já foi
   comprado. */
.sheet-veu {
  position: fixed; inset: 0; z-index: var(--camada-modal);
  background: rgba(10, 10, 10, .32);
  display: flex; justify-content: flex-end;
}
.sheet {
  width: min(520px, 100%); height: 100%;
  display: flex; flex-direction: column;
  border-radius: var(--raio-janela) 0 0 var(--raio-janela);
  background: var(--vidro-claro-forte);
  border-left: 1px solid var(--filete-forte);
  box-shadow: var(--sombra-flutua);
}
.sheet > header {
  display: flex; align-items: center; gap: var(--esp-3);
  padding: var(--esp-4); border-bottom: 1px solid var(--filete);
}
.sheet > .corpo { flex: 1; overflow-y: auto; padding: var(--esp-4); }
/* Dentro da sheet o formulário é de UMA coluna.
   A `.grade` da casa é de leitura — 232 px de coluna, feita para a largura da
   folha. Num painel de 520 px ela dá duas colunas de 237, os rótulos quebram
   em duas linhas e o par rótulo/campo deixa de ler como par. Painel lateral é
   uma pergunta de cada vez. */
.sheet .grade, .sheet .grade--dupla { grid-template-columns: 1fr; }
/* E o campo nunca é mais largo que o painel: o `max-width: 320px` que a folha
   dá ao `select` só vale dentro de `.folha`, e um «1.01 · Recebíveis de
   clientes» saía pela borda direita da sheet. */
.sheet :is(input, select, textarea) { width: 100%; max-width: 100%; }
/* Rótulo cola no campo de baixo, e afasta do campo de cima: sem isto a
   gaveta virava uma pilha de caixas em que não se sabia de quem era o
   rótulo. */
.sheet .corpo form > * + * { margin-top: var(--esp-2); }
.sheet .corpo form > label, .sheet .corpo form > .campo, .sheet .corpo form > div { margin-top: var(--esp-4); }
.sheet .corpo form > label + * { margin-top: 0; }
.sheet .corpo form > button:last-child { margin-top: var(--esp-5); }
/* Caixa de marcar não é campo de texto: esticada a 100 % ela virava um
   quadrado de 300 px dentro da gaveta. */
.sheet input:is([type="checkbox"], [type="radio"]) {
  width: 20px; height: 20px; min-height: 0; padding: 0; flex: none;
}
.sheet > .acoes-fixas { background: var(--vidro-claro-forte); }
/* ── Diálogo: a decisão que não pode ser tomada distraído ────────────────
 *
 * A quarta camada do desenho, e a única que NÃO é vidro: pagamento,
 * cancelamento, fechamento de caixa e exclusão pedem concentração, não
 * profundidade. Translucidez aqui deixaria o que está atrás competindo com a
 * decisão que a pessoa está tomando — e é dinheiro do outro lado.
 *
 * Balcão, Garçom e PDV tinham cada um o seu, com TRÊS véus diferentes
 * (`#000b`, `#1b1d2266`, `#000a`), três raios (18, `--raio`, 16) e três
 * bordas. Ninguém escolheu que fossem diferentes; elas ficaram diferentes.
 */
.cortina {
  position: fixed; inset: 0; z-index: var(--camada-modal);
  display: flex; align-items: center; justify-content: center;
  padding: var(--esp-4);
  background: rgba(10, 10, 10, .6);
}
.dialogo {
  width: 100%; max-width: 440px;
  padding: var(--esp-5);
  background: var(--placa);
  border: 1px solid var(--filete-forte);
  border-radius: var(--raio-janela);
  box-shadow: var(--sombra-flutua);
}
.dialogo > :is(h2, h3) { margin: 0 0 2px; font-size: var(--t-secao); }
.dialogo > p.nota { margin: 0 0 var(--esp-4); }
/* A fileira que fecha o diálogo: duas colunas iguais, porque as duas saídas
   pesam o mesmo até a pessoa escolher. `so-um` para o diálogo que só avisa. */
.dialogo .fim {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-2); margin-top: var(--esp-4);
}
.dialogo .fim.so-um { grid-template-columns: minmax(0, 1fr); }
.dialogo .fim button { min-height: var(--alvo); font-size: 16px; font-weight: 600; }

/* No celular a sheet sobe de baixo: a mão alcança o rodapé, não a lateral. */
@media (max-width: 700px) {
  .sheet-veu { align-items: flex-end; }
  .sheet {
    width: 100%; height: min(92vh, 100%);
    border-radius: var(--raio-janela) var(--raio-janela) 0 0;
    border-left: 0; border-top: 1px solid var(--filete-forte);
  }
}

/* Tabela de operação: tabela no computador, cartões rotulados no telefone.
   A classe é aplicada por `ativarTabelasMoveis`, que copia os cabeçalhos
   reais para cada célula; portanto a versão móvel nunca inventa rótulos. */
@media (max-width: 700px) {
  .tabela--movel { display: block; width: 100%; border: 0; }
  .tabela--movel :is(thead, tbody) { display: block; }
  .tabela--movel thead, .tabela--movel > tr:first-child,
  .tabela--movel tbody > tr:first-child:has(th) { display: none; }
  .tabela--movel tr {
    display: block; margin: 0 0 12px; padding: 10px 12px;
    border: 1px solid var(--filete); border-radius: var(--raio-secao);
    background: var(--placa-alta);
  }
  .tabela--movel td {
    display: grid; grid-template-columns: minmax(96px, 38%) 1fr;
    gap: 10px; align-items: baseline; padding: 6px 0;
    border: 0; text-align: left; white-space: normal;
  }
  .tabela--movel td::before {
    content: attr(data-rotulo); color: var(--tinta-fraca);
    font-size: 11px; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase;
  }
  .tabela--movel td.estado::before {
    width: auto; height: auto; border-radius: 0; background: none;
  }
  .tabela--movel tr:has(td[colspan]) {
    margin: 18px 0 6px; padding: 0 2px 6px;
    border: 0; border-bottom: 1px solid var(--filete);
    border-radius: 0; background: transparent;
  }
  .tabela--movel td[colspan] { display: block; padding: 0; }
  .tabela--movel td[colspan]::before { display: none; }
  .tabela--movel td:last-child:has(button) { display: block; padding-top: 10px; }
  .tabela--movel td:last-child:has(button)::before { display: none; }
  .tabela--movel td:last-child:has(button) button { width: 100%; }
}

/* ── Barra inferior do celular ──────────────────────────────────────── */
/*
 * Em 390 px, marca + menu + três modos + duas praças + nome + estado não
 * cabem numa linha: o que corta primeiro é a direita, que é onde mora o
 * estado (fila, alerta, quem está no turno). E os rótulos dos modos somem
 * antes disso — sobram três desenhos sem nome para quem nunca viu o sistema.
 *
 * Os modos descem para cá, que é onde o polegar chega sem a mão trocar de
 * posição no aparelho. O topo fica com contexto.
 *
 * Cores literais, como no `.ros-topo` e pelo mesmo motivo: a barra é a mesma
 * em toda tela, inclusive nas que ainda têm paleta própria. Herdando a
 * paleta da página, ela ficaria com texto claro sobre fundo claro em alguma
 * delas — e ninguém percebe até abrir aquela tela, no celular, no salão.
 *
 * Esta é a camada que FLUTUA, então ela é de vidro. 86% e não 68%: o
 * conteúdo passa por baixo dela o tempo todo, e a mesma lição que deixou o
 * topo opaco vale aqui — texto que atravessa a barra lê como tela quebrada.
 */
.ros-tabbar { display: none; }
@media (max-width: 700px) {
  /* A fileira de modos do topo sai: ela agora mora embaixo, e duas cópias
     da mesma navegação na mesma tela é o operador perguntando qual das duas
     é a de verdade. */
  .ros-modos { display: none; }

  .ros-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: var(--camada-barra);
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    gap: 4px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--vidro-claro-forte);
    -webkit-backdrop-filter: blur(var(--vidro-desfoque)) saturate(var(--vidro-saturacao));
    backdrop-filter: blur(var(--vidro-desfoque)) saturate(var(--vidro-saturacao));
    border-top: 1px solid #e5e5e5;
    font: 600 12px/1.1 var(--fonte-ui);
  }
  .ros-tab {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px;
    min-height: 52px; border: 0; border-radius: 12px;
    background: transparent; color: #525252;
    text-decoration: none; font: inherit; cursor: pointer;
  }
  .ros-tab svg { width: 22px; height: 22px; }
  /* O modo atual não se distingue só pela cor: o fundo muda junto. Cor
     sozinha some sob luz de teto forte e não existe para quem não a
     distingue. */
  .ros-tab[aria-current="page"] { color: #0a0a0a; background: #f5f5f5; }
  .ros-tab:active { background: #e5e5e5; }

  /* O conteúdo termina ACIMA da barra. Sem isto, a última linha da lista
     fica atrás do vidro e ninguém descobre que ela existe — e no Balcão a
     última linha é o botão de receber. */
  body.ros-tem-topo { padding-bottom: 76px; }
  /* O Tab que desce a página para o campo de baixo parava com ele ATRÁS da
     barra fixa — com zoom de 200 % no notebook a janela vira esta largura,
     e o foco sumia sob o vidro. A margem de rolagem faz o navegador parar
     o campo acima da barra de baixo e abaixo da de cima. */
  html:has(body.ros-tem-topo) { scroll-padding: 64px 0 84px; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ros-tabbar { background: #ffffff; }
}
@media (prefers-reduced-transparency: reduce) {
  .ros-tabbar {
    background: #ffffff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ── Modos ──────────────────────────────────────────────────────────── */
/*
 * Escuro e alto contraste entram por ATRIBUTO, não por `prefers-color-scheme`.
 * Não é preguiça: é que trocar a paleta de 35 telas de uma vez, sem olhar
 * uma por uma, é como a `/dia` ficou clara enquanto o sistema era escuro. O
 * automático entra quando as telas tiverem passado pela conferência — e aí
 * é uma linha.
 */
[data-tema="escuro"] {
  /* `color-scheme` é o que manda no que o NAVEGADOR desenha, e não a folha:
     caixa de marcar, seletor, barra de rolagem, o calendarinho do campo de
     data e o relógio do campo de hora.

     Sem esta linha, a tela dos alergênicos ficava com oito quadradinhos
     brancos sobre grafite — controle nativo em modo claro dentro de uma
     página escura —, e o ícone de calendário do Cockpit era uma mancha
     clara no canto do campo. Nenhuma quantidade de CSS nosso conserta isso:
     esses desenhos não são nossos. */
  color-scheme: dark;
  --chao: #0a0a0a;
  --placa: #171717;
  --placa-alta: #262626;
  --campo: #262626;
  --filete: #262626;
  --filete-forte: #404040;
  --tinta: #fafafa;
  --tinta-fraca: #a1a1a1;
  --tinta-apagada: #a1a1a1;
  --dinheiro: #fafafa;
  --dinheiro-fundo: #262626;
  --medida: #fafafa;
  --acao: #e5e5e5;
  --acao-alta: #ffffff;
  --acao-abrir: #e5e5e5;
  --acao-abrir-alta: #ffffff;
  --perda: #ff6467;
  --atencao: #d4d4d4;
  --tinta-sobre-cor: #171717;
  --grafico-1: #fafafa; --grafico-2: #a1a1a1; --grafico-3: #525252;
  --grafico-4: #404040; --grafico-5: #d4d4d4; --grafico-6: #737373;
  --grafico-7: #e5e5e5; --grafico-8: #333333;
  --sombra-placa: 0 0 0 1px rgba(255, 255, 255, .06);
  --hachura: repeating-linear-gradient(-45deg,
      #333333 0 1.5px, transparent 1.5px 7px);
  --vidro-claro: rgba(23, 23, 23, .72);
  --vidro-claro-forte: rgba(23, 23, 23, .88);
  --vidro-borda: var(--vidro-borda-escuro);
  --vidro-sem: #171717;
  --sombra-flutua: 0 0 0 1px rgba(255, 255, 255, .08), 0 12px 32px -8px rgba(0, 0, 0, .6);
}

/* Alto contraste: filete que se enxerga, texto fraco que sobe de tom. Não é
   "escuro mais forte" — é a mesma paleta com as separações declaradas. */
[data-tema="contraste"] {
  --filete: #8a8a8a;
  --filete-forte: #5c5c5c;
  --tinta-fraca: #3d3d3d;
  --tinta-apagada: #454545;
}
@media (prefers-contrast: more) {
  :root {
    --filete: #9a978f;
    --filete-forte: #6b6862;
    --tinta-fraca: #3c4048;
    --tinta-apagada: #454951;
  }
  /* O pedido de mais contraste não troca o TEMA. Os tokens claros acima
     estavam vencendo o bloco escuro pela ordem do CSS e produzindo texto
     grafite sobre painel grafite exatamente para quem pediu mais leitura. */
  [data-tema="escuro"] {
    --filete: #666666;
    --filete-forte: #8a8a8a;
    --tinta-fraca: #e5e5e5;
    --tinta-apagada: #d4d4d4;
  }
}

/* ── A barra no escuro ──────────────────────────────────────────────── */
/*
 * A barra é escrita com cores literais de propósito: ela é a mesma em toda
 * tela, inclusive nas que ainda têm paleta própria, e herdar a paleta da
 * página já a deixou com texto escuro sobre fundo escuro. O preço disso é
 * este bloco: no modo escuro ela não muda sozinha, e sem ele a tela da
 * cozinha ficaria com uma faixa branca de 56 px no alto de um monitor
 * escuro pendurado na parede — que é holofote na cara de quem cozinha.
 *
 * Continua literal, e não `var(--placa)`: o que decide a cor da barra é o
 * TEMA, não a tela. Uma tela com paleta própria e tema escuro continua
 * recebendo esta barra, e não a invenção dela.
 */
[data-tema="escuro"] .ros-topo {
  background: var(--vidro-claro); border-bottom-color: #262626; color: #a1a1a1;
}
/* A beira de rolagem é pintada com o fundo da superfície em que a tira
   está deitada — e o dela está escrito literal, `#ffffff`, pelo mesmo
   motivo que o resto da barra. No escuro, esse branco virava dois riscos
   claros de 88 px no alto da tela da cozinha, sem nada por trás: a tira de
   contexto estava vazia e só a beira aparecia. */
[data-tema="escuro"] .ros-contexto,
[data-tema="escuro"] .ros-topo { --beira-fundo: #171717; }
[data-tema="escuro"] .ros-marca { color: #fafafa; }
[data-tema="escuro"] .ros-atual,
[data-tema="escuro"] .ros-quem { border-left-color: #262626; color: #a1a1a1; }
[data-tema="escuro"] .ros-quem strong { color: #fafafa; }
/* O papel precisa de cor por TEMA. `#6f737d` foi escolhido para passar de
   4,5 : 1 sobre a barra clara; sobre a escura ele dá 3,67. Dez pixels em
   caixa alta não perdoam — e esta linha é a que diz se você está logado como
   gerente ou como garçom. */
[data-tema="escuro"] .ros-quem span { color: #a1a1a1; }
[data-tema="escuro"] .ros-menu-botao { border-color: #404040; }
[data-tema="escuro"] .ros-menu-botao span { background: #a1a1a1; }
[data-tema="escuro"] .ros-topo button.ros-menu-botao:hover,
[data-tema="escuro"] .ros-topo button.ros-menu-botao:focus-visible,
[data-tema="escuro"] .ros-topo button.ros-menu-botao:active {
  background: #1f1f1f; border-color: #525252;
}
[data-tema="escuro"] .ros-modos, [data-tema="escuro"] .ros-pracas {
  background: #1f1f1f; border-color: #262626;
}
[data-tema="escuro"] .ros-modo, [data-tema="escuro"] .ros-praca { color: #a1a1a1; }
[data-tema="escuro"] .ros-modo:hover,
[data-tema="escuro"] .ros-praca:hover { background: #262626; color: #fafafa; }
[data-tema="escuro"] .ros-modo[aria-current="page"] {
  background: #262626; color: #fafafa;
}
/* Superfície cheia também no escuro: com vidro translúcido, o texto da tela de
   baixo aparecia no meio dos resultados. */
[data-tema="escuro"] .ros-menu {
  background: var(--placa); border-bottom-color: #262626; color: #fafafa;
}
[data-tema="escuro"] .ros-item { color: var(--tinta-fraca); }
[data-tema="escuro"] .ros-item:hover { background: var(--placa-alta); color: var(--tinta); }
[data-tema="escuro"] .ros-item[aria-current="page"] { color: var(--dinheiro); }
[data-tema="escuro"] .ros-grupo-nome { border-bottom-color: var(--filete-forte); }
[data-tema="escuro"] .ros-nada { color: var(--tinta-fraca); }
[data-tema="escuro"] .ros-estrela { color: var(--tinta-fraca); }
[data-tema="escuro"] .ros-busca {
  background: #1f1f1f; border-color: #404040; color: #fafafa;
}
[data-tema="escuro"] .ros-tabbar {
  background: rgba(23, 23, 23, .88); border-top-color: #262626;
}
[data-tema="escuro"] .ros-tab { color: #a1a1a1; }
[data-tema="escuro"] .ros-tab[aria-current="page"] {
  background: #262626; color: #fafafa;
}

/* ── A lateral (v2, out/2026) ──────────────────────────────────────────
 *
 * No computador, o menu de telas mora numa coluna fixa à esquerda — o
 * desenho da v2. Ela é feita dos mesmos destinos da cortina (barra.js) e
 * passa pelos mesmos filtros de papel e de plano. Abaixo de 1024 px ela
 * não existe: o celular e o tablet em pé ficam com a barra de baixo e a
 * cortina, que é onde o polegar alcança.
 *
 * Tudo aqui é token: a lateral não tem bloco de tema escuro próprio. A
 * barra antiga precisou de trinta linhas de `[data-tema="escuro"]` porque
 * foi escrita com literais; esta muda de tema sozinha.
 */
:root { --lateral: #fafafa; --largura-lateral: 256px; }
[data-tema="escuro"] { --lateral: #0a0a0a; }
.ros-lateral {
  position: fixed; inset: 0 auto 0 0; z-index: var(--camada-barra);
  width: var(--largura-lateral);
  display: flex; flex-direction: column; gap: var(--esp-3);
  padding: var(--esp-3);
  background: var(--lateral); border-right: 1px solid var(--filete);
  font-size: 14px;
}
.ros-lateral[hidden] { display: none; }
body.ros-com-lateral { padding-left: var(--largura-lateral); }
/* Com a lateral aberta a marca já está nela; repetir no topo eram dois
   logotipos lado a lado. */
body.ros-com-lateral .ros-topo .ros-marca { display: none; }
/* A conta também mora no pé da lateral. */
body.ros-com-lateral .ros-contexto > .ros-quem { display: none; }

.ros-lateral-marca {
  display: flex; align-items: center; gap: 10px;
  min-height: var(--alvo-leitura); padding: 0 var(--esp-2);
  color: var(--tinta); text-decoration: none;
}
.ros-lateral-marca i {
  flex: none; width: 28px; height: 28px; border-radius: var(--raio-pequeno);
  display: grid; place-items: center;
  background: var(--acao); color: var(--tinta-sobre-cor);
  font: 600 13px/1 var(--fonte-ui); font-style: normal;
}
.ros-lateral-marca span { display: flex; flex-direction: column; line-height: 1.2; }
.ros-lateral-marca strong { font-size: 14px; font-weight: 600; }
.ros-lateral-marca small { font-size: 12px; color: var(--tinta-fraca); }

.ros-lateral-busca {
  display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2);
  width: 100%; min-height: var(--alvo-leitura); padding: 0 var(--esp-3);
  background: var(--campo); color: var(--tinta-fraca);
  border: 1px solid var(--filete); border-radius: var(--raio-campo);
  font: 400 14px/1 var(--fonte-ui); cursor: pointer;
}
.ros-lateral-busca:hover { border-color: var(--filete-forte); background: var(--campo); }
.ros-lateral-busca kbd {
  display: inline-flex; align-items: center; height: 20px; padding: 0 6px;
  border: 1px solid var(--filete); border-radius: 6px; background: var(--placa);
  font: 500 11px/1 var(--fonte-ui); color: var(--tinta-fraca);
}

.ros-lateral-nav {
  flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin;
  display: flex; flex-direction: column; gap: 2px;
  margin: 0 calc(var(--esp-1) * -1); padding: 0 var(--esp-1);
}
.ros-lateral-grupo { margin: 0; }
.ros-lateral-grupo > summary, .ros-lateral-favoritos > h2 {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px var(--esp-2) 6px; margin: 0;
  color: var(--tinta-fraca); font-size: 12px; font-weight: 500;
  list-style: none; cursor: pointer; user-select: none;
  border-radius: var(--raio-pequeno);
}
.ros-lateral-grupo > summary::-webkit-details-marker { display: none; }
.ros-lateral-grupo > summary::after {
  content: "›"; font-size: 15px; line-height: 1; color: var(--tinta-apagada);
  transition: transform var(--rapido);
}
.ros-lateral-grupo[open] > summary::after { transform: rotate(90deg); }
.ros-lateral-grupo > summary:hover { color: var(--tinta); }
.ros-lateral-favoritos > h2 { cursor: default; }
.ros-lateral-favoritos[hidden] { display: none; }
.ros-lateral .ros-item {
  grid-template-columns: 16px 1fr; gap: var(--esp-2);
  padding: 8px var(--esp-2); border-radius: var(--raio-pequeno);
  color: var(--tinta); font-size: 14px;
}
.ros-lateral .ros-item svg { width: 16px; height: 16px; color: var(--tinta-fraca); opacity: 1; }
.ros-lateral .ros-item:hover { background: var(--chao); color: var(--tinta); }
.ros-lateral .ros-item[aria-current="page"] {
  background: var(--chao); color: var(--tinta); font-weight: 500;
}
.ros-lateral .ros-item[aria-current="page"] svg { color: var(--tinta); }
/* No tablet de balcão a lateral também aparece, e ali o dedo pede o piso
   de leitura. Com mouse ela fica densa, como um índice. */
@media (pointer: coarse) {
  .ros-lateral .ros-item, .ros-lateral-grupo > summary { min-height: var(--alvo-leitura); }
}

.ros-lateral-pe {
  display: flex; align-items: center; gap: var(--esp-1);
  padding: var(--esp-2); border: 1px solid var(--filete);
  border-radius: var(--raio-campo); background: var(--placa);
}
.ros-lateral-conta { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--esp-2); }
.ros-lateral-conta[hidden] { display: none; }
.ros-lateral-conta + .ros-lateral-icone { margin-left: 0; }
.ros-lateral-pe > .ros-lateral-icone:first-of-type { margin-left: auto; }
.ros-lateral-conta .ros-conta-identidade { min-width: 0; }
.ros-lateral-conta .ros-conta-identidade strong {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ros-lateral-sair {
  margin-left: auto; padding: 0 var(--esp-2); min-height: var(--alvo-leitura);
  display: inline-flex; align-items: center;
  color: var(--tinta-fraca); font-size: 13px; text-decoration: none;
  border-radius: var(--raio-pequeno);
}
.ros-lateral-sair:hover { color: var(--tinta); background: var(--chao); }
.ros-lateral button.ros-lateral-icone {
  flex: none; width: var(--alvo-leitura); min-height: var(--alvo-leitura); padding: 0;
  background: transparent; border: 0; border-radius: var(--raio-pequeno);
  color: var(--tinta-fraca); font-size: 16px;
}
.ros-lateral button.ros-lateral-icone:hover { background: var(--chao); color: var(--tinta); }

/* ── A barra no desenho da v2 ──────────────────────────────────────── */
.ros-topo { color: var(--tinta-fraca); border-bottom-color: var(--filete); }
.ros-marca { color: var(--tinta); font-weight: 600; }
.ros-marca::before {
  width: 24px; height: 24px; border-radius: 8px; background: var(--acao);
}
.ros-atual { color: var(--tinta); border-left: 0; padding-left: 4px; font-size: 14px; }
.ros-atual:empty { display: none; }
.ros-atual .ros-trilha-grupo { color: var(--tinta-fraca); }
.ros-atual .ros-trilha-grupo::after { content: "›"; margin: 0 8px; }
.ros-menu-botao { border-color: var(--filete); border-radius: var(--raio-campo); }
.ros-menu-botao span { background: var(--tinta); }
.ros-topo button.ros-menu-botao:hover,
.ros-topo button.ros-menu-botao:focus-visible,
.ros-topo button.ros-menu-botao:active { background: var(--chao); border-color: var(--filete-forte); }
.ros-modos, .ros-pracas { border-radius: var(--raio-campo); padding: 4px; }
.ros-modo, .ros-praca { border-radius: 14px; }
.ros-modo:hover, .ros-praca:hover { background: var(--placa); color: var(--tinta); }
.ros-modo[aria-current="page"] { font-weight: 500; box-shadow: var(--sombra-placa); }
.ros-espiada { border-color: var(--filete); border-radius: var(--raio-campo); font-weight: 500; }
.ros-espiada-grande { font-weight: 600; }
.ros-praca-pronto { background: var(--acao); color: var(--tinta-sobre-cor); }

/* ── A Ilha, a rede e o que eu fiz (onda 1, out/2026) ──────────────────
 *
 * A Ilha diz o pior estado da casa EM TEXTO, numa linha fixa sob o topo de
 * toda tela (`ilha.js`). Ela mora numa linha própria, e não dentro do topo,
 * porque o topo já é uma fileira cheia (modos, praças, venda, operador): a
 * 1366 px sobravam ~150 px e no celular nenhum, e texto que não cabe é texto
 * cortado — que é o que a Ilha existe para não fazer.
 *
 * Vermelho aqui é o do sistema: perda, erro e coisa atrasada — impressora que
 * não responde, pedido sem aceite, cozinha com minutos de atraso, servidor
 * fora. «Atenção» é texto cheio com ponto cheio; o dia bom é texto fraco e
 * ponto vazado. O estado nunca é só cor: a frase o diz.
 *
 * As faixas (rede, «o que eu fiz») ficam coladas na Ilha e só existem quando
 * há o que dizer. Tudo é um bloco só que gruda sob o topo, e a altura dele é
 * publicada em `--ilha-h` para o que gruda por conta própria (mensagens,
 * painel de detalhe) não ficar por baixo.
 */
.ros-faixas { position: sticky; top: 56px; z-index: calc(var(--camada-barra) - 1); background: var(--placa); }
.ros-ilha {
  display: flex; align-items: center; gap: var(--esp-2); width: 100%;
  min-height: var(--alvo-leitura); padding: 6px var(--esp-4);
  border: 0; border-bottom: 1px solid var(--filete); border-radius: 0;
  background: var(--placa); color: var(--tinta-fraca);
  font: 500 13px/1.3 var(--fonte-ui); text-align: left; cursor: pointer;
}
.ros-ilha[hidden] { display: none; }
.ros-ilha:hover { color: var(--tinta); background: var(--chao); }
.ros-ilha:focus-visible { outline: 2px solid var(--tinta); outline-offset: -2px; }
.ros-ilha[aria-expanded="true"] { color: var(--tinta); background: var(--chao); }
.ros-ilha::after { content: "›"; flex: none; margin-left: auto; font-size: 16px; line-height: 1; color: var(--tinta-fraca); }
.ros-ilha-ponto {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid currentColor; background: transparent;
}
.ros-ilha-texto { min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ros-ilha-mais {
  flex: none; padding: 1px 8px; border-radius: var(--raio-capsula);
  background: var(--chao); color: var(--tinta); font-size: 12px; font-weight: 600;
}
.ros-ilha-mais[hidden] { display: none; }
.ros-ilha[data-estado="atencao"] { color: var(--tinta); font-weight: 600; background: var(--chao); }
.ros-ilha[data-estado="atencao"] .ros-ilha-ponto { background: currentColor; }
.ros-ilha[data-estado="atencao"] .ros-ilha-mais { background: var(--placa); border: 1px solid var(--filete-forte); }
.ros-ilha[data-estado="critico"] { color: var(--perda); font-weight: 600; border-bottom: 2px solid var(--perda); }
.ros-ilha[data-estado="critico"] .ros-ilha-ponto { background: currentColor; }
.ros-ilha[data-estado="critico"] .ros-ilha-mais { background: transparent; color: var(--perda); border: 1px solid var(--perda); }
.ros-ilha[data-estado="critico"]::after { color: var(--perda); }

.ros-ilha-painel {
  position: fixed; top: calc(56px + var(--ilha-h, 0px) + var(--esp-2)); right: var(--esp-4);
  z-index: calc(var(--camada-menu) + 1);
  width: min(420px, calc(100vw - 24px)); max-height: calc(100vh - 56px - var(--ilha-h, 0px) - var(--esp-5)); overflow-y: auto;
  padding: var(--esp-3) var(--esp-4); border-radius: var(--raio-painel);
  background: var(--placa); color: var(--tinta);
  border: 1px solid var(--filete-forte); box-shadow: var(--sombra-flutua);
}
.ros-ilha-painel[hidden] { display: none; }
@media (max-width: 700px) { .ros-ilha-painel { right: 12px; left: 12px; width: auto; } }
.ros-ilha-painel-titulo { margin: 0 0 var(--esp-2); font-size: 14px; font-weight: 600; }
.ros-ilha-vazio { margin: var(--esp-2) 0 var(--esp-1); font-size: 14px; color: var(--tinta-fraca); }
.ros-ilha-aviso {
  display: grid; grid-template-columns: 1fr auto; column-gap: var(--esp-3); row-gap: 2px;
  min-height: var(--alvo-leitura); padding: var(--esp-2) var(--esp-1);
  border-top: 1px solid var(--filete); color: var(--tinta); text-decoration: none;
}
.ros-ilha-aviso:hover { background: var(--chao); }
p.ros-ilha-aviso { display: block; margin: 0; }
.ros-ilha-aviso-titulo { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.ros-ilha-aviso-detalhe { grid-column: 1; font-size: 13px; color: var(--tinta-fraca); overflow-wrap: anywhere; }
.ros-ilha-aviso-valor { grid-row: 1; grid-column: 2; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ros-ilha-aviso.critico { color: var(--perda); }
.ros-ilha-aviso.critico .ros-ilha-aviso-detalhe { color: var(--tinta-fraca); }
.ros-ilha-aviso.critico .ros-ilha-aviso-valor { color: var(--tinta); }

.ros-faixa {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--esp-2) var(--esp-4); border-bottom: 1px solid var(--filete);
  background: var(--placa); color: var(--tinta);
  font: 500 14px/1.35 var(--fonte-ui); overflow-wrap: anywhere;
}
.ros-faixa[hidden] { display: none; }
.ros-faixa-feita { background: var(--chao); }
.ros-faixa-linha { color: var(--tinta); text-decoration: none; }
a.ros-faixa-linha { text-decoration: underline; text-underline-offset: 3px; }
.ros-faixa-linha.urgente { color: var(--perda); font-weight: 600; }

/* O que gruda sob o topo por conta própria desce junto com a Ilha. */
body.ros-com-ilha :is(#mensagem, #msg):not(:empty) { top: calc(64px + var(--ilha-h, 0px)); }
body.ros-com-ilha .lista-detalhe > .detalhe { top: calc(56px + var(--ilha-h, 0px) + var(--esp-3)); }
html:has(body.ros-com-ilha) { scroll-padding-top: calc(64px + var(--ilha-h, 0px)); }
@media print { .ros-faixas, .ros-ilha-painel { display: none; } }

/* ── Modo parede (produção: cozinha e copa) ─────────────────────────────
 * Tela pendurada acima da bancada, lida de 1 a 2 m de lado, com a mão
 * ocupada. Os tamanhos saíram da medição da auditoria (COZ-04): 19 px de
 * item só se lia a 0,5 m; 28 px lê-se a 1,5 m num tablet de 10" e 32 px num
 * monitor de 21,5". Peso 600, porque o fino some na gordura do ar.
 * Quem usa: `producao.html`. Outra estação de parede (barril) herda daqui.
 */
:root {
  --parede-fonte-item: 28px;
  --parede-fonte-origem: 28px;
  --parede-fonte-espera: 24px;
  --parede-fonte-senha: 48px;
  --parede-fonte-apoio: 18px;
}
@media (min-width: 1600px) and (min-height: 900px) {
  :root {
    --parede-fonte-item: 32px;
    --parede-fonte-origem: 32px;
    --parede-fonte-espera: 28px;
    --parede-fonte-senha: 56px;
    --parede-fonte-apoio: 20px;
  }
}

/* ── Seção do Hoje (embutido) ───────────────────────────────────────────
   `/dia`, `/reuniao` e `/cockpit?embutido=1` moram dentro de um quadro do
   `/hoje`. O Hoje já escreve o título, a barra e o menu: dentro do quadro
   some o cabeçalho da página, o fundo vira o do Hoje e o respiro lateral
   fica com quem contém. A altura do quadro segue a do conteúdo (hoje.html). */
html.embutido body { background: transparent; }
html.embutido .folha { max-width: none; padding: 0 0 var(--esp-4); }
html.embutido .folha > .abertura,
html.embutido .folha > .topo > .abertura { display: none; }

/* ── Pular para o conteúdo (SIS-09) ─────────────────────────────────────
   Primeiro elemento da página, fora da tela até receber o foco. Por
   `transform` e não por `top`: não mexe em layout. O `<main>` que ele
   alcança leva `tabindex="-1"`; sem anel, porque o foco programático ali é
   só o ponto de partida do próximo Tab, e não um campo. */
.ros-pular {
  position: fixed; top: var(--esp-3); left: var(--esp-3);
  z-index: calc(var(--camada-modal) + 1);
  display: inline-flex; align-items: center; min-height: var(--alvo-leitura);
  padding: 0 var(--esp-4); border-radius: var(--raio-campo);
  background: var(--tinta); color: var(--placa);
  font-weight: 500; text-decoration: none; box-shadow: var(--sombra-flutua);
  transform: translateY(-200%);
}
.ros-pular:focus-visible { transform: none; outline: 2px solid var(--placa); outline-offset: -4px; }
main[tabindex="-1"]:focus { outline: none; }

/* Modo de alto contraste do sistema apaga `box-shadow`: o campo focado, cujo
   anel é uma sombra, ficaria sem marca nenhuma. Ali o anel volta a ser contorno. */
@media (forced-colors: active) {
  input:focus, select:focus, textarea:focus { outline: 2px solid CanvasText; outline-offset: 2px; }
}

/* A marca vira só o ícone abaixo de 1200 px (o nome fica para o leitor de
   tela) e o link para o Início encolhia a 24 px de largura: alvo de 44. */
@media (max-width: 1200px) {
  .ros-marca { min-width: var(--alvo-leitura); justify-content: center; }
}

/* ── O topo cabe na tela (segunda passada: D8, achados 04, 05 e 19) ───────
   Três pontas da mesma barra, com o mesmo remédio: ninguém é cortado pela
   borda, e quem cede é o que se lê pelo desenho — nunca o nome de quem está
   logado nem o valor do dia.

   - Celular: as praças com número de dois dígitos e o nome do garçom somavam
     285 px numa vaga de 266; o nome ficava coberto pela pílula (D8). As
     praças apertam o respiro (os números ficam) e, se mesmo assim faltar, o
     nome é que ganha reticências — o «· sair» fica.
   - Celular de gerente: com o chip «Hoje R$ 1.698,99» a barra pedia 431 px
     em 390 e o último dígito sumia (04). A marca é link para o Início, que o
     gerente tem na barra de baixo; ela cede a vaga.
   - Monitor sem lateral (caixa a 1366): o rótulo das praças somava 100 px e
     empurrava nome e «caixa fechado» para fora (19). Até 1440 as praças
     ficam só desenho e número, como já ficam abaixo de 1200.
   Escrito depois das definições dos componentes: mesma especificidade perde
   pela ordem do arquivo. */
@media (max-width: 700px) {
  .ros-pracas { padding: 1px; gap: 0; }
  .ros-praca { padding: 0 5px; gap: 3px; min-width: 0; }
  .ros-praca svg { width: 17px; height: 17px; }
  .ros-praca-fazendo, .ros-praca-pronto { min-width: 20px; padding: 0 4px; }
  /* O nome cede pouco e tem piso: o aviso ao lado (fila, rede) é quem encolhe
     primeiro; só nome muito comprido ganha reticências. Só para quem publica o
     nome em duas partes (`.sair-nome` na tela do garçom): as outras telas
     têm o próprio botão e seguem como estavam. */
  .ros-contexto > #quem-sou:has(.sair-nome) { flex: 0 .2 auto; min-width: 108px; }
  .ros-contexto > #quem-sou:has(.sair-nome) > button { max-width: 100%; padding: 0 6px; }
}
@media (max-width: 480px) {
  .ros-topo:has(.ros-espiada:not([hidden])) .ros-marca { display: none; }
  .ros-espiada { padding: 0 8px; gap: 5px; }
}
@media (max-width: 1440px) {
  body:not(.ros-com-lateral) .ros-praca { padding: 0 8px; gap: 5px; min-width: var(--alvo-leitura);
                                          justify-content: center; }
  body:not(.ros-com-lateral) .ros-praca-rotulo { display: none; }
}

/* Pé da lateral (05): a conta, o «Sair» e dois ícones dividiam 117 px e o
   nome de 71 px ganhava 69 — «Gil Geren…». O respiro entre eles cede. */
.ros-lateral-conta { gap: var(--esp-1); }
.ros-lateral-sair { padding: 0 var(--esp-1); }

/* ── Densidade da gestão ───────────────────────────────────────────────
   Telas de gestão (financeiro, relatórios, pessoas, DRE, compras…) são lidas
   sentado e começam pelo que se trabalha: a lista, a equipe, o número. A
   auditoria de 10/10 mediu o contrário — em 1366×768 a primeira linha do
   Financeiro nascia no fim da tela, depois de título, aviso, abas, cartão,
   indicadores e seis filtros; em Relatórios oito cartões iguais viravam
   quatro fileiras a 1024 px; no celular cada tela passava de 2.000 px.

   Vale só para `<main class="folha gestao">`: PDV, balcão, garçom e produção
   ficam com os alvos de 64 px. Os tokens são os mesmos — o que muda é o
   respiro entre as peças e o peso dos indicadores secundários. O alvo de
   44 px continua no toque; 36 px existe só com mouse (`pointer: fine`). */
.folha.gestao { gap: var(--esp-3); padding-top: var(--esp-4); padding-bottom: var(--esp-5); }
.gestao .abertura .olho { margin: 0; }
.gestao .abertura p { margin-top: 2px; }
.gestao .placa { padding: var(--esp-4); }

/* Indicadores: o número lidera, a nota cabe numa linha (a frase inteira vai
   no `title`). Em duas colunas no celular — seis cartões empilhados eram uma
   tela inteira só de número. */
.gestao :is(.grade-resumo, .placa .grade) > :is(.metrica, .placa) { padding: var(--esp-2) var(--esp-3); }
.gestao .metrica .n, .gestao .metrica .visor { font-size: clamp(18px, 1.4vw, 22px); }
.gestao .grade-resumo.compacta { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
/* Faixa compacta: rótulo e número. A nota inteira vai no `title` da célula e
   o «Ver quais são» só aparece quando o filtro já está ligado. Seletor de
   quatro classes: a regra do celular acima também fala de `.nota-metrica`. */
.gestao .grade-resumo.compacta .metrica .nota-metrica { display: none; }
.gestao .grade-resumo.compacta .metrica .acao-metrica { display: none; }
.gestao .grade-resumo.compacta .metrica[aria-pressed="true"] .acao-metrica { display: block; }
.gestao .grade-resumo.compacta .metrica--botao { padding-block: var(--esp-2); }
@media (max-width: 700px) {
  .gestao .grade-resumo.compacta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gestao .compacta .rot-extra { display: none; }
  .gestao .compacta .metrica .rot { line-height: 1.25; }
  .gestao .grade-resumo.compacta > .metrica { padding-inline: var(--esp-2); }
  .gestao .grade-resumo.compacta .metrica .n { font-size: 16px; white-space: nowrap; overflow-wrap: normal; }
}
/* Tela baixa (portátil 1366×768): a frase fixa debaixo do título cede lugar
   à primeira linha de trabalho. */
@media (max-height: 820px) and (min-width: 701px) { .gestao .abertura p.explica { display: none; } }
@media (max-width: 700px) {
  .gestao .grade-resumo, .gestao .placa .grade:has(> .metrica:not(a)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gestao .grade-resumo > .metrica, .gestao .placa .grade > .metrica { min-width: 0; }
  .gestao .metrica .n, .gestao .metrica .visor { font-size: 18px; overflow-wrap: anywhere; }
  .gestao .metrica .nota-metrica { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* A frase fixa debaixo do título responde «o que é esta tela» — o olho e o
     título já dizem; no celular ela só empurra o dado. */
  .gestao .abertura p.explica, .gestao p.nota.explica { display: none; }
  .folha.gestao { padding: var(--esp-3) var(--esp-3) var(--esp-5); }
  .gestao .placa { padding: var(--esp-3); }
}

/* Filtros: uma fileira que cabe, duas colunas no celular. */
.gestao .linha-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--esp-2) var(--esp-3); }
@media (max-width: 700px) {
  .gestao .linha-filtros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gestao .linha-filtros > * { min-width: 0; }
  .gestao .linha-filtros :is(input, select) { max-width: none; width: 100%; }
  .gestao .linha-filtros > :first-child:has(input[type="search"]) { grid-column: 1 / -1; }
  .gestao .linha-filtros > .recorte-conta-caixa { align-self: end; justify-self: end; }
}

/* Explicação longa fica a um toque, depois do dado. */
.gestao details.explica-bloco { border: 1px solid var(--filete); border-radius: var(--raio-pequeno); }
.gestao details.explica-bloco > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px;
  min-height: var(--alvo-leitura); padding: 0 var(--esp-3);
  color: var(--tinta-fraca); font-size: var(--t-legenda); font-weight: 600;
}
.gestao details.explica-bloco > summary::-webkit-details-marker { display: none; }
.gestao details.explica-bloco > summary::before { content: "›"; transition: transform var(--rapido); }
.gestao details.explica-bloco[open] > summary::before { transform: rotate(90deg); }
.gestao details.explica-bloco > :not(summary) { margin: 0 var(--esp-3) var(--esp-3); }
.gestao details.explica-bloco p { color: var(--tinta-fraca); font-size: var(--t-legenda); line-height: 1.5; }


/* No celular a tabela de gestão vira cartão de duas colunas — rótulo em cima,
   valor embaixo, dois campos por linha. Uma coluna só gastava 290 px por título. */
@media (max-width: 700px) {
  .gestao .tabela--movel tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--esp-3);
    margin-bottom: var(--esp-2); padding: var(--esp-2) var(--esp-3);
  }
  .gestao .tabela--movel td { display: block; padding: 3px 0; min-width: 0; overflow-wrap: anywhere; }
  .gestao .tabela--movel td::before { display: block; margin-bottom: 1px; }
  .gestao .tabela--movel td:is(:last-child:has(button), [colspan], :has(> table), :has(> form)) { grid-column: 1 / -1; }
  .gestao .tabela--movel td.n, .gestao .tabela--movel td.dinheiro { text-align: left; }
  /* A linha de título ou nome ocupa a largura toda. */
  .gestao .tabela--movel td:has(> .titulo-desc, > .nome-linha) { grid-column: 1 / -1; order: -1; }
  /* Cabeçalho da tela e botão de ação na mesma linha. */
  .gestao .topo.topo--linha { flex-wrap: nowrap; align-items: flex-end; }
  .gestao .topo.topo--linha > .abertura { flex: 1 1 0; min-width: 0; }
  .gestao .topo.topo--linha > :is(button, .b-principal, .periodo-acoes, .acoes-relatorio, #controles) { flex: none; }
}

/* Início/Fim do período: duas datas lado a lado e o botão embaixo, e a data
   por extenso passa a ser só para leitor de tela — ela dobrava a altura do
   formulário. Vale para Relatórios e para o Relatório de vendas. */
@media (max-width: 700px) {
  .gestao form.campos-periodo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-2); width: 100%; }
  .gestao form.campos-periodo > div { min-width: 0; }
  .gestao form.campos-periodo input { max-width: none; width: 100%; }
  .gestao form.campos-periodo > button { grid-column: 1 / -1; }
  .gestao form.campos-periodo .eco {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}

@media (max-width: 700px) {
  .gestao .placa .tabela.tabela--movel { min-width: 0; }
  /* Tabela de sete colunas ou mais (equipe): três por linha, e não oito
     campos empilhados dois a dois. */
  .gestao .tabela--movel tr:has(> td:nth-child(7)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gestao .tabela--movel tr:has(> td:nth-child(7)) > td:last-child { grid-column: span 2; }
}

/* Tabela de demonstrativo que continua tabela no celular: célula mais justa. */
@media (max-width: 700px) {
  .gestao .tabela:not(.tabela--movel) :is(th, td) { padding: var(--esp-2) var(--esp-2); font-size: var(--t-legenda); }
}