/* ============================================================
   ALICERCE — app.css (mobile-first)
   ============================================================ */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; } /* root não rola na horizontal: layout viewport fica = device width (overlays fixos não esticam em 320px) */
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--ink-900);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* nenhuma tela rola na horizontal em 320px; overlays fixos ficam na largura do viewport (Fechar sempre visível) */
}
h1, h2, h3, h4, p { margin: 0; }
a { color: var(--brand-600); text-decoration: none; }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; }
:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--brand-100); }

.boot-splash {
  min-height: 100dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--sp-3);
  background: linear-gradient(165deg, #20242B 0%, #16181C 60%, #0C0D10 100%); color: #fff;
}
.boot-logo { font-size: 44px; animation: pulse 1.2s ease infinite; }
.boot-name { font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: var(--fs-sm); color: var(--ink-400); }
@keyframes pulse { 50% { opacity: 0.55; transform: scale(0.95); } }

/* ---------- Shell ---------- */
.shell { min-height: 100dvh; }
.shell-main {
  padding: var(--sp-4);
  padding-bottom: calc(var(--bottomnav-h) + var(--sp-6) + env(safe-area-inset-bottom));
  max-width: 1180px; margin: 0 auto;
}

/* Topbar (mobile) */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: rgba(248, 250, 252, 0.88);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ink-200);
}
.topbar-title { font-size: var(--fs-lg); font-weight: 700; flex: 1; display: flex; align-items: center; gap: var(--sp-2); }
.topbar-store {
  display: none; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-500);
  background: var(--surface); border: 1px solid var(--ink-200);
  padding: 4px 10px; border-radius: var(--r-full);
}
.topbar .avatar { cursor: pointer; }

/* Sidebar (desktop) */
.sidebar {
  display: none;
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: 50;
  background: linear-gradient(180deg, var(--comando-panel) 0%, var(--comando-ink) 100%);
  color: var(--ink-300);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  flex-direction: column;
  padding: var(--sp-5) var(--sp-3);
}
.sidebar-brand {
  display: flex; align-items: center; gap: 12px;
  padding: var(--sp-4) var(--sp-3) var(--sp-6);
  color: #fff; font-weight: 800; font-size: var(--fs-md); letter-spacing: -0.01em;
}
.sidebar-brand .logo {
  width: 34px; height: 34px; border-radius: 10px; background: var(--comando-black);
  display: grid; place-items: center; font-size: 17px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 2px 8px rgba(12, 13, 16, 0.4);
}
.sidebar-brand .logo svg { display: block; }
.sidebar-brand small { display: block; font-size: 10px; font-weight: 600; color: var(--ink-500); letter-spacing: 0.08em; text-transform: uppercase; }
.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.16) transparent; }
/* V1E: scrollbar da sidebar discreta (trilho transparente, thumb cinza-steel) — não branca/grossa */
.nav::-webkit-scrollbar { width: 7px; }
.nav::-webkit-scrollbar-track { background: transparent; }
.nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.13); border-radius: 8px; }
.nav::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.22); }
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px var(--sp-3); border-radius: var(--r-md);
  color: var(--ink-400); font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer; border: 0; background: transparent; text-align: left; width: 100%;
  transition: background 0.15s, color 0.15s;
}
.nav-item:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
/* V1B: item ativo "selecionado", não "alerta" — fundo grafite neutro + barra vermelha fina (assinatura) + ícone claro */
.nav-item.active { color: #fff; background: rgba(255, 255, 255, 0.10); box-shadow: inset 3px 0 0 var(--accent); }
.nav-item.active svg { color: #fff; }
.nav-item svg { flex-shrink: 0; }
.sidebar-user {
  display: flex; align-items: center; gap: 10px;
  padding: var(--sp-3); margin-top: var(--sp-3);
  background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--r-md);
}
.sidebar-user .info { flex: 1; min-width: 0; }
.sidebar-user .name { color: #fff; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user .role { font-size: var(--fs-xs); color: var(--ink-500); }
.sidebar-user button { background: none; border: 0; color: var(--ink-400); cursor: pointer; padding: 6px; border-radius: 8px; }
.sidebar-user button:hover { color: #fff; background: rgba(255,255,255,0.08); }

/* Bottom nav (mobile) */
.bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--ink-200);
}
.bottomnav button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 0; background: none; cursor: pointer;
  font-size: 10.5px; font-weight: 600; color: var(--ink-500);
  min-width: 0;
}
.bottomnav button span {
  max-width: 100%; padding: 0 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bottomnav button.active { color: var(--ink-900); }
.bottomnav button.active svg { color: var(--accent); }
.bottomnav button.active svg { transform: translateY(-1px); }
.bottomnav svg { transition: transform 0.15s; }

/* ---------- Login ---------- */
.login {
  min-height: 100dvh; display: flex; flex-direction: column;
  background:
    radial-gradient(1100px 560px at 88% -12%, rgba(225, 28, 36, 0.14), transparent 58%),
    radial-gradient(820px 520px at -8% 112%, rgba(42, 46, 53, 0.55), transparent 60%),
    linear-gradient(165deg, #22262D 0%, #16181C 55%, #0C0D10 100%);
}
.login-hero {
  padding: var(--sp-10) var(--sp-6) var(--sp-6); color: #fff; position: relative;
  /* V1D: radar-marca d'água quase invisível → dá profundidade ao escuro sem poluir */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1'%3E%3Ccircle cx='100' cy='100' r='92'/%3E%3Ccircle cx='100' cy='100' r='62'/%3E%3Ccircle cx='100' cy='100' r='32'/%3E%3Cpath d='M100 4V196M4 100H196'/%3E%3C/g%3E%3Cpath d='M100 100 L100 12 A88 88 0 0 1 162 38 Z' fill='%23E11C24' fill-opacity='0.045'/%3E%3Ccircle cx='100' cy='100' r='4' fill='%23ffffff' fill-opacity='0.08'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right -110px center; background-size: 460px;
}
.login-hero > * { position: relative; z-index: 1; }
.login-hero .logo {
  width: 52px; height: 52px; border-radius: 14px; background: var(--comando-black);
  display: grid; place-items: center; font-size: 26px; margin-bottom: var(--sp-4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 8px 24px rgba(12, 13, 16, 0.5), 0 0 0 6px rgba(225, 28, 36, 0.06);
}
.login-hero .logo svg { display: block; }
.login-hero h1 { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.02em; }
/* COMANDO-360-LOGIN-SLOGAN-LOCKUP-V2 — slogan vira ASSINATURA de marca: uppercase, tracking,
   linhas vermelhas finas flanqueando (detalhe). Parágrafo explicativo REMOVIDO (login mais limpo). */
.login-slogan {
  display: flex; align-items: center; gap: 11px;
  margin: var(--sp-4) 0 0; max-width: 470px;
  font-size: 0.72rem; font-weight: 600; line-height: 1.5;
  text-transform: uppercase; letter-spacing: 0.15em;
  color: rgba(244, 245, 246, 0.78);
}
.login-slogan::before, .login-slogan::after {
  content: ''; flex: none; width: 24px; height: 1.5px; border-radius: 2px; background: var(--accent);
}
@media (max-width: 420px) {
  /* mobile: assinatura cabe em 1 linha — tracking e linhas reduzidos (fonte ~igual) p/ não deixar "REAL." sozinho */
  .login-slogan { font-size: 0.64rem; letter-spacing: 0.04em; gap: 6px; }
  .login-slogan::before, .login-slogan::after { width: 12px; }
}
.login-card {
  background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: var(--sp-6); flex: 1;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.3);
}
.login-card h2 { font-size: var(--fs-lg); font-weight: 700; margin-bottom: var(--sp-1); }
.login-card .sub { color: var(--ink-500); font-size: var(--fs-sm); margin-bottom: var(--sp-5); }
.login-profiles { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.login-profiles .chip {
  border: 1px solid var(--ink-200); background: var(--ink-50); color: var(--ink-700);
  padding: 8px 14px; border-radius: var(--r-full); font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
  transition: all 0.15s;
}
.login-profiles .chip:hover, .login-profiles .chip.sel { border-color: var(--brand-600); background: var(--brand-50); color: var(--brand-700); }
.login-err {
  background: var(--red-50); color: var(--red-700); border: 1px solid var(--red-100);
  padding: 10px 14px; border-radius: var(--r-md); font-size: var(--fs-sm); margin-bottom: var(--sp-4);
}

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--touch); padding: 0 var(--sp-5);
  border-radius: var(--r-md); border: 1px solid transparent;
  font-size: var(--fs-base); font-weight: 600; cursor: pointer;
  transition: all 0.15s; white-space: nowrap; user-select: none;
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* V1C: botão primário = grafite PREMIUM com profundidade (gradiente médio + brilho superior sutil +
   sombra leve), NÃO bloco preto chapado. Vermelho aparece como brilho discreto SÓ no hover. */
.btn-primary {
  background: linear-gradient(180deg, #353A42 0%, #24282F 100%);
  color: #fff; border-color: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 1px 2px rgba(12, 13, 16, 0.16), 0 4px 14px rgba(12, 13, 16, 0.10);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #3D424C 0%, #2B2F38 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), 0 7px 20px rgba(225, 28, 36, 0.17);
}
.btn-secondary { background: var(--surface); color: var(--ink-700); border-color: var(--ink-300); }
.btn-secondary:hover { background: var(--ink-50); border-color: var(--ink-400); }
.btn-ghost { background: transparent; color: var(--ink-600); }
.btn-ghost:hover { background: var(--ink-100); color: var(--ink-900); }
.btn-danger { background: var(--red-50); color: var(--red-700); border-color: var(--red-100); }
.btn-danger:hover { background: var(--red-100); }
.btn-success { background: var(--green-600); color: #fff; }
.btn-success:hover { background: var(--green-700); }
.btn-wa { background: var(--green-50); color: var(--green-700); border-color: var(--green-100); }
.btn-wa:hover { background: var(--green-100); }
.btn-sm { min-height: 36px; padding: 0 var(--sp-3); font-size: var(--fs-sm); border-radius: var(--r-sm); }
.btn-lg { min-height: 52px; font-size: var(--fs-md); border-radius: var(--r-lg); }
.btn-block { width: 100%; }
.btn-icon { padding: 0; width: var(--touch); }
.btn-icon.btn-sm { width: 36px; }

/* ---------- Formulários ---------- */
.field { margin-bottom: var(--sp-4); }
.field label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-700); margin-bottom: 6px; }
.field .hint { font-size: var(--fs-xs); color: var(--ink-500); margin-top: 4px; }
.inp, select.inp, textarea.inp {
  width: 100%; min-height: var(--touch);
  padding: 10px 14px; border-radius: var(--r-md);
  border: 1px solid var(--ink-300); background: var(--surface); color: var(--ink-900);
  transition: border 0.15s, box-shadow 0.15s;
}
/* V1E: foco = grafite/steel (SEM vermelho — não parece erro). Erro real usa borda vermelha cheia + mensagem. */
.inp:focus { outline: none; border-color: var(--ink-700); box-shadow: 0 0 0 3px rgba(33, 37, 46, 0.14); }
textarea.inp { min-height: 88px; resize: vertical; }
.inp-lg { min-height: 52px; font-size: var(--fs-md); }
/* mobile-first: campos empilham; lado a lado a partir de 480px */
.row2 { display: grid; grid-template-columns: 1fr; gap: 0 var(--sp-3); }
.row2 > * { min-width: 0; }
@media (min-width: 480px) { .row2 { grid-template-columns: 1fr 1fr; } }
.pos-store-row { grid-template-columns: 1fr 1fr; } /* loja/origem lado a lado mesmo no celular */
.search-wrap { position: relative; }
.search-wrap svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-400); pointer-events: none; }
.search-wrap .inp { padding-left: 42px; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--ink-200);
  border-radius: var(--r-lg); padding: var(--sp-4);
  box-shadow: var(--sh-sm);
}
.card + .card { margin-top: var(--sp-3); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.card-head .card-title { white-space: nowrap; }
.card-title { font-size: var(--fs-md); font-weight: 700; display: flex; align-items: center; gap: 8px; }
.card-title svg { color: var(--ink-400); }
.section-gap { margin-top: var(--sp-5); }

/* KPI */
.kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.kpi-grid > * { min-width: 0; } /* grid items nunca alargam a página por min-content */
.kpi {
  background: var(--surface); border: 1px solid var(--ink-200); border-radius: var(--r-lg);
  padding: var(--sp-4); box-shadow: var(--sh-sm); cursor: pointer; transition: all 0.15s;
  border-bottom: 3px solid transparent;
  min-width: 0; overflow: hidden;
}
.kpi:hover { transform: translateY(-1px); box-shadow: var(--sh-md); }
.kpi .lbl { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.04em; display: flex; align-items: center; gap: 6px; }
.kpi .val { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.02em; margin-top: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kpi .sub { font-size: var(--fs-xs); color: var(--ink-500); margin-top: 2px; }
.kpi .sub.neg { color: var(--red-600); font-weight: 600; }
.kpi .sub.pos { color: var(--green-600); font-weight: 600; }
.kpi.accent-red { border-bottom-color: var(--red-600); }
.kpi.accent-green { border-bottom-color: var(--green-600); }
.kpi.accent-amber { border-bottom-color: var(--amber-600); }
.kpi.accent-brand { border-bottom-color: var(--ink-400); }  /* V1E: linha grafite mais leve (não pesada) */
/* KPI clicável: a seta diz "toque leva à tela" mesmo sem hover (celular) */
.kpi-link { position: relative; }
.kpi-link::after { content: '›'; position: absolute; top: 8px; right: 12px; color: var(--ink-300); font-size: 17px; font-weight: 700; }

/* ---------- Badges ---------- */
.bdg {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 700; white-space: nowrap;
}
.bdg-green { background: var(--green-100); color: var(--green-700); }
.bdg-red { background: var(--red-100); color: var(--red-700); }
.bdg-amber { background: var(--amber-100); color: var(--amber-700); }
.bdg-blue { background: var(--blue-100); color: var(--blue-700); }
.bdg-violet { background: var(--violet-100); color: var(--violet-600); }
.bdg-slate { background: var(--ink-100); color: var(--ink-600); }
.bdg-brand { background: var(--ink-100); color: var(--ink-700); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot-red { background: var(--red-600); }
.dot-amber { background: var(--amber-600); }
.dot-blue { background: var(--blue-600); }
.dot-green { background: var(--green-600); }

/* ---------- Avatar ---------- */
.avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  color: #fff; font-size: var(--fs-xs); font-weight: 700;
  background: var(--comando-steel);
  box-shadow: inset 0 0 0 1.5px rgba(225, 28, 36, 0.5);  /* V1E: anel vermelho discreto (assinatura), iniciais claras */
}
.avatar-sm { width: 28px; height: 28px; font-size: 10px; }

/* ---------- Tabela responsiva (vira cards no mobile) ---------- */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  text-align: left; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--ink-500); padding: 10px 12px;
  border-bottom: 1px solid var(--ink-200);
}
.tbl td { padding: 12px; border-bottom: 1px solid var(--ink-100); font-size: var(--fs-sm); vertical-align: middle; }
.tbl tbody tr { transition: background 0.1s; }
.tbl tbody tr.clickable { cursor: pointer; }
.tbl tbody tr.clickable:hover { background: var(--ink-50); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 719px) {
  .tbl thead { display: none; }
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; }
  .tbl tr {
    background: var(--surface); border: 1px solid var(--ink-200); border-radius: var(--r-lg);
    margin-bottom: var(--sp-3); padding: var(--sp-2) var(--sp-3); box-shadow: var(--sh-sm);
  }
  .tbl td { border: 0; padding: 7px 4px; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); }
  .tbl td::before { content: attr(data-l); font-size: var(--fs-xs); font-weight: 600; color: var(--ink-500); }
  .tbl td.no-l::before { display: none; }
  .tbl td.no-l { justify-content: flex-start; }
  .tbl .num { text-align: left; }
  .tbl td.td-actions { justify-content: flex-end; }
}

/* ---------- Lista de linhas ---------- */
.rows { display: flex; flex-direction: column; }
.rowi {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-2); border-bottom: 1px solid var(--ink-100);
  cursor: pointer; border-radius: var(--r-sm); transition: background 0.1s;
}
.rowi:last-child { border-bottom: 0; }
.rowi:hover { background: var(--ink-50); }
.rowi.kbd, .rowi.sel { background: var(--ink-100); box-shadow: inset 2px 0 0 var(--brand-600); } /* destaque do teclado (↑/↓) e seleção */
.rowi .grow { flex: 1; min-width: 0; }
.rowi .t { font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rowi .s { font-size: var(--fs-xs); color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rowi .end { text-align: right; flex-shrink: 0; }

/* ---------- Segmented ---------- */
.seg {
  display: inline-flex; background: var(--ink-100); border-radius: var(--r-md);
  padding: 3px; gap: 2px; max-width: 100%; overflow-x: auto;
}
.seg button {
  border: 0; background: transparent; padding: 8px 14px; border-radius: 9px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-600); cursor: pointer;
  white-space: nowrap; transition: all 0.15s; min-height: 38px;
}
.seg button.active { background: var(--surface); color: var(--ink-900); box-shadow: var(--sh-sm); }
.seg-block { display: flex; width: 100%; }
.seg-block button { flex: 1; padding-left: 6px; padding-right: 6px; } /* flex:1 preenche; menos padding evita scroll do segmentado em coluna estreita (tablet) */
/* UX-ESTOQUE-ABAS-MOBILE-V1 (achado K-1) — as abas da Operação/Entregas (Separar e carregar · Cargas · Retiradas)
   estouram ~375px e a 3ª aba ("Retiradas") ficava CORTADA (o overflow-x: auto rolava, mas com baixa descoberta).
   No mobile elas QUEBRAM LINHA em vez de cortar: todas acessíveis/tappáveis. Largura natural preservada (não
   estica em tablet); acima de 719px (desktop) nada muda. Só esta tela usa .seg-mtabs (sem regressão global). */
@media (max-width: 719px) {
  .seg-mtabs { flex-wrap: wrap; overflow-x: visible; }
}

/* ---------- Modal / Sheet ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fadeIn 0.18s ease;
}
.modal {
  background: var(--surface); width: 100%; max-height: 92dvh;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  display: flex; flex-direction: column;
  animation: sheetUp 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.modal-head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--ink-100);
}
.modal-head h3 { flex: 1; min-width: 0; font-size: var(--fs-md); font-weight: 700; overflow-wrap: anywhere; }
.modal-close { background: var(--ink-100); border: 0; border-radius: 50%; width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer; color: var(--ink-600); }
.modal-close:hover { background: var(--ink-200); }
.modal-body { padding: var(--sp-5); overflow-y: auto; flex: 1; }
.modal-foot {
  display: flex; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--ink-100);
  padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
}
.modal-foot .btn { flex: 1; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0.6; } }

/* ---------- Toast ---------- */
#toasts {
  position: fixed; z-index: 200; left: var(--sp-4); right: var(--sp-4);
  top: calc(var(--sp-4) + env(safe-area-inset-top));
  display: flex; flex-direction: column; gap: var(--sp-2); pointer-events: none;
}
.toast {
  background: var(--ink-900); color: #fff;
  padding: 13px 18px; border-radius: var(--r-md); box-shadow: var(--sh-lg);
  font-size: var(--fs-sm); font-weight: 500;
  display: flex; align-items: center; gap: 10px;
  animation: toastIn 0.25s cubic-bezier(0.2, 0.9, 0.3, 1);
  max-width: 480px; margin: 0 auto; width: 100%;
}
.toast.err { background: var(--red-700); }
.toast.ok svg { color: #6EE7B7; }
@keyframes toastIn { from { transform: translateY(-12px); opacity: 0; } }

/* ---------- Estado vazio / skeleton ---------- */
.empty { text-align: center; padding: var(--sp-10) var(--sp-4); color: var(--ink-500); }
.empty svg { color: var(--ink-300); margin-bottom: var(--sp-3); }
.empty .t { font-weight: 700; color: var(--ink-700); margin-bottom: 4px; }
.empty .s { font-size: var(--fs-sm); }
.skel { border-radius: var(--r-md); background: linear-gradient(90deg, var(--ink-100) 25%, var(--ink-200) 50%, var(--ink-100) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.loading-block { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-2) 0; }

/* ---------- Page head ---------- */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.page-title { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.02em; }
.page-sub { color: var(--ink-500); font-size: var(--fs-sm); margin-top: 2px; }
.page-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.filters { display: flex; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-4); flex-wrap: wrap; }
.filters .search-wrap { flex: 1; min-width: 200px; }

/* ---------- Dashboard ---------- */
.greeting { margin-bottom: var(--sp-4); }
.greeting h1 { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.02em; }
.greeting p { color: var(--ink-500); font-size: var(--fs-sm); text-transform: capitalize; }
.sugg-scroll { display: flex; gap: var(--sp-3); overflow-x: auto; padding-bottom: var(--sp-2); scroll-snap-type: x mandatory; }
.sugg {
  scroll-snap-align: start; flex: 0 0 250px;
  background: linear-gradient(135deg, var(--ink-900), var(--comando-steel));
  color: #fff; border-radius: var(--r-lg); padding: var(--sp-4);
  cursor: pointer; transition: transform 0.15s; position: relative; overflow: hidden;
}
.sugg:hover { transform: translateY(-2px); }
.sugg .ic { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,0.14); display: grid; place-items: center; margin-bottom: var(--sp-3); }
.sugg .t { font-weight: 700; font-size: var(--fs-sm); }
.sugg .s { font-size: var(--fs-xs); color: var(--ink-300); margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.alert-row {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-2); border-bottom: 1px solid var(--ink-100); cursor: pointer;
  border-radius: var(--r-sm);
}
.alert-row:hover { background: var(--ink-50); }
.alert-row:last-child { border-bottom: 0; }
.alert-row .dot { margin-top: 7px; }
.alert-row .t { font-size: var(--fs-sm); font-weight: 600; }
.alert-row .s { font-size: var(--fs-xs); color: var(--ink-500); }
.alert-row .dismiss { margin-left: auto; background: none; border: 0; color: var(--ink-400); cursor: pointer; padding: 4px; border-radius: 6px; flex-shrink: 0; }
.alert-row .dismiss:hover { background: var(--ink-100); color: var(--ink-700); }

/* ---------- POS ---------- */
/* Fluxo único estilo COMANDO: coluna de formulário (.pos-main) + resumo lateral (.pos-side).
   Mobile = empilha; desktop (≥768) = 2 colunas com resumo grudado. */
.pos-grid { display: flex; flex-direction: column; gap: var(--sp-4); }
.pos-grid > * { min-width: 0; } /* colunas encolhem p/ caber — não estouram no tablet (mesma salvaguarda do .grid-2) */
.pos-main { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.pos-side { min-width: 0; }
.pos-cust-row { display: flex; gap: var(--sp-2); align-items: stretch; } /* seletor de cliente + atalho "+ Cliente" */
.pos-cust-row #pos-customer { flex: 1; min-width: 0; }
.pos-cust-row #pos-customer-new { flex-shrink: 0; white-space: nowrap; }
.pos-results { max-height: 260px; overflow-y: auto; }

/* linha de adição — mobile: busca (linha cheia) · qtd·preço·total (3 colunas) · + Item sozinho embaixo. Desktop: 1 linha (≥1024). */
.pos-addrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); align-items: end; margin-bottom: var(--sp-2); }
.pos-addrow-q { min-width: 0; grid-column: 1 / -1; }
.pos-addrow .field { margin: 0; }
.pos-addrow-btn { height: 44px; white-space: nowrap; grid-column: 1 / -1; }
.inp.ro { background: var(--ink-50); display: flex; align-items: center; color: var(--ink-700); }
.inp-mini { height: auto; padding: 3px 6px; font-size: var(--fs-xs); margin-top: 4px; }

.pos-items-h, .pos-vd-h { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-500); text-transform: uppercase; letter-spacing: .03em; margin: var(--sp-3) 0 var(--sp-2); }
.pos-items-empty { padding: var(--sp-4); }

/* tabela de itens — mobile: cada item vira cartão rotulado; desktop: tabela de verdade (media 768) */
.pos-items { width: 100%; border-collapse: collapse; }
.pos-items, .pos-items tbody, .pos-itrow, .pos-items td { display: block; }
.pos-items, .pos-items tbody, .pos-itrow { width: 100%; } /* td NÃO leva width:100% — senão o .pos-it-act absoluto estica a largura toda */
.pos-items thead { display: none; }
/* mobile: produto à ESQUERDA em cima; Qtd · Unitário · Total numa linha (3 colunas) com alinhamento perfeito. */
.pos-itrow { position: relative; background: var(--ink-50); border: 1px solid var(--ink-200); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2);
  display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--sp-2); row-gap: 6px; align-items: start; }
.pos-itrow.mto-on { border-left: 3px solid var(--violet-600); }
.pos-it-prod { grid-column: 1 / -1; min-width: 0; text-align: left; padding: 0 36px 2px 0; }
.pos-it-prod .n { font-size: var(--fs-sm); font-weight: 600; }
.pos-it-prod .ci-meta { font-size: var(--fs-xs); color: var(--ink-500); }
/* world-class: cada coluna é um grid de 2 linhas COMPARTILHADAS — [rótulo auto] + [controle 38px]. Como todas as
   colunas usam as mesmas linhas, os rótulos alinham entre si e os controles alinham entre si, mesmo com alturas
   diferentes (stepper × input × texto). Prefixo .pos-itrow vence o `.pos-items td { display:block }`. */
.pos-itrow .pos-it-qty, .pos-itrow .pos-it-unit, .pos-itrow .pos-it-total { display: grid; grid-template-rows: auto 38px; justify-items: center; align-items: center; gap: 4px; min-width: 0; }
.pos-it-qty::before, .pos-it-unit::before, .pos-it-total::before { content: attr(data-th); font-size: var(--fs-xs); color: var(--ink-500); font-weight: 600; align-self: end; }
.pos-it-qty .stepper button { width: 28px; height: 28px; }
.pos-it-qty .stepper .qv { min-width: 26px; width: 30px; }
.pos-it-unit input { width: 100%; max-width: 96px; height: 34px; padding: 2px 6px; font-size: var(--fs-sm); text-align: center; }
.pos-it-unit .ci-tab { display: none; } /* o "tab R$" não cabe no card; o preço de tabela já está na meta do produto */
.pos-it-total { font-size: var(--fs-sm); }
.pos-it-total { font-weight: 700; }
.pos-it-act { position: absolute; top: var(--sp-2); right: var(--sp-2); }
.ci-remove { width: 32px; height: 32px; border: 0; background: transparent; border-radius: var(--r-md); display: grid; place-items: center; color: var(--ink-400); cursor: pointer; }
.ci-remove:hover { background: var(--red-50); color: var(--red-600); }

/* valores e desconto em linha */
.pos-vd { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.pos-vd .field { margin: 0; }

/* cabeçalho do pagamento: Quitar/Saldo + forma na mesma linha (mobile empilha, desktop 2 colunas) */
.pm-head { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); }
.pm-head .field { min-width: 0; }
/* .cart-item = carrinho compacto usado por Produção e Compras (o POS agora usa a tabela .pos-items).
   Layout flex original: nome cresce, controles/total alinham à direita, quebram de linha em coluna estreita. */
.cart-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-3) 0; border-bottom: 1px solid var(--ink-100); }
.cart-item > b { margin-left: auto; }        /* total à direita — na 1ª linha, ou na de baixo quando o item quebra */
.cart-item .info { flex: 1 1 auto; min-width: 130px; } /* nome legível: piso garante que numa coluna estreita stepper+total descem de linha em vez de esmagar o nome */
.cart-item .n { font-size: var(--fs-sm); font-weight: 600; }
.cart-item .p { font-size: var(--fs-xs); color: var(--ink-500); }
.stepper { display: flex; align-items: center; gap: 2px; background: var(--ink-100); border-radius: var(--r-full); padding: 2px; }
.stepper button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; color: var(--ink-700); }
.stepper button:hover { background: var(--surface); }
.stepper .qv { min-width: 36px; text-align: center; font-weight: 700; font-size: var(--fs-sm); }
.cart-total { display: flex; justify-content: space-between; padding: 6px 0; font-size: var(--fs-sm); color: var(--ink-600); }
.cart-total.final { font-size: var(--fs-md); font-weight: 800; color: var(--ink-900); border-top: 1px solid var(--ink-200); padding-top: var(--sp-3); margin-top: var(--sp-2); }
.pos-footer {
  position: fixed; left: 0; right: 0; bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom)); z-index: 45;
  background: var(--surface); border-top: 1px solid var(--ink-200);
  padding: var(--sp-3) var(--sp-4);
  display: flex; align-items: center; gap: var(--sp-3);
  box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08);
}
.pos-footer .tot { flex: 1; }
.pos-footer .tot .l { font-size: var(--fs-xs); color: var(--ink-500); font-weight: 600; }
.pos-footer .tot .v { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -0.02em; }
.pos-footer .tot .sub { font-size: var(--fs-xs); color: var(--ink-500); font-weight: 600; }  /* R1 — 2º valor do orçamento (à vista/tabela) */
.pos-footer .tot .sub:empty { display: none; }
.pay-methods { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.pay-methods .pm {
  border: 1.5px solid var(--ink-200); background: var(--surface); border-radius: var(--r-md);
  padding: 12px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-700); cursor: pointer;
  display: flex; align-items: center; gap: 8px; justify-content: center; min-height: var(--touch);
}
.pay-methods .pm.sel { border-color: var(--brand-600); background: var(--brand-50); color: var(--brand-700); }
.due-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.due-chips .chip {
  border: 1.5px solid var(--ink-200); background: var(--surface); padding: 8px 14px;
  border-radius: var(--r-full); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; color: var(--ink-700);
}
.due-chips .chip.sel { border-color: var(--brand-600); background: var(--brand-50); color: var(--brand-700); }
.kbox { background: var(--ink-50); border: 1px solid var(--ink-200); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); }
.kbox .row { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 3px 0; font-size: var(--fs-sm); }
.kbox .row b { font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }

/* ---------- Chat (comunicação) ---------- */
.chat-wrap { display: flex; flex-direction: column; gap: var(--sp-2); }
.bubble-row { display: flex; }
.bubble-row.out { justify-content: flex-end; }
.bubble {
  max-width: 82%; padding: 10px 14px; border-radius: var(--r-lg);
  font-size: var(--fs-sm); position: relative;
}
.bubble-row.in .bubble { background: var(--surface); border: 1px solid var(--ink-200); border-bottom-left-radius: 4px; }
.bubble-row.out .bubble { background: #DCFCE7; border: 1px solid #BBF7D0; border-bottom-right-radius: 4px; }
.bubble .meta { display: flex; gap: 8px; align-items: center; font-size: 10.5px; color: var(--ink-500); margin-top: 5px; justify-content: flex-end; }
.bubble .doc {
  display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.7);
  border: 1px solid var(--ink-200); padding: 6px 10px; border-radius: var(--r-sm);
  font-size: var(--fs-xs); font-weight: 600; margin-top: 6px; color: var(--ink-700);
}
.chat-day { text-align: center; margin: var(--sp-3) 0; }
.chat-day span { background: var(--ink-200); color: var(--ink-600); font-size: var(--fs-xs); font-weight: 600; padding: 3px 12px; border-radius: var(--r-full); }
.composer { display: flex; gap: var(--sp-2); align-items: flex-end; }
.composer textarea { flex: 1; min-height: var(--touch); max-height: 120px; }

/* ---------- Entregas ---------- */
.deliv-card { display: flex; flex-direction: column; gap: var(--sp-2); }
.deliv-card .top { display: flex; align-items: center; gap: var(--sp-2); justify-content: space-between; flex-wrap: wrap; }
.deliv-card .addr { font-size: var(--fs-sm); color: var(--ink-600); display: flex; gap: 6px; align-items: flex-start; }
.deliv-card .actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); flex-wrap: wrap; }
.deliv-card .actions .btn { flex: 1; }

/* ---------- Tarefas ---------- */
.task-row { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-2); border-bottom: 1px solid var(--ink-100); }
.task-row:last-child { border-bottom: 0; }
.task-check {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ink-300);
  background: var(--surface); cursor: pointer; flex-shrink: 0; margin-top: 2px;
  display: grid; place-items: center; color: transparent; transition: all 0.15s;
}
.task-check:hover { border-color: var(--green-600); color: var(--green-600); }
.task-check.done { background: var(--green-600); border-color: var(--green-600); color: #fff; }
.task-row .t { font-weight: 600; font-size: var(--fs-sm); }
.task-row .t.done { text-decoration: line-through; color: var(--ink-400); }
.task-row .s { font-size: var(--fs-xs); color: var(--ink-500); margin-top: 2px; }
.task-row .meta { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; align-items: center; }

/* ---------- Gráfico de barras (relatórios) ---------- */
.bars-wrap { overflow-x: auto; padding: 20px 4px 24px; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 150px; min-width: 100%; }
.bars .bar {
  flex: 1; min-width: 16px; background: var(--ink-300);
  border-radius: 6px 6px 2px 2px; position: relative; transition: background 0.15s;
}
.bars .bar:hover { background: var(--ink-400); }
.bars .bar.today { background: var(--accent); }
.bars .bar .v {
  position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 600; color: var(--ink-500); white-space: nowrap;
}
.bars .bar .d {
  position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%);
  font-size: 10px; color: var(--ink-400); white-space: nowrap;
}

/* ---------- Timeline (eventos) ---------- */
.tl { position: relative; padding-left: 22px; }
.tl::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--ink-200); border-radius: 2px; }
.tl-item { position: relative; padding: var(--sp-2) 0; }
.tl-item::before {
  content: ''; position: absolute; left: -19.5px; top: 14px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--brand-500);
  border: 2px solid var(--surface); box-shadow: 0 0 0 1.5px var(--ink-200);
}
.tl-item .t { font-size: var(--fs-sm); }
.tl-item .s { font-size: var(--fs-xs); color: var(--ink-500); margin-top: 1px; }

/* ---------- Util ---------- */
.muted { color: var(--ink-500); }
.small { font-size: var(--fs-xs); }
.bold { font-weight: 700; }
.mono { font-variant-numeric: tabular-nums; }
.mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); }
.mb-2 { margin-bottom: var(--sp-2); } .mb-3 { margin-bottom: var(--sp-3); } .mb-4 { margin-bottom: var(--sp-4); }
.flex { display: flex; gap: var(--sp-2); align-items: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.right { text-align: right; }
.center { text-align: center; }
.hide-mobile { display: none; }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
.grid-2 > * { min-width: 0; } /* textos nowrap internos não podem travar a coluna */

/* ============================================================
   MOBILE PEQUENO (≤379px) — nada quebra, o essencial respira
   ============================================================ */
@media (max-width: 379.98px) {
  .shell-main { padding: var(--sp-3); padding-bottom: calc(var(--bottomnav-h) + var(--sp-5) + env(safe-area-inset-bottom)); }
  .page-title { font-size: var(--fs-lg); }
  .greeting h1 { font-size: var(--fs-lg); }
  .kpi { padding: var(--sp-3); }
  .kpi .val { font-size: var(--fs-lg); }
  .card { padding: var(--sp-3); }
  .modal-body { padding: var(--sp-4); }
  .modal-foot { padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom)); }
  .bottomnav button { font-size: 9.5px; }
  .login-hero { padding: var(--sp-8) var(--sp-5) var(--sp-5); }
  .pos-footer .tot .v { font-size: var(--fs-md); }
}

/* ============================================================
   TABLET (768–959px) — formato próprio: rail de navegação,
   densidade de gestão, modais centrados
   ============================================================ */
@media (min-width: 768px) {
  .sidebar { display: flex; width: var(--rail-w); padding: var(--sp-4) var(--sp-2); }
  .sidebar-brand { justify-content: center; padding: var(--sp-1) 0 var(--sp-5); }
  .sidebar-brand .brand-text { display: none; }
  .nav-item {
    flex-direction: column; gap: 4px; padding: 9px 2px;
    font-size: 9.5px; font-weight: 600; text-align: center;
    letter-spacing: 0.01em;
  }
  .nav-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar-user { flex-direction: column; gap: 6px; padding: var(--sp-2); }
  .sidebar-user .info { display: none; }
  .bottomnav { display: none; }
  .topbar { position: static; margin-left: var(--rail-w); padding-left: var(--sp-6); background: transparent; border-bottom: 0; }
  .topbar-store { display: inline-flex; }
  .shell-main { margin-left: var(--rail-w); padding: var(--sp-5) var(--sp-6) var(--sp-10); max-width: none; }

  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
  .grid-2 { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  .sugg-scroll { display: grid; grid-template-columns: repeat(2, 1fr); overflow: visible; }
  .sugg { flex: none; }

  /* tablet (768–1023): layout EMPILHADO — o formulário ocupa a largura toda (tabela/valores com espaço);
     o resumo aparece logo abaixo. As 2 colunas (form + resumo grudado) entram já no notebook (≥1024). */
  .pos-results { max-height: 300px; }
  .pos-footer { position: sticky; bottom: 0; border-radius: var(--r-lg); border: 1px solid var(--ink-200); margin-top: var(--sp-3); flex-wrap: wrap; }
  .pos-footer .tot .sub { font-size: var(--fs-sm); color: var(--ink-500); font-weight: 600; }
  .cart-item { padding: 9px var(--sp-1); border-radius: var(--r-md); } /* usado por Produção/Compras */
  .cart-item:hover { background: var(--ink-50); }
  .cart-item .stepper button { width: 30px; height: 30px; }

  /* linha de adição (tablet/desktop estreito): busca ocupa a 1ª linha inteira; qtd·preço·total·+Item logo abaixo.
     No desktop largo (≥1200) tudo vira UMA linha só (ver bloco abaixo). */
  .pos-addrow { grid-template-columns: 1fr 1fr 1fr auto; }
  .pos-addrow-q { grid-column: 1 / -1; }
  .pos-addrow-btn { grid-column: auto; }   /* no desktop o + Item volta a ser a última coluna (não full-width) */

  /* tabela de itens vira TABELA de verdade no desktop */
  .pos-items { display: table; }
  .pos-items tbody { display: table-row-group; }
  .pos-items thead { display: table-header-group; }
  .pos-items thead th { text-align: left; font-size: var(--fs-xs); color: var(--ink-500); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 0 var(--sp-2) var(--sp-2); border-bottom: 1px solid var(--ink-200); }
  .pos-items thead th:nth-child(2) { text-align: center; }
  .pos-items thead th:nth-child(3), .pos-items thead th:nth-child(4) { text-align: right; }
  .pos-itrow { display: table-row; position: static; border: 0; border-bottom: 1px solid var(--ink-200); border-radius: 0; margin: 0; padding: 0; }
  .pos-itrow.mto-on { border-left: 0; box-shadow: inset 3px 0 0 var(--violet-600); }
  .pos-itrow { background: var(--ink-50); }       /* fundo sutil p/ a linha se destacar */
  .pos-itrow:hover { background: var(--ink-100); }
  .pos-items td { display: table-cell; vertical-align: middle; padding: var(--sp-2); }
  .pos-it-prod { padding: var(--sp-2); text-align: left; }   /* reset do mobile (centralizado) → linha de tabela */
  .pos-itrow .pos-it-qty, .pos-itrow .pos-it-unit, .pos-itrow .pos-it-total { display: table-cell; } /* mesma especificidade do mobile, vence por vir depois */
  .pos-it-qty::before, .pos-it-unit::before, .pos-it-total::before { display: none; }
  .pos-it-qty { text-align: center; }
  /* desktop: a tabela fica enxuta — Qtd vira input compacto (sem o pill +/−; edita digitando). O mobile mantém o stepper. */
  .pos-it-qty .stepper { display: inline-flex; background: transparent; padding: 0; gap: 0; }
  .pos-it-qty .stepper button { display: none; }
  .pos-it-qty .stepper .qv { width: 54px; height: 34px; border: 1.5px solid var(--ink-200); border-radius: var(--r-md); background: var(--surface); }
  .pos-it-unit { white-space: nowrap; text-align: right; }
  .pos-it-unit input { width: 96px; text-align: left; }   /* reset do center mobile */
  .pos-it-total { text-align: right; white-space: nowrap; font-size: var(--fs-md); }
  .pos-it-act { position: static; text-align: right; width: 44px; }
  .pos-vd { grid-template-columns: repeat(4, 1fr); } /* valores e desconto numa linha só no desktop */
  .pm-head { grid-template-columns: 1fr 1fr; gap: var(--sp-3); align-items: start; } /* Quitar/Saldo + forma lado a lado */

  .modal-overlay { align-items: center; padding: var(--sp-6); }
  .modal { border-radius: var(--r-xl); max-width: 560px; max-height: 86dvh; animation: modalIn 0.2s cubic-bezier(0.2, 0.9, 0.3, 1); }
  .modal.wide { max-width: 720px; }
  .modal-foot { justify-content: flex-end; }
  .modal-foot .btn { flex: 0 1 auto; }
  .modal-foot .btn-block { flex: 1; }
  #toasts { left: auto; right: var(--sp-6); top: auto; bottom: var(--sp-6); width: 380px; }

  .login { flex-direction: row; align-items: stretch; }
  .login-hero { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: var(--sp-10); }
  .login-card { flex: 0 0 420px; border-radius: 0; display: flex; flex-direction: column; justify-content: center; padding: var(--sp-8); }

  .hide-mobile { display: revert; }
  .chat-wrap { max-width: 100%; }
  @keyframes modalIn { from { transform: translateY(14px) scale(0.98); opacity: 0; } }
}

/* ============================================================
   DESKTOP (≥960px) — sidebar completa, máxima produtividade
   ============================================================ */
@media (min-width: 960px) {
  .sidebar { width: var(--sidebar-w); padding: var(--sp-5) var(--sp-3); }
  .sidebar-brand { justify-content: flex-start; padding: var(--sp-2) var(--sp-3) var(--sp-6); }
  .sidebar-brand .brand-text { display: block; }
  .nav-item { flex-direction: row; gap: 12px; padding: 10px var(--sp-3); font-size: var(--fs-sm); text-align: left; }
  .nav-item span { white-space: normal; }
  .sidebar-user { flex-direction: row; gap: 10px; padding: var(--sp-3); }
  .sidebar-user .info { display: block; }
  .topbar { margin-left: var(--sidebar-w); }
  .shell-main { margin-left: var(--sidebar-w); padding: var(--sp-6) var(--sp-8) var(--sp-10); max-width: calc(var(--sidebar-w) + 1180px); }

  .kpi-grid { grid-template-columns: repeat(4, 1fr); }
  .kpi .val { font-size: var(--fs-2xl); }
  .sugg-scroll { grid-template-columns: repeat(4, 1fr); }
  .pos-results { max-height: 420px; } /* o grid 2-col do POS só entra ≥1200 (ver bloco abaixo) */
  .modal.wide { max-width: 780px; }
  .login-hero h1 { font-size: 44px; }
  .login-card { flex-basis: 460px; padding: var(--sp-10); }
}

/* Notebook (≥1024): 2 COLUNAS já entram — formulário + resumo grudado à direita (fim da faixa morta 960–1199, onde
   antes o resumo ficava empilhado fora de vista). O resumo é FLUIDO (clamp) p/ caber no notebook estreito sem
   espremer o form. A linha de adição também vira UMA linha só, com colunas FLEXÍVEIS (minmax) que encolhem e cabem. */
@media (min-width: 1024px) {
  .pos-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 30%, 340px); align-items: start; }
  .pos-side-card { position: sticky; top: var(--sp-4); }
  .pos-addrow { grid-template-columns: minmax(120px, 1.5fr) minmax(56px, 0.7fr) minmax(78px, 1fr) minmax(78px, 1fr) auto; }
  .pos-addrow-q { grid-column: auto; }
}
/* Desktop largo (≥1200): resumo fixo em 340px (comportamento original preservado — sem regressão no desktop). */
@media (min-width: 1200px) {
  .pos-grid { grid-template-columns: minmax(0, 1fr) 340px; }
}

/* ---------- Calculadora de materiais (v1) ---------- */
.row3 { display: grid; grid-template-columns: 1fr; gap: 0 var(--sp-3); }
.row3 > * { min-width: 0; }
@media (min-width: 480px) { .row3 { grid-template-columns: 1fr 1fr 1fr; } }
.readonly-box { display: flex; align-items: center; min-height: 44px; padding: 0 var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2); color: var(--ink-700); }
.adv-box { margin-top: var(--sp-2); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--sp-2) var(--sp-3); background: var(--surface-2); }
.adv-box > summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-600); list-style: none; }
.adv-box > summary::-webkit-details-marker { display: none; }
.adv-box > summary::before { content: '▸ '; color: var(--ink-400); }
.adv-box[open] > summary::before { content: '▾ '; }
.inp-sm { min-height: 34px; padding: 4px 8px; }
.num-in { text-align: right; }
.muted-row { opacity: 0.72; }
.muted-row b { font-weight: 600; }