:root{
  /* ── PALETA PREMIUM GLOBAL — AZUL / BRANCO / VERMELHO ── */
  --bg:#070b14;--surface:#0c1220;--card:rgba(12,20,40,0.85);--card2:rgba(18,28,52,0.7);
  --br:rgba(37,99,235,0.12);--br2:rgba(37,99,235,0.22);
  --green:#22c55e;--blue:#2563eb;--amber:#f59e0b;--red:#ef4444;
  --purple:#a855f7;--teal:#06b6d4;--pink:#f43f5e;--orange:#f97316;
  --text:#c8d4e8;--muted:#3d5070;--muted2:#5c7090;--h:#eef2ff;--r:14px;--rsm:10px;
  --primary:#2563eb;--primary-glow:rgba(37,99,235,0.4);
  --glass:rgba(37,99,235,0.04);--glass-border:rgba(37,99,235,0.12);
  /* papel atual — sobrescrito via JS */
  --role-color:#2563eb;--role-glow:rgba(37,99,235,0.35);--role-bg:rgba(37,99,235,0.08);
  /* Cores do cliente — azul/branco/vermelho */
  --cli-primary:#1d4ed8;
  --cli-primary-dark:#1e3a8a;
  --cli-primary-light:#eff6ff;
  --cli-secondary:#dc2626;
  --cli-bg:#f8fafc;
  --cli-card:#ffffff;
  --cli-card2:#f1f5f9;
  --cli-text:#1e293b;
  --cli-muted:#64748b;
  --cli-border:#e2e8f0;
  --cli-shadow:0 2px 12px rgba(30,64,175,0.08);
  --brand-red:#dc2626;
  --brand-green:#16a34a;
  --brand-ink:#10213f;
  --brand-glow:rgba(220,38,38,0.22);
}

/* Assinatura de marca compartilhada entre o acesso e o sistema. */
.login-logo,.tb-logo{position:relative;font-weight:800;letter-spacing:0;color:var(--h);}
.login-logo img,.tb-logo img{border:2px solid rgba(255,255,255,.82);box-shadow:0 0 0 4px rgba(220,38,38,.18),0 5px 16px var(--brand-glow)!important;}
.login-logo::after,.tb-logo::after{content:'';position:absolute;left:0;bottom:-8px;width:18px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--brand-red) 0 50%,var(--brand-green) 50%);}
body.modo-cliente .login-logo,body.modo-cliente .tb-logo{color:var(--brand-ink)!important;}
body.modo-cliente .login-logo img,body.modo-cliente .tb-logo img{border-color:var(--brand-red);}

/* ===== MELHORIAS GERAIS PREMIUM ===== */

/* TOPBAR COM GRADIENTE SUTIL POR PAPEL */
body.role-gestor .topbar{background:linear-gradient(90deg,rgba(7,11,20,0.96),rgba(30,20,5,0.92))!important;}
body.role-motorista .topbar{background:linear-gradient(90deg,rgba(7,11,20,0.96),rgba(0,18,28,0.92))!important;}
body.role-atendente .topbar{background:linear-gradient(90deg,rgba(7,11,20,0.96),rgba(18,5,28,0.92))!important;}
body.role-separador .topbar{background:linear-gradient(90deg,rgba(7,11,20,0.96),rgba(28,12,4,0.92))!important;}

/* KPI COM BORDA E HOVER */
.kpi{transition:all .25s!important;}
body[class*="role-"] .kpi{border-left:3px solid var(--role-color,#2563eb)!important;}
body[class*="role-"] .kpi:hover{transform:translateY(-2px);box-shadow:0 6px 20px var(--role-glow,rgba(37,99,235,0.3))!important;}

/* CART ITEM REMOÇÃO ANIMADA */
.cart-item{transition:transform .25s,opacity .25s;}
.cart-item.removing{transform:translateX(100%);opacity:0;height:0;padding:0;overflow:hidden;}

/* SEPARADOR GRADIENTE */
.sep-divider{height:1px;background:linear-gradient(90deg,transparent,var(--role-color,#2563eb),transparent);margin:12px 0;opacity:.3;}

/* FOOTER DISCRETO */
.app-footer{text-align:center;padding:6px;font-size:9px;color:var(--muted);border-top:1px solid var(--glass-border);flex-shrink:0;}

/* SCROLL SUAVE */
html{scroll-behavior:smooth;}

/* ===== MODO CLIENTE — TEMA AZUL/BRANCO ===== */
body.modo-cliente{
  background:var(--cli-bg)!important;color:var(--cli-text)!important;
}
body.modo-cliente .topbar{
  background:#fff!important;border-bottom:2px solid var(--cli-primary)!important;
  box-shadow:0 2px 12px rgba(30,64,175,0.1)!important;
}
body.modo-cliente .tb-logo{color:var(--cli-primary)!important;}
body.modo-cliente .sidebar{background:#fff!important;border-right:1px solid var(--cli-border)!important;}
body.modo-cliente .main{background:var(--cli-bg)!important;}
body.modo-cliente .ni{color:var(--cli-muted)!important;}
body.modo-cliente .ni:hover{background:var(--cli-primary-light)!important;color:var(--cli-primary)!important;}
body.modo-cliente .ni.active{background:var(--cli-primary-light)!important;color:var(--cli-primary)!important;}
body.modo-cliente .card,.modo-cliente .card2{
  background:var(--cli-card)!important;border-color:var(--cli-border)!important;
  box-shadow:var(--cli-shadow)!important;
}
body.modo-cliente .fi,.modo-cliente .fsel{
  background:#fff!important;border-color:var(--cli-border)!important;
  color:var(--cli-text)!important;
}
body.modo-cliente .fi:focus{border-color:var(--cli-primary)!important;}
body.modo-cliente .pg-title{color:var(--cli-text)!important;}
body.modo-cliente .pg-sub{color:var(--cli-muted)!important;}
body.modo-cliente .st{color:var(--cli-text)!important;}

/* HERO DO CATÁLOGO — AZUL 3D */
body.modo-cliente .cat-hero{
  background:linear-gradient(135deg,#1e3a8a 0%,#1d4ed8 50%,#2563eb 100%)!important;
  box-shadow:0 8px 32px rgba(29,78,216,0.4),inset 0 1px 0 rgba(255,255,255,0.1)!important;
}
/* TABS DE CATEGORIA — AZUL */
body.modo-cliente .cat-tab{
  background:#f1f5f9!important;color:var(--cli-muted)!important;border-color:var(--cli-border)!important;
}
body.modo-cliente .cat-tab.active{
  background:linear-gradient(135deg,var(--cli-primary),#3b82f6)!important;
  color:#fff!important;box-shadow:0 4px 12px rgba(29,78,216,0.35)!important;
}
/* PRODUCT CARDS — BRANCO */
body.modo-cliente .prod-card{
  background:#fff!important;border-color:var(--cli-border)!important;
  box-shadow:0 2px 10px rgba(30,64,175,0.07)!important;
}
body.modo-cliente .prod-card:hover{
  border-color:var(--cli-primary)!important;
  box-shadow:0 8px 28px rgba(29,78,216,0.18)!important;
}
body.modo-cliente .prod-nome{color:var(--cli-text)!important;}
body.modo-cliente .prod-desc{color:var(--cli-muted)!important;}
body.modo-cliente .prod-preco{color:var(--cli-primary)!important;}
body.modo-cliente .prod-add{
  background:linear-gradient(135deg,var(--cli-primary),#3b82f6)!important;
  color:#fff!important;box-shadow:0 3px 10px rgba(29,78,216,0.35)!important;
}
body.modo-cliente .prod-add:hover{box-shadow:0 5px 16px rgba(29,78,216,0.5)!important;}
body.modo-cliente .prod-badge{background:linear-gradient(135deg,var(--cli-secondary),#b91c1c)!important;color:#fff!important;}
/* BARRA DE CARRINHO — AZUL */
body.modo-cliente .cart-bar-fixed{
  background:linear-gradient(135deg,var(--cli-primary-dark),var(--cli-primary))!important;
}
/* BOTÕES */
body.modo-cliente .btn-green{background:var(--cli-primary)!important;color:#fff!important;}
body.modo-cliente .btn-blue{background:var(--cli-primary)!important;}
body.modo-cliente .btn-red{background:var(--cli-secondary)!important;}
/* CONFIRMAÇÃO */
body.modo-cliente .conf-hero{background:linear-gradient(135deg,var(--cli-primary-dark),var(--cli-primary))!important;}
/* CART ITEMS */
body.modo-cliente .cart-item{border-color:var(--cli-border)!important;}
body.modo-cliente .cart-item-nome{color:var(--cli-text)!important;}
body.modo-cliente .cart-item-preco{color:var(--cli-muted)!important;}
body.modo-cliente .cart-item-subtotal{color:var(--cli-primary)!important;}
body.modo-cliente .qty-btn{border-color:var(--cli-border)!important;background:#fff!important;color:var(--cli-text)!important;}
body.modo-cliente .qty-btn:hover{border-color:var(--cli-primary)!important;color:var(--cli-primary)!important;background:var(--cli-primary-light)!important;}
/* CARRINHO SUMMARY */
body.modo-cliente .cart-summary{
  background:linear-gradient(135deg,rgba(29,78,216,0.06),rgba(59,130,246,0.04))!important;
  border-color:rgba(29,78,216,0.2)!important;
}
body.modo-cliente .cart-total-value{color:var(--cli-primary)!important;}
/* CHECKOUT STEPS */
body.modo-cliente .step-circle.done,.modo-cliente .step-circle.active{
  background:var(--cli-primary)!important;color:#fff!important;
}
body.modo-cliente .step-line.done{background:var(--cli-primary)!important;}
/* NOTIF */
body.modo-cliente .notif{border-color:var(--cli-primary)!important;}
body.modo-cliente .notif-title{color:var(--cli-primary)!important;}
/* MODAL */
body.modo-cliente .modal-ov{background:rgba(0,0,0,0.6)!important;}
body.modo-cliente .modal{background:#fff!important;border-color:var(--cli-border)!important;color:var(--cli-text)!important;}
body.modo-cliente .modal-title{color:var(--cli-text)!important;}
body.modo-cliente .modal-sub{color:var(--cli-muted)!important;}
/* CARD BADGES */
body.modo-cliente .bdg.b-ok{background:rgba(29,78,216,0.1)!important;color:var(--cli-primary)!important;}
body.modo-cliente .bdg.b-go{background:rgba(29,78,216,0.08)!important;color:var(--cli-primary)!important;}
/* RASTREIO */
body.modo-cliente .track-hero{background:linear-gradient(135deg,var(--cli-primary-dark),var(--cli-primary))!important;border-color:rgba(59,130,246,0.3)!important;}
/* SUGESTÃO + AVALIAÇÃO NO MODAL */
body.modo-cliente .sug-item:hover{background:var(--cli-primary-light)!important;}
/* PROX BANNER */
body.modo-cliente .prox-banner{background:rgba(29,78,216,0.06)!important;border-color:rgba(29,78,216,0.25)!important;}
/* ETA BADGE */
body.modo-cliente .eta-badge{background:rgba(29,78,216,0.1)!important;border-color:rgba(29,78,216,0.2)!important;color:var(--cli-primary)!important;}
/* LOGIN TELA */
body.modo-cliente #login-tela{background:linear-gradient(135deg,#eff6ff 0%,#dbeafe 100%)!important;}
/* HERO STAT */
body.modo-cliente .cat-hero-stat{background:rgba(255,255,255,0.2)!important;}
*{box-sizing:border-box;margin:0;padding:0;}
html{height:100%;background:var(--bg);}
/* body sem background sólido de propósito: body::before (FUNDO MESH ANIMADO,
   mais abaixo) pinta atrás dela com z-index:-1 — um background aqui em cima
   tampava o mesh inteiro, então o tema escuro nunca mostrava o gradiente
   pulsante que já existia no CSS, só a cor sólida por baixo. Tema claro/
   público continua igual: [data-theme="light"] body e body.modo-publico
   (ambos mais abaixo) já definem o próprio background explicitamente. */
body{height:100%;font-family:'Poppins',sans-serif;color:var(--text);font-size:14px;line-height:1.6;overflow-x:hidden;}
/* REGRA NUCLEAR — garante que só página ativa aparece */
.page:not(.active){display:none!important;}
.page.active{display:block!important;}

/* ============================================================
   DESIGN POR PAPEL — cada role tem sua identidade visual
   ============================================================ */

/* GESTOR — Dourado / Autoridade */
body.role-gestor{--role-color:#f59e0b;--role-glow:rgba(245,158,11,0.35);--role-bg:rgba(245,158,11,0.08);}
body.role-gestor .topbar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#f59e0b,transparent);}
body.role-gestor .pg-title::before{content:'👔 ';font-size:14px;}

/* MOTORISTA — Ciano / Velocidade */
body.role-motorista{--role-color:#06b6d4;--role-glow:rgba(6,182,212,0.35);--role-bg:rgba(6,182,212,0.08);}
body.role-motorista .topbar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#06b6d4,transparent);}

/* AJUDANTE — Rosa / Suporte */
body.role-ajudante{--role-color:#f43f5e;--role-glow:rgba(244,63,94,0.35);--role-bg:rgba(244,63,94,0.08);}
body.role-ajudante .topbar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#f43f5e,transparent);}

/* CLIENTE — Azul Céu / Amigável */
body.role-cliente{--role-color:#0ea5e9;--role-glow:rgba(14,165,233,0.35);--role-bg:rgba(14,165,233,0.08);}
body.role-cliente .topbar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#0ea5e9,transparent);}

/* ESCRITÓRIO — Azul Business */
body.role-escritorio,body.role-esc{--role-color:#2563eb;--role-glow:rgba(37,99,235,0.35);--role-bg:rgba(37,99,235,0.08);}
body.role-escritorio .topbar::after,body.role-esc .topbar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#2563eb,transparent);}

/* ATENDENTE — Roxo / Serviço */
body.role-atendente,body.role-at{--role-color:#8b5cf6;--role-glow:rgba(139,92,246,0.35);--role-bg:rgba(139,92,246,0.08);}
body.role-atendente .topbar::after,body.role-at .topbar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#8b5cf6,transparent);}

/* SEPARADOR — Laranja / Ação */
body.role-separador,body.role-sep{--role-color:#f97316;--role-glow:rgba(249,115,22,0.35);--role-bg:rgba(249,115,22,0.08);}
body.role-separador .topbar::after,body.role-sep .topbar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#f97316,transparent);}

/* DEV — Índigo / mantenedor externo do sistema (mesmo acesso do gestor) */
body.role-dev{--role-color:#6366f1;--role-glow:rgba(99,102,241,0.35);--role-bg:rgba(99,102,241,0.08);}
body.role-dev .topbar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#6366f1,transparent);}
body.role-dev .pg-title::before{content:'🛠️ ';font-size:14px;}
.role-dev{background:rgba(99,102,241,0.15);color:#6366f1;}

/* VENDEDOR — Esmeralda / Campo (venda externa, aguarda confirmação) */
body.role-vendedor{--role-color:#10b981;--role-glow:rgba(16,185,129,0.35);--role-bg:rgba(16,185,129,0.08);}
body.role-vendedor .topbar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#10b981,transparent);}
.role-vend{background:rgba(16,185,129,0.15);color:#10b981;}
body.role-vendedor #esc-balcao-retirada-wrap{display:none;}
body.role-vendedor #esc-vend-aviso{display:block!important;}
body.role-vendedor #esc-novo-pedido-voltar{display:none;}

/* APLICAÇÃO UNIVERSAL DAS CORES POR PAPEL */
body[class*="role-"] .ni.active{
  background:var(--role-bg)!important;
  color:var(--role-color)!important;
  box-shadow:inset 3px 0 0 var(--role-color)!important;
}
body[class*="role-"] .ni:hover{
  background:var(--role-bg)!important;
  color:var(--role-color)!important;
}
body[class*="role-"] .tb-role{
  background:var(--role-bg)!important;
  color:var(--role-color)!important;
}
/* btn-green SEMPRE azul para clientes e modo público — nunca laranja */
body.role-cliente .btn-green,
body.modo-publico .btn-green{
  background:linear-gradient(135deg,#1d4ed8,#2563eb)!important;
  color:#fff!important;box-shadow:0 4px 12px rgba(37,99,235,0.4)!important;
}
/* Outros papéis usam a cor do papel */
body.role-gestor .btn-green{background:linear-gradient(135deg,#b45309,#f59e0b)!important;color:#000!important;box-shadow:0 4px 12px rgba(245,158,11,0.4)!important;}
body.role-motorista .btn-green{background:linear-gradient(135deg,#0e7490,#06b6d4)!important;color:#000!important;box-shadow:0 4px 12px rgba(6,182,212,0.4)!important;}
body.role-ajudante .btn-green{background:linear-gradient(135deg,#be185d,#f43f5e)!important;color:#fff!important;box-shadow:0 4px 12px rgba(244,63,94,0.4)!important;}
body.role-escritorio .btn-green{background:linear-gradient(135deg,#1d4ed8,#2563eb)!important;color:#fff!important;box-shadow:0 4px 12px rgba(37,99,235,0.4)!important;}
body.role-atendente .btn-green{background:linear-gradient(135deg,#6d28d9,#8b5cf6)!important;color:#fff!important;box-shadow:0 4px 12px rgba(139,92,246,0.4)!important;}
body.role-separador .btn-green{background:linear-gradient(135deg,#c2410c,#f97316)!important;color:#fff!important;box-shadow:0 4px 12px rgba(249,115,22,0.4)!important;}
body[class*="role-"] .kpi-n{color:var(--role-color)!important;}
body[class*="role-"] .prog{background:var(--role-color)!important;}
body[class*="role-"] .b-ok{background:var(--role-bg)!important;color:var(--role-color)!important;}

/* TOPBAR com posição relativa para o after */
.topbar{position:relative;}

/* SIDEBAR MOBILE — DRAWER DESLIZANTE */
@media(max-width:768px){
  .sidebar{
    position:fixed!important;left:0;top:50px;bottom:0;
    z-index:350;transform:translateX(-100%);
    transition:transform .3s cubic-bezier(.4,0,.2,1)!important;
    width:220px!important;box-shadow:4px 0 24px rgba(0,0,0,0.5)!important;
  }
  .sidebar.aberto{transform:translateX(0)!important;}
  .sidebar-overlay{position:fixed;inset:0;top:50px;background:rgba(0,0,0,0.5);z-index:349;display:none;}
  .sidebar-overlay.show{display:block;}
  .menu-toggle{display:flex!important;}
  .main{margin-left:0!important;}
  .app-body{flex-direction:column;}
  /* Tabelas (Cadastros, Preços, Funcionários...) têm várias colunas e não
     cabem numa tela de celular — como body/html têm overflow-x:hidden (ver
     comentário de .main acima), sem isso as colunas que não cabiam
     simplesmente sumiam cortadas na borda, sem nenhum jeito de rolar pra
     ver o resto. Agora só a tabela rola, por dentro dela mesma. */
  .tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
}
.menu-toggle{
  display:none;background:none;border:none;cursor:pointer;
  color:var(--role-color);font-size:20px;padding:4px 8px;
  border-radius:8px;transition:all .2s;
}
.menu-toggle:hover{background:var(--role-bg);}

/* MODAL RESPONSIVO */
.modal{max-width:min(490px,92vw)!important;}

/* INPUTS touch-friendly */
.fi,.fsel{min-height:44px;}

/* ======================================================
   TEMA PÚBLICO — CATÁLOGO CLARO (antes do login)
   Branco / Azul / Pouco Vermelho
   ====================================================== */
body.modo-publico,
body.modo-publico #app,
body.modo-publico .main,
body.modo-publico .app-body{
  background:#f0f5ff!important;
  color:#1e293b!important;
}
body.modo-publico{
  --bg:#f0f5ff;--surface:#e8eeff;--card:#ffffff;--card2:#f5f8ff;
  --br:rgba(37,99,235,0.1);--br2:rgba(37,99,235,0.18);
  --text:#1e293b;--muted:#64748b;--muted2:#94a3b8;--h:#0f172a;
}
/* Destrói o mesh escuro completamente no modo público */
body.modo-publico::before,
body.modo-publico::after{display:none!important;content:none!important;}
body.modo-publico .topbar{
  background:rgba(255,255,255,0.95)!important;
  border-bottom:2px solid #2563eb!important;
  box-shadow:0 2px 20px rgba(37,99,235,0.1)!important;
}
body.modo-publico .tb-logo{color:#1d4ed8!important;}
body.modo-publico .btn-entrar{background:linear-gradient(135deg,#1d4ed8,#2563eb)!important;color:#fff!important;border:none!important;}
body.modo-publico .card{background:#fff!important;border-color:rgba(37,99,235,0.12)!important;box-shadow:0 2px 12px rgba(37,99,235,0.07)!important;}
body.modo-publico .fi,.modo-publico .fsel{background:#fff!important;border-color:rgba(37,99,235,0.2)!important;color:#1e293b!important;}
body.modo-publico .fi:focus,.modo-publico .fsel:focus{border-color:#2563eb!important;box-shadow:0 0 0 3px rgba(37,99,235,0.12)!important;}
body.modo-publico .cat-tab{background:#eff6ff!important;color:#64748b!important;border-color:rgba(37,99,235,0.15)!important;}
body.modo-publico .cat-tab.active{background:linear-gradient(135deg,#1d4ed8,#2563eb)!important;color:#fff!important;box-shadow:0 4px 12px rgba(37,99,235,0.35)!important;}
body.modo-publico .prod-card{background:#fff!important;border-color:rgba(37,99,235,0.1)!important;box-shadow:0 2px 12px rgba(37,99,235,0.06)!important;}
body.modo-publico .prod-card:hover{border-color:#2563eb!important;box-shadow:0 8px 28px rgba(37,99,235,0.15)!important;}
body.modo-publico .prod-nome{color:#0f172a!important;}
body.modo-publico .prod-desc{color:#64748b!important;}
body.modo-publico .prod-preco{color:#1d4ed8!important;}
body.modo-publico .prod-add{background:linear-gradient(135deg,#1d4ed8,#2563eb)!important;color:#fff!important;}
body.modo-publico .prod-badge{background:linear-gradient(135deg,#dc2626,#ef4444)!important;color:#fff!important;}
body.modo-publico .sug-item{background:#fff;}
body.modo-publico .sug-item:hover{background:#eff6ff!important;}
body.modo-publico .modal{background:#fff!important;border-color:rgba(37,99,235,0.15)!important;color:#1e293b!important;}
body.modo-publico .modal-title,.modo-publico .lbox-title{color:#0f172a!important;}
body.modo-publico .modal-sub,.modo-publico .lbox-sub{color:#64748b!important;}
body.modo-publico .notif{background:#fff!important;border-color:#2563eb!important;}
body.modo-publico .notif-title{color:#1d4ed8!important;}
body.modo-publico .fl{color:#64748b!important;}
body.modo-publico .pg-title{color:#0f172a!important;}
body.modo-publico .pg-sub{color:#64748b!important;}
body.modo-publico .st{color:#0f172a!important;}
body.modo-publico .cart-bar-fixed{background:linear-gradient(135deg,#1d4ed8,#2563eb)!important;}
body.modo-publico .mini-cart{background:rgba(255,255,255,0.98)!important;border-left:1px solid rgba(37,99,235,0.15)!important;}
body.modo-publico .mini-cart-nome{color:#0f172a!important;}
body.modo-publico .mini-cart-preco{color:#1d4ed8!important;}
body.modo-publico .mini-cart-rem{color:#94a3b8;}
body.modo-publico .mini-cart-rem:hover{color:#ef4444;}
body.modo-publico .cat-hero{box-shadow:0 8px 32px rgba(29,78,216,0.25)!important;}
body.modo-publico .lhint{color:#64748b!important;}
body.modo-publico .lhint code{background:#eff6ff;color:#1d4ed8;}
body.modo-publico #login-tela{background:linear-gradient(135deg,#eff6ff,#e8f4ff)!important;}
body.modo-publico .papel-card{background:#fff!important;border-color:rgba(37,99,235,0.15)!important;}
body.modo-publico .papel-card:hover{box-shadow:0 8px 24px rgba(37,99,235,0.2)!important;}
body.modo-publico .pickup-toggle{border-color:#2563eb;}
body.modo-publico .pickup-btn.active{background:#2563eb;color:#fff;}
/* Modo público — remove o mesh escuro completamente */
body.modo-publico::before{display:none!important;}
/* Scrollbar pública */
body.modo-publico ::-webkit-scrollbar-thumb{background:rgba(37,99,235,0.2);}

/* FUNDO MESH ANIMADO */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 40% at 20% 10%,rgba(37,99,235,0.18) 0%,transparent 60%),
    radial-gradient(ellipse 50% 35% at 80% 90%,rgba(220,38,38,0.1) 0%,transparent 60%),
    radial-gradient(ellipse 40% 30% at 50% 50%,rgba(168,85,247,0.06) 0%,transparent 70%),
    var(--bg);
  animation:meshPulse 8s ease-in-out infinite;
}
@keyframes meshPulse{
  0%,100%{opacity:1;}
  50%{opacity:.7;}
}

/* CARDS GLASSMORPHISM */
.card{
  background:var(--glass)!important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-border)!important;
  border-radius:var(--r)!important;
  padding:14px;
  transition:all .25s;
}
.card:hover{border-color:rgba(37,99,235,0.2)!important;box-shadow:0 8px 32px rgba(0,0,0,0.3)!important;}
.card2{background:rgba(255,255,255,0.03)!important;border:1px solid var(--glass-border)!important;}

/* TOPBAR PREMIUM */
.topbar{
  background:rgba(8,13,26,0.85)!important;
  backdrop-filter:blur(20px)!important;
  border-bottom:1px solid rgba(37,99,235,0.15)!important;
  box-shadow:0 2px 20px rgba(37,99,235,0.08)!important;
}

/* SIDEBAR PREMIUM */
.sidebar{background:rgba(11,18,32,0.9)!important;backdrop-filter:blur(12px)!important;border-right:1px solid var(--glass-border)!important;}
.ni{border-radius:10px!important;transition:all .2s!important;}
.ni:hover{background:rgba(37,99,235,0.1)!important;color:var(--blue)!important;transform:translateX(2px);}
.ni.active{background:rgba(37,99,235,0.15)!important;color:var(--blue)!important;box-shadow:inset 3px 0 0 var(--blue);}

/* BOTÕES PREMIUM — AZUL COMO PRIMÁRIO */
.btn{border-radius:10px!important;font-weight:700!important;transition:all .2s!important;}
/* btn-green agora é AZUL (primário do sistema) */
.btn-green{background:linear-gradient(135deg,#1d4ed8,#2563eb)!important;color:#fff!important;box-shadow:0 4px 12px rgba(37,99,235,0.4)!important;}
.btn-green:hover{box-shadow:0 6px 20px rgba(37,99,235,0.6)!important;transform:translateY(-1px)!important;}
.btn-blue{background:linear-gradient(135deg,#1d4ed8,#2563eb)!important;color:#fff!important;box-shadow:0 4px 12px rgba(37,99,235,0.4)!important;}
.btn-blue:hover{box-shadow:0 6px 20px rgba(37,99,235,0.6)!important;transform:translateY(-1px)!important;}
.btn-red{background:linear-gradient(135deg,#dc2626,#ef4444)!important;color:#fff!important;box-shadow:0 4px 12px rgba(220,38,38,0.35)!important;}
.btn-red:hover{box-shadow:0 6px 20px rgba(220,38,38,0.5)!important;transform:translateY(-1px)!important;}
.btn-gray{background:var(--glass)!important;border:1px solid var(--glass-border)!important;backdrop-filter:blur(8px)!important;}
.btn-purple{background:linear-gradient(135deg,#7c3aed,#8b5cf6)!important;color:#fff!important;}

/* KPI CARDS PREMIUM */
.kpi{background:var(--glass)!important;border:1px solid var(--glass-border)!important;backdrop-filter:blur(8px)!important;}
/* SUBSTITUIÇÃO GLOBAL: verde → azul como cor primária do sistema */
:root:not([data-theme="light"]) .kpi.g .kpi-n{color:#60a5fa!important;}
[data-theme="light"] .kpi.g .kpi-n{color:#1d4ed8!important;}
.ni.active{box-shadow:inset 3px 0 0 var(--role-color,#2563eb)!important;}
.prog{background:linear-gradient(90deg,#2563eb,#3b82f6)!important;}
:root:not([data-theme="light"]) .b-ok{background:rgba(37,99,235,0.1)!important;color:#60a5fa!important;}
:root:not([data-theme="light"]) .b-go{background:rgba(37,99,235,0.08)!important;color:#93c5fd!important;}
[data-theme="light"] .b-ok{background:rgba(37,99,235,0.1)!important;color:#1d4ed8!important;}
[data-theme="light"] .b-go{background:rgba(37,99,235,0.1)!important;color:#1d4ed8!important;}
/* Mantém verde APENAS para estados de sucesso */
:root:not([data-theme="light"]) .status-entregue,:root:not([data-theme="light"]) .bdg.b-ok-verde{background:rgba(34,197,94,0.12)!important;color:#4ade80!important;}
[data-theme="light"] .status-entregue,[data-theme="light"] .bdg.b-ok-verde{background:rgba(34,197,94,0.12)!important;color:#15803d!important;}
/* CAMPO COM ERRO */
.campo-erro{border-color:#ef4444!important;box-shadow:0 0 0 3px rgba(239,68,68,0.2)!important;animation:shake .4s ease!important;}
@keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-6px);}75%{transform:translateX(6px);}}

/* TABELAS PREMIUM */
.tbl th{background:rgba(37,99,235,0.09)!important;border-bottom:2px solid rgba(37,99,235,0.25)!important;}
.tbl tr.clickable:hover td{background:rgba(37,99,235,0.06)!important;}

/* INPUTS PREMIUM — só no tema escuro (ou sem tema definido ainda, antes do
   JS aplicar o salvo): essas regras eram globais com !important, ignorando
   [data-theme="light"] por completo. Campo de formulário/modal/notificação/
   badge ficava sempre com cor de fundo escura fixa mesmo no modo claro —
   texto (que usa var(--h) etc, esse sim adapta ao tema) ficava ilegível em
   cima de um fundo que nunca clareava junto. */
:root:not([data-theme="light"]) .fi,:root:not([data-theme="light"]) .fsel{
  background:rgba(255,255,255,0.04)!important;
  border:1px solid var(--glass-border)!important;
  border-radius:var(--rsm)!important;
  color:var(--h)!important;
  transition:all .2s!important;
}
:root:not([data-theme="light"]) .fi:focus,:root:not([data-theme="light"]) .fsel:focus{border-color:var(--blue)!important;box-shadow:0 0 0 3px rgba(37,99,235,0.15)!important;background:rgba(37,99,235,0.05)!important;outline:none!important;}

/* MODAIS PREMIUM */
:root:not([data-theme="light"]) .modal{background:rgba(11,18,32,0.95)!important;backdrop-filter:blur(24px)!important;border:1px solid rgba(37,99,235,0.15)!important;box-shadow:0 24px 80px rgba(0,0,0,0.6)!important;border-radius:18px!important;}
.modal-ov{background:rgba(0,0,0,0.75)!important;backdrop-filter:blur(4px)!important;}

/* BADGES PREMIUM — cores pastel pensadas pra fundo escuro; no claro usa a
   versão já correta e mais saturada definida mais abaixo (.b-ok/.b-go/
   .b-wait com var(--green)/var(--blue)/var(--amber)). */
.bdg{border-radius:8px!important;}
:root:not([data-theme="light"]) .b-ok{background:rgba(34,197,94,0.12)!important;color:#4ade80!important;}
:root:not([data-theme="light"]) .b-go{background:rgba(37,99,235,0.12)!important;color:#60a5fa!important;}
:root:not([data-theme="light"]) .b-wait{background:rgba(245,158,11,0.12)!important;color:#fbbf24!important;}

/* NOTIFICAÇÃO PREMIUM */
:root:not([data-theme="light"]) .notif{
  background:rgba(11,18,32,0.95)!important;
  backdrop-filter:blur(20px)!important;
  border:1px solid rgba(37,99,235,0.25)!important;
  border-radius:14px!important;
  box-shadow:0 8px 32px rgba(0,0,0,0.4)!important;
}
[data-theme="light"] .notif{
  background:#ffffff!important;
  backdrop-filter:blur(20px)!important;
  border:1px solid var(--br2)!important;
  border-radius:14px!important;
  box-shadow:0 8px 32px rgba(0,0,0,0.12)!important;
  color:var(--h)!important;
}

/* SCROLLBAR PREMIUM */
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(37,99,235,0.3);border-radius:100px;}
::-webkit-scrollbar-thumb:hover{background:rgba(37,99,235,0.5);}
#login{position:fixed;inset:0;z-index:1000;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(34,197,94,0.1),transparent 65%),var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;overflow-y:auto;}
.login-logo{font-family:'Poppins',sans-serif;font-size:26px;font-weight:800;color:var(--green);margin-bottom:4px;}
.login-tag{font-size:12px;color:var(--muted2);margin-bottom:5px;text-align:center;}
.login-ver{font-size:10px;color:var(--muted);margin-bottom:26px;background:rgba(255,255,255,0.04);padding:4px 12px;border-radius:100px;border:1px solid var(--br);}
.lstep{display:none;width:100%;max-width:780px;flex-direction:column;align-items:center;}
.lstep.active{display:flex;}
.lback{display:flex;align-items:center;gap:7px;color:var(--muted2);font-size:12px;cursor:pointer;margin-bottom:16px;transition:color .2s;align-self:flex-start;}
.lback:hover{color:var(--text);}
.pgrid{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;width:100%;}
.pcard{background:var(--card);border:1px solid var(--br2);border-radius:var(--r);padding:22px 16px;text-align:center;cursor:pointer;transition:all .25s;flex:1;min-width:145px;max-width:185px;}
.pcard:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,0.3);}
.pcard.g{border-top:3px solid var(--green);}.pcard.b{border-top:3px solid var(--blue);}
.pcard.p{border-top:3px solid var(--purple);}.pcard.a{border-top:3px solid var(--amber);}
.pci{font-size:36px;display:block;margin-bottom:8px;}
.pcn{font-family:'Poppins',sans-serif;font-size:13px;font-weight:700;color:var(--h);margin-bottom:3px;}
.pcs{font-size:10px;color:var(--muted2);line-height:1.5;}
.lbox{background:var(--card);border:1px solid var(--br2);border-radius:var(--r);padding:26px 22px;width:100%;max-width:350px;}
.lbox-icon{font-size:42px;text-align:center;display:block;margin-bottom:9px;}
.lbox-title{font-family:'Poppins',sans-serif;font-size:16px;font-weight:800;color:var(--h);text-align:center;margin-bottom:3px;}
.lbox-sub{font-size:11px;color:var(--muted2);text-align:center;margin-bottom:18px;}
.fl{display:block;font-size:10px;font-weight:700;color:var(--muted2);margin-bottom:4px;letter-spacing:.5px;text-transform:uppercase;}
.fi{width:100%;background:var(--card2);border:1px solid var(--br2);border-radius:var(--rsm);padding:9px 11px;font-size:13px;color:var(--text);font-family:'Poppins',sans-serif;outline:none;transition:border-color .2s;margin-bottom:11px;}
/* Bolinhas de senha (••••) usando --text ficavam com pouco contraste no
   fundo escuro dos campos — força branco puro só pra elas, sem mexer no
   texto normal dos outros campos. Só no tema escuro (padrão): no toggle
   pra tema claro ([data-theme="light"]) o campo fica com fundo quase
   branco, e bolinha branca ali ficaria invisível — mesmo problema ao
   contrário. modo-publico/modo-cliente já forçam a própria cor com
   !important, então não precisam de exceção aqui. */
:root:not([data-theme="light"]) .fi[type="password"]{color:#fff;caret-color:#fff;}
/* Mesmo motivo do <select> (mais abaixo, color-scheme:light) e da bolinha de
   senha aqui em cima: o navegador tem sua própria ideia de cor pra dentro de
   campo de formulário e pode brigar com o tema escuro do site, deixando o
   texto digitado quase invisível em cima do fundo escuro do campo. Isso
   acontecia não só no .fi/.fsel (Editar Calendário de Rotas, onde foi
   reportado) mas em QUALQUER input/textarea/select do tema escuro — inclusive
   os que nem usam essas classes, tipo .chat-inp (todas as telas de chat) e
   campos com estilo direto no elemento (Metas, itens da nota). Por isso o
   seletor pega a tag inteira, não uma classe específica. Excluindo
   modo-publico/modo-cliente pelo seletor (não por especificidade) — assim a
   regra deles continua valendo sem depender de quem tem !important mais
   forte. #editar-nota-modal tem sua exceção própria logo abaixo, porque esse
   modal é sempre claro de propósito (ver comentário lá). */
html:not([data-theme="light"]) body:not(.modo-publico):not(.modo-cliente) input,
html:not([data-theme="light"]) body:not(.modo-publico):not(.modo-cliente) textarea,
html:not([data-theme="light"]) body:not(.modo-publico):not(.modo-cliente) select{
  color-scheme:dark;
  color:#fff!important;
}
/* Quando o navegador acha que pode autopreencher um campo (login/senha,
   principalmente), ele força o PRÓPRIO fundo do campo (geralmente branco ou
   um tom claro), ignorando o fundo escuro do site — mas a cor do texto
   continua a do tema (clara, feita pra fundo escuro). Resultado: texto claro
   sobre fundo claro forçado pelo navegador = invisível, mesmo com algo
   realmente digitado ali. Esse truque força o autofill a respeitar as
   cores do próprio site em vez das dele. */
.fi:-webkit-autofill,
.fi:-webkit-autofill:hover,
.fi:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text)!important;
  -webkit-box-shadow:0 0 0 1000px var(--card2) inset!important;
  box-shadow:0 0 0 1000px var(--card2) inset!important;
  transition:background-color 9999s ease-in-out 0s;
  caret-color:var(--text);
}
body.modo-publico .fi:-webkit-autofill,
body.modo-publico .fi:-webkit-autofill:hover,
body.modo-publico .fi:-webkit-autofill:focus{
  -webkit-text-fill-color:#1e293b!important;
  -webkit-box-shadow:0 0 0 1000px #fff inset!important;
  box-shadow:0 0 0 1000px #fff inset!important;
}
.fi:focus{border-color:var(--green);}
.fi::placeholder{color:var(--muted);}
.lbtn{width:100%;border:none;border-radius:var(--rsm);padding:11px;font-size:13px;font-weight:700;cursor:pointer;font-family:'Poppins',sans-serif;transition:opacity .2s;margin-top:3px;}
.lbtn:hover{opacity:.88;}
.lbtn-g{background:var(--green);color:#000;}.lbtn-b{background:var(--blue);color:#fff;}
.lbtn-p{background:var(--purple);color:#fff;}.lbtn-a{background:var(--amber);color:#000;}
.lerr{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.22);border-radius:var(--rsm);padding:8px 11px;font-size:11px;color:#f87171;margin-bottom:11px;display:none;}
.lerr.show{display:block;}
.lhint{font-size:10px;color:var(--muted);text-align:center;margin-top:11px;line-height:1.7;}
.lhint code{background:rgba(255,255,255,0.06);padding:1px 5px;border-radius:4px;font-family:monospace;color:var(--muted2);}
#app{display:flex;height:100vh;flex-direction:column;}
/* Modo público: a página deve rolar normalmente (como um site comum), não
   como um app de dashboard com scroll interno preso em 100vh — senão o
   rodapé "vaza" por cima do catálogo antes de terminar de rolar os produtos. */
body.modo-publico #app{height:auto;min-height:100vh;}
body.modo-publico .app-body{overflow:visible;}
body.modo-publico .main{overflow-y:visible;}
body.modo-publico .topbar{position:sticky;top:0;}
.topbar{background:rgba(7,9,14,0.95);backdrop-filter:blur(16px);border-bottom:1px solid var(--br);padding:0 16px;height:50px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;z-index:100;}
.tb-left{display:flex;align-items:center;gap:9px;}
.tb-logo{font-family:'Poppins',sans-serif;font-size:13px;font-weight:800;color:var(--green);}
.tb-role{font-size:10px;font-weight:700;padding:2px 8px;border-radius:100px;letter-spacing:1px;text-transform:uppercase;}
.role-g{background:rgba(34,197,94,0.15);color:var(--green);}
.role-m{background:rgba(59,130,246,0.15);color:var(--blue);}
.role-a{background:rgba(168,85,247,0.15);color:var(--purple);}
.role-c{background:rgba(245,158,11,0.15);color:var(--amber);}
.tb-code{font-size:10px;color:var(--muted);background:rgba(255,255,255,0.05);padding:2px 7px;border-radius:100px;}
.tb-right{display:flex;align-items:center;gap:7px;}
.tb-user{font-size:12px;color:var(--muted2);}
.tb-sair{background:var(--card);border:1px solid var(--br2);border-radius:var(--rsm);padding:4px 10px;font-size:11px;font-weight:600;color:var(--muted2);cursor:pointer;}
.tb-sair:hover{color:var(--text);}
.app-body{display:flex;flex:1;overflow:hidden;}
.sidebar{width:185px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--br);padding:11px 6px;overflow-y:auto;}
.sb-label{font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);padding:0 8px;margin-bottom:4px;margin-top:11px;}
.sb-label:first-child{margin-top:0;}
.ni{display:flex;align-items:center;gap:7px;padding:7px 9px;border-radius:var(--rsm);font-size:11px;font-weight:500;color:var(--muted2);cursor:pointer;transition:all .2s;margin-bottom:2px;}
.ni:hover{background:rgba(255,255,255,0.04);color:var(--text);}
.ni.active{background:rgba(34,197,94,0.1);color:var(--green);}
.ni-icon{font-size:14px;flex-shrink:0;}
.ni-badge{margin-left:auto;background:var(--red);color:#fff;font-size:9px;font-weight:700;padding:1px 5px;border-radius:100px;}
/* .main é item flex dentro de .app-body (flex row); sem min-width:0 o
   flexbox usa min-width:auto por padrão, ou seja, .main nunca encolhe
   abaixo da largura mínima do seu conteúdo. Bastava um elemento lá dentro
   querer alguns px a mais (ex: badges/textos que não quebram linha) pra
   .main inteiro crescer além da tela — e como body/html têm overflow-x
   hidden, esse excesso simplesmente sumia cortado na borda direita (o
   que o usuário via como texto/botão cortado em várias partes da tela).
   min-width:0 deixa .main encolher pra caber de verdade no viewport. */
.main{flex:1;overflow-y:auto;padding:16px;min-width:0;}
.page{display:none;}.page.active{display:block;}
.pg-title{font-family:'Poppins',sans-serif;font-size:18px;font-weight:800;color:var(--h);margin-bottom:3px;}
.pg-sub{font-size:11px;color:var(--muted2);margin-bottom:16px;}
.st{font-family:'Poppins',sans-serif;font-size:12px;font-weight:700;color:var(--h);margin-bottom:9px;}
.card{background:var(--card);border:1px solid var(--br);border-radius:var(--r);padding:14px;}
.card2{background:var(--card2);border:1px solid var(--br2);border-radius:var(--r);padding:14px;}
.g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:12px;}
.g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;}
.g4{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:9px;}
.g5{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:9px;}
.kpi{background:var(--card);border:1px solid var(--br);border-radius:var(--r);padding:13px;text-align:center;}
.kpi-n{font-family:'Poppins',sans-serif;font-size:26px;font-weight:800;line-height:1;display:block;}
.kpi-l{font-size:10px;color:var(--muted2);margin-top:3px;}
.kpi.g .kpi-n{color:var(--green);}.kpi.b .kpi-n{color:var(--blue);}
.kpi.a .kpi-n{color:var(--amber);}.kpi.r .kpi-n{color:var(--red);}.kpi.p .kpi-n{color:var(--purple);}
.bdg{font-size:10px;font-weight:700;padding:2px 8px;border-radius:100px;display:inline-block;}
.b-ok{background:rgba(34,197,94,0.15);color:var(--green);}
.b-go{background:rgba(59,130,246,0.15);color:var(--blue);}
.b-wait{background:rgba(245,158,11,0.15);color:var(--amber);}
.b-gray{background:rgba(255,255,255,0.07);color:var(--muted2);}
.b-purple{background:rgba(168,85,247,0.15);color:var(--purple);}
.b-af{background:rgba(239,68,68,0.1);color:#f87171;}
[data-theme="light"] .b-af{background:rgba(239,68,68,0.1);color:#b91c1c;}

/* MAPA */
.map-cont{position:relative;background:var(--card);border:1px solid var(--br);border-radius:var(--r);overflow:hidden;}
.map-svg{width:100%;height:100%;display:block;}
.map-over{position:absolute;top:8px;right:8px;z-index:5;background:rgba(7,9,14,0.9);border:1px solid var(--br);border-radius:6px;padding:7px 10px;}
.mo-item{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--muted2);margin-bottom:2px;}
.mo-item:last-child{margin-bottom:0;}
.mo-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.map-tag{position:absolute;top:8px;left:8px;z-index:5;background:rgba(7,9,14,0.88);border:1px solid var(--br);border-radius:6px;padding:4px 9px;font-size:9px;font-weight:700;color:rgba(255,255,255,0.35);letter-spacing:1px;}
.mot-mk{position:absolute;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;border:2.5px solid;transform:translate(-50%,-50%);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,0.5);transition:transform .2s;z-index:10;}
.mot-mk:hover{transform:translate(-50%,-50%) scale(1.2);}
.mot-tt{position:absolute;background:rgba(7,9,14,0.96);border:1px solid var(--br2);border-radius:6px;padding:7px 11px;font-size:11px;z-index:20;pointer-events:none;display:none;white-space:nowrap;}
.mot-tt.show{display:block;}

/* ROTA CARDS */
.rota-card{background:var(--card);border:1px solid var(--br);border-radius:var(--r);padding:16px;cursor:pointer;transition:all .22s;margin-bottom:9px;display:flex;align-items:flex-start;gap:12px;}
.rota-card:hover{border-color:rgba(34,197,94,0.3);transform:translateX(3px);}
.rota-card.selected{border-color:var(--green);background:rgba(34,197,94,0.05);}
.rc-icon{font-size:30px;flex-shrink:0;line-height:1;}
.rc-name{font-family:'Poppins',sans-serif;font-size:14px;font-weight:700;color:var(--h);margin-bottom:3px;}
.rc-info{font-size:11px;color:var(--muted2);margin-bottom:6px;}
.rc-tags{display:flex;flex-wrap:wrap;gap:5px;}
.rc-tag{font-size:9px;font-weight:700;padding:2px 8px;border-radius:100px;}
.rt-urb{background:rgba(34,197,94,0.12);color:var(--green);}
.rt-reg{background:rgba(59,130,246,0.12);color:var(--blue);}
.rt-esp{background:rgba(245,158,11,0.12);color:var(--amber);}
.rt-parada{background:var(--card2);color:var(--muted2);border:1px solid var(--br);}
.rc-right{margin-left:auto;text-align:right;flex-shrink:0;}
.rc-num{font-family:'Poppins',sans-serif;font-size:20px;font-weight:800;color:var(--green);}
.rc-peso{font-size:10px;color:var(--muted2);}

/* PEDIDO ROTA */
.pri{display:flex;align-items:center;gap:9px;padding:9px 11px;background:var(--card2);border:1px solid var(--br2);border-radius:var(--rsm);margin-bottom:6px;}
.pri-n{font-family:'Poppins',sans-serif;font-size:12px;font-weight:800;color:var(--muted);width:18px;flex-shrink:0;}
.pri-info{flex:1;}
.pri-name{font-size:12px;font-weight:600;color:var(--h);}
.pri-addr{font-size:10px;color:var(--muted2);}
.pri-obs{font-size:10px;margin-top:2px;}
.pri-right{text-align:right;flex-shrink:0;font-size:11px;color:var(--muted2);}

/* VEÍCULO SELECT */
.vei-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:9px;margin-bottom:14px;}
.vei-sc{background:var(--card2);border:2px solid var(--br);border-radius:var(--r);padding:12px 9px;text-align:center;cursor:pointer;transition:all .2s;}
.vei-sc:hover{border-color:rgba(34,197,94,0.3);}
.vei-sc.selected{border-color:var(--green);background:rgba(34,197,94,0.07);}
.vei-sc.disabled{opacity:.4;cursor:not-allowed;}
.vsc-i{font-size:26px;margin-bottom:5px;display:block;}
.vsc-n{font-family:'Poppins',sans-serif;font-size:11px;font-weight:700;color:var(--h);margin-bottom:2px;}
.vsc-c{font-size:10px;color:var(--muted2);}
.vsc-s{font-size:10px;margin-top:4px;}

/* AJUDANTE SELECT */
.aj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:9px;margin-bottom:14px;}
.aj-c{background:var(--card2);border:2px solid var(--br);border-radius:var(--r);padding:11px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:9px;}
.aj-c:hover{border-color:rgba(168,85,247,0.3);}
.aj-c.selected{border-color:var(--purple);background:rgba(168,85,247,0.07);}
.aj-av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}
.aj-n{font-size:11px;font-weight:700;color:var(--h);}
.aj-r{font-size:10px;color:var(--muted2);}

/* ENTREGA ITEMS */
.ei{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--card);border:1px solid var(--br);border-radius:var(--rsm);margin-bottom:6px;cursor:pointer;}
.ei:hover{border-color:var(--br2);}
.ei-num{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Poppins',sans-serif;font-size:10px;font-weight:800;flex-shrink:0;}
.ei-num.done{background:rgba(34,197,94,0.2);color:var(--green);}
.ei-num.active{background:rgba(59,130,246,0.2);color:var(--blue);}
.ei-num.pend{background:rgba(255,255,255,0.06);color:var(--muted);}
.ei-info{flex:1;}
.ei-name{font-size:12px;font-weight:600;color:var(--h);}
.ei-addr{font-size:10px;color:var(--muted2);}
.ei-obs{font-size:10px;margin-top:2px;}
.ei-right{text-align:right;flex-shrink:0;}

/* OBS */
.obs{display:flex;align-items:flex-start;gap:9px;padding:10px 12px;border-radius:var(--rsm);margin-bottom:6px;border:1px solid;}
.obs.urgente{background:rgba(239,68,68,0.05);border-color:rgba(239,68,68,0.2);}
.obs.horario{background:rgba(245,158,11,0.05);border-color:rgba(245,158,11,0.2);}
.obs.devolucao{background:rgba(59,130,246,0.05);border-color:rgba(59,130,246,0.2);}
.obs.local{background:rgba(168,85,247,0.05);border-color:rgba(168,85,247,0.2);}
.obs.retirada{background:rgba(20,184,166,0.05);border-color:rgba(20,184,166,0.2);}
.obs-icon{font-size:16px;flex-shrink:0;}
.obs-title{font-size:11px;font-weight:700;color:var(--h);margin-bottom:2px;}
.obs-desc{font-size:10px;color:var(--muted2);}
.obs-prazo{font-size:9px;color:var(--muted);margin-top:3px;}
.obs-del{background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px;padding:2px 4px;flex-shrink:0;border-radius:5px;transition:color .15s,background .15s;}
.obs-del:hover{color:var(--red);background:rgba(239,68,68,0.1);}

/* CALENDÁRIO */
.cal{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin-bottom:14px;}
.cal-day{background:var(--card);border:1px solid var(--br);border-radius:var(--rsm);padding:9px 6px;}
.cal-day.hoje{border-color:rgba(34,197,94,0.35);background:rgba(34,197,94,0.04);}
.cal-day.pico{border-top:2px solid var(--red);}
.cal-dn{font-family:'Poppins',sans-serif;font-size:10px;font-weight:700;color:var(--h);margin-bottom:4px;}
.cal-dest{font-size:8px;padding:2px 4px;background:rgba(255,255,255,0.05);border-radius:3px;margin-bottom:2px;display:block;color:var(--muted2);}
.cal-dest.reg{color:#60a5fa;background:rgba(59,130,246,0.1);}
.cal-dest.esp{color:var(--amber);background:rgba(245,158,11,0.1);}

/* TABELA */
.tbl{width:100%;border-collapse:collapse;font-size:12px;}
.tbl th{padding:10px 12px;text-align:left;font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--br2);}
.tbl th:first-child{border-radius:8px 0 0 0;}
.tbl th:last-child{border-radius:0 8px 0 0;}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--br);color:var(--text);vertical-align:middle;}
.tbl tr:last-child td{border-bottom:none;}
/* Zebra sutil — facilita acompanhar uma linha em tabelas mais longas
   (funcionários, clientes, estoque) sem precisar contar coluna por coluna. */
.tbl tbody tr:nth-child(even) td{background:rgba(120,140,180,0.05);}
[data-theme="light"] .tbl tbody tr:nth-child(even) td{background:rgba(30,58,138,0.035);}
.tbl tr.clickable{cursor:pointer;}
.tbl tr.clickable:hover td{background:rgba(34,197,94,0.04);}

/* CHAT */
.chat-wrap{background:var(--card);border:1px solid var(--br);border-radius:var(--r);overflow:hidden;}
.chat-head{background:var(--card2);border-bottom:1px solid var(--br);padding:10px 12px;display:flex;align-items:center;gap:8px;}
.chat-av{width:27px;height:27px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;}
.chat-name{font-size:12px;font-weight:600;color:var(--h);}
.chat-status{font-size:10px;color:var(--green);}
.chat-msgs{padding:11px;height:140px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;}
.chat-msg{max-width:76%;padding:7px 10px;border-radius:10px;font-size:11px;line-height:1.5;}
.chat-msg.recv{background:var(--card2);border:1px solid var(--br2);color:var(--text);align-self:flex-start;}
.chat-msg.sent{background:rgba(34,197,94,0.14);border:1px solid rgba(34,197,94,0.24);color:var(--text);align-self:flex-end;}
.chat-msg .ct{font-size:9px;color:var(--muted);margin-top:2px;display:block;}
.chat-inp-wrap{border-top:1px solid var(--br);padding:8px 11px;display:flex;gap:6px;}
.chat-inp{flex:1;background:var(--card2);border:1px solid var(--br2);border-radius:100px;padding:6px 12px;font-size:11px;color:var(--text);font-family:'Poppins',sans-serif;outline:none;}
.chat-send{background:var(--green);border:none;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;flex-shrink:0;}

/* MODAL */
.modal-ov{position:fixed;inset:0;background:rgba(0,0,0,0);z-index:500;display:none;align-items:center;justify-content:center;padding:16px;transition:background .2s;}
.modal-ov.open{display:flex;background:rgba(0,0,0,0.78);backdrop-filter:blur(6px);}
.modal-ov.open .modal{animation:modalIn .28s cubic-bezier(.34,1.4,.64,1);}
@keyframes modalIn{from{transform:scale(.92) translateY(12px);opacity:0;}to{transform:none;opacity:1;}}
.modal{background:var(--card);border:1px solid var(--br2);border-radius:18px;padding:22px;max-width:490px;width:100%;max-height:88vh;overflow-y:auto;}
.modal-title{font-family:'Poppins',sans-serif;font-size:14px;font-weight:700;color:var(--h);margin-bottom:3px;}
.modal-sub{font-size:11px;color:var(--muted2);margin-bottom:14px;}
.modal-close{float:right;background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px;margin-top:-3px;}
.fsel{width:100%;background:var(--card2);border:1px solid var(--br2);border-radius:var(--rsm);padding:8px 10px;font-size:12px;color:var(--text);font-family:'Poppins',sans-serif;outline:none;margin-bottom:11px;}
/* O <select> em si pega as cores do tema (--card2/--text), mas o popup do
   dropdown quando aberto é desenhado pelo navegador/SO, não pelo nosso CSS —
   ele ignora o fundo escuro do tema e usa fundo branco por padrão, enquanto
   o texto claro (--text, feito pra fundo escuro) fica quase invisível nesse
   fundo branco. Isso acontecia em todo <select class="fsel"> do site (filtros,
   status de motorista, etc). Fixando cor+fundo direto em option/optgroup e
   forçando color-scheme:light garante que o popup sempre abra com um fundo
   claro e texto escuro legível, sem depender do tema da página. */
select{color-scheme:light;}
select option,select optgroup{background:#fff;color:#1e293b;}
.btn{display:inline-flex;align-items:center;gap:5px;padding:7px 15px;border-radius:var(--rsm);font-size:11px;font-weight:700;cursor:pointer;border:none;transition:opacity .2s;font-family:'Poppins',sans-serif;}
.btn:hover{opacity:.85;}
.btn-green{background:var(--green);color:#000;}.btn-blue{background:var(--blue);color:#fff;}
.btn-gray{background:var(--card2);color:var(--text);border:1px solid var(--br2);}
.btn-red{background:var(--red);color:#fff;}.btn-purple{background:var(--purple);color:#fff;}

/* PEDIDO MODAL */
.pd-header{background:var(--card2);border-radius:var(--rsm);padding:13px;margin-bottom:12px;}
.pd-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:5px;}
.pd-num{font-family:'Poppins',sans-serif;font-size:14px;font-weight:800;color:var(--h);}
.pd-total{font-family:'Poppins',sans-serif;font-size:17px;font-weight:800;color:var(--green);}
.pd-mot{display:flex;align-items:center;gap:11px;background:rgba(59,130,246,0.06);border:1px solid rgba(59,130,246,0.15);border-radius:var(--rsm);padding:10px;margin-bottom:12px;}
.pd-av{width:32px;height:32px;border-radius:50%;background:rgba(59,130,246,0.15);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;border:2px solid rgba(59,130,246,0.3);}
.pd-name{font-size:12px;font-weight:700;color:var(--h);}
.pd-info{font-size:10px;color:var(--muted2);margin-top:2px;}
.prod-item{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--br);font-size:12px;}
.prod-item:last-child{border-bottom:none;}
.prod-qtd{font-size:10px;color:var(--muted2);}
.prod-val{font-weight:600;color:var(--green);font-size:11px;}

/* RASTREIO */
.track-hero{background:linear-gradient(135deg,#0f172a,#1e3a5f);border-radius:var(--r);padding:20px;text-align:center;margin-bottom:12px;border:1px solid rgba(59,130,246,0.15);}
.track-circle{width:70px;height:70px;border-radius:50%;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;font-size:28px;border:3px solid var(--blue);background:rgba(59,130,246,0.12);animation:glow 2s infinite;}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(59,130,246,0.3);}50%{box-shadow:0 0 0 10px rgba(59,130,246,0);}}
.track-title{font-family:'Poppins',sans-serif;font-size:14px;font-weight:800;color:var(--h);margin-bottom:3px;}
.track-eta{font-size:11px;color:var(--muted2);}
.vr-box{background:rgba(59,130,246,0.06);border:1px solid rgba(59,130,246,0.18);border-radius:var(--rsm);padding:12px;display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.vr-icon{font-size:32px;flex-shrink:0;}
.vr-name{font-family:'Poppins',sans-serif;font-size:13px;font-weight:700;color:var(--h);}
.vr-info{font-size:11px;color:var(--muted2);margin-top:2px;}
.ts{display:flex;align-items:flex-start;gap:9px;padding:9px 0;position:relative;}
.ts::before{content:'';position:absolute;left:11px;top:22px;bottom:-9px;width:1px;background:var(--br);}
.ts:last-child::before{display:none;}
.ts-dot{width:22px;height:22px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:10px;border:2px solid var(--br2);background:var(--card);}
.ts-dot.done{background:rgba(34,197,94,0.2);border-color:var(--green);}
.ts-dot.active{background:rgba(59,130,246,0.2);border-color:var(--blue);animation:pulse-d 1.5s infinite;}
@keyframes pulse-d{0%,100%{box-shadow:0 0 0 0 rgba(59,130,246,0.4);}50%{box-shadow:0 0 0 5px rgba(59,130,246,0);}}
.ts-title{font-size:11px;font-weight:600;color:var(--h);}
.ts-time{font-size:10px;color:var(--muted2);}

/* AJ BANNER */
.aj-banner{background:rgba(168,85,247,0.06);border:1px solid rgba(168,85,247,0.18);border-radius:var(--rsm);padding:10px 13px;margin-bottom:12px;display:flex;align-items:center;gap:9px;}
.aj-banner-icon{font-size:18px;flex-shrink:0;}
.aj-banner-text{font-size:11px;color:var(--muted2);}
.aj-banner-text strong{color:var(--purple);}
.tol-card{background:rgba(34,197,94,0.04);border:1px solid rgba(34,197,94,0.12);border-radius:var(--rsm);padding:10px 12px;margin-top:9px;}
.tol-title{font-size:11px;font-weight:700;color:var(--green);margin-bottom:5px;}
.tol-item{display:flex;align-items:center;gap:7px;font-size:10px;color:var(--muted2);margin-bottom:3px;}
.tol-item:last-child{margin-bottom:0;}
.prog-wrap{background:rgba(255,255,255,0.06);border-radius:100px;height:5px;overflow:hidden;}
.prog{height:5px;border-radius:100px;background:var(--green);}
.alerta{background:rgba(245,158,11,0.07);border:1px solid rgba(245,158,11,0.2);border-radius:var(--rsm);padding:10px 13px;margin-bottom:12px;display:flex;gap:9px;}
.alerta-icon{font-size:16px;flex-shrink:0;}
.alerta-title{font-size:11px;font-weight:700;color:var(--amber);margin-bottom:2px;}
.alerta-desc{font-size:10px;color:var(--muted2);}
/* ── SISTEMA DE NOTIFICAÇÕES PROFISSIONAL ── */
#notif-container{
  position:fixed;bottom:20px;right:16px;z-index:9000;
  display:flex;flex-direction:column-reverse;gap:8px;
  pointer-events:none;
  max-width:320px;width:calc(100vw - 32px);
}
.notif{
  pointer-events:all;
  background:rgba(11,18,32,0.96);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  padding:12px 14px 10px;
  font-size:12px;color:var(--text);
  box-shadow:0 8px 32px rgba(0,0,0,0.5);
  display:none;
  animation:notifIn .3s cubic-bezier(.34,1.56,.64,1);
  position:relative;overflow:hidden;
  max-width:320px;
}
@keyframes notifIn{from{transform:translateX(24px) scale(.95);opacity:0;}to{transform:none;opacity:1;}}
@keyframes notifOut{to{transform:translateX(24px) scale(.95);opacity:0;}}
.notif.show{display:block;}
.notif.hide{animation:notifOut .25s ease forwards;}
.notif-bar{
  position:absolute;bottom:0;left:0;height:3px;border-radius:0 0 14px 14px;
  background:linear-gradient(90deg,var(--blue),#60a5fa);
  animation:notifBar 3.5s linear forwards;
}
@keyframes notifBar{from{width:100%;}to{width:0%;}}
.notif-title{font-weight:800;margin-bottom:3px;font-size:12px;display:flex;align-items:center;gap:6px;font-family:'Poppins',sans-serif;}
.notif-msg{font-size:11px;line-height:1.5;}
.notif-close{position:absolute;top:8px;right:10px;background:none;border:none;cursor:pointer;font-size:14px;line-height:1;padding:2px;}
/* Texto do toast era branco fixo — em tema claro o fundo do .notif também
   vira branco (regra logo acima), então título/mensagem/botão fechar
   ficavam invisíveis, só o emoji do ícone aparecia. */
:root:not([data-theme="light"]) .notif-title{color:#fff;}
:root:not([data-theme="light"]) .notif-msg{color:rgba(255,255,255,0.7);}
:root:not([data-theme="light"]) .notif-close{color:rgba(255,255,255,0.4);}
:root:not([data-theme="light"]) .notif-close:hover{color:#fff;}
[data-theme="light"] .notif-title{color:var(--h);}
[data-theme="light"] .notif-msg{color:var(--muted2);}
[data-theme="light"] .notif-close{color:var(--muted2);}
[data-theme="light"] .notif-close:hover{color:var(--h);}
@media(max-width:600px){.cal{grid-template-columns:repeat(3,1fr);}.g4,.g5{grid-template-columns:repeat(2,1fr);}}
/* NOTA: essa regra tinha ".sidebar{display:none}" — sobra de uma versão
   antiga (sem o menu-gaveta/hamburger que existe hoje). Isso deixava o
   menu lateral impossível de abrir no celular, mesmo clicando no ☰,
   porque display:none nunca é revertido só com o toggle de transform. */

/* TEMA CLARO */
[data-theme="light"]{
  --bg:#f0f4f8;--surface:#e8edf3;--card:#ffffff;--card2:#f4f7fa;
  --br:rgba(0,0,0,0.09);--br2:rgba(0,0,0,0.14);
  --text:#334155;--muted:#94a3b8;--muted2:#64748b;--h:#0f172a;
}
[data-theme="light"] body{background:var(--bg);color:var(--text);}
[data-theme="light"] .topbar{background:rgba(240,244,248,0.96);}
[data-theme="light"] .leaflet-popup-content-wrapper,[data-theme="light"] .leaflet-popup-tip{background:#fff!important;color:#1e293b;}
[data-theme="light"] .leaflet-bar a,[data-theme="light"] .leaflet-bar a:hover{background:#fff!important;color:#334155!important;border-color:rgba(0,0,0,0.15)!important;}
[data-theme="light"] .leaflet-control-attribution{background:rgba(255,255,255,0.85)!important;color:#64748b!important;}
[data-theme="light"] #login{background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(34,197,94,0.08),transparent 65%),var(--bg);}

/* BOTÃO TEMA */
.tb-theme{background:none;border:1px solid var(--br2);border-radius:var(--rsm);padding:4px 9px;font-size:13px;cursor:pointer;color:var(--muted2);transition:all .2s;line-height:1;}
.tb-theme:hover{border-color:var(--green);color:var(--green);}
.btn-entrar{background:var(--green);border:none;border-radius:var(--rsm);padding:7px 16px;font-size:12px;font-weight:800;color:#000;cursor:pointer;font-family:'Poppins',sans-serif;display:flex;align-items:center;gap:6px;transition:all .2s;}
.btn-entrar:hover{opacity:.88;}
.papeis-grid{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:8px 0;}
.papel-card{background:var(--card);border:1px solid var(--br2);border-radius:var(--r);padding:16px 14px;text-align:center;cursor:pointer;transition:all .22s;min-width:110px;flex:1;}
.papel-card:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,0.3);}
.papel-card.g{border-top:3px solid var(--green);}
.papel-card.b{border-top:3px solid var(--blue);}
.papel-card.p{border-top:3px solid var(--purple);}
.papel-card.a{border-top:3px solid var(--amber);}
.papel-card .pi{font-size:32px;display:block;margin-bottom:6px;}
.papel-card .pn{font-family:'Poppins',sans-serif;font-size:12px;font-weight:700;color:var(--h);}

/* FILTRO MAPA */
.filtro-btn{display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:700;padding:3px 9px;border-radius:100px;cursor:pointer;transition:opacity .2s;border:none;font-family:'Poppins',sans-serif;}
.filtro-btn.filtro-off{opacity:.3;}

/* ETA LIVE */
.eta-badge{display:inline-flex;align-items:center;gap:5px;background:rgba(245,158,11,0.12);border:1px solid rgba(245,158,11,0.25);border-radius:100px;padding:4px 12px;font-size:13px;font-weight:700;color:var(--amber);}

/* BANNER PROXIMIDADE */
.prox-banner{background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.28);border-radius:var(--rsm);padding:10px 13px;margin-bottom:12px;display:none;align-items:center;gap:10px;animation:slideIn .4s ease;}
.prox-banner.show{display:flex;}
@keyframes pulse-mk{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0.35);}50%{box-shadow:0 0 0 12px rgba(255,255,255,0);}}
.mot-mk-live{animation:pulse-mk 1.5s infinite;}

/* CATÁLOGO */
.cat-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;margin-bottom:16px;scrollbar-width:none;}
.cat-tabs::-webkit-scrollbar{display:none;}
.cat-tab{flex-shrink:0;padding:7px 16px;border-radius:100px;font-size:11px;font-weight:700;cursor:pointer;border:1px solid var(--br2);background:var(--card2);color:var(--muted2);transition:all .2s;font-family:'Poppins',sans-serif;}
.cat-tab.active{background:var(--green);color:#000;border-color:var(--green);}
.cat-tab:hover:not(.active){border-color:var(--green);color:var(--green);}
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:12px;margin-bottom:16px;}
.prod-card{background:var(--card);border:1px solid var(--br);border-radius:var(--r);padding:14px;cursor:pointer;transition:all .22s;position:relative;}
.prod-card:hover{border-color:rgba(37,99,235,0.5);transform:translateY(-4px);box-shadow:0 12px 32px rgba(29,78,216,0.2);}
.prod-emoji{font-size:42px;text-align:center;display:block;margin-bottom:10px;}
.prod-nome{font-size:12px;font-weight:700;color:var(--h);margin-bottom:3px;line-height:1.4;}
.prod-desc{font-size:10px;color:var(--muted2);margin-bottom:9px;line-height:1.4;}
.prod-preco{font-family:'Poppins',sans-serif;font-size:17px;font-weight:800;color:var(--blue);}
.prod-add{width:100%;border:none;border-radius:10px;padding:9px;background:linear-gradient(135deg,#1d4ed8,#2563eb);color:#fff;font-size:11px;font-weight:700;cursor:pointer;margin-top:9px;font-family:'Poppins',sans-serif;transition:all .2s;box-shadow:0 3px 10px rgba(37,99,235,0.3);}
.prod-add:hover{transform:translateY(-1px);box-shadow:0 5px 16px rgba(37,99,235,0.5);}
/* CARRINHO */
.cart-icon-wrap{position:relative;display:inline-flex;}
.cart-badge{position:absolute;top:-5px;right:-5px;background:var(--red);color:#fff;font-size:9px;font-weight:800;width:17px;height:17px;border-radius:50%;display:none;align-items:center;justify-content:center;}
.cart-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--br);}
.cart-item:last-child{border-bottom:none;}
.qty-btn{width:26px;height:26px;border-radius:50%;border:1px solid var(--br2);background:var(--card2);color:var(--text);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .2s;}
.qty-btn:hover{border-color:var(--green);color:var(--green);}
/* Status pedidos — definição de verdade fica mais abaixo, junto do resto
   dos selos ("STATUS PILLS — pedidos"); essa base ficou só de raiz
   histórica, sobrescrita sem exceção pela de lá. */
/* PEDIDO CARD */
.ped-card{background:var(--card);border:1px solid var(--br);border-radius:var(--r);padding:14px;margin-bottom:10px;}
/* PIX */
.pix-box{background:rgba(34,197,94,0.06);border:2px dashed rgba(34,197,94,0.3);border-radius:var(--r);padding:18px;text-align:center;margin:12px 0;}
.pix-valor{font-family:'Poppins',sans-serif;font-size:28px;font-weight:800;color:var(--green);}
/* PRINT */
@media print{.sidebar,.topbar,.btn,.tb-sair,#notif{display:none!important;}.main{padding:0!important;}.page{display:block!important;}}

/* TOGGLE ESTOQUE */
.toggle-btn{padding:5px 13px;border-radius:100px;font-size:11px;font-weight:700;border:none;cursor:pointer;font-family:'Poppins',sans-serif;transition:all .2s;}
.toggle-on{background:rgba(34,197,94,0.15);color:var(--green);}
.toggle-off{background:rgba(239,68,68,0.12);color:#f87171;}
[data-theme="light"] .toggle-off{background:rgba(239,68,68,0.12);color:#b91c1c;}
/* GPS */
.gps-indicator{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;padding:3px 8px;border-radius:100px;background:rgba(34,197,94,0.1);color:var(--green);cursor:pointer;transition:all .2s;}
.gps-indicator.off{background:rgba(255,255,255,0.06);color:var(--muted);}
.gps-dot{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block;animation:pulse-d 1.5s infinite;}
.gps-dot.off{background:var(--muted);animation:none;}
/* FAVORITOS */
.fav-btn{position:absolute;top:8px;right:8px;background:none;border:none;font-size:18px;cursor:pointer;opacity:.5;transition:all .2s;line-height:1;padding:0;}
.fav-btn:hover{opacity:1;transform:scale(1.2);}
.fav-btn.ativo{opacity:1;}
/* PREÇO HISTÓRICO */
.preco-up{color:var(--red);font-size:10px;margin-left:4px;}
.preco-down{color:var(--green);font-size:10px;margin-left:4px;}
.preco-igual{color:var(--muted);font-size:10px;margin-left:4px;}
/* VALOR MÍNIMO */
.minimo-bar{background:rgba(245,158,11,0.08);border:1px solid rgba(245,158,11,0.22);border-radius:var(--rsm);padding:9px 13px;margin-bottom:10px;font-size:11px;color:var(--amber);}
.minimo-bar .prog-wrap{margin-top:6px;}

/* ================================================
   DESIGN PROFISSIONAL — ÁREA DO CLIENTE
   ================================================ */

/* HERO BANNER DO CATÁLOGO — AZUL (cor do sistema) */
.cat-hero{
  background:linear-gradient(135deg,#1e3a8a 0%,#1d4ed8 55%,#2563eb 100%);
  border-radius:16px;padding:24px 20px;margin-bottom:18px;
  position:relative;overflow:hidden;
  box-shadow:0 8px 32px rgba(29,78,216,0.35);
}
.cat-hero::before{
  content:'';position:absolute;top:-30px;right:-30px;
  width:140px;height:140px;border-radius:50%;
  background:rgba(255,255,255,0.06);
}
.cat-hero::after{
  content:'';position:absolute;bottom:-40px;right:40px;
  width:100px;height:100px;border-radius:50%;
  background:rgba(255,255,255,0.04);
}
.cat-hero-logo{font-family:'Poppins',sans-serif;font-size:22px;font-weight:800;color:#fff;margin-bottom:3px;}
.cat-hero-tag{font-size:11px;color:rgba(255,255,255,0.75);margin-bottom:10px;}
.cat-hero-stats{display:flex;gap:12px;flex-wrap:wrap;}
.cat-hero-stat{background:rgba(255,255,255,0.12);border-radius:100px;padding:4px 12px;font-size:11px;font-weight:600;color:#fff;}

/* CATEGORY TABS — ESTILO MODERNO */
.cat-tab{
  flex-shrink:0;padding:8px 16px;border-radius:100px!important;
  font-size:11px;font-weight:700;cursor:pointer;
  border:2px solid transparent;background:var(--card2);
  color:var(--muted2);transition:all .22s;white-space:nowrap;
}
.cat-tab:hover:not(.active){background:rgba(34,197,94,0.08);color:var(--green);border-color:rgba(34,197,94,0.3);}
.cat-tab.active{
  background:linear-gradient(135deg,var(--green),#059669);
  color:#000;border-color:transparent;
  box-shadow:0 4px 12px rgba(34,197,94,0.35);
}

/* PRODUCT CARD — PREMIUM */
.prod-card{
  background:var(--card);border:1px solid var(--br);
  border-radius:16px;padding:14px;cursor:pointer;
  transition:all .25s;position:relative;
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
}
.prod-card:hover{
  border-color:rgba(34,197,94,0.5);
  transform:translateY(-4px);
  box-shadow:0 8px 24px rgba(0,0,0,0.25);
}
.prod-emoji{font-size:44px;text-align:center;display:block;margin-bottom:10px;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3));}
.prod-nome{font-size:12px;font-weight:700;color:var(--h);margin-bottom:3px;line-height:1.4;}
.prod-desc{font-size:10px;color:var(--muted2);margin-bottom:10px;line-height:1.4;}
.prod-preco{
  font-family:'Poppins',sans-serif;font-size:18px;font-weight:800;
  color:var(--green);margin-bottom:10px;white-space:nowrap;
}
.prod-add{
  width:100%;border:none;border-radius:100px;padding:9px;
  background:linear-gradient(135deg,var(--green),#059669);
  color:#000;font-size:12px;font-weight:800;cursor:pointer;
  font-family:'Poppins',sans-serif;transition:all .2s;
  box-shadow:0 3px 10px rgba(34,197,94,0.35);
}
.prod-add:hover{box-shadow:0 5px 16px rgba(34,197,94,0.5);transform:translateY(-1px);}
.prod-add:active{transform:translateY(0);}
.prod-badge{
  position:absolute;top:10px;left:10px;
  background:linear-gradient(135deg,#f59e0b,#d97706);
  color:#000;font-size:9px;font-weight:800;
  padding:3px 8px;border-radius:100px;letter-spacing:.5px;
}

/* BARRA DE CARRINHO FIXA (MOBILE STYLE) */
.cart-bar-fixed{
  position:fixed;bottom:0;left:0;right:0;z-index:300;
  background:linear-gradient(135deg,#1e3a8a,#1d4ed8,#2563eb);
  padding:10px 16px 14px;display:none;align-items:center;
  justify-content:space-between;gap:12px;
  box-shadow:0 -4px 28px rgba(29,78,216,0.4);
  border-radius:20px 20px 0 0;
  backdrop-filter:blur(10px);
}
.cart-bar-fixed.show{display:flex;}
.cart-bar-info{color:#fff;flex:1;}
.cart-bar-count{font-size:11px;opacity:.75;letter-spacing:.2px;}
.cart-bar-total{font-family:'Poppins',sans-serif;font-size:18px;font-weight:800;line-height:1.1;}
.cart-bar-btn{
  background:rgba(255,255,255,0.15);color:#fff;border:1.5px solid rgba(255,255,255,0.3);
  border-radius:100px;padding:10px 20px;font-size:13px;font-weight:800;cursor:pointer;
  font-family:'Poppins',sans-serif;white-space:nowrap;
  backdrop-filter:blur(8px);transition:all .2s;
}
.cart-bar-btn:hover{background:rgba(255,255,255,0.25);border-color:rgba(255,255,255,0.5);transform:scale(1.02);}
/* Pulsing dot para chamar atenção */
.cart-bar-fixed.show::before{
  content:'';position:absolute;top:-4px;right:20px;width:8px;height:8px;
  border-radius:50%;background:#f59e0b;
  box-shadow:0 0 0 3px rgba(245,158,11,0.3);
  animation:pulse-d 1.5s infinite;
}

/* PÁGINA DO CATÁLOGO — padding-bottom para barra fixa */
#page-catalogo .prod-grid{padding-bottom:80px;}

/* CARRINHO — ESTILO MELHORADO */
.cart-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 0;border-bottom:1px solid var(--br);
  transition:background .15s;
}
.cart-item:last-child{border-bottom:none;}
.cart-item-emoji{font-size:32px;flex-shrink:0;}
.cart-item-info{flex:1;}
.cart-item-nome{font-size:13px;font-weight:600;color:var(--h);}
.cart-item-preco{font-size:11px;color:var(--muted2);margin-top:2px;}
.cart-item-subtotal{font-family:'Poppins',sans-serif;font-size:14px;font-weight:800;color:var(--green);}
.qty-btn{
  width:34px;height:34px;border-radius:50%;
  border:2px solid var(--br2);background:var(--card2);
  color:var(--text);cursor:pointer;font-size:16px;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;font-weight:700;flex-shrink:0;
}
.qty-btn:hover{border-color:var(--green);color:var(--green);background:rgba(34,197,94,0.08);}

/* RESUMO DO CARRINHO */
.cart-summary{
  background:linear-gradient(135deg,rgba(34,197,94,0.06),rgba(5,150,105,0.04));
  border:1px solid rgba(34,197,94,0.2);border-radius:var(--r);
  padding:16px;margin-top:12px;
}
.cart-total-label{font-size:13px;color:var(--muted2);}
.cart-total-value{font-family:'Poppins',sans-serif;font-size:26px;font-weight:800;color:var(--green);}

/* STEPS DO CHECKOUT */
.checkout-steps{display:flex;align-items:center;margin-bottom:20px;gap:0;}
.step-item{flex:1;text-align:center;position:relative;}
.step-circle{
  width:32px;height:32px;border-radius:50%;margin:0 auto 4px;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;font-family:'Poppins',sans-serif;
  transition:all .3s;
}
.step-circle.done{background:var(--green);color:#000;}
.step-circle.active{background:var(--green);color:#000;box-shadow:0 0 0 4px rgba(34,197,94,0.25);}
.step-circle.pend{background:var(--card2);color:var(--muted);border:2px solid var(--br2);}
.step-label{font-size:9px;font-weight:700;color:var(--muted2);text-transform:uppercase;letter-spacing:.5px;}
.step-line{flex:1;height:2px;background:var(--br2);}
.step-line.done{background:var(--green);}

/* CONFIRMAÇÃO — CELEBRAÇÃO */
.conf-hero{
  background:linear-gradient(135deg,#064e3b,#065f46);
  border-radius:var(--r);padding:30px 20px;text-align:center;
  margin-bottom:16px;border:1px solid rgba(34,197,94,0.2);
}
.conf-icon{font-size:64px;display:block;margin-bottom:12px;animation:bounce .8s ease;}
@keyframes bounce{0%,100%{transform:scale(1);}50%{transform:scale(1.15);}80%{transform:scale(0.95);}}
.conf-titulo{font-family:'Poppins',sans-serif;font-size:24px;font-weight:800;color:#fff;margin-bottom:6px;}
.conf-num{font-family:'Poppins',sans-serif;font-size:36px;font-weight:800;color:var(--green);}
.conf-total{font-size:14px;color:rgba(255,255,255,0.8);}

/* RASTREIO — PREMIUM */
.track-hero{
  background:linear-gradient(135deg,#0f172a,#1e3a5f);
  border-radius:var(--r);padding:22px;text-align:center;
  margin-bottom:14px;border:1px solid rgba(59,130,246,0.2);
  position:relative;overflow:hidden;
}
.track-hero::before{content:'';position:absolute;top:-20px;right:-20px;
  width:100px;height:100px;border-radius:50%;background:rgba(59,130,246,0.06);}

/* TEMA CLARO — OVERRIDES CLIENTE */
[data-theme="light"] .cat-hero{background:linear-gradient(135deg,#1e3a8a,#1d4ed8,#2563eb);}
[data-theme="light"] .prod-card{box-shadow:0 2px 12px rgba(0,0,0,0.08);}
[data-theme="light"] .prod-card:hover{box-shadow:0 8px 28px rgba(29,78,216,0.18);}
[data-theme="light"] .conf-hero{background:linear-gradient(135deg,#1e3a8a,#1d4ed8);}
[data-theme="light"] .cart-bar-fixed{background:linear-gradient(135deg,#1d4ed8,#2563eb);}

/* ===== RELÓGIO NO TOPBAR ===== */
.tb-clock{font-size:11px;color:var(--muted2);font-family:'Poppins',sans-serif;letter-spacing:.5px;}
/* ===== TOAST BOAS-VINDAS ===== */
.welcome-toast{position:fixed;top:60px;left:50%;transform:translateX(-50%);background:rgba(8,13,26,0.96);backdrop-filter:blur(20px);border:1px solid var(--role-color,#2563eb);border-radius:14px;padding:12px 20px;font-size:13px;font-weight:600;color:var(--h);z-index:600;white-space:nowrap;animation:toastIn .4s ease,toastOut .4s ease 2.5s forwards;}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(-20px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
@keyframes toastOut{from{opacity:1;}to{opacity:0;transform:translateX(-50%) translateY(-10px);}}
/* ===== TOOLTIP ===== */
[data-tip]{position:relative;}
[data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:rgba(8,13,26,0.96);color:var(--h);font-size:11px;padding:5px 10px;border-radius:8px;white-space:nowrap;border:1px solid var(--glass-border);opacity:0;pointer-events:none;transition:opacity .2s;z-index:700;}
[data-tip]:hover::after{opacity:1;}
/* ===== BADGE NOVO ===== */
.badge-novo{position:absolute;top:-4px;right:-4px;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;font-size:8px;font-weight:800;padding:2px 6px;border-radius:100px;animation:pulseBadge 1.5s infinite;}
@keyframes pulseBadge{0%,100%{transform:scale(1);}50%{transform:scale(1.15);}}
/* ===== TIMELINE DO PEDIDO ===== */
.timeline-item{display:flex;gap:12px;padding:8px 0;position:relative;}
.timeline-item:not(:last-child)::after{content:'';position:absolute;left:15px;top:32px;bottom:-8px;width:2px;background:var(--glass-border);}
.timeline-dot{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;}
.timeline-dot.done{background:rgba(37,99,235,0.2);border:2px solid #2563eb;}
.timeline-dot.active{background:rgba(37,99,235,0.15);border:2px solid #2563eb;animation:pulse-d 1.5s infinite;}
.timeline-dot.pend{background:var(--glass);border:2px solid var(--glass-border);}
/* ===== CORES GLOBAIS — AZUL PRIMÁRIO ===== */
.prog{background:linear-gradient(90deg,#2563eb,#3b82f6)!important;}
:root:not([data-theme="light"]) .b-ok{background:rgba(37,99,235,0.1)!important;color:#60a5fa!important;}
:root:not([data-theme="light"]) .b-go{background:rgba(37,99,235,0.08)!important;color:#93c5fd!important;}
:root:not([data-theme="light"]) .kpi.g .kpi-n{color:#60a5fa!important;}
:root:not([data-theme="light"]) .kpi.b .kpi-n{color:#93c5fd!important;}
[data-theme="light"] .b-ok{background:rgba(37,99,235,0.1)!important;color:#1d4ed8!important;}
[data-theme="light"] .b-go{background:rgba(37,99,235,0.1)!important;color:#1d4ed8!important;}
[data-theme="light"] .kpi.g .kpi-n{color:#1d4ed8!important;}
[data-theme="light"] .kpi.b .kpi-n{color:#1d4ed8!important;}
/* Efeito 3D de inclinação nos cards foi removido — o rotateX/rotateY distorcia
   o card inteiro (texto e foto ficavam com cara de "esticado"). O hover agora é
   só a elevação sutil definida no passe de polimento visual, mais abaixo. */
.prod-card{transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease!important;}

/* PARTÍCULAS AO ADICIONAR */
@keyframes particle{
  0%{transform:translate(0,0) scale(1);opacity:1;}
  100%{transform:translate(var(--tx),var(--ty)) scale(0);opacity:0;}
}
.cart-particle{
  position:fixed;width:9px;height:9px;border-radius:50%;
  pointer-events:none;z-index:9999;
  animation:particle .75s cubic-bezier(.36,.07,.19,.97) forwards;
}

/* MINI-CARRINHO LATERAL */
.mini-cart{
  position:fixed;right:0;top:50px;bottom:0;width:min(320px,100vw);
  background:rgba(8,13,26,0.97);
  backdrop-filter:blur(24px);
  border-left:1px solid rgba(37,99,235,0.2);
  z-index:400;
  transform:translateX(100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;
  box-shadow:-8px 0 32px rgba(0,0,0,0.5);
}
body.modo-cliente .mini-cart{background:rgba(255,255,255,0.97);border-left:1px solid var(--cli-border);}
.mini-cart.aberto{transform:translateX(0);}
.mini-cart-header{
  padding:16px;border-bottom:1px solid var(--glass-border);
  display:flex;justify-content:space-between;align-items:center;
}
body.modo-cliente .mini-cart-header{border-color:var(--cli-border);}
.mini-cart-body{flex:1;overflow-y:auto;padding:12px;}
.mini-cart-footer{padding:14px;border-top:1px solid var(--glass-border);}
body.modo-cliente .mini-cart-footer{border-color:var(--cli-border);}
.mini-cart-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 0;border-bottom:1px solid var(--glass-border);
  animation:slideIn .25s ease;
}
body.modo-cliente .mini-cart-item{border-color:var(--cli-border);}
.mini-cart-item:last-child{border-bottom:none;}
.mini-cart-emoji{font-size:28px;flex-shrink:0;}
.mini-cart-nome{font-size:12px;font-weight:600;color:var(--h);flex:1;line-height:1.3;}
body.modo-cliente .mini-cart-nome{color:var(--cli-text);}
.mini-cart-preco{font-size:12px;font-weight:800;color:var(--blue);white-space:nowrap;}
.mini-cart-rem{background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px;padding:2px;transition:color .2s;}
.mini-cart-rem:hover{color:var(--red);}

/* OVERLAY DO MINI-CARRINHO */
.mini-cart-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:399;
  display:none;backdrop-filter:blur(2px);
}
.mini-cart-overlay.show{display:block;}

/* HERO 3D FLUTUANTE */
.hero-float{
  animation:heroFloat 3s ease-in-out infinite;
  display:inline-block;
}
@keyframes heroFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-8px);}
}

/* PRODUTO CARD SHINE EFFECT */
body.modo-cliente .prod-card::after{
  content:'';position:absolute;inset:0;border-radius:16px;
  background:linear-gradient(135deg,rgba(255,255,255,0.08) 0%,transparent 50%);
  pointer-events:none;
}

/* PICKUP TOGGLE — sempre azul */
.pickup-toggle{display:flex;gap:0;border-radius:12px;overflow:hidden;border:2px solid #2563eb;margin-bottom:14px;}
.pickup-btn{flex:1;padding:11px;font-size:12px;font-weight:700;border:none;cursor:pointer;font-family:'Poppins',sans-serif;transition:all .25s;background:#fff;color:#2563eb;}
.pickup-btn.active{background:linear-gradient(135deg,#1d4ed8,#2563eb);color:#fff;}
.pickup-store-info{background:rgba(29,78,216,0.06);border:1px solid rgba(29,78,216,0.2);border-radius:var(--rsm);padding:12px;font-size:12px;line-height:1.8;color:var(--cli-text);}

/* LOADING SKELETON */
@keyframes shimmer{0%{background-position:-200% 0;}100%{background-position:200% 0;}}
.skeleton{
  background:linear-gradient(90deg,rgba(255,255,255,0.04) 25%,rgba(255,255,255,0.08) 50%,rgba(255,255,255,0.04) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
  border-radius:8px;
}
body.modo-cliente .skeleton{background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%);background-size:200% 100%;}

/* BADGE FLUTUANTE DO CARRINHO */
.cart-bar-fixed{border-radius:0!important;border-top:1px solid rgba(255,255,255,0.1);}

/* PRODUCT CARD 3D SHADOW */
body.modo-cliente .prod-card{
  box-shadow:0 4px 16px rgba(29,78,216,0.08),0 1px 0 rgba(255,255,255,0.8) inset!important;
}

/* ANIMAÇÃO DE ENTRADA */
@keyframes slideUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
#prod-grid .prod-card{animation:slideUp .3s ease both;}
#prod-grid .prod-card:nth-child(2){animation-delay:.04s;}
#prod-grid .prod-card:nth-child(3){animation-delay:.08s;}
#prod-grid .prod-card:nth-child(4){animation-delay:.12s;}
#prod-grid .prod-card:nth-child(5){animation-delay:.16s;}
#prod-grid .prod-card:nth-child(6){animation-delay:.20s;}

/* AUTOCOMPLETE */
.sug-item{display:flex;align-items:center;gap:10px;padding:8px 12px;cursor:pointer;transition:background .15s;font-family:'Poppins',sans-serif;}
.sug-item:hover{background:rgba(34,197,94,0.08);}
.sug-item span{font-size:18px;flex-shrink:0;}

/* DRAG AND DROP */
.ei[draggable]{cursor:grab;}
.ei[draggable]:active{cursor:grabbing;}
.ei.dragging{opacity:.4;border-style:dashed;}

/* PIX MODAL */
#pix-qr-img{border-radius:8px;}

/* PRECOS EDIT */
#precos-lista .tbl input{background:var(--card2);border:1px solid var(--br2);border-radius:var(--rsm);padding:5px 8px;font-size:12px;color:var(--text);font-family:'Poppins',sans-serif;outline:none;}
#precos-lista .tbl input:focus{border-color:var(--green);}

/* RELATÓRIO PRODUTO */
#relatorio-produtos>div:last-child{border-bottom:none;}

/* TOUR GUIADO */
#tour-overlay{z-index:1500;}
#tour-highlight{z-index:1500;pointer-events:none;}
#tour-card{z-index:1501;animation:slideIn .3s ease;}

/* ATALHOS */
#atalhos-panel code{background:var(--card);border:1px solid var(--br2);border-radius:4px;padding:1px 6px;font-size:10px;font-family:monospace;color:var(--green);}

/* FILTROS CATÁLOGO */
#cat-filtros{flex-wrap:wrap;}

/* TROCO */
#troco-result{animation:slideIn .2s ease;}

/* AGENDAMENTO */
#agendamento-form{animation:fadeIn .2s ease;}

/* PRINT MELHORADO */
@media print{
  body{background:#fff!important;color:#000!important;}
  .sidebar,.topbar,.notif,.modal-ov,#login-tela,#tour-overlay,button:not(.print-show){display:none!important;}
  .main{padding:0!important;overflow:visible!important;}
  .page{display:block!important;}
}

/* LOGIN TELA — animação de entrada */
#login-tela{animation:fadeIn .25s ease;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

/* PAPEL CARD — hover melhores */
.papel-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,0.4);}

/* FLOATING CART BTN — sempre visível no catálogo */
#page-catalogo .btn[style*="position:fixed"]{box-shadow:0 4px 20px rgba(34,197,94,0.35);}

/* CATALOG EMPTY STATE */
.cat-empty{text-align:center;padding:40px 20px;color:var(--muted2);}
.cat-empty-icon{font-size:48px;display:block;margin-bottom:12px;}

/* TABLE HOVER MELHOR */
.tbl tr:hover td{background:rgba(255,255,255,0.02);}

/* MODO CLARO: tabela */
[data-theme="light"] .tbl tr:hover td{background:rgba(0,0,0,0.02);}
[data-theme="light"] .tbl th{color:var(--muted);}
[data-theme="light"] .tbl td{color:var(--text);}

/* PROD CARD SEM ESTOQUE */
.prod-card.sem-estoque{opacity:.45;pointer-events:none;}

/* NOTIF MELHOR */
.notif{border-radius:var(--r);padding:12px 16px;}

/* SCROLLBAR DARK */
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12);border-radius:100px;}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.22);}
[data-theme="light"]::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.12);}

/* LEAFLET DARK THEME */
.leaflet-container{background:#07090e!important;font-family:'Poppins',sans-serif;}
.leaflet-popup-content-wrapper{background:var(--card2)!important;border:1px solid var(--br2);color:var(--text);box-shadow:0 6px 24px rgba(0,0,0,0.7)!important;border-radius:var(--rsm)!important;}
.leaflet-popup-tip{background:var(--card2)!important;}
.leaflet-popup-content{margin:10px 14px!important;font-size:12px;font-family:'Poppins',sans-serif;line-height:1.6;color:var(--text);}
.leaflet-popup-content b{color:var(--h);display:block;margin-bottom:4px;font-family:'Poppins',sans-serif;font-size:13px;}
.leaflet-popup-content small{font-size:10px;}
.leaflet-popup-close-button{color:var(--muted)!important;font-size:18px!important;top:6px!important;right:8px!important;}
.leaflet-bar a,.leaflet-bar a:hover{background:var(--card2)!important;color:var(--text)!important;border-color:var(--br2)!important;}
.leaflet-bar a:hover{background:var(--card)!important;}
.leaflet-control-attribution{background:rgba(13,16,24,0.8)!important;color:var(--muted)!important;font-size:9px!important;}
.leaflet-control-attribution a{color:var(--muted2)!important;}
/* Tooltip de bairro no mapa */
.leaflet-bairro-tip{background:rgba(30,58,138,0.85)!important;border:1px solid rgba(59,130,246,0.4)!important;color:#93c5fd!important;font-size:10px!important;font-weight:700!important;padding:2px 8px!important;border-radius:6px!important;}

/* STATUS PILLS — pedidos. Cores pastel pensadas pra fundo escuro (mesmo
   texto claro em cima de fundo claro no modo claro = ilegível) — versão
   [data-theme="light"] abaixo usa tom mais saturado/escuro pro mesmo
   texto continuar legível em fundo branco. Base/modo escuro fica na
   seção "Status pills visuais" mais adiante no arquivo. */
[data-theme="light"] .st-novo{background:rgba(59,130,246,0.12);color:#1d4ed8;}
[data-theme="light"] .st-confirmado{background:rgba(34,197,94,0.12);color:#15803d;}
[data-theme="light"] .st-separacao{background:rgba(249,115,22,0.12);color:#c2410c;}
[data-theme="light"] .st-pronto{background:rgba(168,85,247,0.12);color:#7e22ce;}
[data-theme="light"] .st-entrega{background:rgba(245,158,11,0.14);color:#b45309;}
[data-theme="light"] .st-entregue{background:rgba(34,197,94,0.14);color:#15803d;}

/* BOTÃO TOPO */
#btn-topo:hover{opacity:.85;transform:translateY(-2px);}

/* PED-CARD — card de pedido */
.ped-card{background:var(--card);border:1px solid var(--br);border-radius:var(--r);padding:14px;margin-bottom:10px;transition:border-color .2s;}
.ped-card:hover{border-color:var(--br2);}

/* FRETE BAIXO AVISO */
#frete-baixo-aviso{border-radius:10px;}

/* =====================================================
   CARDS 3D — CATÁLOGO COM IMAGENS FLUTUANTES
   ===================================================== */
/* Só flutua — o scale que tinha aqui deixava emoji/foto "respirando" esticado */
@keyframes floatEmoji{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-9px);}
}
@keyframes shimmerCard{
  0%{background-position:-200% center;}
  100%{background-position:200% center;}
}

.prod-img-wrap{
  position:relative;height:150px;
  display:flex;align-items:center;justify-content:center;
  border-radius:12px;overflow:hidden;
  margin:-14px -14px 12px;
  flex-shrink:0;
  transition:transform .25s ease;
}
/* Chip circular atrás do emoji — lê como "ícone de categoria" em vez de
   adesivo 3D flutuante; sem animação de bounce (ficava com cara de mockup
   quando a grade inteira tinha 20+ emojis balançando fora de sincronia). */
.prod-emoji-3d{
  font-size:38px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  width:72px;height:72px;border-radius:50%;
  background:rgba(255,255,255,0.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.25),0 4px 14px rgba(0,0,0,0.18);
  position:relative;z-index:2;user-select:none;
}
/* Para imagens reais */
.prod-img-wrap img{
  width:92px;height:92px;object-fit:contain;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,0.22));
  position:relative;z-index:2;border-radius:8px;
}

/* Card base upgrades */
.prod-card{
  display:flex;flex-direction:column;
  overflow:hidden;
}
.prod-card:hover .prod-img-wrap{transform:scale(1.03);}

/* Modos claro e escuro — override nas cores do card */
body.modo-publico .prod-img-wrap,
body.modo-cliente .prod-img-wrap{border-radius:12px;}

/* Frete badge no card */
.prod-frete-badge{
  display:inline-flex;align-items:center;gap:3px;
  font-size:9px;font-weight:700;padding:2px 7px;border-radius:100px;
  margin-top:4px;width:fit-content;
}
.prod-frete-badge.gratis{background:rgba(34,197,94,0.12);color:var(--green);}
.prod-frete-badge.cobrado{background:rgba(245,158,11,0.12);color:var(--amber);}

/* =====================================================
   SEPARADOR — CHECKLIST INTERATIVO
   ===================================================== */
.sep-head-row{
  display:flex;align-items:center;gap:12px;padding:0 0 8px;
  font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:var(--muted2);border-bottom:2px solid var(--br2);margin-bottom:2px;
}
.sep-check-item{
  display:flex;align-items:center;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--br);
  transition:opacity .3s,transform .3s,background .15s;cursor:pointer;
  margin:0 -6px;padding-left:6px;padding-right:6px;border-radius:8px;
}
.sep-check-item:hover{background:rgba(120,140,180,0.06);}
.sep-check-item.done{opacity:.38;}
.sep-check-item.done .sep-item-nome{text-decoration:line-through;color:var(--muted);}
.sep-check-box{
  width:24px;height:24px;border:2px solid var(--br2);
  border-radius:7px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .2s;flex-shrink:0;font-size:13px;
}
.sep-check-box.checked{background:var(--green);border-color:var(--green);color:#000;}
.sep-item-nome{font-size:12px;font-weight:600;color:var(--h);}
.sep-item-pedidos{display:flex;gap:4px;flex-wrap:wrap;margin-top:3px;}
.sep-pedido-tag{
  font-size:9px;font-weight:700;color:var(--muted2);
  background:var(--card2);border:1px solid var(--br);border-radius:100px;
  padding:1px 7px;
}
.sep-item-qtd{font-family:'Poppins',sans-serif;font-size:16px;font-weight:800;color:var(--amber);flex-shrink:0;}
.sep-progress{
  height:6px;border-radius:100px;background:var(--br);
  margin-bottom:14px;overflow:hidden;
}
.sep-progress-bar{
  height:100%;border-radius:100px;
  background:linear-gradient(90deg,var(--green),#4ade80);
  transition:width .4s ease;
}

/* =====================================================
   ROMANEIO — IMPRESSÃO
   ===================================================== */
@media print{
  body *{visibility:hidden;}
  #romaneio-print,#romaneio-print *{visibility:visible;}
  #romaneio-print{position:fixed;inset:0;background:#fff;padding:20px;font-family:monospace;font-size:12px;color:#000;}
}

/* =====================================================
   ALERTA DE ESTOQUE BAIXO
   ===================================================== */
.estoque-alerta-bar{
  display:flex;align-items:center;gap:10px;
  background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.25);
  border-radius:10px;padding:10px 14px;margin-bottom:12px;font-size:12px;
}
.estoque-alerta-bar .ea-num{
  font-family:'Poppins',sans-serif;font-size:18px;font-weight:800;color:var(--red);
}

/* =====================================================
   BARRA DE FRETE CALCULADORA NO CATÁLOGO
   ===================================================== */
.frete-calc-bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:rgba(37,99,235,0.06);border:1px solid rgba(37,99,235,0.15);
  border-radius:10px;padding:10px 14px;margin-bottom:12px;font-size:12px;
}
.frete-calc-result{
  font-family:'Poppins',sans-serif;font-weight:800;font-size:14px;
  color:var(--blue);margin-left:auto;
}

/* =====================================================
   DESIGN POLISH — Animações, Skeleton, Empty States
   ===================================================== */

/* ── Página entrando ── */
.page.active{animation:pageIn .22s ease;}
@keyframes pageIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* ── Skeleton loading ── */
@keyframes shimmer{
  0%{background-position:-400px 0;}
  100%{background-position:400px 0;}
}
.skeleton{
  border-radius:8px;
  background:linear-gradient(90deg,var(--card) 25%,var(--card2) 50%,var(--card) 75%);
  background-size:800px 100%;
  animation:shimmer 1.4s infinite;
}
.skeleton-card{height:220px;border-radius:var(--r);margin-bottom:0;}
.skeleton-line{height:12px;border-radius:6px;margin-bottom:8px;}
.skeleton-line.w60{width:60%;}
.skeleton-line.w80{width:80%;}
.skeleton-line.w40{width:40%;}

/* ── Empty state ── */
.empty-state{
  display:flex;flex-direction:column;align-items:center;
  padding:48px 24px;text-align:center;grid-column:1/-1;
}
.empty-state-icon{font-size:52px;margin-bottom:12px;opacity:.7;}
.empty-state-title{font-family:'Poppins',sans-serif;font-size:15px;font-weight:700;color:var(--h);margin-bottom:6px;}
.empty-state-sub{font-size:12px;color:var(--muted2);max-width:260px;line-height:1.7;}

/* ── Botões com ripple ── */
.btn::after,.prod-add::after,.lbtn::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:rgba(255,255,255,0.15);opacity:0;
  transition:opacity .3s;pointer-events:none;
}
.btn:active::after,.prod-add:active::after,.lbtn:active::after{opacity:1;}
.btn{position:relative;overflow:hidden;}

/* ── Cards com micro-hover melhorado ── */
/* Sem isso o .card só tinha borda de 1px pra se separar do fundo — no tema
   escuro fica bem achatado. Uma sombra suave em repouso (mais forte no
   hover) dá sensação de superfície elevada sem mudar nada da paleta. */
.card{transition:box-shadow .22s,border-color .22s,transform .15s;box-shadow:0 1px 2px rgba(0,0,0,0.2),0 4px 12px rgba(0,0,0,0.18);}
.card:hover{transform:translateY(-1px);box-shadow:0 2px 4px rgba(0,0,0,0.22),0 8px 20px rgba(0,0,0,0.22);}
.kpi{box-shadow:0 1px 2px rgba(0,0,0,0.2),0 4px 12px rgba(0,0,0,0.18);}

/* ── Input focus ring ── */
.fi:focus,.fsel:focus{
  outline:none;
  border-color:var(--blue)!important;
  box-shadow:0 0 0 3px rgba(37,99,235,0.15)!important;
  transition:box-shadow .18s,border-color .18s;
}

/* ── Notif melhorada ── */
.notif{
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.08);
}
body.modo-publico .notif{
  background:rgba(255,255,255,0.96)!important;
  border:1px solid rgba(37,99,235,0.2)!important;
  box-shadow:0 8px 32px rgba(37,99,235,0.15)!important;
}
/* Fundo claro precisa de texto escuro — antes ficava branco no branco, ilegível */
body.modo-publico .notif-title,body.modo-cliente .notif-title{color:#0f172a!important;}
body.modo-publico .notif-msg,body.modo-cliente .notif-msg{color:#475569!important;}

/* ── Sidebar nav item com badge animado ── */
.ni-badge{
  background:var(--red);color:#fff;font-size:9px;font-weight:800;
  min-width:16px;height:16px;border-radius:100px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 4px;margin-left:auto;
  animation:badgePop .3s cubic-bezier(.36,.07,.19,.97);
}
@keyframes badgePop{0%{transform:scale(0);}70%{transform:scale(1.2);}100%{transform:scale(1);}}

/* ── Prod-card aprimorado ── */
.prod-card{
  border-radius:16px!important;
  transition:transform .18s cubic-bezier(.4,0,.2,1),box-shadow .18s,border-color .18s!important;
}
.prod-card:hover{
  transform:translateY(-5px) scale(1.01)!important;
  box-shadow:0 16px 40px rgba(0,0,0,0.22)!important;
}
.prod-add{
  border-radius:10px!important;
  font-size:12px!important;font-weight:800!important;
  letter-spacing:.3px!important;
  transition:transform .15s,box-shadow .15s!important;
}
.prod-add:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(37,99,235,0.4)!important;}
.prod-add:active{transform:scale(.97);}

/* ── Fav button ── */
.fav-btn{
  position:absolute;top:8px;right:8px;z-index:10;
  background:rgba(0,0,0,0.35);backdrop-filter:blur(4px);
  border:none;border-radius:50%;width:28px;height:28px;
  font-size:14px;cursor:pointer;transition:transform .2s,background .2s;
  display:flex;align-items:center;justify-content:center;
}
.fav-btn:hover{transform:scale(1.2);background:rgba(0,0,0,0.5);}
.fav-btn.ativo{background:rgba(239,68,68,0.25);color:#f87171;}

/* ── Banner rotativo de promoções ──
   .promo-slide usava min-width:100%+flex-shrink:0, mas sem flex-basis
   explícito o navegador ainda calculava o tamanho "natural" do slide a
   partir do conteúdo (texto longo + emoji grande) antes de aplicar o
   min-width — em telas estreitas isso deixava o slide mais largo que o
   carrossel, cortando o começo do texto e vazando um pedaço do próximo
   slide. flex:0 0 100% fixa o tamanho pelo flex-basis, sem depender do
   conteúdo. */
.promo-slide{flex:0 0 100%;width:100%;height:130px;position:relative;display:flex;align-items:center;gap:16px;padding:16px 46px;border-radius:14px;overflow:hidden;}
.promo-slide-bg{position:absolute;inset:0;z-index:0;}
.promo-slide-content{position:relative;z-index:2;flex:1;min-width:0;}
.promo-slide-emoji{font-size:68px;position:relative;z-index:2;flex-shrink:0;filter:drop-shadow(0 8px 16px rgba(0,0,0,0.3));animation:floatEmoji 3s ease-in-out infinite;}
.promo-slide-foto{width:100px;height:100px;object-fit:contain;position:relative;z-index:2;flex-shrink:0;filter:drop-shadow(0 10px 18px rgba(0,0,0,0.35));animation:floatEmoji 3.2s ease-in-out infinite;}
.promo-slide-tag{display:inline-block;background:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.3);border-radius:100px;padding:2px 10px;font-size:10px;font-weight:700;color:#fff;letter-spacing:.5px;margin-bottom:4px;}
.promo-slide-nome{font-family:'Poppins',sans-serif;font-size:15px;font-weight:800;color:#fff;line-height:1.2;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.promo-slide-desc{font-size:11px;color:rgba(255,255,255,0.8);margin-bottom:4px;}
.promo-slide-preco{font-family:'Poppins',sans-serif;font-size:24px;font-weight:800;color:#fff;line-height:1;}
/* Slide com foto de banner pronta (enviada pelo gestor) — imagem cobre o slide inteiro */
.promo-slide-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:1;display:block;}
.promo-slide-img-shade{position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(7,11,20,.18),transparent 46%,rgba(7,11,20,.1));pointer-events:none;}
/* Slide com arte pronta (ex: post de Instagram já pronto, tipo "SUPER OFERTAS")
   costuma vir quase quadrado — o slide padrão é bem mais baixo/largo (130px),
   então esticado em cover ia cortar boa parte da arte. Aqui o slide vira
   quase quadrado e a imagem usa contain, mostrando a arte inteira sem corte;
   como a arte já traz todo o texto/preço prontos, a sombra de legibilidade
   dos slides gerados automaticamente não faz sentido aqui. */
.promo-slide.promo-slide-com-foto{height:auto;aspect-ratio:1/1;max-height:420px;padding:0;}
.promo-slide.promo-slide-com-foto .promo-slide-img{object-fit:contain;background:#0b1220;}
.promo-slide.promo-slide-com-foto .promo-slide-img-shade{display:none;}
.promo-banner-edit-btn{position:absolute;bottom:8px;right:8px;z-index:6;background:rgba(8,13,26,0.72);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,0.25);color:#fff;border-radius:100px;padding:5px 10px;font-size:11px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:4px;opacity:.85;transition:all .18s;}
.promo-banner-edit-btn:hover{opacity:1;background:rgba(37,99,235,0.85);border-color:transparent;}
.promo-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,0.4);border:none;cursor:pointer;padding:0;transition:all .25s;}
.promo-dot.ativo{background:#fff;width:20px;border-radius:100px;}

/* ── Sistema de crédito ── */
.credito-bar{height:8px;border-radius:100px;background:var(--br);overflow:hidden;margin:6px 0;}
.credito-bar-fill{height:100%;border-radius:100px;transition:width .5s ease;}
.credito-ok{background:linear-gradient(90deg,#16a34a,#22c55e);}
.credito-aviso{background:linear-gradient(90deg,#b45309,#f59e0b);}
.credito-critico{background:linear-gradient(90deg,#b91c1c,#ef4444);}

/* ── Histórico Financeiro — resumo geral e cards ── */
.fin-resumo{
  display:flex;gap:0;margin-bottom:14px;
  background:var(--card);border:1px solid var(--br);border-radius:var(--r);
  overflow:hidden;
}
.fin-resumo-item{
  flex:1;padding:12px 16px;
  border-right:1px solid var(--br);
}
.fin-resumo-item:last-child{border-right:none;}
.fin-resumo-v{font-family:'Poppins',sans-serif;font-size:17px;font-weight:800;margin-top:2px;}
.fin-card{transition:box-shadow .2s,border-color .2s;}
.fin-card:hover{box-shadow:0 4px 16px rgba(0,0,0,0.08);}
@media(max-width:640px){
  .fin-resumo{flex-direction:column;}
  .fin-resumo-item{border-right:none;border-bottom:1px solid var(--br);}
  .fin-resumo-item:last-child{border-bottom:none;}
}

/* =====================================================
   POLIMENTO PROFISSIONAL FINAL
   ===================================================== */

/* ── Nav pública ── */
#public-nav{-ms-overflow-style:none;scrollbar-width:none;}
#public-nav::-webkit-scrollbar{display:none;}
.pub-nav-btn{
  background:none;border:none;padding:12px 14px;font-size:13px;font-weight:600;
  color:var(--muted2);cursor:pointer;white-space:nowrap;transition:all .2s;
  font-family:'Poppins',sans-serif;border-bottom:2px solid transparent;flex-shrink:0;
}
.pub-nav-btn:hover{color:var(--blue);}
.pub-nav-btn.active{color:var(--blue);border-bottom-color:var(--blue);font-weight:700;}
body.modo-publico .pub-nav-btn{color:#64748b;}
body.modo-publico .pub-nav-btn:hover{color:#1d4ed8;}
body.modo-publico .pub-nav-btn.active{color:#1d4ed8;border-bottom-color:#1d4ed8;}
/* Oculta nav pública quando logado */
body[class*="role-"] #public-nav{display:none!important;}

/* ── WhatsApp flutuante ── */
#wpp-float{animation:wppPulse 2.5s ease-in-out infinite;}
#wpp-float{line-height:0!important;display:flex!important;align-items:center!important;justify-content:center!important;}
#wpp-float svg{display:block;width:28px;height:28px;transform:none!important;}
@keyframes wppPulse{0%,100%{box-shadow:0 4px 20px rgba(37,211,102,0.5);}50%{box-shadow:0 4px 32px rgba(37,211,102,0.8),0 0 0 6px rgba(37,211,102,0.12);}}
/* Oculta quando logado internamente */
body.role-gestor #wpp-float,body.role-motorista #wpp-float,
body.role-ajudante #wpp-float,body.role-escritorio #wpp-float,
body.role-esc #wpp-float,body.role-atendente #wpp-float,
body.role-at #wpp-float,body.role-separador #wpp-float,
body.role-sep #wpp-float{display:none!important;}
/* Carrinho no topbar — só faz sentido pra quem compra (visitante ou cliente) */
body.role-gestor #tb-cart-btn,body.role-motorista #tb-cart-btn,
body.role-ajudante #tb-cart-btn,body.role-escritorio #tb-cart-btn,
body.role-esc #tb-cart-btn,body.role-atendente #tb-cart-btn,
body.role-at #tb-cart-btn,body.role-separador #tb-cart-btn,
body.role-sep #tb-cart-btn{display:none!important;}
body.role-gestor #chat-ia-float,body.role-motorista #chat-ia-float,
body.role-ajudante #chat-ia-float,body.role-escritorio #chat-ia-float,
body.role-esc #chat-ia-float,body.role-atendente #chat-ia-float,
body.role-at #chat-ia-float,body.role-separador #chat-ia-float,
body.role-sep #chat-ia-float,body.role-gestor #chat-ia-painel,
body.role-motorista #chat-ia-painel,body.role-ajudante #chat-ia-painel,
body.role-escritorio #chat-ia-painel,body.role-esc #chat-ia-painel,
body.role-atendente #chat-ia-painel,body.role-at #chat-ia-painel,
body.role-separador #chat-ia-painel,body.role-sep #chat-ia-painel{display:none!important;}

/* ── Topbar logo monograma ── */
.tb-logo{user-select:none;}

/* Painel de ofertas para a equipe */
.oferta-manager{background:linear-gradient(135deg,rgba(220,38,38,.08),rgba(245,158,11,.06))!important;border-color:rgba(220,38,38,.24)!important;}
.oferta-manager-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px;}
.oferta-manager-sub{font-size:11px;color:var(--muted2);}
.oferta-manager-mark{flex-shrink:0;background:var(--brand-red);color:#fff;border-radius:10px;padding:6px 8px;text-align:center;font-size:9px;font-weight:800;line-height:1.05;letter-spacing:.5px;transform:rotate(3deg);}
.oferta-banner-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;}
.oferta-banner-item{display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px;background:rgba(255,255,255,.05);border:1px solid var(--glass-border);border-radius:10px;min-width:0;transition:border-color .15s,transform .15s;}
.oferta-banner-item:hover{border-color:var(--br2);transform:translateY(-1px);}
.oferta-banner-thumb{width:58px;height:48px;border-radius:7px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(135deg,#991b1b,#f97316);color:#fff;font-size:25px;}
.oferta-banner-thumb img{width:100%;height:100%;object-fit:cover;}
.oferta-banner-info{min-width:0;display:flex;flex-direction:column;gap:2px;}
.oferta-banner-info strong{font-size:11px;color:var(--h);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.oferta-banner-info small{font-size:10px;color:var(--muted2);}
.oferta-banner-actions{display:flex;align-items:center;gap:5px;}
.oferta-banner-actions .btn{font-size:10px;padding:5px 7px;white-space:nowrap;}

@media(max-width:600px){
  .oferta-manager-head{align-items:flex-start;}
  .oferta-banner-grid{grid-template-columns:1fr;}
  .oferta-banner-item{grid-template-columns:52px minmax(0,1fr);}
  .oferta-banner-thumb{width:52px;height:44px;}
  .oferta-banner-actions{grid-column:1 / -1;justify-content:flex-end;}
  .promo-slide{height:150px;padding:13px 40px;gap:8px;}
  .promo-slide-foto{width:78px;height:78px;}
  .promo-slide-emoji{font-size:52px;}
  .promo-slide-preco{font-size:21px;}
}

/* ── Scrollbar personalizada ── */
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(37,99,235,0.25);border-radius:100px;}
::-webkit-scrollbar-thumb:hover{background:rgba(37,99,235,0.45);}

/* ── Seleção de texto azul ── */
::selection{background:rgba(37,99,235,0.25);color:#fff;}

/* ── Focus visible acessível ── */
button:focus-visible,a:focus-visible{
  outline:2px solid #2563eb;outline-offset:2px;border-radius:4px;
}

/* ── Transição suave entre páginas ── */
.page.active{animation:pageIn .2s ease;}
@keyframes pageIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* ── KPI com linha colorida ── */
.kpi{border-top:3px solid transparent;transition:all .2s;}
.kpi.g{border-top-color:#22c55e;}
.kpi.b{border-top-color:#3b82f6;}
.kpi.a{border-top-color:#f59e0b;}
.kpi.r{border-top-color:#ef4444;}
.kpi.p{border-top-color:#a855f7;}

/* ── Ícone do KPI — mesma cor da linha de cima, numa "casinha" —
   ajuda a bater o olho mais rápido numa tela cheia de número parecido.
   Elemento opcional (.kpi-ico): tile sem ícone continua igual. */
.kpi-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:7px;font-size:12px;
  margin-bottom:4px;
}
.kpi.g .kpi-ico{background:rgba(34,197,94,0.15);}
.kpi.b .kpi-ico{background:rgba(59,130,246,0.15);}
.kpi.a .kpi-ico{background:rgba(245,158,11,0.15);}
.kpi.r .kpi-ico{background:rgba(239,68,68,0.15);}
.kpi.p .kpi-ico{background:rgba(168,85,247,0.15);}

/* ── Prod-card image wrap melhorado ── */
.prod-img-wrap{transition:filter .2s;}
.prod-card:hover .prod-img-wrap{filter:brightness(1.05);}

/* ── Hero do catálogo com glitter sutil ── */
.cat-hero::before{
  content:'';position:absolute;top:-30px;right:-30px;
  width:160px;height:160px;border-radius:50%;
  background:rgba(255,255,255,0.07);pointer-events:none;
}
.cat-hero::after{
  content:'';position:absolute;bottom:-40px;left:30%;
  width:100px;height:100px;border-radius:50%;
  background:rgba(255,255,255,0.04);pointer-events:none;
}

/* ── Botão Entrar redesign ── */
.btn-entrar{
  background:linear-gradient(135deg,#1d4ed8,#2563eb)!important;
  color:#fff!important;border:none!important;
  border-radius:10px!important;padding:8px 16px!important;
  font-size:12px!important;font-weight:800!important;
  box-shadow:0 3px 10px rgba(37,99,235,0.4)!important;
  transition:all .2s!important;font-family:'Poppins',sans-serif!important;
}
.btn-entrar:hover{transform:translateY(-1px)!important;box-shadow:0 5px 16px rgba(37,99,235,0.6)!important;}

/* ── pg-title melhorado ── */
/* Degradê termina na --role-color de cada papel (mesma cor já usada na
   barra lateral e nos números do KPI) em vez do --muted2 genérico — antes
   o título sempre esmaecia pra um cinza neutro no final, igual pra
   qualquer pessoa logada; agora combina com a identidade visual do papel. */
.pg-title{
  font-family:'Poppins',sans-serif;font-size:20px;font-weight:800;
  color:var(--h);margin-bottom:4px;
  background:linear-gradient(135deg,var(--h),var(--role-color));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
body.modo-publico .pg-title,body.modo-cliente .pg-title{
  background:linear-gradient(135deg,#0f172a,#1e40af);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ── Status pills visuais (definição de verdade — consolidada aqui; as
   duas outras seções que mencionam .status-pill/.st-* só documentam o
   tema claro ou apontam pra cá) ── */
.status-pill{
  display:inline-flex!important;align-items:center!important;gap:5px!important;
  vertical-align:middle;font-family:'Poppins',sans-serif;
  font-size:9px!important;font-weight:800!important;
  padding:3px 9px 3px 8px!important;border-radius:100px!important;
  letter-spacing:.3px!important;text-transform:uppercase!important;
}
/* Pontinho na cor do status antes do texto — ajuda a diferenciar sem
   depender só da cor (daltonismo) e facilita bater o olho numa lista
   comprida de pedidos. */
.status-pill::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0;}
.st-novo{background:rgba(59,130,246,0.15);color:#60a5fa;}
.st-confirmado{background:rgba(34,197,94,0.15);color:#4ade80;}
.st-separacao{background:rgba(249,115,22,0.15);color:#fb923c;}
.st-pronto{background:rgba(168,85,247,0.15);color:#c084fc;}
.st-entrega{background:rgba(245,158,11,0.18);color:#fbbf24;}
.st-entregue{background:rgba(34,197,94,0.2);color:#22c55e;}

/* ── Papel cards no login melhorados ── */
.papel-card{
  border-radius:14px!important;transition:all .22s!important;
  border-top-width:3px!important;
}
.papel-card:hover{transform:translateY(-5px) scale(1.02)!important;
  box-shadow:0 12px 32px rgba(0,0,0,0.35)!important;}
.papel-card .pi{font-size:36px!important;margin-bottom:8px!important;}
.papel-card .pn{font-size:13px!important;letter-spacing:.3px!important;}

/* ── Tab do catálogo com pill redesign ── */
.cat-tab{
  border-radius:100px!important;font-size:12px!important;
  padding:8px 18px!important;font-weight:700!important;
  border:2px solid transparent!important;
  transition:all .22s!important;
}
.cat-tab.active{
  background:linear-gradient(135deg,#1d4ed8,#2563eb)!important;
  color:#fff!important;border-color:transparent!important;
  box-shadow:0 4px 14px rgba(37,99,235,0.45)!important;
}
.cat-tab:not(.active):hover{border-color:rgba(37,99,235,0.4)!important;color:var(--blue)!important;}

/* ── Sidebar melhorada ── */
.sb-label{
  font-size:9px!important;font-weight:800!important;
  letter-spacing:1.5px!important;text-transform:uppercase!important;
  color:var(--muted)!important;padding:16px 12px 6px!important;
}
.ni{
  padding:10px 14px!important;margin:1px 6px!important;
  border-radius:10px!important;font-size:12px!important;
  font-weight:600!important;gap:9px!important;
}
.ni-icon{font-size:16px!important;}

/* ── Ícone do menu ganha uma "casinha" na cor do papel — separa melhor
   ícone de texto numa lista de 15-20 itens, sem cor nova (reaproveita
   --role-bg/--role-glow, que o body.role-X já define pra cada papel). */
.ni-icon{
  width:24px!important;height:24px!important;border-radius:7px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  background:var(--role-bg)!important;transition:background .2s!important;
}
.ni.active .ni-icon{background:var(--role-glow)!important;}

/* ── Input de pesquisa melhorado ── */
#cat-busca{
  border-radius:12px!important;
  background:var(--card)!important;
  border:2px solid var(--br)!important;
  font-size:13px!important;
  padding:10px 14px!important;
  transition:all .2s!important;
}
#cat-busca:focus{
  border-color:#2563eb!important;
  box-shadow:0 0 0 4px rgba(37,99,235,0.12)!important;
  background:rgba(37,99,235,0.03)!important;
}

/* ── Mini-cart melhorado ── */
.mini-cart-item{
  padding:10px 0!important;border-bottom:1px solid var(--br)!important;
}
.mini-cart-nome{font-size:12px!important;font-weight:600!important;}
.mini-cart-preco{font-size:11px!important;}

/* ── Ped-card melhorado ── */
.ped-card{
  border-radius:14px!important;padding:14px!important;
  transition:border-color .2s,box-shadow .2s!important;
}
.ped-card:hover{border-color:rgba(37,99,235,0.3)!important;}

/* ── Checkout steps mais limpos ── */
.step-circle.done{background:linear-gradient(135deg,#16a34a,#22c55e)!important;box-shadow:0 3px 10px rgba(34,197,94,0.4)!important;}
.step-circle.active{background:linear-gradient(135deg,#1d4ed8,#2563eb)!important;box-shadow:0 3px 10px rgba(37,99,235,0.4)!important;}

/* ── Borda lateral colorida nos cards de papel ── */
.sb-g{border-left:3px solid #f59e0b;}
.sb-m{border-left:3px solid #06b6d4;}

/* ── Mobile: bottom padding quando cart bar aparece ── */
body:has(.cart-bar-fixed.show) #page-catalogo{padding-bottom:80px;}
body:has(.cart-bar-fixed.show) #page-carrinho{padding-bottom:80px;}
.fav-btn.ativo:hover{background:rgba(239,68,68,0.4);}

/* ── Topbar clock ── */
.tb-clock{
  font-family:'Poppins',sans-serif;font-size:12px;font-weight:700;
  color:var(--muted2);letter-spacing:.5px;
}

/* =====================================================
   LOJA DO CLIENTE — REDESIGN (fotos de produto + hero forte)
   Escopo: área pública/cliente (modo-publico / modo-cliente).
   Painéis internos da equipe não são alterados aqui.
   ===================================================== */

body.modo-publico .cat-hero,body.modo-cliente .cat-hero{padding:32px 26px;}

/* Fotos reais de produto — preenchem o card (estilo vitrine), diferente do emoji flutuante.
   O seletor precisa ser ".prod-img-wrap img.prod-foto-real": a regra genérica
   ".prod-img-wrap img" (80×80, contain, animada) tem especificidade MAIOR que
   ".prod-foto-real" sozinho e engolia estas propriedades — a foto aparecia
   miudinha e balançando no meio do card em vez de preencher a vitrine. */
.prod-img-wrap img.prod-foto-real{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:2;
  animation:none;filter:none;border-radius:0;
}
body.modo-publico .prod-img-wrap,body.modo-cliente .prod-img-wrap{height:210px!important;}
@media(max-width:640px){
  body.modo-publico .prod-img-wrap,body.modo-cliente .prod-img-wrap{height:170px!important;}
}

/* Botão de editar foto (só aparece pro gestor) */
.prod-foto-edit-btn{
  position:absolute;bottom:8px;right:8px;z-index:6;
  background:rgba(8,13,26,0.72);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,0.25);color:#fff;
  border-radius:100px;padding:5px 10px;font-size:11px;font-weight:700;
  cursor:pointer;display:flex;align-items:center;gap:4px;
  opacity:.85;transition:all .18s;
}
.prod-card:hover .prod-foto-edit-btn,.prod-foto-edit-btn:hover{opacity:1;background:rgba(37,99,235,0.85);border-color:transparent;}
.prod-edit-full-btn{right:auto;left:8px;}
.prod-edit-full-btn:hover{background:rgba(168,85,247,0.85)!important;}

/* Foto no modal de detalhe do produto */
.pd-foto-wrap{position:relative;margin-bottom:6px;}
.pd-foto-wrap img{width:100%;max-height:300px;object-fit:cover;border-radius:var(--r);display:block;}

/* Cards de produto — mais respiro e hierarquia mais clara na loja */
body.modo-publico .prod-nome,body.modo-cliente .prod-nome{font-size:13px;}
body.modo-publico .prod-preco,body.modo-cliente .prod-preco{font-size:19px;}

/* Papel-card do login — distingue "Cliente" dos acessos internos sem mudar a estrutura */
.papel-card.a{border-top-color:var(--cli-primary,#1d4ed8)!important;}

/* Selos de confiança no carrinho/checkout */
.trust-row{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0;}
.trust-pill{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;color:var(--muted2);background:var(--card2);border:1px solid var(--br);border-radius:100px;padding:5px 11px;}
body.modo-publico .trust-pill,body.modo-cliente .trust-pill{background:#fff;border-color:var(--cli-border);color:var(--cli-muted);}

/* ── Polimento leve nos painéis internos (gestor/motorista/ajudante/escritório/atendente/separador) ── */
/* Só consistência visual — nenhuma mudança de fluxo ou layout. */
body:not(.modo-cliente):not(.modo-publico) .card,
body:not(.modo-cliente):not(.modo-publico) .card2{transition:border-color .2s,transform .2s;}
body:not(.modo-cliente):not(.modo-publico) .card:hover{border-color:var(--br2);}

/* ── Cat tabs scrollbar oculta + indicador ── */
.cat-tabs{-ms-overflow-style:none;scrollbar-width:none;}
.cat-tabs::-webkit-scrollbar{display:none;}

/* ── PIX box ── */
.pix-box{
  background:linear-gradient(135deg,rgba(22,163,74,0.06),rgba(34,197,94,0.03));
  border:1.5px dashed rgba(34,197,94,0.35);
  border-radius:14px;padding:20px;text-align:center;
}
.pix-valor{
  font-family:'Poppins',sans-serif;font-size:28px;font-weight:800;
  color:var(--green);letter-spacing:.5px;margin:6px 0;
}

/* ── Chat melhorado ── */
.chat-wrap{
  border-radius:14px!important;
  border:1px solid var(--br)!important;
  overflow:hidden;
}
.chat-head{
  background:var(--card2)!important;
  padding:10px 14px!important;
  border-bottom:1px solid var(--br)!important;
  display:flex;align-items:center;gap:10px;
}
.chat-msgs{scrollbar-width:thin;scrollbar-color:var(--br) transparent;}
.chat-msg{
  padding:7px 11px!important;
  border-radius:12px!important;
  max-width:88%!important;
  font-size:12px!important;
  line-height:1.5!important;
  animation:msgIn .2s ease;
}
@keyframes msgIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.chat-msg.sent{
  background:linear-gradient(135deg,#1d4ed8,#2563eb)!important;
  color:#fff!important;margin-left:auto;
}
.chat-msg.recv{background:var(--card2)!important;}
.chat-send{
  border-radius:10px!important;
  transition:transform .15s!important;
}
.chat-send:active{transform:scale(.93)!important;}

/* ── Checkout steps ── */
.checkout-steps{display:flex;align-items:center;gap:0;}
.step-item{display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0;}
.step-label{font-size:10px;font-weight:700;color:var(--muted2);letter-spacing:.3px;}
.step-circle{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;font-family:'Poppins',sans-serif;
  transition:all .3s;
}
.step-circle.done{background:var(--green);color:#000;}
.step-circle.active{background:var(--blue);color:#fff;box-shadow:0 0 0 4px rgba(37,99,235,0.2);}
.step-circle.pend{background:var(--card2);color:var(--muted2);border:2px solid var(--br);}
.step-line{flex:1;height:2px;background:var(--br);margin:0 4px;margin-bottom:18px;}
.step-line.done{background:var(--green);}

/* ── KPI cards ── */
.kpi{
  transition:transform .2s,box-shadow .2s!important;
  cursor:default;
}
.kpi:hover{transform:translateY(-3px)!important;}

/* ── Float cart bar ── */
.cart-bar-fixed{
  border-radius:16px!important;
  margin:0 12px 12px!important;
  box-shadow:0 8px 28px rgba(0,0,0,0.4)!important;
}

/* ── Mobile touch targets ── */
@media(max-width:768px){
  .prod-card{border-radius:14px!important;}
  .prod-grid{grid-template-columns:repeat(auto-fill,minmax(145px,1fr))!important;gap:10px!important;}
  .prod-img-wrap{height:110px!important;}
  .prod-emoji-3d{font-size:48px!important;}
  .btn{min-height:42px;}
  .fi,.fsel{min-height:46px;font-size:15px!important;}
  .chat-inp{font-size:15px!important;}
  .pg-title{font-size:18px!important;}
  .topbar{height:52px!important;}
  .checkout-steps{margin-bottom:14px!important;}
}

/* ── Scroll suave em containers internos ── */
.chat-msgs,.sidebar,.main{scroll-behavior:smooth;}

/* ── Konfetti / partículas ── */
.cart-particle{
  position:fixed;pointer-events:none;z-index:9999;
  width:8px;height:8px;border-radius:50%;
  animation:particle .8s ease-out forwards;
}
@keyframes particle{
  0%{transform:translate(0,0) scale(1);opacity:1;}
  100%{transform:translate(var(--tx),var(--ty)) scale(0);opacity:0;}
}

/* ── Welcome toast ── */
.welcome-toast{
  position:fixed;top:60px;left:50%;transform:translateX(-50%);
  background:var(--card);border:1px solid var(--br2);
  border-radius:12px;padding:10px 18px;
  font-size:13px;font-weight:600;color:var(--h);
  box-shadow:0 8px 28px rgba(0,0,0,0.4);
  z-index:700;white-space:nowrap;
  animation:toastIn .35s cubic-bezier(.36,.07,.19,.97);
}
@keyframes toastIn{from{opacity:0;top:44px;}to{opacity:1;top:60px;}}

/* ── Sidebar role badge ── */
.sidebar-role-badge{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;margin-bottom:4px;
  background:var(--role-bg);
  border-bottom:1px solid var(--br);
}
.sidebar-role-icon{font-size:22px;}
.sidebar-role-nome{font-family:'Poppins',sans-serif;font-size:13px;font-weight:700;color:var(--h);}
.sidebar-role-tipo{font-size:10px;color:var(--role-color);font-weight:700;letter-spacing:.5px;text-transform:uppercase;}

/* ── Botão scroll-to-top ── */
#btn-topo{
  display:none;
  position:fixed;bottom:270px;right:16px;z-index:7900;
  width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,#1d4ed8,#2563eb);
  border:none;color:#fff;font-size:18px;cursor:pointer;
  box-shadow:0 4px 14px rgba(37,99,235,0.5);
  transition:all .25s;
  align-items:center;justify-content:center;
}
#btn-topo.visivel{display:flex;}
#btn-topo:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(37,99,235,0.7);}

/* ── Rodapé público ── */
#public-footer{transition:opacity .3s;}
body[class*="role-"] #public-footer{display:none!important;}
body.modo-publico #public-footer{display:block;}

/* ── Melhorias mobile para o rodapé ── */
@media(max-width:600px){
  #public-footer{padding:24px 16px 16px;}
}

/* ── Melhorias mobile gerais — evita conteúdo cortado nas bordas ── */
@media(max-width:600px){
  /* Esconde o relógio no topbar em telas estreitas — libera espaço pro
     indicador de GPS não ficar cortado fora da tela (só aparecia girando
     o celular pra paisagem, por causa da largura extra). */
  .tb-clock{display:none!important;}
  .tb-right{gap:4px;}
  #btn-entrar-cliente{padding:5px 8px!important;font-size:10px!important;}
  #tb-cart-btn{padding:5px 8px!important;}
  .gps-indicator{font-size:9px!important;padding:3px 6px!important;}
  .tb-sair{padding:4px 8px!important;font-size:10px!important;}
  .tb-user{display:none!important;} /* nome já aparece no menu lateral */
  #btn-instalar-pwa{display:none!important;} /* cabe no menu, não precisa duplicar no topbar */

  /* Topbar da equipe (logado) — logo com nome + badge de papel + código
     não cabem juntos numa tela estreita, quebrava "Santa Alimentos" em
     duas linhas e empurrava outros itens pra fora da tela. Em telas
     pequenas, com algum papel ativo, mostra só a logo (sem o texto). */
  .topbar{flex-wrap:nowrap!important;}
  body[class*="role-"] .tb-logo span{display:none;}
  .tb-logo img{width:26px!important;height:26px!important;}
  .tb-role{font-size:9px!important;padding:2px 6px!important;}
  .tb-code{font-size:9px!important;padding:2px 5px!important;}
  #tb-user-info{gap:4px!important;}

  /* Nav pública — permite rolagem horizontal suave em vez de cortar
     o conteúdo na borda da tela, se algum dia não couber. */
  #public-nav{overflow-x:auto!important;-webkit-overflow-scrolling:touch;}
}

/* ── Animação de entrada nas seções ── */
.page.active > *:not(script):not(style){animation:fadeInUp .35s ease both;}
@keyframes fadeInUp{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}

/* ── Modo público: fundo mais claro e melhor legibilidade ── */
body.modo-publico{--bg:#f0f5ff;--card:#fff;--card2:#f1f5f9;--text:#1e293b;--h:#0f172a;--muted:#64748b;--muted2:#475569;--br:rgba(37,99,235,0.15);--br2:rgba(37,99,235,0.25);}
body.modo-publico .topbar{background:#fff!important;border-bottom:1px solid rgba(37,99,235,0.15)!important;box-shadow:0 2px 12px rgba(37,99,235,0.08)!important;}
body.modo-publico .tb-logo span{color:#0f172a!important;}
body.modo-publico .tb-clock{color:#64748b!important;}
body.modo-publico .btn-entrar{background:linear-gradient(135deg,#1d4ed8,#2563eb)!important;color:#fff!important;}
body.modo-publico #public-nav{background:#fff!important;}

/* ── Notif container melhorado ── */
#notif-container{position:fixed;top:70px;right:12px;z-index:9500;display:flex;flex-direction:column;gap:8px;pointer-events:none;width:min(320px,calc(100vw - 24px));}

/* =====================================================
   POLIMENTO VISUAL GERAL — passe de "deixar mais bonito"
   ===================================================== */

/* Cards de produto — mais profundidade e resposta ao toque */
body.modo-publico .prod-card,body.modo-cliente .prod-card{
  box-shadow:0 1px 3px rgba(15,23,42,0.06)!important;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s!important;
}
body.modo-publico .prod-card:hover,body.modo-cliente .prod-card:hover{
  transform:translateY(-5px)!important;
  box-shadow:0 16px 32px rgba(29,78,216,0.16)!important;
}
body.modo-publico .prod-add,body.modo-cliente .prod-add{transition:transform .15s,box-shadow .2s!important;}
body.modo-publico .prod-add:hover,body.modo-cliente .prod-add:hover{transform:translateY(-1px) scale(1.02)!important;}
body.modo-publico .prod-add:active,body.modo-cliente .prod-add:active{transform:scale(.97)!important;}

/* Barra de busca/filtros do catálogo — mais respiro, menos "empilhado" */
body.modo-publico #cat-busca,body.modo-cliente #cat-busca{padding:11px 16px!important;font-size:13px!important;}
#page-catalogo .g2,#page-catalogo>div[style*="display:flex"]{row-gap:10px;}

/* Banner de acesso interno — discreto de propósito, não deve competir com a compra */
#banner-login{
  background:transparent!important;border:1px dashed var(--br2)!important;
  padding:7px 12px!important;opacity:.75;transition:opacity .2s;
}
#banner-login:hover{opacity:1;}
#banner-login span{font-size:11px!important;}

/* KPIs com valor zero — estado vazio discreto em vez de "0" garrafal parecendo erro */
.kpi-n[data-zero="true"]{color:var(--muted)!important;opacity:.5;font-weight:700!important;}

/* Botões primários — resposta de toque consistente em todo o sistema */
.btn:active,.lbtn:active{transform:scale(.97);}
.btn,.lbtn{transition:transform .12s,opacity .15s,box-shadow .2s!important;}

/* Cards internos (staff) — sombra sutil pra dar profundidade sem pesar no escuro */
body:not(.modo-cliente):not(.modo-publico) .card{box-shadow:0 1px 2px rgba(0,0,0,0.2);}
body:not(.modo-cliente):not(.modo-publico) .card:hover{box-shadow:0 4px 14px rgba(0,0,0,0.3);transform:translateY(-1px);}

/* Botão fechar (×) dos modais — área de toque maior, antes era só o texto sem folga.
   position+z-index: o botão é float e conteúdo posicionado logo abaixo (ex.: a foto
   do produto, .pd-foto-wrap) pintava POR CIMA dele — só uns poucos px do canto que
   escapavam da foto recebiam o clique. */
.modal-close{
  width:38px!important;height:38px!important;
  display:flex!important;align-items:center;justify-content:center;
  border-radius:50%!important;font-size:16px!important;
  margin:-8px -8px 0 0!important;
  position:relative;z-index:20;
  transition:background .15s,color .15s!important;
}
.modal-close:hover{background:rgba(127,127,127,0.15)!important;color:var(--h)!important;}
/* No modal de produto o × fica sobre a foto — chip escuro pra enxergar em qualquer imagem */
#produto-modal .modal-close{background:rgba(15,23,42,0.55)!important;color:#fff!important;}
#produto-modal .modal-close:hover{background:rgba(15,23,42,0.78)!important;}

/* ============================================================
   TEMA ESCURO NA LOJA (visitante e cliente logado)
   Os blocos de modo-publico/modo-cliente lá em cima FORÇAM o tema
   azul/branco com !important — por isso o botão 🌙 "não funcionava"
   na loja: nada mudava de cor. Este bloco devolve o escuro quando
   data-theme="dark". Precisa vir DEPOIS de todas aquelas regras e
   com seletor mais específico (html[data-theme]) pra vencê-las.
   O cliente logado também tem a classe modo-publico no body, então
   mirar em body.modo-publico cobre os dois casos.
   ============================================================ */
html[data-theme="dark"] body.modo-publico{
  --bg:#070b14;--surface:#0c1220;--card:#0e1626;--card2:#141e33;
  --br:rgba(37,99,235,0.14);--br2:rgba(37,99,235,0.26);
  --text:#c8d4e8;--muted:#5c7090;--muted2:#8fa3c0;--h:#eef2ff;
  --cli-bg:#070b14;--cli-card:#0e1626;--cli-card2:#141e33;
  --cli-text:#c8d4e8;--cli-muted:#8fa3c0;--cli-border:#1d2a44;
  --cli-primary-light:rgba(37,99,235,0.16);
  --cli-shadow:0 2px 12px rgba(0,0,0,0.35);
}
html[data-theme="dark"] body.modo-publico,
html[data-theme="dark"] body.modo-publico #app,
html[data-theme="dark"] body.modo-publico .main,
html[data-theme="dark"] body.modo-publico .app-body{background:#070b14!important;color:#c8d4e8!important;}
html[data-theme="dark"] body.modo-publico .topbar{background:rgba(10,16,30,0.96)!important;border-bottom:2px solid #2563eb!important;box-shadow:0 2px 20px rgba(0,0,0,0.45)!important;}
html[data-theme="dark"] body.modo-publico .tb-logo,
html[data-theme="dark"] body.modo-publico .tb-logo span{color:#eef2ff!important;}
html[data-theme="dark"] body.modo-publico .tb-clock{color:#8fa3c0!important;}
html[data-theme="dark"] body.modo-publico .sidebar{background:#0c1220!important;border-right:1px solid #1d2a44!important;}
html[data-theme="dark"] body.modo-publico .ni{color:#8fa3c0!important;}
html[data-theme="dark"] body.modo-publico .ni:hover,
html[data-theme="dark"] body.modo-publico .ni.active{background:rgba(37,99,235,0.16)!important;color:#93c5fd!important;}
html[data-theme="dark"] body.modo-publico .card,
html[data-theme="dark"] body.modo-publico .card2{background:#0e1626!important;border-color:#1d2a44!important;box-shadow:0 2px 12px rgba(0,0,0,0.3)!important;}
html[data-theme="dark"] body.modo-publico .fi,
html[data-theme="dark"] body.modo-publico .fsel{background:#0c1424!important;border-color:#1d2a44!important;color:#c8d4e8!important;}
html[data-theme="dark"] body.modo-publico .fi:focus,
html[data-theme="dark"] body.modo-publico .fsel:focus{border-color:#2563eb!important;box-shadow:0 0 0 3px rgba(37,99,235,0.2)!important;}
html[data-theme="dark"] body.modo-publico .fl{color:#8fa3c0!important;}
html[data-theme="dark"] body.modo-publico .st{color:#eef2ff!important;}
html[data-theme="dark"] body.modo-publico .pg-sub{color:#8fa3c0!important;}
/* pg-title usa gradiente com background-clip:text — sobrescrever só o color não aparece */
html[data-theme="dark"] body.modo-publico .pg-title{background:linear-gradient(135deg,#eef2ff,#93c5fd);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
html[data-theme="dark"] body.modo-publico .cat-tab{background:#141e33!important;color:#8fa3c0!important;border-color:#1d2a44!important;}
html[data-theme="dark"] body.modo-publico .prod-card{background:#0e1626!important;border-color:#1d2a44!important;box-shadow:0 2px 12px rgba(0,0,0,0.3)!important;}
html[data-theme="dark"] body.modo-publico .prod-card:hover{border-color:#2563eb!important;box-shadow:0 12px 28px rgba(0,0,0,0.45)!important;}
html[data-theme="dark"] body.modo-publico .prod-nome{color:#eef2ff!important;}
html[data-theme="dark"] body.modo-publico .prod-desc{color:#8fa3c0!important;}
html[data-theme="dark"] body.modo-publico .prod-preco{color:#60a5fa!important;}
html[data-theme="dark"] body.modo-publico .qty-btn{background:#141e33!important;border-color:#1d2a44!important;color:#c8d4e8!important;}
html[data-theme="dark"] body.modo-publico .cart-item{border-color:#1d2a44!important;}
html[data-theme="dark"] body.modo-publico .cart-item-nome{color:#eef2ff!important;}
html[data-theme="dark"] body.modo-publico .cart-item-preco{color:#8fa3c0!important;}
html[data-theme="dark"] body.modo-publico .cart-item-subtotal,
html[data-theme="dark"] body.modo-publico .cart-total-value{color:#60a5fa!important;}
html[data-theme="dark"] body.modo-publico .cart-summary{background:#0e1626!important;border-color:#1d2a44!important;}
html[data-theme="dark"] body.modo-publico .modal{background:#0e1626!important;border-color:#1d2a44!important;color:#c8d4e8!important;}
html[data-theme="dark"] body.modo-publico .modal-title{color:#eef2ff!important;}
html[data-theme="dark"] body.modo-publico .modal-sub{color:#8fa3c0!important;}
html[data-theme="dark"] body.modo-publico .notif{background:rgba(14,22,38,0.97)!important;border-color:#2563eb!important;box-shadow:0 8px 32px rgba(0,0,0,0.5)!important;}
html[data-theme="dark"] body.modo-publico .notif-title{color:#93c5fd!important;}
html[data-theme="dark"] body.modo-publico .notif-msg{color:#c8d4e8!important;}
html[data-theme="dark"] body.modo-publico .mini-cart{background:rgba(10,16,30,0.97)!important;border-left:1px solid #1d2a44!important;}
html[data-theme="dark"] body.modo-publico .mini-cart-header,
html[data-theme="dark"] body.modo-publico .mini-cart-footer,
html[data-theme="dark"] body.modo-publico .mini-cart-item{border-color:#1d2a44!important;}
html[data-theme="dark"] body.modo-publico .mini-cart-nome{color:#eef2ff!important;}
html[data-theme="dark"] body.modo-publico .mini-cart-preco{color:#60a5fa!important;}
html[data-theme="dark"] body.modo-publico .sug-item{background:#0e1626!important;}
html[data-theme="dark"] body.modo-publico .sug-item:hover{background:#141e33!important;}
html[data-theme="dark"] body.modo-publico #login-tela{background:linear-gradient(135deg,#0a1120,#0e1a33)!important;}
html[data-theme="dark"] body.modo-publico .papel-card{background:#0e1626!important;border-color:#1d2a44!important;}
html[data-theme="dark"] body.modo-publico .lhint{color:#8fa3c0!important;}
html[data-theme="dark"] body.modo-publico .lhint code{background:#141e33!important;color:#93c5fd!important;}
html[data-theme="dark"] body.modo-publico #public-nav{background:#0c1220!important;}
html[data-theme="dark"] body.modo-publico .pub-nav-btn{color:#8fa3c0!important;}
html[data-theme="dark"] body.modo-publico .pub-nav-btn:hover,
html[data-theme="dark"] body.modo-publico .pub-nav-btn.active{color:#93c5fd!important;}
html[data-theme="dark"] body.modo-publico .skeleton{background:linear-gradient(90deg,#141e33 25%,#1d2a44 50%,#141e33 75%)!important;background-size:200% 100%!important;}
html[data-theme="dark"] body.modo-publico .trust-pill{background:#0e1626!important;border-color:#1d2a44!important;color:#8fa3c0!important;}
html[data-theme="dark"] body.modo-publico .pickup-btn{background:#0e1626;color:#93c5fd;}
html[data-theme="dark"] body.modo-publico ::-webkit-scrollbar-thumb{background:rgba(37,99,235,0.35);}

/* Modal "Editar Nota" (atendente/separador) — sempre claro. O conteúdo é
   gerado em JS usando var(--h)/var(--muted2)/var(--card2) etc., que no tema
   escuro da equipe ficam quase invisíveis em cima do fundo escuro do modal
   (texto muito próximo da cor de fundo). Reabrir essas variáveis só dentro
   desse modal resolve sem precisar reescrever o JS que já usa var(--x). */
#editar-nota-modal .modal{
  background:#ffffff!important;color:#1e293b!important;
  --card:#ffffff;--card2:#f1f5f9;--text:#1e293b;--h:#0f172a;
  --muted:#94a3b8;--muted2:#64748b;--br:#e2e8f0;--br2:#cbd5e1;--green:#16a34a;--amber:#b45309;--red:#dc2626;--blue:#1d4ed8;
  max-width:min(760px,94vw)!important;
}
#editar-nota-modal .modal-title{color:#0f172a!important;}
#editar-nota-modal .modal-sub{color:#64748b!important;}
/* Esse modal é sempre claro (ver comentário acima) — a regra mais abaixo que
   força texto branco em todo input/textarea/select do tema escuro pegaria
   esses campos também e deixaria texto branco em cima do fundo branco que
   esse modal força, o problema oposto. ID sempre ganha de seletor por
   classe, então essa exceção vale mesmo vindo antes no arquivo. */
#editar-nota-modal input,#editar-nota-modal textarea,#editar-nota-modal select{
  color-scheme:light;color:#1e293b!important;
}