:root {
  --fundo: #10100f;
  --superficie: #1b1a18;
  --superficie-2: #23211e;
  --borda: #33302b;
  --texto: #f3efe9;
  --texto-fraco: #a49e94;
  --tomate: #d64541;
  --tomate-claro: #e8635f;
  --queijo: #e9b949;
  --manjericao: #4f9d69;
  --aviso: #d98324;
  --raio: 10px;
}

@media (prefers-color-scheme: light) {
  :root {
    --fundo: #f7f4ef;
    --superficie: #ffffff;
    --superficie-2: #f0ebe3;
    --borda: #ded6ca;
    --texto: #221f1c;
    --texto-fraco: #6d6459;
  }
}

* { box-sizing: border-box; }

/* `hidden` precisa vencer qualquer `display` de classe: `.sobreposicao` (display: flex)
   anulava o atributo e a janela ficava aberta engolindo cliques. */
[hidden] { display: none !important; }

/* Dica própria (troca o `title` nativo, que tem atraso do sistema, fora do nosso controle).
   O atraso fica só na entrada — sair esconde na hora, como um tooltip comum. */
[data-dica] { position: relative; }
[data-dica]::after {
  content: attr(data-dica);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 6px);
  background: #1b1a18;
  color: #f3efe9;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: .75rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .1s;
  z-index: 40;
}
[data-dica]:hover::after { opacity: 1; transition-delay: .3s; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

header.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  position: sticky;
  top: 0;
  z-index: 10;
}

header.topo h1 { font-size: 1.1rem; margin: 0; }
header.topo nav { display: flex; gap: 6px; flex-wrap: wrap; }

main { max-width: 1100px; margin: 0 auto; padding: 20px; }
.estreito { max-width: 620px; }

/* Telas de fila (caixa e cozinha): sem teto de largura; quem decide quantos cartões cabem
   por linha é o tamanho do cartão. */
main.largo { max-width: none; }

/* A largura (320px) é a mesma do menu do cliente (`#painel-cardapio`): mexeu numa, mexa
   na outra. */
main.painel { max-width: 320px; margin-left: 0; padding-top: 0; padding-left: 0; }

/* Escopado em `main.painel` de propósito: a mesma `.caixa-opcao` monta o menu da loja,
   onde as caixas separadas continuam. */
main.painel .caixas-opcao { gap: 0; }
main.painel .caixa-opcao { border-width: 0; border-radius: 0; padding: 6px 11px; }

/* `top` é medido no JS (altura em que o cabeçalho termina). */
#espiada {
  position: fixed;
  left: 320px;
  width: calc(100vw - 320px);
  bottom: 0;
  overflow: auto;
  padding: 12px;
  background: var(--fundo);
  border-left: 1px solid var(--borda);
  z-index: 20;
}

h2 { font-size: 1.15rem; margin: 24px 0 12px; }
h3 { font-size: 1rem; margin: 0 0 8px; }

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 16px;
  margin-bottom: 12px;
}

.grade { display: grid; gap: 12px; }
.grade.duas { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grade.tres { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Largura mínima 340px = cartão num celular de 360px: o pedido no monitor tem o mesmo
   tamanho e só muda quantos cabem lado a lado. */
/* auto-FILL, e não auto-fit: com um pedido só, o auto-fit esticaria o cartão pelo monitor
   inteiro. */
.grade.quatro,
.grade.cinco { grid-template-columns: repeat(auto-fill, minmax(var(--cartao-min, 340px), 1fr)); }

.linha { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.entre { justify-content: space-between; }
/* `flex: 1` sozinho tem base ZERO: numa linha apertada o item encolhe até a maior palavra
   em vez de descer. Com base de verdade, ou cabe ou ocupa a linha inteira. */
.crescer { flex: 1 1 200px; }

button, .botao {
  font: inherit;
  padding: 9px 14px;
  border-radius: 8px;
  border: 1px solid var(--borda);
  background: var(--superficie-2);
  color: var(--texto);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button:hover:not(:disabled) { border-color: var(--texto-fraco); }
button:disabled { opacity: .45; cursor: not-allowed; }

/* Vale para <a class="botao principal">, e não só <button>. */
button.principal, .botao.principal { background: var(--tomate); border-color: var(--tomate); color: #fff; font-weight: 600; }
button.principal:hover:not(:disabled), .botao.principal:hover { background: var(--tomate-claro); }
button.sucesso { background: var(--manjericao); border-color: var(--manjericao); color: #fff; }
button.perigo  { background: transparent; border-color: var(--tomate); color: var(--tomate-claro); }
button.pequeno, .botao.pequeno { padding: 5px 9px; font-size: .85rem; }

input, select, textarea {
  font: inherit;
  width: 100%;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid var(--borda);
  background: var(--fundo);
  color: var(--texto);
}
label { display: block; margin-bottom: 10px; font-size: .9rem; color: var(--texto-fraco); }

/* A caixa existe só para o botão "mostrar" ficar sobre a borda do campo; o `label > input`
   deixa de alcançá-lo, então o respiro de 4px e a cor do texto são devolvidos aqui. */
.campo-senha { position: relative; display: block; }
.campo-senha > input { margin-top: 4px; padding-right: 78px; color: var(--texto); }
.olho-senha {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  margin-top: 2px;
  width: auto;
  background: none;
  border: 0;
  padding: 4px 8px;
  font-size: .78rem;
  color: var(--texto-fraco);
}
.olho-senha:hover:not(:disabled) { border-color: transparent; color: var(--tomate-claro); }
label > input, label > select, label > textarea { margin-top: 4px; color: var(--texto); }
label.inline { display: flex; align-items: center; gap: 8px; color: var(--texto); }
label.inline input { width: auto; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borda); font-size: .92rem; }
th { color: var(--texto-fraco); font-weight: 600; }
.direita { text-align: right; }
.centro { text-align: center; }
th.ordenavel { cursor: pointer; user-select: none; white-space: nowrap; }
th.ordenavel:hover { color: var(--texto); }

.etiqueta {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  border: 1px solid var(--borda);
  background: var(--superficie-2);
}
.etiqueta.novo         { background: #3a2b1b; border-color: var(--aviso); color: #f0c088; }
.etiqueta.aceito,
.etiqueta.em_preparo   { background: #2b2f3a; border-color: #6b7fa8; color: #b8c7e8; }
.etiqueta.pronto       { background: #1f3328; border-color: var(--manjericao); color: #9bd6b0; }
.etiqueta.saiu_entrega { background: #33291f; border-color: var(--queijo); color: #f0d38a; }
.etiqueta.entregue,
.etiqueta.fechado      { background: #23211e; color: var(--texto-fraco); }
.etiqueta.recusado,
.etiqueta.cancelado    { background: #3a2020; border-color: var(--tomate); color: #f0a6a4; }
.etiqueta.pago         { background: #1f3328; border-color: var(--manjericao); color: #9bd6b0; }
.etiqueta.pendente     { background: #3a2b1b; border-color: var(--aviso); color: #f0c088; }

.aviso, .erro, .ok {
  padding: 10px 12px;
  border-radius: 8px;
  margin: 10px 0;
  font-size: .92rem;
  border: 1px solid;
}
.erro  { background: #3a2020; border-color: var(--tomate); color: #f7c9c7; }
.ok    { background: #1f3328; border-color: var(--manjericao); color: #b6e6c6; }
.aviso { background: #33291f; border-color: var(--aviso); color: #f2d5ad; }

/* Fica acima dos painéis abertos (a ficha técnica usa 60) e dos controles do mapa (1000).
   A própria faixa .ok/.erro é o cartão. Seletor duplo: `.sobreposicao` e `.caixa-modal`
   vêm mais abaixo no arquivo e, com uma classe só, venceriam estas. */
.sobreposicao.aviso-flutuante { z-index: 9999; cursor: pointer; }
.caixa-modal.caixa-aviso {
  width: min(360px, 100%);
  max-height: 70vh;
  overflow-y: auto;
  padding: 0;
  background: none;
  border: none;
}
.caixa-aviso .ok, .caixa-aviso .erro { margin: 0; white-space: pre-line; box-shadow: 0 8px 28px rgba(0, 0, 0, .5); }
.aviso-flutuante[data-link="1"] .caixa-aviso { cursor: auto; user-select: text; }

.fraco { color: var(--texto-fraco); font-size: .88rem; }
.vazio { color: var(--texto-fraco); padding: 24px; text-align: center; }
.preco { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Cardápio */
.produto { border-bottom: 1px solid var(--borda); }
.produto:last-child { border-bottom: 0; }
.produto h4 { margin: 0; font-size: .98rem; }

/* Fila da cozinha — o layout muda conforme a configuração do gerente */
/* A escolha do aparelho pelo gerente governa o *tamanho* do cartão, não o número de
   colunas (o navegador conta). */
.fila { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(var(--cartao-min, 340px), 1fr)); }
.fila.celular { grid-template-columns: 1fr; }
.fila.tablet  { --cartao-min: 340px; }
.fila.monitor { --cartao-min: 340px; }
/* A TV é a única que foge dos 340px (lida de dois metros). */
.fila.tv      { --cartao-min: 420px; font-size: 1.15rem; }
.fila.tv .cartao { padding: 22px; }
/* Impressão: a tela é só o painel de apoio pra clicar Imprimir — uma coluna, estreita,
   igual ao celular (o cupom de verdade é o papel, não a grade). */
.fila.impressao { grid-template-columns: 1fr; max-width: 420px; }

/* A cor chega no `style` do cartão (--pintura, tinta legível em --tinta). O texto de
   dentro perde a cor própria: "fraco" some sobre amarelo. */
.cartao.pintado {
  background: var(--pintura);
  border-color: var(--pintura);
  color: var(--tinta);
}
.cartao.pintado .fraco,
.cartao.pintado .aviso,
.cartao.pintado .obs-destaque,
.cartao.pintado .etiqueta { color: inherit; }
.cartao.pintado .aviso,
.cartao.pintado .obs-destaque,
.cartao.pintado .etiqueta { background: rgba(0, 0, 0, .16); border-color: currentColor; }
.cartao.pintado button { border-color: currentColor; }

/* O botão é um quadrado de 30px: o alvo do dedo não pode ter o tamanho do desenho. */
.setas-ordem { display: inline-flex; gap: 2px; }
.seta-ordem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--texto);
}
.seta-ordem:hover:not(:disabled) { background: var(--fundo); border-color: transparent; }
.seta-ordem svg { display: block; }

.abertura-turno { max-width: 560px; margin: 0 auto; }
.abertura-turno h2 { margin: 0 0 6px; }
.abertura-turno > input { width: 100%; max-width: 240px; }
.rotulo-secao {
  display: block;
  margin: 22px 0 8px;
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--texto-fraco);
}
.linha-entregador { padding: 8px 0; border-bottom: 1px solid var(--borda); gap: 12px; }
.linha-entregador:last-child { border-bottom: 0; }
.linha-entregador input { max-width: 150px; }
.rodape-fixo {
  max-width: 560px;
  margin: 12px auto 0;
  padding-top: 14px;
  border-top: 1px solid var(--borda);
}
.rodape-fixo button { width: 100%; }

.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); margin-bottom: 16px; flex-wrap: wrap; }
.abas button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; padding: 10px 14px; }
.abas button.ativa { border-bottom-color: var(--tomate); color: var(--tomate-claro); font-weight: 600; }

.travado { opacity: .5; }
.travado input, .travado select { pointer-events: none; }

/* Painel escuro sempre com o mesmo tom, em tema claro ou escuro: é a peça de navegação. */

header.topo .marca { color: inherit; text-decoration: none; }

.topo-botao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.topo-botao.destaque { background: var(--tomate); border-color: var(--tomate); color: #fff; }
.topo-botao.destaque:hover { background: var(--tomate-claro); border-color: var(--tomate-claro); }

.menu-fundo {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility 0s linear .22s;
  z-index: 40;
}
.menu-fundo.aberto { opacity: 1; visibility: visible; transition: opacity .22s ease, visibility 0s; }

.menu-lateral {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  width: min(340px, 88vw);
  height: 100dvh;
  overflow-y: auto;
  background: #16150f;
  color: #efe9e0;
  border-right: 1px solid #000;
  transform: translateX(-100%);
  visibility: hidden;
  /* `visibility` sem animação na abertura: animada, o foco não teria onde pousar (a busca
     abria sem cursor). */
  transition: transform .22s ease, visibility 0s linear .22s;
}
.menu-lateral.aberto { transform: none; visibility: visible; transition: transform .22s ease, visibility 0s; }

@media (prefers-reduced-motion: reduce) {
  .menu-lateral, .menu-fundo { transition: none; }
}

body.menu-aberto { overflow: hidden; }

.menu-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid #2b2823;
}
.menu-marca {
  color: #efe9e0;
  text-decoration: none;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.menu-fechar {
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  line-height: 1;
  font-size: 1.3rem;
  border-radius: 999px;
  background: #2b2823;
  border-color: #3a3630;
  color: #efe9e0;
}

.menu-busca { padding: 12px 18px; border-bottom: 1px solid #2b2823; }
.menu-busca input { background: #0f0e0b; border-color: #3a3630; color: #efe9e0; }
.menu-sem-resultado { padding: 18px; color: #a49e94; font-size: .9rem; }

.menu-secoes { list-style: none; margin: 0; padding: 0; }
.menu-itens { list-style: none; margin: 0; padding: 0; }

.menu-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 15px 18px;
  border: 0;
  border-bottom: 1px solid #2b2823;
  border-radius: 0;
  background: #16150f;
  color: #efe9e0;
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.menu-cabeca:hover { background: #23211a; }
.menu-secao.aberta > .menu-cabeca { background: #4a4640; color: var(--tomate-claro); }
a.menu-cabeca.atual { color: var(--tomate-claro); }

.menu-sinal::before { content: "+"; font-size: 1.1rem; line-height: 1; }
/* Só o cabeçalho da seção troca o sinal: sem o `>`, cada sabor de dentro também virava "×". */
.menu-secao.aberta > .menu-cabeca .menu-sinal::before,
.menu-linha.aberto > .menu-item .menu-sinal::before { content: "\00d7"; }

.menu-item {
  display: block;
  padding: 13px 18px 13px 30px;
  background: #26241d;
  color: #e6e0d8;
  border-bottom: 1px solid #16150f;
  font-size: .95rem;
  text-decoration: none;
}
.menu-item:hover { background: #322f26; }
.menu-item.atual { color: var(--tomate-claro); font-weight: 600; }

button.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #16150f;
  border-radius: 0;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.menu-linha.aberto > .menu-item { color: var(--tomate-claro); font-weight: 600; }

.menu-linha.escolhido > .menu-item {
  background: #3b2a26;
  color: var(--tomate-claro);
  font-weight: 600;
}
.menu-linha.escolhido > .menu-item .menu-sinal::before { content: "\2713"; }
#menu-montagem { position: sticky; top: 0; z-index: 3; }
.menu-detalhe.montagem {
  background: #211f1a;
  border-top: 1px solid #2b2823;
  border-bottom: 1px solid #2b2823;
}
.resumo-pizza { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; }
.resumo-pizza dt { color: #a49e94; font-size: .82rem; }
.resumo-pizza dd { margin: 0; }

.montagem-bloqueio {
  position: fixed;
  inset: 0;
  z-index: 54;
  background: rgba(0, 0, 0, .55);
}
.menu-detalhe.montagem.flutuante {
  position: fixed;
  z-index: 55;
  top: 50%;
  transform: translateY(-50%);
  left: 8px;
  width: calc(min(340px, 88vw) - 16px);
  max-height: 80vh;
  overflow-y: auto;
  border: 1px solid var(--tomate);
  border-radius: var(--raio);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .55);
}
@media (min-width: 900px) {
  body.menu-fixo .menu-detalhe.montagem.flutuante {
    width: calc(var(--barra) - 16px);
  }
}

.menu-detalhe {
  padding: 12px 18px 16px 30px;
  background: #16150f;
  border-bottom: 1px solid #2b2823;
  font-size: .9rem;
  color: #c9c2b7;
}
.menu-detalhe .preco { color: #efe9e0; }
/* `label` e `label.inline` fixam a cor do tema (escura no claro): sobre o painel preto o
   texto sumia. */
.menu-detalhe label { color: #efe9e0; }
.menu-detalhe label:has(input:disabled) { color: #8a837a; }
.menu-detalhe .fraco { color: #a49e94; }
.menu-detalhe select,
.menu-detalhe input {
  margin: 10px 0;
  background: #0f0e0b;
  border-color: #3a3630;
  color: #efe9e0;
}
.menu-detalhe button { background: #2b2823; border-color: #3a3630; color: #efe9e0; }
/* O topo do painel também é escuro: o botão herdava o cinza claro do tema. */
#menu-topo-extra button { background: #2b2823; border-color: #3a3630; color: #efe9e0; }
#menu-topo-extra button:hover { border-color: var(--texto-fraco); }
.menu-detalhe button.principal { background: var(--tomate); border-color: var(--tomate); color: #fff; }

.menu-detalhe .na-pizza { color: var(--tomate-claro); font-weight: 600; }
.menu-detalhe .na-pizza::before { content: "\2713"; margin-right: 5px; }
.menu-detalhe button.tirar {
  background: #3b2a26;
  border-color: var(--tomate);
  color: var(--tomate-claro);
  font-weight: 600;
}
/* A margem sai do h2 e vai para a linha: no flex a margem do título entra na conta de
   quem centraliza. */
.cabecalho-carrinho { margin: 24px 0 12px; gap: 14px; }
.cabecalho-carrinho h2 { margin: 0; }

.menu-detalhe button.tirar:hover:not(:disabled) {
  background: var(--tomate);
  border-color: var(--tomate);
  color: #fff;
}

/* =========================================================
   Tela do cliente: faixa de foto, abas e painel embutido
   ========================================================= */

.faixa-foto {
  height: 200px;
  background: #16150f center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--borda);
}
.faixa-foto .fraco { color: #6f6a62; }

.marca-loja { display: flex; align-items: center; gap: 22px; max-width: 92%; }

/* O amarelo é o da borda da pizza, escrito à mão porque a faixa é sempre escura e o
   `--queijo` muda no modo claro. */
.marca-pizza {
  width: 140px; height: 140px; flex: none;
  border-radius: 50%; object-fit: cover;
  border: 3px solid #e9b949;
}
.marca-nome { max-height: 104px; max-width: 100%; width: auto; height: auto; min-width: 0; }

@media (max-width: 560px) {
  .marca-loja { gap: 14px; }
  .marca-pizza { width: 96px; height: 96px; }
  .marca-nome { max-height: 74px; }
}

.barra-abas {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  padding: 0 8px 0 0;
}
.barra-abas > .linha { gap: 0; }

.aba-cardapio {
  border: 0;
  border-radius: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--texto);
  padding: 14px 22px;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
}
.aba-cardapio:hover { background: var(--superficie-2); }
.aba-cardapio.ativa { border-bottom-color: var(--tomate); color: var(--tomate); }

.link-discreto {
  align-self: center;
  padding: 6px 10px;
  font-size: .8rem;
  color: var(--texto-fraco);
  text-decoration: none;
  white-space: nowrap;
}
.link-discreto:hover { color: var(--texto); text-decoration: underline; }
.link-discreto.borda-direita { padding-right: 4px; }

.botao-login {
  align-self: center;
  padding: 6px 14px;
  border: 1px solid var(--tomate);
  border-radius: 8px;
  color: var(--tomate);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-decoration: none;
  white-space: nowrap;
}
.botao-login:hover { background: var(--tomate); color: #fff; }

.lista-opcoes { display: grid; gap: 8px; margin-top: 10px; }
.lista-opcoes label {
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  cursor: pointer;
}
.lista-opcoes label:hover { border-color: var(--texto-fraco); }
.lista-opcoes input { width: auto; margin-top: 3px; }

.duas-colunas { display: flex; align-items: flex-start; gap: 20px; }
#painel-cardapio { flex: 0 0 320px; max-width: 320px; }
#painel-pedido { flex: 0 0 300px; max-width: 300px; }
.coluna-central { flex: 1; min-width: 0; }

@media (min-width: 901px) {
  body.menu-embutido main { max-width: none; padding: 0 20px 20px 0; }

  body.menu-embutido .menu-lateral.embutido {
    border-left: 0;
    border-top: 0;
    border-radius: 0 0 var(--raio) 0;
  }
  #painel-cardapio, #painel-pedido {
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
  }
  body.menu-embutido #menu-montagem { display: none; }

  /* No computador a grade do cardápio e "Seus dados" ficam lado a lado dentro da coluna
     central, como as duas colunas da tela de Lançar pedido do caixa — sem etapas. */
  .coluna-central { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 20px; align-items: start; }
}

@media (max-width: 900px) {
  #painel-pedido { display: none; }
}

.menu-lateral.embutido {
  position: static;
  width: 100%;
  height: auto;
  transform: none;
  visibility: visible;
  transition: none;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
}
body.menu-embutido .menu-fundo { display: none; }
body.menu-embutido #menu-montagem { top: 0; }

@media (max-width: 800px) {
  .faixa-foto { height: 130px; }
  .duas-colunas { flex-direction: column; }
  #painel-cardapio { flex: none; max-width: none; width: 100%; }
  .coluna-central { width: 100%; }
  .aba-cardapio { flex: 1; padding: 12px 10px; }
  .barra-abas { padding: 0; }
  .barra-abas > .linha:last-child { width: 100%; justify-content: flex-end; padding-right: 10px; }
}

.menu-detalhe .rotulo-campo {
  display: block;
  margin-bottom: 6px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #efe9e0;
}
.menu-detalhe .rotulo-campo .sem-caixa-alta { text-transform: none; letter-spacing: 0; }

.menu-detalhe .campo-borda { margin: 0 0 8px; }

/* Conteúdo em linha própria, sem quebrar: dentro de `.linha` o nome do tamanho caía
   embaixo do quadradinho. */
.caixa-opcao .opcao-conteudo {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.caixa-opcao .marcador {
  flex: none;
  width: 15px;
  height: 15px;
  border: 1px solid #6d675f;
  border-radius: 3px;
  background: #0f0e0b;
}
.caixa-opcao.escolhida .marcador {
  background: var(--tomate);
  border-color: var(--tomate);
  box-shadow: inset 0 0 0 2px #0f0e0b;
}

.caixas-opcao { display: grid; gap: 8px; }
.caixa-opcao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 11px;
  text-align: left;
  background: #0f0e0b;
  border: 1px solid #3a3630;
  border-radius: 8px;
  color: #efe9e0;
  cursor: pointer;
  font-size: .9rem;
}
.caixa-opcao:hover { border-color: var(--texto-fraco); }
.caixa-opcao.escolhida { border-color: var(--tomate); background: #2a1d1b; }
.caixa-opcao .fraco { color: #a49e94; }

/* Com `space-between` e nome de duas linhas, a caixa ficava flutuando no meio: vai à
   frente do nome, alinhada ao topo. */
.caixa-opcao.opcao-marcar {
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
}
/* `width: auto`: senão a caixa de marcar herda o `width: 100%` de `input, select,
   textarea` e não sobra espaço para o nome (o `label.inline` já faz esse reset; esta
   lista não usa `.inline`). */
.caixa-opcao.opcao-marcar input[type="checkbox"] { flex: none; width: auto; margin-top: 3px; }

/* Fica fora da lista que rola: o segundo passo precisa estar sempre à vista. */
.agendar-rodape {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--borda);
}

.sobreposicao {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, .6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.caixa-modal {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 16px;
  width: min(460px, 100%);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
.caixa-modal.largo {
  width: min(1000px, 96vw);
}
.caixa-modal.cheio {
  width: min(1280px, 96vw);
  max-height: 92vh;
}
/* Cabeçalho gruda no topo ao rolar a lista: mesma necessidade do `#clientes-caixa`, aqui
   a lista de insumos pode crescer bastante. */
.tabela-cadastro-insumo thead th {
  position: sticky;
  top: 0;
  background: var(--superficie);
  z-index: 1;
  box-shadow: 0 -1px 0 var(--superficie);
}
/* Tabela em vez de flex/grid: nomes de insumo muito variáveis quebrariam linhas e
   desalinhariam a coluna vizinha. */
.tabela-insumos { width: 100%; border-collapse: collapse; }
.tabela-insumos td { padding: 8px 6px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela-insumos td.ficha-check { width: 24px; padding-right: 0; }
.tabela-insumos td.ficha-nome { text-align: left; padding-left: 8px; white-space: nowrap; }
.tabela-insumos td.ficha-qtd { width: 130px; }
.tabela-insumos td.ficha-qtd input { width: 100%; }
.tabela-insumos td.ficha-check + td + td + td.ficha-check { padding-left: 32px; }

/* Ficha do sabor: uma coluna de quantidade por tamanho, numa tabela só (genéricos e
   específicos juntos). Cabe bem na largura do modal "cheio" (tela de laptop). */
.tabela-ficha-sabor th {
  text-align: center; font-size: .72rem; color: var(--texto-fraco); font-weight: 600;
  padding: 0 6px 6px; white-space: nowrap;
}
.tabela-ficha-sabor th.ficha-th-nome { text-align: left; padding-left: 8px; }
.tabela-ficha-sabor td.ficha-qtd { width: 90px; }
/* Lista rola sozinha: o botão de confirmar não pode sumir abaixo da dobra. */
.montar-lista {
  overflow-y: auto;
  margin-top: 10px;
  padding-right: 4px;
}
.montar-lista label { padding: 7px 0; border-bottom: 1px solid var(--borda); }
.montar-lista label:has(input:disabled) { opacity: .45; }

/* Abaixo de 900px volta a ser gaveta: 280px de menu num celular não deixariam largura
   para a pizza. */
@media (min-width: 900px) {
  body.menu-fixo { --barra: 280px; }

  body.menu-fixo .menu-lateral {
    width: var(--barra);
    transform: none;
    visibility: visible;
    transition: none;
  }
  body.menu-fixo .menu-fundo { display: none; }

  body.menu-fixo header.topo,
  body.menu-fixo main { margin-left: var(--barra); }

  body.menu-fixo .topo-botao,
  body.menu-fixo .menu-fechar { display: none; }

  /* Quem tira o `hidden` é o script (alternarMenu): forçar por CSS voltaria a brigar com o
     atributo. */

  body.menu-fixo.menu-aberto { overflow: auto; }
}

@media (max-width: 600px) {
  main { padding: 14px; }
  .fila.monitor, .fila.tv, .fila.tablet { grid-template-columns: 1fr; }
  header.topo { flex-direction: column; align-items: stretch; }
  header.topo nav { justify-content: flex-end; }
  .esconde-estreito { display: none; }
}

/* Grudado no alto porque o cliente monta a pizza rolando a tela: senão o aviso sumiria
   com o primeiro sabor. */
.relogio-reserva {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin: 10px 0;
  font-size: .92rem;
  border: 1px solid var(--manjericao);
  border-radius: 8px;
  background: #1f3328;
  color: #b6e6c6;
}

/* Tabular: sem isso o "1" é mais estreito que o "8" e o relógio treme a cada segundo */
.relogio-reserva .contador {
  font-variant-numeric: tabular-nums;
  font-size: 1.2em;
  font-weight: 600;
}

/* A cor é o aviso; o texto continua legível para quem não distingue vermelho */
.relogio-reserva.acabando {
  border-color: var(--tomate);
  background: #3a2020;
  color: #f7c9c7;
}
.relogio-reserva.acabando .contador { color: #ff8a85; }

.relogio-reserva button {
  white-space: nowrap;
  margin-left: 8px;
  vertical-align: middle;
}

/* O valor tem largura fixa, encostado à direita, para cair na MESMA coluna. `min-width: 0`
   no conteúdo: em flex o padrão não encolhe, e nome comprido empurrava o valor para fora
   do celular. */
.linha-resumo { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.linha-resumo .conteudo { flex: 1; min-width: 0; }
.linha-resumo .preco { min-width: 5.5rem; text-align: right; white-space: nowrap; }
.linha-resumo .acao { flex: none; }

a.destaque { color: var(--tomate); font-weight: 700; text-decoration: underline; }

.documento { line-height: 1.6; }
.documento h3 { margin: 22px 0 8px; font-size: 1rem; }
.documento p, .documento li { margin: 8px 0; }

.caixa-pergunta {
  width: min(420px, 100%);
  margin: 0;
}
.caixa-pergunta label { margin: 0; }
.linha.direita { justify-content: flex-end; }

/* Cor sozinha não serve a quem não distingue vermelho: a palavra ("Amanhã"/dia da
   semana) vai junto. A lista pula o dia fechado sem avisar. */
.caixa-opcao.outro-dia,
.caixa-opcao.outro-dia strong,
.caixa-opcao.outro-dia .legenda-dia {
  color: var(--tomate);
}



/* Altura fixa, e não proporção: num celular um quadro alto empurraria os campos para
   baixo da dobra. */
.mapa-gps-quadro {
  display: block;
  width: 100%;
  height: 210px;
  margin-top: 10px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie-2);
}
.mapa-gps-recado { margin: 6px 0 0; }

/* `a:not([class])` de propósito: só o link no meio de uma frase, sem tocar no que tem
   visual próprio. O azul padrão dava 1,9:1 no fundo escuro; o vermelho da marca
   (#d64541) dá 4,0:1 no claro (abaixo do mínimo), então o tema claro usa um tom mais
   fechado. O sublinhado fica: cor sozinha não basta. */
:root { --link: var(--tomate-claro); }
@media (prefers-color-scheme: light) {
  :root { --link: #b3302c; }
}

a:not([class]) { color: var(--link); }


/* Painel escuro do menu emprestado às outras áreas (carrinho, pedidos, login). Redefine
   as variáveis da paleta em vez de listar elementos: tudo dentro acompanha nos dois temas. */
.painel-menu {
  --fundo: #16150f;
  --superficie: #2b2823;
  --superficie-2: #23211a;
  --borda: #3a3630;
  --texto: #efe9e0;
  --texto-fraco: #a49e94;
  /* O painel é escuro também no tema claro: o link aqui dentro usa o vermelho claro nos dois. */
  --link: var(--tomate-claro);

  background: var(--fundo);
  color: var(--texto);
  border: 1px solid #33302b;
  border-radius: var(--raio);
  padding: 14px;
}

/* O traço de fora vem da paleta do tema, e não da escura redefinida aqui (senão a moldura
   sumiria no claro). */
@media (prefers-color-scheme: light) {
  .painel-menu { border-color: #ded6ca; }
}

/* Nas telas da equipe o painel é o próprio <main>: sem folga ele encosta na borda do
   celular. A largura desconta a folga; o max-width de cada tela continua valendo. */
main.painel-menu { width: calc(100% - 28px); margin: 14px auto; }

.painel-menu > h2:first-child,
.painel-menu > .linha:first-child h2 { margin-top: 0; }


/* Altura fixa porque a Leaflet exige (senão vira faixa de zero pixel). `z-index: 0`: as
   camadas da Leaflet (400/1000) passariam por cima do menu lateral (50); com o contexto
   de empilhamento a briga fica dentro da caixa. */
#mapa-zonas {
  position: relative;
  z-index: 0;
  height: 420px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie-2);
}
@media (max-width: 700px) { #mapa-zonas { height: 320px; } }


.mapa-gps-taxa {
  margin: 8px 0 0;
  padding: 8px 10px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--superficie-2);
  font-size: .95rem;
}


/* `.linha` (display: flex) numa <td> tira a célula do cálculo das colunas: aqui a célula
   volta a ser célula e os botões ficam lado a lado por espaçamento. */
td.linha {
  display: table-cell;
  vertical-align: middle;
  white-space: nowrap;
}
td.linha > * + * { margin-left: 8px; }

.insumo-acoes { white-space: nowrap; vertical-align: middle; }
.insumo-acoes > * + * { margin-left: 8px; }
.insumo-acoes input { vertical-align: middle; }
.insumo-acoes-separador {
  display: inline-block;
  width: 1px;
  height: 22px;
  background: var(--borda);
  vertical-align: middle;
}

#zonas { overflow-x: auto; }


/* Vermelha e em negrito: é a única linha do cartão que muda o que a cozinha faz. O
   vermelho a separa do âmbar do `.aviso` (âmbar é o relógio). */
.obs-destaque {
  color: var(--tomate-claro);
  font-weight: 700;
  font-size: 1rem;
}


/* A caixa do cardápio rola sozinha (altura fixa) e o que o caixa monta fica logo abaixo,
   parado. */
/* Todas com a mesma altura: a que traz o acréscimo escrito ficaria mais baixa. */
.w-opcao {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 4px 10px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  cursor: pointer;
}
.w-opcao.marcada { border-color: var(--tomate); background: #2a1d1b; }

/* A folha veste todo input com largura cheia, moldura e padding; numa bolinha isso vira
   caixa de 50px. */
.w-opcao { margin-bottom: 0; color: var(--texto); }
.w-opcao input {
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}


/* Recolhidos, e não escondidos: o pedido para sábado segue a um clique de quem precisa
   aceitá-lo. */
.outros-dias {
  margin-top: 14px;
  padding: 8px 10px;
  border: 1px dashed var(--borda);
  border-radius: var(--raio);
}
.outros-dias > summary {
  cursor: pointer;
  color: var(--texto-fraco);
  font-size: .92rem;
}
.outros-dias[open] > summary { margin-bottom: 10px; color: var(--texto); }

.resumo-discreto {
  display: inline-block;
  cursor: pointer;
  list-style: none;
  font-weight: 400;
  font-size: .92rem;
  color: var(--texto);
  padding: 4px 0;
}
.resumo-discreto::-webkit-details-marker { display: none; }

summary.botao { list-style: none; }
summary.botao::-webkit-details-marker { display: none; }


/* Com `flex: 1` (base zero) a caixa encolhia até a maior palavra; com base de verdade,
   ou cabe ao lado do botão ou ocupa a linha inteira. */

#erro-endereco:not(:empty) { align-self: flex-start; }


.mapa-rota {
  height: 340px;
  margin-bottom: 12px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  overflow: hidden;
  z-index: 0;              /* o mapa não pode passar por cima do painel */
}

/* Contorno claro: fica sobre o mapa e o algarismo sumiria numa rua clara. */
.ponto-rota {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--tomate);
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}

.ponto-rota.aguardando { background: var(--texto-fraco); }

.ponto-loja {
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  color: var(--tomate-claro);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}

.painel-entrega {
  width: min(460px, 94vw);
  max-height: 88vh;
  overflow-y: auto;
}

/* Um sobre o outro, largura toda: lado a lado "Retomar navegação" quebra no celular. */
.painel-entrega .acoes-entrega {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}
.painel-entrega .acoes-entrega button {
  width: 100%;
  padding: 14px 12px;
  font-size: 1rem;
}

.abas-cardapio {
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
}
.abas-cardapio > .linha { gap: 4px; }
.abas-cardapio > .linha:first-child { align-items: flex-end; }
.abas-cardapio .botao-editar { align-self: center; margin-left: 10px; }

/* Sub-abas (as categorias de uma mesma aba): mais leves que as abas, para não parecerem
   outro menu do mesmo nível. */
.sub-abas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.sub-abas button {
  padding: 4px 12px;
  font-size: .8rem;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--borda);
  color: var(--texto-fraco);
}
.sub-abas button:hover { color: var(--texto); border-color: var(--texto-fraco); }
.sub-abas button.ativa { background: var(--tomate); border-color: var(--tomate); color: #fff; font-weight: 600; }
.sub-abas .qtd { opacity: .75; margin-left: 2px; }

/* Tamanhos e bordas dentro do cartão do cardápio: os cartões de dentro ficam mais escuros,
   como a tabela de categorias, para não parecer cartão dentro de cartão da mesma cor. */
#cardapio-tamanhos .cartao { background: var(--fundo); }

.item-cardapio {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  margin-bottom: 8px;
  background: var(--superficie);
}
.item-cardapio .item-corpo { flex: 1 1 220px; min-width: 0; }
.item-cardapio.pausado .item-corpo strong { opacity: .55; }
.item-cardapio.editando { display: block; }
.item-cardapio.editando .linha { margin-top: 10px; }

.item-valor { text-align: right; }
.item-valor .preco { display: block; }

.item-acoes { display: flex; align-items: flex-start; gap: 4px; flex-wrap: wrap; }

.acao-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 56px;
  padding: 6px 8px;
  background: none;
  border: 0;
  color: var(--texto);
  font-size: 1.05rem;
  line-height: 1.1;
}
.acao-item:hover { background: var(--fundo); border-radius: 6px; }
.acao-item.perigo { color: var(--tomate-claro); }
.acao-nome {
  font-size: .68rem;
  text-transform: lowercase;
  letter-spacing: .02em;
  color: var(--texto-fraco);
}
.ordem-item { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 2px; }
.ordem-item .acao-nome { flex-basis: 100%; text-align: center; }

/* Sem `min-width: 0` a metade da esquerda se recusa a encolher e empurra as portas para fora. */
.abas-cardapio > .linha:first-child { flex: 1 1 240px; min-width: 0; }
.abas-cardapio > .linha:last-child { flex: 0 0 auto; }

/* Enquanto a porta Relatório está aberta o painel solta os 320px e volta ao fechar. */
main.painel.relatorio-largo { max-width: none; padding-right: 20px; }

/* `#clientes-caixa` gruda no topo (`sticky`) com a altura da tela para a barra de rolagem
   horizontal ficar sempre visível; `top`/`max-height` vêm do JS
   (`ajustarCaixaClientes()`, dependem do header). */
#clientes-caixa { position: sticky; overflow: auto; padding-top: 0; }
#clientes-caixa thead th {
  position: sticky;
  top: 0;
  background: var(--superficie);
  z-index: 1;
  /* Subpixel: o Chrome gruda o título 1px abaixo do topo e a fresta mostra a linha; a sombra
     negativa a cobre sem mexer no layout. */
  box-shadow: 0 -1px 0 var(--superficie);
}

.painel-numeros {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.numero-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.numero-item .rotulo { color: var(--texto-fraco); }
.numero-item .valor  { font-weight: 600; white-space: nowrap; }
.numero-item .parte  { color: var(--texto-fraco); font-size: 0.85em; margin-left: 6px; }

.numero-item.comparado { flex-direction: column; align-items: stretch; gap: 2px; }
.numero-item .subiu  { color: var(--manjericao); font-weight: 600; }
.numero-item .caiu   { color: var(--tomate-claro); font-weight: 600; }

/* A cor de uma categoria vem da posição na lista: o mesmo tamanho de pizza tem a mesma
   cor em todos os quadros. */

.rel-topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.rel-topo h2 { margin: 0; font-size: 1.3rem; }
.rel-topo .fraco { font-size: .9rem; }

.kpis {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin-bottom: 12px;
}
.kpi {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kpi-rotulo { color: var(--texto-fraco); font-size: .9rem; }
.kpi-valor  { font-size: 1.7rem; line-height: 1.15; }
.kpi-nota   { font-size: .85rem; color: var(--texto-fraco); min-height: 1.2em; }
.kpi-nota.subiu { color: var(--manjericao); }
.kpi-nota.caiu  { color: var(--tomate-claro); }

.painel-relatorio {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(12, minmax(0, 1fr));

  /* Sem `align-items: start` de propósito: os quadros esticam até a altura da linha. */
  align-items: stretch;
}
.painel-relatorio > .cartao { margin-bottom: 0; min-width: 0; }
.painel-relatorio .c4  { grid-column: span 4; }
.painel-relatorio .c6  { grid-column: span 6; }
.painel-relatorio .c8  { grid-column: span 8; }
.painel-relatorio .c12 { grid-column: span 12; }

@media (max-width: 1280px) {
  .painel-relatorio .c4 { grid-column: span 6; }
  .painel-relatorio .c8 { grid-column: span 12; }
}
@media (max-width: 860px) {
  .painel-relatorio .c4,
  .painel-relatorio .c6,
  .painel-relatorio .c8 { grid-column: span 12; }
}

.cartao-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.cartao-topo h3 { margin: 0; }
.cartao-topo .fraco { font-size: .82rem; white-space: nowrap; }

/* ---- os cinco tons, e nada além deles ---- */
.tom-a { --tom: var(--tomate); }
.tom-b { --tom: var(--queijo); }
.tom-c { --tom: var(--manjericao); }
.tom-d { --tom: var(--aviso); }
.tom-e { --tom: var(--tomate-claro); }

/* ---- gráficos ---- */
.grafico { display: block; }
.g-grade  { stroke: var(--borda); stroke-width: 1; }
.g-eixo   { fill: var(--texto-fraco); font-size: 11px; }
.g-marca  { fill: var(--tom); font-size: 12.5px; font-weight: 700; }
.g-linha  { fill: none; stroke: var(--tom); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.g-ponto  { fill: var(--tom); stroke: var(--superficie); stroke-width: 1.5; }
.g-coluna { fill: var(--tom); opacity: .5; }
.g-coluna.forte { opacity: 1; }

.g-legenda {
  display: inline-flex;
  gap: 12px;
  font-size: .8rem;
  color: var(--texto-fraco);
  white-space: nowrap;
}
.g-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.g-legenda span::before {
  content: '';
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--tom);
}

/* ---- barras deitadas ---- */
.barras { display: flex; flex-direction: column; gap: 9px; }
.barra {
  display: grid;
  grid-template-columns: minmax(96px, 1.4fr) minmax(40px, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  font-size: .92rem;
}
.barra-rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-trilho {
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: 99px;
  height: 11px;
  overflow: hidden;
}
.barra-cheia { display: block; height: 100%; border-radius: 99px; background: var(--tom); }
.barra-valor { font-weight: 600; white-space: nowrap; font-size: .88em; }
.barra-parte { color: var(--texto-fraco); min-width: 34px; text-align: right; }

/* ---- leitura rápida ---- */
.leitura {
  list-style: none;
  counter-reset: leitura;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.leitura li {
  counter-increment: leitura;
  display: flex;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--borda);
}
.leitura li:last-child { border-bottom: 0; padding-bottom: 0; }
.leitura li::before {
  content: counter(leitura, decimal-leading-zero);
  color: var(--queijo);
  font-weight: 700;
  font-size: .9rem;
}
.leitura strong { display: block; }
.leitura .fraco { display: block; font-size: .9rem; }

/* Vale só na página do gerente (`tema-painel` na raiz); as telas de operação seguem
   pretas. Vence o modo claro do sistema por especificidade, de propósito: o painel é
   escuro nas duas preferências. */

html.tema-painel {
  --fundo: #121a30;
  --superficie: #19233f;
  --superficie-2: #212d4d;
  --borda: #2c3a61;
  --texto: #e8edfa;
  --texto-fraco: #8e99b8;

  --tomate: #5b9bf8;
  --tomate-claro: #8fc0ff;
  --queijo: #f5a04a;
  --manjericao: #2ee6a8;
  --aviso: #f0b45f;
}

html.tema-painel .tom-d { --tom: #a78bfa; }
html.tema-painel .tom-e { --tom: #f2d06b; }

/* Queda é vermelha em qualquer paleta. */
html.tema-painel .numero-item .caiu,
html.tema-painel .kpi-nota.caiu { color: #ff8a8a; }

html.tema-painel button.perigo { border-color: #ff8a8a; color: #ff8a8a; }

html.tema-painel .erro { background: #3a2230; border-color: #ff8a8a; color: #ffd0d0; }
html.tema-painel .ok   { background: #16362e; border-color: var(--manjericao); color: #b6efd8; }
html.tema-painel .aviso { background: #2a2f4d; border-color: var(--aviso); color: #f3dcb4; }
/* Regras escritas com a cor na mão não seguem a troca de variáveis: este bloco refaz só
   elas, sob `tema-painel` (as originais montam o menu da loja e as filas). */

html.tema-painel .caixa-opcao {
  background: var(--superficie-2);
  border-color: var(--borda);
  color: var(--texto);
}
html.tema-painel main.painel .caixa-opcao { border-bottom: 1px solid var(--borda); }
html.tema-painel .caixa-opcao:hover { border-color: var(--tomate); }
html.tema-painel .caixa-opcao .fraco { color: var(--texto-fraco); }
html.tema-painel .caixa-opcao.escolhida,
html.tema-painel .w-opcao.marcada { border-color: var(--tomate); background: #22355e; }
html.tema-painel .caixa-opcao .marcador { border-color: #4d5f8c; background: var(--fundo); }
html.tema-painel .caixa-opcao.escolhida .marcador { box-shadow: inset 0 0 0 2px var(--fundo); }

html.tema-painel .etiqueta { background: var(--superficie-2); }
html.tema-painel .etiqueta.novo,
html.tema-painel .etiqueta.pendente { border-color: var(--aviso); color: #f3d3a0; }
html.tema-painel .etiqueta.aceito,
html.tema-painel .etiqueta.em_preparo { border-color: #6b8ac4; color: #c3d2f0; }
html.tema-painel .etiqueta.pronto,
html.tema-painel .etiqueta.pago { border-color: var(--manjericao); color: #9fe8c9; }
html.tema-painel .etiqueta.saiu_entrega { border-color: var(--queijo); color: #f5cf9a; }
html.tema-painel .etiqueta.entregue,
html.tema-painel .etiqueta.fechado { color: var(--texto-fraco); }
html.tema-painel .etiqueta.recusado,
html.tema-painel .etiqueta.cancelado { background: #3a2230; border-color: #ff8a8a; color: #ffb3b3; }

html.tema-painel .menu-detalhe .preco,
html.tema-painel .menu-detalhe label { color: var(--texto); }
html.tema-painel .menu-detalhe .fraco,
html.tema-painel .faixa-foto .fraco { color: var(--texto-fraco); }

.painel-relatorio > .cartao { padding: 18px; }
.painel-relatorio > .pilha { min-width: 0; }

.pilha { display: flex; flex-direction: column; gap: 14px; }
.pilha > .cartao { margin-bottom: 0; }
.pilha > .cartao.estica { flex: 1 1 auto; }

.cartao.estica { display: flex; flex-direction: column; }
.cartao.estica .graf { flex: 1 1 auto; }
.cartao.estica .cartao-topo,
.cartao.estica .nota-cartao { flex: 0 0 auto; }

.graf { width: 100%; min-height: 150px; }
.cartao.alto  .graf { min-height: 264px; }
.cartao.medio .graf { min-height: 196px; }

/* Escopado por #relatorio-fechamento-corpo (não pela classe `.duas-colunas` genérica): essa
   classe também é usada no layout do cliente (index.html), e um seletor sem escopo aqui
   vazava `display:flex` por cima da grade de duas colunas do cardápio no computador. */
#relatorio-fechamento-corpo { display: flex; gap: 20px; flex: 1 1 auto; min-height: 0; }
#relatorio-fechamento-corpo > div { flex: 1 1 50%; min-width: 0; display: flex; flex-direction: column; }
.coluna-fechamentos { overflow-y: auto; }
.coluna-fechamentos h4 { margin: 0 0 8px; font-size: .9rem; color: var(--texto-fraco); }
@media (max-width: 700px) {
  #relatorio-fechamento-corpo { flex-direction: column; }
}

.selecao-mes-ano { flex-wrap: nowrap; flex: 0 0 auto; }
.selecao-mes-ano select { width: auto; flex: 0 0 auto; padding: 6px 8px; font-size: .88rem; }

.cartao.estica .escolha-mes-relatorio { flex: 1 1 auto; }
.escolha-mes-relatorio { display: flex; align-items: center; justify-content: center; }
.escolha-mes-relatorio label { text-align: center; color: var(--texto-fraco); font-size: .9rem; }
.escolha-mes-relatorio input { display: block; margin-top: 8px; }

.nota-cartao {
  margin: 12px 0 0;
  color: var(--texto-fraco);
  font-size: .84rem;
  line-height: 1.45;
}

.etiqueta-periodo {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 99px;
  padding: 6px 14px;
  color: var(--texto-fraco);
  font-size: .85rem;
  white-space: nowrap;
}

/* Vale só na tela do caixa (`tema-caixa` na raiz). Vence o tema escuro do sistema por
   especificidade, de propósito. */

html.tema-caixa {
  --fundo: #f4f6f9;
  --superficie: #ffffff;
  --superficie-2: #f7f9fc;
  --borda: #e3e8ef;
  --texto: #1a2433;
  --texto-fraco: #6b7a90;

  --tomate: #ef6c2d;
  --tomate-claro: #f2703a;
  --queijo: #e8a33d;
  --manjericao: #0f7a4d;
  --aviso: #c2410c;
}

/* ---- a barra de identificação ---- */

html.tema-caixa header.topo { padding: 10px 18px; }

.cx-marca { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cx-selo {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--tomate);
  color: #fff;
  font-weight: 700;
}
.cx-nome { font-size: 1.02rem; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.cx-nome strong { color: var(--texto); }
.cx-nome em { color: var(--tomate); font-style: normal; font-weight: 700; }
.cx-secao { color: var(--texto-fraco); font-weight: 400; }

.cx-estado {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: .86rem;
  color: var(--texto-fraco);
}
.cx-conexao { display: inline-flex; align-items: center; gap: 6px; color: var(--manjericao); font-weight: 600; }
.cx-conexao i { width: 8px; height: 8px; border-radius: 50%; background: var(--manjericao); }
.cx-conexao.caiu { color: #b91c1c; }
.cx-conexao.caiu i { background: #b91c1c; }
.cx-operador { color: var(--texto); border-left: 1px solid var(--borda); padding-left: 14px; }

@media (max-width: 720px) {
  .cx-relogio, .cx-operador { display: none; }
}

/* ---- as duas colunas ---- */

.cx-duas-colunas {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 900px) {
  .cx-duas-colunas { grid-template-columns: minmax(0, 1fr); }
}

.cx-duas-colunas.com-horarios {
  grid-template-columns: minmax(280px, 330px) minmax(0, 1fr) minmax(280px, 330px);
}
@media (max-width: 900px) {
  .cx-duas-colunas.com-horarios { grid-template-columns: minmax(0, 1fr); }
}

/* ---- a fila estreita ---- */

.cx-fila {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 14px;
  position: sticky;
  top: 72px;
  max-height: calc(100vh - 90px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (max-width: 900px) {
  .cx-fila { position: static; max-height: none; }
}

.cx-fila-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cx-fila-topo h3 { margin: 0; font-size: 1rem; }

.cx-filtros { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-filtros button {
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: 99px;
  padding: 5px 11px;
  color: var(--texto-fraco);
  font-size: .84rem;
  cursor: pointer;
}
.cx-filtros button span { opacity: .75; }
.cx-filtros button:hover { border-color: var(--tomate); color: var(--texto); }
.cx-filtros button.ativo {
  background: #fdece4;
  border-color: var(--tomate);
  color: #b8451a;
  font-weight: 600;
}

.cx-itens { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }

.cx-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  text-align: left;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 10px 11px;
  cursor: pointer;
  color: var(--texto);
}
.cx-item:hover { border-color: var(--tomate); }
.cx-item.focado { border-color: var(--tomate); background: #fdf1ec; }
.cx-item-topo, .cx-item-baixo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cx-item-nome { font-weight: 600; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- os cartões ---- */

/* Colunas de verdade, e não grade: numa grade os cartões ficariam com um palmo de vazio
   embaixo. */
.cx-cartoes {
  columns: 270px;
  column-gap: 14px;
}
.cx-cartoes > .cx-pedido,
.cx-cartoes-dentro > .cx-pedido {
  break-inside: avoid;
  margin-bottom: 14px;
}

/* A caixa "Estatística" é a terceira coluna de `.cx-duas-colunas.com-horarios`, e não um
   bloco dentro de `.cx-cartoes`. */
.cx-horarios {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}

.cx-pedido {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cx-pedido.focado { border-color: var(--tomate); background: #fffaf7; }

.cx-pedido.estado-novo { border-color: #f3b48e; }

/* ---- os cartões de horário, no meio dos cartões de pedido ---- */

.cx-horario.vago { border-color: #93c5fd; }

.cx-horario.encerrado { opacity: .55; }

/* Reaproveita o miolo do cartão da fila; o clique no cabeçalho abre (ver
   `alternarFocoHorario`). */

.cx-item-dentro > .linha.entre { align-items: flex-start; }
.cx-promocao {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: .82rem;
  color: var(--texto-fraco);
  text-align: right;
}

.cx-pedido-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cx-pedido-numero { font-weight: 700; }
.cx-pedido-linha2 { margin: 2px 0 0; }
.cx-pedido-cliente { font-weight: 600; }
.cx-endereco { margin: 0; font-weight: 600; font-size: 1rem; }
.cx-telefone { margin: 0; font-size: .82rem; }
.cx-telefone a { color: var(--tomate); font-weight: 600; text-decoration: underline; }

.cx-itens-pedido { display: flex; flex-direction: column; border-top: 1px solid var(--borda); }
.cx-linha-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 0;
  border-bottom: 1px solid var(--borda);
}
.cx-linha-item strong { font-weight: 600; }
.cx-sabor { font-size: .92rem; }

.cx-observacao { color: var(--manjericao); font-size: .85rem; font-weight: 600; }

.cx-aviso {
  background: #fff4ed;
  border: 1px solid #f5cdb4;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: .85rem;
  color: #8a3c14;
}
.cx-nota { color: var(--texto-fraco); font-size: .82rem; }

.cx-pedido-pe { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cx-total { font-size: 1.05rem; font-weight: 700; }

/* ---- botões ---- */

.cx-acao {
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: .95rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}
.cx-acao.azul { background: #2563eb; }
.cx-acao.azul:hover { background: #1d4ed8; }
.cx-acao.laranja { background: var(--tomate); }
.cx-acao.laranja:hover { background: #d95c20; }
.cx-acao.verde { background: var(--manjericao); }
.cx-acao.verde:hover { background: #0b6440; }
.cx-acao.grafite { background: #475569; }
.cx-acao.grafite:hover { background: #334155; }
.cx-acao:disabled { background: #f8c4a6; cursor: default; }

.cx-menores { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-menor {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 52px;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 6px 6px 5px;
  color: var(--texto);
  cursor: pointer;
}
.cx-menor-nome {
  font-size: .68rem;
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cx-menor:hover:not(:disabled) { border-color: var(--tomate); }
.cx-menor:disabled { color: var(--texto-fraco); cursor: default; }
.cx-menor.perigo { color: #b91c1c; border-color: #f0c0c0; }

/* ---- etiquetas de estado e de tempo ---- */

.cx-selo-estado, .cx-tempo {
  border-radius: 99px;
  padding: 3px 10px;
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
}

.cx-selo-estado { background: #eef2f7; color: #64748b; }
.cx-selo-estado.novo { background: #dbeafe; color: #1d4ed8; }
.cx-selo-estado.aceito,
.cx-selo-estado.em_preparo { background: #ede9fe; color: #6d28d9; }
.cx-selo-estado.pronto { background: #d1fae5; color: #047857; }
.cx-selo-estado.saiu_entrega { background: #fef3c7; color: #b45309; }

.cx-tempo { background: #eef2f7; color: #64748b; }
.cx-tempo.novo { background: #dbeafe; color: #1d4ed8; }
.cx-tempo.atencao { background: #ffe8d9; color: #c2410c; }
.cx-tempo.atraso { background: #fee2e2; color: #b91c1c; }

/* ---- os pedidos de outro dia ---- */

.cx-outros-dias {
  grid-column: 1 / -1;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 10px 14px;
  /* Sem isto, `.cx-cartoes` (columns: 270px) corta este bloco ao meio quando é o único
     conteúdo da coluna. */
  break-inside: avoid;
}
.cx-outros-dias summary { cursor: pointer; color: var(--texto-fraco); }
.cx-cartoes-dentro { columns: 270px; column-gap: 14px; margin-top: 12px; }

/* A tela do caixa mora em `main.painel-menu`, que redefine as variáveis para ficar escuro
   e vencia o tema claro; aqui passa a claro só no caixa. O cardápio embutido do pedido
   por WhatsApp segue escuro de propósito (é a vitrine). */

html.tema-caixa main.painel-menu {
  --fundo: #f4f6f9;
  --superficie: #ffffff;
  --superficie-2: #f7f9fc;
  --borda: #e3e8ef;
  --texto: #1a2433;
  --texto-fraco: #6b7a90;
  --link: var(--tomate);
  background: var(--fundo);
  color: var(--texto);
  border-color: var(--borda);
}

html.tema-caixa .caixa-opcao {
  background: var(--superficie-2);
  border-color: var(--borda);
  color: var(--texto);
}
html.tema-caixa .caixa-opcao .fraco { color: var(--texto-fraco); }
html.tema-caixa .caixa-opcao.escolhida,
html.tema-caixa .w-opcao.marcada { border-color: var(--tomate); background: #fdece4; }
html.tema-caixa .caixa-opcao .marcador { border-color: #c8d2e0; background: #fff; }
html.tema-caixa .caixa-opcao.escolhida .marcador {
  background: var(--tomate);
  border-color: var(--tomate);
  box-shadow: inset 0 0 0 2px #fff;
}
html.tema-caixa .faixa-foto .fraco { color: var(--texto-fraco); }

html.tema-caixa .etiqueta { background: #eef2f7; color: #64748b; border-color: transparent; }
html.tema-caixa .etiqueta.novo { background: #dbeafe; color: #1d4ed8; }
html.tema-caixa .etiqueta.aceito,
html.tema-caixa .etiqueta.em_preparo { background: #ede9fe; color: #6d28d9; }
html.tema-caixa .etiqueta.pronto,
html.tema-caixa .etiqueta.pago { background: #d1fae5; color: #047857; }
html.tema-caixa .etiqueta.saiu_entrega,
html.tema-caixa .etiqueta.pendente { background: #fef3c7; color: #b45309; }
html.tema-caixa .etiqueta.recusado,
html.tema-caixa .etiqueta.cancelado { background: #fee2e2; color: #b91c1c; }

html.tema-caixa .erro  { background: #fee2e2; border-color: #f5b5b5; color: #991b1b; }
html.tema-caixa .ok    { background: #d1fae5; border-color: #8fd9b6; color: #065f46; }
html.tema-caixa .aviso { background: #fff4ed; border-color: #f5cdb4; color: #8a3c14; }

html.tema-caixa header.topo {
  min-height: 54px;
  padding: 8px 20px;
  border-bottom: 1px solid var(--borda);
  background: var(--superficie);
}
html.tema-caixa header.topo nav { align-items: center; gap: 14px; }
html.tema-caixa .topo-botao {
  background: transparent;
  border: 1px solid var(--borda);
  color: var(--texto-fraco);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: .85rem;
  padding: 5px 12px;
}
html.tema-caixa .topo-botao:hover { border-color: var(--tomate); color: var(--tomate); }

.cx-selo { width: 32px; height: 32px; border-radius: 9px; font-size: 1rem; }
.cx-nome { font-size: 1.08rem; gap: 7px; }
.cx-secao { margin-left: 2px; font-size: 1rem; }

/* As classes `.cx-*` são neutras, mas a altura do cabeçalho e o peso do Sair estavam
   presos ao tema do caixa. */
html.tema-painel header.topo {
  min-height: 54px;
  padding: 8px 20px;
  border-bottom: 1px solid var(--borda);
  background: var(--superficie);
}
html.tema-painel header.topo nav { align-items: center; gap: 14px; }
html.tema-painel .topo-botao {
  background: transparent;
  border: 1px solid var(--borda);
  color: var(--texto-fraco);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: .85rem;
  padding: 5px 12px;
}
html.tema-painel .topo-botao:hover { border-color: var(--tomate); color: var(--tomate-claro); }

/* Esta linha mora fora do `<main>` (ver HTML): as sete portas não cabem nos 320px.
   `overflow-x` e a máscara na borda são saída de segurança para telas muito estreitas. */
.abas-painel {
  margin: 0;
  padding: 0 20px;
  gap: 3px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--superficie);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
}
.abas-painel::-webkit-scrollbar { display: none; }
.abas-painel button {
  padding: 7px 5px;
  font-size: 1rem;
  color: var(--texto-fraco);
  white-space: nowrap;
  flex: 0 0 auto;
}
.abas-painel button:hover { color: var(--texto); }

/* Hierarquia das letras nas telas do gerente e do root: o título do cabeçalho
   (`header.topo h1`, 1.1rem) é o maior, as portas acima (1rem) vêm depois, e as abas de
   dentro de cada porta (Agenda, Caixa, Cardápio…) são as menores. */
html.tema-painel .abas:not(.abas-painel) button:not(.pequeno) { font-size: .85rem; }

/* Tema da rua: quem usa está na calçada, de capacete na mão, de noite: fundo escuro, uma
   entrega em destaque por vez, alvos grandes. Regras prefixadas por `html.tema-rua`:
   `.fila` e `.item` já existem no site com outro sentido. */

html.tema-rua {
  --fundo: #16110f;
  --superficie: #201a18;
  --superficie-2: #2b2320;
  --borda: #3a2f2b;
  --texto: #f4efec;
  --texto-fraco: #a1938d;
  --tomate: #e2574c;
  --tomate-claro: #ff6f62;
  --queijo: #f0a94c;
  --manjericao: #3fcf92;

  --corpo-rua: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --forte-rua: 'Archivo', 'IBM Plex Sans', system-ui, sans-serif;
}

html.tema-rua body {
  background: #0d0a09;
  font-family: var(--corpo-rua);
  font-size: 15px;
  line-height: 1.45;
}

html.tema-rua .rua {
  max-width: 430px;
  margin: 0 auto;
  background: var(--fundo);
  min-height: calc(100vh - 54px);
  border-left: 1px solid var(--borda);
  border-right: 1px solid var(--borda);
  padding: 0;
}

html.tema-rua header.topo {
  max-width: 430px;
  margin: 0 auto;
  min-height: 54px;
  padding: 8px 14px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  position: sticky;
  top: 0;
  z-index: 500;   /* acima do mapa, que a Leaflet empilha alto */
}

/* ---------- o turno em três números ---------- */

html.tema-rua .rua-turno {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--borda);
}
html.tema-rua .rua-turno div { padding: 11px 8px 12px; text-align: center; }
html.tema-rua .rua-turno div + div { border-left: 1px solid var(--borda); }
html.tema-rua .rua-turno b {
  display: block;
  font-family: var(--forte-rua);
  font-size: 1.4rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
html.tema-rua .rua-turno span {
  display: block;
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--texto-fraco);
  margin-top: 1px;
}
html.tema-rua .rua-turno .dinheiro b { color: var(--queijo); }

/* ---------- o mapa ---------- */

html.tema-rua .mapa-rota {
  height: 200px;
  margin: 0;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--borda);
}
html.tema-rua .recado-mapa {
  margin: 0;
  padding: 8px 14px;
  font-size: .78rem;
  color: var(--texto-fraco);
  border-bottom: 1px solid var(--borda);
}

/* ---------- o corpo ---------- */

html.tema-rua .rua-corpo { padding: 14px; }
html.tema-rua .rua-lista { display: flex; flex-direction: column; gap: 14px; }

html.tema-rua .titulo-secao {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--texto-fraco);
}
html.tema-rua .titulo-secao b { font-weight: 600; color: var(--texto); letter-spacing: .11em; }

/* ---------- a entrega de agora ---------- */

html.tema-rua .agora {
  background: var(--superficie);
  border: 1px solid var(--tomate);
  border-radius: 14px;
  overflow: hidden;
}

html.tema-rua .agora-faixa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  background: linear-gradient(90deg, rgba(226, 87, 76, .22), rgba(226, 87, 76, .04));
  border-bottom: 1px solid var(--borda);
}
html.tema-rua .agora-faixa .parada {
  font-family: var(--forte-rua);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--tomate-claro);
}
html.tema-rua .agora-faixa .prazo {
  font-size: .78rem;
  color: var(--texto-fraco);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
html.tema-rua .agora-faixa .prazo b { color: var(--texto); font-weight: 600; }

html.tema-rua .agora-dentro { padding: 14px; display: flex; flex-direction: column; gap: 12px; }

html.tema-rua .endereco {
  font-family: var(--forte-rua);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
}
html.tema-rua .complemento { color: var(--texto-fraco); font-size: .88rem; margin-top: 3px; }

html.tema-rua .pessoa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--borda);
}
html.tema-rua .pessoa .quem { min-width: 0; }
html.tema-rua .pessoa .quem strong { display: block; font-weight: 600; }
html.tema-rua .pessoa .quem span {
  color: var(--texto-fraco);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
}

html.tema-rua .ligar {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--borda);
  background: var(--superficie-2);
  color: var(--texto);
  font-size: 1.1rem;
  text-decoration: none;
}

html.tema-rua .recado {
  margin: 0;
  background: rgba(240, 169, 76, .1);
  border-left: 3px solid var(--queijo);
  border-radius: 0 8px 8px 0;
  padding: 8px 11px;
  font-size: .86rem;
}
html.tema-rua .recado b { color: var(--queijo); font-weight: 600; }

html.tema-rua .itens { display: flex; flex-direction: column; gap: 7px; }
html.tema-rua .item { display: flex; gap: 9px; align-items: flex-start; font-size: .92rem; }
html.tema-rua .item .qtd {
  flex: 0 0 auto;
  min-width: 24px;
  text-align: center;
  font-family: var(--forte-rua);
  font-weight: 600;
  color: var(--tomate-claro);
  font-variant-numeric: tabular-nums;
}
html.tema-rua .item .detalhe { display: block; color: var(--texto-fraco); font-size: .8rem; }
html.tema-rua .item .recado-item { color: var(--queijo); }

html.tema-rua .conta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  background: var(--superficie-2);
  border-radius: 10px;
}
html.tema-rua .conta .valor {
  font-family: var(--forte-rua);
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
html.tema-rua .conta .como { text-align: right; font-size: .78rem; line-height: 1.35; color: var(--texto-fraco); }
html.tema-rua .conta .como b { display: block; font-size: .84rem; color: var(--texto); }
html.tema-rua .conta.cobrar { background: rgba(240, 169, 76, .13); box-shadow: inset 0 0 0 1px rgba(240, 169, 76, .35); }
html.tema-rua .conta.cobrar .valor { color: var(--queijo); }
html.tema-rua .conta.pago .como b { color: var(--manjericao); }

html.tema-rua .acoes { display: flex; flex-direction: column; gap: 8px; }
html.tema-rua .esperando {
  margin: 0;
  font-size: .84rem;
  color: var(--texto-fraco);
  text-align: center;
  padding: 4px 0;
}

/* ---------- botões, todos da largura toda ---------- */

html.tema-rua button,
html.tema-rua .botao {
  font-family: var(--corpo-rua);
  font-size: .95rem;
  font-weight: 600;
  border-radius: 10px;
  border: 1px solid var(--borda);
  background: var(--superficie-2);
  color: var(--texto);
  padding: 13px 14px;
  text-align: center;
  text-decoration: none;
  display: block;
  width: 100%;
  text-transform: none;
  letter-spacing: 0;
}
html.tema-rua .duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
html.tema-rua .botao-forte {
  background: var(--tomate);
  border-color: var(--tomate);
  color: #fff;
  padding: 15px 14px;
  font-size: 1rem;
}
html.tema-rua .botao-forte:hover { background: var(--tomate-claro); }

/* O "Sair" mora numa linha com o relógio: a regra acima o esticaria. */
html.tema-rua header.topo button {
  width: auto;
  display: inline-block;
  padding: 5px 12px;
  font-size: .85rem;
  font-weight: 500;
  background: transparent;
}

/* ---------- as próximas paradas ---------- */

html.tema-rua .fila { display: flex; flex-direction: column; gap: 8px; }

html.tema-rua .proxima {
  display: flex;
  gap: 12px;
  align-items: center;
  background: var(--superficie);
  border-radius: 11px;
  padding: 11px 13px;
  cursor: pointer;
}
html.tema-rua .proxima:hover { background: var(--superficie-2); }
html.tema-rua .proxima .ordem {
  flex: 0 0 auto;
  width: 27px; height: 27px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--borda);
  font-family: var(--forte-rua);
  font-size: .82rem;
  font-weight: 600;
  color: var(--texto-fraco);
  font-variant-numeric: tabular-nums;
}
html.tema-rua .proxima .onde { flex: 1; min-width: 0; }
html.tema-rua .proxima .onde strong { display: block; font-size: .94rem; font-weight: 600; }
html.tema-rua .proxima .onde span {
  display: block;
  font-size: .78rem;
  color: var(--texto-fraco);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.tema-rua .proxima .quanto { text-align: right; flex: 0 0 auto; }
html.tema-rua .proxima .quanto b {
  display: block;
  font-family: var(--forte-rua);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

html.tema-rua .selo-pag {
  display: inline-block;
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: 2px 7px;
  border-radius: 20px;
  font-weight: 600;
}
html.tema-rua .selo-pag.pago { background: rgba(63, 207, 146, .14); color: var(--manjericao); }
html.tema-rua .selo-pag.cobrar { background: rgba(240, 169, 76, .14); color: var(--queijo); }

/* ---------- o rodapé preso ---------- */

html.tema-rua .rua-rodape {
  position: sticky;
  bottom: 0;
  max-width: 430px;
  margin: 0 auto;
  padding: 11px 14px calc(11px + env(safe-area-inset-bottom));
  background: var(--fundo);
  border-top: 1px solid var(--borda);
  z-index: 400;
}
html.tema-rua .aviso-rodape {
  font-size: .72rem;
  color: var(--texto-fraco);
  text-align: center;
  margin: 7px 0 0;
}

/* ---------- o painel que abre no ponto do mapa ---------- */

html.tema-rua .painel-entrega { display: flex; flex-direction: column; gap: 11px; }
html.tema-rua .painel-entrega .endereco { font-size: 1.15rem; }
html.tema-rua .painel-entrega .acoes-entrega { display: flex; flex-direction: column; gap: 8px; }
html.tema-rua .painel-entrega .acoes-entrega button { width: 100%; }
html.tema-rua .painel-entrega .principal { background: var(--tomate); border-color: var(--tomate); color: #fff; }
html.tema-rua .painel-entrega .principal:disabled { opacity: .45; }

/* ---------- os recados da tela vazia ---------- */

html.tema-rua .vazio,
html.tema-rua .aviso {
  text-align: center;
  padding: 26px 18px;
  color: var(--texto-fraco);
  font-size: .92rem;
  line-height: 1.6;
}

/* Botão dentro de botão não funciona: as ações moram no corpo aberto. */
.cx-item { padding: 0; overflow: hidden; }
.cx-item-cabeca {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 10px 11px;
  color: var(--texto);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1rem;
}
.cx-item.aberto { border-color: var(--tomate); }
.cx-item.aberto .cx-item-cabeca { background: #fdf1ec; }

.cx-item-dentro {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 11px;
  border-top: 1px solid var(--borda);
  background: var(--superficie);
}
.cx-item-dentro .cx-endereco,
.cx-item-dentro .cx-telefone { margin: 0; }

/* A caixa tinha altura de tela cheia: o pedido aberto ficava espremido numa janelinha
   com rolagem própria. */
.cx-fila:has(.cx-item.aberto) { max-height: none; }

/* No celular o cartão de pedido repete o que o item da fila já abre e some. Os horários
   não têm essa repetição, então continuam. */
@media (max-width: 900px) {
  .cx-cartoes > .cx-pedido,
  .cx-cartoes > .cx-outros-dias { display: none; }
}

/* ---- a fila do caixa no celular ---- */

/* Os itens não encolhem: numa lista flex em coluna, com trinta pedidos os cartões
   viravam tarjas sem texto. */
.cx-itens > .cx-item { flex: 0 0 auto; }
.cx-item { overflow: visible; }
.cx-item-cabeca { border-radius: 10px; min-height: 0; }
.cx-item.aberto .cx-item-cabeca { border-radius: 10px 10px 0 0; }

.cx-item-cabeca { gap: 8px; padding: 11px 12px; }
.cx-item-nome {
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  flex: 0 0 auto;
}
.cx-item-topo .cx-selo-estado {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cx-item-topo .cx-tempo { flex: 0 0 auto; }

/* Mesma altura mesmo sem hora (retirada), para os cartões não pularem de tamanho. */
.cx-item-baixo { min-height: 1.1em; }
.cx-item-entrega { color: var(--texto-fraco); font-size: .85rem; }

.cx-item-cliente {
  margin: 0;
  font-weight: 600;
  font-size: 1rem;
}

/* ---- os seis filtros numa linha só ---- */

/* Seis colunas iguais, e não uma fila que quebra: cabem em 360px com o desenho em cima e
   o nome miúdo embaixo. */
.cx-filtros {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}
.cx-filtros button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--superficie);
  border: 1.5px solid var(--borda);
  border-radius: 12px;
  padding: 8px 3px 6px;
  min-width: 0;
}
.cx-filtros button.ativo {
  background: #fdece4;
  border-color: var(--tomate);
}
.cx-filtros button.ativo .cx-filtro-conta { color: #b8451a; }
.cx-filtro-alto { display: flex; align-items: center; gap: 4px; }
.cx-filtro-alto svg { flex: 0 0 auto; }
.cx-filtro-conta {
  font-size: .78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--texto-fraco);
  opacity: 1;
}
/* O zero fica apagado para a coluna não dançar quando chegar o primeiro pedido. */
.cx-filtros button .cx-filtro-conta.zero { opacity: .35; font-weight: 400; }
.cx-filtro-nome {
  font-size: .63rem;
  letter-spacing: .01em;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 901px) {
  .cx-filtros button { padding: 10px 4px 7px; }
  .cx-filtro-nome { font-size: .7rem; }
}


/* `--altura-header` é medida em JavaScript (montarBarraDoRoot, app.js): a altura muda por
   tema e tela estreita. */

.barra-root {
  position: sticky;
  top: var(--altura-header, 54px);
  z-index: 900;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  min-height: 38px;
  padding: 6px 14px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  overflow-x: auto;
  scrollbar-width: none;
}
.barra-root::-webkit-scrollbar { display: none; }

.barra-root-papeis { display: flex; gap: 4px; flex: 0 0 auto; }

.barra-root button {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 4px 11px;
  font-size: .82rem;
  color: var(--texto-fraco);
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
  width: auto;
  display: inline-block;
}
.barra-root button:hover { background: var(--fundo); color: var(--texto); border-color: transparent; }
.barra-root button.ativo {
  background: var(--tomate);
  border-color: var(--tomate);
  color: #fff;
  font-weight: 600;
}

.lanca { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 12px; align-items: start; }
.lanca-col { display: flex; flex-direction: column; }
@media (max-width: 980px) { .lanca { grid-template-columns: 1fr; } }

.lanca .cartao { display: flex; flex-direction: column; gap: 10px; }
.lanca .cartao .rotulo-secao { margin: 0; }
.lanca .cartao label { margin: 0; }

.lanca-tipos { display: flex; gap: 8px; }
.lanca-tipo { flex: 1 1 0; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lanca-tipo.ativa { background: var(--tomate); border-color: var(--tomate); color: #fff; }

.lanca-tamanhos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.lanca-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }

.lanca-tamanho,
.lanca-opcao {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  padding: 9px 10px;
  min-height: 46px;
  line-height: 1.25;
}
.lanca-tamanho.marcada,
.lanca-opcao.marcada { border-color: var(--tomate); background: rgba(214, 69, 65, .14); }
.lanca-nome { font-size: .9rem; font-weight: 600; padding-right: 20px; }
.lanca-valor { font-size: .78rem; color: var(--manjericao); }

/* O número é a ordem em que o sabor foi marcado: decide qual metade é qual no meio a meio. */
.lanca-marca {
  position: absolute;
  top: 6px;
  right: 7px;
  min-width: 18px;
  text-align: center;
  font-size: .7rem;
  font-weight: 700;
  color: #fff;
  background: var(--tomate);
  border-radius: 20px;
  padding: 1px 6px;
}

.lanca-monta { display: flex; gap: 10px; align-items: flex-end; }
.lanca-qtd { max-width: 110px; }
.lanca-monta .principal { flex: 1; }

.lanca-tel { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.lanca-pagamentos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.lanca-pagamento { padding: 9px 4px; font-size: .82rem; font-weight: 600; }
.lanca-pagamento.ativa { border-color: var(--tomate); background: rgba(214, 69, 65, .14); color: var(--tomate-claro); }

.lanca-item {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 8px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--borda);
}
.lanca-item-qtd { color: var(--texto-fraco); }

.lanca-conta { display: flex; flex-direction: column; gap: 4px; }
.lanca-total { border-top: 1px solid var(--borda); padding-top: 8px; font-weight: 700; }

#lp-sabores .rotulo-secao {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--texto);
  margin: 16px 0 8px;
}
#lp-sabores .rotulo-secao:first-child { margin-top: 4px; }

/* Cozinha: o cartão do caixa (`.cx-pedido`) com a cor de urgência que o gerente escolheu
   (`--pintura`, tinta legível em `--tinta`). O texto de dentro perde a cor própria: o cinza
   do "fraco" some sobre amarelo. */
.cx-pedido.pintado { background: var(--pintura); border-color: var(--pintura); color: var(--tinta); }
.cx-pedido.pintado .cx-nota,
.cx-pedido.pintado .cx-item-entrega,
.cx-pedido.pintado .fraco { color: inherit; }
.cx-pedido.pintado .cx-selo-estado,
.cx-pedido.pintado .cx-tempo,
.cx-pedido.pintado .obs-destaque { background: rgba(0, 0, 0, .16); color: inherit; }
.cx-pedido.pintado .cx-itens-pedido,
.cx-pedido.pintado .cx-linha-item { border-color: rgba(0, 0, 0, .2); }
.fila.tv .cx-pedido { padding: 22px; }

/* Formato "Impressão": já impresso ganha uma borda azul (mesmo azul do botão Imprimir,
   `.cx-acao.azul`) em vez de pintar o cartão inteiro — não pode brigar com a cor de
   urgência (`.pintado`), que é um aviso mais importante. */
.cx-pedido.impresso { border-left: 4px solid #2563eb; }
.cx-selo-impresso { color: #2563eb; font-weight: 700; }

/* ---------------------------------------------------------------------
   Cupom de impressão da cozinha — mesmo espírito do ticket do projeto
   Neri Lanches (lá é PDF 58mm via `pdf`/`printing`; aqui é a própria folha
   do navegador). #ticket-impressao só existe na tela durante a impressão:
   fora de @media print fica invisível; dentro dela, é a ÚNICA coisa visível
   na página — o resto (grade, botões, cabeçalho) some.
   --------------------------------------------------------------------- */
#ticket-impressao { display: none; }

.cupom {
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px;
  line-height: 1.4;
  color: #000;
}
.cupom p { margin: 2px 0; }
.cupom-centro { text-align: center; }
.cupom-negrito { font-weight: 700; }
.cupom-maior { font-size: 13px; }
.cupom-divisor { border-top: 1px dashed #000; margin: 5px 0; }
.cupom-linha { display: flex; justify-content: space-between; gap: 8px; }
.cupom-obs { font-size: 10px; font-style: italic; padding-left: 10px; }

@media print {
  body * { visibility: hidden; }
  #ticket-impressao, #ticket-impressao * { visibility: visible; }
  #ticket-impressao {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 58mm;
  }
  @page { size: 58mm auto; margin: 3mm; }
}