<!--
=======================================================================
PROMPT DE CONTEXTO — ATEND IA — DASHBOARD RESTAURANTE
=======================================================================
PROJETO: Atend IA — SaaS de atendimento automatizado via WhatsApp + IA
DONO DO PROJETO: Déborah (usuária que está construindo o sistema)
ARQUIVO: dashboard-restaurante.html
VERSÃO ATUAL: Plano Iniciante + Módulo Mesas implementado

─── O QUE É O ATEND IA ───────────────────────────────────────────────
SaaS para restaurantes e negócios (barbearias, salões, clínicas, etc.)
que automatiza atendimento pelo WhatsApp usando IA (Groq/LLaMA).

ESTRUTURA DO SISTEMA:
- dashboard-restaurante.html → painel do dono do restaurante (ESTE ARQUIVO)
- dashboard-negocios.html    → painel para barbearias, salões, clínicas
- cardapio.html              → site de pedidos online do cliente (público)
- index.html                 → landing page de cadastro/vendas
- Backend Node.js (servidor) → routes/webhook.js, services/ai.js, etc.
- Banco de dados: Supabase (PostgreSQL)
- WhatsApp: Evolution API
- IA: Groq API (LLaMA 3.3 70B)
- Deploy: Render (servidor) + Netlify (HTML)

─── MODELO DE NEGÓCIO ────────────────────────────────────────────────
Inspirado no Consumer (consumer.com.br).
PLANOS:
  - Iniciante: até 200 pedidos/mês, 1 restaurante — R$49/mês
  - Pro: pedidos ilimitados, 1 restaurante — R$99/mês
  - Rede: ilimitado, até 5 restaurantes, painel unificado — R$199/mês
MÓDULOS ADICIONAIS (cobrados em cima de qualquer plano):
  - Mesa+ (mesas + comanda do garçom): R$49/mês
  - Relatórios Avançados: R$19/mês
  - Disparador Inteligente: R$49/mês
  - Site Delivery Personalizado: R$29/mês
  - Cashback e Fidelidade: R$29/mês

─── DECISÕES DE DESIGN ───────────────────────────────────────────────
- Dashboard usa localStorage como banco temporário (deploy ainda não feito)
- Depois do deploy (Supabase), todo save() deve virar chamada à API
- Cor primária: #CC0000 (vermelho)
- Fontes: Syne (títulos) + Plus Jakarta Sans (corpo)
- Layout: sidebar fixa 230px + main scrollável

─── O QUE FOI FEITO NESTE ARQUIVO ───────────────────────────────────
1. Tela de Mesas (NOVA — inspirada no Consumer):
   - Grid visual com tiles coloridos por status:
     * Verde (#1a7a3d) = mesa ocupada com itens
     * Cinza (#E8E8E8) = mesa livre (mostra botão ABRIR)
     * Laranja (#B45309) = mesa bloqueada (cadeado)
   - Contador de mesas em andamento no badge da sidebar
   - Configuração do número de mesas (padrão 20)
   - Abertura de mesa com nome do cliente
   - Botão "Balcão" para pedido sem mesa fixa

2. Detalhe da Mesa:
   - Lista de itens lançados com qty, nome, obs e preço
   - Subtotal e total em tempo real
   - Botões: Lançar Produto, Fechar Conta, Imprimir Comanda, Cancelar

3. Seletor de Produto (inspirado no Consumer):
   - Coluna esquerda escura com botões coloridos por categoria
   - Grid de produtos à direita com foto, nome e preço
   - Filtro por categoria em tempo real
   - Lê diretamente de DB.cardapio (mesmo cardápio do restaurante)

4. Modal de Observações ao Lançar Produto:
   - Seletor de tamanho (se o produto tiver sizes)
   - Seletor de adicionais (se o produto tiver adds)
   - Chips de observações rápidas (Para viagem, Sem cebola, etc.)
   - Campo de observação livre
   - Controle de quantidade
   - Preço atualizado em tempo real

5. Fechamento de Conta:
   - Registra pedido em DB.pedidos (tipo: 'mesa')
   - Libera a mesa automaticamente
   - (TODO: tela completa de pagamento com métodos — Fase 2)

─── O QUE AINDA FALTA CONSTRUIR (ROADMAP) ────────────────────────────
FASE 1 — Completar core (próximas implementações):
  [ ] Tela de pagamento completa (Conferir e Dividir):
      - Lista de itens + métodos (PIX, Dinheiro, Crédito, Débito, Fiado)
      - Botões de valor rápido (R$2,5,10,20,50,100)
      - Divisão de conta por número de pessoas
      - Taxa de serviço configurável
      - Saldo cashback do cliente
  [ ] Status de delivery com 5 etapas (Iniciado→Preparando→Pronto→Em Rota→Finalizado)
  [ ] Notificação ao cliente via WhatsApp ao mudar status
  [ ] Dashboard-negocios.html: adaptar para localStorage (mesmo padrão do restaurante)

FASE 2 — Plano Pro:
  [ ] Fila de atendimento em tempo real (pedidos chegando do WhatsApp/cardápio)
  [ ] Tracking do pedido para o cliente (linha do tempo na tela de sucesso do cardápio)
  [ ] Seção de Promoções no cardápio online (badge, preço riscado)
  [ ] Cashback e programa de fidelidade real (campo cashback_saldo no Supabase)
  [ ] QR code por mesa (URL cardapio.html?mesa=5)
  [ ] Vincular cliente ao pedido da mesa

FASE 3 — Deploy e Produção:
  [ ] Configurar Supabase (banco.sql já pronto)
  [ ] Deploy servidor no Render (README.md já tem o passo a passo)
  [ ] Deploy frontend no Netlify
  [ ] Conectar Evolution API (WhatsApp)
  [ ] Página de pagamento (planos + checkout — Mercado Pago ou Stripe)
  [ ] Painel admin (Déborah gerencia todos os clientes do SaaS)

FASE 4 — Escalar:
  [ ] App do garçom (comanda mobile — PWA otimizada para celular)
  [ ] Disparador inteligente (reativação de clientes inativos via WhatsApp)
  [ ] Relatórios avançados (gráficos com Chart.js)
  [ ] Plano Rede (múltiplos estabelecimentos, painel unificado)
  [ ] Totem de autoatendimento (cardápio.html em modo quiosque)
  [ ] Integração com impressoras (ZPL/ESC-POS)

─── REFERÊNCIAS VISUAIS ──────────────────────────────────────────────
- Sistema Consumer (consumer.com.br) — referência principal para UX/UI
- MenuDino (menudino.com) — referência para cardápio digital
- OlaClick (tapioca-da-jabotiana-2.ola.click) — referência para navegação por categoria

─── ARQUIVOS DO PROJETO ──────────────────────────────────────────────
Todos em /mnt/user-data/outputs/ (ou na pasta atend-ia-server do ZIP enviado)
  - dashboard-restaurante.html (ESTE ARQUIVO)
  - dashboard-negocios.html
  - cardapio.html (já com slide de categorias + responsivo desktop/mobile)
  - index.html
  - banco.sql
  - package.json
  - routes/webhook.js (corrigido para respeitar dias da semana)
  - routes/agenda.js, clientes.js, negocios.js, pedidos.js
  - services/ai.js, database.js, whatsapp.js, datas.js
  - README.md (guia completo de deploy passo a passo)

─── INSTRUÇÕES PARA CONTINUAR COM OUTRA IA ──────────────────────────
1. Forneça este arquivo HTML completo para a IA
2. Forneça também os outros arquivos relevantes
3. Diga qual fase/funcionalidade quer implementar
4. A IA deve SEMPRE fazer backup antes de editar
5. A IA deve SEMPRE verificar se as mudanças foram aplicadas antes de entregar
6. Usar Python para substituições exatas — evitar sed/awk em arquivos grandes
7. Mudanças mínimas e precisas — não reescrever o que já funciona
=======================================================================
-->
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>Painel — Atend IA Restaurantes</title>
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet"/>
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --red:#CC0000;--red2:#AA0000;--red3:#FF1744;--red-lt:#FFF0F0;--red-xlt:#FFF8F8;
  --bg:#F8F9FA;--bg2:#FFFFFF;--card:#FFFFFF;
  --border:rgba(204,0,0,.12);--border2:#E8E8E8;
  --text:#1A0000;--muted:#7A6060;--muted2:#AAA;
  --green:#16A34A;--green-lt:#F0FFF4;--yellow:#B45309;--yellow-lt:#FFFBEB;
  --blue:#1D4ED8;--blue-lt:#EFF6FF;
  --sw:230px;--fd:'Syne',sans-serif;--fb:'Plus Jakarta Sans',sans-serif;
}
html,body{height:100%;overflow:hidden}
body{background:var(--bg);color:var(--text);font-family:var(--fb);display:flex;font-size:14px}

/* ── SIDEBAR ── */
.sidebar{width:var(--sw);height:100vh;background:var(--red2);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}
.sb-logo{padding:18px 16px 14px;font-family:var(--fd);font-size:1.2rem;font-weight:800;color:white;border-bottom:1px solid rgba(255,255,255,.15)}
.sb-biz{padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.12);display:flex;align-items:center;gap:9px}
.bav{width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.biz-nm{font-weight:700;font-size:.82rem;color:white;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.biz-pl{font-size:.66rem;color:rgba(255,255,255,.65);margin-top:1px}
.sb-nav{flex:1;padding:10px 8px;overflow-y:auto}
.ng{font-size:.62rem;font-weight:700;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.1em;padding:0 7px;margin:12px 0 4px}
.ni{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:7px;cursor:pointer;font-size:.82rem;font-weight:500;color:rgba(255,255,255,.72);transition:all .15s;margin-bottom:1px;border:none;background:none;width:100%;text-align:left;font-family:var(--fb)}
.ni:hover{background:rgba(255,255,255,.1);color:white}
.ni.active{background:rgba(255,255,255,.18);color:white;font-weight:600}
.ni-ic{font-size:.95rem;width:18px;text-align:center;flex-shrink:0}
.nbadge{margin-left:auto;background:white;color:var(--red);font-size:.6rem;font-weight:700;padding:1px 5px;border-radius:100px;min-width:16px;text-align:center}
.sb-bot{padding:10px 12px;border-top:1px solid rgba(255,255,255,.12)}
.ia-row{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.08);border-radius:8px;padding:8px 11px}
.ia-info{display:flex;align-items:center;gap:6px;font-size:.78rem;color:rgba(255,255,255,.75)}
.iadot{width:6px;height:6px;border-radius:50%;background:#4ADE80;flex-shrink:0}
.iadot.off{background:#F87171}
.tgl{width:36px;height:19px;background:rgba(255,255,255,.25);border-radius:100px;position:relative;cursor:pointer;transition:background .25s;border:none;flex-shrink:0}
.tgl.on{background:#4ADE80}
.tgl::after{content:'';position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:white;transition:left .22s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.tgl.on::after{left:19px}

/* ── MAIN ── */
.main{flex:1;height:100vh;overflow-y:auto;display:flex;flex-direction:column;min-width:0;background:var(--bg)}
.topbar{background:white;border-bottom:1px solid var(--border2);padding:12px 22px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:40;gap:10px;flex-shrink:0}
.tb-left{display:flex;align-items:center;gap:10px}
.tb-title{font-family:var(--fd);font-size:.97rem;font-weight:700;color:var(--text)}
.tb-r{display:flex;gap:7px;align-items:center}
.btn{padding:6px 13px;border-radius:7px;font-size:.78rem;font-weight:600;cursor:pointer;border:none;font-family:var(--fb);transition:all .18s;white-space:nowrap}
.btn-g{background:#F5F5F5;color:var(--muted);border:1px solid var(--border2)}
.btn-g:hover{background:#EAEAEA;color:var(--text)}
.btn-r{background:var(--red);color:white}
.btn-r:hover{background:var(--red2)}
.content{padding:20px 22px;flex:1}

/* ── METRICS ── */
.mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:11px;margin-bottom:18px}
.mc{background:white;border:1px solid var(--border2);border-radius:11px;padding:14px 16px}
.mc-l{font-size:.72rem;color:var(--muted);margin-bottom:6px;font-weight:500}
.mc-v{font-family:var(--fd);font-size:1.65rem;font-weight:800;line-height:1;margin-bottom:3px;color:var(--text)}
.mc-d{font-size:.71rem;font-weight:500}
.up{color:var(--green)}.dn{color:var(--red)}
.mc-accent{border-left:3px solid var(--red)}

/* ── BOX ── */
.box{background:white;border:1px solid var(--border2);border-radius:11px;overflow:hidden;margin-bottom:16px}
.bx-hd{padding:13px 16px;border-bottom:1px solid var(--border2);display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.bx-hd h3{font-family:var(--fd);font-size:.88rem;font-weight:700}
table{width:100%;border-collapse:collapse}
th{padding:9px 14px;text-align:left;font-size:.68rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border2);background:#FAFAFA}
td{padding:10px 14px;font-size:.81rem;border-bottom:1px solid #F5F5F5}
tr:last-child td{border-bottom:none}
tr:hover td{background:#FAFAFA}
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:100px;font-size:.68rem;font-weight:600}
.tg-gr{background:var(--green-lt);color:var(--green)}
.tg-yw{background:var(--yellow-lt);color:var(--yellow)}
.tg-rd{background:var(--red-lt);color:var(--red)}
.tg-bl{background:var(--blue-lt);color:var(--blue)}
.tg-gy{background:#F5F5F5;color:var(--muted)}

/* ── MESAS GRID ── */
.mesas-wrap{padding:18px}
.mesas-section-title{font-family:var(--fd);font-size:.78rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;margin-top:16px}
.mesas-section-title:first-child{margin-top:0}
.mesas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin-bottom:6px}
.mesa-tile{border-radius:12px;padding:12px 10px;cursor:pointer;transition:transform .15s,box-shadow .15s;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:90px;border:none;font-family:var(--fb);position:relative}
.mesa-tile:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.14)}
.mesa-tile:active{transform:scale(.97)}
.mesa-livre{background:#E8E8E8;color:#666}
.mesa-livre .mesa-num{color:#555}
.mesa-ocupada{background:#1a7a3d;color:white}
.mesa-ocupada .mesa-num{color:white}
.mesa-bloqueada{background:#B45309;color:white}
.mesa-bloqueada .mesa-num{color:white}
.mesa-pendente{background:#1D4ED8;color:white}
.mesa-pendente .mesa-num{color:white}
.mesa-num{font-family:var(--fd);font-size:1.6rem;font-weight:800;line-height:1}
.mesa-label{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-top:3px;opacity:.85}
.mesa-cliente{font-size:.68rem;font-weight:600;margin-top:5px;max-width:90px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.mesa-tempo{font-size:.6rem;opacity:.75;margin-top:2px}
.mesa-total{font-size:.68rem;font-weight:700;margin-top:3px}
.mesa-abrir-label{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#999;margin-top:6px}
/* ── DETALHE DA MESA ── */
.mesa-detalhe{padding:0}
.md-header{background:white;border-bottom:1px solid var(--border2);padding:14px 20px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:10}
.md-num{font-family:var(--fd);font-size:2rem;font-weight:800;color:var(--green);line-height:1;min-width:50px}
.md-info{flex:1}
.md-cliente{font-weight:700;font-size:.92rem;color:var(--text)}
.md-tempo{font-size:.75rem;color:var(--muted)}
.md-body{display:grid;grid-template-columns:1fr 340px;gap:0;min-height:calc(100vh - 120px)}
.md-itens{padding:16px 20px;border-right:1px solid var(--border2)}
.md-itens h4{font-family:var(--fd);font-size:.85rem;font-weight:700;margin-bottom:12px;color:var(--text)}
.md-item-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #F5F5F5}
.md-item-row:last-child{border-bottom:none}
.md-item-qty{font-weight:700;font-size:.82rem;color:var(--red);min-width:24px}
.md-item-nm{flex:1;font-size:.82rem;color:var(--text);font-weight:500}
.md-item-obs{font-size:.71rem;color:var(--muted);display:block;margin-top:1px}
.md-item-pr{font-weight:700;font-size:.82rem;color:var(--text);flex-shrink:0}
.md-item-del{background:var(--red-lt);border:none;color:var(--red);width:22px;height:22px;border-radius:5px;cursor:pointer;font-size:.75rem;flex-shrink:0}
.md-subtotal{margin-top:14px;padding-top:12px;border-top:2px solid var(--border2)}
.md-subtotal-row{display:flex;justify-content:space-between;font-size:.82rem;margin-bottom:5px;color:var(--muted)}
.md-subtotal-row.total{font-size:.97rem;font-weight:700;color:var(--text);margin-top:6px;padding-top:6px;border-top:1px solid var(--border2)}
.md-actions{padding:16px;display:flex;flex-direction:column;gap:10px}
.md-actions h4{font-family:var(--fd);font-size:.85rem;font-weight:700;margin-bottom:4px;color:var(--text)}
/* ── SELETOR DE PRODUTO ── */
.prod-selector{display:grid;grid-template-columns:180px 1fr;height:calc(100vh - 120px)}
.prod-cats{background:#1a1a2e;padding:12px 8px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.prod-cat-btn{border:none;border-radius:8px;padding:12px 10px;font-family:var(--fb);font-size:.78rem;font-weight:700;cursor:pointer;transition:all .18s;text-align:center;color:white}
.prod-cat-btn.sel{outline:3px solid white}
.prod-cat-todas{background:#444}
.prod-grid{padding:14px;overflow-y:auto;background:#F8F9FA}
.prod-grid-title{font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.prod-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.prod-item{background:white;border:1px solid var(--border2);border-radius:11px;overflow:hidden;cursor:pointer;transition:box-shadow .18s;display:flex;flex-direction:column}
.prod-item:hover{box-shadow:0 4px 14px rgba(0,0,0,.12)}
.prod-item:active{transform:scale(.97)}
.prod-item-img{width:100%;height:80px;object-fit:cover;background:#F5F5F5;display:flex;align-items:center;justify-content:center;font-size:2rem;flex-shrink:0}
.prod-item-body{padding:8px 9px 10px}
.prod-item-nm{font-size:.78rem;font-weight:700;color:var(--text);margin-bottom:3px;line-height:1.25}
.prod-item-pr{font-size:.8rem;font-weight:700;color:var(--red)}
/* ── OBS MODAL ── */
.obs-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.obs-chip{padding:5px 11px;border-radius:100px;border:1.5px solid var(--border2);background:white;font-size:.77rem;cursor:pointer;transition:all .18s;font-family:var(--fb)}
.obs-chip.sel{background:var(--red);border-color:var(--red);color:white}

/* ── KANBAN ── */
.kanban-wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;padding:14px}
.kc-hd{display:flex;align-items:center;justify-content:space-between;padding:8px 11px;border-radius:8px;font-weight:700;font-size:.78rem;margin-bottom:9px}
.kc-novo{background:#FEF9C3;color:#854D0E}
.kc-prep{background:#DBEAFE;color:#1D4ED8}
.kc-pronto{background:#F3E8FF;color:#7C3AED}
.kc-rota{background:#FEF3C7;color:#B45309}
.kc-ok{background:#DCFCE7;color:#15803D}
/* Timeline de status */
.status-timeline{display:flex;align-items:center;gap:0;margin:14px 16px 0;overflow-x:auto;padding-bottom:2px}
.stl-step{display:flex;flex-direction:column;align-items:center;flex:1;min-width:80px;position:relative}
.stl-step:not(:last-child)::after{content:'';position:absolute;top:14px;left:50%;width:100%;height:2px;background:#E8E8E8;z-index:0}
.stl-step.ativo:not(:last-child)::after{background:var(--red)}
.stl-flag{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;position:relative;z-index:1;border:2px solid #E8E8E8;background:white;transition:all .25s}
.stl-step.ativo .stl-flag{border-color:var(--red);background:var(--red);color:white}
.stl-step.concluido .stl-flag{border-color:var(--green);background:var(--green);color:white}
.stl-step.concluido::after{background:var(--green)}
.stl-lbl{font-size:.6rem;font-weight:700;color:var(--muted);margin-top:4px;text-align:center;white-space:nowrap}
.stl-step.ativo .stl-lbl{color:var(--red)}
.stl-step.concluido .stl-lbl{color:var(--green)}
/* Kanban 5 colunas */
.kanban-wrap-5{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:14px}
.ocart{background:white;border:1px solid var(--border2);border-radius:9px;padding:11px 13px;margin-bottom:7px;transition:box-shadow .2s;cursor:default}
.ocart:hover{box-shadow:0 2px 10px rgba(204,0,0,.08)}
.ocart h4{font-size:.82rem;font-weight:700;color:var(--text);margin-bottom:3px;display:flex;justify-content:space-between;align-items:center}
.ocart-tipo{font-size:.66rem;font-weight:600;padding:2px 7px;border-radius:100px}
.del{background:var(--red-lt);color:var(--red)}
.mes{background:var(--blue-lt);color:var(--blue)}
.bal{background:var(--yellow-lt);color:var(--yellow)}
.ocart-itens{font-size:.76rem;color:var(--muted);margin-bottom:7px;line-height:1.5}
.ocart-footer{display:flex;justify-content:space-between;align-items:center;gap:5px}
.ocart-val{font-weight:700;font-size:.83rem;color:var(--text)}
.ocart-btns{display:flex;gap:4px}
.bsm{padding:4px 10px;border-radius:6px;border:none;cursor:pointer;font-size:.72rem;font-weight:600;font-family:var(--fb);transition:all .18s}
.bsm-g{background:var(--green-lt);color:var(--green)}
.bsm-g:hover{background:#BBF7D0}
.bsm-r{background:var(--red-lt);color:var(--red)}
.bsm-r:hover{background:#FECACA}
.ocart-tempo{font-size:.66rem;color:var(--muted2)}

/* ── CARDÁPIO ── */
.cat-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:13px}
.cat-tab{padding:5px 13px;border-radius:100px;border:1px solid var(--border2);background:white;color:var(--muted);font-size:.77rem;cursor:pointer;transition:all .18s;font-family:var(--fb);font-weight:500}
.cat-tab.active{background:var(--red);border-color:var(--red);color:white;font-weight:700}
.menu-list{display:flex;flex-direction:column;gap:7px;margin-bottom:11px}
.mi{display:flex;align-items:flex-start;gap:10px;background:white;border:1px solid var(--border2);border-radius:9px;padding:11px 13px;transition:box-shadow .2s}
.mi:hover{box-shadow:0 2px 10px rgba(0,0,0,.06)}
.mi-em{font-size:1.4rem;flex-shrink:0;margin-top:2px}
.mi-body{flex:1;min-width:0}
.mi-nm{font-weight:700;font-size:.86rem;color:var(--text);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.mi-cat-tag{font-size:.64rem;background:#F5F5F5;color:var(--muted);padding:1px 6px;border-radius:100px}
.mi-desc{font-size:.74rem;color:var(--muted);margin-top:2px}
.mi-sizes{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.mi-size{font-size:.72rem;background:var(--red-xlt);color:var(--red);padding:2px 8px;border-radius:100px;font-weight:600}
.mi-avail{display:flex;align-items:center;gap:5px;margin-left:auto;flex-shrink:0}
.mi-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.mi-dot.on{background:var(--green)}
.mi-dot.off{background:var(--red3)}
.mi-pr{font-weight:700;font-size:.85rem;color:var(--red);flex-shrink:0}
.mi-actions{display:flex;gap:5px;align-items:center}
.badd{display:flex;align-items:center;gap:6px;background:white;border:1.5px dashed var(--border2);color:var(--muted);padding:9px 13px;border-radius:9px;cursor:pointer;font-size:.8rem;font-family:var(--fb);transition:all .18s;width:100%}
.badd:hover{border-color:var(--red);color:var(--red)}

/* ── FORM ── */
.fs{margin-bottom:22px}
.fs-ti{font-family:var(--fd);font-size:.95rem;font-weight:700;color:var(--text);margin-bottom:3px}
.fs-su{font-size:.79rem;color:var(--muted);margin-bottom:13px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.fg{margin-bottom:11px}
.fg.full{grid-column:1/-1}
label{display:block;font-size:.75rem;font-weight:600;margin-bottom:3px;color:var(--muted)}
input,select,textarea{width:100%;padding:8px 11px;border-radius:7px;background:white;border:1px solid #DDD;color:var(--text);font-size:.84rem;font-family:var(--fb);transition:border-color .18s;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--red)}
select option{background:white}
textarea{resize:vertical;min-height:65px}
.trow{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border2)}
.trow:last-child{border-bottom:none}
.ti strong{font-size:.84rem;display:block;margin-bottom:1px;color:var(--text)}
.ti span{font-size:.74rem;color:var(--muted)}
.tgl-r{width:36px;height:19px;background:#DDD;border-radius:100px;position:relative;cursor:pointer;transition:background .22s;border:none;flex-shrink:0}
.tgl-r.on{background:var(--red)}
.tgl-r::after{content:'';position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:white;transition:left .22s;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.tgl-r.on::after{left:19px}

/* ── CAIXA ── */
.caixa-status{padding:16px 18px;border-radius:10px;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.caixa-aberta{background:var(--green-lt);border:1px solid #86EFAC}
.caixa-fechada{background:var(--red-lt);border:1px solid #FCA5A5}
.cx-info h3{font-family:var(--fd);font-size:.95rem;font-weight:700;margin-bottom:3px}
.cx-info p{font-size:.78rem;color:var(--muted)}
.mov-list{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.mov{display:flex;align-items:center;gap:10px;background:white;border:1px solid var(--border2);border-radius:8px;padding:10px 13px}
.mov-ic{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0}
.mov-ic-in{background:var(--green-lt)}
.mov-ic-out{background:var(--red-lt)}
.mov-info{flex:1;min-width:0}
.mov-nm{font-size:.83rem;font-weight:600;color:var(--text)}
.mov-dt{font-size:.71rem;color:var(--muted)}
.mov-val{font-weight:700;font-size:.86rem}
.mov-in{color:var(--green)}
.mov-out{color:var(--red)}

/* ── ESTOQUE ── */
.est-list{display:flex;flex-direction:column;gap:6px;margin-bottom:11px}
.est{display:flex;align-items:center;gap:10px;background:white;border:1px solid var(--border2);border-radius:8px;padding:10px 13px}
.est-ic{width:30px;height:30px;border-radius:7px;background:#F5F5F5;display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0}
.est-body{flex:1;min-width:0}
.est-nm{font-size:.83rem;font-weight:600;color:var(--text)}
.est-un{font-size:.71rem;color:var(--muted)}
.est-qty{font-weight:700;font-size:.9rem;text-align:right;flex-shrink:0;min-width:50px}
.est-bar{height:5px;border-radius:100px;background:#F5F5F5;margin-top:5px;overflow:hidden}
.est-fill{height:100%;border-radius:100px;transition:width .4s}
.est-ok{background:var(--green)}
.est-low{background:var(--yellow)}
.est-zero{background:var(--red)}
.est-alert{background:var(--yellow-lt);border-color:#FDE68A}

/* ── FIDELIDADE ── */
.fid-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:11px;margin-bottom:16px}
.fid-card{background:white;border:1px solid var(--border2);border-radius:10px;padding:14px 15px;text-align:center}
.fid-card .num{font-family:var(--fd);font-size:1.8rem;font-weight:800;color:var(--red);line-height:1}
.fid-card .lbl{font-size:.73rem;color:var(--muted);margin-top:3px}
.cli-fid{display:flex;align-items:center;gap:10px;background:white;border:1px solid var(--border2);border-radius:9px;padding:10px 13px;margin-bottom:6px}
.cli-av{width:32px;height:32px;border-radius:50%;background:var(--red-lt);color:var(--red);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.82rem;flex-shrink:0}
.cli-info{flex:1;min-width:0}
.cli-nm{font-size:.83rem;font-weight:600;color:var(--text)}
.cli-pts{font-size:.72rem;color:var(--muted)}
.pts-badge{background:var(--red-lt);color:var(--red);font-weight:700;font-size:.74rem;padding:3px 9px;border-radius:100px;flex-shrink:0}
.coupon-list{display:flex;flex-direction:column;gap:7px;margin-bottom:11px}
.coupon{display:flex;align-items:center;gap:10px;background:white;border:1px solid var(--border2);border-radius:9px;padding:11px 14px}
.coupon-code{font-family:var(--fd);font-size:.85rem;font-weight:700;color:var(--red);background:var(--red-lt);padding:4px 10px;border-radius:6px;flex-shrink:0}
.coupon-info{flex:1;min-width:0}
.coupon-nm{font-size:.83rem;font-weight:600;color:var(--text)}
.coupon-det{font-size:.72rem;color:var(--muted);margin-top:1px}
.coupon-uses{font-size:.73rem;color:var(--muted);flex-shrink:0}

/* ── RELATÓRIOS ── */
.chart-row{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:16px}
.chart-box{background:white;border:1px solid var(--border2);border-radius:11px;padding:14px 16px}
.chart-box h4{font-family:var(--fd);font-size:.84rem;font-weight:700;margin-bottom:12px;color:var(--text)}
.bar-row{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.bar-lbl{font-size:.72rem;color:var(--muted);width:70px;text-align:right;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-bg{flex:1;height:7px;background:#F5F5F5;border-radius:100px;overflow:hidden}
.bar-fill{height:100%;border-radius:100px;background:var(--red);transition:width .5s}
.bar-val{font-size:.71rem;font-weight:600;color:var(--text);width:38px;text-align:right;flex-shrink:0}

/* ── FILA DE ATENDIMENTO ── */
.fila-wrap{display:grid;grid-template-columns:280px 1fr;height:calc(100vh - 56px)}
.fila-lista{border-right:1px solid var(--border2);overflow-y:auto;background:white}
.fila-header{padding:13px 14px;border-bottom:1px solid var(--border2);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:white;z-index:5}
.fila-header h4{font-family:var(--fd);font-size:.85rem;font-weight:700}
.fila-item{padding:12px 14px;border-bottom:1px solid #F5F5F5;cursor:pointer;transition:background .15s;display:flex;gap:10px;align-items:flex-start}
.fila-item:hover{background:#FAFAFA}
.fila-item.ativo{background:var(--red-lt);border-left:3px solid var(--red)}
.fila-item.novo-piscando{animation:piscar .7s ease-in-out 3}
@keyframes piscar{0%,100%{background:white}50%{background:#FFF0F0}}
.fila-origem{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0}
.fila-origem-wa{background:#DCF8C6}
.fila-origem-site{background:#DBEAFE}
.fila-origem-manual{background:#F3E8FF}
.fila-item-info{flex:1;min-width:0}
.fila-item-nm{font-size:.82rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fila-item-sub{font-size:.71rem;color:var(--muted);margin-top:1px}
.fila-item-time{font-size:.65rem;color:var(--muted2);flex-shrink:0}
.fila-detalhe{padding:20px;overflow-y:auto;background:var(--bg)}
.fila-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--muted);text-align:center;gap:10px}
.fila-badge-novo{background:var(--red);color:white;font-size:.62rem;font-weight:700;padding:1px 6px;border-radius:100px;margin-left:6px}
/* Som de notificação visual */
.fila-pulse{position:fixed;top:0;left:0;right:0;height:3px;background:var(--red);animation:pulse-bar .8s ease-out forwards;z-index:999}
@keyframes pulse-bar{0%{opacity:1;transform:scaleX(0)}60%{opacity:1;transform:scaleX(1)}100%{opacity:0}}

/* ── TOAST ── */
.toast{position:fixed;bottom:18px;right:18px;z-index:999;background:white;border:1.5px solid var(--red);border-radius:9px;padding:10px 15px;font-size:.81rem;color:var(--red);font-weight:600;box-shadow:0 8px 26px rgba(0,0,0,.1);transform:translateY(60px);opacity:0;transition:all .28s;pointer-events:none;max-width:300px}
.toast.show{transform:translateY(0);opacity:1}
.toast.ok{border-color:var(--green);color:var(--green)}

/* ── LOADING ── */
.loading{display:flex;align-items:center;justify-content:center;padding:44px;color:var(--muted);font-size:.88rem;gap:9px}
.spin{width:16px;height:16px;border:2px solid #DDD;border-top-color:var(--red);border-radius:50%;animation:spin .65s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── MODAL ── */
.ov{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);z-index:100;display:none;align-items:center;justify-content:center;padding:14px}
.ov.show{display:flex}
.modal{background:white;border-radius:14px;padding:24px 22px;max-width:520px;width:100%;max-height:88vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.18)}
.modal h3{font-family:var(--fd);font-size:1rem;font-weight:700;margin-bottom:16px;color:var(--text)}
.modal-btns{display:flex;gap:8px;margin-top:14px}
.btn-cancel{flex:1;padding:9px;border-radius:100px;background:#F5F5F5;border:none;color:var(--muted);font-weight:600;font-size:.86rem;cursor:pointer;font-family:var(--fb)}
.btn-ok{flex:2;padding:9px;border-radius:100px;background:var(--red);border:none;color:white;font-weight:700;font-size:.86rem;cursor:pointer;font-family:var(--fb);transition:background .18s}
.btn-ok:hover{background:var(--red2)}

/* ── ONBOARD ── */
.onboard{position:fixed;inset:0;background:var(--bg);z-index:500;display:flex;align-items:center;justify-content:center;padding:18px}
.onboard.hide{display:none}
.ob-box{background:white;border:2px solid var(--border2);border-radius:18px;padding:32px 28px;max-width:460px;width:100%;text-align:center}
.ob-box h1{font-family:var(--fd);font-size:1.7rem;font-weight:800;color:var(--text);margin-bottom:7px}
.ob-box p{font-size:.87rem;color:var(--muted);margin-bottom:22px;line-height:1.6}
.ob-plan{background:var(--red-lt);border:1px solid rgba(204,0,0,.2);border-radius:10px;padding:12px 16px;margin-bottom:20px;text-align:left}
.ob-plan .pl{font-weight:700;color:var(--red);font-size:.87rem;margin-bottom:3px}
.ob-plan .pd{font-size:.78rem;color:var(--muted)}
.ob-btn{background:var(--red);color:white;padding:11px 28px;border-radius:100px;font-weight:700;font-size:.93rem;border:none;cursor:pointer;font-family:var(--fb);transition:background .18s}
.ob-btn:hover{background:var(--red2)}

@media(max-width:900px){
  .sidebar{display:none}
  .main{margin-left:0}
  .kanban-wrap{grid-template-columns:1fr}
  .kanban-wrap-5{grid-template-columns:1fr}
  .chart-row{grid-template-columns:1fr}
}
</style>
</head>
<body>

<!-- ONBOARDING -->
<div class="onboard" id="onboard" style="display:none">
  <div class="ob-box">
    <div style="font-size:2.8rem;margin-bottom:10px">🍽️</div>
    <h1 id="ob-title">Bem-vindo!</h1>
    <p id="ob-desc">Seu restaurante foi cadastrado com sucesso. Vamos configurar tudo agora.</p>
    <div class="ob-plan">
      <div class="pl" id="ob-plan">Plano Iniciante</div>
      <div class="pd">7 dias grátis · Zero comissão · Sem cartão</div>
    </div>
    <button class="ob-btn" onclick="fecharOnboard()">Começar a configurar →</button>
  </div>
</div>

<!-- SIDEBAR -->
<aside class="sidebar">
  <div class="sb-logo">Atend IA</div>
  <div class="sb-biz">
    <div class="bav" id="bav">🍕</div>
    <div style="min-width:0">
      <div class="biz-nm" id="biz-nm">Meu Restaurante</div>
      <div class="biz-pl" id="biz-pl">Plano Iniciante</div>
    </div>
  </div>
  <nav class="sb-nav">
    <button class="ni active" id="nav-dashboard"  onclick="go('dashboard')"><span class="ni-ic">📊</span>Dashboard</button>
    <button class="ni"        id="nav-mesas"       onclick="go('mesas')"><span class="ni-ic">🪑</span>Mesas<span class="nbadge" id="badge-m" style="display:none">0</span><span id="lock-mesas" style="display:none;margin-left:auto;font-size:.65rem;opacity:.5">🔒</span></button>
    <button class="ni"        id="nav-pedidos"     onclick="go('pedidos')"><span class="ni-ic">📦</span>Pedidos<span class="nbadge" id="badge-p" style="display:none">0</span></button>
    <button class="ni"        id="nav-fila"        onclick="go('fila')"><span class="ni-ic">🔔</span>Fila de Atendimento<span class="nbadge" id="badge-fila" style="display:none">0</span></button>
    <button class="ni"        id="nav-conversas"   onclick="go('conversas')"><span class="ni-ic">💬</span>Conversas</button>
    <div class="ng">Cardápio</div>
    <button class="ni"        id="nav-cardapio"    onclick="go('cardapio')"><span class="ni-ic">🍕</span>Itens e Categorias</button>
    <div class="ng">Operação</div>
    <button class="ni"        id="nav-caixa"       onclick="go('caixa')"><span class="ni-ic">💰</span>Caixa</button>
    <button class="ni"        id="nav-estoque"     onclick="go('estoque')"><span class="ni-ic">📦</span>Estoque</button>
    <button class="ni"        id="nav-fiado"       onclick="go('fiado')"><span class="ni-ic">📋</span>Fiado</button>
    <div class="ng">Marketing</div>
    <button class="ni"        id="nav-fidelidade"  onclick="go('fidelidade')"><span class="ni-ic">⭐</span>Fidelidade<span id="lock-fidelidade" style="display:none;margin-left:auto;font-size:.65rem;opacity:.5">🔒</span></button>
    <button class="ni"        id="nav-cupons"      onclick="go('cupons')"><span class="ni-ic">🎟️</span>Cupons</button>
    <div class="ng">Análises</div>
    <button class="ni"        id="nav-relatorios"  onclick="go('relatorios')"><span class="ni-ic">📈</span>Relatórios<span id="lock-relatorios" style="display:none;margin-left:auto;font-size:.65rem;opacity:.5">🔒</span></button>
    <div class="ng">Config</div>
    <button class="ni"        id="nav-ia"          onclick="go('ia')"><span class="ni-ic">🤖</span>Configurar IA</button>
    <button class="ni"        id="nav-entregas"    onclick="go('entregas')"><span class="ni-ic">🛵</span>Entregas</button>
    <button class="ni"        id="nav-conta"       onclick="go('conta')"><span class="ni-ic">⚙️</span>Conta</button>
  </nav>
  <div class="sb-bot">
    <div class="ia-row">
      <div class="ia-info"><div class="iadot" id="iadot"></div><span id="ia-txt">IA Ativa</span></div>
      <button class="tgl on" id="tgl-ia" onclick="toggleIA()"></button>
    </div>
  </div>
</aside>

<!-- MAIN -->
<main class="main">
  <div class="topbar">
    <div class="tb-left">
      <div class="tb-title" id="tb-title">Dashboard</div>
    </div>
    <div class="tb-r">
      <span id="tb-sub" style="font-size:.75rem;color:var(--muted)"></span>
      <button class="btn btn-g" onclick="window.open('cardapio.html','_blank')">🔗 Ver Cardápio</button>
      <button class="btn btn-g" onclick="go('pedidos')">📦 Pedidos</button>
      <button class="btn btn-r" onclick="abrirModalPedido()">+ Novo Pedido</button>
    </div>
  </div>
  <div class="content" id="content">
    <div class="loading"><div class="spin"></div>Carregando...</div>
  </div>
</main>

<div class="toast" id="toast"></div>

<!-- MODAL OBS MESA -->
<div class="ov" id="ov-obs-mesa" onclick="fecharOv('ov-obs-mesa')">
  <div class="modal" onclick="event.stopPropagation()" style="max-width:480px">
    <h3>Lançar Item na Mesa</h3>
    <div id="obs-mesa-content"></div>
    <div class="modal-btns">
      <button class="btn-cancel" onclick="fecharOv('ov-obs-mesa')">Cancelar</button>
      <button class="btn-ok" onclick="confirmarItemMesa()">Confirmar</button>
    </div>
  </div>
</div>

<!-- MODAIS -->
<div class="ov" id="ov-pedido" onclick="fecharOv('ov-pedido')">
  <div class="modal" onclick="event.stopPropagation()">
    <h3 id="modal-ped-ti">Novo Pedido Manual</h3>
    <div class="fgrid">
      <div class="fg"><label>Tipo de pedido</label>
        <select id="mp-tipo">
          <option value="delivery">🛵 Delivery</option>
          <option value="mesa">🪑 Mesa</option>
          <option value="balcao">🏪 Balcão</option>
        </select>
      </div>
      <div class="fg"><label>Cliente / Mesa</label><input id="mp-cliente" placeholder="Nome do cliente ou nº da mesa"/></div>
      <div class="fg full"><label>Itens pedidos</label><textarea id="mp-itens" placeholder="Ex: 2x Pizza Margherita, 1x Refrigerante..."></textarea></div>
      <div class="fg"><label>Total (R$)</label><input id="mp-total" type="number" step="0.01" placeholder="0,00"/></div>
      <div class="fg"><label>Endereço (delivery)</label><input id="mp-end" placeholder="Rua, número, bairro"/></div>
    </div>
    <div class="modal-btns">
      <button class="btn-cancel" onclick="fecharOv('ov-pedido')">Cancelar</button>
      <button class="btn-ok" onclick="confirmarPedido()">Confirmar Pedido</button>
    </div>
  </div>
</div>

<div class="ov" id="ov-item" onclick="fecharOv('ov-item')">
  <div class="modal" onclick="event.stopPropagation()">
    <h3 id="modal-item-ti">Novo Item</h3>
    <div class="fgrid">
      <div class="fg"><label>Emoji</label><input id="it-em" value="🍕" style="font-size:1.4rem;text-align:center"/></div>
      <div class="fg"><label>Categoria</label><input id="it-cat" placeholder="Ex: Pizzas, Lanches, Bebidas..."/></div>
      <div class="fg full"><label>Nome do item</label><input id="it-nome" placeholder="Ex: Pizza Margherita"/></div>
      <div class="fg full"><label>Descrição</label><input id="it-desc" placeholder="Ingredientes, tamanho..."/></div>
      <div class="fg"><label>Preço base (R$)</label><input id="it-preco" type="number" step="0.01" placeholder="0,00"/></div>
      <div class="fg"><label>Disponível?</label>
        <select id="it-disp"><option value="1">Sim — disponível</option><option value="0">Não — pausado</option></select>
      </div>
      <div class="fg full"><label>Tamanhos com preços (opcional)</label><input id="it-sizes" placeholder="P=25,M=35,G=45 (deixe vazio se não tiver)"/></div>
      <div class="fg full"><label>Adicionais (opcional)</label><input id="it-adds" placeholder="Queijo extra=3,Bacon=5,Cebola=0"/></div>
      <div class="fg"><label>Preço promocional (R$) <span style="font-size:.7rem;color:var(--muted)">— deixe 0 para sem promoção</span></label><input id="it-promo" type="number" step="0.01" placeholder="0,00"/></div>
      <div class="fg"><label>Cashback deste item (%)</label><input id="it-cashback-pct" type="number" step="0.5" min="0" max="20" placeholder="0"/></div>
      <div class="fg full"><label style="display:flex;align-items:center;gap:8px;cursor:pointer"><input type="checkbox" id="it-destaque" style="width:16px;height:16px;accent-color:var(--red)"> <span>🔥 Marcar como destaque (aparece na seção de promoções)</span></label></div>
      <div class="fg full">
        <label>Foto do item</label>
        <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap">
          <div id="it-foto-preview" style="width:70px;height:70px;border-radius:10px;background:#F5F5F5;border:1.5px dashed #DDD;display:flex;align-items:center;justify-content:center;font-size:2rem;overflow:hidden;flex-shrink:0">📷</div>
          <div style="flex:1">
            <input type="file" id="it-foto-file" accept="image/*" capture="environment" style="display:none" onchange="carregarFoto(this)"/>
            <button type="button" class="btn btn-g" style="width:100%;margin-bottom:5px" onclick="document.getElementById('it-foto-file').click()">📷 Tirar foto / Escolher da galeria</button>
            <button type="button" class="btn btn-g" style="width:100%;font-size:.73rem;color:var(--muted)" onclick="limparFoto()">✕ Remover foto</button>
          </div>
        </div>
        <input type="hidden" id="it-foto"/>
      </div>
    </div>
    <div class="modal-btns">
      <button class="btn-cancel" onclick="fecharOv('ov-item')">Cancelar</button>
      <button class="btn-ok" onclick="confirmarItem()">Salvar Item</button>
    </div>
  </div>
</div>

<div class="ov" id="ov-mov" onclick="fecharOv('ov-mov')">
  <div class="modal" onclick="event.stopPropagation()">
    <h3 id="modal-mov-ti">Registrar Movimentação</h3>
    <div class="fg"><label>Tipo</label>
      <select id="mv-tipo"><option value="in">Entrada (+)</option><option value="out">Saída (–)</option></select>
    </div>
    <div class="fg"><label>Descrição</label><input id="mv-desc" placeholder="Ex: Venda à vista, Sangria, Troco..."/></div>
    <div class="fg"><label>Valor (R$)</label><input id="mv-val" type="number" step="0.01" placeholder="0,00"/></div>
    <div class="fg"><label>Forma de pagamento</label>
      <select id="mv-pg"><option>PIX</option><option>Dinheiro</option><option>Crédito</option><option>Débito</option><option>Outro</option></select>
    </div>
    <div class="modal-btns">
      <button class="btn-cancel" onclick="fecharOv('ov-mov')">Cancelar</button>
      <button class="btn-ok" onclick="confirmarMov()">Registrar</button>
    </div>
  </div>
</div>

<div class="ov" id="ov-est" onclick="fecharOv('ov-est')">
  <div class="modal" onclick="event.stopPropagation()">
    <h3 id="modal-est-ti">Novo Insumo</h3>
    <div class="fgrid">
      <div class="fg"><label>Emoji</label><input id="es-em" value="📦" style="font-size:1.4rem;text-align:center"/></div>
      <div class="fg"><label>Unidade</label>
        <select id="es-un"><option>kg</option><option>g</option><option>L</option><option>ml</option><option>un</option><option>cx</option></select>
      </div>
      <div class="fg full"><label>Nome do insumo</label><input id="es-nome" placeholder="Ex: Farinha de trigo, Queijo..."/></div>
      <div class="fg"><label>Quantidade atual</label><input id="es-qty" type="number" step="0.1" placeholder="0"/></div>
      <div class="fg"><label>Quantidade mínima (alerta)</label><input id="es-min" type="number" step="0.1" placeholder="0"/></div>
    </div>
    <div class="modal-btns">
      <button class="btn-cancel" onclick="fecharOv('ov-est')">Cancelar</button>
      <button class="btn-ok" onclick="confirmarEstoque()">Salvar</button>
    </div>
  </div>
</div>

<div class="ov" id="ov-cupom" onclick="fecharOv('ov-cupom')">
  <div class="modal" onclick="event.stopPropagation()">
    <h3>Novo Cupom de Desconto</h3>
    <div class="fg"><label>Código do cupom</label><input id="cp-cod" placeholder="Ex: PROMO10" style="text-transform:uppercase"/></div>
    <div class="fg"><label>Nome / descrição</label><input id="cp-nm" placeholder="Ex: 10% na primeira compra"/></div>
    <div class="fgrid">
      <div class="fg"><label>Tipo de desconto</label>
        <select id="cp-tipo"><option value="pct">Percentual (%)</option><option value="val">Valor fixo (R$)</option></select>
      </div>
      <div class="fg"><label>Valor do desconto</label><input id="cp-val" type="number" step="1" placeholder="10"/></div>
      <div class="fg"><label>Limite de usos</label><input id="cp-uses" type="number" placeholder="100"/></div>
      <div class="fg"><label>Pedido mínimo (R$)</label><input id="cp-min" type="number" step="1" placeholder="0"/></div>
    </div>
    <div class="modal-btns">
      <button class="btn-cancel" onclick="fecharOv('ov-cupom')">Cancelar</button>
      <button class="btn-ok" onclick="confirmarCupom()">Criar Cupom</button>
    </div>
  </div>
</div>

<div class="ov" id="ov-fiado" onclick="fecharOv('ov-fiado')">
  <div class="modal" onclick="event.stopPropagation()">
    <h3 id="ov-fiado-ti">Lançar no Fiado</h3>
    <div class="fg"><label>Cliente</label><input id="fi-cli" placeholder="Nome do cliente"/></div>
    <div class="fgrid">
      <div class="fg"><label>Tipo</label>
        <select id="fi-tipo"><option value="deb">Débito (fiou)</option><option value="cred">Crédito (pagou)</option></select>
      </div>
      <div class="fg"><label>Valor (R$)</label><input id="fi-val" type="number" step="0.01" placeholder="0,00"/></div>
    </div>
    <div class="fg"><label>Descrição</label><input id="fi-desc" placeholder="Ex: 2x Pizza Margherita"/></div>
    <div class="modal-btns">
      <button class="btn-cancel" onclick="fecharOv('ov-fiado')">Cancelar</button>
      <button class="btn-ok" onclick="confirmarFiado()">Confirmar</button>
    </div>
  </div>
</div>

<script>
// ══════════════════════════════════════════
// CONFIG E URL PARAMS
// ══════════════════════════════════════════
const SERVER_URL = localStorage.getItem('server_url') || 'https://SEU-SERVIDOR.onrender.com';
const NEGOCIO_ID = localStorage.getItem('negocio_id') || new URLSearchParams(location.search).get('id') || '';
let NEGOCIO = null;
let IA_ON   = true;

// ══════════════════════════════════════════
// ESTADO GLOBAL — única fonte da verdade
// ══════════════════════════════════════════
const DB = {
  pedidos:   JSON.parse(localStorage.getItem('db_pedidos')   || '[]'),
  cardapio:  JSON.parse(localStorage.getItem('db_cardapio')  || 'null') || gerarCardapioDemo(),
  movimentos:JSON.parse(localStorage.getItem('db_movimentos')|| '[]'),
  estoque:   JSON.parse(localStorage.getItem('db_estoque')   || 'null') || gerarEstoqueDemo(),
  clientes:  JSON.parse(localStorage.getItem('db_clientes')  || '[]'),
  fiado:     JSON.parse(localStorage.getItem('db_fiado')     || '[]'),
  cupons:    JSON.parse(localStorage.getItem('db_cupons')    || '[]'),
  caixa:     JSON.parse(localStorage.getItem('db_caixa')     || 'null') || {aberta:false,abertura:null,fundo:0},
  config:    JSON.parse(localStorage.getItem('db_config')    || 'null') || gerarConfigDemo(),
};

// Mesas — estado persistido no localStorage
DB.mesas = JSON.parse(localStorage.getItem('db_mesas') || 'null') || gerarMesasDemo();

function gerarMesasDemo(){
  const mesas=[];
  for(let i=1;i<=20;i++) mesas.push({id:i,num:i,status:'livre',cliente:'',abertura:null,itens:[],bloqueada:false});
  return mesas;
}

function save(key) { localStorage.setItem('db_'+key, JSON.stringify(DB[key])); }

// ══════════════════════════════════════════
// MÓDULOS — controle de acesso por plano
// ══════════════════════════════════════════
// Módulos disponíveis: 'mesas', 'relatorios', 'disparador', 'site_delivery', 'cashback'
// Em produção: carregado do Supabase junto com o perfil do cliente
DB.modulos = JSON.parse(localStorage.getItem('db_modulos') || 'null') || ['mesas']; // demo: mesas ativo

function temModulo(mod) {
  return DB.modulos.includes(mod);
}

function ativarModuloDev(mod) {
  // Só para testes — em produção vira uma compra real
  if (!DB.modulos.includes(mod)) DB.modulos.push(mod);
  localStorage.setItem('db_modulos', JSON.stringify(DB.modulos));
  toast('✅ Módulo ' + mod + ' ativado (modo dev)!', true);
  // Atualiza sidebar
  aplicarEstadoModulos();
}

function aplicarEstadoModulos() {
  // Helper: aplica estado bloqueado/liberado em um item do menu
  function setLock(navId, lockId, ativo) {
    const btn = document.getElementById(navId);
    const lock = document.getElementById(lockId);
    if (btn) btn.style.opacity = ativo ? '1' : '.55';
    if (lock) lock.style.display = ativo ? 'none' : 'inline';
  }
  setLock('nav-mesas',      'lock-mesas',      temModulo('mesas'));
  setLock('nav-relatorios', 'lock-relatorios', temModulo('relatorios'));
  setLock('nav-fidelidade', 'lock-fidelidade', temModulo('cashback'));
}

// Banner de módulo bloqueado (exibido no content quando usuário tenta acessar)
function renderModuloBloqueado(modulo, nome, preco, descricao, icone) {
  const MODULOS_INFO = {
    mesas:        { nome: 'Mesa+',                preco: 49,  icone: '🪑',  desc: 'Gestão visual de mesas, lançamento de produtos, tela de pagamento completa (Conferir e Dividir) e impressão de comanda.' },
    relatorios:   { nome: 'Relatórios Avançados', preco: 19,  icone: '📈',  desc: 'Gráficos de faturamento, dias de maior movimento, Curva ABC de produtos, relatório de pagamentos e exportação.' },
    disparador:   { nome: 'Disparador Inteligente',preco: 49, icone: '🚀',  desc: 'Reativação automática de clientes inativos, recuperação de carrinhos abandonados e avaliações no Google.' },
    site_delivery:{ nome: 'Site Delivery',         preco: 29,  icone: '🌐',  desc: 'Domínio personalizado para seu cardápio, integração com Mercado Pago, PIX online e QR code para mesas.' },
    cashback:     { nome: 'Cashback e Fidelidade', preco: 29,  icone: '⭐',  desc: 'Programa de pontos, cashback em dinheiro que acumula a cada pedido e pode ser usado em pedidos futuros.' },
  };
  const info = MODULOS_INFO[modulo] || { nome, preco, icone, desc: descricao };
  document.getElementById('content').innerHTML = '<div style="max-width:480px;margin:40px auto;text-align:center;padding:0 16px">' +
    '<div style="font-size:3.5rem;margin-bottom:12px">' + info.icone + '</div>' +
    '<div style="font-family:var(--fd);font-size:1.3rem;font-weight:800;color:var(--text);margin-bottom:8px">Módulo ' + info.nome + '</div>' +
    '<div style="font-size:.87rem;color:var(--muted);line-height:1.6;margin-bottom:20px">' + info.desc + '</div>' +
    '<div style="font-family:var(--fd);font-size:2rem;font-weight:900;color:var(--red);margin-bottom:6px">R$ ' + info.preco + '<span style="font-size:.9rem;font-weight:400">/mês</span></div>' +
    '<div style="font-size:.75rem;color:var(--muted);margin-bottom:22px">Adicionado ao seu plano atual. Cancele quando quiser.</div>' +
    '<div style="display:flex;flex-direction:column;gap:9px;align-items:center">' +
    '<button onclick="alert(\'Em produção: redireciona para a página de checkout via Mercado Pago\')" style="background:var(--red);color:white;border:none;border-radius:10px;padding:13px 28px;font-family:var(--fb);font-weight:700;font-size:.95rem;cursor:pointer;width:240px">🔓 Contratar módulo</button>' +
    '<button onclick="ativarModuloDev(\'' + modulo + '\')" style="background:#F5F5F5;border:none;border-radius:10px;padding:10px 20px;font-family:var(--fb);font-size:.78rem;color:var(--muted);cursor:pointer;width:240px">⚙ Ativar para testes (dev)</button>' +
    '</div></div>';
}



function gerarCardapioDemo(){
  return [
    {id:1,em:'🍕',cat:'Pizzas',nome:'Pizza Margherita',desc:'Molho, mussarela e manjericão',preco:49,sizes:'P=35,M=49,G=62',adds:'Borda recheada=8',disp:true},
    {id:2,em:'🍕',cat:'Pizzas',nome:'Pizza Calabresa',desc:'Molho, mussarela e calabresa fatiada',preco:52,sizes:'P=38,M=52,G=65',adds:'Borda recheada=8',disp:true},
    {id:3,em:'🍔',cat:'Lanches',nome:'Hamburguer Artesanal',desc:'180g, queijo, alface, tomate',preco:38,sizes:'',adds:'Bacon=5,Ovo=3',disp:true},
    {id:4,em:'🥤',cat:'Bebidas',nome:'Refrigerante Lata',desc:'350ml — Coca, Guaraná, Sprite',preco:6,sizes:'',adds:'',disp:true},
    {id:5,em:'🍊',cat:'Bebidas',nome:'Suco Natural',desc:'500ml — Laranja, Maracujá, Limão',preco:10,sizes:'',adds:'',disp:true},
  ];
}

function gerarEstoqueDemo(){
  return [
    {id:1,em:'🌾',nome:'Farinha de Trigo',un:'kg',qty:15,min:5},
    {id:2,em:'🧀',nome:'Mussarela',un:'kg',qty:3,min:2},
    {id:3,em:'🍅',nome:'Molho de Tomate',un:'L',qty:8,min:3},
    {id:4,em:'🥩',nome:'Carne (hamburguer)',un:'kg',qty:4,min:2},
    {id:5,em:'🫙',nome:'Óleo de Cozinha',un:'L',qty:1.5,min:2},
  ];
}

function gerarConfigDemo(){
  return {
    nome_ia:'Atendente Virtual',tom:'amigável e descontraído',
    h24:true,notif:true,conf_end:true,lgpd:true,
    tempo_preparo:40,
    pix:'',
    taxa_entrega:5, min_delivery:20, raio:5,
    delivery:true, retirada:true, mesa:false,
  };
}

// ══════════════════════════════════════════
// HELPERS
// ══════════════════════════════════════════
function fmt(v){return 'R$ '+Number(v||0).toFixed(2).replace('.',',');}
function fmtData(s){if(!s)return'—';const d=new Date(s);return d.toLocaleDateString('pt-BR');}
function timeAgo(s){
  if(!s)return'—';
  const d=new Date(s),n=new Date(),diff=Math.floor((n-d)/60000);
  if(diff<1)return'agora';if(diff<60)return diff+'min';if(diff<1440)return Math.floor(diff/60)+'h';
  return fmtData(s);
}
function nowISO(){return new Date().toISOString();}
function uid(){return Date.now()+Math.random().toString(36).slice(2,6);}
function toast(msg,ok=false){
  const t=document.getElementById('toast');
  t.textContent=msg;t.className='toast show'+(ok?' ok':'');
  setTimeout(()=>t.className='toast',3000);
}

// ══════════════════════════════════════════
// INIT
// ══════════════════════════════════════════
function init(){
  const p=new URLSearchParams(location.search);
  const biz=p.get('biz')||'Meu Restaurante';
  const plano=p.get('plano')||'Iniciante';
  const nome=p.get('nome')||'';
  const nicho=p.get('nicho')||'restaurante';
  const isNew=p.get('novo')==='true';

  document.getElementById('biz-nm').textContent=biz;
  document.getElementById('biz-pl').textContent='Plano '+plano;

  // Ícone por nicho
  const icons={pizzaria:'🍕',hamburgueria:'🍔',lanchonete:'🌭',japonesa:'🍣',restaurante:'🍽️','outro-rest':'🍴'};
  document.getElementById('bav').textContent=icons[nicho]||'🍽️';

  updateBadge();
  updateBadgeMesas();
  updateBadgeFila();
  iniciarPollingFila();
  aplicarEstadoModulos();

  if(isNew){
    const ob=document.getElementById('onboard');
    ob.style.display='flex';
    document.getElementById('ob-title').textContent='Bem-vindo'+(nome?', '+nome.split(' ')[0]:'')+' ! 🎉';
    document.getElementById('ob-desc').textContent=biz+' foi cadastrado com sucesso no Atend IA.';
    document.getElementById('ob-plan').textContent='Plano '+plano;
  } else {
    go('dashboard');
  }
}

function fecharOnboard(){
  document.getElementById('onboard').classList.add('hide');
  go('ia');
}

function updateBadge(){
  const novos=DB.pedidos.filter(p=>p.status==='novo').length;
  const b=document.getElementById('badge-p');
  if(b){b.textContent=novos;b.style.display=novos>0?'inline-block':'none';}
}

// ══════════════════════════════════════════
// NAVEGAÇÃO
// ══════════════════════════════════════════
const TITLES={
  dashboard:'Dashboard',mesas:'Mesas e Comandas',pedidos:'Pedidos',fila:'Fila de Atendimento',conversas:'Conversas',
  cardapio:'Cardápio',caixa:'Caixa',estoque:'Estoque',fiado:'Fiado',
  fidelidade:'Fidelidade',cupons:'Cupons',relatorios:'Relatórios',
  ia:'Configurar IA',entregas:'Entregas',conta:'Conta'
};

// Mapa de módulo exigido por página
const PAGE_MODULO = {
  mesas:      'mesas',
  fidelidade: 'cashback',
  relatorios: 'relatorios',
};

function go(page){
  if(page!=='fila')pararPollingFila();
  document.querySelectorAll('.ni').forEach(n=>n.classList.remove('active'));
  const nb=document.getElementById('nav-'+page);
  if(nb)nb.classList.add('active');
  document.getElementById('tb-title').textContent=TITLES[page]||page;
  document.getElementById('tb-sub').textContent=document.getElementById('biz-nm').textContent;
  document.getElementById('content').innerHTML='<div class="loading"><div class="spin"></div>Carregando...</div>';

  // Verificação de módulo
  const modExigido=PAGE_MODULO[page];
  if(modExigido && !temModulo(modExigido)){
    renderModuloBloqueado(modExigido);
    return;
  }

  const pages={
    dashboard:renderDashboard,mesas:renderMesas,pedidos:renderPedidos,fila:renderFila,conversas:renderConversas,
    cardapio:renderCardapio,caixa:renderCaixa,estoque:renderEstoque,fiado:renderFiado,
    fidelidade:renderFidelidade,cupons:renderCupons,relatorios:renderRelatorios,
    ia:renderIA,entregas:renderEntregas,conta:renderConta
  };
  if(pages[page])pages[page]();
  else document.getElementById('content').innerHTML='<p style="color:var(--muted)">Em breve.</p>';
}

// ══════════════════════════════════════════
// MESAS — GRID VISUAL
// ══════════════════════════════════════════

// Cores das categorias por índice (estilo Consumer)
const CAT_CORES = [
  '#1D4ED8','#0F766E','#7C3AED','#B45309','#DC2626',
  '#059669','#9333EA','#C2410C','#0369A1','#4F46E5'
];

function updateBadgeMesas(){
  const ativas=DB.mesas.filter(m=>m.status==='ocupada').length;
  const b=document.getElementById('badge-m');
  if(b){b.textContent=ativas;b.style.display=ativas>0?'inline-block':'none';}
}

function calcTotalMesa(mesa){
  return mesa.itens.reduce((s,it)=>s+it.preco*it.qty,0);
}

function tempoAberta(mesa){
  if(!mesa.abertura)return'';
  const diff=Math.floor((Date.now()-new Date(mesa.abertura))/60000);
  if(diff<60)return diff+'min';
  return Math.floor(diff/60)+'h'+(diff%60>0?' '+diff%60+'min':'');
}

function renderMesas(){
  const ocupadas=DB.mesas.filter(m=>m.status==='ocupada');
  const livres=DB.mesas.filter(m=>m.status==='livre'&&!m.bloqueada);
  const bloqueadas=DB.mesas.filter(m=>m.bloqueada);

  let html=`<div class="mesas-wrap">`;

  // Topbar de mesas
  html+=`<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:8px">
    <div>
      <div style="font-family:var(--fd);font-size:1rem;font-weight:700;color:var(--text)">Mesas e Comandas</div>
      <div style="font-size:.75rem;color:var(--muted);margin-top:2px">${ocupadas.length} em andamento · ${livres.length} livres · ${bloqueadas.length} bloqueadas</div>
    </div>
    <div style="display:flex;gap:7px">
      <button class="btn btn-g" onclick="renderMesas()">🔄 Atualizar</button>
      <button class="btn btn-r" onclick="abrirMesaBalcao()">+ Balcão</button>
      <button class="btn btn-g" onclick="configurarMesas()">⚙️ Configurar mesas</button>
    </div>
  </div>`;

  // Pedidos em andamento
  if(ocupadas.length>0){
    html+=`<div class="mesas-section-title">🟢 Pedidos em andamento (${ocupadas.length} de ${DB.mesas.length})</div>
    <div class="mesas-grid">`;
    ocupadas.forEach(m=>{
      const total=calcTotalMesa(m);
      const tempo=tempoAberta(m);
      html+=`<button class="mesa-tile mesa-ocupada" onclick="abrirDetalhesMesa(${m.id})">
        <div class="mesa-num">${String(m.num).padStart(2,'0')}</div>
        <div class="mesa-cliente">${m.cliente||'Mesa '+m.num}</div>
        ${total>0?`<div class="mesa-total">${fmt(total)}</div>`:''}
        ${tempo?`<div class="mesa-tempo">${tempo}</div>`:''}
      </button>`;
    });
    html+=`</div>`;
  }

  // Mesas livres
  html+=`<div class="mesas-section-title">Mesas / Comandas Livres</div>
  <div class="mesas-grid">`;
  livres.forEach(m=>{
    html+=`<button class="mesa-tile mesa-livre" onclick="abrirMesa(${m.id})">
      <div style="font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#999;margin-bottom:4px">ABRIR</div>
      <div class="mesa-num">${String(m.num).padStart(2,'0')}</div>
    </button>`;
  });
  // Mesas bloqueadas
  bloqueadas.forEach(m=>{
    html+=`<button class="mesa-tile mesa-bloqueada" onclick="toggleBloqueio(${m.id})">
      <div style="font-size:.9rem;margin-bottom:4px">🔒</div>
      <div class="mesa-num">${String(m.num).padStart(2,'0')}</div>
      <div class="mesa-label">Bloqueada</div>
    </button>`;
  });
  html+=`</div>`;

  // Legenda
  html+=`<div style="display:flex;gap:14px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--border2)">
    <div style="display:flex;align-items:center;gap:6px;font-size:.73rem;color:var(--muted)"><div style="width:12px;height:12px;border-radius:3px;background:#1a7a3d"></div>Em andamento</div>
    <div style="display:flex;align-items:center;gap:6px;font-size:.73rem;color:var(--muted)"><div style="width:12px;height:12px;border-radius:3px;background:#E8E8E8;border:1px solid #CCC"></div>Livre</div>
    <div style="display:flex;align-items:center;gap:6px;font-size:.73rem;color:var(--muted)"><div style="width:12px;height:12px;border-radius:3px;background:#B45309"></div>Bloqueada</div>
  </div>
  </div>`;

  document.getElementById('content').innerHTML=html;
  updateBadgeMesas();
}

function abrirMesa(id){
  const m=DB.mesas.find(x=>x.id===id);
  if(!m)return;
  const nome=prompt('Nome do cliente (ou deixe em branco):','');
  if(nome===null)return; // cancelou
  m.status='ocupada';
  m.cliente=nome||'';
  m.abertura=nowISO();
  m.itens=[];
  save('mesas');
  toast('✅ Mesa '+m.num+' aberta!',true);
  updateBadgeMesas();
  abrirDetalhesMesa(id);
}

function abrirMesaBalcao(){
  const m={id:'balcao_'+uid(),num:'Balcão',status:'ocupada',cliente:'',abertura:nowISO(),itens:[],bloqueada:false};
  DB.mesas.push(m);
  save('mesas');
  abrirDetalhesMesa(m.id);
}

function toggleBloqueio(id){
  const m=DB.mesas.find(x=>x.id===id);
  if(!m)return;
  m.bloqueada=!m.bloqueada;
  if(!m.bloqueada)m.status='livre';
  save('mesas');
  renderMesas();
}

function configurarMesas(){
  const qtd=prompt('Quantas mesas você quer ter?',DB.mesas.filter(m=>typeof m.id==='number').length);
  if(!qtd||isNaN(qtd))return;
  const n=Math.max(1,Math.min(50,parseInt(qtd)));
  const novas=[];
  for(let i=1;i<=n;i++){
    const ex=DB.mesas.find(m=>m.id===i);
    novas.push(ex||{id:i,num:i,status:'livre',cliente:'',abertura:null,itens:[],bloqueada:false});
  }
  DB.mesas=novas;
  save('mesas');
  toast('✅ Mesas configuradas!',true);
  renderMesas();
}

// ══════════════════════════════════════════
// DETALHE DA MESA
// ══════════════════════════════════════════
function abrirDetalhesMesa(id){
  const m=DB.mesas.find(x=>x.id===id);
  if(!m)return;
  const total=calcTotalMesa(m);
  const tempo=tempoAberta(m);

  const itensHtml=m.itens.length===0
    ?'<div style="text-align:center;color:var(--muted);padding:28px;font-size:.83rem">Nenhum item lançado ainda.<br>Clique em <strong>+ Lançar Produto</strong></div>'
    :m.itens.map((it,idx)=>`
      <div class="md-item-row">
        <div class="md-item-qty">${it.qty}x</div>
        <div style="flex:1;min-width:0">
          <div class="md-item-nm">${it.nome}</div>
          ${it.obs?`<span class="md-item-obs">${it.obs}</span>`:''}
        </div>
        <div class="md-item-pr">${fmt(it.preco*it.qty)}</div>
        <button class="md-item-del" onclick="removerItemMesa('${id}',${idx})">✕</button>
      </div>`).join('');

  document.getElementById('content').innerHTML=`
  <div class="mesa-detalhe">
    <div class="md-header">
      <div class="md-num">${String(m.num).padStart(2,'0')}</div>
      <div class="md-info">
        <div class="md-cliente">${m.cliente||'Mesa '+m.num}</div>
        <div class="md-tempo">${tempo?'Aberta há '+tempo:''} · ${m.itens.length} item(s)</div>
      </div>
      <div style="display:flex;gap:7px;margin-left:auto">
        <button class="btn btn-g" onclick="renderMesas()">← Voltar</button>
        <button class="btn btn-g" onclick="abrirDetalhesMesa('${id}')">🔄</button>
        <button class="btn btn-r" onclick="abrirSeletorProduto('${id}')">+ Lançar Produto</button>
      </div>
    </div>
    <div class="md-body">
      <div class="md-itens">
        <h4>📋 Itens do Pedido (${m.itens.length})</h4>
        ${itensHtml}
        ${total>0?`<div class="md-subtotal">
          <div class="md-subtotal-row"><span>Subtotal</span><span>${fmt(total)}</span></div>
          <div class="md-subtotal-row total"><span>Total</span><span>${fmt(total)}</span></div>
        </div>`:''}
      </div>
      <div class="md-actions">
        <h4>Ações</h4>
        <button class="btn btn-r" style="width:100%;padding:11px" onclick="abrirSeletorProduto('${id}')">+ Lançar Produto</button>
        ${total>0?`<button class="btn" style="width:100%;padding:11px;background:#1a7a3d;color:white;border:none" onclick="fecharContaMesa('${id}')">💳 Fechar Conta — ${fmt(total)}</button>`:''}
        <button class="btn btn-g" style="width:100%;padding:11px" onclick="vincularClienteMesa('${id}')">👤 ${m.clienteId?'Cliente: '+( DB.clientes.find(c=>c.id===m.clienteId)?.nome||'Vinculado'):'Vincular Cliente'}</button>
        <button class="btn btn-g" style="width:100%;padding:11px" onclick="imprimirComanda('${id}')">🖨️ Imprimir Comanda</button>
        <button class="btn btn-g" style="width:100%;padding:11px" onclick="gerarQRMesa('${id}')">📱 QR Code da Mesa</button>
        <button class="btn" style="width:100%;padding:11px;background:var(--red-lt);color:var(--red);border:1px solid rgba(204,0,0,.2)" onclick="cancelarMesa('${id}')">✕ Cancelar Mesa</button>
        <div style="padding-top:12px;border-top:1px solid var(--border2)">
          <div style="font-size:.72rem;color:var(--muted);margin-bottom:6px;font-weight:600">EXIBIR TOTAL NA TELA</div>
          <div style="font-size:1.4rem;font-weight:800;color:var(--green)">${fmt(total)}</div>
          ${m.clienteId?(()=>{const cl=DB.clientes.find(c=>c.id===m.clienteId);return cl?'<div style="font-size:.72rem;color:#0EA5E9;margin-top:4px">💎 Cashback: '+fmt(cl.cashback_saldo||0)+'</div>':''})():''}
        </div>
      </div>
    </div>
  </div>`;
}

function removerItemMesa(id,idx){
  const m=DB.mesas.find(x=>x.id==id||x.id===id);
  if(!m)return;
  m.itens.splice(idx,1);
  save('mesas');
  abrirDetalhesMesa(id);
}

function cancelarMesa(id){
  if(!confirm('Cancelar esta mesa e limpar todos os itens?'))return;
  const m=DB.mesas.find(x=>x.id==id||x.id===id);
  if(!m)return;
  if(typeof m.id==='string'&&m.id.startsWith('balcao_')){
    DB.mesas=DB.mesas.filter(x=>x.id!==id);
  } else {
    m.status='livre';m.cliente='';m.abertura=null;m.itens=[];
  }
  save('mesas');
  toast('Mesa cancelada');
  updateBadgeMesas();
  renderMesas();
}

function fecharContaMesa(id){
  renderTelaPagamento(id);
}

// ══════════════════════════════════════════
// TELA DE PAGAMENTO — CONFERIR E DIVIDIR
// ══════════════════════════════════════════
let _pgMesaId=null;
let _pgPessoas=1;
let _pgTaxaServico=10; // % padrão
let _pgPagamentos=[]; // [{metodo,valor,label}]

const METODOS_PG=[
  {id:'dinheiro', label:'Dinheiro',  letra:'A', cor:'#16A34A', icon:'💵'},
  {id:'debito',   label:'Débito',    letra:'B', cor:'#1D4ED8', icon:'💳'},
  {id:'credito',  label:'Crédito',   letra:'C', cor:'#7C3AED', icon:'💳'},
  {id:'pix',      label:'PIX',       letra:'P', cor:'#0EA5E9', icon:'📱'},
  {id:'vr',       label:'V. Refeição',letra:'D',cor:'#B45309', icon:'🍽️'},
  {id:'va',       label:'V. Aliment.',letra:'E',cor:'#D97706', icon:'🥗'},
  {id:'fiado',    label:'Fiado',     letra:'F', cor:'#DC2626', icon:'📋'},
  {id:'outros',   label:'Outros',    letra:'O', cor:'#6B7280', icon:'···'},
];

function renderTelaPagamento(id){
  _pgMesaId=id;
  _pgPagamentos=[];
  const m=DB.mesas.find(x=>x.id==id||x.id===id);
  if(!m)return;

  const subtotal=calcTotalMesa(m);
  const taxaValor=Math.round(subtotal*(_pgTaxaServico/100)*100)/100;
  const total=subtotal+taxaValor;

  const itensHtml=m.itens.map(it=>`
    <div style="display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #F5F5F5">
      <div style="font-weight:700;font-size:.82rem;color:var(--red);min-width:26px">${it.qty}x</div>
      <div style="flex:1">
        <div style="font-size:.82rem;font-weight:500">${it.nome}</div>
        ${it.obs?`<div style="font-size:.7rem;color:var(--muted)">${it.obs}</div>`:''}
      </div>
      <div style="font-weight:700;font-size:.82rem">${fmt(it.preco*it.qty)}</div>
    </div>`).join('');

  const metodosBtns=METODOS_PG.map(mt=>`
    <button onclick="abrirInputPagamento('${mt.id}','${mt.label}','${mt.icon}')"
      style="background:${mt.cor};color:white;border:none;border-radius:9px;padding:11px 8px;cursor:pointer;font-family:var(--fb);font-weight:700;font-size:.77rem;display:flex;flex-direction:column;align-items:center;gap:3px;transition:opacity .18s"
      onmouseover="this.style.opacity='.82'" onmouseout="this.style.opacity='1'">
      <span style="font-size:1.1rem">${mt.icon}</span>
      <span>${mt.letra} — ${mt.label}</span>
    </button>`).join('');

  const valorRapido=[2,5,10,20,50,100];
  const atalhosBtns=valorRapido.map(v=>`
    <button onclick="aplicarValorRapido(${v})"
      style="background:#1a7a3d;color:white;border:none;border-radius:7px;padding:8px 6px;font-weight:700;font-size:.82rem;cursor:pointer;font-family:var(--fb)">${v.toFixed(2).replace('.',',')}</button>`).join('');

  document.getElementById('content').innerHTML=`
  <div>
    <!-- Header -->
    <div class="md-header">
      <div class="md-num">${String(m.num).padStart(2,'0')}</div>
      <div class="md-info">
        <div class="md-cliente">Conferir e Dividir — ${m.cliente||'Mesa '+m.num}</div>
        <div class="md-tempo">${m.itens.length} item(s) · ${fmt(subtotal)}</div>
      </div>
      <button class="btn btn-g" style="margin-left:auto" onclick="abrirDetalhesMesa('${id}')">← Voltar</button>
    </div>

    <!-- Corpo em 2 colunas -->
    <div style="display:grid;grid-template-columns:1fr 400px;min-height:calc(100vh - 120px)">

      <!-- Esquerda: itens -->
      <div style="padding:18px 20px;border-right:1px solid var(--border2);overflow-y:auto">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
          <div style="font-family:var(--fd);font-size:.88rem;font-weight:700">Conferir e Dividir</div>
          <div style="display:flex;align-items:center;gap:8px">
            <span style="font-size:.77rem;color:var(--muted)">Pessoas:</span>
            <div style="display:flex;align-items:center;gap:0;background:#F5F5F5;border-radius:100px;overflow:hidden">
              <button onclick="ajustarPessoas(-1)" style="width:30px;height:30px;border:none;background:transparent;font-size:1.1rem;font-weight:700;color:var(--red);cursor:pointer">−</button>
              <span id="pg-pessoas-num" style="width:28px;text-align:center;font-weight:700;font-size:.88rem">${_pgPessoas}</span>
              <button onclick="ajustarPessoas(1)" style="width:30px;height:30px;border:none;background:transparent;font-size:1.1rem;font-weight:700;color:var(--red);cursor:pointer">+</button>
            </div>
          </div>
        </div>

        <!-- Itens -->
        <div style="margin-bottom:16px">${itensHtml}</div>

        <!-- Resumo financeiro -->
        <div style="background:#F8F9FA;border-radius:10px;padding:14px 16px">
          <div style="display:flex;justify-content:space-between;font-size:.82rem;color:var(--muted);margin-bottom:6px">
            <span>Subtotal</span><span>${fmt(subtotal)}</span>
          </div>
          <div style="display:flex;justify-content:space-between;font-size:.82rem;color:var(--muted);margin-bottom:6px;align-items:center">
            <span>(+) Serviço
              <input id="pg-taxa" type="number" value="${_pgTaxaServico}" min="0" max="20" step="1"
                style="width:44px;padding:2px 5px;border:1px solid #DDD;border-radius:5px;font-size:.78rem;margin-left:6px"
                onchange="_pgTaxaServico=Number(this.value);renderTelaPagamento('${id}')"/>%
            </span>
            <span id="pg-taxa-val">${fmt(taxaValor)}</span>
          </div>
          <div style="display:flex;justify-content:space-between;font-size:1rem;font-weight:800;color:var(--text);padding-top:8px;border-top:1px solid var(--border2);margin-top:4px">
            <span>Total a Pagar</span><span style="color:var(--red)" id="pg-total-num">${fmt(total)}</span>
          </div>
          ${_pgPessoas>1?`<div style="display:flex;justify-content:space-between;font-size:.78rem;color:var(--green);margin-top:5px">
            <span>Por pessoa (${_pgPessoas}x)</span><span>${fmt(total/_pgPessoas)}</span>
          </div>`:''}
        </div>
      </div>

      <!-- Direita: pagamentos -->
      <div style="padding:16px;display:flex;flex-direction:column;gap:12px;overflow-y:auto">
        <div style="font-family:var(--fd);font-size:.88rem;font-weight:700">Pagamentos</div>

        <!-- Métodos -->
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:7px">${metodosBtns}</div>

        <!-- Input de valor -->
        <div id="pg-input-wrap" style="display:none;background:#F8F9FA;border-radius:10px;padding:12px">
          <div id="pg-input-label" style="font-size:.78rem;font-weight:700;color:var(--muted);margin-bottom:8px"></div>
          <div style="display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap">
            <button onclick="setPgValor(${total.toFixed(2)})"
              style="background:#1D4ED8;color:white;border:none;border-radius:7px;padding:7px 10px;font-weight:700;font-size:.78rem;cursor:pointer;font-family:var(--fb)">
              [A] ${fmt(total)} (Faltando)
            </button>
            <button onclick="limparPgInput()"
              style="background:#B45309;color:white;border:none;border-radius:7px;padding:7px 10px;font-weight:700;font-size:.78rem;cursor:pointer;font-family:var(--fb)">[L] Limpar</button>
          </div>
          <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px">${atalhosBtns}</div>
          <div style="display:flex;gap:6px;align-items:center">
            <span style="font-size:.78rem;color:var(--muted);white-space:nowrap">Valor: R$</span>
            <input id="pg-valor-input" type="number" step="0.01" placeholder="0,00"
              style="flex:1;padding:8px;border:1.5px solid var(--red);border-radius:7px;font-size:.92rem;font-weight:700;outline:none;font-family:var(--fb)"/>
          </div>
          <div style="display:flex;gap:6px;margin-top:8px">
            <button onclick="salvarPgItem()"
              style="flex:2;background:var(--red);color:white;border:none;border-radius:7px;padding:9px;font-weight:700;cursor:pointer;font-family:var(--fb)">✓ Confirmar</button>
            <button onclick="cancelarPgInput()"
              style="flex:1;background:#F5F5F5;border:none;border-radius:7px;padding:9px;font-size:.82rem;cursor:pointer;font-family:var(--fb)">Cancelar</button>
          </div>
          <div id="pg-obs-wrap" style="margin-top:8px">
            <input id="pg-obs-input" placeholder="Observação (opcional)"
              style="width:100%;padding:7px 10px;border:1px solid #DDD;border-radius:7px;font-size:.8rem;font-family:var(--fb)"/>
          </div>
        </div>

        <!-- Pagamentos adicionados -->
        <div id="pg-lista" style="display:flex;flex-direction:column;gap:6px"></div>

        <!-- Falta / Troco -->
        <div id="pg-saldo-wrap" style="background:#F8F9FA;border-radius:9px;padding:11px 14px;font-size:.84rem">
          <div style="display:flex;justify-content:space-between;color:var(--muted)"><span>Total</span><span>${fmt(total)}</span></div>
          <div style="display:flex;justify-content:space-between;color:var(--muted)"><span>Pago</span><span id="pg-pago-num">${fmt(0)}</span></div>
          <div style="display:flex;justify-content:space-between;font-weight:700;font-size:.92rem;margin-top:5px;padding-top:5px;border-top:1px solid var(--border2)" id="pg-falta-row">
            <span>Falta</span><span style="color:var(--red)" id="pg-falta-num">${fmt(total)}</span>
          </div>
        </div>

        <!-- Botões finais -->
        <div style="display:flex;flex-direction:column;gap:7px;padding-top:4px">
          <button onclick="finalizarPagamento('${id}',false)"
            style="background:#1a7a3d;color:white;border:none;border-radius:9px;padding:12px;font-weight:700;font-size:.9rem;cursor:pointer;font-family:var(--fb);display:flex;align-items:center;justify-content:center;gap:7px">
            ✓ Finalizar
          </button>
          <button onclick="finalizarPagamento('${id}',true)"
            style="background:#16A34A;color:white;border:none;border-radius:9px;padding:12px;font-weight:700;font-size:.9rem;cursor:pointer;font-family:var(--fb)">
            ✓ Finalizar e Imprimir
          </button>
          <button onclick="abrirDetalhesMesa('${id}')"
            style="background:#F5F5F5;color:var(--muted);border:none;border-radius:9px;padding:10px;font-weight:600;font-size:.85rem;cursor:pointer;font-family:var(--fb)">
            ← Voltar
          </button>
        </div>
      </div>
    </div>
  </div>`;
}

// Controles da tela de pagamento
let _pgMetodoAtual=null;
let _pgMetodoLabel='';
let _pgMetodoIcon='';

function ajustarPessoas(d){
  _pgPessoas=Math.max(1,_pgPessoas+d);
  renderTelaPagamento(_pgMesaId);
}

function abrirInputPagamento(id,label,icon){
  _pgMetodoAtual=id;_pgMetodoLabel=label;_pgMetodoIcon=icon;
  const wrap=document.getElementById('pg-input-wrap');
  const lbl=document.getElementById('pg-input-label');
  if(!wrap||!lbl)return;
  lbl.textContent=icon+' '+label;
  wrap.style.display='block';
  const inp=document.getElementById('pg-valor-input');
  if(inp){inp.value='';inp.focus();}
}

function setPgValor(v){
  const inp=document.getElementById('pg-valor-input');
  if(inp)inp.value=Number(v).toFixed(2);
}

function aplicarValorRapido(v){
  const inp=document.getElementById('pg-valor-input');
  if(!inp)return;
  inp.value=(Number(inp.value||0)+v).toFixed(2);
}

function limparPgInput(){
  const inp=document.getElementById('pg-valor-input');
  if(inp)inp.value='';
}

function cancelarPgInput(){
  const wrap=document.getElementById('pg-input-wrap');
  if(wrap)wrap.style.display='none';
  _pgMetodoAtual=null;
}

function salvarPgItem(){
  const val=Number(document.getElementById('pg-valor-input')?.value||0);
  const obs=document.getElementById('pg-obs-input')?.value||'';
  if(!val||!_pgMetodoAtual){toast('Informe o valor');return;}
  _pgPagamentos.push({metodo:_pgMetodoAtual,label:_pgMetodoLabel,icon:_pgMetodoIcon,valor:val,obs});
  cancelarPgInput();
  atualizarResumo();
}

function removerPgItem(idx){
  _pgPagamentos.splice(idx,1);
  atualizarResumo();
}

function atualizarResumo(){
  const m=DB.mesas.find(x=>x.id==_pgMesaId||x.id===_pgMesaId);
  if(!m)return;
  const subtotal=calcTotalMesa(m);
  const taxaValor=Math.round(subtotal*(_pgTaxaServico/100)*100)/100;
  const total=subtotal+taxaValor;
  const pago=_pgPagamentos.reduce((s,p)=>s+p.valor,0);
  const falta=total-pago;

  // Lista de pagamentos
  const lista=document.getElementById('pg-lista');
  if(lista){
    lista.innerHTML=_pgPagamentos.length===0
      ?'<div style="text-align:center;color:var(--muted);font-size:.78rem;padding:12px">Nenhum pagamento adicionado</div>'
      :_pgPagamentos.map((p,i)=>`
        <div style="display:flex;align-items:center;gap:8px;background:white;border:1px solid var(--border2);border-radius:8px;padding:9px 12px">
          <span style="font-size:.95rem">${p.icon}</span>
          <div style="flex:1">
            <div style="font-size:.82rem;font-weight:600">${p.label}</div>
            ${p.obs?`<div style="font-size:.71rem;color:var(--muted)">${p.obs}</div>`:''}
          </div>
          <div style="font-weight:700;font-size:.85rem;color:var(--green)">+${fmt(p.valor)}</div>
          <button onclick="removerPgItem(${i})"
            style="background:var(--red-lt);border:none;color:var(--red);width:22px;height:22px;border-radius:5px;cursor:pointer;font-size:.75rem">✕</button>
        </div>`).join('');
  }

  // Saldo
  const pagoEl=document.getElementById('pg-pago-num');
  const faltaEl=document.getElementById('pg-falta-num');
  const faltaRow=document.getElementById('pg-falta-row');
  if(pagoEl)pagoEl.textContent=fmt(pago);
  if(faltaEl){
    if(falta>0.005){
      faltaEl.textContent=fmt(falta);
      faltaEl.style.color='var(--red)';
      if(faltaRow){const s=faltaRow.querySelector('span');if(s)s.textContent='Falta';}
    } else if(falta<-0.005){
      faltaEl.textContent='Troco: '+fmt(-falta);
      faltaEl.style.color='var(--green)';
      if(faltaRow){const s=faltaRow.querySelector('span');if(s)s.textContent='Troco';}
    } else {
      faltaEl.textContent='✓ Pago';
      faltaEl.style.color='var(--green)';
    }
  }
}

function finalizarPagamento(id,imprimir){
  const m=DB.mesas.find(x=>x.id==id||x.id===id);
  if(!m)return;
  const subtotal=calcTotalMesa(m);
  const taxaValor=Math.round(subtotal*(_pgTaxaServico/100)*100)/100;
  const total=subtotal+taxaValor;
  const pago=_pgPagamentos.reduce((s,p)=>s+p.valor,0);
  if(pago<total-0.01){
    if(!confirm('Ainda falta '+fmt(total-pago)+'. Finalizar mesmo assim?'))return;
  }

  // Cashback: 5% do total (configurável depois)
  const pctCashback = Number(DB.config.cashback_pct||5);
  const cashbackGerado = Math.round(total*(pctCashback/100)*100)/100;

  // Atualiza cliente vinculado
  let clienteId = m.clienteId || null;
  if(clienteId){
    const cl = DB.clientes.find(c=>c.id===clienteId);
    if(cl){
      cl.cashback_saldo = Math.round(((cl.cashback_saldo||0) + cashbackGerado)*100)/100;
      cl.pedidos = (cl.pedidos||0)+1;
      cl.pontos = (cl.pontos||0) + Math.floor(total);
      cl.ultimo_pedido = nowISO();
      save('clientes');
    }
  }

  // Salva pedido
  const num=DB.pedidos.length+1;
  DB.pedidos.push({
    id:uid(),num,cliente:m.cliente||'Mesa '+m.num,
    clienteId,
    tipo:'mesa',itens_txt:m.itens.map(i=>i.qty+'x '+i.nome).join(', '),
    total,subtotal,taxa_servico:taxaValor,
    cashback_gerado: clienteId ? cashbackGerado : 0,
    pagamentos:_pgPagamentos,
    status:'entregue',criado_em:nowISO()
  });
  save('pedidos');

  // Libera mesa
  if(typeof m.id==='string'&&m.id.startsWith('balcao_')){
    DB.mesas=DB.mesas.filter(x=>x.id!==id);
  } else {
    m.status='livre';m.cliente='';m.abertura=null;m.itens=[];m.clienteId=null;
  }
  save('mesas');
  if(imprimir)imprimirComanda(id);
  const msgCash = clienteId && cashbackGerado>0 ? ' · Cashback '+fmt(cashbackGerado)+' creditado!' : '';
  toast('✅ Conta fechada! Pedido #'+num+' registrado.'+msgCash,true);
  updateBadgeMesas();
  _pgPagamentos=[];
  renderMesas();
}

// ── Vincular cliente à mesa ──
function vincularClienteMesa(id){
  const m = DB.mesas.find(x=>x.id==id||x.id===id);
  if(!m) return;

  // Monta lista de clientes com busca
  const ov = document.createElement('div');
  ov.className = 'ov show';
  ov.onclick = e => { if(e.target===ov) ov.remove(); };

  const renderLista = (filtro='') => {
    const lista = DB.clientes
      .filter(c => !filtro || (c.nome||'').toLowerCase().includes(filtro.toLowerCase()) || (c.tel||'').includes(filtro))
      .slice(0,8);
    return lista.map(c =>
      '<div onclick="window._vincularCb(\'' + c.id + '\')" style="display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;border-bottom:1px solid #F5F5F5;transition:background .15s" onmouseover="this.style.background=\'#FFF5F5\'" onmouseout="this.style.background=\'\'">' +
        '<div style="width:36px;height:36px;border-radius:50%;background:var(--red);color:white;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0">' + (c.nome||'?')[0].toUpperCase() + '</div>' +
        '<div style="flex:1;min-width:0">' +
          '<div style="font-size:.85rem;font-weight:700">' + (c.nome||'—') + '</div>' +
          '<div style="font-size:.72rem;color:var(--muted)">' + (c.tel||'') + ' · ' + (c.pedidos||0) + ' pedidos · 💎 ' + fmt(c.cashback_saldo||0) + '</div>' +
        '</div>' +
      '</div>'
    ).join('') || '<div style="padding:16px;text-align:center;color:var(--muted);font-size:.82rem">Nenhum cliente encontrado</div>';
  };

  ov.innerHTML = '<div class="modal" onclick="event.stopPropagation()" style="max-width:420px;padding:0;overflow:hidden">' +
    '<div style="padding:16px 18px;border-bottom:1px solid var(--border2)">' +
      '<h3 style="margin-bottom:10px">👤 Vincular Cliente — Mesa ' + m.num + '</h3>' +
      '<input id="vcl-busca" placeholder="Buscar por nome ou telefone..." style="width:100%;padding:9px 12px;border:1.5px solid var(--border2);border-radius:8px;font-family:var(--fb);font-size:.85rem;outline:none" oninput="document.getElementById(\'vcl-lista\').innerHTML=window._vincularRender(this.value)"/>' +
    '</div>' +
    '<div id="vcl-lista" style="max-height:320px;overflow-y:auto">' + renderLista() + '</div>' +
    '<div style="padding:12px 18px;border-top:1px solid var(--border2);display:flex;gap:8px">' +
      (m.clienteId ? '<button onclick="window._vincularCb(null)" style="flex:1;background:var(--red-lt);color:var(--red);border:1px solid rgba(204,0,0,.2);border-radius:8px;padding:9px;font-family:var(--fb);font-weight:700;cursor:pointer">Desvincular</button>' : '') +
      '<button onclick="this.closest(\'.ov\').remove()" style="flex:1;background:#F5F5F5;border:none;border-radius:8px;padding:9px;font-family:var(--fb);cursor:pointer">Cancelar</button>' +
    '</div>' +
  '</div>';

  window._vincularRender = renderLista;
  window._vincularCb = (clienteId) => {
    m.clienteId = clienteId || null;
    if(clienteId){
      const cl = DB.clientes.find(c=>c.id===clienteId);
      if(cl) m.cliente = cl.nome || m.cliente;
    } else {
      m.clienteId = null;
    }
    save('mesas');
    ov.remove();
    toast(clienteId ? '✅ Cliente vinculado!' : 'Cliente desvinculado', true);
    abrirDetalhesMesa(id);
  };

  document.body.appendChild(ov);
  setTimeout(() => document.getElementById('vcl-busca')?.focus(), 50);
}

function imprimirComanda(id){
  const m=DB.mesas.find(x=>x.id==id||x.id===id);
  if(!m)return;
  const total=calcTotalMesa(m);
  let txt='COMANDA — Mesa '+m.num+'\n';
  txt+='Cliente: '+(m.cliente||'—')+'\n';
  txt+='Abertura: '+new Date(m.abertura||Date.now()).toLocaleTimeString('pt-BR')+'\n';
  txt+='─────────────────────\n';
  m.itens.forEach(it=>txt+=it.qty+'x '+it.nome+' ................. '+fmt(it.preco*it.qty)+'\n');
  txt+='─────────────────────\n';
  txt+='TOTAL: '+fmt(total);
  alert(txt); // Em produção: conectar impressora
}

// ══════════════════════════════════════════
// SELETOR DE PRODUTO
// ══════════════════════════════════════════
let _mesaAtual=null;
let _catSel='Todas';

function abrirSeletorProduto(id){
  _mesaAtual=id;
  _catSel='Todas';
  renderSeletorProduto();
}

function renderSeletorProduto(){
  const m=DB.mesas.find(x=>x.id==_mesaAtual||x.id===_mesaAtual);
  if(!m)return;
  const cats=[...new Set(DB.cardapio.map(i=>i.cat||'Geral'))];
  const itensFiltrados=_catSel==='Todas'
    ?DB.cardapio.filter(i=>i.disp!==false)
    :DB.cardapio.filter(i=>i.disp!==false&&(i.cat||'Geral')===_catSel);

  const catBtns=[{nome:'Todas',cor:'#444'},...cats.map((c,i)=>({nome:c,cor:CAT_CORES[i%CAT_CORES.length]}))];

  const catsHtml=catBtns.map(c=>`
    <button class="prod-cat-btn ${c.nome===_catSel?'sel':''}"
      style="background:${c.cor}"
      onclick="_catSel='${c.nome}';renderSeletorProduto()">
      ${c.nome}
    </button>`).join('');

  const prodHtml=itensFiltrados.length===0
    ?'<div style="color:var(--muted);font-size:.83rem;padding:20px">Nenhum item nesta categoria.</div>'
    :itensFiltrados.map(item=>{
      const temFoto=item.foto&&item.foto.length>10;
      const preco=item.sizes&&item.sizes.trim()
        ?Math.min(...item.sizes.split(',').map(s=>Number(s.split('=')[1]||0)))
        :Number(item.preco||0);
      return `<div class="prod-item" onclick="selecionarProduto(${item.id})">
        <div class="prod-item-img">${temFoto?`<img src="${item.foto}" style="width:100%;height:100%;object-fit:cover">`:(item.em||'🍽️')}</div>
        <div class="prod-item-body">
          <div class="prod-item-nm">${item.nome}</div>
          <div class="prod-item-pr">${item.sizes?'A partir de ':''} ${fmt(preco)}</div>
        </div>
      </div>`;
    }).join('');

  document.getElementById('content').innerHTML=`
  <div>
    <div class="md-header">
      <div class="md-num">${String(m.num).padStart(2,'0')}</div>
      <div class="md-info">
        <div class="md-cliente">Lançar produto — ${m.cliente||'Mesa '+m.num}</div>
        <div class="md-tempo">Selecione a categoria e o produto</div>
      </div>
      <button class="btn btn-g" style="margin-left:auto" onclick="abrirDetalhesMesa('${_mesaAtual}')">← Voltar</button>
    </div>
    <div class="prod-selector">
      <div class="prod-cats">${catsHtml}</div>
      <div class="prod-grid">
        <div class="prod-grid-title">${_catSel==='Todas'?'Todos os itens':_catSel} (${itensFiltrados.length})</div>
        <div class="prod-items">${prodHtml}</div>
      </div>
    </div>
  </div>`;
}

function selecionarProduto(itemId){
  const item=DB.cardapio.find(x=>x.id===itemId);
  if(!item)return;
  abrirModalObsMesa(item);
}

function abrirModalObsMesa(item){
  const temSizes=item.sizes&&item.sizes.trim();
  const temAdds=item.adds&&item.adds.trim();

  const sizesHtml=temSizes?`
    <div style="margin-bottom:12px">
      <label style="font-size:.75rem;font-weight:600;color:var(--muted);display:block;margin-bottom:6px">Tamanho</label>
      <div style="display:flex;flex-wrap:wrap;gap:6px" id="sz-opts">
        ${item.sizes.split(',').map((s,i)=>{
          const[nm,pr]=s.trim().split('=');
          return `<button class="obs-chip ${i===0?'sel':''}" onclick="selSzMesa(this,'${nm}',${Number(pr||0)})">${nm} — ${fmt(Number(pr||0))}</button>`;
        }).join('')}
      </div>
    </div>`:'';

  const addsHtml=temAdds?`
    <div style="margin-bottom:12px">
      <label style="font-size:.75rem;font-weight:600;color:var(--muted);display:block;margin-bottom:6px">Adicionais</label>
      <div style="display:flex;flex-wrap:wrap;gap:6px" id="add-opts">
        ${item.adds.split(',').map(a=>{
          const[nm,pr]=a.trim().split('=');
          return `<button class="obs-chip" onclick="this.classList.toggle('sel')">${nm}${Number(pr||0)>0?' +'+fmt(Number(pr||0)):''}</button>`;
        }).join('')}
      </div>
    </div>`:'';

  // Obs rápidas padrão
  const obsRapidas=['Para viagem','Sem cebola','Sem molho','Sem tomate','Sem maionese','Bem passado','Ao ponto'];
  const obsHtml=`
    <div style="margin-bottom:12px">
      <label style="font-size:.75rem;font-weight:600;color:var(--muted);display:block;margin-bottom:6px">Observações rápidas</label>
      <div class="obs-chips" id="obs-chips">
        ${obsRapidas.map(o=>`<button class="obs-chip" onclick="this.classList.toggle('sel')">${o}</button>`).join('')}
      </div>
      <input id="obs-livre" placeholder="Outras observações..." style="width:100%;padding:8px 11px;border:1px solid #DDD;border-radius:7px;font-family:var(--fb);font-size:.83rem;outline:none;margin-top:6px"/>
    </div>`;

  // Qty
  const preco=temSizes?Number(item.sizes.split(',')[0].split('=')[1]||0):Number(item.preco||0);

  document.getElementById('ov-obs-mesa').classList.add('show');
  document.getElementById('obs-mesa-content').innerHTML=`
    <div style="display:flex;align-items:center;gap:12px;margin-bottom:16px">
      <div style="font-size:1.8rem">${item.em||'🍽️'}</div>
      <div>
        <div style="font-weight:700;font-size:.95rem">${item.nome}</div>
        <div style="font-size:.78rem;color:var(--muted)">${item.desc||''}</div>
      </div>
    </div>
    ${sizesHtml}
    ${addsHtml}
    ${obsHtml}
    <div style="display:flex;align-items:center;gap:12px;margin-bottom:12px">
      <label style="font-size:.75rem;font-weight:600;color:var(--muted)">Quantidade</label>
      <div style="display:flex;align-items:center;gap:0;background:#F5F5F5;border-radius:100px;overflow:hidden">
        <button onclick="ajustarQtyObs(-1)" style="width:36px;height:36px;border:none;background:transparent;font-size:1.2rem;font-weight:700;color:var(--red);cursor:pointer">−</button>
        <span id="obs-qty" style="width:32px;text-align:center;font-weight:700">1</span>
        <button onclick="ajustarQtyObs(1)" style="width:36px;height:36px;border:none;background:transparent;font-size:1.2rem;font-weight:700;color:var(--red);cursor:pointer">+</button>
      </div>
      <span id="obs-preco-total" style="font-weight:700;color:var(--red);font-size:.95rem">${fmt(preco)}</span>
    </div>`;

  // Guarda referência ao item
  window._itemObsMesa={item,preco,qty:1,szNm:'',szPr:temSizes?preco:0};
}

let _obsQty=1;
function ajustarQtyObs(d){
  _obsQty=Math.max(1,(_obsQty||1)+d);
  const el=document.getElementById('obs-qty');
  if(el)el.textContent=_obsQty;
  atualizarPrecoObs();
}
function selSzMesa(btn,nm,pr){
  document.querySelectorAll('#sz-opts .obs-chip').forEach(b=>b.classList.remove('sel'));
  btn.classList.add('sel');
  if(window._itemObsMesa){window._itemObsMesa.szNm=nm;window._itemObsMesa.szPr=pr;}
  atualizarPrecoObs();
}
function atualizarPrecoObs(){
  if(!window._itemObsMesa)return;
  const base=window._itemObsMesa.szPr||window._itemObsMesa.preco;
  const adds=Array.from(document.querySelectorAll('#add-opts .obs-chip.sel')||[]).reduce((s,b)=>{
    const m=b.textContent.match(/\+(R\$\s?([\d,]+))/);
    return s+(m?Number(m[2].replace(',','.')):0);
  },0);
  const total=(base+adds)*(_obsQty||1);
  const el=document.getElementById('obs-preco-total');
  if(el)el.textContent=fmt(total);
}

function confirmarItemMesa(){
  if(!window._itemObsMesa||!_mesaAtual)return;
  const m=DB.mesas.find(x=>x.id==_mesaAtual||x.id===_mesaAtual);
  if(!m)return;
  const {item}=window._itemObsMesa;
  const sz=window._itemObsMesa.szNm;
  const szPr=window._itemObsMesa.szPr;
  const base=szPr||window._itemObsMesa.preco;
  // Adicionais selecionados
  const addsSel=Array.from(document.querySelectorAll('#add-opts .obs-chip.sel')||[]);
  const addsTotal=addsSel.reduce((s,b)=>{
    const mt=b.textContent.match(/\+(R\$\s?([\d,]+))/);
    return s+(mt?Number(mt[2].replace(',','.')):0);
  },0);
  const prFinal=base+addsTotal;
  // Observações
  const obsChips=Array.from(document.querySelectorAll('#obs-chips .obs-chip.sel')).map(b=>b.textContent);
  const obsLivre=(document.getElementById('obs-livre')||{}).value||'';
  const obs=[...obsChips,...(obsLivre?[obsLivre]:[])].join(', ');
  const qty=_obsQty||1;
  m.itens.push({
    id:uid(),itemId:item.id,nome:item.nome+(sz?' ('+sz+')':''),
    preco:prFinal,qty,obs,em:item.em||'🍽️'
  });
  save('mesas');
  fecharOv('ov-obs-mesa');
  _obsQty=1;
  toast('✅ '+item.nome+' lançado!',true);
  updateBadgeMesas();
  abrirSeletorProduto(_mesaAtual);
}

// ══════════════════════════════════════════
// QR CODE DE MESA
// ══════════════════════════════════════════
function gerarQRMesa(id) {
  const m = DB.mesas.find(x => x.id == id || x.id === id);
  if (!m) return;
  const base = window.location.href.replace(/[^/]*$/, '');
  const url = base + 'cardapio.html?mesa=' + m.num;
  const qrUrl = 'https://api.qrserver.com/v1/create-qr-code/?size=220x220&data=' + encodeURIComponent(url);
  const ov = document.createElement('div');
  ov.className = 'ov show';
  ov.onclick = () => ov.remove();
  ov.innerHTML = '<div class="modal" onclick="event.stopPropagation()" style="max-width:360px;text-align:center">' +
    '<h3>📱 QR Code — Mesa ' + m.num + '</h3>' +
    '<p style="font-size:.8rem;color:var(--muted);margin-bottom:14px">Imprima e coloque na mesa. O cliente escaneia e o cardápio já abre pré-selecionado.</p>' +
    '<img src="' + qrUrl + '" style="width:220px;height:220px;border-radius:12px;border:1.5px solid var(--border2)" alt="QR Code"/>' +
    '<div style="margin-top:10px;background:#F5F5F5;border-radius:8px;padding:8px 12px;font-size:.68rem;word-break:break-all;color:var(--muted);text-align:left">' + url + '</div>' +
    '<div class="modal-btns" style="margin-top:14px">' +
    '<button class="btn-cancel" onclick="this.closest(\'.ov\').remove()">Fechar</button>' +
    '<button class="btn-ok" onclick="window.open(\'' + qrUrl + '\',\'_blank\')">⬇ Baixar PNG</button>' +
    '</div></div>';
  document.body.appendChild(ov);
}

// ══════════════════════════════════════════
// DASHBOARD
// ══════════════════════════════════════════
function renderDashboard(){
  const ped=DB.pedidos;
  const novos=ped.filter(p=>p.status==='novo').length;
  const prep=ped.filter(p=>p.status==='preparando').length;
  const entregues=ped.filter(p=>p.status==='entregue');
  const fat=entregues.reduce((s,p)=>s+Number(p.total||0),0);
  const hoje=new Date().toDateString();
  const hoje_ped=ped.filter(p=>new Date(p.criado_em).toDateString()===hoje);
  const estoquesBaixos=DB.estoque.filter(e=>e.qty<=e.min).length;

  document.getElementById('content').innerHTML=`
  <div class="mgrid">
    <div class="mc mc-accent"><div class="mc-l">Pedidos hoje</div><div class="mc-v" style="color:var(--red)">${hoje_ped.length}</div><div class="mc-d">Total do dia</div></div>
    <div class="mc"><div class="mc-l">Aguardando</div><div class="mc-v" style="color:#854D0E">${novos}</div><div class="mc-d" style="color:var(--muted)">Novos pedidos</div></div>
    <div class="mc"><div class="mc-l">Faturamento hoje</div><div class="mc-v" style="color:var(--green)">${fmt(fat)}</div><div class="mc-d up">${entregues.length} entregues</div></div>
    <div class="mc"><div class="mc-l">Estoque baixo</div><div class="mc-v" style="color:${estoquesBaixos>0?'var(--red)':'var(--green)'}">${estoquesBaixos}</div><div class="mc-d" style="color:var(--muted)">itens abaixo do mínimo</div></div>
  </div>

  ${estoquesBaixos>0?`<div style="background:var(--yellow-lt);border:1px solid #FDE68A;border-radius:9px;padding:11px 15px;margin-bottom:16px;font-size:.8rem;color:var(--yellow)">⚠️ <strong>${estoquesBaixos} insumo(s)</strong> com estoque abaixo do mínimo. <button onclick="go('estoque')" style="background:none;border:none;cursor:pointer;color:var(--yellow);font-weight:700;font-size:.8rem;font-family:var(--fb)">Ver estoque →</button></div>`:''}

  <div class="box">
    <div class="bx-hd"><h3>📦 Pedidos Recentes</h3><button class="btn btn-g" onclick="go('pedidos')">Ver todos →</button></div>
    <table>
      <thead><tr><th>#</th><th>Cliente</th><th>Tipo</th><th>Itens</th><th>Total</th><th>Status</th><th>Ação</th></tr></thead>
      <tbody>${ped.slice(-8).reverse().map(p=>`
        <tr>
          <td><strong>#${p.num}</strong></td>
          <td>${p.cliente||'—'}</td>
          <td><span class="tag ${p.tipo==='delivery'?'tg-rd':p.tipo==='mesa'?'tg-bl':'tg-yw'}">${p.tipo==='delivery'?'🛵 Delivery':p.tipo==='mesa'?'🪑 Mesa':'🏪 Balcão'}</span></td>
          <td style="color:var(--muted);font-size:.78rem">${p.itens_txt||'—'}</td>
          <td><strong>${fmt(p.total)}</strong></td>
          <td>${tagStatus(p.status)}</td>
          <td><button class="bsm bsm-g" onclick="go('pedidos')">Abrir</button></td>
        </tr>`).join('')||'<tr><td colspan="7" style="text-align:center;color:var(--muted);padding:22px">Nenhum pedido ainda</td></tr>'}
      </tbody>
    </table>
  </div>

  <div class="box">
    <div class="bx-hd"><h3>⭐ Itens Mais Pedidos</h3></div>
    <div style="padding:14px">${rankItens()}</div>
  </div>`;
}

function tagStatus(s){
  const m={novo:'tg-yw',preparando:'tg-bl',pronto:'tg-pu',em_rota:'tg-yw',entregue:'tg-gr',cancelado:'tg-rd'};
  const l={novo:'⏳ Novo',preparando:'👨‍🍳 Preparo',pronto:'✓ Pronto',em_rota:'🛵 Em Rota',entregue:'✅ Entregue',cancelado:'✕ Cancelado'};
  // tg-pu (purple) ainda não existe — usar tg-bl com cor diferente
  const extra=s==='pronto'?' style="background:#F3E8FF;color:#7C3AED"':s==='em_rota'?' style="background:#FEF3C7;color:#B45309"':'';
  return `<span class="tag ${m[s]||'tg-yw'}"${extra}>${l[s]||s}</span>`;
}

function rankItens(){
  const c={};
  DB.pedidos.forEach(p=>{(p.itens_txt||'').split(',').forEach(i=>{const n=i.replace(/^\d+x /,'').trim();if(n)c[n]=(c[n]||0)+1;});});
  const sorted=Object.entries(c).sort((a,b)=>b[1]-a[1]).slice(0,5);
  if(!sorted.length)return'<p style="color:var(--muted);font-size:.82rem">Nenhum pedido ainda.</p>';
  const max=sorted[0][1];
  return sorted.map(([n,v])=>`<div class="bar-row"><div class="bar-lbl">${n.slice(0,14)}</div><div class="bar-bg"><div class="bar-fill" style="width:${(v/max)*100}%"></div></div><div class="bar-val">${v}</div></div>`).join('');
}

// ══════════════════════════════════════════
// PEDIDOS — KANBAN 5 ETAPAS
// ══════════════════════════════════════════
const ETAPAS=[
  {id:'novo',     label:'Novos',       icon:'⏳', css:'kc-novo', bg:'#FEF08A'},
  {id:'preparando',label:'Preparo',    icon:'👨‍🍳', css:'kc-prep', bg:'#BFDBFE'},
  {id:'pronto',   label:'Pronto',      icon:'✓',  css:'kc-pronto',bg:'#E9D5FF'},
  {id:'em_rota',  label:'Em Rota',     icon:'🛵', css:'kc-rota', bg:'#FDE68A'},
  {id:'entregue', label:'Entregue',    icon:'✅', css:'kc-ok',   bg:'#BBF7D0'},
];

const STATUS_PROX={novo:'preparando',preparando:'pronto',pronto:'em_rota',em_rota:'entregue'};
const STATUS_BTN={
  novo:'👨‍🍳 Aceitar',
  preparando:'✓ Pronto para entrega',
  pronto:'🛵 Saiu para entrega',
  em_rota:'✅ Marcar entregue',
};
const STATUS_MSG={
  preparando:'👨‍🍳 Pedido confirmado! Estamos preparando o seu pedido.',
  pronto:'✓ Seu pedido está pronto! Logo estará a caminho.',
  em_rota:'🛵 Seu pedido saiu para entrega! Aguarde em breve.',
  entregue:'✅ Pedido entregue! Obrigado pela preferência. 😊',
};

function renderPedidos(){
  const ativos=DB.pedidos.filter(p=>!['entregue','cancelado'].includes(p.status));
  const concluidos=DB.pedidos.filter(p=>p.status==='entregue'||p.status==='cancelado').slice(-10).reverse();
  const totalAtivos=ativos.length;

  // Monta colunas para pedidos ativos
  const colsHtml=ETAPAS.slice(0,4).map(e=>{
    const grupo=ativos.filter(p=>p.status===e.id);
    return `<div>
      <div class="kc-hd ${e.css}">${e.icon} ${e.label} <span style="background:${e.bg};padding:1px 7px;border-radius:100px">${grupo.length}</span></div>
      ${grupo.map(p=>cartaoPedido(p)).join('')||semPed()}
    </div>`;
  }).join('');

  // Coluna concluídos
  const colConcluidos=`<div>
    <div class="kc-hd kc-ok">✅ Entregues <span style="background:#BBF7D0;padding:1px 7px;border-radius:100px">${concluidos.length}</span></div>
    ${concluidos.map(p=>`
    <div class="ocart" style="opacity:.55">
      <h4 style="font-size:.8rem">#${p.num} — ${p.cliente||'—'} ${tagStatus(p.status)}</h4>
      <div class="ocart-itens">${p.itens_txt||'—'}</div>
      <div class="ocart-footer"><span class="ocart-val">${fmt(p.total)}</span><span style="font-size:.68rem;color:var(--muted)">${timeAgo(p.criado_em)}</span></div>
    </div>`).join('')||semPed()}
  </div>`;

  document.getElementById('content').innerHTML=`
  <div class="box" style="margin-bottom:0">
    <div class="bx-hd">
      <h3>📦 Pedidos em Tempo Real</h3>
      <div style="font-size:.75rem;color:var(--muted)">${totalAtivos} pedido(s) em andamento · cliente notificado via WhatsApp a cada etapa</div>
      <div style="display:flex;gap:6px">
        <button class="btn btn-g" onclick="renderPedidos()">🔄 Atualizar</button>
        <button class="btn btn-r" onclick="abrirModalPedido()">+ Novo Pedido</button>
      </div>
    </div>
    <!-- Timeline visual -->
    <div class="status-timeline">
      ${ETAPAS.map((e,i)=>`
        <div class="stl-step">
          <div class="stl-flag">${e.icon}</div>
          <div class="stl-lbl">${e.label}</div>
        </div>`).join('')}
    </div>
    <div class="kanban-wrap-5">
      ${colsHtml}
      ${colConcluidos}
    </div>
  </div>`;
}

function cartaoPedido(p){
  const prox=STATUS_PROX[p.status];
  const btnLabel=STATUS_BTN[p.status]||'Avançar';
  const tipoCls=p.tipo==='delivery'?'del':p.tipo==='mesa'?'mes':'bal';
  return `<div class="ocart">
    <h4 style="font-size:.79rem">#${p.num} — ${p.cliente||'—'} <span class="ocart-tipo ${tipoCls}">${p.tipo}</span></h4>
    <div class="ocart-itens">${p.itens_txt||'—'}</div>
    ${p.endereco?`<div style="font-size:.71rem;color:var(--muted);margin-bottom:5px">📍 ${p.endereco}</div>`:''}
    <div class="ocart-footer">
      <span class="ocart-val">${fmt(p.total)}</span>
      <span class="ocart-tempo">${timeAgo(p.criado_em)}</span>
      <div class="ocart-btns">
        <button class="bsm bsm-r" onclick="cancelarPedido('${p.id}')">✕</button>
        ${prox?`<button class="bsm bsm-g" onclick="avancarPedido('${p.id}','${prox}')">${btnLabel}</button>`:''}
      </div>
    </div>
  </div>`;
}

function semPed(){return '<div style="text-align:center;color:var(--muted2);font-size:.75rem;padding:16px 6px">Nenhum pedido</div>';}

function abrirModalPedido(){document.getElementById('ov-pedido').classList.add('show');}

function confirmarPedido(){
  const tipo=document.getElementById('mp-tipo').value;
  const cli=document.getElementById('mp-cliente').value.trim();
  const itens=document.getElementById('mp-itens').value.trim();
  const total=document.getElementById('mp-total').value;
  const end=document.getElementById('mp-end').value.trim();
  if(!cli||!itens){toast('Preencha cliente/mesa e itens',false);return;}
  const num=DB.pedidos.length+1;
  DB.pedidos.push({id:uid(),num,cliente:cli,tipo,itens_txt:itens,total:Number(total||0),endereco:end,status:'novo',criado_em:nowISO()});
  save('pedidos');
  fecharOv('ov-pedido');
  toast('✅ Pedido #'+num+' criado!',true);
  updateBadge();
  renderPedidos();
  ['mp-cliente','mp-itens','mp-total','mp-end'].forEach(id=>document.getElementById(id).value='');
}

function avancarPedido(id,status){
  const p=DB.pedidos.find(x=>x.id===id);
  if(!p)return;
  p.status=status;
  // Registra timestamp da etapa
  if(!p.historico_status)p.historico_status={};
  p.historico_status[status]=nowISO();

  // Cashback automático ao marcar como entregue
  if(status==='entregue' && !p.cashback_gerado){
    const pctCashback = Number(DB.config.cashback_pct||5);
    const cashbackGerado = Math.round(Number(p.total||0)*(pctCashback/100)*100)/100;
    // Tenta vincular por telefone
    const cl = p.tel ? DB.clientes.find(c=>c.tel&&c.tel.replace(/\D/g,'')===p.tel.replace(/\D/g,'')) : null;
    if(cl && cashbackGerado>0){
      cl.cashback_saldo = Math.round(((cl.cashback_saldo||0)+cashbackGerado)*100)/100;
      cl.pedidos = (cl.pedidos||0)+1;
      cl.pontos = (cl.pontos||0)+Math.floor(Number(p.total||0));
      cl.ultimo_pedido = nowISO();
      p.cashback_gerado = cashbackGerado;
      save('clientes');
    }
  }

  save('pedidos');
  // Mensagem de notificação (quando tiver servidor, envia via WhatsApp)
  const msgWA=STATUS_MSG[status];
  if(msgWA&&p.tel){
    // Em produção: fetch(SERVER_URL+'/api/notificar', {method:'POST', body: JSON.stringify({tel:p.tel, msg:msgWA})})
    console.log('WA notification →',p.tel,':',msgWA);
  }
  const etapaLabel=ETAPAS.find(e=>e.id===status)?.label||status;
  toast('✅ '+etapaLabel+' — cliente notificado!',true);
  updateBadge();
  renderPedidos();
}

function cancelarPedido(id){
  if(!confirm('Cancelar este pedido?'))return;
  const p=DB.pedidos.find(x=>x.id===id);
  if(p){p.status='cancelado';save('pedidos');}
  toast('Pedido cancelado');
  updateBadge();
  renderPedidos();
}

// ══════════════════════════════════════════
// FILA DE ATENDIMENTO
// ══════════════════════════════════════════
let _filaTimer=null;
let _filaItemSel=null;
let _filaUltCheck=Date.now();
let _filaPedidosConhecidos=new Set(DB.pedidos.map(p=>p.id));

function updateBadgeFila(){
  const novos=DB.pedidos.filter(p=>p.status==='novo').length;
  const b=document.getElementById('badge-fila');
  if(b){b.textContent=novos;b.style.display=novos>0?'inline-block':'none';}
}

function iniciarPollingFila(){
  if(_filaTimer)clearInterval(_filaTimer);
  _filaTimer=setInterval(()=>{
    // Verifica se há pedidos novos desde a última checagem
    const novosIds=DB.pedidos
      .filter(p=>!_filaPedidosConhecidos.has(p.id))
      .map(p=>p.id);
    if(novosIds.length>0){
      novosIds.forEach(id=>_filaPedidosConhecidos.add(id));
      notificarNovoPedido();
      updateBadgeFila();
      // Se a fila estiver aberta, re-renderiza
      if(document.getElementById('nav-fila')?.classList.contains('active')){
        renderFila();
      }
    }
    // Em produção: faria fetch ao servidor para pegar pedidos novos
  },5000);
}

function pararPollingFila(){
  if(_filaTimer){clearInterval(_filaTimer);_filaTimer=null;}
}

function notificarNovoPedido(){
  // Barra visual pulsando no topo
  const bar=document.createElement('div');
  bar.className='fila-pulse';
  document.body.appendChild(bar);
  setTimeout(()=>bar.remove(),1000);
  // Toast
  toast('🔔 Novo pedido chegou!',true);
  // Som (beep via AudioContext se suportado)
  try{
    const ac=new(window.AudioContext||window.webkitAudioContext)();
    const osc=ac.createOscillator();
    const gain=ac.createGain();
    osc.connect(gain);gain.connect(ac.destination);
    osc.frequency.value=880;gain.gain.value=0.3;
    osc.start();gain.gain.exponentialRampToValueAtTime(0.001,ac.currentTime+0.4);
    osc.stop(ac.currentTime+0.4);
  }catch(e){}
}

function renderFila(){
  iniciarPollingFila();
  const pendentes=DB.pedidos.filter(p=>p.status==='novo').sort((a,b)=>new Date(a.criado_em)-new Date(b.criado_em));
  const emAndamento=DB.pedidos.filter(p=>['preparando','pronto','em_rota'].includes(p.status)).slice(0,10);
  const todos=[...pendentes,...emAndamento];

  // Seleciona primeiro por padrão
  if(!_filaItemSel&&pendentes.length>0)_filaItemSel=pendentes[0].id;

  const itemSelecionado=DB.pedidos.find(p=>p.id===_filaItemSel);

  const listaHtml=todos.length===0
    ?`<div style="padding:22px;text-align:center;color:var(--muted);font-size:.82rem">Nenhum pedido pendente</div>`
    :todos.map(p=>{
      const isNovo=p.status==='novo';
      const origemClass=p.origem==='whatsapp'?'fila-origem-wa':p.origem==='site'?'fila-origem-site':'fila-origem-manual';
      const origemIcon=p.origem==='whatsapp'?'📱':p.origem==='site'?'🌐':'🖥️';
      return `<div class="fila-item${p.id===_filaItemSel?' ativo':''}${isNovo?' novo-piscando':''}"
        onclick="selecionarFilaItem('${p.id}')">
        <div class="fila-origem ${origemClass}">${origemIcon}</div>
        <div class="fila-item-info">
          <div class="fila-item-nm">${p.cliente||'Cliente'}</div>
          <div class="fila-item-sub">${p.itens_txt?.slice(0,40)||'—'}${isNovo?'<span class="fila-badge-novo">NOVO</span>':''}</div>
        </div>
        <div class="fila-item-time">${timeAgo(p.criado_em)}</div>
      </div>`;
    }).join('');

  const detalheHtml=itemSelecionado
    ?renderFilaDetalhe(itemSelecionado)
    :`<div class="fila-empty">
        <div style="font-size:3rem">🔔</div>
        <div style="font-size:.9rem;font-weight:700">Aguardando pedidos</div>
        <div style="font-size:.78rem">Novos pedidos do WhatsApp e do site aparecem aqui em tempo real</div>
      </div>`;

  document.getElementById('content').innerHTML=`
  <div style="margin:-20px -22px">
    <div class="fila-wrap">
      <!-- Lista lateral -->
      <div class="fila-lista">
        <div class="fila-header">
          <h4>🔔 Fila <span style="font-size:.75rem;font-weight:400;color:var(--muted)">(${pendentes.length} novo${pendentes.length!==1?'s':''})</span></h4>
          <div style="display:flex;gap:6px;align-items:center">
            <div style="width:7px;height:7px;border-radius:50%;background:#4ADE80;animation:pulse 2s infinite" title="Monitorando"></div>
            <button class="btn btn-g" style="padding:4px 9px;font-size:.72rem" onclick="renderFila()">🔄</button>
          </div>
        </div>
        ${pendentes.length>0?`<div style="padding:8px 14px;background:var(--red-lt);font-size:.73rem;color:var(--red);font-weight:600;border-bottom:1px solid #FECACA">
          ⚠️ ${pendentes.length} pedido(s) aguardando atendimento
        </div>`:''}
        ${listaHtml}
      </div>
      <!-- Detalhe -->
      <div class="fila-detalhe">${detalheHtml}</div>
    </div>
  </div>`;
}

function renderFilaDetalhe(p){
  const isNovo=p.status==='novo';
  const prox=STATUS_PROX[p.status];
  const btnLabel=STATUS_BTN[p.status];
  const origemLabel=p.origem==='whatsapp'?'📱 WhatsApp':p.origem==='site'?'🌐 Site de Pedidos':'🖥️ Manual';
  const pagLabel=p.pagamento?p.pagamento.toUpperCase():'—';

  // Itens detalhados (se vieram do site/cardápio)
  const itensHtml=p.itens&&p.itens.length>0
    ?p.itens.map(it=>`<div style="display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid #F5F5F5;font-size:.82rem">
        <span>${it.qty}x ${it.nome}${it.desc?' <span style="color:var(--muted);font-size:.72rem">('+it.desc+')</span>':''}</span>
        <span style="font-weight:700">${fmt(it.prUnit*it.qty)}</span>
      </div>`).join('')
    :`<div style="font-size:.82rem;color:var(--muted);padding:8px 0">${p.itens_txt||'—'}</div>`;

  return `
  <div style="max-width:560px">
    <!-- Cabeçalho do pedido -->
    <div style="background:white;border:1px solid var(--border2);border-radius:12px;padding:16px 18px;margin-bottom:14px">
      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px">
        <div>
          <div style="font-family:var(--fd);font-size:1.1rem;font-weight:800">#${p.num} — ${p.cliente||'Cliente'}</div>
          <div style="font-size:.75rem;color:var(--muted);margin-top:2px">${origemLabel} · ${timeAgo(p.criado_em)} · ${p.tipo==='delivery'?'🛵 Delivery':p.tipo==='mesa'?'🪑 Mesa':'🏪 Balcão'}</div>
        </div>
        <div>${tagStatus(p.status)}</div>
      </div>
      ${p.tel?`<div style="font-size:.78rem;color:var(--muted);margin-bottom:6px">📱 ${p.tel}</div>`:''}
      ${p.endereco?`<div style="font-size:.78rem;color:var(--muted);margin-bottom:6px">📍 ${p.endereco}</div>`:''}
      ${pagLabel!=='—'?`<div style="font-size:.78rem;color:var(--muted)">💳 Pagamento: ${pagLabel}</div>`:''}
    </div>

    <!-- Itens -->
    <div style="background:white;border:1px solid var(--border2);border-radius:12px;padding:14px 18px;margin-bottom:14px">
      <div style="font-family:var(--fd);font-size:.82rem;font-weight:700;margin-bottom:10px">Itens do Pedido</div>
      ${itensHtml}
      <div style="display:flex;justify-content:space-between;font-weight:700;font-size:.92rem;padding-top:10px;border-top:2px solid var(--border2);margin-top:8px">
        <span>Total</span><span style="color:var(--red)">${fmt(p.total)}</span>
      </div>
    </div>

    <!-- Ações -->
    <div style="display:flex;flex-direction:column;gap:8px">
      ${isNovo?`
      <button onclick="atenderPedido('${p.id}')"
        style="background:#1a7a3d;color:white;border:none;border-radius:10px;padding:13px;font-weight:700;font-size:.9rem;cursor:pointer;font-family:var(--fb);display:flex;align-items:center;justify-content:center;gap:8px">
        ✓ Atender (aceitar e iniciar preparo)
      </button>
      <button onclick="recusarPedido('${p.id}')"
        style="background:var(--red-lt);color:var(--red);border:1px solid rgba(204,0,0,.2);border-radius:10px;padding:11px;font-weight:700;font-size:.88rem;cursor:pointer;font-family:var(--fb)">
        ✕ Recusar Pedido
      </button>`
      :prox?`
      <button onclick="avancarPedido('${p.id}','${prox}');selecionarFilaItem('${p.id}')"
        style="background:var(--red);color:white;border:none;border-radius:10px;padding:13px;font-weight:700;font-size:.9rem;cursor:pointer;font-family:var(--fb)">
        → ${btnLabel||'Avançar'}
      </button>`:''}
      <button onclick="go('pedidos')"
        style="background:#F5F5F5;color:var(--muted);border:none;border-radius:10px;padding:10px;font-size:.82rem;cursor:pointer;font-family:var(--fb)">
        Ver todos os pedidos →
      </button>
    </div>
  </div>`;
}

function selecionarFilaItem(id){
  _filaItemSel=id;
  renderFila();
}

function atenderPedido(id){
  const p=DB.pedidos.find(x=>x.id===id);
  if(!p)return;
  p.status='preparando';
  if(!p.historico_status)p.historico_status={};
  p.historico_status.preparando=nowISO();
  save('pedidos');
  // Notificação WA
  const msg=STATUS_MSG['preparando'];
  if(msg&&p.tel)console.log('WA →',p.tel,':',msg);
  toast('✅ Pedido #'+p.num+' aceito — em preparo!',true);
  updateBadge();updateBadgeFila();
  _filaItemSel=null;
  renderFila();
}

function recusarPedido(id){
  if(!confirm('Recusar este pedido? O cliente será notificado.'))return;
  const p=DB.pedidos.find(x=>x.id===id);
  if(!p)return;
  p.status='cancelado';
  save('pedidos');
  if(p.tel)console.log('WA →',p.tel,': ❌ Pedido cancelado. Desculpe o inconveniente.');
  toast('Pedido #'+p.num+' recusado.');
  updateBadge();updateBadgeFila();
  _filaItemSel=null;
  renderFila();
}

// ══════════════════════════════════════════
// CONVERSAS
// ══════════════════════════════════════════
function renderConversas(){
  document.getElementById('content').innerHTML=`
  <div class="box">
    <div class="bx-hd"><h3>💬 Clientes e Conversas</h3><div style="font-size:.76rem;color:var(--muted)">Histórico de clientes atendidos pela IA</div></div>
    <table>
      <thead><tr><th>Cliente</th><th>WhatsApp</th><th>Pedidos</th><th>Pontos</th><th>Última conversa</th></tr></thead>
      <tbody>${DB.clientes.length>0?DB.clientes.map(c=>`
        <tr>
          <td><strong>${c.nome||'—'}</strong></td>
          <td>${c.tel||'—'}</td>
          <td>${c.pedidos||0}</td>
          <td><span class="tag tg-rd">${c.pontos||0} pts</span></td>
          <td>${timeAgo(c.ultima||null)}</td>
        </tr>`).join(''):'<tr><td colspan="5" style="text-align:center;color:var(--muted);padding:22px">Nenhum cliente ainda. Conecte a IA ao WhatsApp para começar a receber clientes.</td></tr>'}
      </tbody>
    </table>
  </div>`;
}

// ══════════════════════════════════════════
// CARDÁPIO
// ══════════════════════════════════════════
let _catAtual='Todas';
function renderCardapio(){
  const cats=['Todas',...new Set(DB.cardapio.map(i=>i.cat))];
  const filtrado=_catAtual==='Todas'?DB.cardapio:DB.cardapio.filter(i=>i.cat===_catAtual);
  document.getElementById('content').innerHTML=`
  <div class="fs">
    <div class="fs-ti">🍕 Cardápio</div>
    <div class="fs-su">Gerencie seus itens. A IA apresenta esses itens automaticamente para os clientes no WhatsApp e no site de pedidos.</div>
  </div>
  <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap;gap:8px">
    <div class="cat-tabs">${cats.map(c=>`<button class="cat-tab${c===_catAtual?' active':''}" onclick="_catAtual='${c}';renderCardapio()">${c} (${c==='Todas'?DB.cardapio.length:DB.cardapio.filter(i=>i.cat===c).length})</button>`).join('')}</div>
    <button class="btn btn-r" onclick="abrirModalItem()">+ Adicionar item</button>
  </div>
  <div class="menu-list">${filtrado.map(item=>`
    <div class="mi">
      <div class="mi-em">${item.foto&&item.foto.length>10?`<img src="${item.foto}" style="width:42px;height:42px;border-radius:8px;object-fit:cover">`:item.em||'🍽️'}</div>
      <div class="mi-body">
        <div class="mi-nm">
          <div class="mi-dot ${item.disp?'on':'off'}"></div>
          ${item.nome}
          <span class="mi-cat-tag">${item.cat}</span>
        </div>
        <div class="mi-desc">${item.desc||''}</div>
        ${item.sizes?`<div class="mi-sizes">${item.sizes.split(',').map(s=>`<span class="mi-size">${s.trim()}</span>`).join('')}</div>`:''}
        ${item.adds?`<div style="font-size:.7rem;color:var(--muted);margin-top:4px">Adicionais: ${item.adds}</div>`:''}
      </div>
      <div class="mi-avail">
        <div class="mi-actions">
          <span class="mi-pr">${fmt(item.preco)}</span>
          <button class="bsm bsm-g" onclick="editarItem(${item.id})">✏️</button>
          <button class="bsm bsm-r" onclick="removerItem(${item.id})">✕</button>
        </div>
      </div>
    </div>`).join('')}
  </div>
  <button class="badd" onclick="abrirModalItem()">+ Adicionar item ao cardápio</button>
  <div style="margin-top:14px;display:flex;align-items:center;gap:10px">
    <button class="btn btn-r" onclick="salvarCardapio()">💾 Salvar Cardápio</button>
    <span id="card-status" style="font-size:.74rem;color:var(--green)">✓ Tudo salvo</span>
  </div>`;
}

let _editItemId=null;
function abrirModalItem(id=null){
  _editItemId=id;
  const it=id?DB.cardapio.find(x=>x.id===id):null;
  document.getElementById('modal-item-ti').textContent=it?'Editar Item':'Novo Item';
  document.getElementById('it-em').value=it?.em||'🍽️';
  document.getElementById('it-cat').value=it?.cat||'';
  document.getElementById('it-nome').value=it?.nome||'';
  document.getElementById('it-desc').value=it?.desc||'';
  document.getElementById('it-preco').value=it?.preco||'';
  document.getElementById('it-disp').value=it?.disp===false?'0':'1';
  document.getElementById('it-sizes').value=it?.sizes||'';
  document.getElementById('it-adds').value=it?.adds||'';
  document.getElementById('it-promo').value=it?.preco_promo||'';
  document.getElementById('it-cashback-pct').value=it?.cashback_pct||'';
  document.getElementById('it-destaque').checked=!!(it?.destaque);
  // Foto
  document.getElementById('it-foto').value=it?.foto||'';
  const prev=document.getElementById('it-foto-preview');
  if(it?.foto&&it.foto.length>10){prev.innerHTML=`<img src="${it.foto}" style="width:100%;height:100%;object-fit:cover">`;}
  else{prev.innerHTML='📷';}
  document.getElementById('ov-item').classList.add('show');
}

function editarItem(id){abrirModalItem(id);}

function confirmarItem(){
  const nome=document.getElementById('it-nome').value.trim();
  if(!nome){toast('Nome obrigatório');return;}
  const item={
    id:_editItemId||Date.now(),
    em:document.getElementById('it-em').value||'🍽️',
    cat:document.getElementById('it-cat').value.trim()||'Geral',
    nome,
    desc:document.getElementById('it-desc').value.trim(),
    preco:Number(document.getElementById('it-preco').value||0),
    disp:document.getElementById('it-disp').value==='1',
    sizes:document.getElementById('it-sizes').value.trim(),
    adds:document.getElementById('it-adds').value.trim(),
    preco_promo:Number(document.getElementById('it-promo').value||0)||null,
    cashback_pct:Number(document.getElementById('it-cashback-pct').value||0)||null,
    destaque:document.getElementById('it-destaque').checked,
    foto:document.getElementById('it-foto').value||'',
  };
  if(_editItemId){const i=DB.cardapio.findIndex(x=>x.id===_editItemId);if(i>=0)DB.cardapio[i]=item;}
  else DB.cardapio.push(item);
  save('cardapio');
  fecharOv('ov-item');
  toast('✅ Item salvo!',true);
  renderCardapio();
}

function removerItem(id){
  if(!confirm('Remover este item do cardápio?'))return;
  const i=DB.cardapio.findIndex(x=>x.id===id);
  if(i>=0)DB.cardapio.splice(i,1);
  save('cardapio');
  toast('Item removido');
  renderCardapio();
}

function salvarCardapio(){
  save('cardapio');
  toast('✅ Cardápio salvo!',true);
  const s=document.getElementById('card-status');
  if(s)s.textContent='✓ Tudo salvo';
}

// ══════════════════════════════════════════
// CAIXA
// ══════════════════════════════════════════
function renderCaixa(){
  const cx=DB.caixa;
  const movs=DB.movimentos.filter(m=>m.turno===cx.turnoAtual);
  const entradas=movs.filter(m=>m.tipo==='in').reduce((s,m)=>s+m.val,0);
  const saidas=movs.filter(m=>m.tipo==='out').reduce((s,m)=>s+m.val,0);
  const saldo=Number(cx.fundo||0)+entradas-saidas;

  document.getElementById('content').innerHTML=`
  <div class="caixa-status ${cx.aberta?'caixa-aberta':'caixa-fechada'}">
    <div class="cx-info">
      <h3>${cx.aberta?'🟢 Caixa Aberta':'🔴 Caixa Fechada'}</h3>
      <p>${cx.aberta?'Aberta em '+fmtData(cx.abertura)+' · Fundo: '+fmt(cx.fundo):'Abra o caixa para registrar movimentações'}</p>
    </div>
    <div style="display:flex;gap:8px">
      ${cx.aberta?`<button class="btn btn-g" onclick="abrirModalMov()">+ Movimentação</button><button class="btn btn-r" onclick="fecharCaixa()">Fechar Caixa</button>`:`<button class="btn btn-r" onclick="abrirCaixa()">Abrir Caixa</button>`}
    </div>
  </div>

  ${cx.aberta?`
  <div class="mgrid" style="margin-bottom:16px">
    <div class="mc"><div class="mc-l">Fundo inicial</div><div class="mc-v">${fmt(cx.fundo)}</div></div>
    <div class="mc"><div class="mc-l">Entradas</div><div class="mc-v up">${fmt(entradas)}</div></div>
    <div class="mc"><div class="mc-l">Saídas</div><div class="mc-v dn">${fmt(saidas)}</div></div>
    <div class="mc mc-accent"><div class="mc-l">Saldo atual</div><div class="mc-v" style="color:var(--red)">${fmt(saldo)}</div></div>
  </div>

  <div class="box">
    <div class="bx-hd"><h3>💰 Movimentações do Turno</h3><button class="btn btn-g" onclick="abrirModalMov()">+ Registrar</button></div>
    <div style="padding:12px">
      ${movs.length===0?'<p style="text-align:center;color:var(--muted);font-size:.83rem;padding:18px">Nenhuma movimentação ainda neste turno.</p>':
      `<div class="mov-list">${movs.slice().reverse().map(m=>`
        <div class="mov">
          <div class="mov-ic ${m.tipo==='in'?'mov-ic-in':'mov-ic-out'}">${m.tipo==='in'?'↑':'↓'}</div>
          <div class="mov-info"><div class="mov-nm">${m.desc}</div><div class="mov-dt">${timeAgo(m.ts)} · ${m.pg}</div></div>
          <div class="mov-val ${m.tipo==='in'?'mov-in':'mov-out'}">${m.tipo==='in'?'+':'-'}${fmt(m.val)}</div>
        </div>`).join('')}
      </div>`}
    </div>
  </div>`:
  '<div style="text-align:center;color:var(--muted);padding:40px;font-size:.87rem">Abra o caixa para ver movimentações e registrar entradas/saídas.</div>'}`;
}

function abrirCaixa(){
  const fundo=prompt('Informe o fundo inicial do caixa (R$):','0');
  if(fundo===null)return;
  DB.caixa={aberta:true,abertura:nowISO(),fundo:Number(fundo||0),turnoAtual:uid()};
  save('caixa');
  toast('✅ Caixa aberta!',true);
  renderCaixa();
}

function fecharCaixa(){
  if(!confirm('Fechar o caixa do turno atual?'))return;
  DB.caixa.aberta=false;
  save('caixa');
  toast('Caixa fechada. Bom descanso!',true);
  renderCaixa();
}

function abrirModalMov(){
  if(!DB.caixa.aberta){toast('Abra o caixa primeiro');return;}
  document.getElementById('ov-mov').classList.add('show');
}

function confirmarMov(){
  const tipo=document.getElementById('mv-tipo').value;
  const desc=document.getElementById('mv-desc').value.trim();
  const val=Number(document.getElementById('mv-val').value||0);
  const pg=document.getElementById('mv-pg').value;
  if(!desc||!val){toast('Preencha descrição e valor');return;}
  DB.movimentos.push({id:uid(),tipo,desc,val,pg,ts:nowISO(),turno:DB.caixa.turnoAtual});
  save('movimentos');
  fecharOv('ov-mov');
  toast((tipo==='in'?'↑ Entrada':'↓ Saída')+' registrada!',true);
  document.getElementById('mv-desc').value='';
  document.getElementById('mv-val').value='';
  renderCaixa();
}

// ══════════════════════════════════════════
// ESTOQUE
// ══════════════════════════════════════════
function renderEstoque(){
  const baixos=DB.estoque.filter(e=>e.qty<=e.min);
  document.getElementById('content').innerHTML=`
  <div class="fs">
    <div class="fs-ti">📦 Controle de Estoque</div>
    <div class="fs-su">Monitore seus insumos. Receba alertas quando o estoque estiver baixo.</div>
  </div>
  ${baixos.length>0?`<div style="background:var(--yellow-lt);border:1px solid #FDE68A;border-radius:9px;padding:10px 14px;margin-bottom:14px;font-size:.79rem;color:var(--yellow)">⚠️ <strong>${baixos.length} insumo(s) com estoque baixo:</strong> ${baixos.map(e=>e.nome).join(', ')}</div>`:''}
  <div style="display:flex;justify-content:flex-end;margin-bottom:11px">
    <button class="btn btn-r" onclick="abrirModalEst()">+ Adicionar insumo</button>
  </div>
  <div class="est-list">${DB.estoque.map(e=>{
    const pct=e.min>0?Math.min(100,(e.qty/e.min)*50):100;
    const cls=e.qty===0?'est-zero':e.qty<=e.min?'est-low':'est-ok';
    return `<div class="est ${e.qty<=e.min?'est-alert':''}">
      <div class="est-ic">${e.em||'📦'}</div>
      <div class="est-body">
        <div class="est-nm">${e.nome}</div>
        <div class="est-un">${e.un} · mínimo: ${e.min} ${e.un}</div>
        <div class="est-bar"><div class="est-fill ${cls}" style="width:${Math.min(100,e.qty/Math.max(e.min*2,1)*100)}%"></div></div>
      </div>
      <div style="display:flex;flex-direction:column;align-items:flex-end;gap:5px">
        <div class="est-qty" style="color:${e.qty===0?'var(--red)':e.qty<=e.min?'var(--yellow)':'var(--green)'}">${e.qty} ${e.un}</div>
        <div style="display:flex;gap:4px">
          <button class="bsm bsm-g" onclick="ajustarEst(${e.id},1)" title="Entrada">↑</button>
          <button class="bsm bsm-r" onclick="ajustarEst(${e.id},-1)" title="Saída">↓</button>
          <button class="bsm" style="background:#F5F5F5;color:var(--muted)" onclick="removerEst(${e.id})">✕</button>
        </div>
      </div>
    </div>`}).join('')||'<p style="text-align:center;color:var(--muted);padding:22px">Nenhum insumo cadastrado.</p>'}
  </div>
  <button class="badd" onclick="abrirModalEst()">+ Adicionar insumo</button>`;
}

function abrirModalEst(){document.getElementById('ov-est').classList.add('show');}

function confirmarEstoque(){
  const nome=document.getElementById('es-nome').value.trim();
  if(!nome){toast('Nome obrigatório');return;}
  DB.estoque.push({id:Date.now(),em:document.getElementById('es-em').value||'📦',nome,un:document.getElementById('es-un').value,qty:Number(document.getElementById('es-qty').value||0),min:Number(document.getElementById('es-min').value||0)});
  save('estoque');
  fecharOv('ov-est');
  toast('✅ Insumo cadastrado!',true);
  renderEstoque();
}

function ajustarEst(id,dir){
  const e=DB.estoque.find(x=>x.id===id);
  if(!e)return;
  const qtd=Number(prompt(`${dir>0?'Quantidade de entrada':'Quantidade de saída'} (em ${e.un}):`,'1'));
  if(isNaN(qtd)||qtd<=0)return;
  e.qty=Math.max(0,e.qty+(dir*qtd));
  save('estoque');
  toast(`${dir>0?'↑ Entrada':'↓ Saída'} de ${qtd} ${e.un} registrada!`,true);
  renderEstoque();
}

function removerEst(id){
  if(!confirm('Remover este insumo?'))return;
  DB.estoque=DB.estoque.filter(x=>x.id!==id);
  save('estoque');
  renderEstoque();
}

// ══════════════════════════════════════════
// FIADO
// ══════════════════════════════════════════
function renderFiado(){
  const clientes=[...new Set(DB.fiado.map(f=>f.cliente))];
  const resumo=clientes.map(c=>{
    const mov=DB.fiado.filter(f=>f.cliente===c);
    const saldo=mov.reduce((s,m)=>s+(m.tipo==='deb'?m.val:-m.val),0);
    return {cliente:c,saldo,ultima:mov[mov.length-1]?.ts};
  });

  document.getElementById('content').innerHTML=`
  <div class="fs">
    <div class="fs-ti">📋 Controle de Fiado</div>
    <div class="fs-su">Acompanhe o fiado de clientes. Registre dívidas e pagamentos.</div>
  </div>
  <div style="display:flex;justify-content:flex-end;margin-bottom:14px">
    <button class="btn btn-r" onclick="document.getElementById('ov-fiado').classList.add('show')">+ Lançar no Fiado</button>
  </div>
  <div class="box">
    <div class="bx-hd"><h3>👥 Extrato por Cliente</h3><span style="font-size:.75rem;color:var(--muted)">Total de ${clientes.length} clientes</span></div>
    <table>
      <thead><tr><th>Cliente</th><th>Saldo em aberto</th><th>Última movimentação</th><th>Ação</th></tr></thead>
      <tbody>${resumo.length>0?resumo.sort((a,b)=>b.saldo-a.saldo).map(r=>`
        <tr>
          <td><strong>${r.cliente}</strong></td>
          <td><span style="font-weight:700;color:${r.saldo>0?'var(--red)':'var(--green)'}">${r.saldo>0?fmt(r.saldo)+' a receber':'✓ Quitado'}</span></td>
          <td>${timeAgo(r.ultima)}</td>
          <td><button class="bsm bsm-g" onclick="verExtrato('${r.cliente}')">Extrato</button></td>
        </tr>`).join(''):'<tr><td colspan="4" style="text-align:center;color:var(--muted);padding:22px">Nenhum registro de fiado ainda.</td></tr>'}
      </tbody>
    </table>
  </div>`;
}

function confirmarFiado(){
  const cli=document.getElementById('fi-cli').value.trim();
  const tipo=document.getElementById('fi-tipo').value;
  const val=Number(document.getElementById('fi-val').value||0);
  const desc=document.getElementById('fi-desc').value.trim();
  if(!cli||!val){toast('Preencha cliente e valor');return;}
  DB.fiado.push({id:uid(),cliente:cli,tipo,val,desc,ts:nowISO()});
  save('fiado');
  fecharOv('ov-fiado');
  toast((tipo==='deb'?'📋 Fiado lançado':'✅ Pagamento registrado')+': '+fmt(val),true);
  ['fi-cli','fi-val','fi-desc'].forEach(id=>document.getElementById(id).value='');
  renderFiado();
}

function verExtrato(cliente){
  const movs=DB.fiado.filter(f=>f.cliente===cliente);
  const saldo=movs.reduce((s,m)=>s+(m.tipo==='deb'?m.val:-m.val),0);
  let txt=`Extrato de ${cliente}\n\n`;
  movs.forEach(m=>txt+=`${m.tipo==='deb'?'+':'-'} R$${m.val.toFixed(2)} — ${m.desc} (${fmtData(m.ts)})\n`);
  txt+=`\nSaldo: R$${saldo.toFixed(2)}`;
  alert(txt);
}

// ══════════════════════════════════════════
// FIDELIDADE
// ══════════════════════════════════════════
function renderFidelidade(){
  const cfg = DB.config;
  const pctCashback = Number(cfg.cashback_pct||5);
  const metaResgate = Number(cfg.cashback_meta||10);
  const totalClientes = DB.clientes.length;
  const totalCashback = DB.clientes.reduce((s,c)=>s+(c.cashback_saldo||0),0);
  const totalPontos = DB.clientes.reduce((s,c)=>s+(c.pontos||0),0);

  // Clientes inativos (sem pedido há mais de X dias)
  const diasInativo = Number(cfg.disparador_dias||7);
  const agora = new Date();
  const inativos = DB.clientes.filter(c => {
    if(!c.ultimo_pedido) return false;
    const diff = (agora - new Date(c.ultimo_pedido)) / (1000*60*60*24);
    return diff >= diasInativo;
  });

  // Clientes prontos para resgatar
  const prontoResgate = DB.clientes.filter(c => (c.cashback_saldo||0) >= metaResgate);

  // Tabela de clientes
  const clientesHtml = DB.clientes.length > 0
    ? DB.clientes.sort((a,b)=>(b.cashback_saldo||0)-(a.cashback_saldo||0)).slice(0,15).map(c => {
        const diasSemPedido = c.ultimo_pedido ? Math.floor((agora - new Date(c.ultimo_pedido))/(1000*60*60*24)) : null;
        const inativo = diasSemPedido !== null && diasSemPedido >= diasInativo;
        return '<tr>' +
          '<td><div style="display:flex;align-items:center;gap:8px">' +
            '<div style="width:30px;height:30px;border-radius:50%;background:var(--red);color:white;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;flex-shrink:0">' + (c.nome||'?')[0].toUpperCase() + '</div>' +
            '<div><div style="font-size:.82rem;font-weight:600">' + (c.nome||'—') + '</div>' +
            '<div style="font-size:.7rem;color:var(--muted)">' + (c.tel||'') + '</div></div>' +
          '</div></td>' +
          '<td><strong style="color:#0EA5E9">' + fmt(c.cashback_saldo||0) + '</strong>' +
            ((c.cashback_saldo||0) >= metaResgate ? '<span style="background:#0EA5E9;color:white;font-size:.6rem;font-weight:700;padding:2px 6px;border-radius:100px;margin-left:4px">RESGATAR</span>' : '') +
          '</td>' +
          '<td>' + (c.pedidos||0) + '</td>' +
          '<td style="color:var(--muted);font-size:.78rem">' + (diasSemPedido!==null ? diasSemPedido+'d atrás' : '—') + '</td>' +
          '<td>' + (inativo ? '<span style="background:#FEF3C7;color:#B45309;font-size:.68rem;font-weight:700;padding:2px 7px;border-radius:100px">Inativo</span>' : '<span style="background:#DCFCE7;color:#15803D;font-size:.68rem;font-weight:700;padding:2px 7px;border-radius:100px">Ativo</span>') + '</td>' +
          '<td><button onclick="usarCashback(\'' + c.id + '\')" style="background:var(--red-lt);color:var(--red);border:none;border-radius:6px;padding:4px 10px;font-size:.73rem;font-weight:700;cursor:pointer;font-family:var(--fb)">Usar saldo</button></td>' +
        '</tr>';
      }).join('')
    : '<tr><td colspan="6" style="text-align:center;color:var(--muted);padding:22px">Nenhum cliente ainda. Os clientes são cadastrados automaticamente ao fazer pedidos pelo WhatsApp.</td></tr>';

  // Disparos agendados
  const disparosHtml = inativos.length > 0
    ? inativos.slice(0,5).map(c =>
        '<div style="display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #F5F5F5">' +
          '<div style="width:32px;height:32px;border-radius:50%;background:#FEF3C7;color:#B45309;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0">' + (c.nome||'?')[0].toUpperCase() + '</div>' +
          '<div style="flex:1"><div style="font-size:.82rem;font-weight:600">' + (c.nome||c.tel||'—') + '</div>' +
          '<div style="font-size:.71rem;color:var(--muted)">Sem pedido há ' + Math.floor((agora-new Date(c.ultimo_pedido||agora))/(1000*60*60*24)) + ' dias · ' + (c.tel||'sem tel') + '</div></div>' +
          '<button onclick="dispararMensagem(\'' + c.id + '\')" style="background:var(--red);color:white;border:none;border-radius:7px;padding:6px 12px;font-size:.73rem;font-weight:700;cursor:pointer;font-family:var(--fb)">📲 Enviar</button>' +
        '</div>'
      ).join('')
    : '<div style="padding:16px;text-align:center;color:var(--muted);font-size:.82rem">Nenhum cliente inativo no período configurado. 🎉</div>';

  document.getElementById('content').innerHTML =
    // KPIs
    '<div class="mgrid" style="margin-bottom:14px">' +
      '<div class="mc mc-accent"><div class="mc-l">Clientes cadastrados</div><div class="mc-v">' + totalClientes + '</div></div>' +
      '<div class="mc"><div class="mc-l">Cashback em circulação</div><div class="mc-v" style="color:#0EA5E9">' + fmt(totalCashback) + '</div><div class="mc-d">' + prontoResgate.length + ' prontos para resgatar</div></div>' +
      '<div class="mc"><div class="mc-l">Inativos para reativar</div><div class="mc-v" style="color:#B45309">' + inativos.length + '</div><div class="mc-d">Sem pedido há ' + diasInativo + '+ dias</div></div>' +
      '<div class="mc"><div class="mc-l">Pontos distribuídos</div><div class="mc-v">' + totalPontos + '</div></div>' +
    '</div>' +

    // Configuração
    '<div class="box" style="margin-bottom:14px">' +
      '<div class="bx-hd"><h3>⚙️ Configuração do Cashback</h3></div>' +
      '<div style="padding:14px 16px">' +
        '<div class="trow"><div class="ti"><strong>% de cashback por pedido</strong><span>Percentual do valor do pedido que vira saldo</span></div>' +
          '<div style="display:flex;align-items:center;gap:6px"><input type="number" id="fid-pct" value="' + pctCashback + '" min="0" max="20" style="width:60px;padding:6px;border:1px solid var(--border2);border-radius:7px;text-align:center;font-weight:700"/>%</div></div>' +
        '<div class="trow"><div class="ti"><strong>Saldo mínimo para resgatar (R$)</strong><span>Valor mínimo para usar o cashback como desconto</span></div>' +
          '<input type="number" id="fid-meta" value="' + metaResgate + '" min="1" style="width:70px;padding:6px;border:1px solid var(--border2);border-radius:7px;text-align:center;font-weight:700"/></div>' +
        '<div class="trow"><div class="ti"><strong>Dias sem pedido = inativo (Disparador)</strong><span>Após quantos dias sem pedido o cliente entra no disparador</span></div>' +
          '<input type="number" id="fid-dias" value="' + diasInativo + '" min="1" style="width:70px;padding:6px;border:1px solid var(--border2);border-radius:7px;text-align:center;font-weight:700"/></div>' +
        '<div style="margin-top:14px">' +
          '<button class="btn btn-r" onclick="salvarConfigFidelidade()">💾 Salvar configuração</button>' +
        '</div>' +
      '</div>' +
    '</div>' +

    // Disparador inteligente
    '<div class="box" style="margin-bottom:14px">' +
      '<div class="bx-hd">' +
        '<h3>🚀 Disparador Inteligente</h3>' +
        '<div style="font-size:.75rem;color:var(--muted)">' + inativos.length + ' cliente(s) para reativar</div>' +
        (inativos.length>0?'<button class="btn btn-r" onclick="dispararTodos()">📲 Disparar para todos</button>':'') +
      '</div>' +
      '<div style="padding:8px 16px">' + disparosHtml + '</div>' +
    '</div>' +

    // Tabela de clientes
    '<div class="box">' +
      '<div class="bx-hd"><h3>👑 Clientes e Saldos</h3>' +
        '<button class="btn btn-g" onclick="adicionarClienteManual()">+ Novo Cliente</button>' +
      '</div>' +
      '<table><thead><tr><th>Cliente</th><th>💎 Cashback</th><th>Pedidos</th><th>Último pedido</th><th>Status</th><th>Ação</th></tr></thead>' +
      '<tbody>' + clientesHtml + '</tbody></table>' +
    '</div>';
}

function salvarConfigFidelidade(){
  DB.config.cashback_pct = Number(document.getElementById('fid-pct')?.value||5);
  DB.config.cashback_meta = Number(document.getElementById('fid-meta')?.value||10);
  DB.config.disparador_dias = Number(document.getElementById('fid-dias')?.value||7);
  save('config');
  toast('✅ Configuração salva!', true);
  renderFidelidade();
}

function usarCashback(clienteId){
  const cl = DB.clientes.find(c=>c.id===clienteId);
  if(!cl) return;
  const saldo = cl.cashback_saldo||0;
  if(saldo < 0.01){ toast('Sem saldo de cashback'); return; }
  const usar = prompt('Quanto deseja usar do saldo de ' + fmt(saldo) + '?', saldo.toFixed(2));
  if(!usar) return;
  const val = Math.min(Number(usar)||0, saldo);
  if(!val){ toast('Valor inválido'); return; }
  cl.cashback_saldo = Math.round((saldo - val)*100)/100;
  save('clientes');
  toast('✅ ' + fmt(val) + ' de cashback utilizado!', true);
  renderFidelidade();
}

function adicionarClienteManual(){
  const nome = prompt('Nome do cliente:');
  if(!nome) return;
  const tel = prompt('WhatsApp (com DDD, só números):','');
  DB.clientes.push({id:uid(), nome, tel:tel||'', pedidos:0, pontos:0, cashback_saldo:0, criado:nowISO()});
  save('clientes');
  toast('✅ Cliente adicionado!', true);
  renderFidelidade();
}

function dispararMensagem(clienteId){
  const cl = DB.clientes.find(c=>c.id===clienteId);
  if(!cl||!cl.tel){ toast('Cliente sem WhatsApp cadastrado'); return; }
  const pctCashback = Number(DB.config.cashback_pct||5);
  const saldo = cl.cashback_saldo||0;
  const msg = saldo > 0
    ? 'Olá, ' + (cl.nome||'cliente') + '! 😊 Sentimos sua falta. Você tem ' + fmt(saldo) + ' de cashback esperando por você. Que tal fazer um pedido hoje? 🍕'
    : 'Olá, ' + (cl.nome||'cliente') + '! 😊 Sentimos sua falta. Volte hoje e ganhe ' + pctCashback + '% de cashback no seu pedido!';
  const url = 'https://wa.me/55' + cl.tel.replace(/\D/g,'') + '?text=' + encodeURIComponent(msg);
  window.open(url, '_blank');
  // Registra envio
  cl.ultimo_disparo = nowISO();
  save('clientes');
  toast('✅ Mensagem aberta no WhatsApp!', true);
}

function dispararTodos(){
  const diasInativo = Number(DB.config.disparador_dias||7);
  const agora = new Date();
  const inativos = DB.clientes.filter(c => {
    if(!c.ultimo_pedido||!c.tel) return false;
    return (agora - new Date(c.ultimo_pedido)) / (1000*60*60*24) >= diasInativo;
  });
  if(!inativos.length){ toast('Nenhum cliente inativo com WhatsApp'); return; }
  if(!confirm('Enviar mensagem para ' + inativos.length + ' cliente(s) inativo(s)?')) return;
  inativos.forEach(c => {
    const msg = (c.cashback_saldo||0)>0
      ? 'Olá, ' + (c.nome||'cliente') + '! 😊 Sentimos sua falta. Você tem ' + fmt(c.cashback_saldo) + ' de cashback esperando. Volte hoje!'
      : 'Olá, ' + (c.nome||'cliente') + '! 😊 Sentimos sua falta. Faça um pedido hoje e ganhe ' + (DB.config.cashback_pct||5) + '% de cashback!';
    window.open('https://wa.me/55' + c.tel.replace(/\D/g,'') + '?text=' + encodeURIComponent(msg), '_blank');
    c.ultimo_disparo = nowISO();
  });
  save('clientes');
  toast('✅ ' + inativos.length + ' mensagens abertas!', true);
}

// ══════════════════════════════════════════
// CUPONS
// ══════════════════════════════════════════
function renderCupons(){
  document.getElementById('content').innerHTML=`
  <div class="fs">
    <div class="fs-ti">🎟️ Cupons de Desconto</div>
    <div class="fs-su">Crie cupons por valor fixo ou percentual. A IA aceita e aplica automaticamente.</div>
  </div>
  <div style="display:flex;justify-content:flex-end;margin-bottom:13px">
    <button class="btn btn-r" onclick="document.getElementById('ov-cupom').classList.add('show')">+ Criar Cupom</button>
  </div>
  <div class="coupon-list">${DB.cupons.length>0?DB.cupons.map(c=>`
    <div class="coupon">
      <div class="coupon-code">${c.cod}</div>
      <div class="coupon-info">
        <div class="coupon-nm">${c.nome}</div>
        <div class="coupon-det">${c.tipo==='pct'?c.val+'% de desconto':'R$'+c.val.toFixed(2)+' de desconto'}${c.min>0?' · Pedido mínimo: R$'+c.min.toFixed(2):''}${c.uses>0?' · Limite: '+c.uses+' usos':''}</div>
      </div>
      <div class="coupon-uses">${c.usados||0}/${c.uses||'∞'} usos</div>
      <div style="display:flex;gap:5px">
        <span class="tag ${c.ativo?'tg-gr':'tg-rd'}">${c.ativo?'Ativo':'Inativo'}</span>
        <button class="bsm bsm-r" onclick="removerCupom('${c.id}')">✕</button>
      </div>
    </div>`).join(''):'<p style="text-align:center;color:var(--muted);font-size:.83rem;padding:22px">Nenhum cupom criado ainda. Crie seu primeiro cupom!</p>'}
  </div>`;
}

function confirmarCupom(){
  const cod=document.getElementById('cp-cod').value.trim().toUpperCase();
  const nome=document.getElementById('cp-nm').value.trim();
  const tipo=document.getElementById('cp-tipo').value;
  const val=Number(document.getElementById('cp-val').value||0);
  const uses=Number(document.getElementById('cp-uses').value||0);
  const min=Number(document.getElementById('cp-min').value||0);
  if(!cod||!nome||!val){toast('Preencha código, nome e valor');return;}
  if(DB.cupons.find(c=>c.cod===cod)){toast('Código já existe!');return;}
  DB.cupons.push({id:uid(),cod,nome,tipo,val,uses,min,ativo:true,usados:0,criado:nowISO()});
  save('cupons');
  fecharOv('ov-cupom');
  toast('✅ Cupom "'+cod+'" criado!',true);
  ['cp-cod','cp-nm','cp-val','cp-uses','cp-min'].forEach(id=>document.getElementById(id).value='');
  renderCupons();
}

function removerCupom(id){
  if(!confirm('Remover este cupom?'))return;
  DB.cupons=DB.cupons.filter(c=>c.id!==id);
  save('cupons');
  renderCupons();
}

// ══════════════════════════════════════════
// RELATÓRIOS AVANÇADOS
// ══════════════════════════════════════════
let _relPeriodo = '7d'; // hoje | 7d | 30d | mes

function renderRelatorios() {
  document.getElementById('content').innerHTML = '<div id="rel-root"></div>';
  _renderRelConteudo();
}

function _relFiltrarPedidos() {
  const agora = new Date();
  const ini = new Date();
  if (_relPeriodo === 'hoje') { ini.setHours(0,0,0,0); }
  else if (_relPeriodo === '7d') { ini.setDate(agora.getDate()-6); ini.setHours(0,0,0,0); }
  else if (_relPeriodo === '30d') { ini.setDate(agora.getDate()-29); ini.setHours(0,0,0,0); }
  else if (_relPeriodo === 'mes') { ini.setDate(1); ini.setHours(0,0,0,0); }
  return DB.pedidos.filter(p => p.criado_em && new Date(p.criado_em) >= ini);
}

function _renderRelConteudo() {
  const ped = _relFiltrarPedidos();
  const entregues = ped.filter(p => p.status === 'entregue');
  const cancelados = ped.filter(p => p.status === 'cancelado');
  const ativos = ped.filter(p => !['entregue','cancelado'].includes(p.status));
  const fat = entregues.reduce((s,p) => s + Number(p.total||0), 0);
  const ticket = entregues.length ? fat/entregues.length : 0;
  const taxaC = ped.length ? ((cancelados.length/ped.length)*100).toFixed(1) : 0;

  // ── Curva ABC ──
  const contagem = {};
  const fatProd = {};
  entregues.forEach(p => {
    (p.itens_txt||'').split(',').forEach(i => {
      const nm = i.replace(/^\s*\d+x\s*/,'').trim();
      if(!nm) return;
      contagem[nm] = (contagem[nm]||0) + 1;
      fatProd[nm] = (fatProd[nm]||0) + (Number(p.total||0)/Math.max(1,(p.itens_txt||'').split(',').length));
    });
  });
  const abc = Object.entries(contagem).sort((a,b)=>b[1]-a[1]);
  const maxAbc = abc[0]?.[1] || 1;
  const totalPedAbc = abc.reduce((s,[,v])=>s+v,0)||1;
  let acum = 0;
  const abcHtml = abc.slice(0,10).map(([nm,v],i) => {
    acum += v/totalPedAbc*100;
    const classe = acum<=70?'A':acum<=90?'B':'C';
    const cor = classe==='A'?'#16A34A':classe==='B'?'#D97706':'#6B7280';
    const pct = Math.round((v/maxAbc)*100);
    return '<div style="display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid #F5F5F5">' +
      '<div style="width:22px;height:22px;border-radius:6px;background:' + cor + ';color:white;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:800;flex-shrink:0">' + classe + '</div>' +
      '<div style="flex:1;min-width:0">' +
        '<div style="font-size:.8rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">' + nm + '</div>' +
        '<div style="height:5px;background:#F0F0F0;border-radius:100px;margin-top:4px"><div style="height:100%;width:' + pct + '%;background:' + cor + ';border-radius:100px"></div></div>' +
      '</div>' +
      '<div style="font-size:.78rem;font-weight:700;color:var(--text);flex-shrink:0">' + v + 'x</div>' +
    '</div>';
  }).join('') || '<div style="color:var(--muted);font-size:.82rem;padding:14px">Nenhum dado ainda.</div>';

  // ── Pagamentos ──
  const pgCount = {};
  entregues.forEach(p => {
    if (p.pagamentos && p.pagamentos.length) {
      p.pagamentos.forEach(pg => { pgCount[pg.label] = (pgCount[pg.label]||0) + pg.valor; });
    } else if (p.pagamento) {
      pgCount[p.pagamento] = (pgCount[p.pagamento]||0) + Number(p.total||0);
    }
  });
  const pgTotal = Object.values(pgCount).reduce((s,v)=>s+v,0)||1;
  const pgCores = {'Dinheiro':'#16A34A','PIX':'#0EA5E9','Crédito':'#7C3AED','Débito':'#1D4ED8','Fiado':'#DC2626'};
  const pgHtml = Object.entries(pgCount).sort((a,b)=>b[1]-a[1]).map(([nm,v]) => {
    const cor = pgCores[nm] || '#6B7280';
    const pct = Math.round((v/pgTotal)*100);
    return '<div style="display:flex;align-items:center;gap:10px;margin-bottom:10px">' +
      '<div style="font-size:.78rem;color:var(--muted);width:64px;flex-shrink:0;text-align:right">' + nm + '</div>' +
      '<div style="flex:1;height:7px;background:#F0F0F0;border-radius:100px"><div style="height:100%;width:' + pct + '%;background:' + cor + ';border-radius:100px"></div></div>' +
      '<div style="font-size:.78rem;font-weight:700;width:64px;flex-shrink:0">' + fmt(v) + '</div>' +
    '</div>';
  }).join('') || '<div style="color:var(--muted);font-size:.82rem;padding:14px">Nenhum dado.</div>';

  // ── Pico de horários ──
  const horaCount = Array(24).fill(0);
  ped.forEach(p => { if(p.criado_em) horaCount[new Date(p.criado_em).getHours()]++; });
  const maxHora = Math.max(...horaCount, 1);
  const horaHtml = horaCount.map((v,h) => {
    const pct = Math.round((v/maxHora)*100);
    const ativo = pct > 60;
    return '<div style="display:flex;flex-direction:column;align-items:center;gap:3px;flex:1">' +
      '<div style="width:100%;background:' + (ativo?'var(--red)':'#E8E8E8') + ';border-radius:3px 3px 0 0;height:' + Math.max(4,pct*0.6) + 'px;transition:height .3s"></div>' +
      (h%4===0?'<div style="font-size:.55rem;color:var(--muted)">' + h + 'h</div>':'<div style="height:10px"></div>') +
    '</div>';
  }).join('');

  // ── Faturamento por dia ──
  const diasMap = {};
  const numDias = _relPeriodo==='hoje'?1:_relPeriodo==='7d'?7:_relPeriodo==='mes'||_relPeriodo==='30d'?30:30;
  for(let i=numDias-1;i>=0;i--) {
    const d = new Date(); d.setDate(d.getDate()-i); d.setHours(0,0,0,0);
    diasMap[d.toDateString()] = 0;
  }
  entregues.forEach(p => {
    const k = new Date(p.criado_em).toDateString();
    if(diasMap[k]!==undefined) diasMap[k] += Number(p.total||0);
  });
  const diasVals = Object.values(diasMap);
  const maxDia = Math.max(...diasVals, 1);
  const diasLabels = Object.keys(diasMap);
  const graficoHtml = diasVals.map((v,i) => {
    const pct = Math.round((v/maxDia)*100);
    const d = new Date(diasLabels[i]);
    const lbl = numDias<=7 ? ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb'][d.getDay()] : (d.getDate()+'');
    return '<div style="display:flex;flex-direction:column;align-items:center;gap:3px;flex:1;min-width:0" title="' + fmt(v) + '">' +
      '<div style="font-size:.55rem;color:var(--red);font-weight:700;height:14px">' + (v>0?fmt(v).replace('R$ ',''):'') + '</div>' +
      '<div style="width:100%;background:' + (v>0?'var(--red)':'#F0F0F0') + ';border-radius:4px 4px 0 0;height:' + Math.max(4,pct*0.9) + 'px"></div>' +
      '<div style="font-size:.58rem;color:var(--muted)">' + lbl + '</div>' +
    '</div>';
  }).join('');

  // ── Tipos de pedido ──
  const tipos = {delivery:0,mesa:0,balcao:0};
  ped.forEach(p => { if(tipos[p.tipo]!==undefined) tipos[p.tipo]++; });
  const totalTipos = ped.length||1;
  const tiposHtml = [
    {id:'delivery',label:'🛵 Delivery',cor:'#CC0000'},
    {id:'mesa',    label:'🪑 Mesa',    cor:'#1D4ED8'},
    {id:'balcao',  label:'🏪 Balcão',  cor:'#059669'},
  ].map(t => {
    const v = tipos[t.id]; const pct = Math.round((v/totalTipos)*100);
    return '<div style="display:flex;align-items:center;gap:10px;margin-bottom:9px">' +
      '<div style="font-size:.78rem;width:72px;flex-shrink:0">' + t.label + '</div>' +
      '<div style="flex:1;height:7px;background:#F0F0F0;border-radius:100px"><div style="height:100%;width:' + pct + '%;background:' + t.cor + ';border-radius:100px"></div></div>' +
      '<div style="font-size:.78rem;font-weight:700;width:36px;flex-shrink:0;text-align:right">' + v + '</div>' +
    '</div>';
  }).join('');

  const periodos = [{id:'hoje',label:'Hoje'},{id:'7d',label:'7 dias'},{id:'mes',label:'Este mês'},{id:'30d',label:'30 dias'}];
  const tabsHtml = periodos.map(p =>
    '<button onclick="_relPeriodo=\'' + p.id + '\';_renderRelConteudo()" style="padding:6px 14px;border-radius:7px;border:none;cursor:pointer;font-family:var(--fb);font-size:.78rem;font-weight:700;background:' + (_relPeriodo===p.id?'var(--red)':'#F5F5F5') + ';color:' + (_relPeriodo===p.id?'white':'var(--muted)') + '">' + p.label + '</button>'
  ).join('');

  const root = document.getElementById('rel-root');
  if(!root) return;
  root.innerHTML =
    // Seletor de período
    '<div style="display:flex;gap:7px;margin-bottom:18px;flex-wrap:wrap">' + tabsHtml + '</div>' +

    // KPIs
    '<div class="mgrid" style="margin-bottom:14px">' +
      '<div class="mc mc-accent"><div class="mc-l">Faturamento</div><div class="mc-v" style="color:var(--red)">' + fmt(fat) + '</div><div class="mc-d up">' + entregues.length + ' pedido(s) entregue(s)</div></div>' +
      '<div class="mc"><div class="mc-l">Ticket médio</div><div class="mc-v">' + fmt(ticket) + '</div><div class="mc-d">por pedido entregue</div></div>' +
      '<div class="mc"><div class="mc-l">Total de pedidos</div><div class="mc-v">' + ped.length + '</div><div class="mc-d">' + ativos.length + ' em andamento</div></div>' +
      '<div class="mc"><div class="mc-l">Cancelamentos</div><div class="mc-v ' + (cancelados.length>0?'dn':'up') + '">' + taxaC + '%</div><div class="mc-d">' + cancelados.length + ' pedido(s)</div></div>' +
    '</div>' +

    // Gráfico de faturamento
    '<div class="box" style="margin-bottom:14px">' +
      '<div class="bx-hd"><h3>📊 Faturamento por dia</h3></div>' +
      '<div style="display:flex;align-items:flex-end;gap:3px;height:120px;padding:8px 12px 0">' + graficoHtml + '</div>' +
    '</div>' +

    // Linha 2 colunas
    '<div class="chart-row" style="margin-bottom:14px">' +
      // ABC
      '<div class="chart-box">' +
        '<h4>🏆 Curva ABC — Itens mais pedidos</h4>' +
        '<div style="display:flex;gap:10px;margin-bottom:10px;font-size:.68rem">' +
          '<span style="display:flex;align-items:center;gap:4px"><span style="width:10px;height:10px;background:#16A34A;border-radius:2px;display:inline-block"></span> A = 70% do volume</span>' +
          '<span style="display:flex;align-items:center;gap:4px"><span style="width:10px;height:10px;background:#D97706;border-radius:2px;display:inline-block"></span> B = 20%</span>' +
          '<span style="display:flex;align-items:center;gap:4px"><span style="width:10px;height:10px;background:#6B7280;border-radius:2px;display:inline-block"></span> C = 10%</span>' +
        '</div>' +
        abcHtml +
      '</div>' +
      // Pagamentos + tipos
      '<div style="display:flex;flex-direction:column;gap:13px">' +
        '<div class="chart-box">' +
          '<h4>💳 Por forma de pagamento</h4>' + pgHtml +
        '</div>' +
        '<div class="chart-box">' +
          '<h4>📦 Por tipo de pedido</h4>' + tiposHtml +
        '</div>' +
      '</div>' +
    '</div>' +

    // Pico de horários
    '<div class="box" style="margin-bottom:14px">' +
      '<div class="bx-hd"><h3>⏰ Horários de maior movimento</h3></div>' +
      '<div style="display:flex;align-items:flex-end;gap:1px;height:80px;padding:8px 12px 0">' + horaHtml + '</div>' +
    '</div>' +

    // Tabela histórico
    '<div class="box">' +
      '<div class="bx-hd"><h3>📋 Histórico</h3>' +
        '<button class="btn btn-g" onclick="window.print()">🖨️ Imprimir</button>' +
      '</div>' +
      '<table><thead><tr><th>#</th><th>Cliente</th><th>Itens</th><th>Total</th><th>Tipo</th><th>Status</th><th>Data</th></tr></thead>' +
      '<tbody>' + (ped.slice().reverse().slice(0,30).map(p =>
        '<tr>' +
          '<td><strong>#' + p.num + '</strong></td>' +
          '<td>' + (p.cliente||'—') + '</td>' +
          '<td style="color:var(--muted);font-size:.77rem">' + (p.itens_txt||'—').slice(0,40) + '</td>' +
          '<td><strong>' + fmt(p.total) + '</strong></td>' +
          '<td><span class="tag ' + (p.tipo==='delivery'?'tg-rd':p.tipo==='mesa'?'tg-bl':'tg-yw') + '">' + p.tipo + '</span></td>' +
          '<td>' + tagStatus(p.status) + '</td>' +
          '<td style="color:var(--muted)">' + timeAgo(p.criado_em) + '</td>' +
        '</tr>'
      ).join('') || '<tr><td colspan="7" style="text-align:center;color:var(--muted);padding:22px">Nenhum pedido no período</td></tr>') +
      '</tbody></table>' +
    '</div>';
}

function rankItens(){
  const c={};
  DB.pedidos.forEach(p=>{(p.itens_txt||'').split(',').forEach(i=>{const n=i.replace(/^\d+x /,'').trim();if(n)c[n]=(c[n]||0)+1;});});
  const sorted=Object.entries(c).sort((a,b)=>b[1]-a[1]).slice(0,5);
  if(!sorted.length)return'<p style="color:var(--muted);font-size:.82rem">Nenhum pedido ainda.</p>';
  const max=sorted[0][1];
  return sorted.map(([n,v])=>'<div class="bar-row"><div class="bar-lbl">'+n.slice(0,14)+'</div><div class="bar-bg"><div class="bar-fill" style="width:'+(v/max*100)+'%"></div></div><div class="bar-val">'+v+'</div></div>').join('');
}

function imprimirPedidos(){window.print();}

// ══════════════════════════════════════════
// CONFIG IA
// ══════════════════════════════════════════
function renderIA(){
  const cfg=DB.config;
  document.getElementById('content').innerHTML=`
  <div class="fs">
    <div class="fs-ti">🤖 Personalidade da IA</div>
    <div class="fgrid">
      <div class="fg"><label>Nome da IA</label><input id="ia-nome" value="${cfg.nome_ia}"/></div>
      <div class="fg"><label>Tom de voz</label>
        <select id="ia-tom">
          <option ${cfg.tom?.includes('amigável')?'selected':''}>amigável e descontraído</option>
          <option ${cfg.tom?.includes('profissional')?'selected':''}>profissional e formal</option>
          <option ${cfg.tom?.includes('divertido')?'selected':''}>jovem e divertido</option>
        </select>
      </div>
      <div class="fg full"><label>Mensagem de boas-vindas</label>
        <textarea id="ia-bv">Olá! 👋 Seja bem-vindo ao ${document.getElementById('biz-nm').textContent}! Posso mostrar nosso cardápio e receber seu pedido. Como posso te ajudar?</textarea>
      </div>
    </div>
  </div>
  <div class="fs">
    <div class="fs-ti">⚙️ Comportamentos</div>
    <div class="trow"><div class="ti"><strong>Atendimento 24h</strong><span>IA responde mesmo fora do horário</span></div><button class="tgl-r ${cfg.h24?'on':''}" onclick="this.classList.toggle('on')"></button></div>
    <div class="trow"><div class="ti"><strong>Notificar cliente a cada status do pedido</strong><span>Mensagem automática a cada mudança</span></div><button class="tgl-r ${cfg.notif?'on':''}" onclick="this.classList.toggle('on')"></button></div>
    <div class="trow"><div class="ti"><strong>Confirmar endereço antes do delivery</strong><span>Pede endereço antes de confirmar</span></div><button class="tgl-r ${cfg.conf_end?'on':''}" onclick="this.classList.toggle('on')"></button></div>
    <div class="trow"><div class="ti"><strong>Informar pontos de fidelidade</strong><span>IA avisa o saldo de pontos após o pedido</span></div><button class="tgl-r on" onclick="this.classList.toggle('on')"></button></div>
    <div class="trow"><div class="ti"><strong>Aviso LGPD na primeira conversa</strong><span>Recomendado pela Lei 13.709/2018</span></div><button class="tgl-r ${cfg.lgpd?'on':''}" onclick="this.classList.toggle('on')"></button></div>
  </div>
  <div class="fs">
    <div class="fs-ti">📱 Conectar WhatsApp</div>
    <div class="fs-su">Escaneie o QR Code com o WhatsApp do seu restaurante para ativar a IA.</div>
    <div style="display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap">
      <div style="background:white;border:1px solid #DDD;border-radius:10px;padding:12px;width:140px;height:140px;display:flex;align-items:center;justify-content:center;flex-shrink:0">
        <svg width="112" height="112" viewBox="0 0 160 160">
          <rect fill="#000" x="10" y="10" width="50" height="50" rx="3"/>
          <rect fill="#fff" x="18" y="18" width="34" height="34" rx="2"/>
          <rect fill="#000" x="24" y="24" width="22" height="22" rx="1"/>
          <rect fill="#000" x="100" y="10" width="50" height="50" rx="3"/>
          <rect fill="#fff" x="108" y="18" width="34" height="34" rx="2"/>
          <rect fill="#000" x="114" y="24" width="22" height="22" rx="1"/>
          <rect fill="#000" x="10" y="100" width="50" height="50" rx="3"/>
          <rect fill="#fff" x="18" y="108" width="34" height="34" rx="2"/>
          <rect fill="#000" x="24" y="114" width="22" height="22" rx="1"/>
          <rect fill="#000" x="70" y="10" width="10" height="8"/><rect fill="#000" x="82" y="10" width="8" height="6"/>
          <rect fill="#000" x="70" y="22" width="8" height="8"/><rect fill="#000" x="82" y="20" width="6" height="6"/>
          <rect fill="#000" x="70" y="60" width="18" height="7"/><rect fill="#000" x="92" y="60" width="12" height="7"/>
          <rect fill="#000" x="70" y="71" width="7" height="12"/><rect fill="#000" x="81" y="71" width="10" height="7"/>
          <rect fill="#000" x="70" y="88" width="18" height="7"/><rect fill="#000" x="92" y="86" width="7" height="10"/>
          <rect fill="#000" x="108" y="70" width="7" height="18"/><rect fill="#000" x="119" y="71" width="10" height="7"/>
          <rect fill="#000" x="118" y="82" width="18" height="7"/><rect fill="#000" x="108" y="92" width="14" height="7"/>
          <rect fill="#000" x="70" y="108" width="18" height="7"/><rect fill="#000" x="92" y="106" width="7" height="18"/>
          <rect fill="#000" x="70" y="119" width="7" height="7"/><rect fill="#000" x="81" y="118" width="7" height="9"/>
          <rect fill="#000" x="70" y="130" width="18" height="6"/><rect fill="#000" x="92" y="128" width="10" height="8"/>
        </svg>
      </div>
      <div>
        <div style="font-weight:700;font-size:.87rem;margin-bottom:8px;color:var(--text)">Como conectar:</div>
        <div style="font-size:.81rem;color:var(--muted);line-height:1.8">
          1. Abra o WhatsApp no celular<br>
          2. Toque em ⋮ Menu → <strong style="color:var(--text)">Aparelhos conectados</strong><br>
          3. Toque em <strong style="color:var(--text)">Conectar aparelho</strong><br>
          4. Aponte a câmera para o QR Code
        </div>
        <button class="btn btn-g" style="margin-top:12px" onclick="toast('🔄 Gerando novo QR Code...')">🔄 Gerar novo QR Code</button>
      </div>
    </div>
  </div>
  <button class="btn btn-r" style="padding:10px 26px" onclick="salvarIA()">💾 Salvar configurações</button>`;
}

function salvarIA(){
  DB.config.nome_ia=document.getElementById('ia-nome')?.value;
  DB.config.tom=document.getElementById('ia-tom')?.value;
  save('config');
  toast('✅ Configurações salvas!',true);
}

// ══════════════════════════════════════════
// ENTREGAS
// ══════════════════════════════════════════
function renderEntregas(){
  const cfg=DB.config;
  document.getElementById('content').innerHTML=`
  <div class="fs">
    <div class="fs-ti">🛵 Configurações de Entrega</div>
    <div class="fs-su">Configure delivery, retirada e mesas. A IA usará essas informações ao receber pedidos.</div>
    <div class="trow"><div class="ti"><strong>Delivery (entrega em domicílio)</strong><span>Clientes podem pedir com entrega</span></div><button id="tgl-delivery" class="tgl-r ${cfg.delivery!==false?'on':''}" onclick="this.classList.toggle('on')"></button></div>
    <div class="trow"><div class="ti"><strong>Retirada no local</strong><span>Cliente retira no estabelecimento</span></div><button id="tgl-retirada" class="tgl-r ${cfg.retirada!==false?'on':''}" onclick="this.classList.toggle('on')"></button></div>
    <div class="trow"><div class="ti"><strong>Atendimento de mesa</strong><span>Cliente faz pedido pela mesa via QR Code</span></div><button id="tgl-mesa" class="tgl-r ${cfg.mesa?'on':''}" onclick="this.classList.toggle('on')"></button></div>
  </div>
  <div class="fs">
    <div class="fs-ti">Valores e Prazos</div>
    <div class="fgrid">
      <div class="fg"><label>Taxa de entrega (R$)</label><input id="en-taxa" type="number" step="0.50" value="${cfg.taxa_entrega||5}"/></div>
      <div class="fg"><label>Pedido mínimo delivery (R$)</label><input id="en-min" type="number" value="${cfg.min_delivery||20}"/></div>
      <div class="fg"><label>Raio de entrega (km)</label><input id="en-raio" type="number" value="${cfg.raio||5}"/></div>
      <div class="fg"><label>Tempo médio de preparo (min)</label><input id="en-tempo" type="number" value="${cfg.tempo_preparo||40}"/></div>
    </div>
  </div>
  <div class="fs">
    <div class="fs-ti">💳 Formas de Pagamento</div>
    <div class="trow"><div class="ti"><strong>PIX</strong></div><button id="tgl-pix" class="tgl-r ${cfg.pg_pix!==false?'on':''}" onclick="this.classList.toggle('on')"></button></div>
    <div class="trow"><div class="ti"><strong>Dinheiro</strong></div><button id="tgl-dinheiro" class="tgl-r ${cfg.pg_dinheiro!==false?'on':''}" onclick="this.classList.toggle('on')"></button></div>
    <div class="trow"><div class="ti"><strong>Cartão de Débito</strong></div><button id="tgl-debito" class="tgl-r ${cfg.pg_debito!==false?'on':''}" onclick="this.classList.toggle('on')"></button></div>
    <div class="trow"><div class="ti"><strong>Cartão de Crédito</strong></div><button id="tgl-credito" class="tgl-r ${cfg.pg_credito!==false?'on':''}" onclick="this.classList.toggle('on')"></button></div>
    <div class="fg" style="margin-top:12px"><label>Chave PIX do restaurante</label><input id="en-pix" placeholder="CPF, CNPJ, e-mail ou telefone" value="${cfg.pix||''}"/></div>
  </div>
  <button class="btn btn-r" style="padding:10px 26px" onclick="salvarEntregas()">💾 Salvar</button>`;
}

function salvarEntregas(){
  DB.config.delivery=document.getElementById('tgl-delivery')?.classList.contains('on')??true;
  DB.config.retirada=document.getElementById('tgl-retirada')?.classList.contains('on')??true;
  DB.config.mesa=document.getElementById('tgl-mesa')?.classList.contains('on')??false;
  DB.config.pg_pix=document.getElementById('tgl-pix')?.classList.contains('on')??true;
  DB.config.pg_dinheiro=document.getElementById('tgl-dinheiro')?.classList.contains('on')??true;
  DB.config.pg_debito=document.getElementById('tgl-debito')?.classList.contains('on')??true;
  DB.config.pg_credito=document.getElementById('tgl-credito')?.classList.contains('on')??true;
  DB.config.taxa_entrega=Number(document.getElementById('en-taxa')?.value||5);
  DB.config.min_delivery=Number(document.getElementById('en-min')?.value||20);
  DB.config.raio=Number(document.getElementById('en-raio')?.value||5);
  DB.config.tempo_preparo=Number(document.getElementById('en-tempo')?.value||40);
  DB.config.pix=document.getElementById('en-pix')?.value||'';
  save('config');
  toast('✅ Configurações de entrega salvas!',true);
}

// ══════════════════════════════════════════
// CONTA
// ══════════════════════════════════════════
function renderConta(){
  const cfg=DB.config||{};
  const biz=document.getElementById('biz-nm').textContent;
  const plano=document.getElementById('biz-pl').textContent;
  document.getElementById('content').innerHTML=`
  <div class="fs">
    <div class="fs-ti">🏪 Dados do Restaurante</div>
    <div class="fs-su">Essas informações aparecem no cardápio online que seus clientes acessam.</div>
    <div class="fgrid">
      <div class="fg"><label>Nome do restaurante</label><input id="ct-nome" value="${cfg.rest_nome||biz}"/></div>
      <div class="fg"><label>WhatsApp do estabelecimento</label><input id="ct-wa" placeholder="5579999999999" value="${cfg.whatsapp_num||''}"/></div>
      <div class="fg full"><label>Endereço</label><input id="ct-end" placeholder="Rua, número, bairro, cidade" value="${cfg.endereco||''}"/></div>
      <div class="fg full"><label>Descrição (aparece no cardápio)</label><input id="ct-desc" placeholder="Ex: Pizzas artesanais · Abre às 18h · Entrega em 40 min" value="${cfg.rest_desc||''}"/></div>
    </div>
  </div>
  <div class="fs">
    <div class="fs-ti">🖼️ Identidade Visual</div>
    <div class="fs-su">A logo e o banner aparecem no topo do seu cardápio online.</div>
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:14px">
      <div>
        <label style="display:block;font-size:.75rem;font-weight:600;margin-bottom:6px;color:var(--muted)">Logo do restaurante (quadrada)</label>
        <div style="display:flex;align-items:center;gap:10px">
          <div id="prev-logo" style="width:64px;height:64px;border-radius:12px;background:#F5F5F5;border:2px dashed #DDD;display:flex;align-items:center;justify-content:center;font-size:2rem;overflow:hidden;flex-shrink:0">${cfg.rest_logo&&cfg.rest_logo.length>10?`<img src="${cfg.rest_logo}" style="width:100%;height:100%;object-fit:cover">`:document.getElementById('bav').textContent}</div>
          <div style="flex:1">
            <input type="file" id="file-logo" accept="image/*" style="display:none" onchange="carregarImagem(this,'rest_logo','prev-logo',64,64)"/>
            <button type="button" class="btn btn-g" style="width:100%;margin-bottom:4px" onclick="document.getElementById('file-logo').click()">📷 Escolher logo</button>
            <button type="button" class="btn btn-g" style="width:100%;font-size:.72rem;color:var(--muted)" onclick="limparImagem('rest_logo','prev-logo','🍽️')">✕ Remover</button>
          </div>
        </div>
      </div>
      <div>
        <label style="display:block;font-size:.75rem;font-weight:600;margin-bottom:6px;color:var(--muted)">Banner / capa (horizontal)</label>
        <div style="display:flex;flex-direction:column;gap:6px">
          <div id="prev-banner" style="width:100%;height:80px;border-radius:10px;background:#F5F5F5;border:2px dashed #DDD;display:flex;align-items:center;justify-content:center;font-size:2rem;overflow:hidden">${cfg.rest_banner&&cfg.rest_banner.length>10?`<img src="${cfg.rest_banner}" style="width:100%;height:100%;object-fit:cover">`:'🖼️'}</div>
          <input type="file" id="file-banner" accept="image/*" style="display:none" onchange="carregarImagem(this,'rest_banner','prev-banner',0,0)"/>
          <button type="button" class="btn btn-g" onclick="document.getElementById('file-banner').click()">📷 Escolher banner</button>
          <button type="button" class="btn btn-g" style="font-size:.72rem;color:var(--muted)" onclick="limparImagem('rest_banner','prev-banner','🖼️')">✕ Remover</button>
        </div>
      </div>
    </div>
    <button class="btn btn-r" style="padding:9px 22px" onclick="salvarConta()">💾 Salvar dados</button>
  </div>
  <div class="fs">
    <div class="fs-ti">💳 Plano Atual</div>
    <div style="background:var(--red-lt);border:2px solid rgba(204,0,0,.2);border-radius:12px;padding:16px 18px;margin-bottom:14px;max-width:320px">
      <div style="font-size:.75rem;color:var(--red);font-weight:700;margin-bottom:3px;text-transform:uppercase;letter-spacing:.05em">Plano Contratado</div>
      <div style="font-family:var(--fd);font-size:1.5rem;font-weight:800;color:var(--text)">${plano.replace('Plano ','')}</div>
      <div style="font-size:.77rem;color:var(--muted);margin-top:3px">7 dias grátis · Zero comissão</div>
    </div>
    <div style="font-size:.83rem;color:var(--muted);margin-bottom:14px">Quer mais recursos? Faça upgrade:</div>
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:500px">
      <div style="border:1.5px solid rgba(204,0,0,.2);border-radius:10px;padding:13px 15px">
        <div style="font-family:var(--fd);font-weight:800;color:var(--text);margin-bottom:2px">Pro</div>
        <div style="font-size:.75rem;color:var(--muted);margin-bottom:9px">Cartão · fidelidade · cupons · Google Maps</div>
        <div style="font-family:var(--fd);font-size:1.2rem;font-weight:800;color:var(--text);margin-bottom:9px">R$199<span style="font-size:.72rem;font-weight:400;color:var(--muted)">/mês</span></div>
        <button class="btn btn-r" style="width:100%;padding:7px;font-size:.8rem" onclick="toast('📲 Redirecionando para o upgrade...')">Fazer upgrade →</button>
      </div>
      <div style="border:1.5px solid rgba(204,0,0,.2);border-radius:10px;padding:13px 15px">
        <div style="font-family:var(--fd);font-weight:800;color:var(--text);margin-bottom:2px">Rede</div>
        <div style="font-size:.75rem;color:var(--muted);margin-bottom:9px">5 restaurantes · painel unificado · gerente</div>
        <div style="font-family:var(--fd);font-size:1.2rem;font-weight:800;color:var(--text);margin-bottom:9px">R$299<span style="font-size:.72rem;font-weight:400;color:var(--muted)">/mês</span></div>
        <button class="btn btn-r" style="width:100%;padding:7px;font-size:.8rem" onclick="toast('📲 Redirecionando para o upgrade...')">Fazer upgrade →</button>
      </div>
    </div>
  </div>
  <div class="fs">
    <div class="fs-ti">🔒 Privacidade e LGPD</div>
    <div style="display:flex;gap:8px;flex-wrap:wrap;margin-top:6px">
      <button class="btn btn-g" onclick="exportarDados()">📄 Exportar meus dados</button>
      <button class="btn" style="background:var(--red-lt);color:var(--red);border:1px solid rgba(204,0,0,.2)" onclick="if(confirm('Tem certeza? Todos os dados serão apagados permanentemente.'))limparDados()">🗑️ Excluir conta e dados</button>
    </div>
  </div>`;
}

function salvarConta(){
  const nome=document.getElementById('ct-nome')?.value.trim();
  const wa=document.getElementById('ct-wa')?.value.trim();
  const end=document.getElementById('ct-end')?.value.trim();
  const desc=document.getElementById('ct-desc')?.value.trim();
  if(nome){
    document.getElementById('biz-nm').textContent=nome;
    DB.config.rest_nome=nome;
  }
  if(wa)DB.config.whatsapp_num=wa;
  if(end)DB.config.endereco=end;
  if(desc)DB.config.rest_desc=desc;
  save('config');
  toast('✅ Dados salvos! O cardápio foi atualizado.',true);
}

function carregarImagem(input,chave,prevId,w,h){
  const file=input.files[0];
  if(!file)return;
  const reader=new FileReader();
  reader.onload=e=>{
    const data=e.target.result;
    DB.config[chave]=data;
    save('config');
    const prev=document.getElementById(prevId);
    prev.innerHTML=`<img src="${data}" style="width:100%;height:100%;object-fit:cover">`;
    toast('✅ Imagem carregada!',true);
  };
  reader.readAsDataURL(file);
}

function limparImagem(chave,prevId,emoji){
  DB.config[chave]='';
  save('config');
  document.getElementById(prevId).innerHTML=emoji;
  toast('Imagem removida');
}

function exportarDados(){
  const dados=JSON.stringify({pedidos:DB.pedidos,cardapio:DB.cardapio,estoque:DB.estoque,clientes:DB.clientes,config:DB.config},null,2);
  const blob=new Blob([dados],{type:'application/json'});
  const a=document.createElement('a');a.href=URL.createObjectURL(blob);a.download='atend-ia-dados.json';a.click();
  toast('📄 Dados exportados!',true);
}

function limparDados(){
  Object.keys(DB).forEach(k=>{localStorage.removeItem('db_'+k);});
  location.reload();
}

// ══════════════════════════════════════════
// HELPERS MODAIS
// ══════════════════════════════════════════
function fecharOv(id){document.getElementById(id).classList.remove('show');}

// ══════════════════════════════════════════
// IA TOGGLE
// ══════════════════════════════════════════
function toggleIA(){
  IA_ON=!IA_ON;
  document.getElementById('iadot').classList.toggle('off',!IA_ON);
  document.getElementById('ia-txt').textContent=IA_ON?'IA Ativa':'IA Pausada';
  document.getElementById('tgl-ia').classList.toggle('on',IA_ON);
  toast(IA_ON?'✅ IA ativada!':'⏸️ IA pausada.');
}

function carregarFoto(input){
  const file=input.files[0];
  if(!file)return;
  const reader=new FileReader();
  reader.onload=e=>{
    const data=e.target.result;
    document.getElementById('it-foto').value=data;
    const prev=document.getElementById('it-foto-preview');
    prev.innerHTML=`<img src="${data}" style="width:100%;height:100%;object-fit:cover;border-radius:9px">`;
    toast('✅ Foto carregada!',true);
  };
  reader.readAsDataURL(file);
}

function limparFoto(){
  document.getElementById('it-foto').value='';
  document.getElementById('it-foto-preview').innerHTML='📷';
  document.getElementById('it-foto-file').value='';
}

init();
</script>
</body>

<!--
=======================================================================
RESUMO DO QUE FOI IMPLEMENTADO NESTA SESSÃO
Data: Março 2026
=======================================================================

IMPLEMENTADO: Módulo de Mesas e Comandas (Fase 1)

ARQUIVOS MODIFICADOS:
  1. dashboard-restaurante.html — mesas + seletor de produto + obs modal
  2. cardapio.html — slide de categorias + responsivo desktop/mobile
  3. webhook.js — respeita dias da semana configurados no dashboard
  4. dashboard-restaurante.html — conta, foto/banner, toggles, modais

BUGS CORRIGIDOS:
  - Todos os modais fechando ao clicar em inputs (stopPropagation)
  - Toggles de entrega/pagamento não salvando (agora têm IDs)
  - "Ver Site de Vendas" removido do menu
  - Cardápio: template literal aninhado (erro no VS Code)
  - Webhook: não respeitava dias da semana configurados no dashboard

FUNCIONALIDADE DAS MESAS (detalhada):
  DB.mesas: array de objetos {id, num, status, cliente, abertura, itens, bloqueada}
  - status: 'livre' | 'ocupada'
  - itens: [{id, itemId, nome, preco, qty, obs, em}]
  - Persistido em localStorage sob chave 'db_mesas'
  - Padrão: 20 mesas criadas automaticamente na primeira vez

  renderMesas() → grid visual com tiles coloridos
  abrirMesa(id) → prompt nome cliente + muda status para 'ocupada'
  abrirDetalhesMesa(id) → tela de detalhe com itens + ações
  abrirSeletorProduto(id) → seletor visual por categoria
  selecionarProduto(itemId) → abre modal de obs
  confirmarItemMesa() → adiciona item em mesa.itens
  fecharContaMesa(id) → registra pedido + libera mesa
  cancelarMesa(id) → limpa itens + libera mesa

PRÓXIMO PASSO RECOMENDADO:
  Tela de pagamento completa (Conferir e Dividir) — Fase 1
  Depois: status delivery com 5 etapas + notificação WhatsApp

=======================================================================
-->

</html>