/* ============================================================================
   WONI · woni-base.css · base visual comum a todos os produtos (DNA/02_layout/kit)
   ----------------------------------------------------------------------------
   Extraído do que já está em uso no portal/admin (portal.woni.com.br) e no link
   público de acompanhamento. Um produto novo começa incluindo este arquivo e o
   icones.js — e só escreve CSS próprio pro que for específico dele.

   Regras de ouro:
   - Paleta: preto, branco, cinzas e UM verde (#A8CF45). Vermelho só pra erro/atraso,
     âmbar só pra "em aberto/pendente". Nada de outras cores decorativas.
   - Fonte: Inter (fallback do sistema). Números com tabular-nums.
   - Cantos: 16px (cards/modais), 12px (botões/campos), 10px (mini-botões), 999px (badges/chips).
   - Desktop: sidebar preta fixa à esquerda. Mobile: nav flutuante inferior + FAB verde.
   - Sem travessão (—) em texto pro cliente; usa "·" ou ponto final.
   ========================================================================== */

/* A Inter entra por aqui, de um lugar só: qualquer tela que carregue este arquivo já
   recebe a fonte oficial. Antes o <link> vivia solto no painel e as outras telas
   (cardápio, PDV, salão, produção) caíam na fonte do sistema. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ---------- tokens ---------- */
:root{
  --ink:#111114;        /* preto da marca: sidebar, topo, botões primários (fixo nos 2 temas) */
  --ink-2:#3f3f46;      /* texto secundário */
  --cinza:#71717a;      /* texto de apoio, legendas */
  --linha:#e5e5e8;      /* bordas */
  --fundo:#f5f5f6;      /* fundo da página */
  --fundo-suave:#f4f4f6;/* fundo de campos, chips neutros */
  --card:#ffffff;       /* superfícies */
  --texto:#111114;      /* texto principal (muda no tema escuro) */

  --verde:#A8CF45;      /* verde da marca (único). Texto sobre ele: sempre escuro */
  --verde-esc:#5e8a12;  /* verde pra texto/ícone sobre branco (contraste) */
  --verde-suave:#f3f8e6;/* fundo de badge/nota verde */
  --verde-txt:#14251a;  /* texto/ícone POR CIMA do verde (o verde é claro demais pra branco) */
  --verde-borda:#d3e6a3;

  --ok:#15803d;         /* sucesso (texto) */
  --erro:#dc2626;       /* erro / atrasado */
  --ambar:#92400e;      /* pendente / em aberto (texto) */

  --raio:16px; --raio-p:12px; --raio-mini:10px;
  --sombra:0 1px 2px rgba(17,17,20,.04),0 6px 20px -10px rgba(17,17,20,.10);
  /* ---- tipografia: a fonte e os quatro pesos oficiais ---- */
  --font-primary:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --fonte:var(--font-primary);          /* nome antigo, mantido pra não quebrar nada */

  --font-regular:400;    /* texto corrido e descrições */
  --font-medium:500;     /* rótulos, menus, apoio */
  --font-semibold:600;   /* títulos, categorias, botões */
  --font-bold:700;       /* preços e valores: o que precisa saltar */

  /* escala de tamanhos: um lugar só pra mexer, e sem exagero no celular */
  --t-pagina:clamp(22px,4.4vw,28px);    /* título de tela no painel */
  --t-secao:clamp(18px,3.2vw,21px);     /* título de seção */
  --t-cartao:17px;                      /* título de card */
  --t-corpo:14.5px;                     /* texto normal */
  --t-rotulo:13px;                      /* label de campo */
  --t-apoio:12.5px;                     /* informação auxiliar */
  --t-botao:14.5px;
}
html[data-tema="escuro"]{
  --ink-2:#c7c7cc; --cinza:#9a9aa2; --linha:#2c2c31;
  --fundo:#0e0e10; --card:#1b1b1e; --texto:#f4f4f5; --fundo-suave:#242428;
  --sombra:0 1px 2px rgba(0,0,0,.3),0 6px 20px -10px rgba(0,0,0,.5);
}

/* ---------- reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font-primary);font-weight:var(--font-regular);
  font-feature-settings:"tnum" 1,"cv11" 1;-webkit-font-smoothing:antialiased;background:var(--fundo);color:var(--texto);min-height:100dvh;line-height:1.45;transition:background-color .2s,color .2s}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
.oculto{display:none!important}
.ic{width:18px;height:18px;flex-shrink:0}
.tabular{font-variant-numeric:tabular-nums}

/* ---------- shell: sidebar (desktop) + topo (mobile) + conteúdo ---------- */
.app{display:flex;min-height:100dvh}
.principal{flex:1;min-width:0;display:flex;flex-direction:column}
.lateral{display:none}
@media(min-width:900px){
  .lateral{display:flex;flex-direction:column;width:236px;flex-shrink:0;position:sticky;top:0;height:100dvh;background:var(--ink);color:#fff;padding:24px 14px 18px;gap:4px;overflow:hidden}
  .lateral .marca{display:flex;align-items:center;gap:9px;padding:0 10px 18px;font-weight:var(--font-bold);letter-spacing:.14em}
  .lateral .grupo{font-size:10px;font-weight:var(--font-semibold);letter-spacing:.12em;text-transform:uppercase;color:#8f8f98;padding:8px 12px 4px}
  .nav-lat{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;color:#c9c9cf;font-size:14px;font-weight:var(--font-medium);text-align:left;width:100%;transition:background .15s,color .15s}
  .nav-lat .ic{width:18px;height:18px}
  .nav-lat:hover{background:rgba(255,255,255,.06);color:#fff}
  .nav-lat.ativo{background:#fff;color:var(--ink)}
  .lateral .rodape{margin-top:auto;font-size:11px;color:#8f8f98;text-align:center;padding-top:10px}
}
.topo{position:sticky;top:0;z-index:20;background:var(--ink);color:#fff;padding:0 16px;padding-top:env(safe-area-inset-top)}
.topo-in{display:flex;align-items:center;gap:10px;height:56px}
.topo .marca{font-weight:var(--font-bold);letter-spacing:.14em}
.topo .direita{margin-left:auto;display:flex;align-items:center;gap:8px}
@media(min-width:900px){.topo{display:none}}
.cabeca{display:none}
@media(min-width:900px){
  .cabeca{display:flex;align-items:center;gap:14px;padding:26px 28px 0}
  .cabeca h1{font-size:22px;font-weight:var(--font-semibold);letter-spacing:-.01em}
  .cabeca .direita{margin-left:auto;display:flex;align-items:center;gap:8px}
}
.btn-ico{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--ink-2);border:1px solid var(--linha);background:var(--card)}
.topo .btn-ico{color:#d4d4d8;border-color:#3a3a40;background:transparent}
.conteudo{width:100%;max-width:1080px;margin:0 auto;padding:18px 16px calc(110px + env(safe-area-inset-bottom))}
@media(min-width:900px){.conteudo{max-width:1600px;padding:22px 28px 60px}}
.conteudo.tela-cheia{max-width:none}

/* nav flutuante (mobile) + FAB */
/* ---- escolha do ramo do negócio ----
   É a chave que decide como o sistema inteiro se comporta. Merece cartão com
   ícone e uma frase, não um menu suspenso escondido num canto. */
.ramos{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.ramo{display:flex;align-items:center;gap:12px;text-align:left;width:100%;
  background:var(--fundo-suave);border:1.5px solid var(--linha);border-radius:13px;
  padding:13px 14px;transition:border-color .15s,background .15s}
@media(hover:hover){.ramo:hover{border-color:var(--cinza-2)}}
.ramo.ativo{border-color:var(--texto);background:var(--card);box-shadow:var(--sombra)}
.ramo .ic{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:var(--card);border:1px solid var(--linha);color:var(--ink-2);flex-shrink:0}
.ramo.ativo .ic{background:var(--verde-suave);border-color:var(--verde-borda);color:var(--verde-esc)}
.ramo .ic svg{width:18px;height:18px}
.ramo .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ramo .nom{font-size:14.5px;font-weight:var(--font-semibold)}
.ramo .res{font-size:12px;color:var(--cinza);line-height:1.35}
.ramo .marca{flex-shrink:0;color:var(--verde-esc)}
.ramo .marca svg{width:17px;height:17px}

/* ---- setores no painel ---- */
.setor-bloco>.cab{align-items:center}
.setor-bloco .setor-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:var(--verde-suave);color:var(--verde-esc);flex-shrink:0}
.setor-bloco .setor-ic svg{width:17px;height:17px}
.setor-bloco .setor-ic.foto{object-fit:cover;background:var(--fundo-suave)}
.setor-foto-linha{display:flex;align-items:center;gap:12px}
.setor-foto-linha .botoes{display:flex;gap:8px;flex-wrap:wrap}
.setor-foto-previa{width:74px;height:74px;border-radius:12px;object-fit:cover;
  border:1px solid var(--linha);background:var(--fundo-suave);flex-shrink:0}
.setor-cats{display:flex;flex-wrap:wrap;gap:7px}
.setor-cats .pilula{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;
  background:var(--fundo-suave);border:1px solid var(--linha);border-radius:999px;padding:5px 11px}
.setor-cats .pilula b{font-weight:var(--font-semibold);color:var(--cinza);font-size:11.5px}
.icones-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:7px}
.ico-opt{display:grid;place-items:center;height:44px;border-radius:11px;
  border:1.5px solid var(--linha);background:var(--fundo-suave);color:var(--ink-2)}
.ico-opt svg{width:18px;height:18px}
.ico-opt.ativo{border-color:var(--texto);background:var(--verde-suave);color:var(--verde-esc)}

/* ---- troca de unidade (rede) ----
   Fica logo abaixo da marca, no alto da lateral: é a primeira coisa que o
   lojista de rede precisa saber — em qual loja ele está mexendo agora. */
.troca-unidade{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  border-radius:12px;padding:9px 11px;margin:0 0 14px;transition:background .15s}
.troca-unidade:hover{background:rgba(255,255,255,.12)}
.troca-unidade .ic svg{width:17px;height:17px;color:var(--verde);flex-shrink:0}
.troca-unidade .txt{flex:1;min-width:0;display:flex;flex-direction:column}
.troca-unidade .rot{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:#8f8f98}
.troca-unidade .nom{font-size:13.5px;font-weight:var(--font-semibold);color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.troca-unidade .seta svg{width:15px;height:15px;color:#8f8f98}

.nav-mobile{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom));z-index:40;display:flex;gap:2px;align-items:center;max-width:96vw;overflow-x:auto;background:rgba(17,17,20,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:22px;padding:7px;box-shadow:0 12px 40px rgba(0,0,0,.4)}
.nav-mobile button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 13px;border-radius:15px;color:#8f8f98;font-size:10px;font-weight:var(--font-medium);min-width:62px;transition:all .15s}
.nav-mobile button .ic{width:20px;height:20px}
.nav-mobile button.ativo{background:#fff;color:var(--ink)}
@media(min-width:900px){.nav-mobile{display:none}}
.fab{position:fixed;right:16px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:41;width:56px;height:56px;border-radius:50%;background:var(--verde);color:#14251a;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(168,207,69,.45);animation:fab-pulso 2.2s ease-in-out infinite}
.fab .ic{width:24px;height:24px}
@keyframes fab-pulso{0%,100%{box-shadow:0 10px 30px rgba(168,207,69,.45)}50%{box-shadow:0 10px 30px rgba(168,207,69,.15),0 0 0 10px rgba(168,207,69,.12)}}
@media(min-width:900px){.fab{display:none}}
@media(prefers-reduced-motion:reduce){.fab{animation:none}}

/* ---------- seções e resumo (tiles) ---------- */
.secao{margin:22px 2px 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.secao h3{font-size:12px;font-weight:var(--font-semibold);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.secao span{font-size:12px;color:var(--cinza)}
.secao .direita{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.resumo{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
@media(max-width:639px){.resumo{grid-template-columns:1fr 1fr}}
.tile{background:var(--card);border-radius:14px;border:1px solid var(--linha);box-shadow:var(--sombra);padding:14px 16px}
.tile .rot{font-size:11px;color:var(--cinza);font-weight:var(--font-medium);letter-spacing:.05em;text-transform:uppercase}
.tile .num{font-size:21px;font-weight:var(--font-bold);margin-top:4px;font-variant-numeric:tabular-nums}
.tile.verde .num{color:var(--ok)}
.tile.vermelho .num{color:var(--erro)}
.tile.ambar .num{color:var(--ambar)}

/* ---------- lista / item ---------- */
.lista{display:flex;flex-direction:column;gap:10px}
.item{background:var(--card);border-radius:14px;border:1px solid var(--linha);box-shadow:var(--sombra);padding:13px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;text-align:left;width:100%;transition:border-color .15s}
button.item:active{transform:scale(.995)}
@media(hover:hover){button.item:hover{border-color:#c9c9cf}}
.item .icone{width:42px;height:42px;border-radius:11px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:var(--font-semibold);flex-shrink:0}
.item .icone .ic{width:19px;height:19px}
.item .icone.claro{background:var(--fundo-suave);color:var(--ink-2);border:1px solid var(--linha)}
.item .info{flex:1;min-width:170px}
.item .tit{font-weight:var(--font-medium);font-size:14.5px}
.item .sub{font-size:12px;color:var(--cinza);margin-top:2px}
.item .valor{font-weight:var(--font-bold);font-variant-numeric:tabular-nums}
.vazio{text-align:center;color:var(--cinza);padding:34px 16px;background:var(--card);border-radius:var(--raio);border:1px solid var(--linha);font-size:13.5px}

/* ---------- badges e chips ---------- */
.badge{display:inline-block;font-size:10px;font-weight:var(--font-semibold);border-radius:6px;padding:4px 8px;letter-spacing:.06em;white-space:nowrap}
.badge.on,.badge.pago,.badge.ok{background:var(--verde-suave);color:var(--verde-esc);border:1px solid var(--verde-borda)}
.badge.aberto,.badge.pendente{background:#fffbeb;color:var(--ambar);border:1px solid #fde68a}
.badge.atrasado,.badge.erro{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
.badge.off,.badge.neutro,.badge.contato{background:var(--fundo-suave);color:var(--ink-2);border:1px solid var(--linha)}
.badge.preto{background:var(--ink);color:#fff;border:1px solid var(--ink)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:var(--font-semibold);padding:6px 11px;border-radius:999px;background:var(--fundo-suave);border:1px solid var(--linha)}

/* ---------- botões ---------- */
.botao{background:var(--ink);color:#fff;font-weight:var(--font-semibold);font-size:15px;padding:13px;border-radius:var(--raio-p);min-height:50px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.botao[disabled]{opacity:.55}
.botao.verde{background:var(--verde);color:#14251a}
.botao-claro{border:1px solid var(--linha);border-radius:var(--raio-p);padding:13px;font-weight:var(--font-medium);font-size:14.5px;color:var(--ink-2);background:var(--card);min-height:50px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.mini-botao{background:var(--ink);color:#fff;font-weight:var(--font-medium);font-size:13px;padding:9px 14px;border-radius:var(--raio-mini);display:inline-flex;align-items:center;gap:7px;min-height:38px}
.mini-botao .ic{width:15px;height:15px}
.mini-botao.claro{background:var(--card);color:var(--ink-2);border:1px solid var(--linha)}
.mini-botao.verde{background:var(--verde);color:#14251a}
.mini-botao.perigo{background:var(--card);color:var(--erro);border:1px solid #fecaca}
.interruptor{width:48px;height:28px;border-radius:999px;background:var(--fundo-suave);position:relative;transition:background .18s;flex-shrink:0;border:1px solid var(--linha)}
.interruptor::after{content:'';position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.3);transition:left .18s}
.interruptor.on{background:var(--ink);border-color:var(--ink)}
.interruptor.on::after{left:22px}

/* ---------- formulários ---------- */
.campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.campo label{font-size:12.5px;font-weight:var(--font-medium);color:var(--ink-2)}
.campo .caixa{display:flex;align-items:center;border:1.5px solid var(--linha);border-radius:var(--raio-p);background:var(--fundo-suave)}
.campo .caixa:focus-within{border-color:var(--texto)}
.campo input,.campo select,.campo textarea{flex:1;border:0;background:transparent;padding:12px 14px;font-size:16px;outline:none;min-width:0}
.campo textarea{resize:vertical;min-height:84px}
.linha2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:639px){.linha2{grid-template-columns:1fr}}
.linha3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media(max-width:839px){.linha3{grid-template-columns:1fr 1fr}}
@media(max-width:639px){.linha3{grid-template-columns:1fr}}

/* ---- blocos de configuração: ajustes e aparência ----
   Cada assunto vira um cartão com cabeçalho próprio, em vez de tudo empilhado
   dentro de um .item só. O rodapé isola o botão de salvar. */
.bloco{background:var(--card);border-radius:14px;border:1px solid var(--linha);
  box-shadow:var(--sombra);padding:18px;display:flex;flex-direction:column;gap:16px}
.bloco+.bloco{margin-top:12px}
.bloco>.cab{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid var(--linha)}
.bloco>.cab h4{font-size:var(--t-cartao);font-weight:var(--font-semibold);letter-spacing:-.01em}
.bloco>.cab p{font-size:var(--t-apoio);color:var(--cinza);margin:0}
.bloco>.cab .direita{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.bloco>.rodape{display:flex;justify-content:flex-end;gap:8px;
  padding-top:15px;border-top:1px solid var(--linha)}
.bloco .dica{margin-top:0}
.opcao{display:flex;align-items:center;gap:14px}
.opcao .info{flex:1;min-width:0}
.opcao .tit{font-size:var(--t-corpo);font-weight:var(--font-medium)}
.opcao .sub{font-size:var(--t-apoio);color:var(--cinza);margin-top:3px;line-height:1.4}
.opcoes-lista{display:flex;flex-direction:column;gap:15px}
.opcoes-lista>.opcao+.opcao,.opcoes-lista>.opcao+.campo,.opcoes-lista>.opcao+.linha2{
  padding-top:15px;border-top:1px solid var(--linha)}
@media(max-width:639px){.bloco{padding:15px;gap:14px}}
.msg-erro{background:#fef2f2;color:var(--erro);border:1px solid #fecaca;border-radius:10px;padding:10px 12px;font-size:13.5px;font-weight:var(--font-medium);text-align:center}
.msg-ok{background:var(--verde-suave);color:var(--verde-esc);border:1px solid var(--verde-borda);border-radius:10px;padding:10px 12px;font-size:13.5px;font-weight:var(--font-medium);text-align:center}

/* ---------- modal e toast ---------- */
.veu{position:fixed;inset:0;background:rgba(10,10,12,.55);z-index:1200;display:flex;align-items:flex-end;justify-content:center}
@media(min-width:640px){.veu{align-items:center;padding:20px}}
.modal{background:var(--card);width:100%;max-width:460px;border-radius:20px 20px 0 0;padding:22px 20px calc(22px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:13px;max-height:92dvh;overflow:auto}
@media(min-width:640px){.modal{border-radius:18px;padding-bottom:22px}}
.modal h3{font-size:17px;font-weight:var(--font-semibold)}
.modal .dica{font-size:13px;color:var(--cinza);margin-top:-6px}
.modal-botoes{display:flex;gap:10px;margin-top:4px;flex-wrap:wrap}
.modal-botoes .botao{flex:1.4}.modal-botoes .botao-claro{flex:1}
/* o esvaziar é o menor dos três: ele desfaz, não avança */
#botoesResumo .botao-claro.perigo{flex:0 0 auto;padding:0 14px;color:var(--erro);
  border-color:var(--linha)}
#botoesResumo .botao-claro.perigo.armado{background:#fef2f2;border-color:#fecaca}
@media(max-width:420px){
  /* no celular o "fazer o pedido" ganha a linha inteira: é a ação principal */
  #botoesResumo .botao{flex:1 0 100%;order:-1}
}
.toast{position:fixed;left:50%;bottom:calc(86px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:11px 18px;border-radius:12px;font-size:13.5px;font-weight:var(--font-medium);z-index:1400;opacity:0;pointer-events:none;transition:all .25s;white-space:nowrap;max-width:92vw;box-shadow:0 8px 30px rgba(0,0,0,.35)}
@media(min-width:900px){.toast{bottom:28px}}
.toast.mostra{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- página pública (link pro cliente, sem login) ---------- */
.pub-topo{background:var(--ink);color:#fff;padding:14px 20px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:13px;font-weight:var(--font-semibold);letter-spacing:.04em}
.pub-topo b{color:var(--verde);font-weight:var(--font-semibold);letter-spacing:.12em}
.pub-envolt{max-width:760px;margin:0 auto;padding:22px 16px}
.hero{background:var(--ink);color:#fff;border-radius:var(--raio);padding:22px 22px 18px;margin-bottom:14px;box-shadow:var(--sombra)}
.hero .rot{font-size:12px;color:#a3a6ad;font-weight:var(--font-semibold);letter-spacing:.06em;text-transform:uppercase}
.hero .num{font-size:36px;font-weight:var(--font-bold);margin:2px 0 10px;letter-spacing:-.02em}
.hero .num.zerado{color:var(--verde)}
.hero .chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.hero .chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);color:#fff}
.hero .chip.verde{background:rgba(168,207,69,.14);border-color:rgba(168,207,69,.45);color:#cfe58a}
.hero .chip.branco{background:#fff;border-color:#fff;color:var(--ink)}
.hero .plano{font-size:14px;font-weight:var(--font-medium);color:#e4e5e8;padding-top:12px;border-top:1px solid rgba(255,255,255,.12)}
.hero .plano strong{color:var(--verde);font-size:16px}
.hero .acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.hero .botao,.hero .botao-claro{min-height:44px;padding:11px 16px;font-size:13.5px;border-radius:12px}
.hero .botao.escuro{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16)}
.card{background:var(--card);border:1px solid var(--linha);border-radius:var(--raio);padding:18px 20px;margin-bottom:14px;box-shadow:var(--sombra)}
.card h2{font-size:15px;font-weight:var(--font-semibold);margin-bottom:12px;display:flex;align-items:center;gap:10px}
.card h2 .ic-caixa{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--ink);color:#fff}
.card h2 .ic-caixa.verde{background:var(--verde-suave);color:var(--verde-esc)}
.card h2 .ic-caixa.cinza{background:var(--fundo-suave);color:var(--ink-2)}
.card h2 .ic-caixa .ic{width:16px;height:16px}
.card h2 .n{margin-left:auto;font-size:12px;font-weight:var(--font-bold);color:var(--cinza);background:var(--fundo);padding:3px 9px;border-radius:999px}
.linha-pub{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--linha)}
.linha-pub:first-of-type{border-top:0}
.linha-pub .tit{font-size:14px;font-weight:var(--font-semibold)}
.linha-pub .desc{font-size:12.5px;color:var(--cinza);margin-top:2px}
.nota{font-size:13px;color:var(--ink-2);background:var(--fundo);border-radius:12px;padding:10px 12px;margin-top:10px;line-height:1.5}
.fat{border:1px solid var(--linha);border-radius:14px;padding:13px 14px;margin-top:10px;background:var(--card)}
.fat.aberta{border-left:3px solid var(--verde)}
.fat.atrasada{border-left:3px solid var(--ink)}
.fat.paga{background:var(--fundo);border-left:3px solid var(--linha)}
.fat .cab{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.fat .tit{font-size:15px;font-weight:var(--font-semibold)}
.fat .desc{font-size:12.5px;color:var(--cinza);margin-top:3px}
.fat .dir{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.fat .valor{font-size:17px;font-weight:var(--font-bold);font-variant-numeric:tabular-nums}
.fat .badge{border-radius:999px;font-size:11px;padding:4px 10px}
.fat .badge.pendente{background:#fff;color:var(--ink);border:1px solid #c9cbd0}
.fat .badge.atrasada{background:var(--ink);color:#fff;border-color:var(--ink)}
.fat .itens{margin-top:10px;padding-top:8px;border-top:1px dashed var(--linha);display:flex;flex-direction:column;gap:5px}
.fat .it{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--ink-2)}
.fat .it.tot{font-weight:var(--font-bold);color:var(--texto);padding-top:6px;border-top:1px dashed var(--linha)}
.pub-rodape{text-align:center;font-size:11.5px;color:var(--cinza);margin-top:14px}
@media print{.pub-topo,.botao,.botao-claro,.toast,.nav-mobile,.fab,.topo,.lateral{display:none!important}body{background:#fff}.card,.fat{break-inside:avoid;box-shadow:none}}

/* ==========================================================================
   VITRINE · componentes de catálogo/cardápio público (add. 03/09/2026, WONImenu)
   Entraram no kit porque servem a qualquer produto WONI com vitrine de itens
   (WONImenu, WONIshop). Mesmos tokens, mesma paleta: preto, branco, cinzas e
   UM verde. A cor da marca da LOJA entra só como --marca (destaque pontual),
   nunca substituindo a paleta do sistema.
   ========================================================================== */
:root{ --marca:var(--verde); --marca-texto:#14251a; }

/* capa + identificação da loja */
.vit-capa{position:relative;height:140px;background:var(--ink);overflow:hidden}
.vit-capa img{width:100%;height:100%;object-fit:cover;display:block}
.vit-capa::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,17,20,0) 40%,rgba(17,17,20,.72) 100%)}
.vit-capa.vazia{height:92px}
@media(min-width:900px){.vit-capa{height:210px}.vit-capa.vazia{height:110px}}
.vit-cab{max-width:860px;margin:0 auto;padding:0 16px;position:relative}
.vit-marca{margin-top:-38px;position:relative;z-index:2}
.vit-logo{width:76px;height:76px;border-radius:20px;object-fit:cover;background:var(--card);border:3px solid var(--card);box-shadow:var(--sombra);display:block}
.vit-logo.vazia{display:flex;align-items:center;justify-content:center;color:var(--cinza);background:var(--fundo-suave)}
.vit-nome{min-width:0;margin-top:11px}
.vit-nome h1{font-size:22px;font-weight:var(--font-semibold);letter-spacing:-.01em;line-height:1.2}
.vit-nome .desc{font-size:13.5px;color:var(--cinza);margin-top:4px;max-width:60ch}
.vit-info{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 4px}

/* busca */
.vit-busca{display:flex;align-items:center;gap:9px;border:1.5px solid var(--linha);border-radius:999px;
  background:var(--card);padding:0 14px;margin:12px 0 4px}
.vit-busca .ic{color:var(--cinza)}
.vit-busca input{flex:1;border:0;background:transparent;padding:12px 0;font-size:16px;outline:none;min-width:0}

/* abas de categoria: roláveis na horizontal, grudam no topo */
.vit-abas{position:sticky;top:0;z-index:15;background:var(--card);border-bottom:1px solid var(--linha);
  margin-top:12px;padding:9px 0}
.vit-abas-in{max-width:860px;margin:0 auto;padding:0 16px;display:flex;gap:7px;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.vit-abas-in::-webkit-scrollbar{display:none}
.vit-aba{white-space:nowrap;padding:8px 15px;border-radius:999px;font-size:13.5px;font-weight:var(--font-semibold);
  color:var(--ink-2);background:var(--card);border:1px solid var(--linha);transition:background .15s,color .15s}
.vit-aba.ativo{background:var(--ink);color:#fff;border-color:var(--ink)}

/* seções e cards de produto */
.vit-corpo{max-width:860px;margin:0 auto;padding:6px 16px 10px}
.vit-secao{margin:22px 0 10px;display:flex;align-items:center;gap:9px}
.vit-secao h2{font-size:17px;font-weight:var(--font-semibold)}
.vit-secao .conta{font-size:12px;color:var(--cinza)}
.vit-grade{display:flex;flex-direction:column;gap:10px}
@media(min-width:700px){.vit-grade{display:grid;grid-template-columns:1fr 1fr;gap:10px}}
.vit-item{display:flex;gap:12px;align-items:stretch;text-align:left;width:100%;background:var(--card);
  border:1px solid var(--linha);border-radius:14px;box-shadow:var(--sombra);padding:13px 14px;transition:border-color .15s}
@media(hover:hover){button.vit-item:hover{border-color:#c9c9cf}}
button.vit-item:active{transform:scale(.995)}
.vit-item .txt{flex:1;min-width:0;display:flex;flex-direction:column}
.vit-item .nome{font-weight:var(--font-semibold);font-size:15px}
.vit-item .desc{font-size:12.5px;color:var(--cinza);margin-top:3px;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vit-item .preco{margin-top:auto;padding-top:8px;font-weight:var(--font-bold);font-variant-numeric:tabular-nums}
.vit-item .preco .de{text-decoration:line-through;color:var(--cinza);font-weight:var(--font-medium);font-size:12.5px;margin-right:6px}
.vit-item .preco .por{color:var(--verde-esc)}
.vit-item .foto{width:92px;height:92px;border-radius:12px;object-fit:contain;flex-shrink:0;background:#fff;
  border:1px solid var(--linha)}
.vit-item .foto.vazia{display:flex;align-items:center;justify-content:center;color:var(--cinza);border:1px solid var(--linha)}
.vit-item.esgotado{opacity:.5}
.vit-tags{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}

/* stepper de quantidade */
.stepper{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--linha);border-radius:999px;background:var(--card)}
.stepper button{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink-2)}
.stepper button[disabled]{opacity:.4}
.stepper .qtd{min-width:26px;text-align:center;font-weight:var(--font-semibold);font-variant-numeric:tabular-nums}

/* barra de carrinho fixa no rodapé */
.vit-carrinho{position:fixed;left:50%;transform:translateX(-50%) translateY(120%);
  bottom:calc(14px + env(safe-area-inset-bottom));z-index:45;width:min(560px,94vw);
  background:var(--ink);color:#fff;border-radius:18px;padding:12px 14px;display:flex;align-items:center;gap:12px;
  box-shadow:0 14px 40px rgba(0,0,0,.4);transition:transform .25s}
.vit-carrinho.mostra{transform:translateX(-50%) translateY(0)}
.vit-carrinho .n{width:34px;height:34px;border-radius:50%;background:var(--marca);color:var(--marca-texto);
  display:flex;align-items:center;justify-content:center;font-weight:var(--font-bold);flex-shrink:0}
.vit-carrinho .rot{font-size:11px;color:#a3a6ad;font-weight:var(--font-semibold);letter-spacing:.05em;text-transform:uppercase}
.vit-carrinho .tot{font-weight:var(--font-bold);font-variant-numeric:tabular-nums}
.vit-carrinho .ir{margin-left:auto;background:var(--marca);color:var(--marca-texto);font-weight:var(--font-semibold);
  padding:11px 16px;border-radius:12px;display:inline-flex;align-items:center;gap:7px;font-size:14px}

/* linhas do carrinho / conferência do pedido */
.car-linha{display:flex;gap:10px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--linha)}
.car-linha:first-of-type{border-top:0}
.car-linha .txt{flex:1;min-width:0}
.car-linha .nome{font-weight:var(--font-semibold);font-size:14px}
.car-linha .obs{font-size:12px;color:var(--cinza);margin-top:2px}
.car-linha .val{font-weight:var(--font-semibold);font-variant-numeric:tabular-nums;white-space:nowrap}
.car-total{display:flex;justify-content:space-between;gap:12px;padding-top:10px;margin-top:6px;
  border-top:1px dashed var(--linha);font-weight:var(--font-bold);font-size:16px}

/* opções dentro do item (variações e adicionais) */
.opc-grupo{border-top:1px solid var(--linha);padding-top:12px;margin-top:12px}
.opc-cab{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.opc-cab h4{font-size:14px;font-weight:var(--font-semibold)}
.opc{display:flex;align-items:center;gap:11px;padding:10px 0;border-top:1px solid var(--fundo-suave);width:100%;text-align:left}
/* a opção esgotada fica à vista, riscada: o cliente vê que o tamanho existe e acabou */
.opc.esgotada{opacity:.45;cursor:not-allowed}
.opc.esgotada .nome{text-decoration:line-through}
.opc.esgotada .extra{text-transform:uppercase;font-size:11px;letter-spacing:.04em}
.opc:first-of-type{border-top:0}
.opc .marca-sel{width:22px;height:22px;border-radius:50%;border:2px solid var(--linha);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:transparent}
.opc.quad .marca-sel{border-radius:7px}
.opc.sel .marca-sel{background:var(--ink);border-color:var(--ink);color:#fff}
.opc .nome{flex:1;font-size:14px}
.opc .extra{font-size:13px;color:var(--cinza);font-variant-numeric:tabular-nums}

/* aviso de loja fechada */
.vit-fechada{background:var(--ink);color:#fff;border-radius:var(--raio);padding:16px 18px;margin:14px 0;
  display:flex;align-items:center;gap:12px}
.vit-fechada .t{font-weight:var(--font-semibold)}
.vit-fechada .s{font-size:13px;color:#c9c9cf;margin-top:2px}
.vit-rodape{text-align:center;font-size:12px;color:var(--cinza);padding:10px 16px 8px}
.vit-rodape b{color:var(--ink-2)}

/* =====================================================================
   OPERAÇÃO · pedido, acompanhamento, entregador, cozinha e salão
   Componentes novos do WONImenu que também voltam pro kit do DNA.
   Tudo com alvo de toque grande (mín. 44px) e texto que dá pra ler de longe.
   ===================================================================== */

.dica{font-size:13px;color:var(--cinza);margin-top:6px}
.botao-grande{width:100%;min-height:64px;border:0;border-radius:var(--raio);background:var(--ink);color:#fff;
  font:700 17px/1.2 var(--fonte);display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;
  margin-bottom:12px;box-shadow:var(--sombra)}
.botao-grande.verde{background:var(--verde);color:#14251a}
.botao-grande:active{transform:translateY(1px)}
.botao-grande .ic{width:22px;height:22px}

/* --- faixa da mesa no cardápio --- */
.vit-mesa{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--ink);color:#fff}
.vit-mesa .s{font-size:12.5px;color:#c9c9cf;margin-top:1px}
.vit-mesa .mini-botao{margin-left:auto;flex-shrink:0}

/* --- atalho de navegação: o botão flutuante e a folha de seções ---
   O problema que ele resolve: a pessoa está no meio de uma lista longa e quer
   pular pra outro lugar. Rolar de volta até as abas é o atrito que faz desistir.
   Por isso o botão fica no rodapé, onde o polegar já está. */
.vit-ir{position:fixed;left:50%;transform:translateX(-50%);z-index:44;
  bottom:calc(14px + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:10px;max-width:min(360px,90vw);
  padding:9px 14px 9px 11px;border-radius:999px;background:var(--ink);color:#fff;
  box-shadow:0 12px 34px rgba(0,0,0,.34);transition:bottom .25s,opacity .2s;cursor:pointer}
/* com a barra do pedido na tela, o atalho sobe pra não ficar um em cima do outro */
body.com-pedido .vit-ir{bottom:calc(86px + env(safe-area-inset-bottom))}
.vit-ir .ic{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.14);
  display:grid;place-items:center;flex-shrink:0}
.vit-ir .ic svg{width:16px;height:16px}
.vit-ir .txt{display:flex;flex-direction:column;min-width:0;text-align:left}
.vit-ir .txt b{font-size:13.5px;font-weight:var(--font-semibold);line-height:1.2}
.vit-ir .txt .s{font-size:11.5px;color:#a3a6ad;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vit-ir .txt .s:empty{display:none}
.vit-ir .seta{margin-left:auto;flex-shrink:0;opacity:.7}
.vit-ir .seta svg{width:15px;height:15px}
@media(hover:hover){.vit-ir:hover{background:#26262c}}

/* A folha sobe até um pouco acima do meio da tela: mostra umas cinco linhas e
   deixa o cardápio aparecendo atrás, que é o que dá a sensação de "escolhendo
   pra onde ir" em vez de "troquei de página". */
.folha-secoes{background:var(--card);width:100%;max-width:560px;
  border-radius:22px 22px 0 0;max-height:62dvh;display:flex;flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom);overflow:hidden}
@media(min-width:640px){ .veu:has(.folha-secoes){align-items:center;padding:20px}
  .folha-secoes{border-radius:20px;max-height:min(62dvh,560px);padding-bottom:0} }
.folha-secoes .alca{width:38px;height:4px;border-radius:99px;background:var(--linha);
  margin:9px auto 2px;flex-shrink:0}
.folha-secoes .cabeca{display:flex;align-items:center;gap:10px;padding:8px 16px 10px;
  border-bottom:1px solid var(--linha);flex-shrink:0}
.folha-secoes .cabeca h3{font-size:16px;font-weight:var(--font-semibold)}
.folha-secoes .cabeca .fechar{margin-left:auto;width:32px;height:32px;border-radius:50%;
  background:var(--fundo-suave);display:grid;place-items:center;color:var(--ink-2);flex-shrink:0}
.folha-secoes .cabeca .fechar svg{width:16px;height:16px}
.folha-secoes .rolagem{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:4px 10px 10px}

/* a linha: texto à esquerda, foto à direita — a mesma leitura da lista de produtos,
   pra tela inteira parecer feita pela mesma pessoa */
.sec-linha{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:10px 8px;border-radius:var(--raio-p);background:none;cursor:pointer;
  border-bottom:1px solid var(--linha)}
.sec-linha:last-child{border-bottom:0}
.sec-linha .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.sec-linha .txt b{font-size:14.5px;font-weight:var(--font-semibold);color:var(--texto);line-height:1.25}
.sec-linha .txt .s{font-size:12px;color:var(--cinza);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sec-linha .foto{width:58px;height:58px;border-radius:12px;object-fit:cover;
  background:var(--fundo-suave);flex-shrink:0}
.sec-linha .foto.vazia{display:grid;place-items:center;color:var(--cinza)}
.sec-linha .foto.vazia svg{width:22px;height:22px}
.sec-linha .aqui{font-size:10.5px;font-weight:var(--font-semibold);letter-spacing:.04em;
  text-transform:uppercase;color:var(--verde-esc);background:var(--verde-suave);
  border:1px solid var(--verde-borda);border-radius:999px;padding:3px 8px;flex-shrink:0}
.sec-linha.atual{background:var(--fundo-suave)}
@media(hover:hover){.sec-linha:hover{background:var(--fundo-suave)}}
.sec-linha:active{transform:scale(.995)}

/* --- painel: a tela de idiomas --- */
.band-painel{flex-shrink:0;line-height:0;border-radius:4px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(17,17,20,.12)}
.band-painel svg{display:block;width:32px;height:24px}
.opcao .band-painel{margin-right:2px}
.opcao .info .tit .s{font-weight:var(--font-regular);color:var(--cinza);font-size:13px}

.linha-idioma{display:flex;align-items:center;gap:12px;padding:12px 0;
  border-bottom:1px solid var(--linha)}
.linha-idioma:last-of-type{border-bottom:0}
.linha-idioma .info{flex:1;min-width:0}
.linha-idioma .tit{font-weight:var(--font-semibold);font-size:14.5px}
.linha-idioma .sub{font-size:12.5px;color:var(--cinza);margin-top:4px}
.linha-idioma .acoes{display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0}
/* a barra é o que faz "faltam 312 textos" virar uma noção de quanto falta */
.linha-idioma .barra{height:5px;border-radius:99px;background:var(--fundo-suave);
  margin-top:7px;overflow:hidden;max-width:320px}
.linha-idioma .barra span{display:block;height:100%;background:var(--verde);
  border-radius:99px;transition:width .3s}
@media(max-width:639px){
  .linha-idioma{flex-wrap:wrap}
  .linha-idioma .acoes{width:100%}
  .linha-idioma .acoes .mini-botao{flex:1}
}

/* a revisão: original à esquerda, tradução à direita, uma embaixo da outra */
.revisao-lista{display:flex;flex-direction:column}
.rev-linha{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--linha)}
.rev-linha:last-child{border-bottom:0}
.rev-linha .orig{min-width:0;display:flex;flex-direction:column;gap:3px}
.rev-linha .orig .rot{font-size:10.5px;font-weight:var(--font-semibold);letter-spacing:.06em;
  text-transform:uppercase;color:var(--cinza)}
.rev-linha .orig .txt{font-size:13.5px;color:var(--texto);line-height:1.35}
.rev-linha .trad{display:flex;align-items:center;gap:8px;min-width:0}
.rev-linha .trad .caixa{flex:1;min-width:0}
.rev-linha .trad .marca{display:inline-flex;align-items:center;gap:4px;font-size:11px;
  font-weight:var(--font-semibold);color:var(--verde-esc);flex-shrink:0}
.rev-linha .trad .marca svg{width:13px;height:13px}
/* já revisado ganha um traço verde na lateral: dá pra ver o progresso rolando */
.rev-linha.ok .orig{border-left:3px solid var(--verde);padding-left:9px;margin-left:-12px}
@media(max-width:639px){
  .rev-linha{grid-template-columns:1fr;gap:7px}
  .rev-linha.ok .orig{margin-left:0}
}

/* --- idioma: a bandeira no canto da capa e a folha de escolha --- */
.vit-capa{position:relative}
.vit-idioma{position:absolute;top:calc(10px + env(safe-area-inset-top));right:12px;z-index:6;
  display:flex;align-items:center;gap:7px;padding:5px 10px 5px 6px;border-radius:999px;
  background:rgba(17,17,20,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#fff;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.vit-idioma .band{display:block;border-radius:3px;overflow:hidden;flex-shrink:0}
.vit-idioma .band svg{display:block;width:22px;height:16px}
.vit-idioma .cod{font-size:11.5px;font-weight:var(--font-bold);letter-spacing:.06em}
@media(hover:hover){.vit-idioma:hover{background:rgba(17,17,20,.8)}}

/* a folha de idioma é a mesma folha das seções, com a bandeira no lugar da foto:
   é a linha de sempre lida ao contrário, e a pessoa reconhece o padrão */
.folha-secoes.idiomas .sec-linha{gap:14px}
.sec-linha .band{flex-shrink:0;border-radius:4px;overflow:hidden;line-height:0;
  box-shadow:0 0 0 1px rgba(17,17,20,.12)}
.sec-linha .band svg{display:block;width:34px;height:26px}
.sec-linha.idioma{text-decoration:none;color:inherit}
.sec-linha.idioma .aqui{display:grid;place-items:center;padding:0;width:26px;height:26px;
  border-radius:50%;background:var(--verde-suave);border:1px solid var(--verde-borda)}
.sec-linha.idioma .aqui svg{width:15px;height:15px;color:var(--verde-esc)}

/* --- modo demonstração: a faixa que avisa que ali não se compra ---
   Cor de aviso, não de erro: não é um problema, é um estado. E o mesmo componente
   serve o cardápio do cliente e o topo do painel, com o mesmo desenho, pra quem liga
   reconhecer na hora o que o cliente está vendo. */
.fita-demo{display:flex;align-items:center;gap:11px;padding:11px 16px;
  background:#fff6e2;color:#6b4a06;border-bottom:1px solid #f0dfb4}
.fita-demo svg{width:19px;height:19px;flex-shrink:0;color:#b8860b}
.fita-demo .txt{display:flex;flex-direction:column;min-width:0}
.fita-demo b{font-size:13.5px;font-weight:var(--font-semibold)}
.fita-demo .s{font-size:12.5px;color:#8a6a22;margin-top:1px}
.fita-demo .mini-botao{margin-left:auto;flex-shrink:0}
.fita-demo.painel{border-bottom:0}
html[data-tema="escuro"] .fita-demo{background:#2e2611;color:#f2dfae;border-bottom-color:#463a18}
html[data-tema="escuro"] .fita-demo .s{color:#cdb782}

/* o selo e o texto da tela de fim da demonstração */
.demo-selo{width:46px;height:46px;border-radius:50%;background:#fff6e2;
  display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.demo-selo svg{width:23px;height:23px;color:#b8860b}
#veuDemo h3{text-align:center}
.demo-texto{font-size:13.5px;line-height:1.55;color:var(--texto-fraco);text-align:center;margin-top:8px}

/* --- escolha grande (entrega, pagamento): alvo largo, estado claro --- */
.vit-opcoes{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.vit-escolha{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:10px 14px;text-align:left;
  border:1.5px solid var(--linha);border-radius:var(--raio-p);background:var(--card);color:var(--texto);
  font:500 14px/1.25 var(--fonte);cursor:pointer}
.vit-escolha b{display:block;font-weight:var(--font-semibold);font-size:14.5px}
.vit-escolha .s{display:block;font-size:12.5px;color:var(--cinza);margin-top:1px}
.vit-escolha .ic{width:22px;height:22px;color:var(--cinza);flex-shrink:0}
.vit-escolha.sel{border-color:var(--ink);background:var(--fundo-suave)}
.vit-escolha.sel .ic{color:var(--ink)}
@media(min-width:520px){ .vit-opcoes{flex-direction:row;flex-wrap:wrap} .vit-escolha{flex:1 1 46%} }

.car-resumo{border-top:1px solid var(--linha);margin-top:8px;padding-top:10px;display:flex;flex-direction:column;gap:5px}
.car-resumo div{display:flex;justify-content:space-between;font-size:13.5px;color:var(--cinza)}
.car-resumo .desc{color:var(--verde-esc)}

/* --- acompanhamento do pedido --- */
body.acomp{background:var(--fundo)}
.acomp-topo{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--ink);color:#fff}
.acomp-topo .voltar{color:#c9c9cf;text-decoration:none;display:flex;align-items:center;gap:4px;font-size:13px}
.acomp-topo .loja{font-weight:var(--font-semibold);margin-left:4px}
.acomp-topo .cod{margin-left:auto;font-size:12.5px;color:#c9c9cf}
.acomp-topo .cod b{color:#fff;letter-spacing:.5px}

.acomp-cartao{display:flex;gap:14px;align-items:center;background:var(--marca,var(--ink));color:var(--marca-texto,#fff);
  border-radius:var(--raio);padding:20px;margin-bottom:14px;box-shadow:var(--sombra)}
.acomp-cartao .ic{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.22);
  display:grid;place-items:center;flex-shrink:0}
.acomp-cartao .ic .ic{width:26px;height:26px;background:none}
.acomp-cartao h2{font-size:18px;font-weight:var(--font-semibold);line-height:1.2}
.acomp-cartao p{font-size:13.5px;opacity:.9;margin-top:3px}
.acomp-cartao .prazo{font-size:12.5px;margin-top:8px;font-weight:var(--font-semibold);opacity:.95}
.acomp-cartao.cancelado{background:var(--erro);color:#fff}

.acomp-linha{background:var(--card);border:1px solid var(--linha);border-radius:var(--raio);padding:6px 18px;margin-bottom:14px}
.acomp-linha .passo{display:flex;align-items:center;gap:12px;padding:11px 0;position:relative}
.acomp-linha .passo:not(:last-child):before{content:'';position:absolute;left:15px;top:34px;bottom:-6px;width:2px;background:var(--linha)}
.acomp-linha .passo.ok:not(:last-child):before{background:var(--verde)}
.acomp-linha .bolinha{width:32px;height:32px;border-radius:50%;background:var(--fundo-suave);color:var(--cinza);
  display:grid;place-items:center;flex-shrink:0;z-index:1}
.acomp-linha .bolinha .ic{width:16px;height:16px}
.acomp-linha .passo.ok .bolinha{background:var(--verde-suave);color:var(--verde-esc)}
.acomp-linha .passo.agora .bolinha{background:var(--ink);color:#fff}
.acomp-linha .txt{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--cinza)}
.acomp-linha .passo.ok .txt b,.acomp-linha .passo.agora .txt b{color:var(--texto)}
.acomp-linha .txt span{font-size:12px}
.acomp-linha .cancelado-aviso{display:flex;gap:8px;align-items:center;color:var(--erro);font-size:13.5px;padding:12px 0}

.acomp-mapa{background:var(--card);border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden;margin-bottom:14px}
.acomp-mapa .cab{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;font-size:13.5px}
.acomp-mapa .cab span{font-size:12px;color:var(--cinza)}
.acomp-mapa #mapa{height:260px;background:var(--fundo-suave)}

.estrelas{display:flex;gap:6px;margin:10px 0 14px}
.estrelas button{width:46px;height:46px;border-radius:12px;border:1px solid var(--linha);background:var(--card);
  color:var(--linha);cursor:pointer;display:grid;place-items:center}
.estrelas button .ic{width:24px;height:24px}
.estrelas button.on{color:#f0a500;border-color:#f0d08a;background:#fffaf0}

/* --- entregador --- */
body.entregador{background:var(--fundo)}
.ent-topo{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:var(--ink);color:#fff}
.ent-topo .rot{display:block;font-size:11.5px;color:#9a9aa4;text-transform:uppercase;letter-spacing:.6px}
.ent-topo b{font-size:20px;letter-spacing:1px}
.ent-topo .loja{font-size:13px;color:#c9c9cf;text-align:right;max-width:45%}
.ent-cartao{background:var(--card);border:1px solid var(--linha);border-radius:var(--raio);padding:16px 18px;margin-bottom:12px}
.ent-cartao .rot{font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--cinza);font-weight:var(--font-semibold)}
.ent-cartao h2{font-size:20px;font-weight:var(--font-semibold);margin-top:4px}
.ent-cartao .end{font-size:15px;margin-top:6px;line-height:1.4}
.ent-cartao .ref{font-size:13.5px;color:var(--cinza);margin-top:4px}
.ent-cartao .valor{font-size:26px;font-weight:var(--font-bold);margin-top:6px}
.ent-atalhos{display:flex;gap:8px;margin-top:14px}
.ent-atalhos .mini-botao{min-height:44px;text-decoration:none;flex:1;justify-content:center}
.ent-gps{display:flex;gap:12px;align-items:center;background:var(--fundo-suave);border:1px dashed var(--linha);
  border-radius:var(--raio);padding:14px 16px;margin-bottom:14px;font-size:14px}
.ent-gps .s{font-size:12.5px;color:var(--cinza);margin-top:2px}
.ent-gps.on{background:var(--verde-suave);border:1px solid var(--verde-borda);color:var(--verde-esc)}
.ent-gps.on .s{color:var(--verde-esc);opacity:.85}
.ent-pronto{text-align:center;background:var(--verde-suave);border:1px solid var(--verde-borda);border-radius:var(--raio);
  padding:26px 18px;color:var(--verde-esc)}
.ent-pronto b{display:block;font-size:17px;margin-top:8px}
.ent-pronto span{display:block;font-size:13.5px;opacity:.85;margin-top:2px}
.ent-pronto .ic{width:34px;height:34px}

/* --- cozinha (KDS) --- */
body.kds{background:#0d0d10;color:#f4f4f6;height:100dvh;margin:0;display:flex;flex-direction:column;overflow:hidden}
.kds-topo{display:flex;align-items:center;gap:14px;padding:12px 18px;background:#17171c;border-bottom:1px solid #26262e;flex-shrink:0}
.kds-topo .voltar{color:#9a9aa4;text-decoration:none;display:flex;align-items:center;gap:4px;font-size:13px}
.kds-topo .titulo{font-weight:var(--font-semibold)}
.kds-topo .direita{margin-left:auto;display:flex;align-items:center;gap:12px}
.kds-topo .relogio{font-variant-numeric:tabular-nums;font-weight:var(--font-semibold);font-size:18px}
.kds-quadro{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;padding:16px;align-items:start}
.kds-cartao{background:#17171c;border:1px solid #26262e;border-left:5px solid var(--verde);border-radius:14px;padding:14px 16px}
.kds-cartao.preparo{border-left-color:#f0a500}
.kds-cartao.pronto{border-left-color:#3b82f6}
.kds-cartao.apertado{border-left-color:#f0a500}
.kds-cartao.atrasado{border-left-color:var(--erro)}
.kds-cartao header{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.kds-cartao .cod{font-size:19px;font-weight:var(--font-bold);letter-spacing:1px}
.kds-cartao .tipo{font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;color:#9a9aa4}
.kds-cartao .tempo{margin-left:auto;font-size:13px;font-weight:var(--font-semibold);color:#9a9aa4;font-variant-numeric:tabular-nums}
.kds-cartao.atrasado .tempo{color:#ff8b8b}
.kds-cartao ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.kds-cartao li{font-size:16px;line-height:1.3}
.kds-cartao li b{color:var(--verde)}
.kds-cartao .op{display:block;font-size:13px;color:#b6b6bf;margin-top:1px}
.kds-cartao .obs{display:block;font-size:13px;color:#ffcf6b;margin-top:1px}
.kds-cartao .nota{margin-top:10px;font-size:13px;color:#ffcf6b;background:#2a2418;border-radius:10px;padding:8px 10px}
.kds-acao{width:100%;margin-top:14px;min-height:50px;border:0;border-radius:12px;background:#26262e;color:#fff;
  font:700 14.5px var(--fonte);cursor:pointer}
.kds-acao:hover{background:var(--verde);color:#14251a}
.kds-vazio{grid-column:1/-1;text-align:center;color:#9a9aa4;padding:70px 20px}
.kds-vazio b{display:block;font-size:17px;color:#f4f4f6;margin-top:10px}
.kds-vazio .ic{width:40px;height:40px}
.aviso-kds{background:var(--card);border:1px dashed var(--linha);border-radius:var(--raio);padding:30px 20px;text-align:center;color:var(--texto)}
.aviso-kds .circulo{width:54px;height:54px;border-radius:50%;background:var(--verde);color:#14251a;display:grid;place-items:center;margin:0 auto 12px}
.aviso-kds h4{font-size:16px;font-weight:var(--font-semibold);margin-bottom:6px}
.aviso-kds p{font-size:13.5px;color:var(--cinza);max-width:440px;margin:0 auto}

/* --- painel: quadro de pedidos --- */
/* ---- chamado de pedido novo ----
   Flutua por cima de qualquer tela do painel enquanto houver pedido esperando
   aceite. Some sozinho no segundo em que o lojista aceita. */
.chamado{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:70;
  display:flex;align-items:center;gap:13px;width:min(540px,calc(100vw - 24px));
  background:var(--ink);color:#fff;border-radius:16px;padding:12px 13px;
  box-shadow:0 20px 46px -14px rgba(0,0,0,.6)}
.chamado .sino{width:38px;height:38px;border-radius:11px;background:var(--verde);color:var(--ink);
  display:grid;place-items:center;flex-shrink:0;animation:chamado-sino 1.1s ease-in-out infinite}
.chamado .sino svg{width:19px;height:19px}
@keyframes chamado-sino{0%,55%,100%{transform:rotate(0)}15%{transform:rotate(-14deg)}35%{transform:rotate(14deg)}}
.chamado .txt{flex:1;min-width:0}
.chamado .tit{font-size:14.5px;font-weight:var(--font-semibold)}
.chamado .sub{font-size:12.5px;color:#c9c9d1;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chamado button{flex-shrink:0;min-height:40px;padding:0 15px;border-radius:11px;
  font-size:13.5px;font-weight:var(--font-semibold)}
.chamado .ver{background:rgba(255,255,255,.12);color:#fff}
.chamado .aceitar{background:var(--verde);color:var(--verde-txt)}
.chamado button:disabled{opacity:.55}
/* com a faixa na tela, o toast sobe pra não cair em cima dela */
body.com-chamado .toast{bottom:calc(100px + env(safe-area-inset-bottom))}
@media(max-width:899px){body.com-chamado .toast{bottom:calc(168px + env(safe-area-inset-bottom))}}
/* no celular a faixa sobe pra não tapar o menu flutuante do painel */
@media(max-width:899px){.chamado{bottom:calc(86px + env(safe-area-inset-bottom))}}
@media(max-width:560px){
  .chamado{left:12px;right:12px;transform:none;width:auto;flex-wrap:wrap}
  .chamado .txt{flex:1 1 auto}
  .chamado button{flex:1 1 0;margin-top:2px}
}
@media print{.chamado{display:none!important}}
@media(prefers-reduced-motion:reduce){.chamado .sino{animation:none}}

.ped-abas{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:14px}
.ped-abas button{flex-shrink:0;min-height:40px;padding:8px 16px;border-radius:999px;border:1px solid var(--linha);
  background:var(--card);color:var(--texto);font:600 13.5px var(--fonte);cursor:pointer;display:flex;align-items:center;gap:7px}
.ped-abas button.ativo{background:var(--ink);color:#fff;border-color:var(--ink)}
.ped-abas .n{background:var(--fundo-suave);color:var(--cinza);border-radius:999px;padding:1px 7px;font-size:11.5px;font-weight:var(--font-bold)}
.ped-abas button.ativo .n{background:rgba(255,255,255,.2);color:#fff}

.ped-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.ped-cartao{background:var(--card);border:1px solid var(--linha);border-left:4px solid var(--linha);
  border-radius:var(--raio-p);padding:14px 16px;text-align:left;cursor:pointer;width:100%;font:inherit;color:inherit}
.ped-cartao.novo{border-left-color:var(--verde)}
.ped-cartao.preparo{border-left-color:#f0a500}
.ped-cartao.pronto,.ped-cartao.saiu{border-left-color:#3b82f6}
.ped-cartao.cancelado{border-left-color:var(--erro);opacity:.7}
.ped-cartao header{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.ped-cartao .cod{font-weight:var(--font-bold);font-size:15px;letter-spacing:.6px}
.ped-cartao .tempo{margin-left:auto;font-size:12px;color:var(--cinza);font-variant-numeric:tabular-nums}
.ped-cartao .quem{font-size:13.5px;font-weight:var(--font-medium)}
.ped-cartao .oque{font-size:12.5px;color:var(--cinza);margin-top:2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ped-cartao .rodape{display:flex;align-items:center;gap:8px;margin-top:10px}
.ped-cartao .valor{margin-left:auto;font-weight:var(--font-bold)}

.ped-detalhe .linha{display:flex;justify-content:space-between;font-size:13.5px;padding:3px 0;color:var(--cinza)}
.ped-detalhe .linha b{color:var(--texto)}
.ped-passos{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}
.ped-passos button{flex:1;min-width:120px;min-height:46px;border-radius:12px;border:1px solid var(--linha);
  background:var(--card);font:700 13.5px var(--fonte);cursor:pointer;color:var(--texto)}
.ped-passos button.principal{flex:1 1 100%;background:var(--verde);border-color:var(--verde);color:#14251a;min-height:52px;font-size:15px}

/* --- mesas --- */
.mesa-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.mesa-cartao{background:var(--card);border:1px solid var(--linha);border-radius:var(--raio-p);padding:16px 14px;
  text-align:center;cursor:pointer;width:100%;font:inherit;color:inherit;min-height:118px}
.mesa-cartao .num{font-size:24px;font-weight:var(--font-bold)}
.mesa-cartao .rot{font-size:12.5px;color:var(--cinza);margin-top:2px}
.mesa-cartao .conta{font-weight:var(--font-semibold);font-size:14px;margin-top:8px}
.mesa-cartao.ocupada{border-color:var(--verde-borda);background:var(--verde-suave)}
.mesa-cartao.chamando{border-color:#f0a500;background:#fff8e8;animation:pisca 1.4s ease-in-out infinite}
@keyframes pisca{50%{background:#ffefc7}}

/* --- relatórios --- */
.rel-barras{display:flex;align-items:flex-end;gap:4px;height:150px;padding:10px 0}
.rel-barras{justify-content:center}
.rel-barras .b{flex:1 1 0;max-width:54px;background:var(--verde);border-radius:5px 5px 0 0;min-height:3px;position:relative}
.rel-barras .b:hover{background:var(--verde-esc)}
.rel-tabela{width:100%;border-collapse:collapse;font-size:13.5px}
.rel-tabela th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--cinza);padding:8px 6px}
.rel-tabela td{padding:9px 6px;border-top:1px solid var(--linha)}
.rel-tabela td:last-child,.rel-tabela th:last-child{text-align:right;font-variant-numeric:tabular-nums}

@media(prefers-reduced-motion:reduce){ .mesa-cartao.chamando{animation:none} }

/* --- comanda por pessoa dentro da mesa (divisão da conta) --- */
.comanda{border:1px solid var(--linha);border-radius:var(--raio-p);padding:10px 12px;margin-bottom:10px;background:var(--card)}
.comanda .cab{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.comanda .cab b{font-size:14.5px}
.comanda .cab .v{margin-left:auto;font-weight:var(--font-semibold);font-variant-numeric:tabular-nums}
.comanda .cab .mini-botao{flex-shrink:0}
.comanda .car-linha{padding:6px 0}
.mesa-cartao.sel{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink) inset}

/* ============================ PDV (tela de balcão) ============================
   Feita pra ficar aberta o dia inteiro: produto de um lado, comanda do outro,
   botão de cobrar sempre visível. Nada de rolagem na página, só dentro das áreas. */
body.pdv{background:var(--fundo);height:100dvh;overflow:hidden;display:flex;flex-direction:column;margin:0}

.pdv-topo{display:flex;align-items:center;gap:10px;background:var(--ink);color:#fff;
  padding:10px 12px;flex-shrink:0;min-width:0}
.pdv-topo>*{min-width:0}
.pdv-topo .voltar{display:inline-flex;align-items:center;gap:6px;color:#fff;text-decoration:none;
  font-weight:var(--font-semibold);font-size:13.5px;opacity:.85;padding:6px 8px;border-radius:var(--raio-mini)}
.pdv-topo .voltar:hover{opacity:1;background:rgba(255,255,255,.08)}
.pdv-topo .titulo{font-weight:var(--font-semibold);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  flex:1 1 auto;min-width:0}
.pdv-topo .direita{margin-left:auto;display:flex;align-items:center;gap:10px}
/* a unidade ao lado do nome: o caixa tem que saber de qual loja é esta tela */
.pdv-topo .titulo .unidade{display:inline-block;margin-left:8px;padding:2px 8px;
  border-radius:999px;background:rgba(255,255,255,.12);color:var(--verde);
  font-size:11.5px;font-weight:var(--font-semibold);vertical-align:middle}
/* rodando como aplicativo instalado: não existe "voltar pro painel" numa janela só dele */
body.como-app .pdv-topo .voltar{display:none}
.pdv-topo .relogio{font-variant-numeric:tabular-nums;font-weight:var(--font-semibold);font-size:14px;opacity:.9}
.pdv-topo .mini-botao{background:rgba(255,255,255,.12);border-color:transparent;color:#fff}
.pdv-topo .mini-botao:hover{background:rgba(255,255,255,.2)}

.pdv-tela{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:12px;padding:12px;
  overflow:hidden}
.pdv-tela>*{min-width:0}

/* --- lado dos produtos --- */
.pdv-produtos{min-height:0;min-width:0;display:flex;flex-direction:column;gap:10px}
.pdv-busca{flex-shrink:0}
.pdv-busca input{font-size:16px}
.pdv-abas{display:flex;gap:8px;overflow-x:auto;flex-shrink:0;min-width:0;padding-bottom:2px;scrollbar-width:none}
.pdv-abas::-webkit-scrollbar{display:none}
.pdv-abas button{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;
  border:1px solid var(--linha);background:var(--card);color:var(--texto);font:700 13.5px var(--fonte);cursor:pointer}
.pdv-abas button .n{font-size:11px;color:var(--cinza);font-weight:var(--font-bold)}
.pdv-abas button.ativo{background:var(--ink);border-color:var(--ink);color:#fff}
.pdv-abas button.ativo .n{color:rgba(255,255,255,.6)}

.pdv-grade{flex:1;min-height:0;overflow-y:auto;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr));align-content:start;padding-bottom:8px}
.pdv-produto{position:relative;background:var(--card);border:1px solid var(--linha);border-radius:var(--raio-p);
  padding:8px;text-align:left;cursor:pointer;font:inherit;color:inherit;display:flex;flex-direction:column;gap:4px}
.pdv-produto:hover{border-color:var(--ink)}
.pdv-produto:active{transform:scale(.98)}
.pdv-produto img{width:100%;aspect-ratio:1/1;object-fit:contain;border-radius:9px;background:#fff}
.pdv-produto .nome{font-size:13px;font-weight:var(--font-medium);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pdv-produto .preco{font-weight:var(--font-bold);font-size:14px;margin-top:auto}
.pdv-produto .marca-op{position:absolute;top:14px;right:14px;width:24px;height:24px;border-radius:8px;
  display:grid;place-items:center;background:rgba(17,17,20,.72);color:#fff}
.pdv-produto .marca-op .ic{width:14px;height:14px}
.pdv-grade .vazio{grid-column:1/-1;text-align:center;color:var(--cinza);padding:40px 10px;font-size:14px}

/* --- lado da comanda --- */
.pdv-comanda{min-height:0;background:var(--card);border:1px solid var(--linha);border-radius:var(--raio);
  display:flex;flex-direction:column;overflow:hidden}
.pdv-destino{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:12px;border-bottom:1px solid var(--linha)}
.pdv-destino button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 4px;border-radius:var(--raio-mini);
  border:1px solid var(--linha);background:var(--card);color:var(--cinza);font:700 11.5px var(--fonte);cursor:pointer}
.pdv-destino button .ic{width:18px;height:18px}
.pdv-destino button.ativo{background:var(--ink);border-color:var(--ink);color:#fff}

.pdv-quem{padding:12px;display:flex;flex-direction:column;gap:8px;border-bottom:1px solid var(--linha);
  max-height:34vh;overflow-y:auto}
.pdv-quem:empty{display:none}
.pdv-campo{width:100%;padding:11px 12px;border-radius:var(--raio-p);border:1px solid var(--linha);
  background:var(--fundo-suave);font:14px var(--fonte);color:var(--texto)}
.pdv-campo:focus{outline:none;border-color:var(--ink);background:var(--card)}

.pdv-mesas{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:6px}
.pdv-mesas button{padding:8px 4px;border-radius:var(--raio-mini);border:1px solid var(--linha);background:var(--card);
  cursor:pointer;font:inherit;color:inherit;display:flex;flex-direction:column;align-items:center;gap:2px}
.pdv-mesas button b{font-size:15px;font-weight:var(--font-semibold)}
.pdv-mesas button span{font-size:10.5px;color:var(--cinza)}
.pdv-mesas button.ocupada{background:var(--verde-suave);border-color:var(--verde-borda)}
.pdv-mesas button.sel{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink) inset}

.pdv-canal{display:flex;gap:6px;flex-wrap:wrap}
.pdv-canal button{flex:1;min-width:74px;padding:8px 6px;border-radius:999px;border:1px solid var(--linha);
  background:var(--card);color:var(--cinza);font:700 12px var(--fonte);cursor:pointer}
.pdv-canal button.ativo{background:var(--ink);border-color:var(--ink);color:#fff}

.pdv-itens{flex:1;min-height:0;overflow-y:auto;padding:6px 12px}
.pdv-linha{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--linha)}
/* a foto do item na comanda: o caixa confere a olho, sem ler. Numa fila, reconhecer
   a imagem é mais rápido que ler "X-Burguer da Casa" letra por letra. */
.pdv-linha .foto{width:38px;height:38px;border-radius:9px;object-fit:cover;
  background:var(--fundo-suave);flex-shrink:0}
.pdv-linha:last-child{border-bottom:0}
.pdv-linha .txt{flex:1;min-width:0}
.pdv-linha .txt b{display:block;font-size:13.5px;font-weight:var(--font-semibold);line-height:1.25}
.pdv-linha .txt .op{display:block;font-size:11.5px;color:var(--cinza);margin-top:2px}
.pdv-linha .qtd{display:flex;align-items:center;gap:2px;flex-shrink:0}
.pdv-linha .qtd button{width:28px;height:28px;border-radius:8px;border:1px solid var(--linha);background:var(--card);
  display:grid;place-items:center;cursor:pointer;color:var(--texto)}
.pdv-linha .qtd button .ic{width:14px;height:14px}
.pdv-linha .qtd span{min-width:22px;text-align:center;font-weight:var(--font-semibold);font-size:13.5px;font-variant-numeric:tabular-nums}
.pdv-linha .val{font-weight:var(--font-semibold);font-size:13.5px;min-width:66px;text-align:right;font-variant-numeric:tabular-nums}
.pdv-linha .tira{width:26px;height:26px;border:0;background:none;color:var(--cinza);cursor:pointer;
  display:grid;place-items:center;flex-shrink:0}
.pdv-linha .tira:hover{color:var(--erro)}
.pdv-vazio{text-align:center;color:var(--cinza);padding:36px 12px;display:flex;flex-direction:column;align-items:center;gap:6px}
.pdv-vazio .ic{width:30px;height:30px;opacity:.4}
.pdv-vazio b{font-size:14px;color:var(--texto)}
.pdv-vazio span{font-size:12.5px}

.pdv-totais{padding:12px;border-top:1px solid var(--linha);background:var(--fundo-suave)}
.pdv-totais div{display:flex;justify-content:space-between;font-size:13px;color:var(--cinza);padding:2px 0;
  font-variant-numeric:tabular-nums}
.pdv-totais .desc span:last-child{color:var(--verde-esc);font-weight:var(--font-semibold)}
.pdv-totais .grande{font-size:20px;font-weight:var(--font-semibold);color:var(--texto);padding-top:6px;margin-top:4px;
  border-top:1px solid var(--linha)}
.pdv-desconto{width:100%;margin-top:8px;padding:8px;border-radius:var(--raio-mini);border:1px dashed var(--linha);
  background:none;color:var(--cinza);font:600 12.5px var(--fonte);cursor:pointer}
.pdv-desconto:hover{border-color:var(--ink);color:var(--texto)}

.pdv-acoes{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px;border-top:1px solid var(--linha)}
.pdv-acoes button{min-height:48px;border-radius:var(--raio-p);border:1px solid var(--linha);background:var(--card);
  color:var(--texto);font:700 13.5px var(--fonte);cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;gap:6px}
.pdv-acoes button .ic{width:16px;height:16px}
.pdv-acoes button:disabled{opacity:.45;cursor:not-allowed}
.pdv-cobrar{grid-column:1/-1;background:var(--verde)!important;border-color:var(--verde)!important;color:#14251a!important;
  min-height:58px!important;font-size:17px!important;font-weight:var(--font-semibold)}

.pdv-formas{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.pdv-formas button{min-height:48px;border-radius:var(--raio-p);border:1px solid var(--linha);background:var(--card);
  color:var(--texto);font:700 13.5px var(--fonte);cursor:pointer}
.pdv-formas button.ativo{background:var(--ink);border-color:var(--ink);color:#fff}
.pdv-troco{margin-top:8px;padding:12px;border-radius:var(--raio-p);background:var(--verde-suave);
  color:var(--verde-esc);font-weight:var(--font-semibold);font-size:15px;text-align:center}
.pdv-troco b{font-size:19px}
.pdv-troco.falta{background:#fee2e2;color:var(--erro)}

/* --- o teclado do caixa: a tecla escrita no botão, e a cola ---
   A tecla impressa no botão é o que ensina o atalho sem treinamento: o caixa vê
   "F10" ao lado de Cobrar umas trinta vezes e no fim do dia usa F10. */
/* A tecla vem entre parênteses, coladinha no rótulo, do jeito que o caixa já
   conhece dos sistemas de balcão: PRODUTOS (F2). Sem caixinha, sem moldura — a
   moldura chamava mais atenção que o próprio botão. */
kbd{font:inherit;font-size:.82em;font-weight:var(--font-medium);letter-spacing:.01em;
  opacity:.62;flex-shrink:0;white-space:nowrap}
kbd::before{content:'('}
kbd::after{content:')'}
.pdv-destino button kbd{font-size:9.5px;display:block;margin-top:1px}
.pdv-acoes button kbd, .pdv-desconto kbd{margin-left:1px}

/* o produto marcado pela seta: o anel tem que ser visível de um metro de distância,
   que é a distância real entre o olho do caixa e o monitor do balcão */
.pdv-produto.foco{border-color:var(--ink);box-shadow:0 0 0 3px var(--ink) inset;
  transform:translateY(-1px)}
html[data-tema="escuro"] .pdv-produto.foco{box-shadow:0 0 0 3px #fff inset;border-color:#fff}

/* Tela pequena não tem teclado, então a dica de tecla só atrapalha — e num PDV de
   390px ela ainda empurrava a barra pro lado. Some inteira abaixo de 900px. */
@media(max-width:900px){
  kbd{display:none}
  /* e o botão da cola some junto: atalho de teclado em celular é botão morto
     ocupando o lugar do relógio */
  #btnCola{display:none}
}

/* --- comandas no PDV: a conta por pessoa, achatada de todas as mesas ---
   A cor não é decoração: verde-neutro é normal, âmbar passou de 12h, vermelho
   passou de um dia. É o que faz o dono ver a comanda esquecida sem procurar. */
.cmd-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:10px;align-content:start}
.cmd-grade .vazio{grid-column:1/-1}
.cmd-cartao{position:relative;background:var(--card);border:1px solid var(--linha);
  border-left:4px solid var(--linha);border-radius:var(--raio-p);padding:12px;
  text-align:left;cursor:pointer;font:inherit;color:inherit;
  display:flex;flex-direction:column;gap:5px}
.cmd-cartao:hover{border-color:var(--ink)}
.cmd-cartao:active{transform:scale(.99)}
.cmd-cartao .cab{display:flex;align-items:baseline;gap:8px;min-width:0}
.cmd-cartao .cab b{font-size:14.5px;font-weight:var(--font-semibold);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmd-cartao .mesa{margin-left:auto;display:inline-flex;align-items:center;gap:4px;
  font-size:11.5px;font-weight:var(--font-semibold);color:var(--cinza);flex-shrink:0}
.cmd-cartao .mesa svg{width:12px;height:12px}
.cmd-cartao .val{font-size:19px;font-weight:var(--font-bold);font-variant-numeric:tabular-nums}
.cmd-cartao .pe{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--cinza)}
.cmd-cartao .pe .tempo{margin-left:auto}
.cmd-cartao.atencao{border-left-color:#f0a500}
.cmd-cartao.atencao .tempo{color:#8a5a00;font-weight:var(--font-semibold)}
.cmd-cartao.velha{border-left-color:var(--erro)}
.cmd-cartao.velha .tempo{color:var(--erro);font-weight:var(--font-semibold)}
.cmd-cartao.chamando{border-color:#f0a500;background:#fff8e8}
.cmd-cartao .sino{position:absolute;top:8px;right:8px;font-size:9.5px;
  font-weight:var(--font-semibold);text-transform:uppercase;letter-spacing:.04em;
  color:#8a5a00;background:#fff3d6;border-radius:999px;padding:2px 7px}
/* a tira que conta as esquecidas fica âmbar quando tem alguma */
.pdv-resumo .tira.alerta{border-color:#f0d08a;background:#fffbeb}
.pdv-resumo .tira.alerta .num{color:#8a5a00}

/* Onde a seta está agora. É só um realce de fundo: a marca de SELECIONADO já é o
   check, e duas marcas fortes na mesma linha competem entre si — a pessoa deixa
   de saber qual quer dizer o quê.

   A primeira regra é geral de propósito: QUALQUER coisa navegável pela seta ganha
   um anel visível, mesmo que ninguém tenha escrito estilo pra ela. Foi assim que
   as formas de pagamento passaram despercebidas — a classe era posta, mas não
   pintava nada, e na tela parecia que o teclado não funcionava. */
[data-nav].foco{box-shadow:0 0 0 3px rgba(17,17,20,.22)}
html[data-tema="escuro"] [data-nav].foco{box-shadow:0 0 0 3px rgba(255,255,255,.3)}

.opc.foco, .botao.foco, .botao-claro.foco{background:var(--fundo-suave)}
.opc.foco{box-shadow:none}
.opc.foco{border-radius:10px;padding-left:9px;padding-right:9px;margin:0 -9px}
/* nos botões, que já têm fundo próprio, o foco é um anel em volta */
.botao.foco{background:var(--ink);box-shadow:0 0 0 3px rgba(17,17,20,.22)}
.botao-claro.foco{border-color:var(--ink);box-shadow:0 0 0 3px rgba(17,17,20,.12)}
html[data-tema="escuro"] .botao.foco{box-shadow:0 0 0 3px rgba(255,255,255,.3)}
html[data-tema="escuro"] .botao-claro.foco{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.2)}

/* --- o entregador assumindo a entrega pelo QR da sacola --- */
.ent-assumir{display:flex;align-items:center;gap:12px;background:var(--ink);color:#fff;
  border-radius:var(--raio);padding:14px;margin-bottom:12px}
.ent-assumir svg{width:24px;height:24px;color:var(--verde);flex-shrink:0}
.ent-assumir .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ent-assumir .txt b{font-size:14.5px;font-weight:var(--font-semibold)}
.ent-assumir .txt .s{font-size:12px;color:#c9c9cf;line-height:1.35}
.ent-assumir .botao{flex-shrink:0;min-height:44px;padding:0 18px}
.ent-assumir.pronto{background:var(--verde-suave);color:var(--verde-esc);
  border:1px solid var(--verde-borda)}
.ent-assumir.pronto svg{color:var(--verde-esc)}
.ent-assumir.pronto .txt .s{color:var(--ink-2)}
@media(max-width:480px){
  .ent-assumir{flex-wrap:wrap}
  .ent-assumir .botao{width:100%}
}

/* --- andamento do dia no PDV: os trilhos e o demonstrativo ---
   A diferença entre faturado e recebido é o número que quase nenhum sistema
   mostra. Por isso o Recebido é verde e o Em aberto fica âmbar quando tem. */
.and-caixa{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;flex-shrink:0;margin-bottom:10px}
.and-caixa .tira{background:var(--card);border:1px solid var(--linha);
  border-radius:var(--raio-p);padding:10px 12px}
.and-caixa .rot{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--cinza);font-weight:var(--font-semibold)}
.and-caixa .num{display:block;font-size:19px;font-weight:var(--font-bold);margin-top:2px;
  font-variant-numeric:tabular-nums}
.and-caixa .pe{display:block;font-size:11px;color:var(--cinza);margin-top:2px}
.and-caixa .tira.verde{border-color:var(--verde-borda);background:var(--verde-suave)}
.and-caixa .tira.verde .num{color:var(--verde-esc)}
.and-caixa .tira.alerta{border-color:#f0d08a;background:#fffbeb}
.and-caixa .tira.alerta .num{color:#8a5a00}
@media(max-width:900px){ .and-caixa{grid-template-columns:1fr 1fr} }

.and-trilhos{display:grid;grid-template-columns:repeat(6,minmax(180px,1fr));gap:10px;
  align-items:start;min-height:0}
@media(max-width:1400px){ .and-trilhos{grid-template-columns:repeat(3,minmax(180px,1fr))} }
@media(max-width:760px){ .and-trilhos{grid-template-columns:repeat(2,minmax(150px,1fr))} }
.and-trilho{background:var(--fundo-suave);border:1px solid var(--linha);
  border-radius:var(--raio-p);overflow:hidden;display:flex;flex-direction:column}
.and-trilho .cab{display:flex;align-items:center;gap:7px;padding:10px 11px;
  background:var(--card);border-bottom:1px solid var(--linha)}
.and-trilho .cab svg{width:16px;height:16px;color:var(--cinza)}
.and-trilho .cab b{font-size:13px;font-weight:var(--font-semibold)}
.and-trilho .cab .n{margin-left:auto;font-size:11.5px;font-weight:var(--font-bold);
  background:var(--fundo-suave);border-radius:999px;padding:1px 8px;min-width:22px;text-align:center}
.and-trilho .corpo{padding:8px;display:flex;flex-direction:column;gap:7px}
.and-trilho .nada{font-size:12px;color:var(--cinza);text-align:center;padding:14px 6px}
/* cada trilho tem sua cor no topo: dá pra achar a coluna sem ler o nome */
.and-trilho.fazendo .cab{border-bottom-color:#f0a500;box-shadow:inset 0 3px 0 #f0a500}
.and-trilho.pronto .cab{border-bottom-color:#3b82f6;box-shadow:inset 0 3px 0 #3b82f6}
.and-trilho.feito .cab{box-shadow:inset 0 3px 0 var(--verde)}
.and-trilho.fiado .cab{box-shadow:inset 0 3px 0 var(--erro)}
.and-trilho.fiado .cab svg{color:var(--erro)}

.and-cartao{background:var(--card);border:1px solid var(--linha);border-radius:var(--raio-mini);
  padding:9px 10px;display:flex;flex-direction:column;gap:3px}
.and-cartao .cab{display:flex;align-items:baseline;gap:6px;padding:0;background:none;border:0;box-shadow:none}
.and-cartao .cab b{font-size:13px}
.and-cartao .onde{font-size:11px;color:var(--cinza)}
.and-cartao .selo{margin-left:auto;font-size:10px;font-weight:var(--font-semibold);
  color:var(--verde-esc);background:var(--verde-suave);border-radius:999px;padding:2px 7px}
.and-cartao .quem{font-size:12.5px;font-weight:var(--font-semibold)}
.and-cartao .oque{font-size:11.5px;color:var(--cinza);line-height:1.35;
  display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.and-cartao .oque svg{width:12px;height:12px}
.and-cartao .val{font-size:14px;font-weight:var(--font-bold);font-variant-numeric:tabular-nums}
.and-cartao .acoes{display:flex;gap:6px;margin-top:5px;flex-wrap:wrap}
.and-cartao .acoes .mini-botao{flex:1;min-height:32px;font-size:11.5px;padding:0 8px;
  justify-content:center;text-decoration:none}
.and-cartao.velho{border-color:#fecaca;background:#fef2f2}
.and-cartao.velho .onde{color:var(--erro);font-weight:var(--font-semibold)}

/* --- o entregador vendo a nota e dizendo como recebeu --- */
.ent-ver-nota{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--card);border:1px solid var(--linha);border-radius:var(--raio);
  padding:14px;margin-bottom:12px;cursor:pointer}
.ent-ver-nota svg{width:21px;height:21px;color:var(--cinza);flex-shrink:0}
.ent-ver-nota .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ent-ver-nota .txt b{font-size:14.5px;font-weight:var(--font-semibold)}
.ent-ver-nota .txt .s{font-size:12px;color:var(--cinza)}
.ent-ver-nota .seta{margin-left:auto}
@media(hover:hover){.ent-ver-nota:hover{border-color:var(--ink)}}

/* o papel da nota dentro da tela: branco, com a sombra de papel mesmo */
.nota-papel{background:#fff;color:#000;border-radius:8px;padding:12px 8px;
  max-height:62dvh;overflow-y:auto;box-shadow:0 1px 3px rgba(0,0,0,.14);margin:0 auto}
/* o modal da nota respira mais que os outros: a folha é o conteúdo inteiro */
.nota-modal{padding:12px}

/* --- o fechamento da venda ---
   A tela mais repetida do dia. Ela mostra três coisas e nada mais: quanto é, como
   paga, e quanto entrou. O valor grande no topo é a pergunta inteira. */
.pg-topo{text-align:center;padding:4px 0 14px;border-bottom:1px solid var(--linha);margin-bottom:14px}
.pg-topo .rot{display:block;font-size:11.5px;font-weight:var(--font-semibold);
  letter-spacing:.08em;text-transform:uppercase;color:var(--cinza)}
.pg-topo .val{display:block;font-size:38px;font-weight:var(--font-bold);line-height:1.1;
  margin-top:4px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}

.pg-formas{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px}
.pg-formas button{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;min-height:76px;padding:10px 6px;border-radius:var(--raio-p);
  border:1px solid var(--linha);background:var(--card);color:var(--texto);
  font:600 13px var(--fonte);cursor:pointer;transition:background .12s,border-color .12s}
.pg-formas button svg{width:22px;height:22px;color:var(--cinza)}
.pg-formas button.ativo{background:var(--ink);border-color:var(--ink);color:#fff}
.pg-formas button.ativo svg{color:var(--verde)}
/* gorjeta no PDV: mora logo acima dos botões de fechar a venda, com a mesma
   grade das formas de pagamento — só existe em loja de país que cobra gorjeta */
.pg-gorjeta{margin-top:12px}
.pg-gorjeta .rot{display:block;font-size:12px;color:var(--cinza);margin-bottom:6px;
  text-transform:uppercase;letter-spacing:.04em}
@media(hover:hover){.pg-formas button:hover{border-color:var(--ink)}}

/* dinheiro: o campo grande e as cédulas que existem de verdade na mão do cliente */
.pg-dinheiro{margin-top:14px}
.pg-dinheiro .caixa{display:flex;align-items:center;gap:8px;padding:0 14px;
  border:1px solid var(--linha);border-radius:var(--raio-p);background:var(--fundo-suave)}
.pg-dinheiro .caixa:focus-within{border-color:var(--ink);background:var(--card)}
.pg-dinheiro .cifrao{font-size:15px;font-weight:var(--font-semibold);color:var(--cinza)}
.pg-dinheiro input{flex:1;min-width:0;border:0;background:none;outline:none;
  padding:13px 0;font:700 24px var(--fonte);color:var(--texto);font-variant-numeric:tabular-nums}
.pg-dinheiro input::placeholder{font-size:15px;font-weight:var(--font-regular);color:var(--cinza)}
.cedulas{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.ced{flex:1;min-width:58px;padding:9px 6px;border-radius:999px;border:1px solid var(--linha);
  background:var(--card);color:var(--ink-2);font:600 13px var(--fonte);cursor:pointer;
  font-variant-numeric:tabular-nums}
.ced:hover{border-color:var(--ink);color:var(--texto)}
.ced.certo{background:var(--fundo-suave);font-weight:var(--font-semibold)}
.pg-dinheiro .pdv-troco{margin-top:12px;font-size:17px}
.pg-dinheiro .pdv-troco b{font-size:24px}

/* as formas de pagamento: o anel diz onde a seta está, o preto diz o que foi
   escolhido. São duas informações diferentes e precisam de duas marcas diferentes */
.pg-formas button.foco{border-color:var(--ink);box-shadow:0 0 0 3px rgba(17,17,20,.2)}
.pg-formas button.ativo.foco{box-shadow:0 0 0 3px rgba(17,17,20,.32)}
html[data-tema="escuro"] .pg-formas button.foco{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.28)}
.pdv-formas button.foco, .pdv-forma.foco{border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(17,17,20,.2)}
.pdv-formas button.ativo.foco, .pdv-forma.ativo.foco{box-shadow:0 0 0 3px rgba(17,17,20,.32)}
html[data-tema="escuro"] .pdv-formas button.foco,
html[data-tema="escuro"] .pdv-forma.foco{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.28)}

/* a cola */
.cola-grade{display:grid;grid-template-columns:1fr 1fr;gap:2px 18px;margin-top:4px}
@media(max-width:560px){.cola-grade{grid-template-columns:1fr}}
.cola-linha{display:flex;align-items:center;gap:9px;padding:6px 0;
  border-bottom:1px solid var(--linha);font-size:13px}
.cola-linha kbd{min-width:76px;text-align:right;opacity:1;font-weight:var(--font-semibold);
  color:var(--texto)}
.cola-linha span{color:var(--ink-2)}

/* --- canal do pedido (badge em cartão de pedido, KDS e relatório) --- */
.canal-marca{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;
  font-size:10.5px;font-weight:var(--font-bold);letter-spacing:.3px;text-transform:uppercase;
  background:var(--fundo-suave);color:var(--cinza)}
.canal-marca.ifood{background:#ffe9e6;color:#b3261e}
.canal-marca.f99food{background:#fff3d6;color:#8a5a00}
.canal-marca.outro{background:#eef0ff;color:#3730a3}

/* tablet deitado: duas colunas ainda cabem, a comanda só afina */
@media(max-width:1200px){ .pdv-tela{grid-template-columns:minmax(0,1fr) 320px;gap:10px;padding:10px} }
@media(max-width:900px){  .pdv-tela{grid-template-columns:minmax(0,1fr) 290px} }
/* daqui pra baixo (tablet em pé e celular) a comanda vai pra baixo */
@media(max-width:760px){
  .pdv-tela{grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto}
  .pdv-comanda{max-height:52dvh}
  .pdv-quem{max-height:26vh}
  .pdv-topo .titulo{font-size:14px}
  .pdv-topo .voltar{padding:6px}
}
/* celular: o topo só guarda o essencial, senão empurra a página pro lado */
@media(max-width:520px){
  .pdv-topo{gap:8px}
  .pdv-topo .woni-selo{display:none}
  .pdv-topo .mini-botao span:not(.ic){display:none}
  .pdv-navegar button{font-size:13px;padding:0 8px;gap:5px}
}
.pdv-chamada{display:flex;gap:10px;flex-wrap:wrap}
.pdv-chamada .botao{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.pdv-topo a{text-decoration:none}

/* --- rota do entregador (várias paradas no celular dele) --- */
.rota-resumo{background:var(--card);border:1px solid var(--linha);border-radius:var(--raio);padding:16px;margin-bottom:12px;
  display:flex;flex-direction:column;gap:4px}
.rota-resumo b{font-size:17px}
.rota-resumo span{font-size:13px;color:var(--cinza)}
.rota-resumo .botao-grande{margin-top:10px}
.rota-parada{display:flex;gap:12px;background:var(--card);border:1px solid var(--linha);border-radius:var(--raio);
  padding:14px;margin-bottom:10px}
.rota-parada .ordem{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:var(--fundo-suave);color:var(--cinza);font-weight:var(--font-semibold);font-size:14px}
.rota-parada .ordem .ic{width:17px;height:17px}
.rota-parada .corpo{flex:1;min-width:0}
.rota-parada .cab{display:flex;align-items:center;gap:8px}
.rota-parada .cab b{font-size:16px}
.rota-parada .cab .cod{margin-left:auto;font-size:12px;color:var(--cinza);letter-spacing:.5px;font-weight:var(--font-semibold)}
.rota-parada .end{margin:4px 0 0;font-size:14px;line-height:1.4}
.rota-parada .ref{margin:2px 0 0;font-size:12.5px;color:var(--cinza)}
.rota-parada .valor{margin-top:8px;font-weight:var(--font-bold);font-size:15px}
.rota-parada .acoes{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.rota-parada .acoes .mini-botao{text-decoration:none}
.rota-parada .botao-grande{margin-top:10px}
.rota-parada.agora{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.rota-parada.agora .ordem{background:var(--ink);color:#fff}
.rota-parada:not(.agora){opacity:.72}

/* --- fila da rota, do lado do cliente --- */
.fila-aviso{display:flex;align-items:center;gap:12px;background:var(--verde-suave);border:1px solid var(--verde-borda);
  border-radius:var(--raio-p);padding:14px;margin:12px 0}
.fila-aviso .n{width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;
  font-weight:var(--font-bold);flex-shrink:0}
.fila-aviso b{display:block;font-size:14.5px}
.fila-aviso span{font-size:12.5px;color:var(--ink-2)}

/* --- mapa da entrega no cardápio --- */
.mapa-escolha{position:relative;border:1px solid var(--linha);border-radius:var(--raio-p);overflow:hidden;background:var(--fundo-suave)}
.mapa-escolha #mapaEntrega{height:230px;width:100%}
.mapa-escolha .ferramentas{display:flex;gap:6px;padding:8px;border-top:1px solid var(--linha);background:var(--card);flex-wrap:wrap}
.zona-tira{margin-top:8px;padding:11px 13px;border-radius:var(--raio-p);background:var(--fundo-suave);border:1px solid var(--linha)}
.zona-tira b{display:block;font-size:14px}
.zona-tira span{font-size:12.5px;color:var(--cinza)}
.zona-tira.ok{background:var(--verde-suave);border-color:var(--verde-borda)}
.zona-tira.ok b{color:var(--verde-esc)}
.zona-tira.fora{background:#fee2e2;border-color:#fecaca}
.zona-tira.fora b{color:var(--erro)}

/* --- editor de zonas no painel --- */
.zona-editor{position:relative;border:1px solid var(--linha);border-radius:var(--raio-p);overflow:hidden;margin-bottom:12px}
.zona-editor #mapaZonas{height:min(58vh,460px);width:100%;background:var(--fundo-suave)}
.zona-editor .barra{display:flex;gap:6px;padding:8px;background:var(--card);border-top:1px solid var(--linha);flex-wrap:wrap;align-items:center}
.zona-editor .barra .aviso{font-size:12.5px;color:var(--cinza);margin-left:auto}
.zona-lista{display:flex;flex-direction:column;gap:8px}
.zona-item{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--linha);
  border-radius:var(--raio-p);padding:11px 13px}
.zona-item .bolha{width:16px;height:16px;border-radius:5px;flex-shrink:0}
.zona-item .info{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.zona-item .tit,.zona-item .sub{display:block;text-align:left}
.frota-item .info{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.zona-item .tit{font-weight:var(--font-semibold);font-size:14px}
.zona-item .sub{font-size:12px;color:var(--cinza)}
.zona-item .valor{font-weight:var(--font-bold);font-variant-numeric:tabular-nums}
.leaflet-container{font:inherit;
  /* O Leaflet usa z-index alto nos controles (1000). Sem isso o mapa vaza por cima das
     folhas que abrem em cima dele. Um contexto de empilhamento próprio prende tudo
     dentro da caixa do mapa, sem mexer na ordem interna das camadas dele. */
  position:relative;z-index:0;isolation:isolate}

/* --- mapa da frota no painel --- */
.frota-mapa{height:min(52vh,420px);border-radius:var(--raio-p);overflow:hidden;border:1px solid var(--linha);
  background:var(--fundo-suave);margin-bottom:12px}
.frota-item{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--linha);
  border-radius:var(--raio-p);padding:11px 13px;margin-bottom:8px;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer}
.frota-item .ponto{width:10px;height:10px;border-radius:50%;background:#71717a;flex-shrink:0}
.frota-item.on .ponto{background:var(--verde)}
.frota-item .info{flex:1;min-width:0}
.frota-item .tit{font-weight:var(--font-semibold);font-size:14px}
.frota-item .sub{font-size:12px;color:var(--cinza)}

/* --- escolher quem leva o pedido --- */
.motoboys{display:flex;flex-direction:column;gap:8px}
.moto{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--raio-p);
  border:1px solid var(--linha);background:var(--card);cursor:pointer;font:inherit;color:inherit;text-align:left;width:100%}
.moto .ini{width:38px;height:38px;border-radius:50%;background:var(--fundo-suave);color:var(--ink-2);
  display:grid;place-items:center;font-weight:var(--font-semibold);font-size:16px;flex-shrink:0}
.moto .txt{flex:1;min-width:0}
.moto .txt b{display:block;font-size:15px}
.moto .txt span{font-size:12.5px;color:var(--cinza)}
.moto .marca{width:24px;height:24px;border-radius:50%;border:1px solid var(--linha);display:grid;place-items:center;
  color:transparent;flex-shrink:0}
.moto .marca .ic{width:14px;height:14px}
.moto.sel{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.moto.sel .ini{background:var(--ink);color:#fff}
.moto.sel .marca{background:var(--verde);border-color:var(--verde);color:#14251a}

/* --- pedido a caminho, dentro do detalhe --- */
.ped-mapa{height:230px;border-radius:var(--raio-p);overflow:hidden;border:1px solid var(--linha);
  background:var(--fundo-suave);margin:12px 0}
.ped-mapa .vazio{padding:24px 14px}
.ped-mapa.vazia{height:auto;background:none;border-style:dashed}
/* canto arrastável do desenho de área */
.canto-zona{background:#fff;border:2px solid var(--ink);border-radius:50%;width:16px;height:16px;
  box-shadow:0 1px 4px rgba(0,0,0,.35);cursor:grab}
.canto-zona:active{cursor:grabbing;transform:scale(1.15)}

/* --- mapa dentro da tela do entregador --- */
.ent-mapa{position:relative;height:230px;border-radius:var(--raio);overflow:hidden;border:1px solid var(--linha);
  background:var(--fundo-suave);margin-bottom:12px}
.ent-mapa .carregando{display:grid;place-items:center;height:100%;padding:16px;text-align:center;
  font-size:13px;color:var(--cinza)}
.ent-mapa.vazio,.ent-mapa.sem-ponto{height:auto;border-style:dashed}
.ent-mapa.sem-ponto .leaflet-container{height:230px}
.ent-mapa .centrar{position:absolute;right:10px;top:10px;z-index:500;width:38px;height:38px;border-radius:12px;
  background:var(--card);border:1px solid var(--linha);display:grid;place-items:center;cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.18);color:var(--texto)}
.ent-mapa .centrar .ic{width:18px;height:18px}
.pino-parada{width:30px;height:30px;border-radius:50% 50% 50% 8px;transform:rotate(-45deg);
  background:var(--card);border:2px solid var(--ink-2);color:var(--ink);display:grid;place-items:center;
  font:800 13px var(--fonte);box-shadow:0 2px 8px rgba(0,0,0,.3)}
.pino-parada > *{transform:rotate(45deg)}
.pino-parada.agora{background:var(--verde);border-color:var(--ink);color:#14251a}

/* --- entregas no mapa (painel) --- */
.vivo-topo{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.vivo-topo .tiras{display:flex;gap:8px;flex-wrap:wrap;flex:1;min-width:0}
.vivo-topo .tile{background:var(--card);border:1px solid var(--linha);border-radius:var(--raio-p);padding:9px 13px;min-width:120px}
.vivo-topo .tile .rot{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--cinza);font-weight:var(--font-semibold)}
.vivo-topo .tile .num{font-size:19px;font-weight:var(--font-bold);margin-top:2px}

/* --- caminho até a entrega, na tela do motoboy --- */
.rota-info{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--linha);
  border-radius:var(--raio-p);padding:11px 14px;margin:-4px 0 10px}
.rota-info b{font-size:15px;white-space:nowrap}
.rota-info span{font-size:12.5px;color:var(--cinza);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rota-info button{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--linha);background:var(--fundo-suave);
  border-radius:999px;padding:6px 12px;font:700 12.5px var(--fonte);cursor:pointer;color:var(--texto);flex-shrink:0}
.rota-passos{list-style:none;margin:-4px 0 12px;padding:0;background:var(--card);border:1px solid var(--linha);
  border-radius:var(--raio-p);max-height:230px;overflow-y:auto}
.rota-passos li{padding:10px 14px;border-bottom:1px solid var(--linha);font-size:13.5px;display:flex;gap:8px;align-items:baseline}
.rota-passos li:last-child{border-bottom:0}
.rota-passos li b{font-weight:var(--font-semibold)}
.rota-passos li span{margin-left:auto;color:var(--cinza);font-size:12px;font-variant-numeric:tabular-nums;flex-shrink:0}
button.ent-gps{width:100%;text-align:left;cursor:pointer;font:inherit;color:inherit}
button.ent-gps:active{transform:scale(.995)}

/* ============================================================================
   VITRINE · versão 2 (set/2026)
   Leitura primeiro: fundo claro, pouca borda, foto pequena à direita e o preço em
   destaque. O cartão da loja flutua sobre a capa com o que o cliente quer saber antes
   de pedir (nota, frete, tempo). A paleta segue a da casa: preto, branco, cinzas e o
   verde; a cor da loja entra só como --marca.
   ========================================================================== */
/* o cardápio é branco: o que dá cor é a foto do produto, não o fundo da página */
body{background:var(--card)}
.vit-cartao{box-shadow:none}
.vit-capa{height:180px}
.vit-capa.vazia{height:120px;background:var(--ink)}
@media(min-width:900px){.vit-capa{height:240px}}

.vit-cartao{position:relative;margin-top:-46px;background:var(--card);border:1px solid var(--linha);
  border-radius:var(--raio);box-shadow:0 6px 24px -12px rgba(17,17,20,.28);padding:16px;z-index:2}
/* a marca da casa é o que se vê primeiro: sai do cartão e senta em cima da capa */
.vit-cartao .ident{display:flex;align-items:flex-end;gap:14px}
.vit-cartao .vit-logo{width:96px;height:96px;border-radius:50%;object-fit:cover;flex-shrink:0;
  margin-top:-56px;margin-bottom:2px;border:4px solid var(--card);
  box-shadow:0 6px 18px -6px rgba(17,17,20,.42);background:var(--card);position:relative;z-index:3}
.vit-cartao .vit-logo.vazia{display:flex;align-items:center;justify-content:center;color:var(--cinza);background:var(--fundo-suave)}
.vit-cartao .vit-logo.vazia svg{width:34px;height:34px}
@media(min-width:900px){.vit-cartao .vit-logo{width:118px;height:118px;margin-top:-68px}}
@media(max-width:359px){.vit-cartao .vit-logo{width:78px;height:78px;margin-top:-46px}}
.vit-cartao .nome{min-width:0}
.vit-cartao .nome h1{font-size:20px;font-weight:var(--font-semibold);letter-spacing:-.015em;line-height:1.2}
/* a linha de apoio: menor, logo abaixo do nome */
.vit-cartao .nome .subnome{font-size:13px;color:var(--cinza);line-height:1.3;margin-top:2px}
.vit-cartao .nome .sub{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--cinza);margin-top:3px;flex-wrap:wrap}
.vit-cartao .ponto{width:8px;height:8px;border-radius:50%;background:var(--cinza);
  display:inline-block;flex-shrink:0}
/* aberta: a luz cresce e fica pulsando, como o led de "no ar".
   Ela desceu de baixo do nome pra linha de "Sobre a loja", mas é a mesma luz. */
.vit-cartao .ponto.on{width:11px;height:11px;background:var(--verde-esc);position:relative}
.vit-cartao .ponto.on::after{content:'';position:absolute;inset:0;border-radius:50%;
  background:var(--verde-esc);animation:pulso-aberta 1.8s ease-out infinite}
@keyframes pulso-aberta{
  0%   {transform:scale(1);   opacity:.55}
  70%  {transform:scale(2.4); opacity:0}
  100% {transform:scale(2.4); opacity:0}
}
@media(prefers-reduced-motion: reduce){
  .vit-cartao .ponto.on::after{animation:none}
}
.vit-cartao .linhas{margin-top:12px;border-top:1px solid var(--linha)}
.vit-cartao .linha{display:flex;align-items:center;gap:9px;padding:11px 0;border-bottom:1px solid var(--linha);
  font-size:13.5px;color:var(--texto);text-decoration:none}
.vit-cartao .linha:last-child{border-bottom:0}
.vit-cartao .linha .ic{width:17px;height:17px;color:var(--cinza);flex-shrink:0}
/* o rótulo é a promessa do toque: ele nunca quebra em duas linhas. Quem cede
   espaço é o texto de apoio, que apara com reticências. */
.vit-cartao .linha b{font-weight:var(--font-semibold);white-space:nowrap;flex-shrink:0}
.vit-cartao .linha .s{color:var(--cinza);font-weight:var(--font-medium);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vit-cartao .linha .seta{margin-left:auto;width:16px;height:16px;color:var(--cinza)}

/* ---- a linha que abre "Sobre a loja" ----
   Três coisas, nesta ordem: o rótulo à esquerda, a seta respirando no meio e a
   situação da loja à direita. A seta é o convite; sem ela o cliente não descobre
   que tem mais coisa ali. */
.vit-cartao .linha .puxe{margin:0 auto;display:grid;place-items:center;
  width:20px;height:20px;color:var(--cinza-2);animation:puxe-desce 1.9s ease-in-out infinite}
.vit-cartao .linha .puxe svg{width:16px;height:16px}
@keyframes puxe-desce{
  0%,100%{transform:translateY(-2px);opacity:.45}
  50%    {transform:translateY(2px);opacity:1}
}
.vit-cartao .linha .situacao{display:flex;align-items:center;gap:6px;flex-shrink:0;
  font-size:13px;color:var(--cinza);font-weight:var(--font-medium)}
@media(prefers-reduced-motion:reduce){.vit-cartao .linha .puxe{animation:none;opacity:.7}}
@media(max-width:380px){.vit-cartao .linha .puxe{display:none}}
.vit-cartao .desc{font-size:13px;color:var(--cinza);margin-top:12px;line-height:1.5}

/* abas: sublinhado, como quem folheia um cardápio */
.vit-abas{background:var(--card);border-bottom:1px solid var(--linha);margin-top:14px;padding:0}
.vit-abas-in{gap:0;padding:0 16px}
.vit-aba{background:none;border:0;border-bottom:2.5px solid transparent;border-radius:0;padding:13px 14px;
  color:var(--cinza);font-size:14px;font-weight:var(--font-medium)}
.vit-aba.ativo{background:none;color:var(--texto);border-bottom-color:var(--ink);font-weight:var(--font-semibold)}

/* lista de itens: texto à esquerda, foto à direita, sem moldura */
.vit-bloco{scroll-margin-top:70px}
/* o nome da categoria respira um pouco acima e encosta na lista abaixo: o buraco de antes
   fazia parecer que o cardápio tinha acabado ali */
.vit-secao{margin:14px 0 2px}
.vit-secao h2{font-size:20px;font-weight:var(--font-semibold);letter-spacing:-.01em}
/* nada de moldura: o cardápio é branco e cada produto é separado por uma linha só,
   no celular e no computador. É como se lê um cardápio de papel. */
.vit-lista{display:flex;flex-direction:column;background:transparent;border:0;border-radius:0}
.vit-lista .vit-item{border:0;border-radius:0;box-shadow:none;background:transparent;
  border-bottom:1px solid var(--linha);padding:16px 0;gap:14px;align-items:flex-start}
/* o último produto da categoria mantém a linha: é ela que fecha o bloco antes do
   próximo título. Sem isso, a categoria nova nascia colada no produto de cima. */
@media(hover:hover){.vit-lista button.vit-item:hover .nome{text-decoration:underline;text-underline-offset:3px}}
.vit-item .nome{font-size:16px;font-weight:var(--font-semibold);line-height:1.3}
.vit-item .desc{-webkit-line-clamp:2;font-size:13.5px;margin-top:5px}
.vit-item .preco{display:flex;align-items:baseline;gap:8px;margin-top:9px;padding-top:0}
.vit-item .preco .por{font-size:16px;font-weight:var(--font-bold);color:var(--texto)}
.vit-item .preco .de{font-size:13px;color:var(--cinza);text-decoration:line-through;font-weight:var(--font-medium);margin:0}
.vit-item .preco .off{font-size:11.5px;font-weight:var(--font-bold);color:var(--verde-esc);background:var(--verde-suave);
  border-radius:999px;padding:2px 7px}
.vit-item .marca{font-size:12px;color:var(--cinza);margin-top:5px}
.vit-item .foto{width:96px;height:96px;border-radius:12px}

/* ---- a porta do mercado: os setores ----
   Mercado tem quatro mil itens. A lista corrida funciona pra um cardápio de
   vinte lanches e vira um pesadelo aqui: o cliente precisa do corredor primeiro.
   Alvo grande, ícone pra reconhecer de relance, e a contagem pra ele saber que
   vale a pena entrar. */
.setor-grade{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:4px}
@media(min-width:620px){.setor-grade{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.setor-grade{grid-template-columns:repeat(4,1fr)}}
.setor-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  background:var(--card);border:1px solid var(--linha);border-radius:14px;
  padding:15px 14px;text-align:left;box-shadow:var(--sombra);
  transition:border-color .15s,transform .12s}
@media(hover:hover){.setor-card:hover{border-color:var(--texto)}}
.setor-card:active{transform:scale(.985)}
.setor-card .ic{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:var(--verde-suave);color:var(--verde-esc);margin-bottom:5px}
.setor-card .ic svg{width:19px;height:19px}
.setor-card .nom{font-size:14.5px;font-weight:var(--font-semibold);line-height:1.25}
.setor-card .qtd{font-size:12px;color:var(--cinza)}
/* com foto o cartão vira a própria imagem, e o nome entra por cima num véu
   escuro — sem o véu, nome claro em foto clara some */
.setor-card.com-foto{position:relative;padding:0;overflow:hidden;aspect-ratio:1;
  align-items:stretch;justify-content:flex-end}
.setor-card.com-foto img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transition:transform .35s}
@media(hover:hover){.setor-card.com-foto:hover img{transform:scale(1.05)}}
.setor-card.com-foto .sobre{position:relative;width:100%;padding:34px 13px 12px;
  display:flex;flex-direction:column;gap:1px;color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.45) 55%,transparent 100%)}
.setor-card.com-foto .nom{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.setor-card.com-foto .qtd{color:rgba(255,255,255,.82)}
/* a volta pros setores mora na barra de abas, no lugar de uma aba */
.vit-aba.voltar-setor{background:var(--ink);color:#fff;border-color:var(--ink);
  font-weight:var(--font-semibold)}

/* ---- porta da rede: escolher a unidade ----
   Tela curta de propósito. O cliente só quer dizer onde vai comprar; qualquer
   coisa a mais aqui atrasa ele pra chegar no cardápio. */
body.rede-escolha{background:var(--fundo)}
.rede-topo{max-width:560px;margin:0 auto;padding:38px 18px 22px;text-align:center}
.rede-logo{width:86px;height:86px;border-radius:50%;object-fit:cover;background:#fff;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.35);margin-bottom:16px}
.rede-logo.vazia{display:inline-grid;place-items:center;border:1px solid var(--linha);color:var(--cinza)}
.rede-logo.vazia svg{width:32px;height:32px}
.rede-topo h1{font-size:clamp(23px,5vw,29px);font-weight:var(--font-semibold);letter-spacing:-.02em}
.rede-topo .frase{font-size:14px;color:var(--cinza);margin-top:7px;line-height:1.45}
.rede-topo .pergunta{font-size:14.5px;font-weight:var(--font-medium);margin-top:22px}

.rede-lista{max-width:560px;margin:0 auto;padding:0 18px 30px;
  display:flex;flex-direction:column;gap:10px}
.rede-item{display:flex;align-items:center;gap:13px;background:var(--card);
  border:1px solid var(--linha);border-radius:14px;padding:15px 16px;
  text-decoration:none;color:inherit;box-shadow:var(--sombra);transition:border-color .15s,transform .12s}
@media(hover:hover){.rede-item:hover{border-color:var(--texto)}}
.rede-item:active{transform:scale(.995)}
.rede-item .txt{flex:1;min-width:0}
.rede-item .nome{font-size:16px;font-weight:var(--font-semibold)}
.rede-item .onde{font-size:13px;color:var(--cinza);margin-top:3px;line-height:1.4}
.rede-item .situacao{display:flex;align-items:center;gap:6px;font-size:12.5px;
  color:var(--cinza);margin-top:7px}
.rede-item .situacao .ponto{width:7px;height:7px;border-radius:50%;background:var(--cinza-2);flex-shrink:0}
.rede-item .situacao .ponto.on{background:var(--verde)}
.rede-item .seta svg{width:18px;height:18px;color:var(--cinza-2);flex-shrink:0}
/* fechada não some da lista: o cliente tem o direito de ver que ela existe */
.rede-item.fechada .nome,.rede-item.fechada .onde{opacity:.62}
.rede-rodape{text-align:center;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cinza-2);padding:10px 18px 30px}

/* a unidade em que o cliente está, dentro do cardápio */
.vit-cartao .nome .unidade-agora{display:flex;align-items:center;gap:5px;margin-top:3px}
.vit-cartao .nome .unidade-agora svg{width:13px;height:13px;flex-shrink:0}
.vit-cartao .nome .unidade-agora b{font-weight:var(--font-semibold);color:var(--texto)}

/* ---- modo catálogo: vitrine de loja, não lista de cardápio ----
   Roupa se compra pelo olho. A lista com miniatura do lado foi desenhada pra
   lanche, onde o nome pesa mais que a imagem; aqui a foto vira o produto e o
   texto fica embaixo dela, como em qualquer loja virtual. */
.modo-loja .vit-lista{display:grid;grid-template-columns:1fr 1fr;gap:22px 14px}
.modo-loja .vit-lista .vit-item{flex-direction:column-reverse;align-items:stretch;
  border-bottom:0;padding:0;gap:10px}
.modo-loja .vit-lista .vit-item:last-child{padding-bottom:0}
.modo-loja .vit-lista .vit-item .foto{width:100%;height:auto;aspect-ratio:1;
  border-radius:14px;object-fit:cover;background:var(--fundo-suave)}
.modo-loja .vit-lista .vit-item .nome{font-size:14.5px;line-height:1.35}
.modo-loja .vit-lista .vit-item .desc{-webkit-line-clamp:1;font-size:12.5px;margin-top:3px}
.modo-loja .vit-lista .vit-item .preco{margin-top:6px;flex-wrap:wrap;gap:6px}
.modo-loja .vit-lista .vit-item .preco .por{font-size:15px}
@media(min-width:760px){.modo-loja .vit-lista{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1080px){.modo-loja .vit-lista{grid-template-columns:repeat(4,1fr)}}

/* destaques: fita quadrada que anda sozinha (a fita é duplicada no HTML, ver rodarDestaques) */
.vit-carrossel{overflow-x:auto;padding:2px 0 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.vit-carrossel::-webkit-scrollbar{display:none}
.vit-carrossel .trilho{display:flex;gap:12px;width:max-content}
.vit-destaque{flex:0 0 158px;display:flex;flex-direction:column;gap:6px;text-align:left;
  background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit}
.vit-destaque .capa{position:relative;display:block;border-radius:14px;overflow:hidden;background:#fff;
  border:1px solid var(--linha);aspect-ratio:1/1}
.vit-destaque .capa img{width:100%;height:100%;object-fit:contain;display:block;background:#fff}
.vit-destaque .capa .off{position:absolute;left:8px;top:8px;background:var(--ink);color:#fff;font-size:11px;
  font-weight:var(--font-semibold);border-radius:999px;padding:3px 8px}
.vit-destaque .preco{font-weight:var(--font-bold);font-size:15px;display:flex;align-items:baseline;gap:6px}
.vit-destaque .preco .de{font-size:12.5px;color:var(--cinza);text-decoration:line-through;font-weight:var(--font-medium)}
.vit-destaque .nome{font-size:13px;color:var(--ink-2);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* folha do produto: foto sangrada em cima, rodapé fixo embaixo */
.folha-item{position:relative;background:var(--card);width:min(560px,100%);max-height:94dvh;
  border-radius:var(--raio) var(--raio) 0 0;display:flex;flex-direction:column;overflow:hidden}
@media(min-width:700px){.folha-item{border-radius:var(--raio);max-height:88dvh}}
.folha-item .fechar{position:absolute;left:14px;top:14px;z-index:3;width:38px;height:38px;border-radius:50%;
  background:rgba(17,17,20,.55);color:#fff;display:grid;place-items:center;backdrop-filter:blur(6px);border:0;cursor:pointer}
.folha-item .rolagem{flex:1;min-height:0;overflow-y:auto}
.folha-item .foto-grande img{width:100%;aspect-ratio:1/1;height:auto;object-fit:contain;display:block;background:#fff;
  border-bottom:1px solid var(--linha)}
.folha-item .cabecalho{padding:18px 18px 4px}
.folha-item .cabecalho h3{font-size:20px;font-weight:var(--font-semibold);letter-spacing:-.01em}
.folha-item .cabecalho .desc{font-size:13.5px;color:var(--cinza);margin-top:6px;line-height:1.5}
.folha-item .cabecalho .preco{display:flex;align-items:baseline;gap:8px;margin-top:10px}
.folha-item .cabecalho .preco .por{font-size:19px;font-weight:var(--font-bold)}
.folha-item .cabecalho .preco .de{font-size:14px;color:var(--cinza);text-decoration:line-through;font-weight:var(--font-medium)}
.folha-item .cabecalho .preco .off{font-size:12px;font-weight:var(--font-bold);color:var(--verde-esc);background:var(--verde-suave);
  border-radius:999px;padding:2px 8px}
.folha-item .corpo{padding:8px 18px 18px}
.folha-item .rodape{display:flex;align-items:center;gap:12px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--linha);background:var(--card)}
.folha-item .rodape .botao{min-height:52px;font-size:15.5px}
.folha-item .opc-grupo{margin:0 -18px;padding:16px 18px;border-top:1px solid var(--linha)}
.folha-item .opc-cab{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.folha-item .opc-cab .tit h4{font-size:15.5px;font-weight:var(--font-semibold)}
.folha-item .opc-cab .tit .s{font-size:12.5px;color:var(--cinza)}
.folha-item .opc-cab .badge.escuro{margin-left:auto;background:var(--ink);color:#fff;border-color:var(--ink)}

/* barra do carrinho: o valor à esquerda, a ação à direita */
.vit-carrinho{border-radius:16px;padding:11px 12px}
.vit-carrinho .ir{padding:12px 18px}
/* a folha do produto sobe de baixo no celular e centraliza no computador */
@media(min-width:700px){ .veu:has(.folha-item){align-items:center} }
.vit-rodape{padding-bottom:calc(110px + env(safe-area-inset-bottom))}
.folha-item .cabecalho .tempo{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--cinza);margin-top:8px}
.folha-item .cabecalho .tempo .ic{width:15px;height:15px}

/* --- assinatura da casa: a mesma logo em todas as telas --- */
.woni-selo{height:19px;width:auto;display:block;flex-shrink:0;opacity:.95}
.ent-topo .woni-selo{height:17px;margin-right:2px}
.acomp-topo{gap:9px}
.acomp-topo .woni-selo{height:14px}
.acomp-topo .loja{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.acomp-topo .cod{white-space:nowrap;flex-shrink:0}
.kds-topo .woni-selo{height:17px}
.pdv-topo .woni-selo{height:17px}
.woni-assinatura{display:flex;flex-direction:column;align-items:center;gap:5px;padding-top:2px}
.woni-assinatura img{height:17px;width:auto;opacity:.5}
.woni-assinatura a{display:flex;flex-direction:column;align-items:center;gap:5px;text-decoration:none}
.woni-assinatura .feito{font-size:9.5px;font-weight:var(--font-semibold);color:var(--cinza);
  text-transform:uppercase;letter-spacing:1.2px}
@media(hover:hover){ .woni-assinatura a:hover img{opacity:.85} }
/* no tema escuro a assinatura precisa da versão clara da logo */
html[data-tema="escuro"] .woni-assinatura img{filter:invert(1) brightness(2.4)}

/* --- marcadores do mapa: a moto e a casa --- */
.pino-mapa{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:var(--ink);color:#fff;border:2.5px solid #fff;box-shadow:0 4px 16px rgba(0,0,0,.32)}
.pino-mapa .ic{width:22px;height:22px}
.pino-mapa.destino{width:40px;height:40px;background:var(--marca,#A8CF45);color:var(--marca-texto,#14251a)}
.pino-mapa.destino .ic{width:20px;height:20px}
.pino-mapa.moto::after{content:'';position:absolute;width:52px;height:52px;border-radius:50%;
  border:2px solid var(--verde);opacity:.35;animation:pulso-moto 2s ease-out infinite}
.pino-mapa{position:relative}
@keyframes pulso-moto{0%{transform:scale(.7);opacity:.45}100%{transform:scale(1.15);opacity:0}}
@media(prefers-reduced-motion:reduce){.pino-mapa.moto::after{animation:none;opacity:.2}}

/* ============================================================================
   SALÃO · a tela do garçom (tablet na mão)
   ========================================================================== */
.kds-topo.claro{background:var(--card);border-bottom:1px solid var(--linha);color:var(--texto)}
.kds-topo.claro .voltar{color:var(--cinza)}
body.salao{background:var(--fundo);min-height:100dvh}
.salao-tela{display:grid;grid-template-columns:1fr;gap:14px;padding:14px;max-width:1400px;margin:0 auto}
@media(min-width:1000px){.salao-tela{grid-template-columns:1fr 380px}}
.salao-tiras{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.salao-tiras .tile{background:var(--card);border:1px solid var(--linha);border-radius:var(--raio-p);padding:10px 14px;min-width:132px}
.salao-tiras .tile .rot{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--cinza);font-weight:var(--font-semibold)}
.salao-tiras .tile .num{font-size:20px;font-weight:var(--font-bold);margin-top:2px}
.salao-tiras .tile.urgente{border-color:#f0a500;background:#fff8e8}
.salao-tiras .tile.urgente .num{color:#92400e}
.salao-mesas .mesa-grade{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.mesa-cartao .num .mais{display:block;font-size:12px;font-weight:var(--font-bold);color:var(--cinza);margin-top:2px}
.mesa-cartao .chamou{display:inline-flex;align-items:center;gap:4px;margin-top:8px;font-size:11.5px;font-weight:var(--font-semibold);
  color:#92400e;text-transform:uppercase;letter-spacing:.4px}
.mesa-cartao .chamou .ic{width:14px;height:14px}

.salao-lado{background:var(--card);border:1px solid var(--linha);border-radius:var(--raio);padding:14px;
  align-self:start;position:sticky;top:14px;max-height:calc(100dvh - 100px);display:flex;flex-direction:column}
.salao-lado .cab{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
.salao-lado .cab h2{font-size:16px;font-weight:var(--font-semibold)}
.salao-lado .cab span{font-size:12px;color:var(--cinza);margin-left:auto}
.salao-lado .lista{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.ped-linha{width:100%;text-align:left;background:var(--fundo-suave);border:1px solid var(--linha);
  border-radius:var(--raio-p);padding:11px 13px;cursor:pointer;font:inherit;color:inherit}
.ped-linha.novo{border-color:var(--ink);background:var(--card)}
.ped-linha .cab{display:flex;align-items:baseline;gap:8px;margin:0 0 4px}
.ped-linha .cab b{font-size:14.5px}
.ped-linha .cab .quem{font-size:12.5px;color:var(--cinza)}
.ped-linha .cab .tempo{margin-left:auto;font-size:12px;color:var(--cinza);font-variant-numeric:tabular-nums}
.ped-linha .oque{font-size:12.5px;color:var(--cinza);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ped-linha .pe{display:flex;align-items:center;gap:8px;margin-top:8px}
.ped-linha .pe .valor{margin-left:auto;font-weight:var(--font-bold);font-variant-numeric:tabular-nums}
.stepper.grande button{width:48px;height:48px}
.stepper.grande .qtd{min-width:44px;font-size:20px}
.salao-conta{background:var(--verde-suave);border:1px solid var(--verde-borda);border-radius:var(--raio-p);
  padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.salao-conta b{font-size:15px;color:var(--verde-esc)}
.salao-conta span{font-size:12.5px;color:var(--ink-2)}

/* --- enquadrar a foto (painel) --- */
.enq-palco{position:relative;width:100%;aspect-ratio:1/1;border:1px solid var(--linha);border-radius:var(--raio-p);
  overflow:hidden;background:#fff;cursor:grab;touch-action:none;user-select:none}
/* a logo aparece redonda no cardápio: o círculo mostra o que sobra de fora */
.enq-palco.redondo::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 50%, transparent 0 calc(50% - 1px), rgba(17,17,20,.42) calc(50% - 1px))}
.enq-palco:active{cursor:grabbing}
.enq-palco canvas{width:100%;height:100%;display:block}
.enq-zoom{display:flex;align-items:center;gap:10px;margin:12px 0 4px}
.enq-zoom .ic{width:18px;height:18px;color:var(--cinza);flex-shrink:0}
.enq-zoom input[type=range]{flex:1;accent-color:var(--verde)}

/* --- PDV: as três telas (produtos, pedidos, mesas) --- */
.pdv-navegar{display:flex;gap:8px;flex-shrink:0;min-width:0}
.pdv-navegar button{flex:1 1 0;min-width:0;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:46px;padding:0 12px;border-radius:var(--raio-p);border:1px solid var(--linha);
  background:var(--card);color:var(--texto);font:700 14px var(--fonte);cursor:pointer;white-space:nowrap}
.pdv-navegar button .ic{width:17px;height:17px}
.pdv-navegar button.ativo{background:var(--ink);border-color:var(--ink);color:#fff}
.pdv-navegar .conta{font-size:11.5px;font-weight:var(--font-semibold);background:var(--verde);color:var(--verde-txt);
  border-radius:999px;padding:1px 7px;min-width:20px;text-align:center}
.pdv-navegar .conta:empty{display:none}
.pdv-vista{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px}
.pdv-vista.oculto{display:none}
.pdv-rolagem{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px}
.pdv-rolagem .vazio{text-align:center;color:var(--cinza);padding:40px 10px;font-size:14px}

.pdv-resumo{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;flex-shrink:0}
.pdv-resumo .tira{background:var(--card);border:1px solid var(--linha);border-radius:var(--raio-p);padding:10px 12px}
.pdv-resumo .rot{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--cinza);font-weight:var(--font-semibold)}
.pdv-resumo .num{display:block;font-size:18px;font-weight:var(--font-bold);margin-top:2px}

.ped-cartao{background:var(--card);border:1px solid var(--linha);border-radius:var(--raio-p);padding:12px}
.ped-cartao .cab{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ped-cartao .cab b{font-size:15px}
.ped-cartao .onde{font-size:12.5px;color:var(--cinza);font-weight:var(--font-medium)}
.ped-cartao .marca{margin-left:auto;font-size:11.5px;font-weight:var(--font-bold);border-radius:999px;padding:3px 9px;
  background:var(--fundo-suave);color:var(--cinza)}
.ped-cartao .marca.novo{background:var(--verde-suave);color:var(--verde-esc)}
.ped-cartao .marca.preparo{background:#fff3d6;color:#8a5a00}
.ped-cartao .marca.saiu,.ped-cartao .marca.pronto{background:#e6efff;color:#1e40af}
.ped-cartao .quem{font-size:13.5px;font-weight:var(--font-semibold);margin-top:6px}
.ped-cartao .itens{font-size:12.5px;color:var(--cinza);margin-top:4px;line-height:1.45}
.ped-cartao .rodape{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.ped-cartao .rodape b{font-size:15px;margin-right:auto}
.ped-cartao .pago{font-size:11.5px;font-weight:var(--font-semibold);color:var(--verde-esc);background:var(--verde-suave);
  border-radius:999px;padding:3px 9px}
.comanda-linha{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--linha);font-size:13.5px}
.comanda-linha:last-of-type{border-bottom:0}
.comanda-linha span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini-botao.escuro{background:var(--ink);border-color:var(--ink);color:#fff}

/* pedidos em cartão, lado a lado — não uma barra comprida por pedido */
.ped-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:10px;align-content:start}
.ped-grade .vazio{grid-column:1/-1;text-align:center;color:var(--cinza);padding:40px 10px;font-size:14px}

/* o salão em quadradinhos: cabe o restaurante inteiro na tela */
.mesa-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:10px;align-content:start}
.mesa-grade .vazio{grid-column:1/-1;text-align:center;color:var(--cinza);padding:40px 10px;font-size:14px}
.mesa-q{position:relative;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  border-radius:var(--raio-p);border:1.5px solid var(--linha);background:var(--card);color:var(--texto);
  font:inherit;cursor:pointer;padding:8px;text-align:center}
.mesa-q .num{font-size:22px;font-weight:var(--font-bold);line-height:1}
.mesa-q .gente{font-size:11px;color:var(--cinza);font-weight:var(--font-semibold)}
.mesa-q .valor{font-size:12.5px;font-weight:var(--font-bold);margin-top:2px}
.mesa-q.livre{background:var(--fundo-suave);color:var(--cinza);border-style:dashed}
.mesa-q.livre .num{color:var(--texto)}
.mesa-q.ocupada{border-color:var(--verde-borda);background:var(--verde-suave)}
.mesa-q.ocupada .valor{color:var(--verde-esc)}
.mesa-q.chamando{border-color:#f0a500;background:#fff8e8;animation:pisca 1.4s ease-in-out infinite}
.mesa-q .sino{position:absolute;top:5px;right:6px;font-size:9.5px;font-weight:var(--font-semibold);text-transform:uppercase;
  letter-spacing:.4px;color:#8a5a00}
@media(hover:hover){ .mesa-q:hover{border-color:var(--texto)} }

.mesa-total{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:10px;
  border-top:1px solid var(--linha);font-size:14px}
.mesa-total b{font-size:18px;font-weight:var(--font-bold)}
.ajuda{font-size:13px;color:var(--cinza);line-height:1.5;margin:6px 0 2px}

/* --- cozinha: faixa do que é só separar e levar --- */
/* --- quadro de produção: preparar x separar, e os estágios em colunas --- */
.kds-filtros{display:flex;gap:8px;padding:12px 14px 0;flex-shrink:0}
.kds-filtros button{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:0 14px;
  border-radius:999px;border:1px solid #2b2b34;background:#17171c;color:#c9c9d2;
  font:700 14px var(--fonte);cursor:pointer}
.kds-filtros button .ic{width:16px;height:16px}
.kds-filtros button.ativo{background:#f4f4f6;border-color:#f4f4f6;color:#111114}
.kds-filtros .n{background:rgba(255,255,255,.14);border-radius:999px;padding:1px 7px;font-size:12px}
.kds-filtros button.ativo .n{background:rgba(0,0,0,.12)}
.kds-filtros .n:empty{display:none}

.kanban{flex:1;min-height:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(270px,1fr);
  gap:12px;padding:12px 14px 14px;overflow-x:auto}
.kb-coluna{min-height:0;display:flex;flex-direction:column;background:#131318;border:1px solid #24242c;
  border-radius:var(--raio);overflow:hidden}
.kb-coluna>header{display:flex;align-items:center;gap:8px;padding:11px 13px;border-bottom:1px solid #24242c;
  flex-shrink:0}
.kb-coluna h2{font-size:12.5px;font-weight:var(--font-semibold);text-transform:uppercase;letter-spacing:.8px;color:#c9c9d2}
.kb-coluna>header .n{margin-left:auto;background:rgba(255,255,255,.12);border-radius:999px;
  padding:1px 8px;font-size:12px;font-weight:var(--font-bold);color:#f4f4f6}
.kb-coluna>header .n:empty{display:none}
.kb-coluna.calmo{opacity:.72}
.kb-pilha{flex:1;min-height:0;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:10px}
.kb-vazio{color:#6b6b76;font-size:13px;text-align:center;padding:22px 8px}

.kb-tag{display:inline-block;font-size:10.5px;font-weight:var(--font-bold);text-transform:uppercase;letter-spacing:.6px;
  border-radius:999px;padding:2px 9px;margin-bottom:8px}
.kb-tag.preparar{background:rgba(168,207,69,.16);color:#c7e57a}
.kb-tag.separar{background:rgba(240,165,0,.16);color:#ffd68a}

.kds-cartao.so-separar{border-left:4px solid #f0a500}
.kds-cartao.entregue{opacity:.65}
.kds-cartao li.separar{opacity:.75}
.kds-cartao li.separar::after{content:"separar";margin-left:8px;font-size:10.5px;font-weight:var(--font-semibold);
  text-transform:uppercase;letter-spacing:.5px;color:#ffd68a;vertical-align:middle}
@media(max-width:760px){
  .kanban{grid-auto-flow:row;grid-auto-columns:auto;overflow-x:visible;overflow-y:auto}
  .kb-coluna{min-height:auto}
  .kb-pilha{overflow:visible}
}

/* --- folha da mesa no PDV: tudo o que se sabe dela num toque --- */
.mesa-folha-topo{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mesa-folha-topo h3{margin:0}
.mesa-folha-topo .marca{font-size:11.5px;font-weight:var(--font-bold);border-radius:999px;padding:3px 10px;
  background:var(--fundo-suave);color:var(--cinza)}
.mesa-folha-topo .marca.ocupada{background:var(--verde-suave);color:var(--verde-esc)}
.mesa-folha-topo .marca.chamando{background:#fff3d6;color:#8a5a00}

.mesa-fichas{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:8px;margin:14px 0 16px}
.mesa-fichas .ficha{background:var(--fundo-suave);border:1px solid var(--linha);border-radius:var(--raio-p);padding:10px 12px}
.mesa-fichas .rot{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--cinza);font-weight:var(--font-semibold)}
.mesa-fichas .num{display:block;font-size:17px;font-weight:var(--font-bold);margin-top:3px}

.conta-bloco{border:1px solid var(--linha);border-radius:var(--raio-p);padding:12px;margin-bottom:10px}
.conta-cab{display:flex;align-items:baseline;gap:8px}
.conta-cab b{font-size:14.5px}
.conta-cab .qtd{font-size:11.5px;color:var(--cinza);font-weight:var(--font-medium)}
.conta-cab .valor{margin-left:auto;font-size:15px;font-weight:var(--font-bold)}
.conta-itens{list-style:none;margin:8px 0 10px;padding:0;display:flex;flex-direction:column;gap:5px}
.conta-itens li{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--texto)}
.conta-itens li b{margin-left:auto;font-weight:var(--font-bold);color:var(--cinza);font-variant-numeric:tabular-nums}
.conta-itens li .oq{min-width:0}
.conta-itens .op{display:block;font-size:11.5px;color:var(--cinza)}

.mesa-acoes{display:flex;flex-direction:column;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--linha)}
.mesa-acoes .botao,.mesa-acoes .botao-claro{width:100%}
.mesa-acoes .vazio{background:transparent;color:var(--cinza);border:0;min-height:44px;font-weight:var(--font-medium);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:14.5px}
.mesa-acoes .vazio:hover{color:var(--texto)}
@media(min-width:520px){
  .mesa-acoes{flex-direction:row-reverse;flex-wrap:wrap;gap:12px}
  .mesa-acoes .botao,.mesa-acoes .botao-claro{width:auto;flex:1}
  .mesa-acoes .vazio{flex:0 0 auto;width:auto;padding-inline:14px}
}

/* --- banner de propaganda no topo do cardápio (1200x500, 12:5) --- */
/* o banner mora acima da faixa de ofertas, então precisa da mesma sanfona do corpo */
.vit-banner{position:relative;max-width:860px;margin:14px auto 0;border-radius:var(--raio);overflow:hidden;
  background:var(--fundo-suave);border:1px solid var(--linha)}
@media(max-width:891px){.vit-banner{margin-left:16px;margin-right:16px}}
.vit-banner .trilho{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.vit-banner .trilho::-webkit-scrollbar{display:none}
.vit-banner .quadro{flex:0 0 100%;scroll-snap-align:center;display:block;line-height:0}
.vit-banner img{width:100%;aspect-ratio:12/5;object-fit:cover;display:block}
.vit-banner .pontos{position:absolute;left:0;right:0;bottom:9px;display:flex;justify-content:center;gap:6px}
.vit-banner .pontos button{width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.55);box-shadow:0 1px 3px rgba(0,0,0,.35)}
.vit-banner .pontos button.on{background:#fff;width:18px;border-radius:999px}

/* --- banners no painel --- */
.banner-lista{display:flex;flex-direction:column;gap:10px}
.banner-item{display:flex;align-items:center;gap:12px;border:1px solid var(--linha);
  border-radius:var(--raio-p);padding:10px}
.banner-item img{width:132px;aspect-ratio:12/5;object-fit:cover;border-radius:9px;flex-shrink:0;
  background:var(--fundo-suave)}
.banner-item .txt{flex:1;min-width:0}
.banner-item .txt b{font-size:14px}
.banner-item .txt .s{font-size:12.5px;color:var(--cinza);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.banner-item.desligado{opacity:.5}

/* --- cardápio só pra ver: o botão de falar no lugar da barra do carrinho --- */
.vit-carrinho.so-falar{background:var(--ink);color:#fff;text-decoration:none}
.vit-carrinho.so-falar .ic{width:22px;height:22px;flex-shrink:0}
.vit-carrinho.so-falar .rot{opacity:.7;font-size:12px}

/* --- janela aberta trava a página atrás (ver travarFundo no icones.js) --- */
html.veu-aberto, html.veu-aberto body{overflow:hidden}
html.veu-aberto body{position:fixed;left:0;right:0;width:100%}
/* e a rolagem de dentro da janela não empurra o que está atrás */
.veu, .modal, .folha-item, .folha-item .rolagem{overscroll-behavior:contain}

/* ==========================================================================
   FICHA DA CASA · avaliações e informações, o que o cliente confere antes de pedir
   ========================================================================== */
/* a linha do cartão vira botão: some o visual de botão, fica a linha */
.vit-cartao button.linha{width:100%;background:none;border:0;border-bottom:1px solid var(--linha);
  text-align:left;cursor:pointer;font:inherit;color:var(--texto)}
.vit-cartao button.linha:last-child{border-bottom:0}
@media(hover:hover){.vit-cartao button.linha:hover .seta{color:var(--texto)}}

.info-topo{padding:52px 18px 0;border-bottom:1px solid var(--linha)}
.info-topo h2{font-size:19px;font-weight:var(--font-semibold);letter-spacing:-.015em;line-height:1.25}
.info-topo .nota-linha{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:13.5px;color:var(--cinza)}
.info-topo .nota-linha b{font-size:20px;font-weight:var(--font-bold);color:var(--texto)}
.estrelas{display:inline-flex;gap:2px}
/* o ícone é substituído por um <svg> na hora: a classe mora no envelope, não nele */
.est{display:inline-flex;color:#d5d5db}
.est svg{width:15px;height:15px}
.est.cheia{color:var(--ink)}
.est.cheia svg{fill:currentColor}
.info-abas{display:flex;margin:14px -18px -1px}
.info-abas button{flex:1;background:none;border:0;border-bottom:2.5px solid transparent;border-radius:0;
  padding:12px 8px;font-size:14.5px;font-weight:var(--font-medium);color:var(--cinza);cursor:pointer}
.info-abas button.on{color:var(--texto);font-weight:var(--font-semibold);border-bottom-color:var(--ink)}

.info-painel{padding:18px 18px 26px}
.info-painel h3{font-size:17px;font-weight:var(--font-semibold);letter-spacing:-.01em}
.info-painel h3.com-espaco{margin-top:26px}
.info-texto{font-size:13.5px;color:var(--cinza);line-height:1.55;margin-top:8px}
/* o Instagram desceu do topo do cardápio pra cá: continua sendo um link de sair,
   então ganha seta e cor de link, e não cara de texto */
/* título com ícone: a entrega mantém a moto que antes ficava no topo do cardápio */
.info-painel h3.com-ico{display:flex;align-items:center;gap:8px}
.info-painel h3.com-ico svg{width:17px;height:17px;color:var(--cinza)}
.info-link{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--verde-esc);
  text-decoration:none;padding:9px 0;font-weight:var(--font-medium)}
.info-link svg{width:16px;height:16px;flex-shrink:0}
.info-link .seta{margin-left:auto}
.info-link .seta svg{width:15px;height:15px;color:var(--cinza-2)}
.info-rodape{font-size:11.5px;color:var(--cinza);line-height:1.5;margin-top:28px;
  padding-top:14px;border-top:1px solid var(--linha)}
.info-vazio{text-align:center;padding:34px 10px;color:var(--cinza)}
.info-vazio svg{width:34px;height:34px;color:#d5d5db}
.info-vazio p{font-size:13.5px;line-height:1.55;margin-top:10px}

/* resumo da nota: a média de um lado, quantos deram cada estrela do outro */
.nota-caixa{display:flex;align-items:center;gap:16px;margin-top:12px;padding:16px;
  border:1px solid var(--linha);border-radius:var(--raio)}
.nota-caixa .media{text-align:center;flex-shrink:0;padding-right:16px;border-right:1px solid var(--linha)}
.nota-caixa .media .n{display:flex;align-items:center;gap:6px;font-size:34px;font-weight:var(--font-bold);letter-spacing:-.03em}
.nota-caixa .media .n .est svg{width:24px;height:24px}
.nota-caixa .media .s{font-size:11.5px;color:var(--cinza);margin-top:2px}
.nota-caixa .barras{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.nota-caixa .barra{display:flex;align-items:center;gap:8px}
.nota-caixa .barra .rot{display:flex;align-items:center;gap:3px;font-size:12px;font-weight:var(--font-semibold);color:var(--cinza)}
.nota-caixa .barra .rot .est svg{width:11px;height:11px}
.nota-caixa .barra .trilho{flex:1;height:6px;border-radius:99px;background:var(--linha);overflow:hidden}
.nota-caixa .barra .cheio{display:block;height:100%;border-radius:99px;background:var(--ink)}

.depoimentos{margin-top:6px}
.depo{padding:16px 0;border-bottom:1px solid var(--linha)}
.depo:last-child{border-bottom:0}
.depo .quem b{font-size:14.5px;font-weight:var(--font-semibold)}
.depo .quando{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:12px;color:var(--cinza)}
.depo p{font-size:13.5px;color:var(--cinza);line-height:1.55;margin-top:7px}

/* horário da semana: o dia de hoje em destaque, o resto pra conferir */
.info-horarios{margin-top:10px}
.info-horarios .lin{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
  font-size:13.5px;color:var(--cinza);border-bottom:1px solid var(--linha)}
.info-horarios .lin:last-child{border-bottom:0}
.info-horarios .lin.hoje{color:var(--texto);font-weight:var(--font-semibold)}
.info-horarios .lin .fechado{color:#b6b6bf}

/* --- foto do item nas listas de conferência: resumo, salão e PDV --- */
.car-linha .foto{width:44px;height:44px;border-radius:9px;object-fit:contain;flex-shrink:0;
  background:#fff;border:1px solid var(--linha)}
.item-foto{width:38px;height:38px;border-radius:8px;object-fit:contain;flex-shrink:0;
  background:#fff;border:1px solid var(--linha)}

/* número e complemento andam juntos, inclusive no celular */
.par-endereco{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px}

/* ==========================================================================
   CUPONS DA CASA · com cara de cupom mesmo, antes dos destaques
   ========================================================================== */
.vit-cupons{display:flex;gap:9px;overflow-x:auto;padding:12px 0 2px;scrollbar-width:none;
  -webkit-overflow-scrolling:touch}
.vit-cupons::-webkit-scrollbar{display:none}
/* curto e gordinho: cinza claro, sem pontilhado, com o entalhe que faz virar cupom */
.vit-cupons .cupom{flex:0 0 auto;width:132px;display:flex;align-items:center;gap:7px;
  background:#e6e6eb;border:0;border-radius:9px;padding:8px 10px;
  cursor:pointer;font:inherit;color:inherit;text-align:left;position:relative}
/* os entalhes são furos da cor da página, não bolinhas desenhadas por cima */
.vit-cupons .cupom::before,.vit-cupons .cupom::after{content:'';position:absolute;top:50%;
  width:10px;height:10px;border-radius:50%;background:var(--card);transform:translateY(-50%)}
.vit-cupons .cupom::before{left:-5px}
.vit-cupons .cupom::after{right:-5px}
.vit-cupons .cupom .ic{width:14px;height:14px;flex-shrink:0;color:var(--ink)}
.vit-cupons .cupom .txt{min-width:0;display:flex;flex-direction:column;gap:1px}
.vit-cupons .cupom b{font-size:10.5px;font-weight:var(--font-semibold);line-height:1.25}
.vit-cupons .cupom .s{font-size:9px;color:#6f6f78;line-height:1.3}
.vit-cupons .cupom .cod{align-self:flex-start;margin-top:2px;font-size:8.5px;font-weight:var(--font-bold);
  letter-spacing:.05em;background:var(--ink);color:#fff;border-radius:4px;padding:2px 4px}
@media(hover:hover){.vit-cupons .cupom:hover{background:#dcdce3}}

/* ==========================================================================
   AGENDAMENTO · dia e hora, lado a lado, e o aviso nas telas da operação
   ========================================================================== */
.par-agenda{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:10px;margin-top:10px}
.ped-cartao .agendado{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:12.5px;
  font-weight:var(--font-semibold);color:var(--texto);background:var(--verde-suave);border-radius:8px;padding:5px 8px}
.ped-cartao .agendado svg{width:14px;height:14px}
/* a tela de produção é escura: a tag do agendado segue o mesmo tom das outras de lá */
.kb-tag.agendado{background:rgba(120,170,255,.18);color:#a9c8ff;margin-left:6px}

/* ==========================================================================
   LOJA FECHADA · o cardápio inteiro apaga, sem faixa de aviso no meio
   ========================================================================== */
/* tudo perde a cor: a página inteira em cinza claro. O texto continua preto no branco,
   porque o cliente ainda vai ler o cardápio — só não vai poder pedir agora. */
body.loja-fechada .vit-capa,
body.loja-fechada .vit-cab,
body.loja-fechada .vit-abas,
body.loja-fechada .vit-banner,
body.loja-fechada .vit-corpo,
body.loja-fechada .vit-rodape{filter:grayscale(1)}
/* as imagens ainda desbotam um pouco: é o que dá a sensação de loja apagada */
body.loja-fechada .vit-capa img,
body.loja-fechada .vit-banner img,
body.loja-fechada .vit-item .foto,
body.loja-fechada .vit-destaque .capa{opacity:.55}
body.loja-fechada .vit-item .preco .por{color:var(--cinza)}
/* e o "Fechada agora" ganha corpo, já que não existe mais faixa de aviso */
body.loja-fechada .vit-cartao .nome .sub{font-weight:var(--font-semibold);color:var(--texto)}

/* ===== PDV · botão de abrir mesa / abrir comanda =====
   Fica no topo da aba, ocupa a largura toda e é a primeira coisa que o caixa vê.
   Quando não há nada aberto ele pulsa: tela vazia, único movimento possível. */
.pdv-abrir{display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;flex:0 0 auto;padding:18px 20px;border:0;border-radius:14px;
  background:var(--ink);color:#fff;font-size:17px;font-weight:var(--font-semibold);
  font-family:inherit;cursor:pointer;letter-spacing:-.01em;
  box-shadow:0 2px 10px rgba(0,0,0,.14);transition:transform .12s,box-shadow .18s}
.pdv-abrir svg{width:22px;height:22px;stroke-width:2.4}
.pdv-abrir:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.2)}
.pdv-abrir:active{transform:translateY(1px)}
.pdv-abrir.oculto{display:none}

/* o pulso é discreto de propósito: chama o olho sem virar pisca-pisca */
.pdv-abrir.chamando{animation:pdvPulsa 2s ease-in-out infinite}
@keyframes pdvPulsa{
  0%,100%{box-shadow:0 2px 10px rgba(0,0,0,.14),0 0 0 0 rgba(168,207,69,.75)}
  55%{box-shadow:0 2px 10px rgba(0,0,0,.14),0 0 0 14px rgba(168,207,69,0)}
}
@media (prefers-reduced-motion:reduce){
  .pdv-abrir.chamando{animation:none;outline:3px solid rgba(168,207,69,.9);outline-offset:3px}
}
@media (max-width:600px){
  .pdv-abrir{padding:15px 16px;font-size:16px}
}

/* ===== Entregador · cobrança e espera =====
   O cartão de cobrança muda de cor inteiro porque essa é a informação que não
   pode ser lida errada na pressa: cobrar quem já pagou é o pior erro possível. */
.ent-cobranca{border-radius:var(--raio);padding:16px 18px;border:2px solid;margin-bottom:12px}
.ent-cobranca .selo{display:flex;align-items:center;gap:8px;font-size:13px;
  font-weight:var(--font-bold);letter-spacing:.09em;text-transform:uppercase}
.ent-cobranca .selo svg{width:19px;height:19px;stroke-width:2.6}
.ent-cobranca .valor{font-size:34px;font-weight:var(--font-bold);letter-spacing:-.02em;
  line-height:1.1;margin-top:8px}
.ent-cobranca .frase{font-size:17px;font-weight:var(--font-semibold);margin-top:6px}
.ent-cobranca .detalhe{font-size:13.5px;line-height:1.4;margin-top:5px;opacity:.85}
.ent-cobranca .troco{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:10px;
  padding:9px 11px;border-radius:var(--raio-mini);font-size:13.5px;
  background:rgba(0,0,0,.06);font-weight:var(--font-medium)}
.ent-cobranca .troco svg{width:17px;height:17px;flex-shrink:0}
.ent-cobranca .troco b{font-weight:var(--font-bold)}

/* já pago: verde calmo, e a frase manda mais que o número */
.ent-cobranca.pago{background:var(--verde-suave);border-color:var(--verde-borda);color:var(--verde-txt)}
.ent-cobranca.pago .selo{color:var(--verde-esc)}

/* a receber: âmbar, com o valor grande, que é o que ele precisa pedir na porta */
.ent-cobranca.aberto{background:#fff7ed;border-color:#fdba74;color:#7c2d12}
.ent-cobranca.aberto .selo{color:#9a3412}

/* o aviso de que o pedido ainda não está pronto */
.ent-espera{display:flex;flex-direction:column;gap:5px;text-align:center;
  border-radius:var(--raio);padding:18px;margin-bottom:12px;border:2px solid}
.ent-espera svg{width:30px;height:30px;margin:0 auto 4px;stroke-width:2}
.ent-espera b{font-size:17px;font-weight:var(--font-bold)}
.ent-espera span{font-size:14px;line-height:1.45}
.ent-espera i{font-style:normal;font-size:12.5px;opacity:.75;margin-top:4px}
.ent-espera.novo{background:#fef2f2;border-color:#fca5a5;color:#7f1d1d}
.ent-espera.preparo{background:#fff7ed;border-color:#fdba74;color:#7c2d12}
.ent-espera + .botao-grande[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- apagar a loja ----------
   O vermelho aparece só aqui e no botão final. O modal é mais estreito que os
   outros de propósito: é uma pergunta, não um formulário. */
.zona-perigo{border-color:#fecaca}
.zona-perigo .cab h4{color:var(--erro)}
.apagar-modal{max-width:440px}
.apagar-icone{width:52px;height:52px;border-radius:50%;background:#fef2f2;color:var(--erro);
  display:flex;align-items:center;justify-content:center;margin:4px auto 10px}
.apagar-icone svg{width:26px;height:26px}
.apagar-modal h3{text-align:center;overflow-wrap:anywhere}
.apagar-texto{font-size:14px;color:var(--cinza);margin:8px 0}
.apagar-lista{margin:6px 0 10px 18px;font-size:14px;line-height:1.6}
.botao-perigo{background:var(--erro);color:#fff}
.botao-perigo:disabled{opacity:.4;cursor:not-allowed}

/* ---------- horários: a linha de cada dia ---------- */
.linha-horario{display:grid;grid-template-columns:1fr 110px 110px 96px;gap:8px;align-items:center}
.linha-horario .dia{font-size:13.5px;font-weight:var(--font-semibold)}
@media(max-width:600px){.linha-horario{grid-template-columns:1fr 1fr;} .linha-horario .dia{grid-column:1/2} .linha-horario .hEstado{grid-column:2/3;justify-self:end}}

/* ---------- mais fotos por produto (painel) ---------- */
.galeria-faixa{display:flex;gap:8px;overflow-x:auto;padding:4px 0;scrollbar-width:thin}
.galeria-foto{position:relative;flex:0 0 84px;width:84px;height:84px;border-radius:10px;overflow:hidden;border:1.5px solid var(--linha);background:#fff}
.galeria-foto.capa{border-color:var(--ink)}
.galeria-foto img{width:100%;height:100%;object-fit:contain;display:block}
.galeria-foto .selo{position:absolute;left:0;bottom:0;right:0;background:var(--ink);color:#fff;font-size:10px;text-align:center;padding:2px 0;letter-spacing:.06em;text-transform:uppercase}
.galeria-foto .acoes{position:absolute;top:4px;right:4px;display:flex;gap:3px}
.galeria-foto .acoes button{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.92);border:1px solid var(--linha);display:flex;align-items:center;justify-content:center;padding:0}
.galeria-foto .acoes svg{width:13px;height:13px}
.galeria-mais{flex:0 0 84px;height:84px;border-radius:10px;border:1.5px dashed var(--linha);background:var(--fundo-suave);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:12px;color:var(--cinza)}
.galeria-mais svg{width:20px;height:20px}

/* ---------- galeria no cardápio público ---------- */
.folha-item .foto-grande{position:relative}
.folha-item .galeria{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.folha-item .galeria::-webkit-scrollbar{display:none}
.folha-item .galeria img{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always}
.folha-item .pontos{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:6px;pointer-events:none}
.folha-item .pontos span{width:7px;height:7px;border-radius:50%;background:rgba(0,0,0,.25);transition:background .2s,transform .2s}
.folha-item .pontos span.on{background:var(--ink);transform:scale(1.25)}
.folha-item .seta{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.9);border:1px solid var(--linha);display:none;align-items:center;justify-content:center;padding:0}
.folha-item .seta svg{width:18px;height:18px}
.folha-item .seta.esq{left:10px}.folha-item .seta.dir{right:10px}
@media(hover:hover) and (min-width:700px){.folha-item .galeria.varias ~ .seta{display:flex}}
/* no card, ao passar o mouse, as fotos trocam sozinhas (o JS só muda o src) */
.vit-item .foto,.vit-destaque .capa img{transition:opacity .25s}
.vit-item.trocando .foto,.vit-destaque.trocando .capa img{opacity:.001}

/* PDV: o produto que acabou de entrar dá um pulo — é o feedback de que o Enter valeu */
@keyframes pdv-lancou{0%{transform:scale(1)}40%{transform:scale(.94);box-shadow:0 0 0 3px var(--verde) inset}100%{transform:scale(1)}}
.pdv-produto.lancou{animation:pdv-lancou .28s ease}

/* PDV: linha do serviço na hora de receber a mesa */
.fm-servico{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13.5px;color:var(--cinza);margin:8px 0 4px}
.fm-servico b{color:var(--ink)}

/* PDV: o aviso de "sem internet" no topo — amarelo enquanto guarda, some quando tudo subiu */
.pdv-offline{font-size:12px;font-weight:var(--font-semibold);padding:5px 10px;border-radius:99px;background:#fef3c7;color:#92400e;white-space:nowrap}
.pdv-offline.grave{background:#fee2e2;color:#991b1b;animation:pdv-pisca 1.6s ease-in-out infinite}
@keyframes pdv-pisca{50%{opacity:.55}}

/* PDV: o cartão marcado pelo teclado nas telas de Pedidos, Mesas e Comandas */
.mesa-q.foco,.cmd-cartao.foco,.pdv-abrir.foco,[data-avanca].foco{outline:3px solid var(--verde);outline-offset:2px}