/* =====================================================
   erp.css — Shorti ERP
   Clean White · Modern UI/UX · v6.0
   ===================================================== */

/* ── Design tokens ─────────────────────────────────── */
:root {
  --gl:      #2563EB;   /* azul moderno */
  --gl-hov:  #1D4ED8;
  --gl-lt:   #EFF6FF;
  --gl-bd:   #BFDBFE;

  /* Accent colors — ícones e indicadores */
  --green:   #059669;  --green-lt:  #ECFDF5; --green-bg:  #D1FAE5;
  --blue:    #2563EB;  --blue-lt:   #EFF6FF; --blue-bg:   #DBEAFE;
  --violet:  #7C3AED;  --violet-lt: #F5F3FF; --violet-bg: #EDE9FE;
  --orange:  #EA580C;  --orange-lt: #FFF7ED; --orange-bg: #FED7AA;
  --rose:    #C4897A;  --rose-lt:   #FFF0EE; --rose-bd:   #EDD5CE;

  /* Neutrals */
  --bg:   #FFFFFF;
  --surf: #FFFFFF;
  --bd:   #E5E7EB;
  --bd-s: #D1D5DB;

  --tx:   #111827;
  --tx-m: #6B7280;
  --tx-s: #9CA3AF;

  /* Status */
  --ok:   #059669; --ok-lt:   #ECFDF5;
  --warn: #D97706; --warn-lt: #FFFBEB;
  --err:  #DC2626; --err-lt:  #FEF2F2;

  /* Sizes */
  --r-card:  16px;
  --r-btn:   8px;
  --r-input: 8px;
  --r-badge: 20px;

  /* Shadows */
  --sh-xs:  0 1px 2px rgba(0,0,0,.05);
  --sh-sm:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --sh-md:  0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --sh-lg:  0 8px 24px rgba(0,0,0,.10), 0 3px 8px rgba(0,0,0,.06);
  --sh-modal: 0 20px 60px rgba(0,0,0,.16), 0 0 0 1px rgba(0,0,0,.05);
}

/* ── Reset ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--tx);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}
a  { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
img, svg { display: block; max-width: 100%; }

/* ── Boas-vindas (splash) ─────────────────────────── */
.srt-welcome {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  background: #F9F9F9;
  transition: opacity .5s ease;
}
.srt-welcome.out { opacity: 0; pointer-events: none; }
.sw-mark {
  width: 52px; height: 52px;
  opacity: 0; animation: swUp .45s ease .1s forwards;
}
.sw-lottie {
  width: min(520px, 96vw);
  height: auto;
  opacity: 0;
  animation: swUp .5s ease .5s forwards;
  pointer-events: none;
  user-select: none;
}

.sw-bars { display: flex; align-items: flex-end; gap: 6px; height: 46px; }
.sw-bars span {
  display: block; border-radius: 4px; transform-origin: bottom;
  opacity: 0; animation: swBar .7s cubic-bezier(.34,1.56,.64,1) both;
}
.sw-bars span:nth-child(1) { width: 14px; height: 28px; background: #CBD5E1; animation-delay: 0s; }
.sw-bars span:nth-child(2) { width: 18px; height: 46px; background: linear-gradient(180deg, #94A3B8 0%, #64748B 100%); animation-delay: .08s; }
@keyframes swBar {
  from { opacity: 0; transform: scaleY(0) skewX(-10deg); }
  to   { opacity: 1; transform: scaleY(1) skewX(-10deg); }
}

.sw-word {
  font-size: clamp(40px, 9vw, 64px);
  font-weight: 900; letter-spacing: -.045em;
  color: var(--tx); line-height: 1; white-space: nowrap; user-select: none;
}
.sw-l { display: inline-block; opacity: 0; animation: swPop .6s cubic-bezier(.34,1.56,.64,1) both; }
.sw-l:nth-child(1){animation-delay:.10s} .sw-l:nth-child(2){animation-delay:.16s}
.sw-l:nth-child(3){animation-delay:.22s} .sw-l:nth-child(4){animation-delay:.28s}
.sw-l:nth-child(5){animation-delay:.34s} .sw-l:nth-child(6){animation-delay:.40s}
@keyframes swPop { to { opacity: 1; } }
.sw-dot {
  background: linear-gradient(135deg, var(--gl) 0%, #7C3AED 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: swPop .6s cubic-bezier(.34,1.56,.64,1) .5s both;
}

.sw-tag {
  font-size: 22px; font-weight: 700; color: var(--tx); text-align: center; max-width: 320px;
  opacity: 0; animation: swUp .5s ease .3s forwards;
}
@keyframes swUp { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }

.sw-pc {
  width: min(260px, 78vw);
  margin-top: 4px;
  opacity: 0;
  animation: swUp .5s ease .88s forwards;
}
.sw-pc svg {
  width: 100%; height: auto;
  overflow: visible;
  animation: swPcFloat 4.5s ease-in-out 1.2s infinite;
}
@keyframes swPcFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-8px); }
}
.sw-pc-bar {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(0);
  animation: swBarGrow .5s cubic-bezier(.34,1.56,.64,1) forwards;
}
.sw-pc-bars rect:nth-child(1){ animation-delay: .95s }
.sw-pc-bars rect:nth-child(2){ animation-delay:1.05s }
.sw-pc-bars rect:nth-child(3){ animation-delay:1.15s }
.sw-pc-bars rect:nth-child(4){ animation-delay:1.25s }
.sw-pc-bars rect:nth-child(5){ animation-delay:1.35s }
@keyframes swBarGrow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
.sw-pc-cursor { animation: swCurBlink 1.1s ease-in-out 1.4s infinite; }
@keyframes swCurBlink {
  0%,46%  { opacity: .8; }
  50%,96% { opacity: 0; }
}
.sw-pc-glow { animation: swGlowPulse 3.5s ease-in-out 1s infinite; }
@keyframes swGlowPulse {
  0%,100% { opacity: .3; }
  50%     { opacity: .7; }
}

/* ══════════════════════════════════════════════════════════
   OVERRIDES CRÍTICOS — neutraliza styles.css no erp.html
   styles.css é o CSS do store (index.html). Em erp.html
   precisamos reverter diversas regras que quebram o painel.
   ══════════════════════════════════════════════════════════ */

/* 1. Mostra o container raiz do ERP */
.page-erp,
.page-erp.flex { display: flex !important; min-height: 100vh; }

/* 2. Modal: usa visibilidade/opacidade em vez de display:none */
.modal {
  display: flex !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.modal.on {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* 3. styles.css tem @media(max-width:1080px) que quebra sidebar,
      grids e flexbox do ERP em desktops comuns. Revertemos tudo.
      Aplicamos apenas em tablets/desktops (≥769px) para não afetar mobile. */
@media (min-width: 769px) and (max-width: 1080px) {
  /* Sidebar: mantém comportamento do erp.css */
  .erp-sidebar {
    position: fixed !important;
    left: 0 !important; top: 8px !important; bottom: 8px !important;
    width: 60px !important;
    height: auto !important;
  }
  .erp-sidebar:hover { width: 240px !important; }
  .erp-sidebar.open  { left: 0 !important; width: 240px !important; }

  /* Main: mantém margem lateral */
  .erp-main {
    margin-left: 68px !important;
    width: calc(100% - 68px) !important;
  }

  /* Grids: mantém multi-colunas no desktop */
  .dashboard-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .card-grid-wide {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .finance-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* Page header: mantém layout horizontal */
  .page-header {
    flex-direction: row !important;
    align-items: center !important;
  }

  /* Modal actions: mantém layout horizontal */
  .modal-actions {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  /* Table controls: mantém flex row */
  .table-controls {
    flex-direction: row !important;
    align-items: center !important;
  }
}

/* ── ERP layout ────────────────────────────────────── */

/* ── Sidebar ── */
.erp-sidebar {
  background: #fff;
  border-right: none;
  border-radius: 0 22px 22px 0;
  width: 60px;
  display: flex; flex-direction: column;
  position: fixed; top: 8px; bottom: 8px; left: 0;
  z-index: 100; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.05), 6px 0 32px rgba(0,0,0,.09);
  transition: width .22s cubic-bezier(.16,1,.3,1);
}
.erp-sidebar:hover {
  width: 240px;
}

/* Main content */
.erp-main {
  margin-left: 68px;
  width: calc(100% - 68px);
  background: var(--bg);
  min-height: 100vh;
  display: flex; flex-direction: column;
  position: relative;
}

/* orbs — desabilitados (gradiente do body já faz o trabalho) */
.erp-orbs, .orb { display: none; }

/* ── Branding ── */
.erp-branding {
  padding: 14px 13px 12px;
  border-bottom: 1px solid var(--bd);
  flex-shrink: 0;
}
.erp-logo-row {
  display: flex; align-items: center; gap: 10px; white-space: nowrap;
}
.erp-logo-img {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 9px;
  display: block;
}
.erp-logo-text {
  font-size: 15.5px; font-weight: 800;
  color: var(--tx); letter-spacing: -.03em; white-space: nowrap;
  opacity: 0; transition: opacity .15s ease .05s;
}
.erp-logo-text span { color: var(--gl); }
.erp-sidebar:hover .erp-logo-text { opacity: 1; }

.erp-workspace {
  display: flex; align-items: center; gap: 7px;
  margin-top: 10px;
  background: var(--bg); border: 1px solid var(--bd);
  border-radius: 8px; padding: 6px 10px; white-space: nowrap;
  opacity: 0; transition: opacity .15s ease .07s;
}
.erp-sidebar:hover .erp-workspace { opacity: 1; }
.erp-workspace-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok); flex-shrink: 0;
  animation: ledPulse 2.4s ease-in-out infinite;
}
.erp-workspace-name {
  font-size: 11.5px; font-weight: 500;
  color: var(--tx-m); letter-spacing: -.01em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

/* ── Nav ── */
.erp-nav {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 8px 0 8px; scrollbar-width: none;
}
.erp-nav::-webkit-scrollbar { display: none; }

.sidebar-logout {
  flex-shrink: 0;
  padding: 6px 0 10px;
  border-top: 1px solid var(--bd);
  display: none;
}
.sidebar-logout-btn {
  width: 224px; margin: 1px 8px;
  border: none; border-radius: 12px; background: transparent;
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px;
  color: #ef4444; text-align: left;
  font-size: 13px; font-weight: 500; white-space: nowrap;
  cursor: pointer; transition: background .14s;
}
.sidebar-logout-btn:hover { background: #fef2f2; }
.sidebar-logout-btn svg { width: 20px; height: 20px; flex-shrink: 0; color: #ef4444; }

.nav-group {
  padding: 16px 16px 4px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--tx-s);
}

.nav-link {
  width: 224px; margin: 1px 8px;
  border: none; border-radius: 12px; background: transparent;
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px;
  color: var(--tx-m); text-align: left;
  font-size: 13px; font-weight: 400; white-space: nowrap;
  transition: background .14s, color .14s; position: relative;
}
.nav-link:hover {
  background: var(--bg); color: var(--tx);
}
.nav-link:hover .nav-icon {
  color: var(--ic, var(--tx-m));
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ic, #94A3B8) 50%, transparent));
}
.nav-link.on {
  background: var(--gl-lt); color: var(--ic, var(--gl)); font-weight: 600;
  box-shadow: none;
}
.nav-link.on .nav-icon {
  color: var(--ic, var(--gl));
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--ic, var(--gl)) 60%, transparent));
}

.nav-icon {
  width: 20px; height: 20px; flex-shrink: 0;
  color: var(--tx-s); transition: color .15s, filter .15s; display: block;
}

/* ── Nav accent colors (LED per section) ── */
.nav-link[onclick*="dashboard"]  { --ic: #6366F1; }
.nav-link[onclick*="receber"]    { --ic: #10B981; }
.nav-link[onclick*="historico"]  { --ic: #64748B; }
.nav-link[onclick*="nvenda"]     { --ic: #22C55E; }
.nav-link[onclick*="solicita"]   { --ic: #F59E0B; }
.nav-link[onclick*="estoque"]    { --ic: #F97316; }
.nav-link[onclick*="clientes"]   { --ic: #8B5CF6; }
.nav-link[onclick*="financeiro"] { --ic: #3B82F6; }
.nav-link[onclick*="catalogo"]   { --ic: #EC4899; }
.nav-link[onclick*="extrato"]    { --ic: #14B8A6; }
.nav-link[onclick*="relatorios"] { --ic: #06B6D4; }
.nav-link[onclick*="consulta"]   { --ic: #6366F1; }
.nav-link[onclick*="loja"]       { --ic: #94A3B8; }
.nav-link[href*="admin"]         { --ic: #EF4444; }

.nl-text {
  opacity: 0; transition: opacity .15s ease .05s;
  white-space: nowrap; pointer-events: none;
}
.erp-sidebar:hover .nl-text { opacity: 1; }

/* ── User footer — removido, logout está no tb-menu da topbar ── */
.erp-user, .user-avatar, .user-name, .user-role, .logout-btn { display: none; }



/* ── Topbar ── */
/* ── Topbar ─────────────────────────────────────────── */
.erp-topbar {
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(226,232,240,.7);
  display: flex; align-items: center; gap: 8px;
  padding: 0 20px;
  height: 54px; min-height: 54px;
  position: sticky; top: 0; z-index: 50;
  flex-shrink: 0;
}
/* hamburger — só aparece em tablets (769-1080px) */
.erp-hamburger {
  display: none; width: 34px; height: 34px; border-radius: 8px;
  background: none; border: none; cursor: pointer;
  color: var(--tx-m); padding: 0; flex-shrink: 0;
  align-items: center; justify-content: center;
  transition: background .13s, color .13s;
}
.erp-hamburger:hover { background: var(--bg); color: var(--tx); }
.erp-title {
  flex: 1; font-size: 14px; font-weight: 700;
  color: var(--tx); letter-spacing: -.025em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.erp-actions { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
/* Icon-only action buttons */
.tb-btn {
  width: 36px; height: 36px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--tx-m); padding: 0; position: relative;
  transition: background .13s, color .13s;
  flex-shrink: 0;
}
.tb-btn:hover { background: var(--bg); color: var(--tx); }
/* notification badge */
.notif-badge {
  display: none; position: absolute; top: 3px; right: 3px;
  min-width: 16px; height: 16px; border-radius: 100px;
  background: #EF4444; border: 1.5px solid #fff;
  pointer-events: none;
  font-size: 9px; font-weight: 700; color: #fff;
  line-height: 13px; text-align: center; padding: 0 4px;
  box-sizing: border-box;
}
.notif-badge.on { display: flex; align-items: center; justify-content: center; }
/* vertical divider */
.tb-sep { width: 1px; height: 18px; background: var(--bd); margin: 0 5px; flex-shrink: 0; }
/* User pill */
.tb-usr-wrap { position: relative; }
.tb-usr {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 10px 4px 4px;
  border-radius: 100px; border: 1px solid var(--bd);
  background: var(--surf); cursor: pointer;
  transition: background .13s, border-color .13s;
  flex-shrink: 0;
}
.tb-usr:hover { background: var(--bg); border-color: var(--tx-s); }
.tb-av {
  width: 27px; height: 27px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gl) 0%, #8B5CF6 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 800; color: #fff;
  letter-spacing: -.02em; flex-shrink: 0; user-select: none;
}
.tb-un {
  font-size: 12.5px; font-weight: 600; color: var(--tx);
  max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tb-usr .tb-chev { color: var(--tx-s); flex-shrink: 0; transition: transform .15s; }
.tb-usr[aria-expanded="true"] .tb-chev { transform: rotate(180deg); }
/* Dropdown menu */
.tb-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: #fff; border: 1px solid var(--bd);
  border-radius: 13px;
  box-shadow: 0 8px 32px rgba(0,0,0,.1), 0 2px 8px rgba(0,0,0,.05);
  padding: 5px; min-width: 172px; z-index: 300;
  opacity: 0; transform: translateY(-6px) scale(.97);
  transition: opacity .14s ease, transform .18s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.tb-menu.on { opacity: 1; transform: none; pointer-events: auto; }
.tb-mi {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; border-radius: 9px; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--tx);
  transition: background .12s; border: none; background: none; width: 100%;
  text-align: left;
}
.tb-mi:hover { background: var(--bg); }
.tb-mi svg { color: var(--tx-s); flex-shrink: 0; }
.tb-mi.danger { color: var(--err); }
.tb-mi.danger svg { color: var(--err); }
.tb-ms { height: 1px; background: var(--bd); margin: 4px 0; }

/* ── Modal Configurações ── */
.cfg-backdrop {
  position: fixed; inset: 0; z-index: 498;
  background: rgba(15,23,42,.28);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, visibility 0s .22s;
}
.cfg-backdrop.on {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .22s ease;
}
.cfg-modal {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -48%) scale(.97);
  width: 680px; max-width: calc(100vw - 32px);
  max-height: 80vh;
  background: #fff; border-radius: 20px; z-index: 499;
  box-shadow: 0 28px 72px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.06);
  display: flex; flex-direction: row;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, transform .28s cubic-bezier(.16,1,.3,1), visibility 0s .22s;
  overflow: hidden;
}
.cfg-modal.open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity .22s ease, transform .28s cubic-bezier(.16,1,.3,1);
}

/* Sidebar esquerda */
.cfg-sidebar {
  width: 180px; flex-shrink: 0;
  background: #f8fafc;
  border-right: 1px solid var(--bd);
  border-radius: 20px 0 0 20px;
  padding: 24px 12px 20px;
  display: flex; flex-direction: column; gap: 4px;
}
.cfg-sidebar-title {
  font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--tx-s); padding: 0 8px; margin-bottom: 10px;
}
.cfg-tab {
  display: flex; align-items: center; gap: 9px;
  width: 100%; border: none; background: none; cursor: pointer;
  border-radius: 10px; padding: 10px 10px;
  font-size: 13.5px; font-weight: 500; color: var(--tx-m);
  text-align: left; transition: background .13s, color .13s;
}
.cfg-tab:hover { background: rgba(0,0,0,.04); color: var(--tx); }
.cfg-tab.on { background: #eff6ff; color: #1d4ed8; }
.cfg-tab.on svg { color: #1d4ed8; }
.cfg-tab svg { color: var(--tx-s); flex-shrink: 0; transition: color .13s; }

/* Área de conteúdo */
.cfg-content {
  flex: 1; min-width: 0;
  padding: 28px 32px 28px;
  overflow-y: auto;
  position: relative;
}
.cfg-close {
  position: absolute; top: 16px; right: 16px;
  width: 30px; height: 30px; border-radius: 8px;
  border: none; background: var(--bg); color: var(--tx-s);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .14s; z-index: 1;
}
.cfg-close:hover { background: var(--bd); }

/* Painéis */
.cfg-panel { display: none; }
.cfg-panel.on { display: block; }
.cfg-panel h3 {
  font-size: 17px; font-weight: 700; color: var(--tx);
  letter-spacing: -.025em; margin-bottom: 22px; margin-right: 32px;
}

/* Avatar de conta */
.cfg-avatar-row {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 22px; padding: 16px;
  background: #f8fafc; border-radius: 14px;
}
.cfg-av {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg,#1d4ed8,#3b82f6);
  color: #fff; font-size: 18px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.cfg-av-name  { font-size: 15px; font-weight: 600; color: var(--tx); }
.cfg-av-email { font-size: 12px; color: var(--tx-s); margin-top: 2px; }

/* Header de painel com título + botão */
.cfg-panel-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px; margin-right: 32px;
}
.cfg-panel-hd h3 { margin-bottom: 0; margin-right: 0; }

/* Lista de equipe dentro do cfg */
.equipe-list { display: flex; flex-direction: column; gap: 10px; }
.equipe-loading, .equipe-empty { font-size: 13px; color: var(--tx-s); padding: 24px 0; }
.equipe-card {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--bd);
  border-radius: 14px; padding: 14px 16px;
}
.equipe-av {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg,#1d4ed8,#3b82f6);
  color: #fff; font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.equipe-info { flex: 1; min-width: 0; }
.equipe-nome { font-size: 14px; font-weight: 600; color: var(--tx); }
.equipe-role { font-size: 11.5px; font-weight: 500; margin-top: 2px; }
.equipe-role.admin       { color: #1d4ed8; }
.equipe-role.funcionario { color: var(--tx-s); }
.equipe-actions { display: flex; gap: 6px; }
.equipe-role-btn, .equipe-del-btn {
  width: 32px; height: 32px; border-radius: 8px; border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .14s;
}
.equipe-role-btn { background: var(--bg); color: var(--tx-s); }
.equipe-role-btn:hover { background: #dbeafe; color: #1d4ed8; }
.equipe-del-btn  { background: var(--bg); color: var(--tx-s); }
.equipe-del-btn:hover  { background: #fee2e2; color: #ef4444; }

/* Modal inline de convite */
.cfg-invite-box {
  margin-top: 20px; padding: 20px;
  background: #f8fafc; border: 1px solid var(--bd);
  border-radius: 16px;
}
.cfg-invite-hd {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 14px; font-weight: 600; color: var(--tx);
  margin-bottom: 16px;
}
.cfg-close-inline {
  border: none; background: var(--bg); color: var(--tx-s);
  width: 26px; height: 26px; border-radius: 7px; cursor: pointer;
  font-size: 13px; display: flex; align-items: center; justify-content: center;
  transition: background .13s;
}
.cfg-close-inline:hover { background: var(--bd); }

/* Mobile: cfg-modal full-screen com abas horizontais no topo */
@media (max-width: 768px) {
  .cfg-modal {
    top: 0; left: 0;
    transform: none;
    width: 100%; max-width: 100%;
    height: 100%; max-height: 100%;
    border-radius: 0;
    flex-direction: column;
    opacity: 1; /* evitar flash antes de .open */
    transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .22s;
    transform: translateY(100%) scale(1);
  }
  .cfg-modal.open { transform: translateY(0) scale(1); opacity: 1; }
  .cfg-sidebar {
    width: 100%; border-right: none; border-radius: 0;
    border-bottom: 1px solid var(--bd);
    flex-direction: row; padding: 12px 16px 0;
    gap: 2px; overflow-x: auto; background: #fff;
  }
  .cfg-sidebar-title { display: none; }
  .cfg-tab {
    flex-shrink: 0; border-radius: 8px 8px 0 0;
    padding: 9px 14px; font-size: 13px;
    border-bottom: 2px solid transparent;
  }
  .cfg-tab.on {
    background: #eff6ff; border-bottom-color: #1d4ed8;
    border-radius: 8px 8px 0 0;
  }
  .cfg-content { padding: 20px 16px 24px; }
  .cfg-panel h3 { font-size: 16px; margin-right: 0; }
  .cfg-panel-hd { flex-wrap: wrap; gap: 10px; margin-right: 0; }
  .cfg-close { top: 12px; right: 12px; }
}

/* ── Content — centrado com max-width ──────────────── */
.erp-content {
  padding: 28px 32px;
  flex: 1;
  position: relative; z-index: 1;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
.erp-page     { display: none; }
.erp-page.on  { display: block; }

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.page-header h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--tx);
  letter-spacing: -.04em;
  margin: 0;
  font-family: 'Inter', sans-serif;
}
.page-subtitle { font-size: 14px; color: var(--tx-m); margin: 4px 0 0; }

.table-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ── Grids ─────────────────────────────────────────── */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.card-grid-wide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.finance-grid { grid-template-columns: repeat(4, 1fr) !important; }

/* ── Cards — clean white, modern ────────────────────── */
.summary-card, .data-card {
  background: #FFFFFF;
  border: 1px solid var(--bd);
  border-radius: var(--r-card);
  padding: 18px 20px;
  box-shadow: var(--sh-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.data-card:hover    { box-shadow: var(--sh-md); }
.summary-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }

.summary-card { position: relative; overflow: hidden; }
.summary-card::before, .summary-card::after { display: none; }

/* Label */
.summary-card > div:first-child {
  font-size: 13px;
  font-weight: 500;
  color: var(--tx-m);
  letter-spacing: 0;
  text-transform: none;
}

/* ── Metric card redesign — com pictograma ────────── */
.mc {
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: var(--r-card);
  padding: 16px 18px;
  box-shadow: var(--sh-sm);
  transition: transform .18s ease, box-shadow .18s ease;
  display: flex; flex-direction: column; gap: 8px;
  position: relative; overflow: hidden;
}
.mc:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }

/* Gradiente que começa com a cor e dissolve para branco */
.mc-blue   { background: linear-gradient(to bottom, rgba(37,99,235,.08)  0%, #fff 52%); border-top: none; }
.mc-green  { background: linear-gradient(to bottom, rgba(5,150,105,.08)  0%, #fff 52%); border-top: none; }
.mc-violet { background: linear-gradient(to bottom, rgba(124,58,237,.08) 0%, #fff 52%); border-top: none; }
.mc-orange { background: linear-gradient(to bottom, rgba(234,88,12,.08)  0%, #fff 52%); border-top: none; }

.mc-top { display: flex; align-items: flex-start; justify-content: space-between; }

/* Pictograma — ícone arredondado */
.mc-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mc-icon svg { width: 16px; height: 16px; }
.mc-icon-blue   { background: var(--blue-bg);   color: var(--blue); }
.mc-icon-green  { background: var(--green-bg);  color: var(--green); }
.mc-icon-violet { background: var(--violet-bg); color: var(--violet); }
.mc-icon-orange { background: var(--orange-bg); color: var(--orange); }

.mc-label { font-size: 12px; font-weight: 500; color: var(--tx-m); }
.mc-value { font-size: 24px; font-weight: 700; color: var(--tx); letter-spacing: -.04em; line-height: 1; }
.mc-meta  { font-size: 11.5px; color: var(--tx-m); display: flex; align-items: center; gap: 4px; }
.mc-up    { color: var(--green); font-weight: 600; }
.mc-dn    { color: var(--err);   font-weight: 600; }

.summary-value {
  font-size: 30px; font-weight: 700; color: var(--tx);
  letter-spacing: -.04em; line-height: 1; margin: 10px 0 3px;
}
.summary-meta { font-size: 12px; color: var(--tx-m); margin-top: 4px; }

.card-title {
  font-size: 15px; font-weight: 600; color: var(--tx);
  letter-spacing: -.02em; margin-bottom: 18px;
}
.card-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px;
}
.card-header .card-title { margin-bottom: 0; }
.chart-shell { height: 200px; position: relative; overflow: hidden; }

/* ── Dashboard layout ───────────────────────────────── */

/* Split principal: gráfico (60%) + atenção (40%) */
.dash-main-row {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.dash-main-row > * { min-width: 0; }

/* Seções livres (sem card wrapper) */
.dash-section { padding: 0; }
.dash-section-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.dash-section-title {
  font-size: 15px; font-weight: 600; color: var(--tx); letter-spacing: -.02em;
}

/* ── Row hover — listas ─────────────────────────────── */
.order-item {
  border-radius: 10px;
  margin: 0 -10px;
  padding: 11px 10px;
  border-bottom: none;
  transition: background .13s;
  cursor: pointer;
}
.order-item + .order-item { border-top: 1px solid #F3F4F6; }
.order-item:hover { background: var(--gl-lt); }
.order-item:hover .order-name  { color: var(--gl); }

.stock-item {
  border-radius: 10px;
  margin: 0 -10px;
  padding: 10px 10px;
  border-bottom: none;
  transition: background .13s;
  cursor: pointer;
}
.stock-item + .stock-item { border-top: 1px solid #F3F4F6; }
.stock-item:hover { background: #FFF7ED; }

/* ── Attention panel — compacto ─────────────────────── */

/* Empty state */
.atn-empty {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 20px 12px 8px; gap: 8px;
}
.atn-empty-icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: #ECFDF5; color: var(--green);
  display: flex; align-items: center; justify-content: center;
}
.atn-empty-title { font-size: 14px; font-weight: 600; color: var(--tx); }
.atn-empty-sub   { font-size: 12px; color: var(--tx-m); }

/* Row — compacto, sem fundo colorido */
.atn-row {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px;
  border-radius: 9px;
  margin: 0 -10px;
  cursor: pointer;
  transition: background .12s;
}
.atn-row + .atn-row { border-top: 1px solid #F3F4F6; }
.atn-row:hover { background: #F9FAFB; }

/* Dot indicador */
.atn-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.atn-dot-red    { background: var(--err); }
.atn-dot-orange { background: var(--warn); }

/* Info */
.atn-row-info { flex: 1; min-width: 0; }
.atn-row-name { display: block; font-size: 13px; font-weight: 500; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atn-row-sub  { display: block; font-size: 11.5px; color: var(--tx-m); margin-top: 1px; }
.atn-row-val  { font-size: 13px; font-weight: 600; color: var(--tx); flex-shrink: 0; white-space: nowrap; }

/* Botão — aparece só no hover da linha */
.atn-row-btn {
  font-size: 11px; font-weight: 600;
  font-family: 'Inter', sans-serif;
  border: 1px solid; cursor: pointer;
  padding: 3px 9px; border-radius: 6px;
  flex-shrink: 0; white-space: nowrap;
  opacity: 0;
  transition: opacity .15s, background .13s;
}
.atn-row:hover .atn-row-btn { opacity: 1; }

.atn-row-btn-red    { background: #FEF2F2; color: var(--err);  border-color: #FECACA; }
.atn-row-btn-red:hover    { background: #FEE2E2; }
.atn-row-btn-orange { background: #FFFBEB; color: var(--warn); border-color: #FDE68A; }
.atn-row-btn-orange:hover { background: #FEF3C7; }

/* ── Activity section ───────────────────────────────── */
.dash-activity {
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: var(--r-card);
  padding: 22px 24px;
  box-shadow: var(--sh-sm);
}

/* ── Paginação de lista ─────────────────────────────── */
.list-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 10px 0;
  margin: 8px -10px 0;
  border-top: 1px solid #F3F4F6;
}
.lp-info {
  font-size: 12.5px;
  color: var(--tx-m);
  font-weight: 500;
}
.lp-btns { display: flex; gap: 4px; }
.lp-btn {
  width: 28px; height: 28px;
  border-radius: 7px;
  border: 1px solid var(--bd);
  background: #fff;
  color: var(--tx-m);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.lp-btn:hover:not(:disabled) { background: var(--gl-lt); color: var(--gl); border-color: var(--gl-bd); }
.lp-btn:disabled { opacity: .35; cursor: not-allowed; }

/* KPI trend badge */
.mc-trend {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11.5px; font-weight: 600; padding: 2px 7px;
  border-radius: 20px;
}
.mc-trend-up   { background: #ECFDF5; color: var(--green); }
.mc-trend-dn   { background: #FEF2F2; color: var(--err); }
.mc-trend-neu  { background: #F3F4F6; color: var(--tx-m); }

/* ── Dashboard greeting ─────────────────────────────── */
.dash-greeting {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; flex-wrap: wrap; gap: 12px;
}
.dash-greeting-hello {
  font-size: 22px; font-weight: 700; color: var(--tx);
  letter-spacing: -.04em; margin: 0;
}
.dash-greeting-date { font-size: 14px; color: var(--tx-m); margin-top: 3px; }
.dash-greeting-actions { display: flex; gap: 8px; }

/* ── Modern order list ──────────────────────────────── */
.order-list { display: flex; flex-direction: column; gap: 0; }
.order-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #F3F4F6;
  transition: background .12s;
}
.order-item:last-child { border-bottom: none; }
.order-avatar {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: var(--blue-bg); color: var(--blue);
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.order-info { flex: 1; min-width: 0; }
.order-name    { font-size: 13.5px; font-weight: 600; color: var(--tx); }
.order-product { font-size: 12px; color: var(--tx-m); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.order-right   { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.order-value   { font-size: 14px; font-weight: 600; color: var(--tx); letter-spacing: -.02em; }

/* ── Modern stock list ──────────────────────────────── */
.stock-list { display: flex; flex-direction: column; gap: 0; }
.stock-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid #F3F4F6;
}
.stock-item:last-child { border-bottom: none; }
.stock-emoji { font-size: 20px; width: 36px; height: 36px; border-radius: 10px; background: #F9FAFB; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stock-info  { flex: 1; min-width: 0; }
.stock-name  { font-size: 13.5px; font-weight: 500; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stock-bar-wrap { margin-top: 5px; height: 4px; background: #F3F4F6; border-radius: 2px; overflow: hidden; }
.stock-bar-fill { height: 100%; border-radius: 2px; transition: width .5s ease; }
.stock-bar-ok   { background: var(--green); }
.stock-bar-low  { background: var(--warn); }
.stock-bar-out  { background: var(--err); }

/* ── Buttons ───────────────────────────────────────── */
.btn {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--r-btn);
  border: 1px solid transparent;
  padding: 8px 16px;
  transition: all .14s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary {
  background: var(--gl); color: #fff;
  border-color: var(--gl);
  box-shadow: 0 1px 3px rgba(37,99,235,.25);
}
.btn-primary:hover {
  background: var(--gl-hov); border-color: var(--gl-hov);
  box-shadow: 0 4px 12px rgba(37,99,235,.30);
  transform: translateY(-1px);
}
.btn-outline {
  background: #fff; color: var(--tx);
  border: 1px solid var(--bd-s);
}
.btn-outline:hover { background: #F9FAFB; border-color: var(--tx-s); }
.btn-success {
  background: var(--ok); color: #fff;
  border-color: var(--ok);
  box-shadow: 0 1px 3px rgba(5,150,105,.25);
}
.btn-success:hover {
  background: #047857; border-color: #047857;
  box-shadow: 0 4px 12px rgba(5,150,105,.30);
  transform: translateY(-1px);
}
.btn-block { width: 100%; justify-content: center; }
.btn-mini  { font-size: 11px; padding: 4px 10px; border-radius: 6px; font-weight: 500; }

/* ── Bloqueio por biometria (#bio-lock) ─────────────── */
.bio-lock {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); padding: 24px;
}
.bio-lock-box {
  width: 100%; max-width: 360px; background: var(--surf); border: 1px solid var(--bd);
  border-radius: 14px; padding: 32px 24px; text-align: center;
}
.bio-lock-icon { font-size: 40px; margin-bottom: 12px; }
.bio-lock-box h3 { font-size: 16px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 6px; }
.bio-lock-desc { font-size: 12.5px; color: var(--tx-m); line-height: 1.5; margin-bottom: 18px; }
.bio-lock .alert {
  display: none; margin: 0 0 12px; padding: 10px 14px; background: #FEF2F2;
  border: 1px solid #FECACA; border-radius: 8px; font-size: 12.5px; color: #B91C1C; text-align: left;
}
.bio-lock .bi { display: flex; align-items: center; justify-content: center; gap: 8px; }
.bio-lock .sp {
  display: none; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff; border-radius: 50%; animation: bio-spin .7s linear infinite;
}
.bio-lock .btn.ld .lbl { display: none; }
.bio-lock .btn.ld .sp  { display: block; }
@keyframes bio-spin { to { transform: rotate(360deg); } }

/* ── Inputs & Forms ────────────────────────────────── */
.input-field {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13.5px; color: var(--tx);
  border: 1px solid var(--bd); border-radius: var(--r-input);
  background: #fff; padding: 9px 12px;
  width: 100%; min-height: 38px;
  transition: border-color .14s, box-shadow .14s; outline: none;
}
.input-field:focus {
  border-color: var(--gl);
  box-shadow: 0 0 0 3px rgba(37,99,235,.10);
}
.input-field.small { width: 190px; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 14px 20px;
}
.form-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--tx-m);
  letter-spacing: -.01em;
}
.form-label small { font-weight: 400; opacity: .6; }
.form-label.full  { grid-column: span 2; }
.fl-lbl           { font-size: 12px; font-weight: 500; color: var(--tx-m); letter-spacing: -.01em; }
.form-row         { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }

/* ── Tables ────────────────────────────────────────── */
table              { width: 100%; border-collapse: collapse; }
table th {
  font-size: 12px;
  font-weight: 600;
  color: var(--tx-m);
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,.5);
  background: rgba(255,255,255,.3);
  text-align: left;
  letter-spacing: 0;
  text-transform: none;
}
table td {
  font-size: 13.5px; color: var(--tx);
  padding: 13px 16px;
  border-bottom: 1px solid rgba(255,255,255,.4);
}
table tr:last-child td { border-bottom: none; }
table tbody tr { transition: background .1s; cursor: default; }
table tbody tr:hover td { background: #EFF6FF; }
table tbody tr:hover { outline: none; }
.table-shell       { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-shell table { min-width: 480px; }

/* ── Tabela de relatórios ───────────────────────────── */
.rel-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rel-table thead th {
  text-align: left; padding: 0 14px 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tx-s);
  border-bottom: 1px solid var(--bd);
}
.rel-table thead th:not(:first-child) { text-align: right; }
.rel-table tbody tr { border-bottom: 1px solid var(--bd); transition: background .12s; }
.rel-table tbody tr:last-child { border-bottom: none; }
.rel-table tbody tr:hover { background: var(--bg); }
.rel-table tbody td { padding: 13px 14px; color: var(--tx); }
.rel-table tbody td:not(:first-child) { text-align: right; color: var(--tx-m); }
.rel-table tbody td:last-child { text-align: right; }
.rel-month { font-weight: 600; color: var(--tx); }
.rel-year  { color: var(--tx-s); font-size: 12px; }
.rel-val   { font-weight: 600; color: var(--tx) !important; }
.compact-table     { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.cell-strong       { font-weight: 500; }
.emoji-cell        { font-size: 1.1rem; }
.table-actions     { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ── A Receber: lista em cards (mobile) ─────────────── */
.rb-cards    { display: flex; flex-direction: column; gap: 10px; }
.rb-card     { background: #fff; border: 1px solid var(--bd); border-radius: 14px; padding: 12px 14px; }
.rb-card-top { display: flex; align-items: center; gap: 12px; }
.rb-card-info { flex: 1; min-width: 0; }
.rb-card-name { font-size: 14px; font-weight: 600; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-card-prod { font-size: 12px; color: var(--tx-m); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-card-val  { font-size: 15px; font-weight: 700; color: var(--tx); letter-spacing: -.02em; flex-shrink: 0; }
.rb-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #F3F4F6; }
.rb-card-due  { font-size: 12px; color: var(--tx-m); }
.rb-card-due.rb-due-late { color: #DC2626; font-weight: 600; }
.rb-card-bottom .eb { border-radius: 10px; padding: 6px 12px; font-size: 12px; }

/* ── Badges ────────────────────────────────────────── */
.xb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-badge);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  letter-spacing: .01em;
}
.xb-gold   { background: #FEF3C7; color: #92400E; }
.xb-green  { background: #D1FAE5; color: #065F46; }
.xb-blue   { background: #DBEAFE; color: #1E40AF; }
.xb-gray   { background: #F3F4F6; color: #374151; }
.xb-red    { background: #FEE2E2; color: #991B1B; }

/* ── Utility ───────────────────────────────────────── */
.revenue { color: var(--ok);  font-weight: 500; }
.expense { color: var(--err); font-weight: 500; }
.mup     { color: var(--ok); }
.mdn     { color: var(--err); }
.small-note { font-size: 13px; color: var(--tx-m); }
.lsi { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--bg); font-size: 13px; }
.lsi:last-child { border-bottom: none; }
.fi { font-family: 'Inter', sans-serif; font-size: 12px; }
.small-input  { width: 62px; font-size: 12px; border-radius: 6px; border: 1px solid var(--bd); padding: 4px 8px; text-align: center; font-family: 'Inter', sans-serif; }
.small-select { font-size: 12px; border-radius: 6px; border: 1px solid var(--bd); background: var(--bg); font-family: 'Inter', sans-serif; padding: 4px 8px; }
.eb {
  background: var(--bg);
  color: var(--tx-m);
  border: 1px solid var(--bd);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  cursor: pointer;
  transition: all .13s;
  font-family: 'Inter', sans-serif;
}
.eb:hover { background: var(--gl-lt); color: var(--gl); border-color: var(--gl-bd); }

/* ── Toast ─────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 9999;
  background: #fff;
  color: var(--tx);
  border: 1px solid var(--bd);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,.13), 0 2px 8px rgba(0,0,0,.06);
  padding: 12px 16px 12px 14px;
  display: flex; align-items: center; gap: 11px;
  min-width: 220px; max-width: 320px;
  font-family: 'Inter', system-ui, sans-serif;
  opacity: 0;
  transform: translateY(14px) scale(.96);
  transition: opacity .2s ease, transform .26s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}
.toast.on { opacity: 1; transform: none; }
.toast-ic {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-style: normal;
}
.toast-ic-ok   { background: #DCFCE7; }
.toast-ic-err  { background: #FEE2E2; }
.toast-ic-warn { background: #FEF9C3; }
.toast-ic-info { background: var(--gl-lt); }
.toast-body { flex: 1; min-width: 0; }
.toast-msg { font-size: 13px; font-weight: 700; color: var(--tx); letter-spacing: -.015em; line-height: 1.35; }
.toast-sub { font-size: 11px; color: var(--tx-m); margin-top: 2px; line-height: 1.4; }

/* Notification permission prompt */
.notif-prompt {
  position: fixed;
  bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px);
  z-index: 9998;
  background: var(--tx);
  border-radius: 18px;
  padding: 14px 18px 14px 16px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 12px 48px rgba(0,0,0,.28);
  max-width: 400px; width: calc(100vw - 32px);
  opacity: 0;
  transition: opacity .3s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}
.notif-prompt.on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.notif-prompt-ic { font-size: 22px; flex-shrink: 0; }
.notif-prompt-text { flex: 1; min-width: 0; }
.notif-prompt-title { font-size: 13px; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.notif-prompt-sub   { font-size: 11px; color: rgba(255,255,255,.55); margin-top: 2px; }
.notif-prompt-btn {
  font-size: 12px; font-weight: 700; color: var(--tx);
  background: #fff; border: none; border-radius: 10px;
  padding: 7px 14px; cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: opacity .15s;
}
.notif-prompt-btn:hover { opacity: .88; }
.notif-prompt-x {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  border: none; background: rgba(255,255,255,.12); color: rgba(255,255,255,.7);
  font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.notif-prompt-x:hover { background: rgba(255,255,255,.22); }

/* ── Sidebar overlay ───────────────────────────────── */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.44);
  z-index: 98;
  opacity: 0;
  visibility: hidden;
  transition: opacity .26s ease, visibility 0s .26s;
}
.sidebar-overlay.on { opacity: 1; visibility: visible; transition: opacity .26s ease; }

/* ── Modals ────────────────────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15,23,42,.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, visibility 0s linear .22s;
}
.modal.on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .22s ease, visibility 0s linear 0s;
}
.modal-box {
  background: var(--surf);
  border-radius: 16px;
  width: 100%;
  max-width: 480px;
  box-shadow: var(--sh-modal);
  max-height: min(88svh, 88vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  transform: scale(.97) translateY(10px);
  opacity: 0;
  transition: transform .28s cubic-bezier(.16,1,.3,1), opacity .2s ease;
}
.modal.on .modal-box { transform: none; opacity: 1; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--bd);
  position: sticky;
  top: 0;
  background: var(--surf);
  z-index: 1;
  border-radius: 16px 16px 0 0;
}
.modal-header h3 {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--tx);
  margin: 0;
  letter-spacing: -.02em;
}
.modal-close {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: var(--bg);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tx-m);
  font-size: 12px;
  transition: background .13s, color .13s;
  flex-shrink: 0;
}
.modal-close:hover { background: var(--bd); color: var(--tx); }

.modal .form-grid         { padding: 14px 20px; gap: 12px; }
.modal-section-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tx-s);
  padding: 12px 20px 4px;
  display: block;
}
.modal-actions {
  padding: 12px 20px 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  border-top: 1px solid var(--bd);
  position: sticky;
  bottom: 0;
  background: var(--surf);
  z-index: 1;
}
.modal-summary  { margin: 0 20px 12px; background: var(--bg); border-radius: 10px; padding: 12px 14px; }
.summary-box    { background: var(--bg); border-radius: 10px; padding: 12px 14px; margin-top: 14px; }
.summary-row    { display: flex; justify-content: space-between; font-size: 13px; color: var(--tx-m); margin-bottom: 4px; }
.summary-total  { font-size: 14px; font-weight: 600; color: var(--tx); }
#mp .modal-box  { max-width: 560px; }

/* ── Pay / filter chips ───────────────────────────── */
.pay-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pay-chip {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--bd-s);
  background: var(--surf);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--tx-m);
  cursor: pointer;
  transition: all .13s;
  font-family: 'Inter', sans-serif;
}
.pay-chip:hover { border-color: var(--gl-bd); background: var(--gl-lt); }
.pay-chip.on { background: var(--gl); border-color: var(--gl); color: #fff; }
.pay-chip.on:hover { background: var(--gl-hov); border-color: var(--gl-hov); }
.pay-chip svg { flex-shrink: 0; }

.pay-chip-fiado { border-color: #FDE6C8; color: #D97706; }
.pay-chip-fiado:hover { border-color: #D97706; background: #FFF7ED; }
.pay-chip-fiado.on { background: #D97706; border-color: #D97706; color: #fff; }
.pay-chip-fiado.on:hover { background: #B45309; border-color: #B45309; }
.hv-chip {
  border: 1px solid var(--bd);
  background: var(--surf);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--tx-m);
  cursor: pointer;
  transition: all .13s;
  font-family: 'Inter', sans-serif;
}
.hv-chip.on { background: var(--gl); border-color: var(--gl); color: #fff; }

/* ── Nova Venda ────────────────────────────────────── */
.nv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vprev-card {
  display: flex; gap: 12px; align-items: center;
  background: var(--gl-lt); border: 1px solid var(--gl-bd);
  border-radius: 12px; padding: 12px 14px; margin: 12px 0 6px;
}
.vprev-thumb {
  width: 48px; height: 48px; border-radius: 10px; flex-shrink: 0;
  background: var(--surf); border: 1px solid var(--gl-bd);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; overflow: hidden;
}
.vprev-img  { width: 100%; height: 100%; object-fit: cover; }
.vprev-em   { font-size: 22px; }
.vprev-nm   { font-size: 13.5px; font-weight: 600; color: var(--tx); }
.vprev-meta { font-size: 12px; color: var(--tx-m); margin-top: 3px; }
.vprev-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.qty-row  { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.qty-ctrl { display: flex; align-items: center; gap: 6px; }
.qty-btn  { width: 32px; height: 32px; border-radius: 7px; border: 1px solid var(--bd-s); background: var(--surf); font-size: 18px; font-weight: 300; color: var(--tx); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .13s; }
.qty-btn:hover { background: var(--bg); }
.qty-in { width: 64px !important; text-align: center; }

.nv-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: none;
  border-top: 2px dashed var(--bd-s);
  border-radius: 0;
  padding: 14px 0 2px;
  margin: 4px 0 0;
}
.nv-total-lbl { font-size: 12px; font-weight: 700; color: var(--tx-m); text-transform: uppercase; letter-spacing: .08em; }
.nv-total-val { font-size: 22px; font-weight: 800; color: var(--gl); letter-spacing: -.02em; font-family: ui-monospace, 'SF Mono', 'Courier New', monospace; }
.nv-total-sub { font-size: 11px; color: var(--tx-m); margin-top: 2px; }

.nv-add-btn {
  width: 100%; height: 36px;
  border-radius: 8px;
  border: 1.5px dashed var(--bd-s);
  background: transparent;
  color: var(--tx-m);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .13s;
  margin: 8px 0 6px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.nv-add-btn:hover { border-color: var(--gl); color: var(--gl); background: var(--gl-lt); }
.nv-add-btn:active { transform: scale(.98); }

.nv-cart { border: none; border-radius: 0; overflow: visible; margin-bottom: 4px; }
.nv-cart:empty { display: none; }
.nv-cart-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--bd); background: transparent; transition: opacity .13s; }
.nv-cart-item:hover { opacity: .82; }
.nv-cart-item:last-child { border-bottom: none; }
.nv-cart-thumb {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  background: var(--gl-lt); display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.nv-cart-body  { flex: 1; min-width: 0; }
.nv-cart-nm    { font-size: 13px; font-weight: 500; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nv-cart-meta  { font-size: 11px; color: var(--tx-m); margin-top: 1px; }
.nv-cart-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nv-cart-pr    { font-size: 13px; font-weight: 600; color: var(--tx); font-family: ui-monospace, 'SF Mono', 'Courier New', monospace; }
.nv-cart-rm    { background: none; border: none; color: var(--bd-s); font-size: 14px; cursor: pointer; padding: 2px 4px; line-height: 1; transition: color .13s; }
.nv-cart-rm:hover { color: var(--err); }
.nv-section-sep { height: 0; border-top: 1px solid var(--bd); margin: 12px 0; }

/* Carrinho vazio */
.nv-cart-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center;
  padding: 32px 16px; color: var(--tx-s);
  border: 1.5px dashed var(--bd); border-radius: 10px;
  margin-bottom: 14px;
}
.nv-cart-empty svg { opacity: .4; }
.nv-cart-empty p   { font-size: 13px; font-weight: 600; color: var(--tx-m); margin: 0; }
.nv-cart-empty span { font-size: 12px; color: var(--tx-s); }

/* Etapa 2 — grid produtos + carrinho lateral */
.nv-s2-grid { display: grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start; }
.nv-s2-grid .nv-wizard-card { max-width: none; }

/* Carrinho como uma "ficha"/nota — sem caixa, borda picotada no topo */
.nv-s2-cart {
  position: sticky; top: 70px;
  border: none;
  box-shadow: var(--sh-xs);
  border-radius: 4px 4px 12px 12px;
}
.nv-s2-cart::before {
  content: '';
  position: absolute;
  top: -7px; left: 0; right: 0; height: 14px;
  background-image: radial-gradient(circle at 7px 7px, var(--bg) 7px, transparent 7.5px);
  background-size: 14px 14px;
  background-repeat: repeat-x;
  background-position: 7px 0;
  pointer-events: none;
}

.parc-section    { display: none; flex-direction: column; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bg); }
.parc-section.on { display: flex; }
.dtpag-row       { margin-top: 10px; }

.mv-prod-info    { display: none; align-items: center; gap: 10px; background: var(--bg); border-radius: 10px; padding: 10px 12px; margin: 4px 22px 12px; }
.mv-prod-info.on { display: flex; }
.mv-prod-img { width: 40px; height: 40px; object-fit: cover; border-radius: 7px; flex-shrink: 0; }
.mv-prod-nm  { font-size: 13px; font-weight: 500; color: var(--tx); }
.mv-prod-pr  { font-size: 12px; color: var(--tx-m); margin-top: 2px; }

.history-item      { font-size: 12.5px; padding: 10px 0; border-bottom: 1px solid var(--bg); line-height: 1.5; }
.history-item:last-child { border-bottom: none; }
.history-list      { min-height: 120px; }

/* ── HV filters ─────────────────────────────────────── */
.hv-filters {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
  gap: 10px 12px;
  align-items: end;
}
.hv-fg-busca { grid-column: 1 / -1; }
.hv-filter-group { display: flex; flex-direction: column; gap: 4px; }
.hv-filter-group label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--tx-s); }
.hv-filter-group .input-field, .hv-filter-group select { margin-top: 0; width: 100%; }

/* ── Extrato popup ─────────────────────────────────── */
.ext-popup {
  position: fixed; bottom: 28px; right: 28px;
  z-index: 500; width: 308px;
  font-family: 'Inter', sans-serif;
  animation: slideUpPop .52s cubic-bezier(.22,1,.36,1) both;
}
.ext-popup.closing { animation: popupOut .28s ease-in both; }
.ext-popup-inner {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--bd);
  box-shadow: var(--sh-modal);
}
.ext-popup-hd {
  background: linear-gradient(135deg, #1B44B8 0%, #2F5FE0 55%, #4D7EFF 100%);
  padding: 16px 16px 18px;
  position: relative;
  overflow: hidden;
}
.ext-popup-hd::before {
  content: '';
  position: absolute; top: 0; bottom: 0; left: -80px; width: 80px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  animation: shimmerSweep 3s ease-in-out infinite;
}
.ext-popup-hd-row { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; margin-bottom: 16px; }
.ext-popup-badge {
  display: flex; align-items: center; gap: 7px;
  font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  padding: 4px 11px 4px 8px; border-radius: 20px;
}
.ext-popup-bars { display: flex; align-items: flex-end; gap: 2px; }
.ext-popup-bars span { display: block; border-radius: 1px; transform: skewX(-14deg); background: rgba(255,255,255,.55); }
.ext-popup-bars span:nth-child(1) { width: 3px; height: 7px; opacity: .6; }
.ext-popup-bars span:nth-child(2) { width: 3.5px; height: 10px; background: #fff; }
.ext-popup-x { width: 24px; height: 24px; border-radius: 7px; border: none; background: rgba(255,255,255,.12); color: rgba(255,255,255,.7); font-size: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .14s, color .14s; font-family: 'Inter', sans-serif; position: relative; z-index: 1; }
.ext-popup-x:hover { background: rgba(255,255,255,.24); color: #fff; }
.ext-popup-month { position: relative; z-index: 1; font-family: 'Inter', sans-serif; font-size: 26px; font-weight: 900; letter-spacing: -.04em; color: #fff; line-height: 1.05; }
.ext-popup-label { position: relative; z-index: 1; font-size: 10px; color: rgba(255,255,255,.6); margin-top: 3px; letter-spacing: .12em; text-transform: uppercase; }
.ext-popup-body  { padding: 16px; }
.ext-popup-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.ext-popup-stat  { background: #EFF4FF; border: 1px solid rgba(27,68,184,.12); border-radius: 12px; padding: 11px 14px; text-align: center; }
.ext-popup-stat-lbl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #94A3B8; margin-bottom: 5px; }
.ext-popup-stat-val { font-size: 17px; font-weight: 900; color: #1B44B8; letter-spacing: -.03em; }
.ext-popup-btn {
  display: block;
  width: 100%;
  background: linear-gradient(135deg, #1B44B8 0%, #4D7EFF 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  transition: opacity .14s, transform .14s;
  letter-spacing: -.01em;
  font-family: 'Inter', sans-serif;
}
.ext-popup-btn:hover { opacity: .92; transform: translateY(-1px); }

/* ══════════════════════════════════════════════════════
   EXTRATO MENSAL — Documento Financeiro Shorti
   ══════════════════════════════════════════════════════ */

/* Wrapper documento */
.ext-doc {
  background: var(--surf);
  border: 1px solid var(--bd);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,.06);
}

/* Barra de marca — escura, fina */
.ext-topbar {
  background: #0F172A;
  padding: 11px 20px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.ext-tb-brand { display: flex; align-items: center; gap: 8px; }
.ext-tb-sym   { color: #60A5FA; font-size: 14px; }
.ext-tb-name  { font-size: 13px; font-weight: 700; color: #fff; letter-spacing: .01em; }
.ext-tb-pipe  { width: 1px; height: 14px; background: rgba(255,255,255,.2); margin: 0 4px; }
.ext-tb-sub   { font-size: 11px; color: rgba(255,255,255,.4); letter-spacing: .04em; }

.ext-month-nav   { display: flex; align-items: center; gap: 2px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 3px; }
.ext-nav-btn     { width: 28px; height: 28px; border: none; background: none; border-radius: 6px; color: rgba(255,255,255,.65); font-size: 16px; cursor: pointer; transition: background .13s, color .13s; display: flex; align-items: center; justify-content: center; font-family: 'Inter', sans-serif; }
.ext-nav-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.ext-month-label { font-size: 12.5px; font-weight: 600; color: #fff; padding: 0 10px; min-width: 120px; text-align: center; }

/* Corpo branco do documento */
.ext-body { padding: 24px 24px 20px; }

/* Cabeçalho do documento */
.ext-doc-hd {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--bg);
}
.ext-doc-title {
  font-size: 22px; font-weight: 700; color: var(--tx);
  letter-spacing: -.03em; margin-bottom: 6px;
}
.ext-doc-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 12px; color: var(--tx-m);
}
.ext-doc-meta strong { color: var(--tx); font-weight: 600; }
.ext-doc-meta span::before { content: '·'; margin-right: 6px; opacity: .4; }
.ext-doc-meta span:first-child::before { display: none; }

.ext-print-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 9px; flex-shrink: 0;
  background: var(--bg); border: 1px solid var(--bd);
  color: var(--tx-m); font-size: 12px; font-weight: 500; cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif;
  transition: background .14s, color .14s, border-color .14s;
}
.ext-print-btn:hover { background: #fff; color: var(--tx); border-color: var(--tx-s); }

/* ── KPIs — strip com divisores ── */
.ext-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--bd); border-radius: 14px;
  overflow: hidden; margin-bottom: 14px;
}
.ext-kpi {
  padding: 20px 20px 18px;
  border-right: 1px solid var(--bd);
  position: relative; overflow: hidden;
  background: var(--surf);
}
.ext-kpi:last-child { border-right: none; }
.ext-kpi::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.ext-kpi.kpi-rose::before  { background: #E07B6A; }
.ext-kpi.kpi-sage::before  { background: #059669; }
.ext-kpi.kpi-amber::before { background: #D97706; }
.ext-kpi.kpi-slate::before { background: var(--gl); }

.ext-kpi-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--tx-s); margin-bottom: 10px; }
.ext-kpi-value { font-size: 24px; font-weight: 700; color: var(--tx); letter-spacing: -.04em; line-height: 1; }
.ext-kpi-sub   { font-size: 11.5px; margin-top: 7px; color: var(--tx-m); }

/* ── Barra de recebimento ── */
.ext-progress-card {
  background: var(--bg); border-radius: 12px;
  padding: 16px 18px; margin-bottom: 14px;
}
.ext-prog-header  { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ext-prog-label   { font-size: 11px; font-weight: 700; color: var(--tx-s); text-transform: uppercase; letter-spacing: .09em; }
.ext-prog-pct     { font-size: 22px; font-weight: 700; color: var(--tx); letter-spacing: -.03em; }
.ext-prog-bar     { height: 7px; background: rgba(0,0,0,.07); border-radius: 4px; overflow: hidden; margin-bottom: 10px; }
.ext-prog-fill    { height: 100%; background: linear-gradient(90deg, #2563EB, #60A5FA); border-radius: 4px; transition: width .6s cubic-bezier(.22,1,.36,1); }
.ext-prog-leg     { display: flex; justify-content: space-between; font-size: 12px; color: var(--tx-m); }

/* ── Rankings ── */
.ext-rank-item     { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--bd); gap: 10px; }
.ext-rank-item:last-child { border-bottom: none; }
.ext-rank-pos      { width: 22px; height: 22px; border-radius: 6px; background: var(--bg); font-size: 10px; font-weight: 700; color: var(--tx-s); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ext-rank-pos.top1 { background: var(--gl-lt); color: var(--gl); }
.ext-rank-nm       { flex: 1; font-size: 13px; color: var(--tx); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ext-rank-val      { font-size: 13px; font-weight: 600; color: var(--tx); white-space: nowrap; }

/* ── Avisos ── */
.ext-preview-badge { display: inline-flex; align-items: center; background: #FEF3C7; color: #92400E; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; padding: 3px 10px; border-radius: 20px; text-transform: uppercase; margin-left: 10px; vertical-align: middle; border: 1px solid #FDE68A; }
.ext-preview-note  { display: flex; align-items: center; gap: 8px; background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: 12.5px; color: #92400E; }
.ext-preview-note-icon { font-size: 15px; flex-shrink: 0; }

/* ── Rodapé ── */
.ext-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 16px; margin-top: 8px;
  border-top: 1px solid var(--bd);
}
.ext-footer-brand { display: flex; align-items: center; gap: 6px; }
.ext-ft-sym  { font-size: 12px; color: var(--gl); }
.ext-ft-name { font-size: 12.5px; font-weight: 700; color: var(--tx); }
.ext-ft-sep  { color: var(--bd-s); }
.ext-ft-sub  { font-size: 11px; color: var(--tx-s); }
.ext-footer-right { font-size: 11.5px; color: var(--tx-s); display: flex; gap: 10px; }

/* ── Cupom Fiscal — identidade Shorti (sóbrio, Inter) ─── */
.cupom-box   { max-width: 400px !important; background: #fff; padding: 0 !important; border-radius: 18px; overflow-y: auto; overflow-x: hidden; }
.cupom-sheet { padding: 0; font-family: 'Inter', system-ui, sans-serif; }

/* Sheet interna gerada por JS */
.cpt-sheet   { padding: 24px 24px 18px; font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; color: #0F172A; background: #fff; }

.cpt-header    { text-align: center; padding-bottom: 14px; }
.cpt-logo-row  { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 8px; }
.cpt-logo-icon { width: 24px; height: 24px; flex-shrink: 0; background: #1B44B8; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.cpt-logo-text { font-size: 15px; font-weight: 800; letter-spacing: -.02em; color: #0F172A; }
.cpt-logo-text span { color: #1B44B8; }
.cpt-brand     { font-size: 13.5px; font-weight: 700; color: #0F172A; }
.cpt-consult   { font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: #94A3B8; margin-top: 3px; }
.cpt-contact   { font-size: 11px; color: #64748B; margin-top: 6px; }

.cpt-sep-solid  { border: none; border-top: 1.5px solid #0F172A; margin: 10px 0; }
.cpt-sep-dashed { border: none; border-top: 1px dashed #CBD5E1; margin: 8px 0; }
.cpt-sep-thin   { border: none; border-top: 1px dotted #E2E8F0; margin: 3px 0; }

.cpt-doc-hd    { text-align: center; padding: 10px 0 8px; }
.cpt-doc-title { font-size: 12px; font-weight: 800; letter-spacing: .12em; display: block; color: #0F172A; }
.cpt-doc-meta  { display: flex; justify-content: space-between; font-size: 10.5px; color: #64748B; margin-top: 6px; }

.cpt-cli-row    { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 0; gap: 8px; }
.cpt-field-lbl  { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #94A3B8; flex-shrink: 0; }
.cpt-field-val  { font-size: 12.5px; font-weight: 600; text-align: right; color: #0F172A; }

.cpt-itens-hd { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #94A3B8; margin-bottom: 6px; }
.cpt-item     { padding: 5px 0; }
.cpt-item-nm  { font-size: 12.5px; font-weight: 600; color: #0F172A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpt-item-det { display: flex; justify-content: space-between; font-size: 11px; color: #64748B; margin-top: 2px; }
.cpt-item-sub { font-weight: 700; color: #0F172A; }

.cpt-totais    { padding: 4px 0; }
.cpt-pgto      { padding: 4px 0; }
.cpt-row       { display: flex; justify-content: space-between; font-size: 12px; padding: 3px 0; color: #334155; }
.cpt-row-total { font-size: 16px; font-weight: 800; padding-top: 8px; border-top: 1.5px solid #0F172A; margin-top: 4px; color: #0F172A; }
.cpt-row-total span:last-child { color: #1B44B8; }

.cpt-status      { text-align: center; padding: 9px 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; border-radius: 8px; margin: 2px 0; }
.cpt-status-ok   { color: #14532D; background: #DCFCE7; }
.cpt-status-pend { color: #9A3412; background: #FFF7ED; }

.cpt-pix        { padding: 6px 0 2px; }
.cpt-pix-body   { display: flex; align-items: center; gap: 14px; padding: 6px 0 4px; }
.cpt-pix-qr     { flex-shrink: 0; width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #E2E8F0; border-radius: 6px; }
.cpt-pix-qr canvas, .cpt-pix-qr img { display: block; width: 88px; height: 88px; }
.cpt-pix-info  { flex: 1; min-width: 0; }
.cpt-pix-val     { font-size: 16px; font-weight: 800; color: #0F172A; }
.cpt-pix-val-sub { font-size: 10px; font-weight: 400; color: #94A3B8; }
.cpt-pix-key   { font-size: 10.5px; color: #64748B; margin-top: 4px; word-break: break-all; }
.cpt-pix-parcelas { padding: 4px 0 2px; }
.cpt-pix-copy  {
  display: block; width: 100%; margin-top: 8px; padding: 10px 12px;
  font-family: 'Inter', system-ui, sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
  color: #1B44B8; background: #EEF2FF; border: 1px solid #C7D2FE; border-radius: 8px;
  cursor: pointer; transition: background .15s;
}
.cpt-pix-copy:hover { background: #E0E7FF; }

/* ── Carnê de pagamento (parcelado) — vouchers destacáveis ── */
.cpt-carne       { margin-top: 2px; }
.cpt-carne-item  { position: relative; padding: 14px 0 10px; }
.cpt-carne-item:first-child { padding-top: 6px; }
.cpt-carne-cut   { text-align: center; font-size: 10px; color: #CBD5E1; letter-spacing: .15em; margin: 4px 0 12px; white-space: nowrap; overflow: hidden; }
.cpt-carne-hd    { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cpt-carne-brand { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; color: #1B44B8; letter-spacing: -.01em; }
.cpt-carne-icon  { width: 16px; height: 16px; border-radius: 4px; background: #1B44B8; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cpt-carne-num   { font-size: 10px; font-weight: 700; color: #94A3B8; text-transform: uppercase; letter-spacing: .1em; }
.cpt-carne-body  { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.cpt-carne-cli   { font-size: 12px; font-weight: 600; color: #0F172A; }
.cpt-carne-due   { font-size: 11px; color: #64748B; margin-top: 2px; }
.cpt-carne-val   { font-size: 17px; font-weight: 800; color: #1B44B8; flex-shrink: 0; white-space: nowrap; }
.cpt-carne-foot  { text-align: center; font-size: 9.5px; color: #94A3B8; text-transform: uppercase; letter-spacing: .12em; margin-top: 8px; }

/* ── Pix: segurança (modal de troca/teste de chave) ── */
.pix-risk       { background: #FFF7ED; border: 1px solid #FED7AA; border-radius: 10px; padding: 12px 14px; }
.pix-risk-title { font-size: 13px; font-weight: 700; color: #92400E; margin-bottom: 6px; }
.pix-risk-list  { margin: 0; padding-left: 18px; font-size: 12.5px; color: #92400E; line-height: 1.6; }
.pix-risk-list li { margin-bottom: 4px; }
.pix-err        { margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--err); }
.pix-test-info  { font-size: 13px; color: var(--tx-m); line-height: 1.6; margin: 0 0 4px; }
.pix-test-q     { font-size: 13.5px; font-weight: 700; color: var(--tx); text-align: center; margin: 12px 0 2px; }

.pix-status-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.pix-badge      { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; letter-spacing: .02em; }
.pix-badge-ok   { color: #14532D; background: #DCFCE7; }
.pix-badge-warn { color: #92400E; background: #FEF3C7; }
.pix-retest-btn {
  font-size: 11.5px; font-weight: 600; color: var(--gl); background: none; border: none;
  cursor: pointer; padding: 0; text-decoration: underline; opacity: .85; white-space: nowrap;
}
.pix-retest-btn:hover { opacity: 1; }

.cpt-footer      { text-align: center; padding: 12px 0 4px; }
.cpt-footer-msg  { font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; font-weight: 500; color: #64748B; line-height: 1.6; }
.cpt-footer-nd   { font-size: 9.5px; color: #CBD5E1; margin-top: 10px; letter-spacing: .06em; text-transform: uppercase; }
.cupom-actions-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 16px 20px 20px; border-top: 0.5px solid rgba(26,23,20,.08); background: #FAFAF9; position: sticky; bottom: 0; z-index: 1; }
.cupom-btn         { display: flex; align-items: center; justify-content: center; gap: 6px; height: 42px; border-radius: 10px; font-size: 12.5px; font-weight: 600; cursor: pointer; border: 1px solid var(--bd-s); background: #fff; color: var(--tx-m); transition: all .13s; font-family: 'Inter', system-ui, sans-serif; white-space: nowrap; }
.cupom-btn:hover   { border-color: var(--tx); color: var(--tx); transform: translateY(-1px); }
.cupom-btn-wa      { border-color: #25D366; color: #16A34A; background: #F0FDF4; }
.cupom-btn-wa:hover { background: #25D366; color: #fff; border-color: #25D366; }
.cupom-btn-carne   { grid-column: 1 / -1; border-color: #1B44B8; color: #1B44B8; background: #EEF2FF; }
.cupom-btn-carne:hover { background: #1B44B8; color: #fff; border-color: #1B44B8; }
.cupom-btn-main    { grid-column: 1 / -1; height: 46px; font-size: 13.5px; background: var(--tx); border-color: var(--tx); color: #fff; }
.cupom-btn-main:hover { background: #1C0D0A; }

/* ── Release Modal (carrega release.html) ── */
.rl-ov {
  position: fixed; inset: 0; z-index: 9990;
  background: #04060C;
  opacity: 0; transition: opacity .4s;
  pointer-events: none;
}
.rl-ov.on  { opacity: 1; pointer-events: auto; }
.rl-ov.out { opacity: 0; pointer-events: none; }
.rl-frame { width: 100%; height: 100%; border: 0; display: block; }
.rl-x {
  position: fixed; top: 20px; right: 20px; z-index: 9991;
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.03);
  border-radius: 50%; color: rgba(255,255,255,.3); cursor: pointer;
  transition: color .2s, background .2s, border-color .2s; backdrop-filter: blur(8px);
}
.rl-x:hover { color:#fff; background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.22); }

/* ── Nova Venda Wizard ──────────────────────────────── */

/* Step indicator */
.nv-wizard-hd {
  display: flex; align-items: center;
  margin: 0 auto 28px;
  max-width: 520px;
}
.nv-step-ind {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.nv-step-num {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  background: var(--bd); color: var(--tx-m);
  transition: background .25s, color .25s, box-shadow .25s, transform .25s;
}
.nv-step-ind span {
  font-size: 13px; font-weight: 500; color: var(--tx-m);
  white-space: nowrap;
  transition: color .2s;
}
.nv-step-ind.active .nv-step-num  {
  background: var(--gl); color: #fff;
  box-shadow: 0 0 0 5px var(--gl-lt);
  transform: scale(1.06);
}
.nv-step-ind.active span           { color: var(--tx); font-weight: 600; }
.nv-step-ind.done .nv-step-num    {
  background: var(--ok); color: #fff; font-size: 0;
}
.nv-step-ind.done .nv-step-num::after { content: '✓'; font-size: 14px; }
.nv-step-ind.done span             { color: var(--tx-m); }

.nv-step-line {
  flex: 1; height: 3px; border-radius: 2px; background: var(--bd);
  margin: 0 12px;
  transition: background .35s ease;
}
.nv-step-line.done { background: var(--ok); }

/* Label de etapa atual (visível apenas no mobile) */
.nv-step-label { display: none; }

/* Panels */
.nv-panel      { display: none; }
.nv-panel.on   { display: block; }

.nv-wizard-card { max-width: 680px; }

.nv-panel-title {
  display: flex; align-items: center; gap: 9px;
  font-size: 16px; font-weight: 700; color: var(--tx);
  letter-spacing: -.02em; margin-bottom: 20px;
}

.nv-panel-ft {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 20px;
  padding-top: 16px; border-top: 1px solid #F3F4F6;
}

/* Step 3 layout responsive */
.nv-s3-grid { display: grid; grid-template-columns: 1fr 360px; gap: 18px; align-items: start; }

/* ── Client picker ──────────────────────────────────── */
.cli-picker {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 320px; overflow-y: auto;
  scrollbar-width: thin;
  margin-bottom: 4px;
}
.cli-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .12s;
  border: 1.5px solid transparent;
}
.cli-row:hover   { background: var(--bg); }
.cli-row.sel     { background: var(--gl-lt); border-color: var(--gl-bd); }
.cli-row.sel .cli-nm { color: var(--gl); font-weight: 600; }

.cli-ava {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  background: var(--blue-bg); color: var(--blue);
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.cli-row.sel .cli-ava { background: var(--gl-lt); color: var(--gl); }
.cli-info  { flex: 1; min-width: 0; }
.cli-nm    { font-size: 13.5px; font-weight: 500; color: var(--tx); }
.cli-meta  { font-size: 12px; color: var(--tx-m); margin-top: 2px; }
.cli-check { color: var(--gl); display: none; }
.cli-row.sel .cli-check { display: block; }
.cli-empty { font-size: 13px; color: var(--tx-m); text-align: center; padding: 16px 0; }

/* Resumo do pedido (step 3) */
#nv-resumo-body .nv-res-cli {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid #F3F4F6;
}
#nv-resumo-body .nv-res-item {
  display: flex; justify-content: space-between;
  font-size: 13px; padding: 5px 0;
  border-bottom: 1px solid #F9FAFB;
}
#nv-resumo-body .nv-res-item:last-child { border-bottom: none; }
#nv-resumo-body .nv-res-nm   { color: var(--tx); font-weight: 500; }
#nv-resumo-body .nv-res-val  { color: var(--tx-m); font-weight: 600; white-space: nowrap; }

/* Regras mobile do wizard estão no bloco @media(768px) principal */

/* ── Product picker — Nova Venda ────────────────────── */
.prod-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
  max-height: 430px;
  overflow-y: auto;
  scrollbar-width: thin;
  padding: 2px;
}
.pp-card {
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 10px;
  border: 1.5px solid var(--bd);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .14s, background .14s, transform .14s, box-shadow .14s;
  text-align: center; gap: 7px; position: relative;
  background: var(--surf);
}
.pp-card:hover { border-color: var(--gl-bd); background: var(--gl-lt); transform: translateY(-2px); box-shadow: var(--sh-sm); }
.pp-card-sel   { border-color: var(--gl); background: var(--gl-lt); box-shadow: 0 0 0 3px var(--gl-lt); }

.pp-thumb {
  width: 56px; height: 56px; border-radius: 12px;
  background: #F9FAFB;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; overflow: hidden;
}
.pp-card-sel .pp-thumb { background: var(--surf); }
.pp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pp-nm   {
  font-size: 11.5px; font-weight: 600; color: var(--tx); line-height: 1.3; word-break: break-word;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  min-height: 2.6em;
}
.pp-pr   { font-size: 11.5px; font-weight: 500; color: var(--gl); }
.pp-promo { color: var(--green); }
.pp-st   { position: absolute; top: 6px; right: 6px; font-size: 10px; padding: 1px 5px; }
.pp-check {
  position: absolute; top: 6px; left: 6px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--gl); color: #fff;
  display: none; align-items: center; justify-content: center;
}
.pp-card-sel .pp-check { display: flex; }
.pp-empty { font-size: 13px; color: var(--tx-m); text-align: center; padding: 16px 0; grid-column: 1/-1; }

/* ── Botão Cupom no Histórico ───────────────────────── */
.cupom-row-btn {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 600;
  font-family: 'Inter', sans-serif;
  background: #F9FAFB; color: var(--tx-m);
  border: 1px solid var(--bd);
  border-radius: 7px; padding: 4px 9px;
  cursor: pointer; white-space: nowrap;
  transition: background .13s, color .13s, border-color .13s;
}
.cupom-row-btn:hover { background: var(--gl-lt); color: var(--gl); border-color: var(--gl-bd); }

/* ── Scanner manual input ───────────────────────────── */
.scan-divider {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; color: rgba(255,255,255,.3);
}
.scan-divider::before, .scan-divider::after {
  content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.1);
}
.scan-manual {
  display: flex; gap: 8px;
}
.scan-manual-input {
  flex: 1;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  color: #fff; font-size: 15px; font-family: 'Inter', monospace;
  letter-spacing: .1em; text-align: center;
  padding: 10px 12px; outline: none;
  transition: border-color .14s, background .14s;
}
.scan-manual-input::placeholder { color: rgba(255,255,255,.3); letter-spacing: .05em; }
.scan-manual-input:focus { border-color: rgba(37,99,235,.6); background: rgba(255,255,255,.12); }
.scan-manual-btn {
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--gl); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .13s;
}
.scan-manual-btn:hover { background: var(--gl-hov); }

/* ══ Scanner — redesign completo ══════════════════════ */
#mscanner {
  padding: 0 !important;
  background: rgba(0,0,0,.88) !important;
  align-items: center !important;
  justify-content: center !important;
}

.scn-wrap {
  width: 100%; max-width: 360px;
  background: #0A0A0F;
  border-radius: 20px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,.6);
  max-height: 92vh;
}

/* Topo */
.scn-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 20px 8px;
}
.scn-mode-badge {
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,.8);
  padding: 5px 14px; letter-spacing: .01em;
}
.scn-close {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.6); transition: background .14s, color .14s;
}
.scn-close:hover { background: rgba(255,255,255,.16); color: #fff; }

/* Botão "Celular" no topo do scanner */
.scn-phone-btn {
  display: flex; align-items: center; gap: 5px;
  height: 34px; padding: 0 12px;
  border-radius: 20px; border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.07); color: rgba(255,255,255,.7);
  font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif;
  transition: background .14s, color .14s, border-color .14s;
}
.scn-phone-btn:hover,
.scn-phone-btn.active {
  background: rgba(37,99,235,.35); color: #fff;
  border-color: rgba(96,165,250,.5);
}
/* Celular conectado — botão fica verde mesmo com painel fechado */
.scn-phone-btn.phone-live {
  background: rgba(34,197,94,.18);
  border-color: rgba(34,197,94,.45);
  color: #4ADE80;
}
.scn-phone-btn.phone-live::after {
  content: '●'; font-size: 7px; margin-left: 4px; color: #22C55E;
  animation: dotBlink 1.8s ease-in-out infinite;
}
.scn-phone-actions { display: flex; gap: 6px; }
.scn-disconnect-btn,
.scn-refresh-btn {
  font-size: 12px; font-weight: 500; color: #9CA3AF;
  background: #F3F4F6; border: 1px solid #E5E7EB; border-radius: 8px;
  padding: 6px 14px; cursor: pointer; font-family: 'Inter', system-ui;
  transition: all .14s;
}
.scn-disconnect-btn:hover { background: #FEE2E2; color: #EF4444; border-color: #FECACA; }
.scn-refresh-btn:hover    { background: #EFF6FF; color: #1B44B8; border-color: #BFDBFE; }

/* Aviso sobre alcance da rede do QR (túnel público vs. IP local) */
.scn-qr-net-hint { display: none !important; }

/* ══ Painel celular — tema branco (mesmo estilo mobile) ═ */
.scn-phone-panel {
  position: absolute; inset: 0; z-index: 10;
  background: #fff;
  display: flex; flex-direction: column;
  overflow-y: auto;
}

/* Cabeçalho do painel */
.scn-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 0; flex-shrink: 0;
}
.scn-panel-brand {
  display: flex; align-items: center; gap: 9px;
}
.scn-panel-brand-mark {
  width: 34px; height: 34px; border-radius: 9px; background: #1B44B8;
  display: flex; align-items: center; justify-content: center;
}
.scn-panel-brand-mark svg { width: 18px; height: 18px; }
.scn-panel-brand-name { font-size: 15px; font-weight: 700; color: #111827; letter-spacing: -.02em; }
.scn-panel-close {
  width: 34px; height: 34px; border-radius: 50%;
  background: #F3F4F6; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.scn-panel-close:hover { background: #E5E7EB; }
.scn-panel-close svg { width: 14px; height: 14px; stroke: #6B7280; }

/* Corpo com scroll */
.scn-panel-body {
  flex: 1; overflow-y: auto;
  padding: 28px 24px 24px;
  display: flex; flex-direction: column;
  align-items: center;
}
.scn-panel-body > * {
  width: 100%; max-width: 480px;
}

/* Reconectando */
.scn-reconnect-state {
  display: none; flex-direction: column; align-items: center;
  justify-content: center; gap: 16px; flex: 1;
}
.scn-phone-panel.reconnecting .scn-reconnect-state { display: flex; }
.scn-phone-panel.reconnecting .scn-pin-block,
.scn-phone-panel.reconnecting .scn-devices-section,
.scn-phone-panel.reconnecting .scn-qr-secondary,
.scn-phone-panel.reconnecting .scn-panel-footer { display: none; }
.scn-reconnect-spinner {
  width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid #E5E7EB; border-top-color: #1B44B8;
  animation: scnSpin .85s linear infinite;
}
@keyframes scnSpin { to { transform: rotate(360deg); } }
.scn-reconnect-txt { font-size: 13px; color: #6B7280; text-align: center; }

/* Título principal */
.scn-connect-title {
  font-size: 19px; font-weight: 700; color: #111827;
  letter-spacing: -.02em; margin-bottom: 20px;
}

/* Cards de opção */
.scn-option-card {
  background: #F9FAFB; border: 1.5px solid #E5E7EB;
  border-radius: 14px; padding: 16px 18px;
  margin-bottom: 0; position: relative;
}

/* Badge "Mais rápido" */
.scn-option-badge {
  display: inline-block; font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 20px; margin-bottom: 12px;
}
.scn-badge-fast { background: #DCFCE7; color: #16A34A; }

/* QR hero layout */
.scn-qr-hero-row {
  display: flex; gap: 16px; align-items: flex-start;
}
.scn-qr-wrap {
  background: #fff; border: 1.5px solid #E5E7EB; border-radius: 12px; padding: 8px;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.scn-qr-wrap canvas, .scn-qr-wrap img { display: block; border-radius: 4px; }
.scn-qr-hero-text { padding-top: 2px; }

/* Títulos e subtítulos das opções */
.scn-option-title {
  font-size: 14px; font-weight: 600; color: #111827;
  margin-bottom: 4px; letter-spacing: -.01em;
}
.scn-option-sub {
  font-size: 12px; color: #6B7280; line-height: 1.5; margin-bottom: 14px;
}

/* Aviso de segurança */
.scn-security-notice {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 11.5px; color: #92400E; line-height: 1.5;
  background: #FFFBEB; border: 1px solid #FDE68A;
  border-radius: 10px; padding: 10px 12px;
  margin-top: 4px;
}
.scn-security-notice svg { flex-shrink: 0; margin-top: 1px; stroke: #D97706; }

/* Divisor "ou" */
.scn-or-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 0; color: #D1D5DB; font-size: 12px;
}
.scn-or-divider::before,
.scn-or-divider::after {
  content: ''; flex: 1; height: 1px; background: #E5E7EB;
}
.scn-or-divider span { color: #9CA3AF; font-weight: 500; }

/* Botão enviar link */
.scn-share-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px; margin-bottom: 16px;
  background: #1B44B8; color: #fff;
  border: none; border-radius: 10px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: 'Inter', system-ui;
  box-shadow: 0 3px 12px rgba(27,68,184,.2);
  transition: opacity .15s;
}
.scn-share-btn:hover  { opacity: .9; }
.scn-share-btn:active { opacity: .78; }

/* Label acima do PIN */
.scn-code-label {
  font-size: 10px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: #9CA3AF; margin-bottom: 10px;
}

/* Dígitos do PIN */
.scn-pin-digits {
  display: flex; align-items: center; gap: 6px;
}
.scn-pin-digit {
  width: 42px; height: 50px; border-radius: 10px;
  background: #fff; border: 1.5px solid #E5E7EB;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: #111827;
  font-family: 'Courier New', monospace;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.scn-pin-divider {
  width: 8px; height: 2px; background: #D1D5DB; border-radius: 1px; flex-shrink: 0;
}

/* Seção dispositivos */
.scn-devices-section {
  padding-top: 24px; margin-top: 4px;
  border-top: 1px solid #F3F4F6;
}
.scn-devices-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.scn-devices-title {
  font-size: 10px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: #9CA3AF;
  display: flex; align-items: center; gap: 6px;
}
.scn-add-dev-btn {
  width: 26px; height: 26px; border-radius: 7px;
  background: #F3F4F6; border: 1px solid #E5E7EB;
  color: #6B7280; font-size: 17px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.scn-add-dev-btn:hover { background: #1B44B8; border-color: #1B44B8; color: #fff; }
.scn-no-devices { font-size: 12px; color: #9CA3AF; text-align: center; padding: 10px 0; }
.scn-device-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  background: #F9FAFB; border: 1px solid #E5E7EB;
  margin-bottom: 6px; transition: border-color .15s;
}
.scn-device-item:hover { border-color: #1B44B8; }
.scn-dev-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: #D1D5DB; transition: all .3s;
}
.scn-dev-dot.online {
  background: #22C55E; box-shadow: 0 0 8px rgba(34,197,94,.4);
  animation: dotBlink 2s ease-in-out infinite;
}
@keyframes dotBlink { 0%,100%{opacity:1} 50%{opacity:.35} }
.scn-dev-name { flex: 1; font-size: 13px; font-weight: 500; color: #374151; }
.scn-dev-remove {
  width: 24px; height: 24px; border-radius: 6px;
  color: #D1D5DB; background: none; border: none;
  cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.scn-dev-remove:hover { background: #FEE2E2; color: #EF4444; }
.scn-dev-inp {
  width: 100%; background: #F9FAFB; border: 1.5px solid #E5E7EB;
  border-radius: 10px; padding: 10px 12px; color: #111827; font-size: 13px;
  outline: none; margin-bottom: 8px; font-family: 'Inter', system-ui;
  transition: border-color .15s;
}
.scn-dev-inp:focus { border-color: #1B44B8; background: #fff; }
.scn-dev-inp::placeholder { color: #D1D5DB; }
.scn-dev-save-btn {
  flex: 1; padding: 9px; background: #1B44B8; color: #fff;
  border: none; border-radius: 9px; font-size: 13px;
  font-weight: 600; cursor: pointer; font-family: 'Inter', system-ui;
  transition: opacity .15s;
}
.scn-dev-save-btn:hover { opacity: .88; }
.scn-dev-cancel-btn {
  flex: 1; padding: 9px; background: #F3F4F6; color: #6B7280;
  border: 1px solid #E5E7EB; border-radius: 9px; font-size: 13px;
  cursor: pointer; font-family: 'Inter', system-ui;
}

/* QR secundário */
.scn-qr-secondary { text-align: center; margin-top: 24px; }
.scn-qr-secondary-label {
  font-size: 10px; color: #9CA3AF; margin-bottom: 10px;
  letter-spacing: .08em; text-transform: uppercase;
}
.scn-qr-wrap {
  background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 14px; padding: 12px;
  display: inline-flex; align-items: center; justify-content: center;
}
.scn-qr-wrap canvas, .scn-qr-wrap img { display: block; border-radius: 4px; }

/* Footer */
.scn-panel-footer {
  margin-top: auto; padding: 14px 24px 20px;
  border-top: 1px solid #F3F4F6;
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; flex-shrink: 0;
}
.scn-phone-status {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 500; color: #9CA3AF;
}
.scn-phone-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #D1D5DB; transition: background .3s; flex-shrink: 0;
}
.scn-phone-dot.connected { background: #22C55E; animation: dotBlink 1.8s ease-in-out infinite; }
.scn-phone-dot.received  { background: #3B82F6; }
.scn-phone-hint-txt { display: none; }
.scn-phone-actions { display: flex; gap: 6px; }

/* Reconectando a um celular pareado anteriormente */
.scn-reconnect-state {
  display: none; flex-direction: column; align-items: center; gap: 16px;
}
.scn-phone-panel.reconnecting .scn-reconnect-state { display: flex; }
.scn-phone-panel.reconnecting .scn-qr-wrap,
.scn-phone-panel.reconnecting #scn-qr-url,
.scn-phone-panel.reconnecting .scn-phone-status,
.scn-phone-panel.reconnecting .scn-phone-hint-txt,
.scn-phone-panel.reconnecting .scn-disconnect-btn { display: none; }
.scn-reconnect-spinner {
  width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid rgba(96,165,250,.16);
  border-top-color: #60A5FA;
  animation: scnSpin .85s linear infinite;
}
@keyframes scnSpin { to { transform: rotate(360deg); } }
.scn-reconnect-txt {
  font-size: 12.5px; color: rgba(255,255,255,.4);
  text-align: center; line-height: 1.6; max-width: 220px;
}
.scn-lt-password {
  background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.3);
  border-radius: 10px; padding: 10px 16px; text-align: center;
  margin-top: 4px;
}
.scn-lt-pw-label { font-size: 10.5px; color: #FCD34D; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
.scn-lt-pw-val   { font-size: 16px; font-weight: 700; color: #FEF3C7; font-family: 'Courier New', monospace; letter-spacing: .08em; }

.scn-hint {
  text-align: center; font-size: 13px;
  color: rgba(255,255,255,.45); margin: 0; padding: 6px 24px 16px;
}

/* Câmera */
.scn-camera-wrap {
  position: relative; width: 100%;
  aspect-ratio: 4/3;
  background: #000; overflow: hidden;
  flex-shrink: 0;
}
#scan-reader { position: absolute; inset: 0; }
#scan-reader video { width: 100% !important; height: 100% !important; object-fit: cover; }
/* Esconde TUDO que o html5-qrcode injeta — botões, frame próprio, svg, canvas auxiliar */
#scan-reader img,
#scan-reader button,
#scan-reader select,
#scan-reader svg,
#scan-reader canvas:not([id]),
#scan-reader #qr-shaded-region,
#scan-reader div[id^="html5"],
#scan-reader span[id] { display: none !important; }

/* Vignette (escurece as bordas, deixa o centro claro) */
.scn-vignette {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background:
    radial-gradient(ellipse 72% 68% at 50% 50%,
      transparent 55%, rgba(0,0,0,.72) 100%);
}

/* Flash verde — feedback instantâneo ao detectar um código */
.scn-flash {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: rgba(52,211,153,.32);
  opacity: 0;
}
.scn-flash.show { animation: scnFlash .55s ease-out; }
@keyframes scnFlash {
  0%   { opacity: .9; }
  100% { opacity: 0; }
}

/* Frame */
.scn-frame {
  position: absolute; inset: 0; z-index: 10;
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}

/* Cantos do frame */
.scn-corner {
  position: absolute;
  width: 28px; height: 28px;
  border-color: #fff; border-style: solid; border-width: 0;
  animation: scnCornerBreathe 2.6s ease-in-out infinite;
}
.scn-corner-tl { top: calc(50% - 44px);  left: calc(50% - 110px); border-top-width: 3px; border-left-width: 3px;  border-radius: 4px 0 0 0; animation-delay: 0s; }
.scn-corner-tr { top: calc(50% - 44px);  right:calc(50% - 110px); border-top-width: 3px; border-right-width: 3px; border-radius: 0 4px 0 0; animation-delay: .15s; }
.scn-corner-bl { bottom:calc(50% - 44px);left: calc(50% - 110px); border-bottom-width: 3px; border-left-width: 3px;  border-radius: 0 0 0 4px; animation-delay: .3s; }
.scn-corner-br { bottom:calc(50% - 44px);right:calc(50% - 110px); border-bottom-width: 3px; border-right-width: 3px; border-radius: 0 0 4px 0; animation-delay: .45s; }
@keyframes scnCornerBreathe {
  0%,100% { opacity: .55; }
  50%     { opacity: 1; }
}

/* Alvo pulsante no centro — guia onde posicionar o produto */
.scn-center-pulse {
  position: absolute;
  width: 10px; height: 10px; border-radius: 50%;
  background: #60A5FA;
  animation: scnCenterPulse 2.4s ease-out infinite;
}
@keyframes scnCenterPulse {
  0%   { box-shadow: 0 0 0 0 rgba(96,165,250,.5);  transform: scale(.8); opacity: .9; }
  60%  { box-shadow: 0 0 0 28px rgba(96,165,250,0); transform: scale(1);  opacity: .35; }
  100% { box-shadow: 0 0 0 0 rgba(96,165,250,0);    transform: scale(.8); opacity: 0; }
}

/* Scan line */
.scn-line {
  position: absolute;
  left: calc(50% - 110px); right: calc(50% - 110px);
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #60A5FA 20%, #fff 50%, #60A5FA 80%, transparent 100%);
  box-shadow: 0 0 10px rgba(96,165,250,.9), 0 0 20px rgba(37,99,235,.5);
  border-radius: 1px;
  animation: scnLine 2.2s ease-in-out infinite;
}
@keyframes scnLine {
  0%   { top: calc(50% - 40px); opacity: .7; }
  50%  { top: calc(50% + 36px); opacity: 1; }
  100% { top: calc(50% - 40px); opacity: .7; }
}

/* Card de produto encontrado */
.scn-found-card {
  margin: 14px 20px 0;
  display: flex; align-items: center; gap: 12px;
  background: rgba(16,185,129,.12);
  border: 1px solid rgba(16,185,129,.3);
  border-radius: 14px; padding: 14px 16px;
  animation: scnFoundIn .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes scnFoundIn {
  from { opacity:0; transform:translateY(12px) scale(.95); }
  to   { opacity:1; transform:none; }
}
.scn-found-check {
  width: 36px; height: 36px; border-radius: 12px; flex-shrink: 0;
  background: rgba(16,185,129,.2); color: #34D399;
  display: flex; align-items: center; justify-content: center;
}
.scn-found-info { flex: 1; min-width: 0; }
.scn-found-nm   { font-size: 14px; font-weight: 700; color: #D1FAE5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scn-found-meta { font-size: 12px; color: rgba(167,243,208,.7); margin-top: 2px; }
.scn-found-pr   { font-size: 16px; font-weight: 800; color: #6EE7B7; letter-spacing: -.03em; flex-shrink: 0; }

/* Não encontrado / erro */
.scn-notfound {
  margin: 14px 20px 0;
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.25);
  border-radius: 12px; padding: 14px;
  font-size: 13px; color: #FCA5A5;
  line-height: 1.55;
  white-space: pre-line; /* permite \n no texto */
  animation: scnFoundIn .3s ease;
}
.scn-notfound svg { flex-shrink: 0; margin-top: 1px; }

/* Input manual */
.scn-manual-wrap {
  padding: 20px 20px 32px;
  margin-top: auto;
  display: flex; flex-direction: column; gap: 10px;
}
.scn-manual-label {
  text-align: center; font-size: 11.5px;
  color: rgba(255,255,255,.3);
}
.scn-manual-row { display: flex; gap: 8px; }
.scn-manual-input {
  flex: 1; background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
  color: #fff; font-size: 16px; font-family: 'Inter', monospace;
  letter-spacing: .12em; text-align: center;
  padding: 12px; outline: none;
  transition: border-color .15s, background .15s;
}
.scn-manual-input::placeholder { color: rgba(255,255,255,.2); letter-spacing: .04em; }
.scn-manual-input:focus { border-color: rgba(96,165,250,.5); background: rgba(255,255,255,.1); }
.scn-manual-go {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--gl); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background .13s, transform .12s;
}
.scn-manual-go:hover { background: var(--gl-hov); transform: scale(1.04); }

/* Botão scanner inline na Nova Venda */
.btn-scan-inline {
  width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
  background: var(--gl-lt); color: var(--gl);
  border: 1px solid var(--gl-bd);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .13s, box-shadow .13s;
}
.btn-scan-inline:hover { background: var(--gl-bd); box-shadow: 0 2px 8px var(--gl-glow-s); }

/* Destaque "novidade" — leitor de código de barras (RGB suave com cores Shorti) */
@keyframes scan-rgb-glow {
  0%, 100% { border-color: rgba(37,99,235,.55);  box-shadow: 0 0 0 1px rgba(37,99,235,.18),  0 0 10px 1px rgba(37,99,235,.22); }
  25%      { border-color: rgba(124,58,237,.55); box-shadow: 0 0 0 1px rgba(124,58,237,.18), 0 0 10px 1px rgba(124,58,237,.22); }
  50%      { border-color: rgba(234,88,12,.55);  box-shadow: 0 0 0 1px rgba(234,88,12,.18),  0 0 10px 1px rgba(234,88,12,.22); }
  75%      { border-color: rgba(5,150,105,.55);  box-shadow: 0 0 0 1px rgba(5,150,105,.18),  0 0 10px 1px rgba(5,150,105,.22); }
}
.btn-scan-rgb { animation: scan-rgb-glow 6s ease-in-out infinite; }

/* ══ Animação de sucesso de venda ══════════════════════ */
.sale-success {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(10,10,16,.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s ease, visibility 0s .3s;
}
.sale-success.on {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .3s ease;
}
.ss-card {
  background: #fff;
  border-radius: 26px;
  padding: 36px 32px 28px;
  max-width: 360px; width: 100%;
  text-align: center;
  box-shadow: 0 40px 100px rgba(0,0,0,.35);
  animation: ssCardIn .55s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes ssCardIn {
  from { opacity:0; transform: translateY(28px) scale(.94); }
  to   { opacity:1; transform: none; }
}

/* ── Área de animação ── */
.ss-anim {
  position: relative;
  width: 130px; height: 130px;
  margin: 0 auto 22px;
  display: flex; align-items: center; justify-content: center;
}

/* ── Cofre central ── */
.ss-vault {
  width: 76px; height: 76px;
  background: linear-gradient(145deg, #1B44B8, #2563EB);
  border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 32px rgba(37,99,235,.45);
  position: relative; z-index: 2;
  animation: vaultIn .5s cubic-bezier(.34,1.56,.64,1) .1s both,
             vaultJolt .45s ease-in-out 1.0s 1;
}
@keyframes vaultIn {
  from { transform: scale(0) rotate(-12deg); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes vaultJolt {
  0%   { transform: scale(1)    rotate(0deg); }
  18%  { transform: scale(1.18) rotate(-5deg); }
  42%  { transform: scale(1.13) rotate(4deg); }
  66%  { transform: scale(1.06) rotate(-2deg); }
  82%  { transform: scale(1.02) rotate(1deg); }
  100% { transform: scale(1)    rotate(0deg); }
}

/* Badge de checkmark no cofre */
.ss-check-badge {
  position: absolute;
  top: -11px; right: -11px;
  width: 28px; height: 28px;
  background: #22C55E;
  border-radius: 50%;
  border: 3px solid #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 12px rgba(34,197,94,.5);
  animation: badgeIn .4s cubic-bezier(.34,1.56,.64,1) 1.1s both;
}
@keyframes badgeIn {
  from { transform: scale(0) rotate(-25deg); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* ── Moedas voando para o cofre ── */
.ss-coin {
  position: absolute;
  top: 50%; left: 50%;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FDE68A, #F59E0B);
  border: 2px solid #D97706;
  box-shadow: 0 2px 10px rgba(245,158,11,.5);
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 900; color: #78350F;
  letter-spacing: -.5px;
  opacity: 0; z-index: 1;
  animation: coinFly .58s cubic-bezier(.36,.07,.19,.97) both;
}
.c1 { --sx:-74px; --sy:-68px; animation-delay:.42s; }
.c2 { --sx: 74px; --sy:-68px; animation-delay:.50s; }
.c3 { --sx:-84px; --sy:  6px; animation-delay:.58s; }
.c4 { --sx: 84px; --sy:  6px; animation-delay:.66s; }
.c5 { --sx:-34px; --sy: 76px; animation-delay:.74s; }
.c6 { --sx: 34px; --sy: 76px; animation-delay:.82s; }
@keyframes coinFly {
  0%   { opacity:1; transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) scale(1.1); }
  72%  { opacity:.9; transform: translate(-50%,-50%) scale(.55); }
  100% { opacity:0;  transform: translate(-50%,-50%) scale(0); }
}

/* ── Anéis de pulso (após cofre tremer) ── */
.ss-ring {
  position: absolute; inset: 0; border-radius: 50%; opacity: 0;
}
.r1 { border: 2.5px solid #2563EB; animation: ringPulse .65s ease-out 1.0s both; }
.r2 { border: 2px solid #22C55E;   animation: ringPulse .65s ease-out 1.15s both; }
@keyframes ringPulse {
  0%   { transform: scale(.7); opacity: .7; }
  100% { transform: scale(1.65); opacity: 0; }
}

/* ── Partículas (após badge aparecer) ── */
.ss-particle {
  position: absolute; top: 50%; left: 50%;
  font-size: 12px; opacity: 0; z-index: 1;
  animation: particleOut .65s ease-out both;
}
.p1 { color:#FBBF24; --tx:-56px; --ty:-50px; animation-delay:1.18s; }
.p2 { color:#22C55E; --tx: 56px; --ty:-54px; animation-delay:1.24s; }
.p3 { color:#60A5FA; --tx:-64px; --ty:  6px; animation-delay:1.30s; }
.p4 { color:#F472B6; --tx: 64px; --ty:  6px; animation-delay:1.36s; }
.p5 { color:#A78BFA; --tx:-30px; --ty: 58px; animation-delay:1.42s; }
.p6 { color:#FCD34D; --tx: 30px; --ty: 58px; animation-delay:1.48s; }
@keyframes particleOut {
  0%   { opacity:1; transform: translate(-50%,-50%) scale(.7); }
  60%  { opacity:1; }
  100% { opacity:0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1.4); }
}

/* Textos */
.ss-label {
  font-size: 20px; font-weight: 800;
  color: var(--tx); letter-spacing: -.03em;
  margin-bottom: 4px;
  animation: ssFadeUp .4s ease 1.35s both;
}
.ss-client {
  font-size: 14px; color: var(--tx-m); margin-bottom: 12px;
  animation: ssFadeUp .4s ease 1.42s both;
}
.ss-total {
  font-size: 38px; font-weight: 800;
  color: var(--gl); letter-spacing: -.05em; line-height: 1;
  animation: ssFadeUp .4s ease 1.48s both;
}
.ss-sub {
  font-size: 13px; color: var(--tx-m); margin-top: 4px;
  animation: ssFadeUp .4s ease 1.52s both;
}

@keyframes ssFadeUp {
  from { opacity:0; transform: translateY(10px); }
  to   { opacity:1; transform: none; }
}

/* Botões */
.ss-actions {
  display: flex; gap: 8px; margin-top: 28px;
  animation: ssFadeUp .4s ease 1.6s both;
}
.ss-btn-sec {
  flex: 1; height: 42px; border-radius: 10px;
  background: var(--bg); color: var(--tx-m);
  border: 1px solid var(--bd);
  font-size: 13px; font-weight: 600; font-family: 'Inter', sans-serif;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px;
  transition: background .13s, color .13s;
}
.ss-btn-sec:hover { background: var(--bd); color: var(--tx); }
.ss-btn-pri {
  flex: 1.4; height: 42px; border-radius: 10px;
  background: var(--gl); color: #fff; border: none;
  font-size: 13px; font-weight: 600; font-family: 'Inter', sans-serif;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px;
  box-shadow: 0 3px 12px var(--gl-glow);
  transition: background .13s, transform .12s;
}
.ss-btn-pri:hover { background: var(--gl-hov); transform: translateY(-1px); }

/* ── Bottom tab bar — mobile ───────────────────────── */
.mob-tabs {
  display: none; /* oculta no desktop */
}

/* ── Helpers: hide/show por device ─────────────────── */
.mob-hide   { } /* default: visível */
.mob-only   { display: none !important; } /* padrão: oculto */

/* ── GL Badge ──────────────────────────────────────── */
.gl-badge {
  position: fixed;
  bottom: 14px; right: 16px;
  z-index: 199; /* abaixo da tab bar (z-index 200) */
  display: flex; align-items: center; gap: 7px;
  padding: 6px 11px;
  border-radius: 8px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(27,68,184,.14);
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.09);
  transition: opacity .2s, box-shadow .2s;
  animation: glPulse 3.5s ease-in-out infinite;
}
.gl-badge:hover { opacity: 1 !important; box-shadow: 0 4px 18px rgba(0,0,0,.15); animation: none; }
.gl-badge-bars  { display: flex; align-items: flex-end; gap: 2.5px; }
.gl-badge-bar   { background: var(--gl); border-radius: 1.5px; transform: skewX(-14deg); }
.gl-badge-bar:nth-child(1) { width: 3px; height: 10px; opacity: .5; }
.gl-badge-bar:nth-child(2) { width: 4px; height: 13px; }
.gl-badge-text  { font-family: 'Inter', 'DM Sans', system-ui, sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gl); }

/* ── Animations ────────────────────────────────────── */
@keyframes ledPulse {
  0%, 100% { opacity: .7; transform: scale(1); }
  50%       { opacity: 1;  transform: scale(1.15); }
}
@keyframes shimmerSweep {
  0%   { transform: translateX(-120%) skewX(-12deg); }
  100% { transform: translateX(320%) skewX(-12deg); }
}
@keyframes sparkFloat {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1);       opacity: .5; }
  40%       { transform: translateY(-9px) rotate(160deg) scale(1.3); opacity: 1; }
  70%       { transform: translateY(-4px) rotate(300deg) scale(.85); opacity: .7; }
}
@keyframes slideUpPop {
  from { opacity: 0; transform: translateY(36px) scale(.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes popupOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(20px) scale(.94); }
}
@keyframes pulseIcon {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196,137,122,.35); }
  50%       { box-shadow: 0 0 0 7px rgba(196,137,122,0); }
}
@keyframes glPulse {
  0%, 100% { opacity: .5; }
  50%       { opacity: .85; }
}

/* ── Estoque page ───────────────────────────────────── */
.est-filters {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-bottom: 20px;
}
/* Wrapper busca+scanner — no desktop é transparente, no mobile é uma linha */
.est-search-row {
  display: contents; /* no desktop, filhos participam do flex pai normalmente */
}
.est-search-row #est-busca { width: 220px; flex-shrink: 0; }
.est-chips-row { display: flex; gap: 6px; flex-wrap: wrap; }

/* Group header */
.est-group-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0 8px;
  margin-bottom: 4px;
}
.est-group-hd:first-child { padding-top: 0; }
.est-group-name {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--tx-s);
}

/* Chips combinados (categorias + status na mesma linha) */
.est-chips-combined { flex-wrap: wrap; gap: 5px; align-items: center; }
.est-chips-sep {
  width: 1px; height: 16px; background: var(--bd);
  margin: 0 4px; flex-shrink: 0;
}
.est-chip-low  { color: #D97706; border-color: #FDE68A; }
.est-chip-low.on  { background: #FEF3C7; color: #92400E; border-color: #FCD34D; }
.est-chip-out  { color: #EF4444; border-color: #FECACA; }
.est-chip-out.on  { background: #FEE2E2; color: #991B1B; border-color: #FCA5A5; }

/* Product row — limpo */
.est-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--surf);
  border: 1px solid var(--bd);
  margin-bottom: 4px;
  cursor: pointer;
  transition: background .12s, border-color .13s;
}
.est-row:hover { background: #EFF6FF; border-color: var(--gl-bd); }

/* Thumb */
.est-thumb {
  width: 38px; height: 38px; border-radius: 9px;
  background: #F9FAFB; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
}
.est-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Info — nome + meta em coluna */
.est-row-info  { flex: 1; min-width: 0; }
.est-row-nm    { font-size: 13.5px; font-weight: 600; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.est-row-meta  { font-size: 11.5px; color: var(--tx-m); margin-top: 2px; }
.est-promo-tag { font-size: 11px; color: var(--green); font-weight: 600; }

/* Direita: quantidade + badge */
.est-row-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.est-qty-badge {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600;
}
.est-qty-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* Empty + loading state */
.est-empty {
  text-align: center; padding: 40px 20px; color: var(--tx-m); font-size: 14px;
}

/* ── Clientes — tabela e avatar ────────────────────── */
.cli-avatar {
  width: 30px; height: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0;
  margin-right: 8px; vertical-align: middle;
}
.cli-row-name  { display: flex; align-items: center; }
.cli-row-nm    { font-size: 13.5px; font-weight: 600; color: var(--tx); }
.cli-row-sub   { font-size: 11.5px; color: var(--tx-m); margin-top: 1px; }

/* ── Modal perfil largo do cliente ─────────────────── */
.mcp-wide {
  max-width: 780px !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  max-height: min(90svh, 90vh) !important;
}

/* Hero colorido */
.mcp-hero {
  position: relative;
  padding: 28px 28px 24px;
  display: flex; align-items: center;
  justify-content: space-between; gap: 20px;
  flex-shrink: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--bd);
}
.mcp-close {
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px; border-radius: 8px;
  background: rgba(0,0,0,.06); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--tx-m); transition: background .13s, color .13s;
}
.mcp-close:hover { background: rgba(0,0,0,.12); color: var(--tx); }

.mcp-hero-left { display: flex; align-items: center; gap: 16px; }

.mcp-avatar-big {
  width: 72px; height: 72px; border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 800; color: #fff; flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.mcp-nm      { font-size: 18px; font-weight: 700; color: var(--tx); letter-spacing: -.02em; margin-bottom: 3px; }
.mcp-hero-sub { font-size: 12px; color: var(--tx-m); }

/* Stats no hero — chips horizontais */
.mcp-hero-stats { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
.mcp-stat {
  display: flex; flex-direction: column; align-items: center;
  background: var(--surf); border: 1px solid var(--bd);
  border-radius: 12px; padding: 10px 14px; min-width: 80px; text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.mcp-stat-val { font-size: 15px; font-weight: 700; color: var(--tx); letter-spacing: -.03em; line-height: 1; }
.mcp-stat-lbl { font-size: 10px; color: var(--tx-s); text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; }

/* Corpo: 2 colunas */
.mcp-body {
  display: grid;
  grid-template-columns: 196px 1fr;
  flex: 1; min-height: 0; overflow: hidden;
}

/* Sidebar: apenas detalhes de contato */
.mcp-sidebar {
  padding: 20px 16px;
  border-right: 1px solid var(--bd);
  background: #FAFBFC;
  overflow-y: auto;
}
.mcp-sidebar-hd {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--tx-s); margin-bottom: 12px;
}

.mcp-info {
  display: flex; flex-direction: column; gap: 9px;
  margin-bottom: 16px;
}
.mcp-info-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--tx-m);
}
.mcp-info-row svg { flex-shrink: 0; color: var(--tx-s); }
.mcp-info-val { color: var(--tx); font-size: 12.5px; }

.mcp-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.mcp-tag  { font-size: 11px; font-weight: 500; color: var(--tx-m); background: var(--bg); border: 1px solid var(--bd); border-radius: 6px; padding: 3px 9px; }
.mcp-tag-skin { background: var(--gl-lt); color: var(--gl); border-color: var(--gl-bd); }

/* Main: histórico */
.mcp-main { display: flex; flex-direction: column; overflow: hidden; }

.mcp-main-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--bd);
  flex-shrink: 0;
}
.mcp-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--tx-s); }
.mcp-hist-count    { font-size: 11.5px; color: var(--tx-m); background: var(--bg); border-radius: 20px; padding: 2px 10px; font-weight: 500; }

/* Linhas do histórico */
.mcp-hist-list { flex: 1; overflow-y: auto; }
.mcp-hist-row  {
  display: grid;
  grid-template-columns: 72px 1fr auto 72px 84px;
  align-items: center; gap: 10px;
  padding: 11px 20px;
  border-bottom: 1px solid #F8FAFC;
  transition: background .1s;
}
.mcp-hist-row:hover { background: #F8FAFC; }
.mcp-hist-row:last-child { border-bottom: none; }
.mcp-hist-date { font-size: 12px; color: var(--tx-m); white-space: nowrap; }
.mcp-hist-prod { font-size: 13px; color: var(--tx); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcp-hist-val  { font-size: 13px; font-weight: 600; color: var(--tx); white-space: nowrap; }
.mcp-hist-pag  { font-size: 12px; color: var(--tx-m); text-align: center; white-space: nowrap; }
.mcp-hist-st   { text-align: right; }
.mcp-hist-empty { padding: 40px 20px; text-align: center; color: var(--tx-m); font-size: 13px; }

/* Sumário */
.mcp-hist-summary {
  padding: 12px 20px;
  border-top: 1px solid var(--bd);
  display: flex; justify-content: space-between; align-items: center;
  background: var(--bg); flex-shrink: 0; font-size: 12.5px; color: var(--tx-m);
}
.mcp-hist-summary strong { color: var(--tx); font-size: 13.5px; font-weight: 700; }
.mcp-hist-fiado { color: #D97706; font-weight: 600; }

/* ── Modal produto largo ────────────────────────────── */
.mp-wide {
  max-width: 740px !important;
  padding: 0 !important;
}
.mp-body {
  display: grid;
  grid-template-columns: 210px 1fr;
  min-height: 0;
  max-height: calc(min(88svh,88vh) - 120px);
  overflow: hidden;
}
.mp-left {
  padding: 20px;
  border-right: 1px solid var(--bd);
  overflow-y: auto;
  background: #FAFBFC;
  border-radius: 0;
}
.mp-right {
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Preview de imagem */
.mp-preview {
  width: 100%; aspect-ratio: 1/1;
  border-radius: 14px;
  border: 1.5px dashed var(--bd);
  background: #F3F4F6;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: border-color .15s;
}
.mp-preview:has(img[style*="block"]) { border-style: solid; border-color: var(--gl-bd); }

/* Seções do formulário */
.mp-section {
  padding: 18px 20px;
  border-bottom: 1px solid #F3F4F6;
}
.mp-section:last-child { border-bottom: none; }
.mp-section-hd {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--tx-s); margin-bottom: 14px;
}

/* Grid preços — desktop 3 col, mobile 1 col (via mp-price-grid) */
.mp-price-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

/* Wizard — desktop: progress e footer mobile ocultos, todos os painéis visíveis */
.mp-wiz-progress { display: none; }  /* mostra só no mobile */
.mp-mob-field    { display: none; }  /* campos extras só no mobile */
.mp-wiz-ft       { display: none; }  /* footer wizard só no mobile */
.mp-desk-ft      { display: flex; }  /* footer desktop */
.est-scn-mob     { display: none; }  /* scanner inline só no mobile */

/* ── Modal confirmação ───────────────────────────────── */
.mconf-body {
  padding: 32px 28px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.mconf-icon-wrap {
  width: 56px; height: 56px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-bottom: 4px;
}
.mconf-icon-wrap svg { width: 22px; height: 22px; }
.mconf-icon-wrap.danger { background: #FEE2E2; color: var(--err); }
.mconf-icon-wrap.warn   { background: #FEF3C7; color: var(--warn); }
.mconf-icon-wrap.info   { background: var(--gl-lt); color: var(--gl); }

.mconf-title {
  font-size: 16px; font-weight: 700;
  color: var(--tx); letter-spacing: -.02em;
}
.mconf-msg {
  font-size: 13.5px; color: var(--tx-m);
  line-height: 1.65; max-width: 280px;
}
.mconf-msg strong { color: var(--tx); font-weight: 600; }

/* Footer do modal de confirmação — override do modal-actions genérico */
#mconf .modal-actions {
  border-top: none;
  padding: 8px 24px 24px;
  gap: 10px;
  justify-content: stretch;
  position: static;
}
#mconf .modal-actions .btn {
  flex: 1;
  justify-content: center;
  height: 42px;
  font-size: 14px;
}

/* Danger/Info button variant */
.btn-danger { background: var(--err); color: #fff; border-color: var(--err); box-shadow: 0 2px 8px rgba(220,38,38,.2); }
.btn-danger:hover { background: #B91C1C; border-color: #B91C1C; box-shadow: 0 4px 14px rgba(220,38,38,.3); transform: translateY(-1px); }

/* ══ CONSULTAR PRODUTO ══════════════════════════════════════════ */
#ep-consulta * { font-family: inherit; font-style: normal; }

/* ── Layout de página ── */
.cq-page-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  height: calc(100vh - 122px);
  border: 1px solid var(--bd);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--sh-md);
  background: #fff;
}

/* ── Painel esquerdo: fundo azul suave ── */
.cq-page-left {
  background: linear-gradient(160deg, #EEF2FF 0%, #E0EAFF 50%, #EFF6FF 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px 28px;
  position: relative;
  overflow: hidden;
  gap: 28px;
}
/* Círculos decorativos no fundo */
.cq-page-left::before,
.cq-page-left::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.cq-page-left::before {
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(37,99,235,.1) 0%, transparent 70%);
  top: -60px; right: -60px;
}
.cq-page-left::after {
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(37,99,235,.08) 0%, transparent 70%);
  bottom: -40px; left: -40px;
}

/* ── Câmera ── */
.cq-camera-wrap {
  position: absolute; inset: 0;
  background: #000; overflow: hidden;
}
#cq-reader { width:100%!important; height:100%!important; max-width:100%!important; max-height:100%!important; overflow:hidden; }
#cq-reader > * { max-width:100%!important; max-height:100%!important; }
#cq-reader video { position:absolute!important; inset:0!important; width:100%!important; height:100%!important; object-fit:cover; display:block; }
#cq-reader img, #cq-reader button, #cq-reader select, #cq-reader svg,
#cq-reader canvas:not([id]), #cq-reader #qr-shaded-region,
#cq-reader div[id^="html5"] { display:none!important; }

.cq-frame { position:absolute; inset:0; pointer-events:none; }
.cq-corner {
  position: absolute; width: 26px; height: 26px;
  border-style: solid; border-color: var(--gl); border-width: 0;
}
.cq-tl { top:28px; left:28px;  border-top-width:3px; border-left-width:3px;  border-radius:6px 0 0 0; }
.cq-tr { top:28px; right:28px; border-top-width:3px; border-right-width:3px; border-radius:0 6px 0 0; }
.cq-bl { bottom:28px; left:28px;  border-bottom-width:3px; border-left-width:3px;  border-radius:0 0 0 6px; }
.cq-br { bottom:28px; right:28px; border-bottom-width:3px; border-right-width:3px; border-radius:0 0 6px 0; }
.cq-scan-line {
  position: absolute; left: 28px; right: 28px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gl) 30%, rgba(255,255,255,.9) 50%, var(--gl) 70%, transparent);
  box-shadow: 0 0 10px 2px rgba(37,99,235,.6);
  animation: cqLine 2.4s ease-in-out infinite;
}
@keyframes cqLine { 0%,100%{top:28px;opacity:.6} 50%{top:calc(100% - 28px);opacity:1} }
.cq-cam-label {
  position: absolute; bottom:0; left:0; right:0;
  padding: 12px 16px; text-align: center;
  font-size: 12px; font-weight: 500; color: rgba(255,255,255,.85);
  background: linear-gradient(transparent, rgba(0,0,0,.65));
  pointer-events: none;
}

/* ── QR wrap ── */
.cq-qr-wrap-page {
  display: flex; flex-direction: column;
  gap: 0; width: 100%;
  position: relative; z-index: 1;
}

/* Título do painel */
.cq-conn-heading {
  font-size: 16px; font-weight: 700; color: var(--tx);
  letter-spacing: -.02em; margin-bottom: 14px;
}

/* Cards de opção */
.cq-conn-option {
  background: var(--bg-card); border: 1.5px solid var(--bd);
  border-radius: 14px; padding: 14px 16px; margin-bottom: 0;
}
.cq-conn-opt-badge {
  display: inline-block; font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 20px; margin-bottom: 10px;
}
.cq-badge-fast-green { background: #DCFCE7; color: #16A34A; }
.cq-conn-opt-row { display: flex; gap: 12px; align-items: flex-start; }
.cq-qr-frame { flex-shrink: 0; background: #fff; border: 1.5px solid var(--bd); border-radius: 10px; padding: 6px; display: inline-flex; }
#cq-qr-canvas, #cq-qr-img { display:block; width:140px; height:140px; border-radius: 4px; }
.cq-conn-opt-text { flex: 1; padding-top: 2px; }
.cq-conn-opt-title { font-size: 13px; font-weight: 600; color: var(--tx); margin-bottom: 4px; }
.cq-conn-opt-sub   { font-size: 12px; color: var(--tx-m); line-height: 1.5; margin-bottom: 12px; }

/* Botão copiar link */
.cq-copy-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; margin-bottom: 14px;
  background: var(--gl); color: #fff;
  border: none; border-radius: 9px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: 'Inter', system-ui; transition: opacity .15s;
}
.cq-copy-btn:hover { opacity: .88; }

/* PIN digits */
.cq-pin-eyebrow {
  font-size: 10px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tx-s); margin-bottom: 8px;
}
.cq-pin-digits { display: flex; align-items: center; gap: 5px; }
.cq-pin-d {
  width: 36px; height: 44px; border-radius: 9px;
  background: var(--bg); border: 1.5px solid var(--bd);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; color: var(--tx);
  font-family: 'Courier New', monospace;
}
.cq-pin-sep { width: 8px; height: 2px; background: var(--bd); border-radius: 1px; flex-shrink: 0; }

/* Divisor "ou" */
.cq-conn-or {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 0; color: var(--bd); font-size: 12px;
}
.cq-conn-or::before,.cq-conn-or::after { content:''; flex:1; height:1px; background:var(--bd); }
.cq-conn-or span { color: var(--tx-s); font-weight: 500; }

/* Aviso de segurança */
.cq-conn-security {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: #92400E;
  background: #FFFBEB; border: 1px solid #FDE68A;
  border-radius: 8px; padding: 8px 10px; margin-top: 12px;
}
.cq-conn-security svg { flex-shrink: 0; stroke: #D97706; }
.cq-phone-status { display:flex; align-items:center; justify-content:center; gap:7px; }
.cq-phone-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bd); flex-shrink: 0;
  transition: background .35s, box-shadow .35s;
}
.cq-phone-dot.connected {
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(5,150,105,.2);
  animation: cqDotPulse 2s ease-in-out infinite;
}
.cq-phone-dot.received { background: var(--gl); box-shadow: 0 0 0 3px var(--gl-glow-s); }
@keyframes cqDotPulse { 0%,100%{box-shadow:0 0 0 3px rgba(5,150,105,.2)} 50%{box-shadow:0 0 0 6px rgba(5,150,105,.08)} }
#cq-phone-txt { font-size: 12.5px; color: var(--tx-m); font-weight: 500; }

/* ── Estado conectado ── */
.cq-connected-card {
  display: none;
  flex-direction: column; align-items: center; gap: 18px;
  width: 100%; position: relative; z-index: 1;
  opacity: 0; transform: translateY(16px) scale(.96);
  transition: opacity .4s cubic-bezier(.22,1,.36,1), transform .4s cubic-bezier(.22,1,.36,1);
}
.cq-connected-card.visible { opacity:1; transform:translateY(0) scale(1); }

/* Ícone com anéis */
.cq-conn-rings {
  position: relative; width: 96px; height: 96px;
  display: flex; align-items: center; justify-content: center;
}
.cq-conn-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid rgba(5,150,105,.3);
  animation: cqRing 2.6s ease-out infinite;
}
.cq-conn-ring.r2 { animation-delay: .86s; }
.cq-conn-ring.r3 { animation-delay: 1.72s; }
@keyframes cqRing { 0%{transform:scale(.3);opacity:1} 100%{transform:scale(2.4);opacity:0} }
.cq-conn-icon {
  width: 64px; height: 64px; border-radius: 20px;
  background: var(--ok);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
  box-shadow: 0 8px 32px rgba(5,150,105,.4), 0 0 0 4px rgba(5,150,105,.12);
  animation: cqIconPop .5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes cqIconPop { from{transform:scale(.6);opacity:0} to{transform:scale(1);opacity:1} }

.cq-conn-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(5,150,105,.1); border: 1px solid rgba(5,150,105,.2);
  border-radius: 100px; padding: 5px 14px 5px 10px;
}
.cq-conn-badge-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
  animation: cqDotPulse 2s ease-in-out infinite;
}
.cq-conn-badge-txt { font-size: 12px; font-weight: 600; color: var(--ok); }

.cq-conn-title { font-size: 22px; font-weight: 800; color: var(--tx); letter-spacing: -.03em; }
.cq-conn-sub   { font-size: 13px; color: var(--tx-m); text-align: center; line-height: 1.55; margin: 0; }
.cq-conn-dots  { display:flex; gap: 5px; }
.cq-conn-dots span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ok);
  animation: cqDot 1.3s ease-in-out infinite;
}
.cq-conn-dots span:nth-child(2){animation-delay:.2s;}
.cq-conn-dots span:nth-child(3){animation-delay:.4s;}
@keyframes cqDot{0%,80%,100%{opacity:.2;transform:scale(.6)}40%{opacity:1;transform:scale(1)}}

.cq-no-phone {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  text-align:center; color:var(--tx-s); font-size:13px; line-height:1.55;
  position:relative; z-index:1;
}

/* ── Painel direito ── */
.cq-page-right {
  display: flex; flex-direction: column;
  overflow: hidden; border-left: 1px solid var(--bd);
}

.cq-search-row  { padding: 16px 20px; border-bottom: 1px solid var(--bd); flex-shrink: 0; }
.cq-search-wrap { position: relative; display: flex; align-items: center; }
.cq-search-icon { position: absolute; left: 13px; color: var(--tx-s); pointer-events: none; }
.cq-input {
  padding-left: 40px !important; padding-right: 36px !important;
  width: 100%; height: 46px;
  border-radius: 12px !important; font-size: 14px !important;
  border: 1.5px solid var(--bd) !important;
  transition: border-color .15s, box-shadow .15s !important;
  background: var(--bg) !important;
}
.cq-input:focus {
  border-color: var(--gl) !important;
  box-shadow: 0 0 0 3px var(--gl-glow-s) !important;
  outline: none !important; background: #fff !important;
}
.cq-clear-btn {
  position: absolute; right: 10px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--bd); border: none; color: var(--tx-s); font-size: 10px; cursor: pointer;
  display: none; align-items: center; justify-content: center; transition: background .13s;
}
.cq-clear-btn:hover { background: var(--gl-bd); }

/* Resultados */
.cq-search-results { overflow-y: auto; flex: 1; }
.cq-rr {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 20px; cursor: pointer;
  transition: background .1s; border-bottom: 1px solid var(--bd);
}
.cq-rr:hover { background: var(--gl-lt); }
.cq-rr-em   { font-size: 24px; width: 36px; text-align: center; flex-shrink: 0; }
.cq-rr-info { flex: 1; min-width: 0; }
.cq-rr-nm   { font-size: 14px; font-weight: 500; color: var(--tx); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cq-rr-pr   { font-size: 12.5px; color: var(--tx-m); margin-top: 2px; }
.cq-rr-st   { font-size: 12.5px; font-weight: 600; color: var(--ok); white-space: nowrap; }
.cq-rr-st.low  { color: #D97706; }
.cq-rr-st.zero { color: var(--err); }
.cq-no-results { padding: 32px 20px; text-align: center; font-size: 13.5px; color: var(--tx-s); }

/* Card produto */
.cq-product-card { padding: 16px 20px; overflow-y: auto; flex: 1; animation: cqFadeUp .3s cubic-bezier(.22,1,.36,1) both; }
@keyframes cqFadeUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }

/* ── Card produto v2 ── */
.cq-v2 { border: 1.5px solid var(--bd); border-radius: 16px; overflow: hidden; }

/* Hero */
.cq-v2-hero {
  display: flex; gap: 18px; padding: 20px;
  background: linear-gradient(160deg,#F8FAFC 0%,#fff 100%);
  border-bottom: 1px solid var(--bd);
}
.cq-v2-img { width: 80px; height: 80px; border-radius: 12px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--bd); }
.cq-v2-em  { width: 80px; height: 80px; border-radius: 12px; background: var(--gl-lt); border: 1px solid var(--gl-bd); display: flex; align-items: center; justify-content: center; font-size: 36px; flex-shrink: 0; }
.cq-v2-hero-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cq-v2-badges { display: flex; gap: 5px; flex-wrap: wrap; }
.cq-badge { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 20px; }
.cq-bdg-sale { background: #FEF3C7; color: #92400E; }
.cq-bdg-new  { background: #DCFCE7; color: #166534; }
.cq-bdg-out  { background: #FEE2E2; color: #991B1B; }
.cq-bdg-low  { background: #FEF3C7; color: #92400E; }
.cq-v2-name  { font-size: 18px; font-weight: 700; color: var(--tx); letter-spacing: -.02em; line-height: 1.2; }
.cq-v2-cat   { font-size: 12px; color: var(--tx-s); font-weight: 500; }
.cq-v2-price-row { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.cq-v2-price { font-size: 26px; font-weight: 800; color: var(--tx); letter-spacing: -.03em; }
.cq-v2-price-old { font-size: 13px; color: var(--tx-s); text-decoration: line-through; }
.cq-v2-disc  { font-size: 11px; font-weight: 700; background: #DCFCE7; color: #166534; padding: 2px 6px; border-radius: 20px; }
.cq-v2-savings { font-size: 12px; color: #16A34A; font-weight: 500; }

/* Grade */
.cq-v2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-bottom: 1px solid var(--bd); }
.cq-v2-block {
  padding: 16px 20px; border-right: 1px solid var(--bd); border-bottom: 1px solid var(--bd);
}
.cq-v2-block:nth-child(even) { border-right: none; }
.cq-v2-block:last-child, .cq-v2-block:nth-last-child(2):nth-child(odd) { border-bottom: none; }
.cq-v2-block-label { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-s); margin-bottom: 10px; }

/* Estoque */
.cq-v2-stock-bar-bg { height: 6px; background: var(--bd); border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.cq-v2-stock-bar    { height: 100%; border-radius: 3px; transition: width .4s; }
.cq-v2-stock-txt    { font-size: 13px; }

/* Tabela de preços */
.cq-v2-price-table { display: flex; flex-direction: column; gap: 5px; }
.cq-v2-pt-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--tx); }
.cq-v2-pt-row span:last-child { font-weight: 600; }
.cq-v2-pt-promo span { color: #16A34A; }

/* Stats de vendas */
.cq-v2-stat-row { display: flex; gap: 12px; }
.cq-v2-stat     { flex: 1; }
.cq-v2-stat-val { font-size: 15px; font-weight: 700; color: var(--tx); }
.cq-v2-stat-lbl { font-size: 10px; color: var(--tx-s); margin-top: 2px; }

/* Código de barras */
.cq-v2-bc { font-family: monospace; font-size: 14px; font-weight: 600; letter-spacing: .12em; color: var(--tx); }

/* Seções extras */
.cq-v2-section { padding: 16px 20px; border-bottom: 1px solid var(--bd); }
.cq-v2-desc { font-size: 13.5px; color: var(--tx-m); line-height: 1.65; margin: 0; }
.cq-v2-feats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }

/* Ações */
.cq-v2-actions { display: flex; gap: 10px; padding: 16px 20px; background: #FAFBFC; }

.cq-prod { border: 1.5px solid var(--bd); border-radius: 18px; overflow: hidden; }
.cq-prod-top {
  display: flex; gap: 16px; padding: 20px;
  border-bottom: 1px solid var(--bd);
  background: linear-gradient(180deg, #FAFBFC 0%, #fff 100%);
}
.cq-pi-img {
  width: 84px; height: 84px; border-radius: 14px;
  object-fit: cover; flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,.10);
}
.cq-pi-em {
  width: 84px; height: 84px; border-radius: 14px; flex-shrink: 0;
  background: var(--gl-lt); font-size: 38px;
  display: flex; align-items: center; justify-content: center;
}
.cq-prod-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cq-prod-nm   { font-size: 18px; font-weight: 700; color: var(--tx); line-height: 1.2; letter-spacing: -.02em; }
.cq-prod-cat  {
  font-size: 11.5px; color: var(--tx-s);
  background: var(--bg); border: 1px solid var(--bd);
  padding: 2px 10px; border-radius: 20px; width: fit-content;
}
.cq-prod-price { display: flex; align-items: baseline; gap: 9px; }
.cq-price-val  { font-size: 26px; font-weight: 800; color: var(--tx); letter-spacing: -.03em; }
.cq-price-old  { font-size: 13px; color: var(--tx-s); text-decoration: line-through; }
.cq-prod-stock { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; }
.cq-prod-bc    { font-size: 11px; color: var(--tx-s); font-family: monospace; letter-spacing: .04em; }
.cq-prod-desc  {
  padding: 14px 20px; font-size: 13.5px; color: var(--tx-m);
  line-height: 1.65; border-bottom: 1px solid var(--bd); margin: 0;
}
.cq-prod-feats { display:flex; flex-wrap:wrap; gap:6px; padding:14px 20px; border-bottom:1px solid var(--bd); }
.cq-feat {
  font-size: 12px; padding: 3px 12px;
  background: var(--gl-lt); color: var(--gl);
  border: 1px solid var(--gl-bd);
  border-radius: 20px; font-weight: 500;
}
.cq-prod-actions {
  display: flex; gap: 10px; padding: 16px 20px;
  background: #FAFBFC; border-top: 1px solid var(--bd);
}
.cq-act-btn { flex: 1; justify-content: center; gap: 7px; font-size: 14px; height: 44px; }

/* Placeholder */
.cq-placeholder {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px; padding: 48px 24px;
  color: var(--tx-s); text-align: center;
}
.cq-placeholder svg { opacity: .2; color: var(--gl); }
.cq-placeholder p   { font-size: 14px; line-height: 1.6; margin: 0; }

/* ── Mobile ── */
@media (max-width:768px) {
  .cq-page-layout {
    grid-template-columns: 1fr;
    height: auto; min-height: 80vh;
    border-radius: 0; border-left: none; border-right: none;
  }
  .cq-page-left {
    padding: 0; min-height: 0;
    background: #000;
    border-bottom: 1px solid var(--bd);
    align-items: stretch; justify-content: flex-start;
    height: 240px;
  }
  .cq-page-left::before, .cq-page-left::after { display: none; }
  .cq-camera-wrap {
    position: relative !important;
    inset: auto !important;
    width: 100%; height: 100%;
  }
  .cq-qr-wrap-page { flex-direction: row; padding: 16px; gap: 14px; align-items: center; }
  .cq-qr-card { padding: 12px; }
  #cq-qr-canvas, #cq-qr-img { width: 140px; height: 140px; }
  .cq-qr-caption { text-align: left; }
  .cq-qr-caption-title { font-size: 15px; }
  .cq-phone-status { justify-content: flex-start; }
  .cq-prod-actions { flex-direction: column; }
  .cq-price-val { font-size: 22px; }
}

/* ── Filter Drawer ─────────────────────────────────── */
.filter-backdrop {
  position: fixed; inset: 0; z-index: 498;
  background: rgba(15,23,42,.18);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .26s ease, visibility 0s .26s;
}
.filter-backdrop.on {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .26s ease;
}
.filter-drawer {
  position: fixed; top: 0; right: -440px; bottom: 0;
  width: 400px; z-index: 499;
  background: #fff;
  border-radius: 20px 0 0 20px;
  box-shadow: -8px 0 48px rgba(0,0,0,.12);
  display: flex; flex-direction: column;
  transition: right .3s cubic-bezier(.16,1,.3,1);
  overflow: hidden;
}
.filter-drawer.open { right: 0; }
.filter-drawer-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  flex-shrink: 0;
}
.filter-drawer-hd h3 {
  font-size: 16px; font-weight: 700;
  color: var(--tx); letter-spacing: -.02em; margin: 0;
}
.filter-drawer-close {
  width: 32px; height: 32px; border-radius: 9px;
  background: #F8FAFC; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--tx-m); font-size: 14px;
  transition: background .13s, color .13s;
}
.filter-drawer-close:hover { background: var(--bd); color: var(--tx); }
.filter-drawer-body {
  flex: 1; overflow-y: auto; padding: 24px;
  scrollbar-width: thin;
}
.filter-drawer-ft {
  padding: 16px 24px 24px;
  border-top: 1px solid rgba(0,0,0,.06);
  display: flex; gap: 10px;
  flex-shrink: 0;
}

/* ── Central de notificações ─────────────────────── */
.notif-list { padding: 12px; }
.notif-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 12px; border-radius: 12px;
  cursor: pointer; position: relative;
  transition: background .13s;
}
.notif-item:hover { background: var(--bg); }
.notif-item.unread { background: var(--gl-lt); }
.notif-item.unread:hover { background: var(--gl-bd); }
.notif-item.unread::before {
  content: ''; position: absolute; left: 4px; top: 18px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gl);
}
.notif-icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; background: var(--bg);
}
.notif-icon-stock   { background: #FFF7ED; }
.notif-icon-fiado   { background: #FEF2F2; }
.notif-icon-order   { background: var(--gl-lt); }
.notif-icon-solic   { background: #F5F3FF; }
.notif-icon-extrato { background: #FFF0EE; }
.notif-body  { flex: 1; min-width: 0; }
.notif-title { font-size: 13px; font-weight: 700; color: var(--tx); letter-spacing: -.01em; }
.notif-msg   { font-size: 12px; color: var(--tx-m); margin-top: 2px; }
.notif-time  { font-size: 11px; color: var(--tx-s); margin-top: 6px; }
.notif-dismiss {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 6px;
  border: none; background: transparent; color: var(--tx-s);
  font-size: 11px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .13s, color .13s;
}
.notif-dismiss:hover { background: var(--bd); color: var(--tx); }
.notif-empty {
  text-align: center; color: var(--tx-m); font-size: 13px;
  padding: 60px 20px; line-height: 1.7;
}
.notif-empty-icon { display: block; font-size: 28px; margin-bottom: 8px; }
.fd-section { margin-bottom: 22px; }
.fd-label {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--tx-s); margin-bottom: 10px; display: block;
}
.fd-row { display: flex; gap: 10px; margin-bottom: 10px; }
.fd-row .input-field { flex: 1; }

/* Filter button in page header */
.btn-filter {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; color: var(--tx-m);
  border: 1.5px solid var(--bd);
  border-radius: var(--r-btn);
  font-size: 13px; font-weight: 500;
  font-family: 'Inter', sans-serif;
  padding: 8px 14px; cursor: pointer;
  transition: all .14s;
}
.btn-filter:hover { border-color: var(--gl); color: var(--gl); background: var(--gl-lt); }
.btn-filter.active { border-color: var(--gl); color: var(--gl); background: var(--gl-lt); }
.filter-count {
  background: var(--gl); color: #fff;
  font-size: 10px; font-weight: 700;
  width: 17px; height: 17px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ── Responsive 768px ──────────────────────────────── */
@media (max-width: 768px) {
  /* ── Tokens — Shorti Mobile Design System (navy) ──── */
  :root {
    --gl:      #2563EB;
    --gl-hov:  #1D4ED8;
    --gl-lt:   #EFF6FF;
    --gl-bd:   #BFDBFE;

    --blue:    #2563EB; --blue-lt: #EFF6FF; --blue-bg: #DBEAFE;

    --tx:   #0F172A;
    --tx-m: #64748B;
    --bd:   #E2E8F0;
    --bg:   #FFFFFF;

    --err: #EF4444; --err-lt: #FEF2F2;
    --warn: #EA580C; --warn-lt: #FFF7ED;
  }

  /* ── Sidebar: drawer oculto, abre com hamburger ── */
  .erp-sidebar {
    position: fixed;
    left: 0; top: 0 !important; bottom: 0 !important;
    z-index: 999;
    width: 240px !important;
    border-radius: 0 !important;
    overflow-y: auto; overflow-x: hidden;
    /* transform em vez de left = GPU composited, sem relayout */
    transform: translateX(-100%);
    transition: transform .22s cubic-bezier(.16,1,.3,1) !important;
    will-change: transform;
    box-shadow: none;
  }
  .erp-sidebar.open {
    transform: translateX(0) !important;
    box-shadow: 8px 0 40px rgba(0,0,0,.15);
  }
  /* No mobile o sidebar sempre está expandido (240px) — remover delays de opacity dos filhos */
  .erp-sidebar .erp-logo-text,
  .erp-sidebar .erp-workspace,
  .erp-sidebar .nl-text,
  .erp-sidebar .user-name,
  .erp-sidebar .user-role,
  .erp-sidebar .logout-btn {
    opacity: 1 !important;
    transition: none !important;
  }

  /* ── Main: full width, sem margem lateral ── */
  .erp-main {
    margin-left: 0 !important; width: 100% !important;
    background-color: var(--bg);
    background-image:
      radial-gradient(480px 360px at 85% -5%, rgba(74,127,165,.12), transparent 60%),
      radial-gradient(420px 320px at 8% 8%, rgba(127,179,211,.10), transparent 55%);
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
  .erp-sidebar:hover + .erp-main { margin-left: 0 !important; width: 100% !important; }

  /* ── Topbar — escondida no mobile (tabs já indicam a página) ── */
  .erp-topbar    { display: none; }

  /* ── Header mobile — azul marca ── */
  .erp-mob-header {
    position: relative; overflow: hidden;
    background: linear-gradient(170deg, #1a2a6c 0%, #1d4ed8 55%, #2563eb 100%);
    padding: 20px 20px 40px;
    padding-top: max(20px, env(safe-area-inset-top));
    border-radius: 0 0 28px 28px;
    z-index: 10;
  }
  .emh-arch { display: none; }
  .emh-glow { display: none; }

  .emh-topbar { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; }
  .emh-id  { display: flex; align-items: center; gap: 9px; }
  .emh-logo-img { display: block; flex-shrink: 0; }
  .emh-name { font-size: 16px; font-weight: 900; letter-spacing: -.04em; color: #fff; line-height: 1; }
  .emh-name b { color: #818CF8; }

  .emh-bell {
    position: relative; width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none;
    color: rgba(255,255,255,.75); cursor: pointer; padding: 0;
  }
  .emh-bell:active { color: #fff; }
  .emh-bell-dot {
    display: none;
    position: absolute; top: 6px; right: 7px;
    width: 8px; height: 8px; border-radius: 50%;
    background: #F97316; border: 1.5px solid #1d4ed8;
  }
  .emh-bell-dot.on { display: block; }

.emh-greet { position: relative; z-index: 1; margin-top: 22px; }
  .emh-greet-ctx {
    font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(255,255,255,.35); margin: 0 0 5px;
  }
  .emh-greet-name { font-size: 26px; font-weight: 900; letter-spacing: -.035em; color: #fff; margin: 0; line-height: 1.1; }

  /* ── Faixa compacta — todas as telas exceto Dashboard ── */
  .erp-mob-header:not(.is-dash) { padding-bottom: 20px; }
  .erp-mob-header:not(.is-dash) .emh-greet { display: none; }
  .emh-greet-name b { color: #93C5FD; }

  /* ── Content — card branco que aparece atrás do header ── */
  .erp-content {
    padding: 36px 14px 88px;
    max-width: 100%;
    background: #fff;
    border-radius: 24px 24px 0 0;
    margin-top: -24px;
    position: relative; z-index: 1;
    box-shadow: 0 -6px 24px rgba(0,0,0,.13);
  }

  /* ── Page header ── */
  .page-header           { flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
  .page-header h2        { font-size: 19px; }
  .page-header > div:last-child,
  .page-header > button  { width: 100%; }
  .page-header > div:last-child .btn { flex: 1; justify-content: center; }

  /* ── Dashboard: saudação migrou para o header navy ── */
  .dash-greeting         { display: none; }
  .dashboard-grid        { grid-template-columns: repeat(2,1fr) !important; gap: 10px !important; margin-bottom: 14px !important; }

  /* ── Cards KPI — Shorti Mobile Design System ── */
  .mc {
    padding: 14px !important;
    border: 0.5px solid var(--bd) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
  }
  .mc-blue, .mc-green, .mc-violet, .mc-orange { background: #fff !important; }
  .mc-label {
    font-size: 11px !important; font-weight: 700 !important;
    text-transform: uppercase; letter-spacing: .10em;
  }
  .mc-value { font-size: 20px !important; font-weight: 900 !important; }
  .mc-icon  { width: 28px !important; height: 28px !important; border-radius: 8px !important; }
  .mc-trend { font-weight: 800 !important; border-radius: 6px !important; padding: 3px 8px !important; }
  .dash-main-row         { grid-template-columns: 1fr !important; gap: 12px !important; }
  .card-grid-wide        { grid-template-columns: minmax(0,1fr) !important; gap: 10px !important; }
  /* .chart-card removido — gráficos agora visíveis no mobile via data-card */
  #ep-relatorios .chart-shell { height: 160px !important; }
  .finance-grid          { grid-template-columns: repeat(2,1fr) !important; }
  .dash-activity         { padding: 16px 14px; }

  /* ── Grids e forms ── */
  .nv-grid     { grid-template-columns: 1fr !important; }
  .form-grid   { grid-template-columns: 1fr !important; gap: 10px !important; }
  .form-grid .full { grid-column: 1 !important; }

  /* ── Tabelas ── */
  .table-shell { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-shell table { min-width: 500px; }
  .table-controls { flex-wrap: wrap; gap: 8px; }
  .table-controls .input-field { flex: 1; min-width: 0; }

  /* ── Estoque ── */
  .est-filters     { flex-direction: column; align-items: stretch; gap: 8px; }
  .est-search-row  { display: flex; align-items: center; gap: 8px; }
  .est-search-row #est-busca { flex: 1; width: auto !important; }
  .est-chips-row   { border-left: none !important; padding-left: 0 !important; }
  .est-row       { padding: 10px 12px; gap: 10px; }
  .est-row-meta  { display: none; }
  .est-qty-badge { font-size: 11px; }
  .prod-picker   { grid-template-columns: repeat(2,1fr) !important; max-height: 190px; }

  /* ── Pagamentos / chips ── */
  .pay-chip  { flex: 1; text-align: center; font-size: 12px; padding: 8px 6px; }
  .hv-filters { display: flex; flex-direction: column; gap: 8px; }

  /* ── Extrato ── */
  .ext-kpis        { grid-template-columns: repeat(2,1fr); }
  .ext-kpi         { border-right: none; border-bottom: 1px solid var(--bd); }
  .ext-kpi:nth-child(odd)  { border-right: 1px solid var(--bd); }
  .ext-kpi:nth-last-child(-n+2) { border-bottom: none; }
  .ext-topbar      { flex-direction: column; align-items: flex-start; gap: 8px; }
  .ext-doc-hd      { flex-direction: column; gap: 10px; }
  .ext-footer      { flex-direction: column; align-items: flex-start; gap: 8px; }
  .ext-footer-right{ flex-direction: column; gap: 2px; }

  /* ── Cards ── */
  .summary-card, .data-card {
    border: 0.5px solid var(--bd) !important;
    border-radius: 14px !important;
  }
  .summary-card  { padding: 14px 12px; }
  .summary-value { font-size: 20px !important; }
  .data-card     { padding: 14px; }

  /* ── Card de seção: link de ação no header ── */
  .card-header .btn-mini.btn-outline {
    border: none; background: none; padding: 0;
    font-size: 11px; font-weight: 700; color: var(--gl);
    text-transform: uppercase; letter-spacing: .04em;
  }

  /* ── Modal produto — wizard mobile ── */
  .mp-wide  { max-width: 100% !important; }
  .mp-left  { display: none !important; }
  /* Perfil de cliente mobile */
  .mcp-wide { max-width: 100% !important; }
  .mcp-hero { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 16px 14px; }
  .mcp-hero-stats { display: grid !important; grid-template-columns: repeat(4,1fr); width: 100%; gap: 6px; }
  .mcp-stat { padding: 8px 10px !important; min-width: 0 !important; }
  .mcp-stat-val { font-size: 13px !important; }
  .mcp-body { grid-template-columns: 1fr !important; }
  .mcp-sidebar { border-right: none !important; border-bottom: 1px solid var(--bd); padding: 14px 16px !important; }
  .mcp-hist-row { grid-template-columns: 64px 1fr auto 60px !important; }
  .mcp-hist-pag { display: none; }
  .mp-body  { grid-template-columns: 1fr !important; max-height: none !important; }
  .mp-right { overscroll-behavior: contain; }

  /* Modal-box vira flex column; body rola internamente */
  #mp .modal-box {
    display: flex !important;
    flex-direction: column !important;
    max-height: min(96svh, 96vh) !important;
    overflow: hidden !important;
  }
  #mp .mp-body  { flex: 1 !important; overflow-y: auto !important; overflow-x: hidden !important; }
  #mp .mp-right { overflow: visible; }

  /* Campos extras do mobile */
  .mp-mob-field { display: block !important; }

  /* Wizard: só etapa ativa visível */
  .mp-step-panel            { display: none !important; }
  .mp-step-panel.mp-step-on { display: block !important; }
  .mp-step-panel .mp-section-hd { display: none; }

  /* Progress dots */
  .mp-wiz-progress {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px 14px;
    flex-shrink: 0;
  }
  .mp-wiz-label { font-size: 13px; font-weight: 600; color: var(--tx-s); }
  .mp-wiz-dots  { display: flex; gap: 6px; align-items: center; }
  .mp-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #E5E7EB;
    transition: background .25s, width .25s, border-radius .25s;
    flex-shrink: 0;
  }
  .mp-dot.active { width: 22px; border-radius: 4px; background: var(--gl); }
  .mp-dot.done   { background: var(--green); }

  /* Scanner inline na busca */
  .est-scn-mob, .est-add-mob {
    display: flex !important; flex-shrink: 0;
    width: 44px; height: 44px; padding: 0 !important;
    align-items: center; justify-content: center;
    border-radius: 11px;
    animation: none !important;
    box-shadow: none !important;
  }
  .est-scn-mob {
    background: #F1F5F9 !important;
    border: 1px solid #E2E8F0 !important;
    color: var(--tx-m) !important;
  }
  .est-add-mob {
    background: var(--blue) !important;
    border: none !important;
  }
  .est-add-desk { display: none !important; }

  /* Grid preços — 1 coluna no mobile */
  .mp-price-grid { grid-template-columns: 1fr !important; }

  /* Footers */
  .mp-desk-ft { display: none !important; }
  .mp-wiz-ft  {
    display: flex !important;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--bd);
    background: #fff;
    flex-shrink: 0;
  }
  .mp-wiz-ft .btn { flex: 1; justify-content: center; padding: 13px !important; font-size: 14px !important; }

  /* ── Modais genéricos — bottom sheet ── */
  .modal        { padding: 0 !important; align-items: flex-end !important; }
  .modal-box    {
    border-radius: 22px 22px 0 0 !important;
    max-height: min(94svh, 94vh) !important;
    max-width: 100% !important;
    width: 100% !important;
    transform: translateY(44px) !important;
    opacity: 0;
  }
  .modal.on .modal-box {
    transform: translateY(0) !important;
    opacity: 1;
  }

  /* Drag handle: posicionado absoluto para não quebrar o flex do header */
  .modal-header {
    border-radius: 22px 22px 0 0 !important;
    padding-top: 28px !important;    /* espaço para o handle */
    position: relative !important;  /* contexto para ::before */
  }
  .modal-header::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px; height: 4px;
    background: #CBD5E1;
    border-radius: 2px;
  }

  /* Ações dos modais — empilhadas, touch-friendly */
  .modal-actions {
    position: static !important; /* evita sobrepor o conteúdo do form (sticky cortava campos finais) */
    flex-direction: column-reverse !important;
    gap: 10px !important;
    padding: 14px 16px max(20px, env(safe-area-inset-bottom)) !important;
  }
  .modal-actions .btn {
    width: 100% !important;
    padding: 14px !important;
    text-align: center !important;
    font-size: 15px !important;
    justify-content: center !important;
    border-radius: 12px !important;
  }

  /* Form grid e inputs nos modais */
  .modal .form-grid { padding: 12px 16px !important; gap: 12px !important; }
  .modal .input-field { padding: 12px 12px !important; font-size: 15px !important; }

  /* Padding inline do modal Nova Venda */
  #mv .modal-box [style*="22px"] { padding-left: 16px !important; padding-right: 16px !important; }
  .parc-section { padding: 0 !important; }
  .parc-section .fl-lbl { padding: 4px 16px 6px !important; display: block; }
  .parc-section .pay-chips { padding: 0 16px 8px !important; }

  /* Confirmação modal */
  #mconf .modal-actions { flex-direction: row !important; }
  #mconf .modal-actions .btn { padding: 13px !important; font-size: 14px !important; border-radius: 10px !important; }

  /* Modal Nova Venda — margens laterais */
  .mv-prod-info  { margin-left: 16px !important; margin-right: 16px !important; }
  .modal-summary { margin-left: 16px !important; margin-right: 16px !important; }
  .modal-section-label { padding-left: 16px !important; padding-right: 16px !important; }

  /* Cupom — ações no rodapé */
  .cupom-actions-bar { position: static; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 16px max(16px, env(safe-area-inset-bottom)); }
  .cupom-btn { width: 100%; height: auto !important; padding: 13px 16px !important; font-size: 14px !important; border-radius: 12px; }
  .cupom-btn-main { font-size: 15px !important; }

  /* Métricas de estoque */
  #estq-mc { padding: 14px 16px 20px !important; }

  /* Editar pedido / solicitação — max-width inline não afeta mobile */
  #med .modal-box, #msolic .modal-box { max-width: 100% !important; }

  /* ── GrupoLima badge: esconder no mobile (tab bar ocupa o espaço) ── */
  .gl-badge { display: none !important; }

  /* ── Scanner: full screen ── */
  #mscanner { align-items: stretch !important; background: #0A0A0F !important; }
  .scn-wrap  { max-width: 100% !important; max-height: 100svh; border-radius: 0 !important; box-shadow: none !important; min-height: 100svh; }
  .scn-camera-wrap { aspect-ratio: 3/4; }

  /* ── Bottom tab bar ── */
  .mob-tabs {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 200;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--bd);
    padding: 6px 0;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
    align-items: flex-end;
  }

  .mob-tab {
    position: relative;
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    background: none; border: none; cursor: pointer;
    padding: 6px 4px 2px;
    color: var(--tx-s);
    font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    font-family: 'Inter', sans-serif;
    transition: color .13s;
  }
  .mob-tab svg { width: 22px; height: 22px; }
  .mob-tab.on  { color: var(--gl); }
  .mob-tab.on svg { stroke: var(--gl); }
  /* Indicador-ponto da tab ativa */
  .mob-tab.on::before {
    content: ''; position: absolute; top: -2px; left: 50%; transform: translateX(-50%);
    width: 4px; height: 4px; border-radius: 50%; background: var(--gl);
  }
  .mob-tab-fab.on::before { display: none; }

  /* FAB central */
  .mob-tab-fab { gap: 2px; }
  .mob-fab-btn {
    position: relative;
    width: 50px; height: 50px; border-radius: 50%;
    background: var(--gl); color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(30,58,95,.35);
    margin-bottom: 2px; margin-top: -12px;
    flex-shrink: 0;
    transition: transform .13s, box-shadow .13s;
  }
  /* Anel externo */
  .mob-fab-btn::after {
    content: ''; position: absolute; inset: -3px; border-radius: 50%;
    border: 2px solid var(--gl-lt);
  }
  .mob-tab-fab:active .mob-fab-btn { transform: scale(.94); box-shadow: 0 2px 8px rgba(30,58,95,.3); }
  .mob-tab-fab svg { display: none; }
  .mob-fab-btn svg { width: 22px; height: 22px; display: block; stroke: #fff !important; }
  /* Quando ativo, o ícone do FAB permanece branco (não herda o azul do .on) */
  .mob-tab-fab.on .mob-fab-btn { background: var(--gl-hov); }
  .mob-tab-fab.on .mob-fab-btn svg { stroke: #fff !important; }

  /* ── Estoque mobile: esconde Consultar produto ── */
  .erp-actions button[onclick="openCQ()"] { display: none; }
  .tb-sep, .tb-usr-wrap { display: none; }

  /* Sidebar oculta no mobile por padrão — tabs fazem a nav */
  .erp-hamburger { display: none !important; }

  /* ── helpers mobile ── */
  .mob-hide  { display: none !important; }
  .mob-only  { display: block !important; }
  .sidebar-logout { display: flex; }

  /* ── Badge "CONTA DE TESTES": ícone compacto, sem cobrir conteúdo ── */
  #local-mode-badge {
    bottom: 78px; right: 10px;
    width: 34px; height: 34px; padding: 0 !important;
    border-radius: 50% !important;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px !important;
  }
  #local-mode-badge .lmb-txt { display: none; }

  /* Esconder no mobile: colunas da sidebar menos usadas, extrato, relatórios, config loja */
  .nav-link[onclick*="extrato"],
  .nav-link[onclick*="relatorios"],
  .nav-link[onclick*="loja"],
  .nav-link[onclick*="catalogo"],
  .nav-link[onclick*="financeiro"],
  .nav-link[onclick*="historico"] { opacity: .65; }

  /* Esconder na sidebar mobile grupos muito secundários */
  /* Mantemos tudo acessível no sidebar, só as tabs são o atalho */

  /* ── Simplificar dashboard mobile ── */
  .dash-main-row { display: flex; flex-direction: column; gap: 12px; }

  /* ── Estoque mobile limpo ── */

  /* Header: título + botão "+ Produto" compactos */
  #ep-estoque .page-header { padding: 12px 16px 10px; gap: 10px; }
  #ep-estoque .page-header h2 { font-size: 17px; }
  #ep-estoque .page-header p.page-subtitle { display: none; }
  #ep-estoque .page-header button[onclick="showEstMetrics()"] { display: none; }
  #ep-estoque .page-header button[title="Escanear código de barras"] { display: none; }
  #ep-estoque .page-header button[onclick="openMod('mp')"] { font-size: 13px; padding: 7px 14px; }

  /* Filtros: busca + scan inline, chips de categoria/status com rolagem horizontal */
  .est-chips-row { display: none; }
  #ep-estoque .est-filters { padding: 10px 0 12px; gap: 8px; background: #fff; border-bottom: 1px solid var(--bd); }
  #ep-estoque .est-search-row { gap: 8px; padding: 0 14px; }
  #ep-estoque .est-chips-row.est-chips-combined {
    display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; gap: 6px; padding: 0 14px;
    width: 100%; max-width: 100%;
  }
  #ep-estoque .est-chips-row.est-chips-combined::-webkit-scrollbar { display: none; }
  #ep-estoque .est-chips-row.est-chips-combined .hv-chip { flex-shrink: 0; white-space: nowrap; }
  #ep-estoque .est-chips-sep { flex-shrink: 0; }

  /* Lista de produtos visível por padrão; resumo recolhe durante a busca */
  #ep-estoque.est-search-active .est-summary { display: none !important; }

  /* ── Resumo do estoque (cards no topo) ── */
  .est-summary    { padding: 12px 16px; }
  .est-stat-row   { display: flex; gap: 8px; margin-bottom: 10px; }
  .est-stat       { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--bd); border-radius: 14px; padding: 10px 8px; text-align: center; }
  .est-stat-val   { font-size: 18px; font-weight: 700; color: var(--tx); letter-spacing: -.02em; }
  .est-stat-val.est-stat-money { font-size: 13px; }
  .est-stat-lbl   { font-size: 11px; color: var(--tx-m); margin-top: 2px; }
  .est-alert-card { background: #fff; border: 1px solid var(--bd); border-radius: 14px; padding: 12px 14px; margin-bottom: 4px; }
  .est-alert-hd   { font-size: 12px; font-weight: 700; color: #B45309; margin-bottom: 6px; }
  .est-alert-card .stock-item { cursor: pointer; }
  .est-alert-ok   { text-align: center; font-size: 13px; color: var(--green); font-weight: 500; padding: 14px; }

  #est-list { padding: 12px 16px 16px; }

  /* ── Central de notificações: bottom sheet no mobile ── */
  .notif-drawer {
    top: auto !important;
    bottom: -100% !important;
    right: 0 !important; left: 0 !important;
    width: 100% !important;
    max-height: 82svh;
    border-radius: 22px 22px 0 0 !important;
    transition: bottom .3s cubic-bezier(.16,1,.3,1) !important;
    box-shadow: 0 -8px 40px rgba(0,0,0,.16) !important;
  }
  .notif-drawer.open { bottom: 0 !important; }

  /* Catálogo mobile: esconder lista de produtos e mostrar aviso para usar o modal */
  #ep-catalogo .card.data-card { display: none; }
  #ep-catalogo .catalog-mobile-message { display: block; padding: 18px 16px; border-radius: 16px; background: #F8FAFC; color: #334155; font-size: 14px; line-height: 1.6; }

  /* Histórico: esconder no mobile, acesso pelo "Mais" */
  /* (usuário pediu pra focar em venda/estoque/solicita) */

  /* Solicitações: simplificar tabela */
  /* Solicitações: colunas menos importantes somem no mobile */
  #stt tr td:nth-child(4),
  #stt tr th:nth-child(4),
  #stt tr td:nth-child(5),
  #stt tr th:nth-child(5) { display: none; }

  /* Nova Venda: coluna direita some (histórico hoje) */
  .nv-grid article:last-child { display: none; }

  /* mp-left hidden on mobile — wizard inline handles emoji/img */

  .modal-section-label { padding: 10px 16px 2px !important; }

  /* ══ NOVA VENDA WIZARD — mobile ══════════════════════ */

  /* Step indicator compacto */
  .nv-wizard-hd {
    max-width: 100%;
    margin-bottom: 4px;
    justify-content: center;
    gap: 6px;
  }
  .nv-step-ind   { gap: 4px; }
  .nv-step-ind span { display: none; }
  .nv-step-num   { width: 28px; height: 28px; font-size: 12px; }
  .nv-step-ind.active .nv-step-num { box-shadow: 0 0 0 4px var(--gl-lt); }
  .nv-step-line  { flex: 0; width: 28px; margin: 0 2px; }

  .nv-step-label {
    display: block;
    text-align: center;
    font-size: 13px; font-weight: 700; color: var(--tx);
    margin: 8px 0 16px;
  }

  /* Panels e cards */
  .nv-panel.on   { display: block; }
  .nv-wizard-card { max-width: 100% !important; padding: 16px !important; }
  .nv-panel-title { font-size: 15px; margin-bottom: 14px; }

  /* Footer dos painéis */
  .nv-panel-ft {
    flex-direction: column-reverse;
    gap: 8px;
    padding-top: 14px;
    margin-top: 14px;
  }
  .nv-panel-ft .btn { width: 100% !important; justify-content: center; padding: 13px !important; font-size: 14px !important; }

  /* Client picker */
  .cli-picker  { max-height: 260px; }
  .cli-row     { padding: 10px; }
  .cli-ava     { width: 34px; height: 34px; }

  /* Product picker no wizard */
  #prod-picker { grid-template-columns: repeat(2,1fr) !important; max-height: 200px; }
  .pp-card     { padding: 8px 6px; }
  .pp-thumb    { width: 36px !important; height: 36px !important; font-size: 18px !important; }
  .pp-nm       { font-size: 11px !important; }
  .pp-pr       { font-size: 11px !important; }

  /* Preview de produto selecionado — quebra em 2 linhas no mobile */
  #vprev {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  #vprev .vprev-actions { flex: 1 1 100%; }
  #vprev .qty-ctrl { flex-shrink: 0; }
  #vprev .vprev-actions .btn { flex: 1; justify-content: center; }

  /* Etapa 2: carrinho abaixo dos produtos, sem sticky */
  .nv-s2-grid {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .nv-s2-cart {
    position: relative !important; top: auto !important;
    width: auto;
    margin-left: -14px; margin-right: -14px;
    border-radius: 0;
    box-shadow: none;
    border-top: 1px solid var(--bd);
  }
  .nv-s2-cart::before { display: none; }

  /* Step 3: empilha resumo acima do pagamento */
  .nv-s3-grid {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
  }
  #nv-resumo   { order: -1; position: static !important; }
  #nv-resumo .nv-total { margin-bottom: 0; }

  /* Payment chips wrap no mobile */
  .pay-chips   { gap: 6px; }
  .pay-chip    { flex: none; padding: 8px 12px; font-size: 13px; }
  .parc-section .pay-chip { flex: 1; }

  /* Total parcial */
  .nv-total    { padding: 12px 14px; }
  .nv-total-val { font-size: 22px; }

  /* Animação de sucesso */
  .ss-card     { padding: 28px 20px 22px; }
  .ss-total    { font-size: 30px; }
  .ss-actions  { flex-direction: column; gap: 8px; }
  .ss-btn-sec, .ss-btn-pri { width: 100%; flex: none; height: 46px; font-size: 14px; }
  .ss-btn-sec:first-child { order: 3; } /* Fechar vai pro fim */

  /* ── Drawer de produto → bottom sheet no mobile ───── */
  .filter-drawer {
    top: auto !important;
    bottom: -110% !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-height: 88svh !important;
    border-radius: 22px 22px 0 0 !important;
    transition: bottom .32s cubic-bezier(.16,1,.3,1) !important;
  }
  .filter-drawer.open { bottom: 0 !important; }
  .filter-drawer-hd {
    border-radius: 22px 22px 0 0 !important;
    padding-top: 28px !important;
    position: relative !important;
  }
  .filter-drawer-hd::before {
    content: '';
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px; background: #CBD5E1; border-radius: 2px;
  }
  .filter-drawer-body { padding: 20px !important; }
  .filter-drawer-ft {
    padding: 14px 20px max(20px, env(safe-area-inset-bottom)) !important;
  }
  .filter-drawer-ft #prod-edit-btn {
    padding: 14px !important;
    font-size: 15px !important;
    justify-content: center !important;
  }

  /* ── Modal perfil (mcp) — scroll correto no mobile ── */
  #mcp .modal-box {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    max-height: min(92svh, 92vh) !important;
  }
  #mcp .mcp-body {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    display: block !important;
  }
  #mcp .modal-actions {
    flex-shrink: 0 !important;
    flex-direction: row !important;
    padding: 12px 16px max(16px, env(safe-area-inset-bottom)) !important;
  }
  #mcp .modal-actions .btn {
    flex: 1 !important;
    padding: 12px 8px !important;
    font-size: 13px !important;
  }
}

/* ── Print ─────────────────────────────────────────── */
@media print {
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  @page { margin: 1.5cm; size: A4 portrait; }
  body > *:not(#erp)  { display: none !important; }
  .erp-sidebar, .erp-topbar, .erp-actions,
  .notif-drawer, .notif-backdrop,
  .ext-header-right, .ext-nav-btn,
  .ext-popup, .ext-preview-note,
  .sidebar-overlay, .toast,
  .modal, .rl-ov, .gl-badge  { display: none !important; }
  body       { background: #fff !important; overflow: visible !important; }
  #erp       { display: block !important; background: #fff !important; }
  .erp-main  { margin-left: 0 !important; width: 100% !important; display: block !important; background: #fff !important; }
  .erp-content { padding: 0 !important; display: block !important; }
  .erp-page  { display: none !important; }
  #ep-extrato { display: block !important; }
  .ext-kpis  { grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; }
  .card-grid-wide > * { margin-bottom: 12px !important; break-inside: avoid; }
  .summary-card, .data-card, .ext-kpi, .ext-progress-card { box-shadow: none !important; }
  table      { break-inside: auto; }
  tr         { break-inside: avoid; }
}

/* ── Cupom print ───────────────────────────────────── */
@media print {
  body > *:not(#cupom):not(#erp) { display: none !important; }
}

/* ── Configurar Loja: abas ───────────────────────────── */
.loja-tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.loja-tab-btn {
  background: var(--surf); border: 1px solid var(--bd); color: var(--tx-m);
  font-size: 13px; font-weight: 600; padding: 9px 18px; border-radius: var(--r-btn);
  cursor: pointer; transition: all .15s ease;
}
.loja-tab-btn:hover { border-color: var(--gl-bd); color: var(--gl); }
.loja-tab-btn.on    { background: var(--gl); border-color: var(--gl); color: #fff; }

/* ── Modelos de loja: cards de seleção ──────────────── */
.tpl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 14px 20px; }
.tpl-card {
  display: flex; flex-direction: column; gap: 10px; align-items: center;
  background: var(--surf); border: 2px solid var(--bd); border-radius: var(--r-card);
  padding: 12px; cursor: pointer; transition: all .15s ease;
}
.tpl-card:hover { border-color: var(--gl-bd); }
.tpl-card.on     { border-color: var(--gl); box-shadow: 0 0 0 3px var(--gl-lt); }
.tpl-name { font-size: 12.5px; font-weight: 600; color: var(--tx); }

.tpl-preview {
  width: 100%; aspect-ratio: 4/3; border-radius: 8px; overflow: hidden;
  background: #FDFCFB; display: flex; flex-direction: column; gap: 4px; padding: 6px;
  border: 1px solid var(--bd);
}
.tpl-p-hero       { display: flex; gap: 4px; flex: 2; }
.tpl-p-text       { flex: 1; background: #E0D9D0; border-radius: 3px; }
.tpl-p-img        { flex: 1; background: #C4897A; border-radius: 3px; }
.tpl-p-grid       { display: flex; gap: 4px; flex: 1; }
.tpl-p-grid span  { flex: 1; background: #EDE8E2; border-radius: 3px; }

/* Moderno: hero full-bleed com texto sobreposto */
.tpl-p-hero-full {
  flex: 2; position: relative; background: #3D6655; border-radius: 3px;
  display: flex; align-items: center; padding: 6px;
}
.tpl-p-hero-full .tpl-p-text { flex: 0 0 55%; background: rgba(253,252,251,.85); }
.tpl-p-grid--bento span:nth-child(1) { flex: 1.4; }

/* Minimalista: hero centrado + grade 2 colunas */
.tpl-p-hero-center { flex: 2; display: flex; align-items: center; justify-content: center; }
.tpl-p-text--center { flex: 0 0 60%; height: 40%; align-self: center; }
.tpl-p-grid--col2 span { flex: 1; }

/* ── Cores ────────────────────────────────────────── */
.input-color { padding: 2px; height: 38px; cursor: pointer; }

/* ── Prévia ao vivo ──────────────────────────────────── */
.loja-preview-wrap {
  border: 1px solid var(--bd); border-radius: var(--r-card); overflow: hidden;
  background: #fff; height: 640px;
}
.loja-preview-frame { width: 100%; height: 100%; border: none; display: block; }

/* ── Publicação ──────────────────────────────────────── */
.pub-status-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.pub-badge {
  font-size: 12px; font-weight: 700; padding: 5px 14px; border-radius: 999px; letter-spacing: .02em;
}
.pub-badge-on  { color: #14532D; background: #DCFCE7; }
.pub-badge-off { color: #92400E; background: #FEF3C7; }
.pub-hint { font-size: 12.5px; color: var(--tx-m); line-height: 1.6; }

.pub-link-card {
  margin-top: 16px; padding: 14px 16px;
  background: var(--bg); border: 1px solid var(--bd);
  border-radius: 10px;
}
.pub-link-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-s); margin-bottom: 10px; }
.pub-link-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pub-link-url {
  flex: 1; font-size: 13px; color: var(--tx); font-weight: 500;
  word-break: break-all; min-width: 0;
}
.pub-link-copy {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 8px;
  background: var(--surf); border: 1px solid var(--bd);
  font-size: 12px; font-weight: 600; color: var(--tx-m);
  cursor: pointer; white-space: nowrap;
  transition: background .13s, color .13s;
}
.pub-link-copy:hover { background: var(--bg); color: var(--tx); }
.pub-link-open { display: flex; align-items: center; gap: 5px; font-size: 12px; white-space: nowrap; text-decoration: none; }

@media (max-width: 768px) {
  .tpl-grid { grid-template-columns: 1fr; }
  .loja-preview-wrap { height: 420px; }
}

/* ── Venda sem cliente — hint ─────────────────────── */
.nv-sem-cli-hint {
  display: none;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 12px;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-radius: 8px;
  font-size: 12.5px;
  color: #1E40AF;
}
.nv-sem-cli-hint svg { flex-shrink: 0; color: #3B82F6; }

/* ── PIX QR no checkout ───────────────────────────── */
.nv-pix-qr-wrap {
  display: none;
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid #C7D2FE;
  border-radius: 10px;
}
.nv-pix-qr-wrap.on { display: block; }

.nv-pix-mini-row {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.nv-pix-qr-thumb {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nv-pix-qr-thumb canvas,
.nv-pix-qr-thumb img { width: 72px !important; height: 72px !important; object-fit: contain; }

.nv-pix-qr-meta { flex: 1; min-width: 0; }
.nv-pix-qr-lbl  { font-size: 12px; font-weight: 600; color: var(--tx); margin-bottom: 2px; }
.nv-pix-qr-key  { font-size: 11.5px; color: var(--tx-m); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv-pix-qr-val  { font-size: 14px; font-weight: 700; color: var(--gl); margin-top: 3px; }

.nv-pix-expand {
  background: none;
  border: 1px solid var(--bd);
  border-radius: 6px;
  cursor: pointer;
  color: var(--tx-m);
  padding: 6px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nv-pix-expand:hover { background: var(--bg-h); color: var(--tx); }

.nv-pix-no-key {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--tx-m);
}
.nv-pix-no-key a { color: var(--gl); }

/* Overlay QR expandido */
.nv-pix-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 9000;
  display: none;
  align-items: center;
  justify-content: center;
}
.nv-pix-overlay-box {
  background: var(--card);
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
  max-width: 300px;
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.nv-pix-overlay-title { font-size: 16px; font-weight: 700; color: var(--tx); }
.nv-pix-overlay-box canvas,
.nv-pix-overlay-box img { border-radius: 8px; }
.nv-pix-overlay-val { font-size: 24px; font-weight: 800; color: var(--gl); }
.nv-pix-overlay-key { font-size: 12px; color: var(--tx-m); word-break: break-all; }

/* ── Tour — prompt de boas-vindas ────────────────── */
.tour-prompt {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px);
  z-index: 9000; opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 16px;
  background: #fff; border: 1px solid var(--bd);
  border-radius: 16px; padding: 16px 20px;
  box-shadow: 0 8px 40px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  max-width: 520px; width: calc(100% - 48px);
  transition: opacity .35s ease, transform .35s ease;
}
.tour-prompt.on { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.tp-icon { font-size: 22px; flex-shrink: 0; color: var(--gl); }
.tp-body { flex: 1; min-width: 0; }
.tp-title { font-size: 14px; font-weight: 700; color: var(--tx); letter-spacing: -.02em; }
.tp-sub   { font-size: 12px; color: var(--tx-m); margin-top: 2px; line-height: 1.4; }
.tp-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.tp-btn-yes {
  padding: 8px 16px; border-radius: 8px; border: none; cursor: pointer;
  background: var(--gl); color: #fff;
  font-size: 12.5px; font-weight: 700; font-family: 'Inter', sans-serif;
  white-space: nowrap; transition: opacity .14s;
}
.tp-btn-yes:hover { opacity: .88; }
.tp-btn-no {
  padding: 6px 16px; border-radius: 8px; border: none; cursor: pointer;
  background: none; color: var(--tx-s);
  font-size: 12px; font-family: 'Inter', sans-serif;
  white-space: nowrap; transition: color .14s;
}
.tp-btn-no:hover { color: var(--tx); }

/* ── Driver.js — override visual para o tema Shorti ─ */
.driver-popover.srt-tour-pop {
  background: #fff; border: 1px solid var(--bd);
  border-radius: 14px; padding: 20px 22px;
  box-shadow: 0 12px 40px rgba(0,0,0,.14);
  max-width: 300px;
}
.driver-popover.srt-tour-pop .driver-popover-title {
  font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700;
  color: var(--tx); letter-spacing: -.02em; margin-bottom: 6px;
}
.driver-popover.srt-tour-pop .driver-popover-description {
  font-family: 'Inter', sans-serif; font-size: 13px; color: var(--tx-m);
  line-height: 1.6;
}
.driver-popover.srt-tour-pop .driver-popover-footer {
  margin-top: 16px; gap: 8px;
}
.driver-popover.srt-tour-pop .driver-popover-btn-next,
.driver-popover.srt-tour-pop .driver-popover-btn-done {
  background: var(--gl); border: none; color: #fff;
  border-radius: 8px; padding: 8px 14px;
  font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: opacity .14s;
}
.driver-popover.srt-tour-pop .driver-popover-btn-next:hover,
.driver-popover.srt-tour-pop .driver-popover-btn-done:hover { opacity: .85; }
.driver-popover.srt-tour-pop .driver-popover-btn-prev {
  background: var(--bg); border: 1px solid var(--bd); color: var(--tx-m);
  border-radius: 8px; padding: 8px 14px;
  font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 500;
  cursor: pointer;
}
.driver-popover.srt-tour-pop .driver-popover-progress-text {
  font-family: 'Inter', sans-serif; font-size: 11px; color: var(--tx-s);
}
.driver-popover.srt-tour-pop .driver-popover-close-btn {
  color: var(--tx-s); font-size: 18px; top: 12px; right: 14px;
}