/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* ══════════════════════════════════════════════════
   MAY ADMIN — DESIGN TOKENS
   Modo Escuro (padrão) + Modo Claro
   ══════════════════════════════════════════════════ */

:root {
  /* ── Paleta Escura (padrão) ── */
  --bg:#0a0c12; --s1:#0f1118; --s2:#141820; --s3:#1a1f2c; --s4:#212739; --s5:#282f42;
  --b1:rgba(255,255,255,0.07); --b2:rgba(255,255,255,0.12); --b3:rgba(255,255,255,0.18);
  --tx:#f2f4f8; --tx2:#b8c0d4; --tx3:#8892aa; --tx4:#606880;

  /* ── Acento principal (laranja May) ── */
  --or:#E8491E; --or2:#FF6B35; --orD:rgba(232,73,30,.14); --orG:rgba(232,73,30,.3);

  /* ── Acentos semânticos (modo escuro) ── */
  --grn:#30d158; --grn-dim:rgba(48,209,88,.12); --grn-glow:rgba(48,209,88,.35);
  --ylw:#ff9f0a; --ylw-dim:rgba(255,159,10,.12); --ylw-glow:rgba(255,159,10,.3);
  --red:#ff453a; --red-dim:rgba(255,69,58,.12);  --red-glow:rgba(255,69,58,.3);
  --blu:#0a84ff; --blu-dim:rgba(10,132,255,.12); --blu-glow:rgba(10,132,255,.3);
  --pur:#bf5af2; --pur-dim:rgba(191,90,242,.12); --pur-glow:rgba(191,90,242,.3);
  --cyn:#32ade6; --cyn-dim:rgba(50,173,230,.12); --cyn-glow:rgba(50,173,230,.3);
  --pnk:#ff375f; --pnk-dim:rgba(255,55,95,.12);  --pnk-glow:rgba(255,55,95,.3);

  /* ── Topbar ── */
  --topbar-bg:rgba(10,12,18,0.97);

  /* ── Radii & Motion ── */
  --r:12px; --r2:8px;
  --tr:0.2s cubic-bezier(.4,0,.2,1);
  --sw:252px;
  /* safe-area do topo (notch/barra de status). 0 no navegador; vira env() só
     no modo app instalado — todas as regras .pg somam isto no padding-top. */
  --safe-top:0px;
}

/* ══════════════════════════════════════════════════
   SISTEMA TIPOGRÁFICO — consistente com o Dashboard
   Escala: display > heading > subheading > body > caption > micro
   ══════════════════════════════════════════════════ */

/* ── Escala base ───────────────────────────────── */
body { font-size: 14px; line-height: 1.5; }

/* Display — KPIs grandes (faturamento, totais) */
.t-display { font-size: 1.6rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }

/* Heading — títulos de seção e cards */
.t-heading { font-size: .9rem; font-weight: 700; }

/* Subheading — subtítulos e labels contextuais */
.t-sub { font-size: .78rem; font-weight: 600; }

/* Body — conteúdo padrão de tabelas e listas */
.t-body { font-size: .8rem; font-weight: 400; }

/* Caption — informações secundárias */
.t-caption { font-size: .72rem; font-weight: 400; color: var(--tx3); }

/* Micro — labels, badges, timestamps */
.t-micro { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--tx4); }

/* ── Corrigir elementos com font-size inconsistente ── */

/* Títulos de cards e painéis — unificado */
.card-t, .panel-h { font-size: .85rem; font-weight: 700; }

/* Labels de formulário */
.lbl { font-size: .62rem; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--tx4); }

/* Inputs, selects */
.inp, .sel, .txa { font-size: .82rem; }

/* Tabelas */
table { font-size: .8rem; }
table th { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--tx4); }
table td { font-size: .8rem; }

/* Badges */
.badge { font-size: .62rem; font-weight: 700; }

/* KPIs do dashboard — mantém escala display */
.crm-kpi-v, .stat-v { font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.crm-kpi-l { font-size: .6rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.crm-kpi-s { font-size: .65rem; color: var(--tx3); }

/* Botões — escala compacta e consistente */
.btn { font-size: .78rem; font-weight: 700; }
.btn-sm { font-size: .7rem; }

/* Nomes em listas/cards de produto, seção, cliente */
.acc-nm, .sec-card-name, .role-name, .pname { font-size: .85rem; font-weight: 700; }
.cl-nm { font-size: .85rem; font-weight: 700; }
.cl-tel { font-size: .7rem; color: var(--tx3); }

/* Emojis decorativos — tamanho controlado */
.acc-em, .sec-card-em { font-size: 1.1rem; }
.role-avatar { font-size: 1.1rem; }

/* Toasts */
.toast { font-size: .78rem; font-weight: 600; }

/* Modais */
.mhead h3 { font-size: .9rem; font-weight: 800; }

/* Pedidos */
.ped-num { font-size: .68rem; font-weight: 700; color: var(--tx4); }
.ped-cliente { font-size: .88rem; font-weight: 800; }
.ped-tel { font-size: .72rem; color: var(--tx3); }
.ped-total-big { font-size: 1rem; font-weight: 800; color: var(--or); }

/* Sidebar */
.sb-name { font-size: .82rem; font-weight: 800; }
.sb-btn { font-size: .78rem; }
.sb-sec { font-size: .58rem; font-weight: 700; letter-spacing: 1.6px; }



/* ── Modo Claro ────────────────────────────────────── */
[data-theme="light"] {
  --bg:#F2F2F2; --s1:#ffffff; --s2:#ffffff; --s3:#ffffff; --s4:#ebebeb; --s5:#e0e0e0;
  --b1:rgba(0,0,0,0.10); --b2:rgba(0,0,0,0.18); --b3:rgba(0,0,0,0.28);
  --tx:#1a0e08; --tx2:#3d1f10; --tx3:#6b3d28; --tx4:#9a7060;

  --or:#E8491E; --or2:#d4420f; --orD:rgba(232,73,30,.1); --orG:rgba(232,73,30,.25);

  --grn:#16a34a; --grn-dim:rgba(22,163,74,.1);  --grn-glow:rgba(22,163,74,.3);
  --ylw:#b45309; --ylw-dim:rgba(180,83,9,.1);   --ylw-glow:rgba(180,83,9,.25);
  --red:#dc2626; --red-dim:rgba(220,38,38,.1);  --red-glow:rgba(220,38,38,.25);
  --blu:#1d4ed8; --blu-dim:rgba(29,78,216,.1);  --blu-glow:rgba(29,78,216,.25);
  --pur:#6d28d9; --pur-dim:rgba(109,40,217,.1); --pur-glow:rgba(109,40,217,.25);
  --cyn:#0369a1; --cyn-dim:rgba(3,105,161,.1);  --cyn-glow:rgba(3,105,161,.25);
  --pnk:#be185d; --pnk-dim:rgba(190,24,93,.1);  --pnk-glow:rgba(190,24,93,.25);

  --topbar-bg:rgba(255,248,244,0.97);
}
html{scroll-behavior:smooth;background:var(--bg);min-height:100%}
body{font-family:'Sora',sans-serif;background:var(--bg);color:var(--tx);font-size:14px;line-height:1.5;min-height:100dvh;overflow-x:clip;padding-bottom:env(safe-area-inset-bottom,0px)}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:var(--s1)}
::-webkit-scrollbar-thumb{background:var(--s3);border-radius:4px}
button,input,select,textarea{font-family:inherit;font-size:inherit}

/* ── SIDEBAR ── */
.sb{
  position:fixed;top:0;left:0;width:var(--sw);
  height:100vh;height:100dvh;   /* dvh = altura VISÍVEL no celular (desconta a
     barra do navegador), senão o rodapé/"Sair" ficam atrás da barra. */
  background:var(--s1);border-right:1px solid var(--b1);
  display:flex;flex-direction:column;z-index:300;
  transition:transform var(--tr);
}
.sb-logo{padding:calc(16px + var(--safe-top)) 16px 16px;border-bottom:1px solid var(--b1);display:flex;align-items:center;gap:10px;min-height:58px}
.sb-icon{width:34px;height:34px;border-radius:9px;flex-shrink:0;background:linear-gradient(135deg,var(--or),var(--or2));display:flex;align-items:center;justify-content:center;font-size:1rem}
.sb-name{font-size:.85rem;font-weight:800;line-height:1.2}
.sb-sub{font-size:.65rem;color:var(--tx3);font-weight:400}
.sb-nav{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:6px 0}
.sb-sec{
  font-size:.58rem;font-weight:700;letter-spacing:1.8px;
  text-transform:uppercase;color:var(--tx4);
  padding:14px 16px 4px;
  margin-top:2px;
}
.sb-btn{
  display:flex;align-items:center;gap:8px;width:100%;padding:9px 16px;
  background:none;border:none;border-left:2px solid transparent;
  color:var(--tx2);font-size:.78rem;font-weight:500;text-align:left;
  transition:var(--tr);cursor:pointer;
}
.sb-btn:hover{color:var(--tx);background:rgba(255,255,255,.04)}
.sb-btn.on{color:var(--or);background:var(--orD);border-left-color:var(--or);font-weight:700}
.sb-btn.on .sb-ico,.sb-btn.on svg{color:var(--or)}
.sb-ico{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--tx2)}
.sb-badge{margin-left:auto;background:var(--or);color:#fff;font-size:.56rem;font-weight:800;border-radius:20px;padding:1px 6px;min-width:16px;text-align:center}
.sb-sep{height:1px;background:var(--b1);margin:8px 12px;}
.sb-foot{padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--b1);font-size:.65rem;color:var(--tx4);line-height:1.7}

/* ── Seletor de lojas (multi-loja por e-mail do dono) ─────────────── */
.dv-store-switch{position:relative;margin:14px 12px 12px}
.dv-store-cur{width:100%;display:flex;align-items:center;gap:8px;padding:9px 11px;background:var(--s2);border:1px solid var(--b1);border-radius:10px;color:var(--tx);font-family:inherit;font-size:.8rem;font-weight:700;cursor:pointer;transition:.15s;text-align:left}
.dv-store-cur:hover{border-color:var(--or);background:var(--s1)}
.dv-store-cur-ico{display:flex;align-items:center;color:var(--or);flex-shrink:0}
.dv-store-cur-nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dv-store-chev{flex-shrink:0;color:var(--tx3);transition:transform .2s}
.dv-store-switch.open .dv-store-chev{transform:rotate(180deg)}
.dv-store-menu{display:none;position:absolute;top:calc(100% + 5px);left:0;right:0;background:var(--s1);border:1px solid var(--b2);border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.5);z-index:50;padding:5px}
.dv-store-switch.open .dv-store-menu{display:block;animation:dvStoreIn .16s ease}
@keyframes dvStoreIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.dv-store-item{width:100%;display:flex;align-items:center;gap:8px;padding:9px 10px;background:none;border:none;border-radius:8px;color:var(--tx);font-family:inherit;font-size:.78rem;font-weight:600;cursor:pointer;text-align:left;transition:.12s}
.dv-store-item:hover:not(:disabled){background:var(--s2)}
/* Loja ATUAL: fundo laranja fraco (retângulo arredondado) atrás do item, com o
   NOME em preto — indica qual loja o lojista está acessando agora. */
.dv-store-item.cur{cursor:default;opacity:1;background:rgba(232,73,30,.14)}
.dv-store-item.loading{opacity:.5;cursor:wait}
.dv-store-item-nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dv-store-tag{flex-shrink:0;font-size:.56rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px;padding:2px 7px;border-radius:99px}
.dv-store-tag.on{background:rgba(232,73,30,.15);color:var(--or)}
.dv-store-tag.off{background:rgba(255,255,255,.08);color:var(--tx3)}
/* Loja suspensa: só o cadeado vermelho (sem pílula/texto) — economiza espaço. */
.dv-store-tag.lock{background:none;padding:0;border-radius:0;color:#ef4444;display:inline-flex;align-items:center;line-height:0}
/* Rodapé do menu: "Ver resumo da rede" + "Adquirir mais lojas" juntos, com UMA
   divisória acima do grupo e SEM linha entre os dois. */
.dv-store-foot{margin-top:4px;border-top:1px solid var(--b1)}
.dv-store-add{display:flex;align-items:center;gap:7px;padding:10px;color:var(--or);font-size:.75rem;font-weight:700;text-decoration:none}
.dv-store-add:hover{background:rgba(232,73,30,.08)}

/* ── MODO ENCOMENDAS (PDV Deelivu) — menu enxuto controlado pelo master ──
   .enc-only fica oculto no modo completo; só aparece quando o boot adiciona
   body.modo-encomendas (ver dvAplicarPainelModo em modo-encomendas.js).
   Botões/cabeçalhos viram flex; o container de grupo volta a block pra o
   colapso por max-height (.sb-group / .sb-group.open) funcionar normal. */
.enc-only{display:none}
/* Reforço de especificidade: .sb-group-btn/.sb-btn definem `display` MAIS
   abaixo no arquivo (mesma especificidade), então sem isto os GRUPOS .enc-only
   (PDV, Produtos, Equipe, Ferramentas) vazavam no plano completo. Este seletor
   (0,2,0) vence aqueles (0,1,0) e some com eles fora do modo encomendas. */
.sb-nav .enc-only{display:none}
body.modo-encomendas .sb-btn.enc-only,
body.modo-encomendas .sb-group-btn.enc-only{display:flex}
body.modo-encomendas .sb-group.enc-only{display:block}
/* Troca COMPLETA do menu no modo encomendas — via CSS (instantâneo). Antes a
   troca era só por JS (dvAplicarPainelModo) e rodava DEPOIS do admin_get, então
   o menu do plano completo piscava. Agora o boot adiciona body.modo-encomendas
   cedo (cache) e o CSS já esconde o completo no 1º paint. "Sair" permanece. */
/* IMPORTANTE: usa filho DIRETO (.sb-nav >) — os sub-itens dentro dos grupos
   do PDV NÃO têm .enc-only (só o grupo pai tem), então um seletor descendente
   os esconderia também (bug do submenu que não abria). O grupo do completo é
   escondido pelo container, que já leva junto os filhos. */
body.modo-encomendas .sb-nav > .sb-btn:not(.enc-only):not([onclick*="adminLogout"]),
body.modo-encomendas .sb-nav > .sb-group-btn:not(.enc-only),
body.modo-encomendas .sb-nav > .sb-group:not(.enc-only),
body.modo-encomendas .sb-nav > .sb-sec:not(.enc-only),
body.modo-encomendas .sb-nav > .sb-sep:not(.enc-only){display:none!important}
/* 1º acesso (sem cache): esconde a navegação até o servidor confirmar o modo,
   pra nunca exibir o menu do plano errado. "Sair" e rodapé continuam. */
body.dv-modo-pending .sb-nav > .sb-btn:not([onclick*="adminLogout"]),
body.dv-modo-pending .sb-nav > .sb-group-btn,
body.dv-modo-pending .sb-nav > .sb-group,
body.dv-modo-pending .sb-nav > .sb-sec,
body.dv-modo-pending .sb-nav > .sb-sep{display:none!important}

/* ── MENU: maior + status da loja + modo "rail" (só ícones) ─────────────
   Compartilhado pelos DOIS planos (completo e PDV). O lojista gostou do
   menu do PDV e pediu o mesmo no completo. */
.sb-nav .sb-btn{font-size:.9rem}
.sb-group-label{font-size:.9rem}
.sb-nav .sb-ico{width:20px;height:20px}
.sb-nav .sb-sub-btn .sb-ico{width:18px;height:18px}

/* Status da loja (aberta/fechada) no topo do menu — só INFORMAÇÃO, bem limpo
   (sem caixa/borda; só a bolinha + texto). */
.dv-enc-status{display:flex;align-items:center;gap:9px;margin:6px 16px 14px;padding:0}
.dv-enc-verloja{margin-left:auto;flex-shrink:0;display:inline-flex;align-items:center;gap:5px;padding:6px 10px;background:var(--s2);border:1px solid var(--b1);border-radius:8px;color:var(--tx);font-size:.66rem;font-weight:700;text-decoration:none;transition:.15s;white-space:nowrap}
.dv-enc-verloja:hover{border-color:var(--or);color:var(--or);background:var(--s1)}
.dv-enc-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:#ef4444;box-shadow:0 0 7px rgba(239,68,68,.65)}
.dv-enc-status.on .dv-enc-dot{background:#22c55e;box-shadow:0 0 7px rgba(34,197,94,.75)}
.dv-enc-st-lbl{font-size:.78rem;font-weight:700;color:var(--tx);line-height:1.12;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dv-enc-st-sub{font-size:.6rem;color:var(--tx4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}

/* Botão de recolher o menu (rail) — SOBREPOSTO na borda direita do menu
   (metade pra fora, metade pra dentro). Só desktop. */
.dv-enc-rail-btn{position:absolute;top:16px;right:-15px;z-index:320;width:30px;height:30px;border-radius:50%;border:1px solid var(--b1);background:var(--s2);color:var(--tx3);align-items:center;justify-content:center;cursor:pointer;transition:.15s;display:flex;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.dv-enc-rail-btn:hover{color:var(--or);border-color:var(--or)}
@media(max-width:900px){ .dv-enc-rail-btn{display:none} }

/* Modo RAIL (só ícones) — desktop. */
@media(min-width:901px){
  body.sb-rail{--sw:72px}
  body.sb-rail .sb-logo{justify-content:center;padding:14px 0}
  body.sb-rail #sb-logo-main{display:none}
  body.sb-rail .dv-enc-rail-btn svg{transform:rotate(180deg)}
  body.sb-rail .sb-btn,body.sb-rail .sb-group-btn{font-size:0;justify-content:center;padding-left:0;padding-right:0;gap:0}
  body.sb-rail .sb-ico{width:22px;height:22px}
  body.sb-rail .sb-group-label,body.sb-rail .sb-arrow,body.sb-rail .sb-badge{display:none!important}
  body.sb-rail .sb-group{display:none!important}
  /* Recolhido: esconde o status da loja e o seletor de lojas (só com menu aberto). */
  body.sb-rail .dv-enc-status,
  body.sb-rail .dv-store-switch{display:none!important}
  /* Recolhido: o grupo da ÁREA atual fica laranja (indica onde você está). */
  body.sb-rail .sb-group-btn.sb-grp-active{color:var(--or);background:var(--orD)}
  body.sb-rail .sb-group-btn.sb-grp-active .sb-ico{color:var(--or)}
}

/* Dashboard no modo encomendas (PDV): remove o painel "KPIs Operacionais" —
   ele duplica os cards do topo (Faturamento/Pedidos/Ticket/Cancelados) e traz
   métricas de CRM (Retenção) que não se aplicam (escondido via :last-child).
   A linha #dashOpsRow passa a conter "Ranking de Clientes" + "Produtos Mais
   Vendidos" lado a lado em 2 colunas (.grid2; o reordenamento dos cards é feito
   em dashboard-encomendas.js → dashEncGrid). */
body.modo-encomendas #dashOpsRow > div:last-child{display:none}
/* Filtro de período: no modo encomendas usamos o calendário Deelivu
   (js/dashboard-encomendas.js), então escondemos os chips + inputs nativos. */
body.modo-encomendas #dashPeriodBody{display:none}
/* Seletor de métrica do gráfico: usa o dropdown Deelivu; esconde o <select>
   nativo. O menu do dropdown é position:fixed (não é recortado por overflow),
   então os cards mantêm overflow:hidden — evita o gráfico vazar e empurrar a
   página no celular. */
body.modo-encomendas #dashChartMetric{display:none}
/* Trava o scroll do fundo quando há popup de encomendas aberto (ver pdv.js). */
body.dv-enc-lock{position:fixed;left:0;right:0;width:100%;overflow:hidden}
/* No celular, esconde o ícone do card de Faturamento (economiza espaço). */
@media(max-width:560px){.dash-chart-ico{display:none}}
/* Modal de nova seção no modo encomendas: sem campos do site público
   (tipo de exibição, mostrar adicionais, seção ativa) — não há cardápio online. */
body.modo-encomendas .enc-hide-secfield{display:none}

/* ── MAIN ── */
.main{margin-left:var(--sw);min-height:100vh;display:flex;flex-direction:column}
.topbar{
  position:fixed;top:0;left:var(--sw);right:0;z-index:200;
  background:var(--topbar-bg);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--b1);
  height:50px;padding:0 16px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  transition:left .25s;
}
/* iOS/PWA (app na tela inicial): empurra a topbar e o conteúdo pra baixo da
   barra de status / notch — senão os botões do topo ficam inclicáveis. O
   env() é 0 no navegador normal, então só age no modo app. */
@media (display-mode: standalone), (display-mode: fullscreen){
  /* Ativa a safe-area: a variável passa a valer o env() do iOS. Como TODAS as
     regras .pg somam var(--safe-top) no padding-top, o conteúdo desce junto
     não importa qual breakpoint vença no cascade (era esse o bug do overlap). */
  :root{ --safe-top:env(safe-area-inset-top,0px); }
  /* Desce a topbar pra baixo da barra de status. */
  .topbar{ top:env(safe-area-inset-top,0px) !important; }
  /* Fundo na faixa da barra de status (acima da topbar) — senão o conteúdo da
     página vaza por trás ao rolar. Mesmo tom da topbar (adapta ao tema). */
  body::before{ content:''; position:fixed; top:0; left:0; right:0; height:env(safe-area-inset-top,0px); background:var(--topbar-bg); backdrop-filter:blur(16px); z-index:201; pointer-events:none; }
}
/* compensate fixed topbar */
/* compensate fixed topbar — merged into .pg below */
.topbar-l{display:flex;align-items:center;gap:8px}
.ham{
  display:none;width:36px;height:36px;background:var(--s2);
  border:1px solid var(--b2);border-radius:9px;
  align-items:center;justify-content:center;
  color:var(--tx);cursor:pointer;flex-shrink:0;
}
.pg-title{font-size:.82rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.topbar-r{display:flex;align-items:center;gap:6px;flex-shrink:0}
.admin-profile-chip{display:flex;align-items:center;gap:6px;background:var(--s2);border:1px solid var(--b1);border-radius:100px;padding:4px 12px 4px 4px;cursor:pointer;transition:var(--tr);font-family:'Sora',sans-serif;font-size:.7rem;font-weight:700;color:var(--tx);flex-shrink:0}
.admin-profile-chip:hover{border-color:var(--or);background:var(--orD)}
.admin-profile-chip-av{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--or),#ff7140);color:#fff;font-size:.6rem;font-weight:900;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;background-size:cover;background-position:center}
.admin-profile-chip-nm{max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.72rem}
.save-info{font-size:.6rem;color:var(--tx3);display:flex;align-items:center;gap:4px;white-space:nowrap}
.sdot{width:5px;height:5px;border-radius:50%;background:var(--grn);flex-shrink:0}

/* ── PAGE ── */
.pg{flex:1;padding:clamp(14px,4vw,32px);padding-top:calc(clamp(14px,4vw,32px) + 54px + var(--safe-top))}
.sec{display:none}
.sec.on{display:block}

/* ── GRID HELPERS ── */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}

/* ── STAT CARDS ── */
.stat{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r);padding:16px}
.stat-l{font-size:.6rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--tx4);margin-bottom:4px}
.stat-v{font-size:1.6rem;font-weight:800;line-height:1}
.stat-s{font-size:.65rem;color:var(--tx3);margin-top:3px}

/* ── BANNER ── */
.banner{border-radius:var(--r);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;border:1px solid;flex-wrap:wrap}
.bn-o{background:rgba(34,197,94,.07);border-color:var(--grn-glow)}
.bn-c{background:rgba(239,68,68,.07);border-color:rgba(239,68,68,.2)}
.bn-l{display:flex;align-items:center;gap:10px}
.bn-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.bn-dot.g{background:var(--grn);box-shadow:0 0 7px var(--grn);animation:pulse 2s infinite}
.bn-dot.r{background:var(--red)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.bn-t{font-size:.84rem;font-weight:700}
.bn-s{font-size:.7rem;color:var(--tx2)}

/* ── CARD ── */
.card{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r);overflow:hidden;margin-bottom:16px}
.card-h{padding:10px clamp(10px,3vw,16px);border-bottom:1px solid var(--b1);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.card-t{font-size:.85rem;font-weight:700}

/* ── TABLE ── */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;min-width:400px}
th{background:var(--s2);font-size:.6rem;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--tx4);padding:9px 14px;text-align:left;border-bottom:1px solid var(--b1);white-space:nowrap}
td{padding:10px 14px;font-size:.78rem;border-bottom:1px solid var(--b1);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:rgba(255,255,255,.015)}

/* ── PRODUCT ROWS ── */
.prow{display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid var(--b1);transition:background var(--tr)}
.prow:last-child{border-bottom:none}
.prow:hover{background:var(--s2)}
.pthumb{width:38px;height:38px;border-radius:7px;background:var(--s3);flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:1rem}
.pthumb img{width:100%;height:100%;object-fit:cover}
.psdot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.psdot.on{background:var(--grn)}
.psdot.off{background:var(--s4)}
.pinfo{flex:1;min-width:0}
.pname{font-size:.8rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdesc{font-size:.68rem;color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pprice{font-size:.84rem;font-weight:800;color:var(--or);flex-shrink:0;min-width:60px;text-align:right}
.pacts{display:flex;gap:4px;flex-shrink:0}
.drag{cursor:grab;color:var(--tx4);font-size:12px;padding:0 2px;flex-shrink:0}

/* ── BADGES ── */
.badge{display:inline-flex;align-items:center;font-size:.6rem;font-weight:700;padding:2px 6px;border-radius:20px;white-space:nowrap}
.b-or{background:var(--orD);color:var(--or)}
.b-grn{background:var(--grn-dim);color:var(--grn)}
.b-red{background:var(--red-dim);color:var(--red)}
.b-gray{background:rgba(255,255,255,.07);color:var(--tx3)}
.b-ylw{background:var(--ylw-dim);color:var(--ylw)}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;border:none;border-radius:var(--r2);font-weight:600;font-size:.74rem;padding:7px 13px;transition:var(--tr);white-space:nowrap;cursor:pointer;line-height:1}
.btn-or{background:var(--or);color:#fff}
.btn-or:hover{background:var(--or2);transform:translateY(-1px)}
/* CRM tab buttons */
.perfil-tab-btn{flex:1;padding:8px 10px;border:none;background:transparent;border-radius:10px;font-family:'Sora',sans-serif;font-size:.75rem;font-weight:700;color:var(--tx3);cursor:pointer;transition:var(--tr);white-space:nowrap}
.perfil-tab-btn.active{background:var(--s1);color:var(--or);box-shadow:0 2px 8px rgba(0,0,0,.12)}
.perfil-tab-btn:not(.active):hover{background:var(--s3);color:var(--tx)}
.btn-gh{background:var(--s2);color:var(--tx2);border:1px solid var(--b2)}
.btn-gh:hover{color:var(--tx);border-color:var(--b3)}
.btn-danger{background:var(--red-dim);color:var(--red);border:1px solid rgba(239,68,68,.2)}
.btn-danger:hover{background:rgba(239,68,68,.2)}
.btn-success{background:rgba(34,197,94,.1);color:var(--grn);border:1px solid var(--grn-glow)}
.btn-success:hover{background:var(--grn-glow)}
.btn-ylw{background:rgba(245,158,11,.1);color:var(--ylw);border:1px solid rgba(245,158,11,.2)}
.btn-ylw:hover{background:rgba(245,158,11,.2)}
.btn-sm{padding:5px 8px;font-size:.68rem}
.btn-ico{width:28px;height:28px;padding:0;font-size:12px}
.btn-full{width:100%}

/* ── FORMS ── */
.fr{margin-bottom:12px}
.fr:last-child{margin-bottom:0}
.lbl{display:block;font-size:.62rem;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--tx4);margin-bottom:5px}
.inp,.sel,.txa{
  width:100%;padding:8px 10px;
  border:1px solid var(--b2);border-radius:var(--r2);
  background:var(--s2);color:var(--tx);font-size:16px;outline:none;transition:var(--tr);
}
/* Scale down text visually on desktop — iOS needs 16px minimum to avoid zoom */
@media(min-width:601px){
  .inp,.sel,.txa{ font-size:.8rem; }
}
.inp::placeholder,.txa::placeholder{color:var(--tx4)}
.inp:focus,.sel:focus,.txa:focus{border-color:var(--or);box-shadow:0 0 0 3px var(--orD)}
.sel{cursor:pointer;appearance:auto}
.sel option{background:var(--s1)}
.txa{resize:vertical;min-height:64px}
.hint{font-size:.63rem;color:var(--tx4);margin-top:4px}
.div{height:1px;background:var(--b1);margin:14px 0}

/* ── TOGGLE ── */
.tog{display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none}
.tog input{display:none}
.tog-tr{width:36px;height:20px;border-radius:20px;background:var(--s3);position:relative;transition:background var(--tr);flex-shrink:0}
.tog input:checked+.tog-tr{background:var(--or)}
.tog-th{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left var(--tr);box-shadow:0 1px 4px rgba(0,0,0,.3)}
.tog input:checked+.tog-tr .tog-th{left:18px}
.tog-l{font-size:.77rem;color:var(--tx2)}

/* ── PANEL ── */
.panel{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r);margin-bottom:16px;overflow:hidden}
.panel-h{padding:13px 16px;border-bottom:1px solid var(--b1);font-size:.85rem;font-weight:700}
.panel-b{padding:16px}

/* ── SEARCH ROW ── */
.sec-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:10px;flex-wrap:wrap}
.srch{padding:8px 11px;border:1px solid var(--b2);border-radius:var(--r2);background:var(--s2);color:var(--tx);font-size:16px;outline:none;transition:var(--tr);width:100%;max-width:260px}
/* Ícone de busca (SVG) nos campos de Produtos e Adicionais — substitui o emoji 🔍 */
#prodSrch,#extSrch{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='15'%20height='15'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%238a8f99'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='8'/%3E%3Cline%20x1='21'%20y1='21'%20x2='16.65'%20y2='16.65'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 11px center;background-size:15px 15px;padding-left:34px}
.srch::placeholder{color:var(--tx4)}
.srch:focus{border-color:var(--or);box-shadow:0 0 0 3px var(--orD)}
@media(min-width:601px){ .srch{ font-size:.78rem; } .crm-srch{ font-size:.78rem; } }

/* ── ACCORDION ── */
.acc{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r);margin-bottom:10px;overflow:hidden}
.acc-h{padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;transition:background var(--tr);flex-wrap:wrap;gap:8px}
.acc-h:hover{background:var(--s2)}
.acc-h.open{border-bottom:1px solid var(--b1)}
.acc-hl{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.acc-em{font-size:1.1rem;flex-shrink:0}
.acc-nm{font-size:.85rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc-ct{font-size:.65rem;color:var(--tx3);flex-shrink:0}
.acc-hr{display:flex;align-items:center;gap:6px;flex-shrink:0}
.acc-ar{font-size:.7rem;color:var(--tx3);transition:transform var(--tr);flex-shrink:0}
.acc-ar.open{transform:rotate(180deg)}
.acc-b{display:none}
.acc-b.open{display:block}

/* ── MODAL ── */
.modal{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.82);z-index:900;
  backdrop-filter:blur(10px);
  align-items:center;justify-content:center;
  padding:16px;overflow-y:auto;
}
.modal.on{display:flex;animation:mfade .18s ease}
@keyframes mfade{from{opacity:0}to{opacity:1}}
.mbox{
  background:var(--s1);border:1px solid var(--b2);border-radius:16px;
  width:100%;max-width:480px;
  animation:msc .22s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 28px 72px rgba(0,0,0,.65);
  margin:auto;
  position:relative;
  max-height:calc(100vh - 32px);
  display:flex;flex-direction:column;
}
@keyframes msc{from{opacity:0;transform:scale(.93)}to{opacity:1;transform:scale(1)}}
.mhead{
  padding:14px 16px 12px;border-bottom:1px solid var(--b1);
  display:flex;align-items:center;justify-content:space-between;
  border-radius:16px 16px 0 0;background:var(--s1);
  flex-shrink:0;
}
.mhead h3{font-size:.9rem;font-weight:800}
.mclose{width:26px;height:26px;background:none;border:none;color:var(--tx3);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;transition:var(--tr)}
.mclose:hover{background:var(--s3);color:var(--tx)}
.mbody{padding:14px 16px;overflow-y:auto;flex:1}
.mfoot{padding:11px 16px;border-top:1px solid var(--b1);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;border-radius:0 0 16px 16px;background:var(--s1);flex-shrink:0}

/* ── IMG UPLOAD BOX ── */
.img-upload-box{width:100%;border:2px dashed var(--b2);border-radius:var(--r2);background:var(--s2);cursor:pointer;transition:var(--tr);overflow:hidden;position:relative}
.img-upload-box:hover,.img-upload-box:active{border-color:var(--or);background:var(--orD)}
.img-upload-inner{padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:84px;text-align:center}
.img-upload-box.has-img .img-upload-inner{display:none}
.img-upload-box.has-img{border-style:solid;border-color:var(--b2)}
.img-upload-preview{width:100%;height:120px;object-fit:cover;display:block}
.img-upload-change{position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,.7);color:#fff;font-size:.65rem;font-weight:700;padding:4px 8px;border-radius:6px;pointer-events:none}

/* ── IMG PREVIEW ── */
.iprev{height:88px;border-radius:7px;background:var(--s2);overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:.7rem;color:var(--tx4);margin-top:6px}
.iprev img{width:100%;height:100%;object-fit:cover}

/* ── COLOR ── */
.crow{display:flex;align-items:center;gap:8px}
.cswatch{width:38px;height:32px;border:1px solid var(--b2);border-radius:6px;cursor:pointer;padding:2px;background:none}

/* ── DAY PILLS ── */
.day-pill{display:inline-flex;align-items:center;justify-content:center;min-width:44px;padding:6px 10px;border-radius:8px;font-size:.72rem;font-weight:700;cursor:pointer;user-select:none;border:1.5px solid var(--b2);background:var(--s2);color:var(--tx3);transition:var(--tr);line-height:1;outline:none}
.day-pill.active{background:var(--orD);border-color:var(--or);color:var(--or);font-weight:800}
.day-pill:hover{border-color:var(--b3);color:var(--tx2)}
.day-pill.closed{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.2);color:var(--red)}

/* ── EXTRAS CHECKLIST (in product modal) ── */
.ext-list{max-height:160px;overflow-y:auto;border:1px solid var(--b2);border-radius:var(--r2);background:var(--s2)}
.ext-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--b1);cursor:pointer;transition:background var(--tr)}
.ext-item:last-child{border-bottom:none}
.ext-item:hover{background:var(--s3)}
.ext-item input[type=checkbox]{accent-color:var(--or);width:14px;height:14px;flex-shrink:0;cursor:pointer}
.ext-item-name{font-size:.78rem;color:var(--tx);flex:1}
.ext-item-price{font-size:.72rem;color:var(--or);font-weight:700}

/* ── SECTION CARD (for section manager) ── */
.sec-card{background:var(--s1);border:none;border-bottom:1px solid var(--b1);border-radius:0;padding:9px 12px;display:flex;align-items:center;gap:8px;transition:background var(--tr)}
.sec-card:first-child{border-radius:var(--r) var(--r) 0 0}
.sec-card:last-child{border-bottom:none;border-radius:0 0 var(--r) var(--r)}
.sec-card:hover{background:var(--s2)}
.sec-card.drag-over{outline:2px solid var(--or)!important;background:var(--orD)!important;}
.acc.drag-over > .acc-h { border-top:3px solid var(--or)!important; background:var(--orD)!important; }
.sec-drag-handle{font-size:.85rem;color:var(--tx4);cursor:grab;flex-shrink:0}
.sec-card-em{font-size:1.1rem;flex-shrink:0}
.sec-card-info{flex:1;min-width:0;overflow:hidden}
.sec-card-name{font-size:.83rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sec-card-meta{font-size:.65rem;color:var(--tx3);margin-top:1px}
.sec-card-acts{display:flex;gap:4px;flex-shrink:0;align-items:center}
.sec-arrows{display:flex;flex-direction:column;gap:2px}
.sec-arrows .btn{padding:1px 6px;font-size:.6rem;line-height:1.5}
.sec-arrows .btn:disabled{opacity:.25;cursor:default}
.sec-desktop-only{display:flex}
.sec-mobile-only{display:none}
@media(max-width:700px){
  .sec-desktop-only{display:none!important}
  .sec-mobile-only{display:flex!important}
}
@media(max-width:480px){
  .sec-card{padding:7px 10px;gap:6px}
  .sec-card-name{font-size:.76rem}
  .sec-card-meta{font-size:.59rem}
  .sec-card-acts{gap:3px}
  .sec-card-em{font-size:.9rem}
  .sec-arrows .btn{padding:1px 5px;font-size:.55rem;line-height:1.4}
  .sec-card-info{min-width:0;max-width:calc(100vw - 160px)}
}

/* ── TOAST ── */
/* Empilham num container fixo ao lado do botão de ajuda (?), sem sobrepor */
#dvToastWrap{position:fixed;right:90px;bottom:22px;z-index:99965;display:flex;flex-direction:column-reverse;gap:10px;align-items:flex-end;pointer-events:none;max-width:min(360px,calc(100vw - 110px))}
.toast{display:flex;align-items:center;gap:11px;padding:11px 15px 11px 12px;border-radius:14px;font-size:.8rem;font-weight:700;line-height:1.35;color:var(--tx);background:var(--s1);border:1px solid var(--b1);box-shadow:0 14px 36px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.22);animation:tsl .28s cubic-bezier(.34,1.56,.64,1);pointer-events:auto;max-width:100%}
.toast .tico{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.toast .tico svg{width:15px;height:15px}
.toast .tmsg{min-width:0;word-break:break-word}
.t-ok .tico{background:rgba(34,197,94,.16);color:#22c55e}
.t-err .tico{background:rgba(239,68,68,.16);color:#ef4444}
.t-inf .tico{background:var(--orD,rgba(232,73,30,.12));color:var(--or)}
@keyframes tsl{from{opacity:0;transform:translateX(14px) scale(.96)}to{opacity:1;transform:translateX(0) scale(1)}}
@media(max-width:560px){#dvToastWrap{right:84px;bottom:20px;max-width:calc(100vw - 100px)}}

/* ── LOGOUT no sidebar ── */
.btn-logout{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 10px;border-radius:var(--r2);
  background:rgba(239,68,68,.08);color:rgba(252,165,165,.7);
  border:1px solid rgba(239,68,68,.15);
  font-size:.68rem;font-weight:600;cursor:pointer;
  transition:var(--tr);white-space:nowrap;
  font-family:'Sora',sans-serif;
}
.btn-logout:hover{background:rgba(239,68,68,.16);color:#fca5a5;border-color:rgba(239,68,68,.3)}
/* Sair no sidebar */
.sb-btn-logout{
  color:rgba(252,165,165,.65)!important;
  border-left-color:transparent!important;
  margin-top:4px;
}
.sb-btn-logout:hover{
  background:rgba(239,68,68,.10)!important;
  color:#fca5a5!important;
}

/* ════ LOGS ════ */
#pg-logs{padding:20px}
.logs-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.logs-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.log-badge-new{display:inline-flex;align-items:center;gap:4px;background:var(--red-dim);color:var(--red);border:1px solid rgba(239,68,68,.2);border-radius:20px;padding:3px 8px;font-size:.62rem;font-weight:700}
/* Tabela de logs */
.logs-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.logs-tbl{width:100%;border-collapse:collapse;font-size:.76rem}
.logs-tbl th{padding:9px 12px;text-align:left;font-size:.58rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--tx4);border-bottom:1px solid var(--b1);white-space:nowrap;background:var(--s1)}
.logs-tbl td{padding:10px 12px;border-bottom:1px solid var(--b1);vertical-align:middle;color:var(--tx2)}
.logs-tbl tr:last-child td{border-bottom:none}
.logs-tbl tr:hover td{background:rgba(255,255,255,.02)}
/* Colunas */
.log-col-time{white-space:nowrap;font-size:.7rem;color:var(--tx3);min-width:130px}
.log-col-user{min-width:90px}
.log-col-action{min-width:100px}
.log-col-detail{color:var(--tx);max-width:340px}
.log-col-page{min-width:90px}
/* Badges de ação */
.log-action{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:20px;font-size:.6rem;font-weight:800;white-space:nowrap}
.log-action.add{background:var(--grn-dim);color:var(--grn);border:1px solid var(--grn-glow)}
.log-action.edit{background:var(--orD);color:var(--or);border:1px solid rgba(232,73,30,.2)}
.log-action.del{background:var(--red-dim);color:var(--red);border:1px solid rgba(239,68,68,.15)}
.log-action.login{background:rgba(147,197,253,.1);color:#93c5fd;border:1px solid rgba(147,197,253,.2)}
.log-action.config{background:rgba(245,158,11,.1);color:var(--ylw);border:1px solid rgba(245,158,11,.2)}
.log-action.publish{background:rgba(168,85,247,.12);color:#c084fc;border:1px solid rgba(168,85,247,.2)}
/* User pill */
.log-user{display:inline-flex;align-items:center;gap:4px;font-size:.7rem;font-weight:700;color:var(--tx)}
.log-user-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
/* Detail truncate */
.log-detail{font-size:.73rem;color:var(--tx);line-height:1.4;max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.log-detail-full{white-space:normal;overflow:visible;text-overflow:unset;cursor:pointer}
/* Stats topo dos logs */
.logs-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.log-stat{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r);padding:12px 14px}
.log-stat-v{font-size:1.3rem;font-weight:800;line-height:1;margin-bottom:2px}
.log-stat-l{font-size:.58rem;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--tx4)}
/* Empty state */
.logs-empty{text-align:center;padding:52px 20px;color:var(--tx4)}
.logs-empty-ico{font-size:2.5rem;margin-bottom:10px}
.logs-empty-t{font-size:.9rem;font-weight:700;color:var(--tx3);margin-bottom:4px}
/* Paginação */
.logs-pager{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 0 4px;flex-wrap:wrap}
.logs-pg-btn{padding:5px 10px;border-radius:var(--r2);background:var(--s2);border:1px solid var(--b2);color:var(--tx2);font-size:.7rem;cursor:pointer;transition:var(--tr);font-family:'Sora',sans-serif}
.logs-pg-btn:hover,.logs-pg-btn.on{background:var(--orD);border-color:var(--or);color:var(--or)}
/* Responsive logs */
/* Log card layout for mobile — shows ALL info */
.log-card{display:none;background:var(--s2);border:1px solid var(--b1);border-radius:var(--r2);padding:10px 12px;margin-bottom:6px}
.log-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px}
.log-card-time{font-size:.65rem;color:var(--tx4)}
.log-card-detail{font-size:.73rem;color:var(--tx);line-height:1.4;margin-top:3px}
.log-card-page{font-size:.62rem;color:var(--tx4);margin-top:3px}
@media(max-width:600px){
  #pg-logs{padding:12px}
  .logs-stats{grid-template-columns:1fr 1fr;gap:8px}
  .logs-topbar{gap:8px;flex-direction:column;align-items:stretch}
  .logs-filters{gap:6px;width:100%}
  .logs-filters select,.logs-filters input{flex:1;min-width:0;width:100%}
  /* Trocar tabela por cards no mobile */
  .logs-table-wrap table{display:none}
  .log-card{display:block}
  .logs-table-wrap{overflow-x:unset}
}
@media(max-width:400px){
  .logs-stats{grid-template-columns:1fr 1fr}
  .log-stat{padding:10px}
  .log-stat-v{font-size:1.1rem}
}
.usr-tag{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 8px;border-radius:var(--r2);
  background:var(--orD);border:1px solid rgba(232,73,30,.2);
  font-size:.62rem;font-weight:700;color:var(--or);
  white-space:nowrap;max-width:80px;overflow:hidden;text-overflow:ellipsis;
}
/* ── MOBILE OVERLAY ── */
.mob-ovl{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:399}
.mob-ovl.on{display:block}

/* ── RESPONSIVE ── */
/* Tablet (≤900px): sidebar hidden by default */
@media(max-width:900px){
  :root{--sw:0px}
  .sb{transform:translateX(-260px);width:260px;position:fixed;top:0;left:0;height:100vh;height:100dvh;z-index:400}
  .sb.open{transform:translateX(0)}
  .main{margin-left:0}
  .pg{padding:14px;padding-top:calc(14px + 54px + var(--safe-top))}
  .ham{display:flex}
  .save-info{display:none}
  .topbar-r .btn-gh{display:none}
  .topbar{left:0 !important}
}

/* Mobile (≤600px) */
@media(max-width:600px){
  .pg{padding:12px;padding-top:calc(12px + 46px + var(--safe-top))}
  .topbar{padding:0 10px;height:46px;left:0 !important}
  .grid2,.grid3{grid-template-columns:1fr}
  /* grid4 e crm-kpis: 2x2, idênticos ao Dashboard */
  .grid4,.crm-kpis{grid-template-columns:1fr 1fr!important;gap:10px;margin-bottom:14px}
  .sec-row{flex-direction:column;align-items:stretch}
  .srch{max-width:100%}
  .prow{gap:6px;padding:8px 10px;flex-wrap:nowrap}
  .pprice{min-width:48px;font-size:.76rem;flex-shrink:0}
  .pacts{gap:3px;flex-shrink:0;display:flex}
  .btn-ico{width:26px;height:26px;font-size:11px}
  /* Modal: bottom-sheet no mobile */
  .modal{align-items:flex-end;padding:0}
  .mbox{
    margin:0;border-radius:16px 16px 0 0;
    position:fixed;bottom:0;left:0;right:0;
    max-width:100%;max-height:90vh;
    overflow:hidden;
    animation:mslide .22s ease;
    display:flex;flex-direction:column;
  }
  .mbody{overflow-y:auto;-webkit-overflow-scrolling:touch}
  /* Modo encomendas: bottom-sheet um pouco menor, deixa ver o topo da tela */
  body.modo-encomendas .mbox{max-height:82vh}
  /* Detalhe da encomenda (#pdvVer) e popups #pdvDel sobem de baixo em qualquer
     página (regra global; os overlays têm estilo inline, só faltava o mobile). */
  #pdvVer,#pdvDel{align-items:flex-end!important;padding:0!important}
  #pdvVer>div,#pdvDel>div{max-width:100%!important;width:100%!important;border-radius:16px 16px 0 0!important;max-height:88vh!important;animation:mslide .22s ease}
  @keyframes mslide{from{transform:translateY(100%)}to{transform:translateY(0)}}
  .mhead{border-radius:16px 16px 0 0}
  .mfoot{flex-direction:column-reverse;border-radius:0}
  .mfoot .btn{width:100%;justify-content:center}
  /* Coupon modal grid → stack */
  #couponModal .grid2{grid-template-columns:1fr}
  /* CRM: filtros e lista */
  .crm-filter-bar{padding:10px}
  .crm-frow{gap:6px}
  .crm-selects-row{gap:6px;flex-wrap:wrap}
  .crm-sel-wrap{min-width:calc(50% - 3px)}
  .crm-srch{width:100%}
  .client-grid{grid-template-columns:1fr;gap:8px}
  .cl-card{padding:12px 14px}
  .cl-modal-grid{grid-template-columns:1fr 1fr;gap:6px}
  .cl-modal-sv{font-size:.85rem}
  .cl-hist{max-height:140px}
  .rank-list-crm .rank-item-crm{padding:8px 10px}
  .bar-chart-crm{height:140px}
  .bc-lbl{font-size:.48rem}
  .hbar-crm .hb-track{width:45px}
  #pg-crm .grid2{grid-template-columns:1fr}
}

/* Very small (≤400px) */
@media(max-width:400px){
  .grid4,.crm-kpis{grid-template-columns:1fr 1fr}
  .stat-v{font-size:1.3rem}
  .crm-kpi-v{font-size:1.1rem}
  .pthumb{width:32px;height:32px;font-size:.85rem}
  .pname{font-size:.75rem}
  .pdesc{display:none}
  .drag{display:flex;min-width:28px;min-height:28px;align-items:center;justify-content:center;font-size:1rem;color:var(--tx4);touch-action:none;-webkit-user-select:none;user-select:none}
  .badge{display:none}
}

/* ════ CRM RESPONSIVO ════ */

/* ── Estrutura base dos filtros ── */
.crm-filter-bar{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;padding:14px 16px;background:var(--s1);border:1px solid var(--b1);border-radius:var(--r)}
.crm-frow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.crm-selects-row{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}
.crm-sel-wrap{display:flex;flex-direction:column;gap:4px;flex:1;min-width:100px}
.crm-sel-wrap .crm-filter-lbl{display:block!important;font-size:.65rem;font-weight:700;color:var(--tx4);text-transform:uppercase;letter-spacing:.5px}
.crm-filter-lbl{font-size:.65rem;font-weight:700;color:var(--tx4);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
.crm-sel-wrap .crm-sel{width:100%}
.crm-count{font-size:.68rem;color:var(--tx3);padding:6px 10px;background:var(--s2);border-radius:var(--r2);white-space:nowrap;align-self:flex-end}

/* ════ CRM STYLES ════ */
/* CRM KPIs: base desktop 4 colunas — vem ANTES das media queries */
.crm-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.crm-kpi{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r);padding:16px;position:relative;overflow:hidden;cursor:default;transition:border-color var(--tr)}
.crm-kpi-text{display:contents}
.crm-kpi:hover{border-color:var(--b2)}
.crm-kpi::after{content:attr(data-ico);position:absolute;right:12px;top:10px;font-size:1.8rem;opacity:.10;pointer-events:none}
.crm-kpi-v{font-size:1.6rem;font-weight:800;line-height:1;margin-bottom:4px}

/* Tablet (≤900px): 2x2 */
@media(max-width:900px){
  .crm-kpis{grid-template-columns:1fr 1fr}
  .cl-modal-grid{grid-template-columns:1fr 1fr}
  .msg-templates{grid-template-columns:1fr}
  .crm-filter-sep{display:none}
  .hb-track{width:55px}
  .grid2{grid-template-columns:1fr}
  .client-grid{grid-template-columns:1fr}
}
.crm-kpi-l{font-size:.6rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--tx4)}
.crm-kpi-s{font-size:.65rem;color:var(--tx3);margin-top:3px}
.crm-kpi.c-or .crm-kpi-v{color:var(--or)}
.crm-kpi.c-grn .crm-kpi-v{color:var(--grn)}
.crm-kpi.c-ylw .crm-kpi-v{color:var(--ylw)}
.crm-kpi.c-red .crm-kpi-v{color:var(--red)}
.crm-kpi.c-blu .crm-kpi-v{color:#4A90E2}

/* Filtros */
/* crm-filter-bar: ver acima no bloco CRM RESPONSIVO */
.crm-filter-group{display:flex;align-items:center;gap:6px;flex-wrap:wrap;width:100%}
.crm-filter-sep{width:1px;height:20px;background:var(--b2);flex-shrink:0;margin:0 4px}
.crm-filter-lbl{font-size:.6rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--tx4);white-space:nowrap}
.crm-srch{background:var(--s2);border:1px solid var(--b2);border-radius:var(--r2);color:var(--tx);font-family:inherit;font-size:16px;padding:7px 11px;outline:none;transition:border-color var(--tr);width:100%;box-sizing:border-box}
.crm-srch:focus{border-color:var(--or);box-shadow:0 0 0 3px var(--orD)}
.crm-srch::placeholder{color:var(--tx4)}
.crm-sel{background:var(--s2);border:1px solid var(--b2);border-radius:var(--r2);color:var(--tx2);font-family:inherit;font-size:.72rem;padding:6px 10px;outline:none;cursor:pointer;transition:border-color var(--tr)}
.crm-sel:focus{border-color:var(--or)}
.crm-sel option{background:var(--s1)}
.filt{padding:6px 11px;background:var(--s2);border:1px solid var(--b1);border-radius:var(--r2);color:var(--tx3);font-size:.7rem;font-weight:600;cursor:pointer;transition:all var(--tr);white-space:nowrap}
.filt:hover{color:var(--tx);border-color:var(--b2)}
.filt.on{background:var(--orD);border-color:var(--or);color:var(--or)}
.crm-count{font-size:.68rem;color:var(--tx3);padding:6px 8px;background:var(--s2);border-radius:var(--r2);white-space:nowrap}

/* Cards */
.client-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.cl-card{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r);padding:14px 16px;cursor:pointer;transition:all var(--tr);display:flex;flex-direction:column;gap:9px;position:relative}
.cl-card:hover{border-color:var(--or);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.35)}
.cl-head{display:flex;align-items:center;gap:10px}
.cl-av{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:800}
.cl-nm{font-size:.85rem;font-weight:700;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-tel{font-size:.67rem;color:var(--tx3)}
.cl-stats-row{display:flex;gap:10px}
.cl-st{flex:1;display:flex;flex-direction:column;gap:1px}
.cl-st-v{font-size:.9rem;font-weight:800;color:var(--tx);line-height:1}
.cl-st-l{font-size:.58rem;color:var(--tx4)}
.cl-foot{display:flex;align-items:center;justify-content:space-between;padding-top:8px;border-top:1px solid var(--b1)}
.cl-fav{font-size:.65rem;color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
.cl-wpp{width:26px;height:26px;background:var(--grn-dim);border:1px solid var(--grn-glow);color:var(--grn);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;flex-shrink:0;transition:background var(--tr)}
.cl-wpp:hover{background:rgba(34,197,94,.25)}

/* Ranking */
.rank-list-crm{display:flex;flex-direction:column;gap:7px}
.rank-item-crm{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--s2);border-radius:var(--r2);cursor:pointer;transition:all var(--tr);border:1px solid transparent}
.rank-item-crm:hover{background:var(--s3);border-color:var(--b1)}
.rank-pos-crm{width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:800;flex-shrink:0}
.rk-1{background:linear-gradient(135deg,#FFB800,#FFD960);color:#7A4F00}
.rk-2{background:linear-gradient(135deg,#9CA3AF,#D1D5DB);color:#374151}
.rk-3{background:linear-gradient(135deg,#C2763C,#E8956C);color:#fff}
.rk-n{background:var(--s3);color:var(--tx3)}
.rank-name-crm{font-size:.78rem;font-weight:600;color:var(--tx);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-sub-crm{font-size:.63rem;color:var(--tx3)}
.rank-val-crm{font-size:.88rem;font-weight:800;color:var(--or);flex-shrink:0}

/* Bar chart */
.bar-chart-crm{display:flex;align-items:flex-end;gap:3px;height:180px;padding-top:4px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;position:relative}
.bar-chart-crm::-webkit-scrollbar{display:none}
.bcc{flex:1;min-width:20px;display:flex;flex-direction:column;align-items:center;gap:3px;height:100%;position:relative}
.bc-fill{width:100%;border-radius:4px 4px 0 0;min-height:4px;position:relative;cursor:pointer;transition:height .3s ease,opacity .15s;margin-top:auto}
.bc-fill:hover{opacity:.85}
@media(min-width:601px){
  .bc-fill::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);background:var(--s2);color:var(--or);font-size:.62rem;padding:3px 8px;border-radius:5px;white-space:nowrap;z-index:20;font-weight:700;pointer-events:none;opacity:0;transition:opacity .15s;border:1px solid var(--b2)}
  .bc-fill:hover::after{opacity:1}
}
.bc-lbl{font-size:.55rem;color:var(--tx4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;text-align:center;flex-shrink:0}

/* H-bar */
.hbar-crm{display:flex;flex-direction:column;gap:9px}
.hb-item{display:flex;align-items:center;gap:8px}
.hb-rk{font-size:.62rem;color:var(--tx4);width:14px;text-align:center;flex-shrink:0;font-weight:700}
.hb-nm{font-size:.75rem;color:var(--tx2);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb-track{width:80px;height:4px;background:var(--s3);border-radius:2px;flex-shrink:0}
.hb-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--or),var(--or2))}
.hb-val{font-size:.68rem;font-weight:700;color:var(--tx3);width:26px;text-align:right;flex-shrink:0}

/* KPI rows */
.kpi-row{display:flex;flex-direction:column}
.kpi-line{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--b1)}
.kpi-line:last-child{border-bottom:none}
.kpi-lbl{font-size:.75rem;color:var(--tx2)}
.kpi-val{font-size:.75rem;font-weight:700;color:var(--tx)}

/* Badge tipo cliente */
.b-vip{background:var(--ylw-dim);color:var(--ylw);border:1px solid rgba(245,158,11,.2)}
.b-recorr{background:var(--grn-dim);color:var(--grn);border:1px solid var(--grn-glow)}
.b-novo{background:rgba(74,144,226,.12);color:#4A90E2;border:1px solid rgba(74,144,226,.2)}
.b-inativo{background:var(--red-dim);color:var(--red);border:1px solid rgba(239,68,68,.15)}
.b-lead{background:var(--pur-dim);color:#8b5cf6;border:1px solid rgba(139,92,246,.2)}

/* Status pedido */
.st-novo{background:rgba(74,144,226,.12);color:#4A90E2}
.st-confirmado{background:var(--grn-dim);color:var(--grn)}
.st-preparando{background:var(--ylw-dim);color:var(--ylw)}
.st-saiu{background:rgba(232,73,30,.12);color:var(--or)}
.st-entregue{background:var(--grn-dim);color:var(--grn)}
.st-cancelado{background:var(--red-dim);color:var(--red)}

/* Modal CRM cliente */
.cl-modal-hero{display:flex;align-items:center;gap:14px;padding:14px;background:var(--s2);border-radius:var(--r2);border:1px solid var(--b1);margin-bottom:14px}
.cl-modal-av{width:52px;height:52px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:800}
.cl-modal-nm{font-size:1rem;font-weight:800;color:var(--tx);line-height:1.2}
.cl-modal-contact{font-size:.7rem;color:var(--tx3);margin-top:3px}
.cl-modal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.cl-modal-stat{background:var(--s2);border:1px solid var(--b1);border-radius:var(--r2);padding:10px;text-align:center}
.cl-modal-sv{font-size:.95rem;font-weight:800;color:var(--tx)}
.cl-modal-sl{font-size:.58rem;color:var(--tx4);margin-top:2px}
.cl-hist{display:flex;flex-direction:column;gap:5px;max-height:190px;overflow-y:auto}
.cl-hist-item{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;background:var(--s2);border-radius:var(--r2);gap:8px}
.cl-hist-itens{font-size:.72rem;color:var(--tx);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-hist-dt{font-size:.62rem;color:var(--tx3)}
.cl-hist-v{font-size:.78rem;font-weight:800;color:var(--or);flex-shrink:0}
.cl-sec-lbl{font-size:.6rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--tx4);margin:12px 0 6px}

/* Modal mensagem */
.msg-templates{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px}
.msg-tpl{background:var(--s2);border:1px solid var(--b2);border-radius:var(--r2);padding:8px 10px;cursor:pointer;font-size:.72rem;color:var(--tx2);transition:all var(--tr);text-align:left}
.msg-tpl:hover{border-color:var(--or);color:var(--tx);background:var(--s3)}
.msg-tpl.sel{border-color:var(--or);background:var(--orD);color:var(--or)}
.msg-tpl-icon{font-size:1rem;display:block;margin-bottom:3px}
.msg-tpl-txt{font-weight:600}


/* ════ DESTAQUES ════ */
.dest-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:10px;flex-wrap:wrap}
.dest-info{font-size:.72rem;color:var(--tx3);padding:10px 14px;background:var(--s2);border-radius:var(--r2);border:1px solid var(--b1);margin-bottom:16px;line-height:1.6}
.dest-pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:14px;max-height:420px;overflow-y:auto;padding:2px}
.dest-pick-card{background:var(--s2);border:1.5px solid var(--b1);border-radius:var(--r2);display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;transition:all var(--tr);user-select:none}
.dest-pick-card:hover{border-color:var(--b3)}
.dest-pick-card.sel{border-color:var(--or);background:var(--orD)}
.dest-pick-thumb{width:38px;height:38px;border-radius:6px;background:var(--s3);flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.dest-pick-thumb img{width:100%;height:100%;object-fit:cover}
.dest-pick-name{font-size:.78rem;font-weight:600;color:var(--tx);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dest-pick-price{font-size:.72rem;color:var(--or);font-weight:700;flex-shrink:0}
.dest-pick-chk{width:18px;height:18px;border-radius:5px;border:2px solid var(--b2);background:var(--s1);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.65rem;transition:all var(--tr)}
.dest-pick-card.sel .dest-pick-chk{background:var(--or);border-color:var(--or);color:#fff}
.dest-preview{display:flex;gap:12px;overflow-x:auto;padding:14px;background:var(--s2);border-radius:var(--r2);border:1px solid var(--b1);margin-bottom:14px;min-height:110px;align-items:center;scroll-snap-type:x mandatory}
.dest-preview::-webkit-scrollbar{height:3px}
.dest-preview-card{flex-shrink:0;width:140px;scroll-snap-align:start;background:linear-gradient(135deg,var(--s3),var(--s4));border:1px solid var(--b2);border-radius:10px;overflow:hidden;position:relative}
.dest-preview-card-img{width:100%;height:80px;object-fit:cover;display:block}
.dest-preview-card-img-ph{width:100%;height:80px;display:flex;align-items:center;justify-content:center;font-size:2rem;background:var(--s3)}
.dest-preview-card-body{padding:7px 9px}
.dest-preview-card-nm{font-size:.68rem;font-weight:700;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dest-preview-card-pr{font-size:.72rem;color:var(--or);font-weight:800}
.dest-preview-card-or{position:absolute;top:5px;left:5px;background:var(--or);color:#fff;font-size:.55rem;font-weight:800;border-radius:5px;padding:2px 5px}
.dest-preview-empty{color:var(--tx4);font-size:.78rem;text-align:center;flex:1}
.dest-sec-lbl{font-size:.6rem;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--tx4);margin-bottom:8px}
.dest-config-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.dest-config-row .fr{flex:1;min-width:130px;margin-bottom:0}
/* ── ROLES / CARGOS ── */
#pg-roles{padding:20px}
.roles-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.roles-topbar-info{}
.roles-topbar-sub{font-size:.75rem;color:var(--tx3)}
.roles-topbar-actions{display:flex;gap:8px;flex-shrink:0}

.roles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-bottom:20px}
.role-card{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r);overflow:hidden;transition:border-color var(--tr);display:flex;flex-direction:column}
.role-card:hover{border-color:var(--b2)}
.role-card.admin-card{border-color:rgba(232,73,30,.3)}
.role-card-head{padding:14px 16px;border-bottom:1px solid var(--b1);display:flex;align-items:center;gap:10px}
.role-avatar{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;flex-shrink:0}
.role-info{flex:1;min-width:0}
.role-name{font-size:.9rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.role-users{font-size:.65rem;color:var(--tx3);margin-top:1px}
.role-card-body{padding:12px 16px;flex:1}
.role-perms{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.role-perm-tag{display:inline-flex;align-items:center;gap:3px;font-size:.58rem;font-weight:700;padding:3px 7px;border-radius:20px;background:var(--orD);color:var(--or);border:1px solid rgba(232,73,30,.2)}
.role-perm-tag.denied{background:rgba(255,255,255,.04);color:var(--tx4);border-color:var(--b1)}
.role-perm-tag.full{background:rgba(34,197,94,.1);color:var(--grn);border-color:var(--grn-glow)}
.role-card-foot{padding:10px 16px;border-top:1px solid var(--b1);display:flex;gap:6px;justify-content:flex-end}
.role-locked{font-size:.65rem;color:var(--tx4);display:flex;align-items:center;gap:4px;padding:10px 16px;border-top:1px solid var(--b1)}

/* Modal de cargos */
.perm-section{margin-bottom:16px}
.perm-section-title{font-size:.6rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--tx4);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.perm-section-title::after{content:'';flex:1;height:1px;background:var(--b1)}
.perm-rows{display:flex;flex-direction:column;gap:4px}
.perm-row{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--r2);background:var(--s2);border:1px solid transparent;transition:var(--tr);flex-wrap:wrap}
.perm-row:hover{border-color:var(--b1)}
.perm-row-ico{font-size:.95rem;flex-shrink:0;width:22px;text-align:center}
.perm-row-info{flex:1;min-width:120px}
.perm-row-label{font-size:.78rem;font-weight:600}
.perm-row-desc{font-size:.62rem;color:var(--tx3);margin-top:1px}
.perm-row-ctrl{display:flex;gap:3px;flex-shrink:0;flex-wrap:wrap}
.perm-btn{padding:4px 7px;border-radius:6px;font-size:.6rem;font-weight:700;border:1px solid;cursor:pointer;transition:var(--tr);font-family:'Sora',sans-serif;line-height:1;white-space:nowrap}
.perm-btn.none{background:rgba(255,255,255,.04);color:var(--tx4);border-color:var(--b1)}
.perm-btn.none.active{background:var(--red-dim);color:var(--red);border-color:rgba(239,68,68,.25)}
.perm-btn.view{background:rgba(255,255,255,.04);color:var(--tx4);border-color:var(--b1)}
.perm-btn.view.active{background:rgba(147,197,253,.1);color:#93c5fd;border-color:rgba(147,197,253,.25)}
.perm-btn.edit{background:rgba(255,255,255,.04);color:var(--tx4);border-color:var(--b1)}
.perm-btn.edit.active{background:var(--orD);color:var(--or);border-color:rgba(232,73,30,.3)}
.perm-btn.full{background:rgba(255,255,255,.04);color:var(--tx4);border-color:var(--b1)}
.perm-btn.full.active{background:rgba(34,197,94,.1);color:var(--grn);border-color:var(--grn-glow)}

.role-user-list{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.role-user-row{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--s2);border-radius:var(--r2);border:1px solid var(--b1)}
.role-user-avatar{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:800;flex-shrink:0}
.role-user-name{flex:1;font-size:.75rem;font-weight:600}
.role-user-login{font-size:.62rem;color:var(--tx3)}
.color-swatches{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.color-swatch-opt{width:28px;height:28px;border-radius:7px;cursor:pointer;border:2px solid transparent;transition:var(--tr);display:flex;align-items:center;justify-content:center;font-size:.7rem;color:#fff;font-weight:800}
.color-swatch-opt.sel{border-color:var(--tx);transform:scale(1.1)}

/* Pass reveal */
.pass-wrap{position:relative}
.pass-wrap .inp{padding-right:38px}
.pass-eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--tx3);cursor:pointer;font-size:.85rem;padding:4px;line-height:1;transition:color var(--tr)}
.pass-eye:hover{color:var(--tx)}

/* Responsive roles */
@media(max-width:600px){
  #pg-roles{padding:12px}
  .roles-topbar{gap:8px}
  .roles-topbar-actions{gap:6px}
  .roles-grid{grid-template-columns:1fr}
  .perm-row{gap:6px}
  .perm-row-ctrl{width:100%;justify-content:flex-end;margin-top:4px}
  .perm-btn{padding:5px 8px;font-size:.62rem}
  .role-card-head{padding:12px}
  .role-card-body{padding:10px 12px}
}

/* ════ RESPONSIVIDADE GLOBAL MOBILE ════ */
@media(max-width:900px){
  /* Topbar compacto */
  .topbar-r .save-info{display:none}
  /* Tabelas responsivas */
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:480px}
  /* Cards e grids de configuração */
  .grid2{grid-template-columns:1fr 1fr}
  .grid3{grid-template-columns:1fr 1fr}
  /* Seção de store */
  #pg-store .grid2{grid-template-columns:1fr}
  /* Seção hero */
  #pg-hero .grid2{grid-template-columns:1fr}
  /* Destaques preview */
  .dest-preview-wrap{flex-wrap:wrap}
  /* Pedidos CRM */
  .pedidos-tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

@media(max-width:600px){
  /* Topbar: ocultar "Ver loja" e compactar botões */
  .topbar-r .btn-gh{display:none}
  .btn-logout{padding:6px 10px;font-size:.72rem}
  .btn-logout span{display:none}
  /* Publicar compacto */
  .topbar-r .btn-or.btn-sm{padding:6px 10px;font-size:.72rem}

  /* Loja & Status */
  #pg-store .fr{flex-direction:column;align-items:stretch}
  #pg-store .fr .lbl{margin-bottom:2px}
  #pg-store .grid2{grid-template-columns:1fr}
  #pg-store .grid3{grid-template-columns:1fr}
  .days-row{flex-wrap:wrap;gap:6px}
  .day-btn{flex:1;min-width:calc(25% - 6px);text-align:center;font-size:.7rem;padding:7px 4px}

  /* Entrega & Pagamento */
  #pg-delivery .fr, #pg-payment .fr{flex-direction:column;align-items:stretch}
  #pg-delivery .grid2{grid-template-columns:1fr}
  #pg-payment .grid2{grid-template-columns:1fr}

  /* Cupons */
  #pg-coupons .sec-row{flex-direction:column}
  #pg-coupons .grid2{grid-template-columns:1fr}

  /* Seções */
  .sec-card{flex-direction:row;align-items:center;}
  .sec-card-acts{width:auto;justify-content:flex-end}

  /* Produtos */
  #pg-products .sec-row{flex-direction:column;gap:8px}
  #pg-products .srch{max-width:100%;width:100%}
  .acc-head{padding:10px 12px;gap:8px}
  .prow{flex-wrap:nowrap}
  .pname{font-size:.75rem}
  .pdesc{display:none}
  .pprice{min-width:44px;font-size:.75rem}

  /* Hero */
  #pg-hero .fr{flex-direction:column}
  #pg-hero .grid2{grid-template-columns:1fr}
  .img-upload-box{min-height:100px}

  /* Configurações */
  #pg-settings .fr{flex-direction:column;align-items:stretch}
  #pg-settings .grid2{grid-template-columns:1fr}

  /* CRM – tabela de pedidos responsiva */
  #pg-pedidos-crm .tbl-wrap{overflow-x:auto}
  #pg-pedidos-crm table{min-width:560px}

  /* Destaques */
  #pg-destaques .fr{flex-direction:column;align-items:stretch}
  .dest-pick-list{max-height:220px}

  /* Tabelas: mostrar apenas colunas essenciais */
  table th:nth-child(n+4):not(:last-child),
  table td:nth-child(n+4):not(:last-child){display:none}
  #pg-pedidos-crm table th,
  #pg-pedidos-crm table td{display:table-cell!important}

  /* Cards de permissão */
  .perm-row-ctrl{gap:4px}
  .perm-btn{padding:5px 6px;font-size:.6rem}
}

@media(max-width:400px){
  .topbar { height:44px; padding:0 8px; }
  .pg-title { font-size:.72rem; max-width:90px; }
  .ham { width:28px; height:28px; font-size:12px; }
  .usr-tag { display:none; }
  .topbar-r{gap:4px}
  .topbar-r .btn-or.btn-sm { padding:4px 7px; font-size:.6rem; }
  .day-btn{min-width:calc(50% - 6px)}
  .perm-row-ctrl{flex-wrap:wrap}
}

/* ════ RESPONSIVE COMPLETO — FIX GLOBAL ════════════════════════
   Cobre todos os módulos em todas as telas (mobile-first).
════════════════════════════════════════════════════════════════ */

/* Globals — previne overflow horizontal */
html, body { overflow-x:hidden; overflow-x:clip; max-width:100vw; }
*, *::before, *::after { box-sizing:border-box; }
.pg { overflow-x:hidden; overflow-x:clip; }
input, select, textarea { max-width:100%; box-sizing:border-box; }
.day-pill { flex-shrink:0; }
#weekDays { display:flex !important; flex-wrap:wrap !important; gap:5px; }

/* ── TABLET (≤900px) ── */
@media(max-width:900px){
  .pg { padding:14px; }
  .grid2 { grid-template-columns:1fr !important; }
  .crm-kpis { grid-template-columns:1fr 1fr !important; }
  .logs-stats { grid-template-columns:1fr 1fr !important; }
  .tbl-wrap, .pedidos-tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table { min-width:500px; }
}

/* ── MOBILE (≤600px) ── */
@media(max-width:600px){
  /* Layout base */
  .pg { padding:10px 10px 24px; }
  .card { margin-bottom:10px; }
  .card-h { padding:11px 12px; flex-wrap:wrap; gap:8px; }
  .card-h input, .card-h select { width:100%; min-width:0; }

  /* Date inputs compact */
  input[type="date"].sel { font-size:11px !important; padding:5px 2px !important; }

  /* Topbar */
  .topbar { height:46px; padding:0 10px; }
  .ham { width:30px; height:30px; font-size:13px; }
  .pg-title { font-size:.76rem; max-width:110px; }
  #liveIndicator { display:none; }
  .usr-tag { max-width:50px; font-size:.58rem; padding:3px 6px; }
  .topbar-r .btn-gh { display:none; }
  .topbar-r .btn-or.btn-sm { padding:4px 8px; font-size:.62rem; }

  /* Grids */
  .grid2, .grid3 { grid-template-columns:1fr !important; gap:10px !important; }
  .crm-kpis, .grid4 { grid-template-columns:1fr 1fr !important; gap:8px !important; }

  /* ── LOJA & STATUS ── */
  #pg-store .card > div { padding:12px; }
  #cfgHrO, #cfgHrC { font-size:15px !important; padding:8px 6px !important; }
  #weekDays .day-pill { flex:1 1 calc(25% - 4px); text-align:center; font-size:.65rem; padding:5px 2px; }
  #cfgMsg { font-size:15px !important; }

  /* ── PEDIDOS ── */
  #pg-pedidos-crm .card-h > div { width:100%; }
  #pg-pedidos-crm .card-h > div > select,
  #pg-pedidos-crm .card-h > div > input { flex:1 1 calc(50% - 4px); min-width:0; width:auto; }
  #pg-pedidos-crm .card-h input[type=text] { flex:1 1 100%; }
  #pedDtDe, #pedDtAte { width:100% !important; font-size:15px !important; }
  .ped-preset { font-size:.62rem !important; padding:3px 5px !important; }
  #pedMetricas { flex-direction:column !important; gap:6px !important; padding:10px 12px !important; }
  .ped-card { padding:12px 10px; }
  .ped-date-header { padding:10px 12px; }
  .ped-date-body { padding:0 8px 8px; }
  .ped-card-header { flex-wrap:wrap; gap:4px; }
  .ped-status-sel { font-size:.72rem !important; max-width:100%; }
  .ped-actions { flex-wrap:wrap; gap:6px; }

  /* ── CRM ── */
  .perfil-tab-btn { font-size:.65rem !important; padding:6px 8px !important; }
  #pg-crm > div:first-child { width:100% !important; flex-wrap:wrap; }
  .tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  #crmPanelCadast table { min-width:380px; }
  /* Esconder colunas menos importantes em mobile */
  #clientesTbody td:nth-child(8),
  #clientesTbody td:nth-child(9),
  #cliModal th:nth-child(8),
  #cliModal th:nth-child(9) { display:none; }
  .crm-kpi { padding:12px; }
  .crm-kpi-v { font-size:1.3rem; }

  /* ── LOGS ── */
  .logs-topbar { flex-direction:column; align-items:stretch; gap:8px; }
  .logs-filters { flex-wrap:wrap; gap:6px; }
  .logs-filters input { width:100% !important; max-width:100% !important; }
  .logs-filters select { flex:1 1 calc(50% - 3px); }
  .log-col-page, .log-col-detail { display:none; }
  .log-col-time { white-space:normal; min-width:80px; font-size:.65rem; }

  /* ── ROLES/FUNCIONÁRIOS ── */
  .roles-topbar { flex-direction:column; align-items:stretch; gap:8px; }
  .roles-topbar-actions { justify-content:flex-end; }
  .roles-grid { grid-template-columns:1fr !important; }
  .role-card-head { padding:12px; }
  .perm-row { gap:4px; flex-wrap:wrap; }

  /* ── HERO, CONFIG, EXTRAS ── */
  .img-upload-box { min-height:80px; }
  #pg-hero .grid2, #pg-settings .grid2 { grid-template-columns:1fr !important; }

  /* ── MODAIS ── */
  .modal { padding:0; align-items:flex-end !important; }
  .mbox {
    margin:0; border-radius:20px 20px 0 0;
    max-width:100% !important; width:100%;
    max-height:92vh;
    animation:mslide .22s ease;
  }
  .mhead { border-radius:20px 20px 0 0; padding:14px 16px; }
  .mfoot { flex-direction:column-reverse; }
  .mfoot .btn { width:100%; justify-content:center; }

  /* ── TABELAS GERAIS ── */
  table { min-width:380px; }
  table th, table td { padding:7px 8px; font-size:.7rem; white-space:nowrap; }

  /* ── BOTÕES ── */
  .btn-gh.btn-sm, .btn-or.btn-sm { font-size:.7rem; padding:6px 10px; }
}

/* ── VERY SMALL (≤380px) ── */
@media(max-width:380px){
  .pg { padding:8px 8px 20px; }
  #pgTitle { font-size:.8rem; max-width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .topbar { padding:0 8px; }
  #weekDays .day-pill { flex:1 1 calc(33.33% - 4px); font-size:.6rem; padding:5px 2px; }
  .ped-preset { display:none !important; }
  .crm-kpi-v { font-size:1.1rem; }
  .crm-kpi-l { font-size:.55rem; }
  table th, table td { padding:5px 6px; font-size:.65rem; }
  .card-h { padding:10px; }
  .acc-head { padding:8px 10px; }
  .prow { gap:4px; }
  .pprice { font-size:.72rem; min-width:40px; }
  .pname { font-size:.72rem; }
  .pdesc { display:none; }
}



  /* ── PEDIDOS CARDS ── */
  .ped-card {
    background:var(--s1); border:1.5px solid var(--b1);
    border-radius:16px; padding:clamp(12px,3vw,18px); margin-bottom:12px;
    transition:border-color .3s;
  }
  .ped-card:hover { border-color:var(--or); }
  /* Status borders */
  .ped-card.ped-entregue  { border-color:rgba(48,209,88,0.33); }
  .ped-card.ped-entregue:hover { border-color:var(--grn); }
  .ped-card.ped-cancelado { border-color:rgba(255,69,58,0.33); }
  .ped-card.ped-cancelado:hover { border-color:var(--red); }
  .ped-card.ped-em-andamento { border-color:var(--or)55; }
  .ped-card.ped-em-andamento:hover { border-color:var(--or); }

  /* ── Date groups ── */
  .ped-date-group {
    margin-bottom:12px;
    border:1px solid var(--b1); border-radius:16px;
    overflow:hidden; background:var(--s1);
  }
  .ped-date-header {
    width:100%; display:flex; align-items:center; justify-content:space-between;
    padding:12px 16px; background:none; border:none; cursor:pointer;
    gap:10px; transition:background .15s; text-align:left;
  }
  .ped-date-header:hover { background:rgba(255,255,255,.04); }
  .ped-date-dot {
    width:9px; height:9px; border-radius:50%; flex-shrink:0;
  }
  .ped-date-label {
    font-size:.82rem; font-weight:800; color:var(--tx);
  }
  .ped-date-sub {
    font-size:.72rem; color:var(--tx3);
  }
  .ped-date-stats {
    font-size:.72rem; font-weight:700; color:var(--tx3); white-space:nowrap;
  }
  .ped-date-arrow {
    font-size:.65rem; color:var(--tx4); transition:transform .2s; flex-shrink:0;
  }
  .ped-date-body {
    padding:0 12px 12px;
  }
  .ped-date-body .ped-card:last-child { margin-bottom:0; }
  .ped-card-header {
    display:flex; justify-content:space-between; align-items:flex-start;
    margin-bottom:12px; gap:10px; flex-wrap:wrap;
  }
  .ped-num {
    font-size:.62rem; font-weight:900; text-transform:uppercase;
    letter-spacing:1px; color:var(--tx4); margin-bottom:2px;
  }
  .ped-cliente { font-weight:800; font-size:.9rem; color:var(--tx); }
  .ped-tel     { font-size:.72rem; color:var(--tx3); margin-top:1px; }
  .ped-total-big { font-size:1.3rem; font-weight:900; color:var(--or); white-space:nowrap; }
  .ped-badges  { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:10px; }
  .ped-itens   { background:var(--s2); border-radius:10px; padding:10px 12px; margin-bottom:10px; }
  .ped-item-row{ display:flex; justify-content:space-between; font-size:.78rem; color:var(--tx2); padding:3px 0; }
  .ped-item-nm { flex:1; }
  .ped-item-vl { color:var(--or); font-weight:700; white-space:nowrap; }
  .ped-item-ext{ font-size:.68rem; color:var(--tx4); padding:1px 0 1px 16px; }
  .ped-item-obs{ font-size:.68rem; color:var(--tx4); padding:2px 0 2px 16px; }
  .ped-endereco{ font-size:.72rem; color:var(--tx3); margin-bottom:10px; }
  .ped-actions {
    display:flex; gap:8px; align-items:center; flex-wrap:wrap;
    padding-top:10px; border-top:1px solid var(--b1);
  }
  .ped-status-sel {
    flex:1; min-width:140px; background:var(--s2);
    border:1px solid var(--b2); border-radius:8px;
    color:var(--tx); font-family:inherit; font-size:.78rem;
    padding:7px 10px; outline:none; cursor:pointer;
  }
  .ped-wpp-btn {
    background:#25d366; color:#fff; border:none;
    border-radius:8px; padding:8px 14px;
    font-size:.78rem; font-weight:700; cursor:pointer;
    display:flex; align-items:center; gap:5px;
    text-decoration:none; transition:filter .2s; white-space:nowrap;
  }
  .ped-wpp-btn:hover { filter:brightness(1.12); }
  .ped-nf-btn {
    background:var(--s2); border:1px solid var(--b2);
    border-radius:8px; padding:8px 12px;
    font-size:.78rem; color:var(--tx2); cursor:pointer;
    transition:var(--tr); white-space:nowrap;
  }
  .ped-nf-btn:hover { border-color:var(--or); color:var(--or); }
  /* Status badges on cards */
  .st-novo       { background:rgba(245,158,11,.15); color:#d97706; border:1px solid rgba(245,158,11,.25); }
  .st-confirmado { background:var(--grn-dim);  color:#16a34a; border:1px solid var(--grn-glow); }
  .st-preparando { background:var(--blu-dim); color:#2563eb; border:1px solid rgba(59,130,246,.2); }
  .st-saiu       { background:var(--pur-dim); color:#7c3aed; border:1px solid rgba(139,92,246,.2); }
  .st-entregue   { background:var(--grn-dim);  color:#16a34a; border:1px solid var(--grn-glow); }
  .st-cancelado  { background:var(--red-dim);  color:#dc2626; border:1px solid rgba(239,68,68,.2); }
  /* Nota fiscal / print */
  @media print {
    body > *:not(#nfModal) { display:none !important; }
    #nfModal { position:static !important; background:none !important; padding:0 !important; display:block !important; }
    #nfContent { box-shadow:none !important; border-radius:0 !important; max-height:none !important; padding:0 !important; }
    .no-print { display:none !important; }
  }
  /* NF styles */
  .nf-header { text-align:center; border-bottom:2px dashed #ccc; padding-bottom:14px; margin-bottom:14px; }
  .nf-logo   { font-size:1.8rem; font-weight:900; color:#e8491e; font-family:'Baloo 2',cursive; }
  .nf-pednum { font-size:.75rem; color:#666; margin-top:2px; }
  .nf-section{ margin-bottom:12px; }
  .nf-section-title { font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:#999; margin-bottom:6px; }
  .nf-row    { display:flex; justify-content:space-between; font-size:.85rem; color:#333; padding:3px 0; border-bottom:1px solid #f0f0f0; }
  .nf-row:last-child { border:none; }
  .nf-row-bold { font-weight:800; }
  .nf-total-row { display:flex; justify-content:space-between; font-size:1rem; font-weight:900; color:#e8491e; padding:10px 0; border-top:2px dashed #ccc; margin-top:8px; }
  .nf-footer { text-align:center; font-size:.7rem; color:#aaa; margin-top:14px; border-top:1px dashed #ccc; padding-top:10px; }

/* ═══════════════════════════════════════════════════
   MARKETING — RESPONSIVO COMPLETO
═══════════════════════════════════════════════════ */

/* Tabs de navegação — scrolláveis no mobile */
#pg-marketing > div:first-child {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap !important;
  padding-bottom: 2px;
}
#pg-marketing > div:first-child::-webkit-scrollbar { display: none; }
#pg-marketing > div:first-child button { white-space: nowrap; flex-shrink: 0; }

/* WhatsApp tab — grid lateral vira coluna única no mobile */
#mkPanelWpp > .grid2 { gap: 14px; }

/* Caixa de preview WhatsApp — altura mínima menor no mobile */
#mkWppPreview { min-height: 100px !important; }

/* Lista de contatos — altura máxima menor no mobile */
#mkWppLista { max-height: 160px; overflow-y: auto; }

/* Botões de ação marketing — wrap natural */
#mkPanelWpp > div:last-child { gap: 8px; flex-wrap: wrap; }
#mkPanelWpp > div:last-child .btn { flex: 1 1 calc(50% - 4px); min-width: 140px; justify-content: center; text-align: center; font-size: .74rem; }

/* Email tab */
#mkPanelEmail > .grid2 { gap: 14px; }
#mkEmailFrame { min-height: 260px !important; }
#mkPanelEmail > div:last-child { gap: 8px; flex-wrap: wrap; }
#mkPanelEmail > div:last-child .btn { flex: 1 1 calc(50% - 4px); min-width: 120px; justify-content: center; font-size: .74rem; }

/* Tabela de contatos — scroll horizontal */
#mkPanelContatos .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#mkPanelContatos table { min-width: 600px; }
#mkPanelContatos > div:last-child { gap: 8px; flex-wrap: wrap; }
#mkPanelContatos > div:last-child .btn { flex: 1 1 calc(50% - 4px); justify-content: center; }

/* Export tab */
#mkPanelExport .grid2 { gap: 14px; }

/* ── Breakpoint tablet (≤900px) ── */
@media(max-width: 900px) {
  /* WhatsApp: preview + contatos lado a lado ainda (mas menores) */
  #mkPanelWpp > .grid2 { grid-template-columns: 1fr 1fr; }
  #mkPanelEmail > .grid2 { grid-template-columns: 1fr 1fr; }
  #mkPanelExport .grid2 { grid-template-columns: 1fr 1fr; }
}

/* Botões de ação: classes utilitárias */
.mk-action-btn {
  flex: 1 1 calc(50% - 4px);
  min-width: 130px;
  justify-content: center;
  text-align: center;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .78rem;
}
.mk-btn-ico { flex-shrink: 0; }

/* ── Breakpoint mobile (≤680px) ── */
@media(max-width: 680px) {
  /* Grids principais: 1 coluna */
  #mkWppMainGrid,
  #mkEmailMainGrid,
  #mkPanelExport .grid2 { grid-template-columns: 1fr !important; }

  /* KPIs marketing: 2x2 */
  #mkWppKpis { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }

  /* Botões de ação: 2 por linha no mobile */
  .mk-action-btn { flex: 1 1 calc(50% - 4px); min-width: 120px; font-size: .74rem; padding: 9px 8px; }

  /* Preview WhatsApp menor */
  #mkWppPreview { font-size: .75rem !important; min-height: 80px !important; }

  /* Lista contatos menor */
  #mkWppLista { max-height: 130px; }
  #mkEmailLista { max-height: 130px; }

  /* Abas: scroll compacto */
  #pg-marketing > div:first-child button { font-size: .72rem; padding: 6px 10px; }

  /* Export */
  #mkPanelExport .grid2 { gap: 12px; }
  #mkPanelContatos > div:last-child .btn { flex: 1 1 calc(50% - 4px); }

  /* Tabela contatos: fontes menores */
  #mkContatosTbody td { font-size: .66rem !important; padding: 6px 4px; }

  /* Preview email iframe */
  #mkEmailFrame { min-height: 200px !important; height: 200px; }
  #mkHtmlPreviewFrame { height: 200px; }
}

/* ── Breakpoint muito pequeno (≤400px) ── */
@media(max-width: 400px) {
  #mkWppKpis { grid-template-columns: 1fr 1fr !important; }
  #pg-marketing > div:first-child button { font-size: .68rem; padding: 5px 8px; }
  #mkPanelWpp > div:last-child .btn,
  #mkPanelEmail > div:last-child .btn { font-size: .68rem; padding: 8px 8px; }
}

/* ══════════════════════════════════════════════════
   SEÇÕES FERRAMENTAS — Links · Vídeos · Suporte
   ══════════════════════════════════════════════════ */

/* ── HERO BANNER ── */
.sec-hero{
  position:relative;overflow:hidden;
  border-radius:20px;padding:clamp(24px,4vw,40px) clamp(20px,4vw,36px);
  margin-bottom:24px;
}
.sec-hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 90% 20%, rgba(255,255,255,.08) 0%, transparent 60%);
  pointer-events:none;
}
.sec-hero-inner{position:relative;z-index:1;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.sec-hero-ico{
  width:60px;height:60px;border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  font-size:28px;flex-shrink:0;
  background:rgba(255,255,255,.12);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.1);
}
.sec-hero-txt{flex:1;min-width:200px}
.sec-hero-title{font-size:clamp(1rem,2.5vw,1.25rem);font-weight:900;color:#fff;margin-bottom:6px;letter-spacing:-.3px}
.sec-hero-desc{font-size:clamp(.75rem,1.8vw,.85rem);color:rgba(255,255,255,.7);line-height:1.6;max-width:520px}
.sec-hero-badge{
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);
  border-radius:14px;padding:10px 18px;text-align:center;flex-shrink:0;
  backdrop-filter:blur(6px);
}
.sec-hero-badge-num{font-size:1.5rem;font-weight:900;line-height:1}
.sec-hero-badge-lbl{font-size:.62rem;color:rgba(255,255,255,.6);margin-top:2px;text-transform:uppercase;letter-spacing:.6px}

/* ── SECTION INNER SPACING ── */
#pg-links,#pg-videoaulas,#pg-suporte{padding:0 clamp(4px,2vw,16px)}
#pg-links .card,#pg-videoaulas .card,#pg-suporte .card{margin-bottom:20px}
#pg-links .card:last-child,#pg-videoaulas .card:last-child,#pg-suporte .card:last-child{margin-bottom:0}

/* ── LINKS & UTM — TOOL CARDS ── */
.link-tool-card{
  display:flex;align-items:center;gap:14px;
  background:var(--s2);border:1px solid var(--b1);border-radius:16px;
  padding:16px 18px;text-decoration:none;
  transition:all .25s ease;position:relative;overflow:hidden;
}
.link-tool-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(232,73,30,.04),transparent);
  opacity:0;transition:opacity .25s;pointer-events:none;
}
.link-tool-card:hover{border-color:var(--or);transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.3)}
.link-tool-card:hover::after{opacity:1}
.link-tool-ico{
  width:48px;height:48px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;flex-shrink:0;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.link-tool-info{flex:1;min-width:0;position:relative;z-index:1}
.link-tool-name{font-size:.84rem;font-weight:800;color:var(--tx);margin-bottom:3px}
.link-tool-desc{font-size:.7rem;color:var(--tx3);line-height:1.5}
.link-tool-arrow{font-size:.7rem;color:var(--tx4);transition:transform .25s;flex-shrink:0;position:relative;z-index:1}
.link-tool-card:hover .link-tool-arrow{transform:translateX(4px);color:var(--or)}

/* ── UTM GRID ── */
.utm-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.utm-result{
  background:var(--s1);border-radius:14px;padding:16px;
  border:1.5px solid var(--b1);margin-top:8px;
}
.utm-result-url{
  font-size:.75rem;color:var(--or2);word-break:break-all;line-height:1.7;
  font-family:'Courier New',monospace;background:var(--bg);border-radius:10px;
  padding:12px 14px;margin:10px 0 14px;border:1px solid var(--b1);
}

/* ── VIDEOS ── */
.vid-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.vid-cats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;padding:2px}
.vid-cat-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:20px;font-size:.72rem;font-weight:700;
  border:1.5px solid var(--b2);background:var(--s2);color:var(--tx3);
  cursor:pointer;font-family:var(--ff);transition:all .18s;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  letter-spacing:.01em;
}
.vid-cat-pill:hover{ border-color:var(--b3);color:var(--tx);background:var(--s3); }
.vid-card{
  background:var(--s1);border:1px solid var(--b1);border-radius:18px;
  overflow:hidden;transition:all .3s ease;
}
.vid-card:hover{
  border-color:var(--or);transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(0,0,0,.35),0 0 0 1px rgba(232,73,30,.15);
}
.vid-thumb{position:relative;aspect-ratio:16/9;background:#0a0600;overflow:hidden;cursor:pointer}
.vid-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.vid-card:hover .vid-thumb img{transform:scale(1.06)}
.vid-thumb::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:50%;
  background:linear-gradient(transparent,rgba(0,0,0,.5));pointer-events:none;
}
.vid-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1}
.vid-play-btn{
  width:52px;height:52px;background:var(--or);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:all .25s;box-shadow:0 6px 24px rgba(232,73,30,.5);
  border:3px solid rgba(255,255,255,.2);
  font-size:0;line-height:0; /* Impede emoji no mobile */
}
.vid-play-btn svg{width:20px;height:20px;fill:#fff;margin-left:3px;flex-shrink:0}
.vid-card:hover .vid-play-btn{transform:scale(1.15);box-shadow:0 8px 32px rgba(232,73,30,.6)}
.vid-duration{
  position:absolute;bottom:10px;right:10px;z-index:2;
  background:rgba(0,0,0,.85);color:#fff;font-size:.6rem;font-weight:700;
  border-radius:6px;padding:3px 8px;letter-spacing:.3px;
  backdrop-filter:blur(4px);
}
.vid-body{padding:16px 18px 18px}
.vid-cat{
  display:inline-block;font-size:.58rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.8px;color:var(--or);background:rgba(232,73,30,.1);
  padding:3px 10px;border-radius:20px;margin-bottom:8px;
}
.vid-title{font-size:.9rem;font-weight:800;color:var(--tx);line-height:1.4;margin-bottom:6px}
.vid-desc{font-size:.72rem;color:var(--tx3);line-height:1.6}
.vid-btn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;padding:10px;margin-top:12px;
  background:linear-gradient(135deg,var(--or),var(--or2));
  border:none;border-radius:10px;color:#fff;font-family:inherit;
  font-size:.76rem;font-weight:700;cursor:pointer;transition:all .2s;
}
.vid-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.vid-soon{
  background:var(--s1);border:2px dashed var(--b2);border-radius:18px;
  padding:36px;text-align:center;margin-top:20px;
}

/* ── SUPORTE — CONTACT CARDS ── */
.sup-contacts{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-bottom:24px}
.sup-card{
  background:var(--s1);border:1px solid var(--b1);border-radius:18px;
  padding:22px;transition:all .3s ease;position:relative;overflow:hidden;
}
.sup-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  border-radius:18px 18px 0 0;
}
.sup-card--wpp::before{background:linear-gradient(90deg,#25d366,#128c7e)}
.sup-card--email::before{background:linear-gradient(90deg,#6366f1,#4f46e5)}
.sup-card--vid::before{background:linear-gradient(90deg,var(--or),var(--or2))}
.sup-card:hover{border-color:var(--b3);transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.3)}
.sup-card-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.sup-card-ico{
  width:50px;height:50px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;flex-shrink:0;
}
.sup-card-title{font-size:.92rem;font-weight:800;color:var(--tx)}
.sup-card-sub{font-size:.68rem;color:var(--tx3);margin-top:2px}
.sup-card-desc{font-size:.78rem;color:var(--tx2);line-height:1.6;margin-bottom:16px}
.sup-card-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:11px 16px;border-radius:12px;border:none;
  font-family:inherit;font-size:.8rem;font-weight:700;cursor:pointer;
  text-decoration:none;transition:all .2s;
}
.sup-card-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.sup-card-btn--wpp{background:linear-gradient(135deg,#25d366,#1db954);color:#fff}
.sup-card-btn--email{background:var(--s3);color:var(--tx);border:1px solid var(--b2)}
.sup-card-btn--email:hover{border-color:var(--b3)}
.sup-card-btn--vid{background:linear-gradient(135deg,var(--or),var(--or2));color:#fff}

/* ── SUPORTE — FORM ── */
.sup-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}

/* ── SUPORTE FAQ ── */
.faq-item{border-bottom:1px solid var(--b1);transition:background .2s}
.faq-item:last-child{border:none}
.faq-item:hover{background:rgba(255,255,255,.02)}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px clamp(12px,3vw,20px);cursor:pointer;gap:12px;
  font-size:.84rem;font-weight:700;color:var(--tx);transition:color .2s;
  background:none;border:none;width:100%;text-align:left;
}
.faq-q:hover{color:var(--or)}
.faq-arrow{
  width:28px;height:28px;border-radius:8px;background:var(--s3);
  display:flex;align-items:center;justify-content:center;
  font-size:.65rem;transition:all .25s;flex-shrink:0;color:var(--tx3);
}
.faq-a{
  display:none;padding:0 clamp(12px,3vw,20px) 18px;
  font-size:.8rem;color:var(--tx2);line-height:1.8;
}
.faq-item.open .faq-arrow{transform:rotate(180deg);background:var(--or);color:#fff}
.faq-item.open .faq-q{color:var(--or)}
.faq-item.open .faq-a{display:block}

/* ── RESPONSIVE — FERRAMENTAS ── */
@media(max-width:700px){
  .utm-grid{grid-template-columns:1fr}
  .sup-form-grid{grid-template-columns:1fr}
  .sup-contacts{grid-template-columns:1fr}
  .vid-grid{grid-template-columns:1fr}
}
@media(max-width:500px){
  .sec-hero{padding:20px 16px}
  .sec-hero-ico{width:48px;height:48px;font-size:22px;border-radius:14px}
  .sec-hero-badge{padding:8px 14px}
  .link-tool-card{padding:14px}
  .link-tool-ico{width:40px;height:40px;font-size:18px;border-radius:12px}
  .sup-card{padding:18px}
  .vid-body{padding:14px}
  .vid-card{border-radius:14px}
}


/* ── ESTOQUE VISUAL CARDS ── */
.est-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.est-card{background:var(--s2);border-radius:14px;border:1px solid var(--b1);overflow:hidden;transition:transform .2s,box-shadow .2s;position:relative}
.est-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.est-card[data-status="out"]{border-color:var(--red)}
.est-card[data-status="low"]{border-color:#fbbf24}
.est-card[data-status="ok"]{border-color:rgba(34,197,94,.3)}
.est-img{width:100%;height:110px;overflow:hidden;background:var(--s3);position:relative}
.est-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.est-card:hover .est-img img{transform:scale(1.05)}
.est-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2.5rem;background:linear-gradient(135deg,var(--s3),var(--s2))}
.est-badge{position:absolute;top:8px;right:8px;padding:3px 8px;border-radius:20px;font-size:.55rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px;backdrop-filter:blur(8px)}
.est-badge-out{background:rgba(239,68,68,.9);color:#fff}
.est-badge-low{background:rgba(251,191,36,.9);color:#000}
.est-badge-ok{background:rgba(34,197,94,.15);color:var(--grn)}
.est-info{padding:12px 14px}
.est-name{font-size:.78rem;font-weight:700;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.est-sec{font-size:.58rem;color:var(--tx4);margin-top:2px}
.est-bottom{display:flex;align-items:flex-end;justify-content:space-between;margin-top:8px}
.est-qty{font-size:1.6rem;font-weight:900;line-height:1}
.est-label{font-size:.55rem;color:var(--tx4);margin-top:2px}
@media(max-width:600px){
  .est-grid{grid-template-columns:1fr 1fr;gap:8px}
  .est-img{height:90px}
  .est-info{padding:10px 10px}
  .est-name{font-size:.72rem}
  .est-qty{font-size:1.3rem}
  .est-badge{top:6px;right:6px;font-size:.5rem;padding:2px 6px}
}
@media(max-width:360px){
  .est-grid{gap:6px}
  .est-img{height:75px}
  .est-info{padding:8px 8px}
  .est-qty{font-size:1.1rem}
}

/* ── MODO CLARO — ajustes adicionais ─────────────────────────── */
[data-theme="light"] body { background:var(--bg); color:var(--tx); }
[data-theme="light"] ::-webkit-scrollbar-track { background:var(--s3); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background:var(--s5); }
[data-theme="light"] .topbar { background:var(--topbar-bg); box-shadow:0 1px 0 var(--b1); }
[data-theme="light"] .sb { background:var(--s1); }
[data-theme="light"] .sb-btn:hover { background:var(--s3); }
[data-theme="light"] .sb-btn.on { background:var(--orD); }
[data-theme="light"] .card { background:var(--s2); box-shadow:0 1px 4px var(--b1); }
[data-theme="light"] .panel { background:var(--s1); }
[data-theme="light"] .inp, [data-theme="light"] .sel, [data-theme="light"] .txa { background:#F2F2F2; color:var(--tx); border-color:var(--b2); }
[data-theme="light"] .srch { background:#F2F2F2; }
[data-theme="light"] .crm-sel { background:#F2F2F2; }
[data-theme="light"] .crm-sel option { background:#F2F2F2; }
[data-theme="light"] .inp::placeholder, [data-theme="light"] .txa::placeholder { color:var(--tx4); }
[data-theme="light"] .btn-gh { background:var(--s3); border-color:var(--b2); color:var(--tx2); }
[data-theme="light"] .btn-gh:hover { background:var(--s4); }
[data-theme="light"] .modal { background:rgba(0,0,0,0.4); }
[data-theme="light"] .mbox { background:var(--s2); border:1px solid var(--b2); }
[data-theme="light"] .ped-card { background:var(--s2); }
[data-theme="light"] .ped-date-group { background:var(--s1); }
[data-theme="light"] .ped-date-header { background:var(--s1); }
[data-theme="light"] .crm-kpi { background:var(--s2); }
[data-theme="light"] .cl-card { background:var(--s2); }
[data-theme="light"] table thead th { background:var(--s3); }
[data-theme="light"] table tbody tr:hover { background:var(--s3); }

/* ══════════════════════════════════════════════════
   TIPOGRAFIA GLOBAL — aplicada a todas as seções
   ══════════════════════════════════════════════════ */

/* Títulos de seção inline (Loja, Entrega, Cupons, etc.) */
.sec strong,
.sec .card strong { font-weight: 700; }

/* Normalizar todos os font-weight:900 herdados */
.sec [style*="font-weight:900"] { font-weight: 800 !important; }

/* Garantir que títulos de painéis e cards sigam a escala */
.panel-h, .card-h .card-t { font-size: .85rem; font-weight: 700; }

/* Descrições de seção abaixo dos títulos */
.sec-desc { font-size: .75rem; color: var(--tx3); line-height: 1.5; }

/* Números grandes em KPIs (Logs, Cupons, Links UTM, etc.) */
.stat-num { font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.stat-label { font-size: .6rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--tx4); margin-top: 2px; }

/* Toggle labels (Loja aberta/fechada) */
.tog-l { font-size: .82rem; font-weight: 700; }

/* Inputs de hora na Loja & Status */
#cfgHrO, #cfgHrC { font-size: .85rem !important; font-weight: 700 !important; }

/* Blocos de configuração (wpp support, etc.) */
.cfg-title { font-size: .85rem; font-weight: 700; }
.cfg-sub   { font-size: .72rem; color: var(--tx3); }

/* Seção Equipe — cards de cargo/funcionário */
.role-name { font-size: .85rem; font-weight: 700; }
.role-desc { font-size: .72rem; color: var(--tx3); }

/* Seção Logs */
.log-stat-v { font-size: 1.4rem; font-weight: 800; line-height: 1.1; }
.log-stat-l { font-size: .6rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--tx4); }

/* Seção Ferramentas (Links & UTM) */
.utm-metric-v { font-size: 1.4rem; font-weight: 800; }
.utm-metric-l { font-size: .6rem; color: var(--tx4); text-transform: uppercase; }

/* Videoaulas — títulos dos cards */
.vid-title { font-size: .85rem; font-weight: 700; }
.vid-desc  { font-size: .75rem; color: var(--tx3); }
.vid-dur   { font-size: .68rem; color: var(--tx4); }

/* Estoque */
.est-prod-name { font-size: .82rem; font-weight: 700; }
.est-sec-name  { font-size: .78rem; font-weight: 600; color: var(--tx3); }

/* Suporte / FAQ */
.faq-q { font-size: .85rem; font-weight: 700; }
.faq-a { font-size: .80rem; color: var(--tx2); line-height: 1.6; }



/* ══════════════════════════════════════════════════════════════
   SISTEMA RESPONSIVO — Mobile-First, alinhado ao Dashboard
   Breakpoints: 900px (tablet), 600px (mobile), 380px (small)
   ══════════════════════════════════════════════════════════════ */

/* ── BASE: previne overflow em qualquer tela ────────────────── */
html,body { overflow-x:hidden; overflow-x:clip; max-width:100vw; }
img,video,iframe,table { max-width:100%; }
input,select,textarea { max-width:100%; }
.pg { overflow-x:hidden; overflow-x:clip; }

/* ── TABLET ≤ 900px ─────────────────────────────────────────── */
@media(max-width:900px){
  /* Sidebar: overlay mode */
  .sb { transform:translateX(-100%); }
  .sb.open { transform:translateX(0); }
  .main { margin-left:0; }
  .topbar { left:0; }
  .ham { display:flex; }

  /* KPIs: 2 colunas */
  .grid4, .crm-kpis { grid-template-columns:1fr 1fr !important; gap:10px; margin-bottom:14px; }

  /* Padrão de grids */
  .grid2 { grid-template-columns:1fr; }
  .grid3 { grid-template-columns:1fr 1fr; }

  /* Tabelas com scroll */
  .tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table { min-width:480px; }

  /* Modais: slide do fundo */
  .modal { align-items:flex-end; }
  .mbox { border-radius:20px 20px 0 0; max-width:100% !important; width:100%; max-height:92vh; margin:0; }
  .mhead { border-radius:20px 20px 0 0; }
  .mfoot { flex-direction:column-reverse; }
  .mfoot .btn { width:100%; justify-content:center; }

  /* Marketing tabs */
  .mk-tabs { grid-template-columns:repeat(2,1fr) !important; }
}

/* ── MOBILE ≤ 600px ─────────────────────────────────────────── */
@media(max-width:600px){
  /* Spacing */
  .pg { padding:10px 10px 80px; }
  .card { margin-bottom:10px; }
  .card-h { padding:10px 12px; }

  /* Topbar compacto */
  .topbar { height:46px; padding:0 10px; gap:6px; }
  .pg-title { font-size:.75rem; max-width:120px; }
  #liveIndicator { display:none; }
  .topbar-r .btn-gh { display:none !important; }
  .topbar-r .btn-or.btn-sm { padding:5px 10px; font-size:.68rem; }
  #themeToggleBtn { padding:4px 8px !important; font-size:.75rem !important; }

  /* Grids mobile */
  .grid2, .grid3 { grid-template-columns:1fr !important; gap:10px !important; }
  .grid4 { grid-template-columns:1fr 1fr !important; gap:10px !important; }
  .crm-kpis { grid-template-columns:1fr 1fr !important; gap:8px !important; }

  /* KPIs tamanho correto */
  .crm-kpi { padding:12px 10px; }
  .crm-kpi-v { font-size:1.3rem !important; }
  .crm-kpi-l { font-size:.58rem !important; }
  .crm-kpi-s { font-size:.6rem !important; }
  .crm-kpi::after { font-size:1.4rem; opacity:.08; }

  /* ── Pedidos ── */
  .ped-card { padding:10px; }
  .ped-actions { flex-wrap:wrap; gap:6px; }
  .ped-status-sel { width:100% !important; font-size:.75rem; }
  .ped-wpp-btn, .ped-nf-btn { flex:1; justify-content:center; text-align:center; }
  .ped-date-header { padding:10px 12px; font-size:.78rem; }
  .ped-preset { font-size:.62rem !important; padding:4px 6px !important; }
  #pedDtDe, #pedDtAte { font-size:15px !important; }
  .ped-date-stats { font-size:.7rem; }

  /* ── CRM Filtros ── */
  .crm-filter-bar { gap:8px; }
  .crm-srch { width:100%; }
  .crm-frow { flex-direction:column; align-items:flex-start; gap:4px; }
  .crm-filter-group { flex-wrap:wrap; gap:4px; }
  .filt { font-size:.65rem; padding:4px 9px; }
  .crm-selects-row { flex-direction:column; gap:8px; }
  .crm-sel-wrap { width:100%; }
  .crm-sel { width:100%; }

  /* ── Cards CRM ── */
  .cl-card { padding:12px; }
  .cl-head { flex-wrap:wrap; }
  .cl-stats-row { gap:8px; }

  /* Tabelas CRM: esconder colunas extras */
  #clientesTbody td:nth-child(3),
  #clientesTbody td:nth-child(8),
  #clientesTbody td:nth-child(9),
  thead th:nth-child(3),
  thead th:nth-child(8),
  thead th:nth-child(9) { display:none; }
  #crmPanelCadast table { min-width:320px; }
  table { min-width:360px; }
  table th, table td { padding:7px 6px; font-size:.7rem; }

  /* ── Disparos (Marketing) ── */
  .mk-tabs { grid-template-columns:1fr 1fr !important; gap:8px !important; }
  .mk-tab { padding:14px 8px 12px; }
  .mk-ti { font-size:1.3rem !important; }
  .mk-tl { font-size:.72rem; }
  .mk-action-bar { flex-direction:column; gap:6px; }
  .mk-action-bar .btn, .mk-action-bar a.btn { width:100%; justify-content:center; }
  #mkWppMainGrid, #mkEmailMainGrid { grid-template-columns:1fr !important; }

  /* ── Logs ── */
  .logs-topbar { flex-direction:column; gap:8px; }
  .logs-filters { flex-wrap:wrap; gap:6px; }
  .logs-filters input { width:100%; }
  .logs-filters select { flex:1 1 calc(50% - 3px); }
  .log-col-page, .log-col-detail { display:none; }
  .log-col-time { font-size:.63rem; white-space:normal; min-width:70px; }

  /* ── Roles/Permissões ── */
  .roles-grid { grid-template-columns:1fr !important; }
  .roles-topbar { flex-direction:column; gap:8px; }
  .perm-row { flex-wrap:wrap; gap:4px; }
  .perm-row-ctrl { width:100%; justify-content:flex-end; }
  .perm-btn { padding:5px 8px; font-size:.62rem; }

  /* ── Produtos ── */
  .acc-head { padding:10px 12px; }
  .prow { padding:8px 12px; }
  .pdesc { display:none; }
  .pprice { min-width:50px; font-size:.75rem; }
  .pname { font-size:.78rem; }

  /* ── Loja & Status ── */
  #pg-store .grid2 { grid-template-columns:1fr !important; }
  .day-pill { flex:1 1 calc(25% - 4px); font-size:.65rem; padding:5px 2px; text-align:center; }
  #cfgHrO, #cfgHrC, #cfgMsg { font-size:15px !important; }

  /* ── Modais ── */
  .modal { align-items:flex-end; padding:0; }
  .mbox { border-radius:20px 20px 0 0; max-width:100% !important; width:100%; max-height:92vh; margin:0; animation:mslide .22s ease; }
  .mfoot { flex-direction:column-reverse; gap:6px; }
  .mfoot .btn { width:100%; justify-content:center; }

  /* ── Geral ── */
  .btn { font-size:.75rem; }
  .btn-sm { font-size:.68rem; }
  .inp, .sel { font-size:16px; } /* previne zoom no iOS */
  .lbl { font-size:.6rem; }

  /* Sidebar foot */
  .sb-foot { padding:10px 14px; font-size:.62rem; }
}

/* ── SMALL ≤ 380px ──────────────────────────────────────────── */
@media(max-width:380px){
  .pg { padding:8px 8px 70px; }
  .topbar { padding:0 8px; height:44px; }
  .pg-title { font-size:.7rem; max-width:80px; }
  .crm-kpi-v { font-size:1.1rem !important; }
  .ped-preset { display:none !important; }
  .day-pill { flex:1 1 calc(33% - 4px); }
  .mk-tabs { grid-template-columns:1fr 1fr !important; }
}

/* ── Owner chip na topbar ────────────────────────────────────── */
#ownerChip:hover {
  border-color: var(--or);
  background: var(--orD);
}
@media(max-width:600px){
  #ownerChip .owner-nome-text { display: none; }
  #ownerChip { padding: 4px; }
}

/* ── PROPRIETÁRIO ─────────────────────────────────── */
#pg-proprietario { max-width:840px; margin:0 auto; }


/* ── Color chips personalização ── */
.color-chip{width:28px;height:28px;border-radius:7px;cursor:pointer;border:2px solid transparent;transition:.15s;flex-shrink:0}
.color-chip:hover{transform:scale(1.15);border-color:rgba(255,255,255,.4)}
.color-chip.selected{border-color:#fff;box-shadow:0 0 0 2px var(--or)}

/* ── IMPORTAR CARDÁPIO ──────────────────────────────── */
.ic-drop{border:2px dashed var(--b2);border-radius:16px;padding:40px 20px;text-align:center;cursor:pointer;transition:all .2s;background:var(--s1)}
.ic-drop:hover,.ic-drop.drag{border-color:var(--or);background:var(--orD)}
.ic-drop-ico{font-size:2.5rem;margin-bottom:10px}
.ic-drop-txt{font-size:.85rem;font-weight:700;color:var(--tx);margin-bottom:4px}
.ic-drop-sub{font-size:.72rem;color:var(--tx3)}
.ic-preview-img{max-width:100%;max-height:320px;border-radius:12px;border:1px solid var(--b1);display:block;margin:0 auto}
.ic-prod-card{background:var(--s2);border:1px solid var(--b1);border-radius:12px;padding:14px;margin-bottom:10px;display:flex;align-items:flex-start;gap:12px;transition:border-color .2s}
.ic-prod-card:hover{border-color:var(--b2)}
.ic-prod-card.ic-skip{opacity:.45}
.ic-prod-check{width:20px;height:20px;flex-shrink:0;margin-top:2px;accent-color:var(--or);cursor:pointer}
.ic-prod-info{flex:1;min-width:0}
.ic-prod-name{font-size:.88rem;font-weight:800;color:var(--tx);margin-bottom:2px}
.ic-prod-desc{font-size:.72rem;color:var(--tx3);margin-bottom:6px;line-height:1.5}
.ic-prod-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ic-prod-price{font-size:.82rem;font-weight:800;color:var(--or)}
.ic-prod-sec{font-size:.65rem;background:var(--s3);color:var(--tx2);padding:2px 8px;border-radius:20px;font-weight:600}
.ic-sec-header{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--tx4);padding:12px 0 6px;border-bottom:1px solid var(--b1);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.ic-step{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;font-size:.78rem;font-weight:600;margin-bottom:8px}
.ic-step.done{background:var(--grn-dim);color:var(--grn)}
.ic-step.active{background:var(--orD);color:var(--or)}
.ic-step.wait{background:var(--s2);color:var(--tx4)}
.ic-analyzing{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 20px;gap:16px}
.ic-analyzing-dot{width:48px;height:48px;border-radius:50%;border:3px solid var(--or);border-top-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── SIDEBAR GRUPOS COLAPSÁVEIS — redesign profissional ── */
.sb-group-btn {
  display:flex;align-items:center;gap:10px;width:100%;
  padding:10px 16px;background:none;border:none;border-left:3px solid transparent;
  color:var(--tx3);font-size:.76rem;font-weight:600;text-align:left;
  transition:all .18s ease;cursor:pointer;letter-spacing:.01em;
  border-radius:0;
}
.sb-group-btn:hover {
  color:var(--tx);
  background:rgba(255,255,255,.03);
}
/* Categoria aberta — SEM cor de destaque, apenas leve fundo */
.sb-group-btn.open {
  color:var(--tx);
  background:rgba(255,255,255,.04);
  border-left-color:transparent;
}

.sb-group-label { flex:1;letter-spacing:.01em; }

.sb-arrow {
  font-size:.6rem;color:var(--tx4);
  transition:transform .2s cubic-bezier(.4,0,.2,1);
  flex-shrink:0;line-height:1;opacity:.6;
}
.sb-group-btn.open .sb-arrow { transform:rotate(90deg);opacity:.8; }

/* Separador sutil entre grupos */
.sb-group-btn + .sb-group-btn,
.sb-group + .sb-group-btn {
  border-top:1px solid rgba(255,255,255,.03);
}
/* No menu do PDV não usamos esses separadores — ficavam "encaixotando" os
   grupos (ex.: Equipe com uma linha em cima e outra embaixo). */
body.modo-encomendas .sb-group-btn + .sb-group-btn,
body.modo-encomendas .sb-group + .sb-group-btn { border-top:none; }

/* Submenu container */
.sb-group {
  max-height:0;overflow:hidden;
  transition:max-height .26s cubic-bezier(.4,0,.2,1);
  background:rgba(0,0,0,.15);
  border-left:none;
  margin-left:0;
}
.sb-group.open { max-height:800px; }

/* Itens dentro do submenu */
.sb-sub-btn {
  display:flex;align-items:center;gap:8px;
  padding:7px 16px 7px 36px !important;
  font-size:.73rem !important;
  font-weight:500 !important;
  border-left:2px solid transparent !important;
  color:var(--tx4) !important;
  transition:all .15s ease !important;
}
.sb-sub-btn:hover {
  color:var(--tx2) !important;
  background:rgba(255,255,255,.03) !important;
  border-left-color:rgba(255,255,255,.1) !important;
}
/* Subcategoria ativa — com cor laranja */
.sb-sub-btn.on {
  color:var(--or) !important;
  background:var(--orD) !important;
  border-left-color:var(--or) !important;
  font-weight:700 !important;
}
.sb-sub-btn .sb-ico { font-size:.78rem;opacity:.7;width:16px;text-align:center; }
.sb-sub-btn.on .sb-ico { opacity:1; }

/* Dashboard — botão especial sempre visível */
.sb-btn.on {
  color:var(--or);
  background:var(--orD);
  border-left-color:var(--or);
  font-weight:700;
}
/* ── DRAG & DROP ── */
.prow.drag-over { border-top:3px solid var(--or)!important; background:var(--orD)!important; }
.prow[draggable] .drag { cursor:grab; }
.prow[draggable]:active .drag { cursor:grabbing; }
.sec-row.drag-over { border:2px dashed var(--or); background:var(--orD); }

/* ── TOUCH DRAG ── */
.prow.touch-dragging { opacity:0.2; outline:2px dashed var(--or); }
.sec-card.touch-dragging { opacity:0.2; }
.acc.touch-dragging { opacity:0.2; outline:2px dashed var(--or); border-radius:12px; }

/* Indicador visual de destino */
.prow.touch-drag-over { border-top:3px solid var(--or)!important; background:var(--orD)!important; }
.sec-card.touch-drag-over { border:2px solid var(--or)!important; background:var(--orD)!important; }
.acc.touch-drag-over > .acc-h { border-top:3px solid var(--or)!important; background:var(--orD)!important; }
.ext-drop-empty.touch-drag-over,
.prod-drop-empty.touch-drag-over { border-color:var(--or)!important; background:var(--orD)!important; }

/* Ghost flutuante */
#touchDragGhost {
  position:fixed;
  z-index:9999;
  pointer-events:none;
  border-radius:10px;
  background:var(--s2);
  border:2px solid var(--or);
  box-shadow:0 12px 40px rgba(0,0,0,.55);
  opacity:.93;
  overflow:hidden;
  transform:scale(1.03);
  max-width:90vw;
}

/* ── Planos & Renovação — responsivo ── */
@media(max-width:600px){
  #modal-renovacao > div { border-radius:16px!important; padding:0!important; }
  #modal-renovacao > div > div { padding:14px 16px!important; }
}

/* ── Sidebar SVG Icons ───────────────────────────────── */
.sb-ico{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--tx2)}
.sb-ico svg{width:16px;height:16px}
.sb-btn .sb-ico{color:var(--tx3);transition:color .15s}
.sb-btn:hover .sb-ico,.sb-btn.on .sb-ico{color:var(--or)}
.sb-group-btn .sb-ico{color:var(--tx3);transition:color .15s}
.sb-group-btn:hover .sb-ico,.sb-group-btn.open .sb-ico{color:var(--tx)}
.sb-sub-btn .sb-ico{color:var(--tx4);width:14px;height:14px}
.sb-sub-btn .sb-ico svg{width:14px;height:14px}
.sb-sub-btn:hover .sb-ico,.sb-sub-btn.on .sb-ico{color:var(--or)}

/* ── Instalar App — apenas mobile ── */


/* ════════════════════════════════════════════════════════════
   MOBILE TOPBAR & SIDEBAR — FIX COMPLETO
   ════════════════════════════════════════════════════════════ */

/* Desktop: sidebar visível, topbar começa após sidebar */
@media(min-width:901px){
  .sb  { transform:none !important; position:fixed; }
  .main{ margin-left:var(--sw); }
  .topbar{ left:var(--sw); }
  .ham { display:none !important; }
}

/* Mobile/Tablet: sidebar escondida, topbar cobre tudo */
@media(max-width:900px){
  :root  { --sw:0px; }
  .sb    { position:fixed; top:0; left:0; height:100vh; height:100dvh; width:260px;
           transform:translateX(-260px); z-index:500;
           transition:transform .25s cubic-bezier(.4,0,.2,1); }
  .sb.open { transform:translateX(0); }
  .main  { margin-left:0; }
  .topbar{ left:0 !important; right:0; top:0; z-index:400; }
  .ham   { display:flex !important; }
  .mob-ovl.on { display:block; z-index:490; }
}

/* Padding-top mobile — garante conteúdo abaixo da topbar fixa */
@media(max-width:900px){
  .pg {
    padding-top: calc(46px + 14px + var(--safe-top)) !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    padding-bottom: 14px !important;
  }
}
@media(max-width:600px){
  .pg {
    padding-top: calc(46px + 12px + var(--safe-top)) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: 20px !important;
  }
  .topbar { height: 46px !important; }
}

/* ── Aparência: grid responsivo ── */
.set-grid { grid-template-columns: 1fr 1fr; align-items: stretch; gap: 20px; }
.set-grid > div[style*="border-radius:20px"],
.set-grid > div[style*="border-radius: 20px"] { display: flex !important; flex-direction: column !important; }
@media(max-width:900px){ .set-grid { grid-template-columns: 1fr !important; } }
.dash-sec-row:hover{background:var(--s2)}
.dash-prod-row td{border-bottom:none!important}

/* ═══════════════ PEDIDOS REDESIGN ═══════════════ */
.ped-card2 {
  background: var(--s1);
  border: 1.5px solid var(--b1);
  border-radius: 14px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color .2s;
}
.ped-card2:hover { border-color: var(--or); }

.ped-card2-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
}
.ped-card2-head:hover { background: rgba(255,255,255,.02); }

.ped-num2 {
  font-size: .6rem;
  font-weight: 900;
  color: var(--tx4);
  letter-spacing: .5px;
  background: var(--s3);
  padding: 1px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

.ped-chevron2 {
  font-size: .6rem;
  color: var(--tx4);
  flex-shrink: 0;
  margin-left: 4px;
}

.ped-card2-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-top: 1px solid var(--b1);
  background: var(--s2);
  flex-wrap: wrap;
}

.ped-btn2 {
  font-size: .68rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--b2);
  background: var(--s3);
  color: var(--tx2);
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  transition: background .15s;
}
.ped-btn2:hover { background: var(--s4); }
.ped-btn2-wpp { color: #22c55e; border-color: rgba(34,197,94,.3); }
.ped-btn2-wpp:hover { background: rgba(34,197,94,.1); }

.ped-sel2 {
  font-size: .72rem;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--b2);
  background: var(--s1);
  color: var(--tx);
  font-family: inherit;
  cursor: pointer;
  outline: none;
  min-width: 130px;
}

.ped-tag {
  font-size: .56rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}
.ped-tag-ret {
  background: rgba(99,102,241,.12);
  color: #818cf8;
  border: 1px solid rgba(99,102,241,.2);
}

.ped-timer2 { flex-shrink: 0; }

.ped-card2-det {
  padding: 12px 14px;
  border-top: 1px solid var(--b1);
}

.ped-det-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.ped-det-meta span {
  font-size: .7rem;
  color: var(--tx3);
  background: var(--s3);
  padding: 2px 8px;
  border-radius: 5px;
}

.ped-det-addr {
  font-size: .74rem;
  color: var(--tx3);
  margin-bottom: 10px;
  padding: 8px 10px;
  background: var(--s3);
  border-radius: 8px;
}
.ped-det-ret { color: #22c55e; background: rgba(34,197,94,.08); }

.ped-itens2 {
  background: var(--s2);
  border-radius: 10px;
  padding: 8px 10px;
  border: 1px solid var(--b1);
}

/* Date group */
.ped-dg {
  margin-bottom: 12px;
  border: 1px solid var(--b1);
  border-radius: 14px;
  overflow: hidden;
}
.ped-dg-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--s2);
  border: none;
  cursor: pointer;
  text-align: left;
  gap: 10px;
}
.ped-dg-head:hover { background: var(--s3); }
.ped-dg-label { font-size: .8rem; font-weight: 800; color: var(--tx); }
.ped-dg-sub   { font-size: .68rem; color: var(--tx4); }
.ped-dg-stats { font-size: .7rem; font-weight: 700; color: var(--tx3); white-space: nowrap; }
.ped-dg-dot   { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ped-dg-body  { padding: 10px; }
.ped-dg-body .ped-card2:last-child { margin-bottom: 0; }

@media(max-width:600px){
  .ped-card2-head { padding: 10px 12px; }
  .ped-card2-bar  { padding: 7px 12px; }
  .ped-card2-det  { padding: 10px 12px; }
  .ped-dg-body    { padding: 8px; }
  .ped-sel2       { min-width: 110px; font-size: .68rem; }
  .ped-filt-grid  { grid-template-columns: 1fr !important; }
}

/* ═══════════════ PEDIDOS CARD V3 ═══════════════ */
.ped-card3 {
  background: var(--s1);
  border: 1px solid var(--b1);
  border-left: 3px solid var(--b1);
  border-radius: 10px;
  margin-bottom: 8px;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.ped-card3:hover { box-shadow: 0 2px 12px rgba(0,0,0,.12); }

.ped3-head {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 12px 14px 10px;
  cursor: pointer;
  user-select: none;
  transition: background .12s;
}
.ped3-head:hover { background: rgba(255,255,255,.02); }

.ped3-num {
  font-size: .6rem;
  font-weight: 700;
  color: var(--tx4);
  letter-spacing: .4px;
}

.ped3-tag-ret {
  font-size: .55rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(99,102,241,.1);
  color: #a5b4fc;
  border: 1px solid rgba(99,102,241,.2);
}

.ped3-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .9rem;
  font-weight: 900;
  color: var(--or);
  white-space: nowrap;
  border-top: 1px solid var(--b1);
  padding-top: 7px;
  margin-top: 4px;
}

.ped3-sub-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .72rem;
  color: var(--tx3);
  padding: 3px 0;
}

.ped3-timer {
  font-size: .6rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  white-space: nowrap;
}

.ped3-chev {
  color: var(--tx4);
  margin-top: 2px;
}

.ped3-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-top: 1px solid var(--b1);
  background: var(--s2);
  flex-wrap: wrap;
}

.ped3-badge {
  font-size: .62rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 5px;
  flex-shrink: 0;
}

.ped3-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .68rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--b2);
  background: var(--s1);
  color: var(--tx3);
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.ped3-btn:hover { background: var(--s3); border-color: var(--b3); }
.ped3-btn-g:hover { background: var(--s3); }

.ped3-sel {
  font-size: .72rem;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--b2);
  background: var(--s1);
  color: var(--tx);
  font-family: inherit;
  cursor: pointer;
  outline: none;
  min-width: 120px;
  max-width: 100%;
}

.ped3-det {
  padding: 12px 14px;
  border-top: 1px solid var(--b1);
}

/* Info do pedido — sem caixa, uma linha por dado */
.ped3-info-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
}

.ped3-chip {
  font-size: .72rem;
  color: var(--tx3);
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Ícones em laranja (cor da marca) — pedido do user pra padronizar
   com os outros SVGs orange do sistema. Texto continua var(--tx3). */
.ped3-chip svg, .ped3-addr svg { flex-shrink: 0; color: var(--or); }

.ped3-addr {
  font-size: .72rem;
  color: var(--tx3);
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 12px;
  line-height: 1.45;
}
.ped3-addr svg { margin-top: 2px; }
.ped3-addr-ret {
  color: #4ade80;
}
/* Retirada mantém o ícone verde junto com o texto — exceção à regra
   laranja de cima (.ped3-addr svg) pra ficar visualmente coeso. */
.ped3-addr-ret svg { color: inherit; }

/* Itens — sem caixa, separados da info por um traço */
.ped3-itens {
  border-top: 1px solid var(--b1);
  padding-top: 8px;
}

/* Ações do detalhe do card — WPP / NF lado a lado, acima de "Editar" */
.ped3-act-row { display: flex; gap: 6px; margin-top: 10px; }
.ped3-act-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  border-radius: 8px;
  background: var(--s3);
  border: 1px solid var(--b2);
  color: var(--tx2);
  font-size: .72rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.ped3-act-btn:hover { border-color: var(--or); color: var(--or); }
.ped3-act-btn.is-wpp:hover { border-color: #22c55e; color: #22c55e; }

/* Botão "Editar pedido" no detalhe do card */
.ped3-edit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  border-radius: 8px;
  background: var(--s3);
  border: 1px solid var(--b2);
  color: var(--tx2);
  font-size: .72rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.ped3-edit-btn:hover { border-color: var(--or); color: var(--or); }

/* Timer do pedido — tempo desde a criação (cor setada via JS) */
.ped3-timer {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .6rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 5px;
  white-space: nowrap;
}

/* Total do pedido — abaixo dos itens */
.ped3-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  padding-top: 7px;
  border-top: 1px solid var(--b1);
  font-size: .82rem;
  font-weight: 800;
  color: var(--tx);
}
.ped3-total span:last-child { color: var(--or); }

/* Grupos de data v3 */
.ped-dg3 {
  margin-bottom: 14px;
}
.ped-dg3-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: 10px;
  margin-bottom: 8px;
}
.ped-dg3-label { font-size: .76rem; font-weight: 800; color: var(--tx); }
.ped-dg3-sub   { font-size: .66rem; color: var(--tx4); margin-left: 4px; }
.ped-dg3-dot   { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.ped-dg3-stats { font-size: .68rem; color: var(--tx4); white-space: nowrap; }
.ped-dg3-sep   { flex: 1; height: 1px; background: var(--b1); margin: 0 8px; }

@media(max-width:600px){
  .ped3-head    { padding: 10px 12px 8px; }
  .ped3-actions { padding: 7px 12px; }
  .ped3-det     { padding: 10px 12px; }
  .ped3-sel     { min-width: 100px; font-size: .68rem; }
}

/* ── Bloquear scroll do fundo quando popup/modal ativo ── */
html.modal-open {
  overflow: hidden !important;
}
html.modal-open body {
  overflow: hidden !important;
  /* iOS Safari: impede scroll elástico no fundo */
  position: fixed !important;
  width: 100% !important;
}

/* ── Prevenir auto-zoom iOS em inputs (font-size >= 16px no focus) ── */
@media (max-width: 768px){
  input, select, textarea, [contenteditable] {
    font-size: 16px !important;
  }
}

/* ── Prevenir double-tap zoom iOS ── */
button, a, [onclick], .btn, select, label, input[type="button"], input[type="submit"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

@media(max-width:600px){.sup-2col{grid-template-columns:1fr!important}.sup-form-grid{grid-template-columns:1fr!important}}

/* ── Suporte: responsivo mobile (≤600px) ─────────────────── */
@media(max-width:600px){
  /* Cards WPP + Videoaulas: 1 coluna */
  .sup-contacts{grid-template-columns:1fr!important}

  /* Card individual: mais compacto */
  .sup-card{padding:14px 16px}
  .sup-card-desc{display:none}

  /* Formulário de chamado: campos em coluna */
  .sup-form-grid{grid-template-columns:1fr!important}

  /* Meus Chamados: lista em coluna full-width */
  #meusChamadosList{
    flex-direction:column!important;
    gap:8px!important;
  }
  #meusChamadosList button{
    width:100%!important;
    min-width:unset!important;
  }
}

@media(max-width:600px){
  #meusChamadosList{ padding:10px 16px!important; }
}



/* ── Links Rastreáveis — tabela Ads Manager responsiva ───── */
#lkMetricsWrap {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
#lkMetricsWrap::-webkit-scrollbar { height: 8px; }
#lkMetricsWrap::-webkit-scrollbar-track { background: var(--s1); }
#lkMetricsWrap::-webkit-scrollbar-thumb {
  background: var(--b2);
  border-radius: 4px;
}
#lkMetricsAdsTable th,
#lkMetricsAdsTable td {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 768px) {
  #lkMetricsAdsTable {
    font-size: .72rem !important;
  }
  #lkMetricsAdsTable th,
  #lkMetricsAdsTable td {
    padding: 10px 12px !important;
  }
  /* Filtros ocupam linha inteira no mobile */
  #pg-links select.sel,
  #pg-links input.inp {
    width: 100%;
  }
}






/* ════════════════════════════════════════════════════════════
 *  Links Rastreáveis — tabela responsiva
 *  Desktop: largura total (1fr por coluna)
 *  Mobile:  scroll horizontal preservando scroll vertical
 * ════════════════════════════════════════════════════════════ */

/* Wrapper rolável horizontal */
.lk-table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* CRÍTICO: permite scroll vertical da página passar pelo elemento */
  touch-action: pan-x pan-y;
  border-radius: 0 0 20px 20px;
  width: 100%;
}
.lk-table-wrap::-webkit-scrollbar { height: 6px; }
.lk-table-wrap::-webkit-scrollbar-track { background: transparent; }
.lk-table-wrap::-webkit-scrollbar-thumb {
  background: var(--b2);
  border-radius: 4px;
}

/* Linha — flexbox */
.lk-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--b1);
  transition: background .15s;
}
.lk-row:last-child { border-bottom: none; }
.lk-row:hover:not(.lk-head) { background: var(--s1); }

/* Cabeçalho */
.lk-head {
  background: var(--s1);
}
.lk-head .lk-cell {
  font-size: .62rem;
  font-weight: 700;
  color: var(--tx3);
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 12px 14px;
}

/* Célula */
.lk-cell {
  flex: 1 1 0;
  min-width: 0;
  padding: 13px 14px;
  font-size: .78rem;
  color: var(--tx2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.lk-cell.t-right { text-align: right; }

/* Coluna Link — 2x mais larga */
.lk-c-link {
  flex: 2 1 0;
  text-align: left;
}

/* Mobile: força largura mínima e habilita scroll horizontal */
@media (max-width: 900px) {
  .lk-row {
    min-width: 880px;
  }
  .lk-cell {
    flex: 0 0 84px;
    padding: 11px 10px;
    font-size: .72rem;
  }
  .lk-c-link {
    flex: 0 0 150px;
  }
  .lk-head .lk-cell {
    padding: 10px 10px;
    font-size: .58rem;
  }
  /* Última célula com padding direito extra */
  .lk-cell:last-child {
    padding-right: 16px;
  }
  /* Filtros 100% width */
  #pg-links select.sel,
  #pg-links input.inp {
    width: 100%;
  }
}

/* ── Card de link no modal Meus Links — responsivo mobile ─── */
@media (max-width: 600px) {
  /* Wrap controlado: input em uma linha, botões em outra */
  #lkDetailsBody .lk-link-actions {
    flex-wrap: wrap !important;
  }
  #lkDetailsBody .lk-link-actions > input {
    flex: 1 1 100% !important;
    width: 100%;
  }
  #lkDetailsBody .lk-link-actions > button {
    flex: 1 1 0 !important;
  }
  /* Botão Copiar ocupa maior parte, Excluir mais estreito */
  #lkDetailsBody .lk-link-actions > button:first-of-type {
    flex: 3 1 0 !important;
  }
  #lkDetailsBody .lk-link-actions > button:last-of-type {
    flex: 0 0 48px !important;
  }
}

/* ── Modal Ver Link — responsivo mobile ─────────────────────── */
@media (max-width: 480px) {
  .lk-view-actions {
    flex-wrap: wrap !important;
  }
  .lk-view-actions input {
    flex: 1 1 100% !important;
    width: 100%;
  }
  .lk-view-actions button {
    flex: 1 1 100% !important;
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Barra de "Plano suspenso" (painel expirado) — EMPURRA todo o layout
   pra baixo em vez de cobrir a logo e a topbar. A barra em si é um
   overlay fixo no topo (criado em banners-ui.js). Sem isto, ela ficava
   por cima da .sb-logo e da .topbar (z-index alto), escondendo tudo
   naquela faixa. Só ativa com a classe .dv-plan-bar no <body> (que só
   existe quando o plano está vencido) → zero efeito no uso normal.
   ═══════════════════════════════════════════════════════════════════ */
body.dv-plan-bar{ --plan-bar-h:44px; }
/* Sidebar (logo + menu) desce pra baixo da barra e encurta a altura. */
body.dv-plan-bar .sb{ top:var(--plan-bar-h); height:calc(100dvh - var(--plan-bar-h)); }
/* Topbar (chip do usuário / menu) desce junto — soma o safe-area do iOS. */
body.dv-plan-bar .topbar{ top:calc(var(--safe-top,0px) + var(--plan-bar-h)) !important; }
/* Conteúdo da página desce com a topbar (a .pg já reserva o topo da topbar). */
body.dv-plan-bar .main{ margin-top:var(--plan-bar-h); min-height:calc(100dvh - var(--plan-bar-h)); }
/* Em PWA (notch iOS) a barra fica abaixo da área segura, não sob o notch. */
body.dv-plan-bar #plano-expirado-overlay{ top:var(--safe-top,0px) !important; }

/* ═══════════════════════════════════════════════════════════════════
   "Pegada" do onboarding no modal de FUNCIONÁRIO + popup "Criar acesso":
   títulos (labels) em laranja, caixas de escrita limpas com foco laranja e
   botão principal em gradiente. Escopado nesses dois modais — não mexe no
   resto do painel nem no tema escuro.
   ═══════════════════════════════════════════════════════════════════ */
#userModal .lbl, #empConfirmModal .lbl{ color:var(--or); font-size:.6rem; letter-spacing:.8px; }
#userModal .inp, #userModal .sel, #empConfirmModal .inp{
  border-radius:var(--r2); padding:11px 14px; transition:var(--tr);
}
#userModal .inp:focus, #userModal .sel:focus, #empConfirmModal .inp:focus{
  border-color:var(--or); box-shadow:0 0 0 3px var(--orD);
}
#userModal .btn-or, #empConfirmModal .btn-or{
  background:linear-gradient(135deg,var(--or),var(--or2)); border:none;
  font-weight:800; box-shadow:0 6px 16px rgba(232,73,30,.22);
}
#userModal .btn-or:hover, #empConfirmModal .btn-or:hover{
  background:linear-gradient(135deg,var(--or),var(--or2)); filter:brightness(1.06); transform:translateY(-1px);
}
#userModal .mhead h3, #empConfirmModal .mhead h3{ color:var(--or); }