/* ══════════════════════════════════════════════════════════════════════════
   Vendas Externas (perfil Vendedor Externo) — painel, catálogo em cards,
   pedidos e carteira. Mobile primeiro; só variáveis do tema (claro/escuro).
   Prefixo .vx- para nunca colidir com as telas existentes.
   ══════════════════════════════════════════════════════════════════════════ */
.vx { display:flex; flex-direction:column; gap:18px; padding-bottom:150px; }
.vx-hero { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:22px 24px; border-radius:var(--r-xl); color:#fff;
  background:linear-gradient(135deg, var(--brand) 0%, #0C4A7A 55%, var(--accent-deep) 140%); box-shadow:var(--shadow-md); }
.vx-hero h1 { margin:0; font-family:var(--font-display); font-size:22px; font-weight:700; letter-spacing:-.01em; color:#fff; }
.vx-hero p { margin:4px 0 0; opacity:.85; font-size:13px; }
.vx-cta { background:var(--accent); color:#fff; padding:12px 18px; border-radius:var(--r-lg); font-weight:700;
  display:inline-flex; align-items:center; gap:8px; box-shadow:0 6px 18px rgba(36,186,120,.35); transition:transform .15s var(--ease); }
.vx-cta:hover { transform:translateY(-1px); background:var(--accent-deep); color:#fff; }

.vx-kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:12px; }
.vx-kpi { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:14px 16px; box-shadow:var(--shadow-xs); }
.vx-kpi small { display:flex; align-items:center; gap:6px; color:var(--text-3); font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.vx-kpi b { display:block; margin-top:6px; font-family:var(--font-display); font-size:21px; color:var(--text); }
.vx-kpi span { font-size:12px; color:var(--text-3); }
.vx-kpi.accent b { color:var(--accent-deep); }

.vx-cols { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; }
@media (max-width:900px) { .vx-cols { grid-template-columns:1fr; } }

.vx-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-xs); }
.vx-card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border); }
.vx-card-head h3 { margin:0; font-size:14.5px; font-weight:700; display:flex; align-items:center; gap:8px; }
.vx-row { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--border); }
.vx-row:last-child { border-bottom:none; }
.vx-row.clicavel { cursor:pointer; }
.vx-row.clicavel:hover { background:var(--surface-2); }
.vx-grow { flex:1; min-width:0; }
.vx-row b { display:block; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vx-row small { color:var(--text-3); font-size:12px; }
.vx-avatar { width:38px; height:38px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
  background:var(--brand-tint); color:var(--brand); font-weight:700; font-size:13px; }
.vx-empty { padding:28px 16px; text-align:center; color:var(--text-3); font-size:13px; }
.vx-empty .ico { font-size:34px; opacity:.5; display:block; margin:0 auto 8px; }
.vx-icobtn { width:36px; height:36px; border-radius:var(--r-md); display:grid; place-items:center; flex-shrink:0;
  border:1px solid var(--border); background:var(--surface); color:var(--text-2); }
.vx-icobtn:hover { background:var(--surface-2); color:var(--brand); }
.vx-icobtn.verde { color:var(--accent-deep); }

/* Status do pedido */
.vx-st { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; font-size:11.5px; font-weight:700; white-space:nowrap; }
.vx-st.rascunho  { background:var(--surface-2); color:var(--text-2); }
.vx-st.aguardando{ background:rgba(230,152,37,.15); color:var(--warn-deep); }
.vx-st.andamento { background:var(--brand-tint); color:var(--brand); }
.vx-st.faturado  { background:var(--accent-rgbtint); color:var(--accent-deep); }
.vx-st.recusado  { background:rgba(215,71,69,.12); color:var(--danger); }

/* Barra fixa do catálogo */
.vx-toolbar { position:sticky; top:calc(var(--pad) * -1); margin-top:calc(var(--pad) * -1); z-index:5; display:flex; flex-direction:column; gap:10px; padding:calc(var(--pad) + 12px) 0 12px;
  background:var(--bg, var(--canvas)); border-bottom:1px solid var(--border); }
.vx-toolbar-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.vx-cliente { flex:1 1 260px; position:relative; }
.vx-cliente-sel { display:flex; align-items:center; gap:10px; padding:7px 12px; border:1.5px solid var(--border); border-radius:var(--r-md);
  background:var(--surface); cursor:pointer; min-height:46px; width:100%; text-align:left; }
.vx-cliente-sel.vazio { border-style:dashed; color:var(--text-3); }
.vx-cliente-sel b { font-size:14px; }
.vx-cliente-sel small { display:block; font-size:11.5px; color:var(--text-3); }
.vx-dropdown { position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:20; max-height:340px; overflow:auto;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-lg); }
.vx-dropdown-busca { padding:8px; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--surface); }
.vx-dropdown-busca input { width:100%; padding:9px 10px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--surface); color:var(--text); }
.vx-dropdown button.opcao { display:flex; width:100%; text-align:left; gap:10px; align-items:center; padding:10px 12px; border-bottom:1px solid var(--border); }
.vx-dropdown button.opcao:hover { background:var(--surface-2); }
.vx-dropdown button.novo { color:var(--accent-deep); font-weight:700; }
.vx-search { flex:2 1 260px; display:flex; align-items:center; gap:8px; padding:0 12px; min-height:46px;
  border:1.5px solid var(--border); border-radius:var(--r-md); background:var(--surface); color:var(--text-3); }
.vx-search input { flex:1; border:none; outline:none; background:transparent; color:var(--text); font-size:14px; }
.vx-seg { display:inline-flex; padding:3px; border-radius:var(--r-md); background:var(--surface-2); border:1px solid var(--border); }
.vx-seg button { padding:8px 14px; border-radius:calc(var(--r-md) - 3px); font-size:13px; font-weight:600; color:var(--text-2); }
.vx-seg button.on { background:var(--surface); color:var(--brand); box-shadow:var(--shadow-xs); }
.vx-chips { display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
.vx-chips::-webkit-scrollbar { display:none; }
.vx-chip { flex-shrink:0; padding:7px 14px; border-radius:999px; border:1px solid var(--border); background:var(--surface);
  font-size:12.5px; font-weight:600; color:var(--text-2); }
.vx-chip.on { background:var(--brand); border-color:var(--brand); color:#fff; }

/* Grade de produtos */
.vx-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:14px; }
.vx-prod { position:relative; display:flex; flex-direction:column; background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-xs); transition:border-color .15s, box-shadow .15s, transform .15s; }
.vx-prod:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); }
.vx-prod.no-pedido { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-rgbtint); }
.vx-prod.esgotado .vx-prod-img { filter:grayscale(.8); opacity:.7; }
.vx-prod-img { aspect-ratio:4/3; background:var(--surface-2); display:grid; place-items:center; overflow:hidden; }
.vx-prod-img img { width:100%; height:100%; object-fit:cover; }
.vx-prod-img .ico { font-size:42px; color:var(--text-3); opacity:.55; }
.vx-prod-badge { position:absolute; top:8px; left:8px; padding:3px 8px; border-radius:999px; font-size:11px; font-weight:700; }
.vx-prod-badge.ok   { background:rgba(36,186,120,.92); color:#fff; }
.vx-prod-badge.baixo{ background:rgba(230,152,37,.95); color:#fff; }
.vx-prod-badge.sem  { background:rgba(92,100,109,.9); color:#fff; }
.vx-prod-qtdtag { position:absolute; top:8px; right:8px; min-width:26px; height:26px; padding:0 7px; border-radius:999px;
  background:var(--accent); color:#fff; font-size:12px; font-weight:800; display:grid; place-items:center; box-shadow:var(--shadow-sm); }
.vx-prod-body { padding:10px 12px 12px; display:flex; flex-direction:column; gap:4px; flex:1; }
.vx-prod-body .cat { font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-3); font-weight:700; }
.vx-prod-body .nome { font-size:13.5px; font-weight:600; line-height:1.3; color:var(--text);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:35px; }
.vx-prod-body .cod { font-size:11px; color:var(--text-3); font-family:var(--font-mono); }
.vx-prod-body .preco { margin-top:auto; padding-top:6px; font-family:var(--font-display); font-size:19px; font-weight:800; color:var(--brand); }
.vx-prod-body .preco small { font-size:11px; font-weight:600; color:var(--text-3); margin-left:4px; }
.vx-qtd { display:flex; align-items:center; gap:6px; margin-top:8px; }
.vx-qtd button { width:38px; height:38px; flex-shrink:0; border-radius:var(--r-md); display:grid; place-items:center;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text); transition:background .12s; }
.vx-qtd button.mais { background:var(--accent); border-color:var(--accent); color:#fff; }
.vx-qtd button:disabled { opacity:.4; cursor:not-allowed; }
.vx-qtd input { flex:1; min-width:0; height:38px; text-align:center; font-weight:700; font-size:15px;
  border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); color:var(--text); }
.vx-mais { display:flex; justify-content:center; padding:6px 0 0; }

/* Barra flutuante do carrinho */
.vx-cartbar { position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:40; width:min(640px, calc(100vw - 32px));
  display:flex; align-items:center; gap:14px; padding:10px 10px 10px 18px; border-radius:999px; color:#fff;
  background:#122539; box-shadow:0 14px 34px rgba(18,37,57,.35); animation:vx-subir .25s var(--ease); }
.vx-cartbar .info { flex:1; min-width:0; }
.vx-cartbar .info small { display:block; opacity:.75; font-size:11.5px; }
.vx-cartbar .info b { font-family:var(--font-display); font-size:18px; }
.vx-cartbar button { background:var(--accent); color:#fff; padding:11px 18px; border-radius:999px; font-weight:700; display:inline-flex; gap:8px; align-items:center; }
@keyframes vx-subir { from { transform:translate(-50%, 20px); opacity:0; } to { transform:translate(-50%, 0); opacity:1; } }

/* Painel lateral (revisão do pedido / detalhe) — folha deslizante no celular */
.vx-scrim { position:fixed; inset:0; background:rgba(8,16,25,.45); z-index:1100; animation:vx-fade .2s; }
.vx-sheet { position:fixed; top:0; right:0; bottom:0; width:min(480px, 100vw); z-index:1110; display:flex; flex-direction:column;
  background:var(--surface); box-shadow:var(--shadow-lg); animation:vx-lado .25s var(--ease); }
.vx-sheet-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 18px; border-bottom:1px solid var(--border); }
.vx-sheet-head h3 { margin:0; font-size:16px; }
.vx-sheet-body { flex:1; overflow:auto; padding:14px 18px; display:flex; flex-direction:column; gap:14px; }
.vx-sheet-foot { padding:14px 18px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:10px; background:var(--surface); }
.vx-linha { display:flex; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid var(--border); }
.vx-linha b { display:block; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vx-linha small { color:var(--text-3); font-size:12px; }
.vx-linha .vx-qtd { margin-top:0; width:130px; }
.vx-linha .vx-qtd button { width:32px; height:32px; }
.vx-linha .vx-qtd input { height:32px; font-size:13.5px; }
.vx-tot { display:flex; justify-content:space-between; font-size:13px; color:var(--text-2); }
.vx-tot.grande { font-size:18px; font-weight:800; color:var(--text); font-family:var(--font-display); }
.vx-label { font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-3); margin-bottom:6px; display:block; }
.vx-btn-full { width:100%; justify-content:center; padding:13px; font-size:15px; }
.vx-aviso { padding:10px 12px; border-radius:var(--r-md); font-size:12.5px; background:rgba(230,152,37,.14); color:var(--warn-deep); }
.vx-erro { padding:10px 12px; border-radius:var(--r-md); font-size:12.5px; background:rgba(215,71,69,.12); color:var(--danger); }
@keyframes vx-fade { from { opacity:0 } to { opacity:1 } }
@keyframes vx-lado { from { transform:translateX(30px); opacity:0 } to { transform:translateX(0); opacity:1 } }
@keyframes vx-baixo { from { transform:translateY(40px); opacity:0 } to { transform:translateY(0); opacity:1 } }
@media (max-width:640px) {
  .vx-sheet { top:auto; width:100vw; max-height:92vh; border-radius:var(--r-xl) var(--r-xl) 0 0; animation:vx-baixo .25s var(--ease); }
  .vx-grid { grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
  .vx-prod-body .preco { font-size:16px; }
  .vx-hero { padding:18px; }
  .vx-hero h1 { font-size:19px; }
}

/* Linha do tempo do pedido */
.vx-timeline { display:flex; flex-direction:column; }
.vx-step { display:flex; gap:12px; position:relative; padding-bottom:14px; }
.vx-step::before { content:""; position:absolute; left:11px; top:24px; bottom:0; width:2px; background:var(--border); }
.vx-step:last-child::before { display:none; }
.vx-step .dot { width:24px; height:24px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; font-size:12px;
  background:var(--surface-2); border:2px solid var(--border); color:var(--text-3); z-index:1; }
.vx-step.feito .dot { background:var(--accent); border-color:var(--accent); color:#fff; }
.vx-step.atual .dot { background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:0 0 0 4px var(--brand-tint); }
.vx-step.erro .dot { background:var(--danger); border-color:var(--danger); color:#fff; }
.vx-step b { font-size:13px; }
.vx-step small { display:block; color:var(--text-3); font-size:11.5px; }

/* ── Destaque "pedidos aguardando aprovação" (Dashboard e Kanban da empresa) ── */
.pv-alerta { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:0 0 18px; padding:16px 18px;
  border-radius:var(--r-lg); color:#3D2400; border:1px solid rgba(230,152,37,.55);
  background:linear-gradient(120deg, #FFE7B8 0%, #FFD58A 55%, #FFC062 100%);
  box-shadow:0 10px 26px rgba(230,152,37,.28); animation:pv-entrar .35s var(--ease); }
.pv-alerta-ico { position:relative; width:48px; height:48px; flex-shrink:0; border-radius:50%; display:grid; place-items:center;
  background:#E69825; color:#fff; font-size:24px; box-shadow:0 4px 12px rgba(167,92,0,.35); }
.pv-alerta-ico .ico { animation:pv-sino 2.4s ease-in-out infinite; transform-origin:50% 10%; }
.pv-alerta-pulso { position:absolute; inset:-6px; border-radius:50%; border:3px solid rgba(230,152,37,.7); animation:pv-pulso 1.8s ease-out infinite; }
.pv-alerta-txt { flex:1; min-width:220px; display:flex; flex-direction:column; gap:4px; }
.pv-alerta-txt b { font-family:var(--font-display); font-size:17px; font-weight:800; color:#3D2400; }
.pv-alerta-valor { margin-left:8px; padding:2px 9px; border-radius:999px; background:rgba(255,255,255,.65); font-size:14px; }
.pv-alerta-txt small { display:flex; flex-wrap:wrap; gap:10px; font-size:12.5px; color:#6B4100; }
.pv-tag-externo { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:999px; background:#26689B; color:#fff; font-weight:700; }
.pv-alerta-lista { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.pv-alerta-item { padding:4px 10px; border-radius:var(--r-md); background:rgba(255,255,255,.6); font-size:12px; color:#3D2400; }
.pv-alerta-item b { font-size:12px; font-family:var(--font-mono); }
.pv-alerta-item em { font-style:normal; margin-left:4px; color:#26689B; font-weight:700; }
.pv-alerta-btn { flex-shrink:0; display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:var(--r-lg);
  background:#122539; color:#fff; font-weight:700; box-shadow:0 6px 16px rgba(18,37,57,.3); transition:transform .15s var(--ease); }
.pv-alerta-btn:hover { transform:translateY(-1px); }
.pv-card-externo { display:inline-flex; align-items:center; gap:4px; padding:1px 7px; border-radius:999px; font-size:10.5px; font-weight:700;
  background:#26689B; color:#fff; }
@keyframes pv-entrar { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
@keyframes pv-pulso { 0% { transform:scale(.85); opacity:.9; } 100% { transform:scale(1.35); opacity:0; } }
@keyframes pv-sino { 0%,70%,100% { transform:rotate(0); } 75% { transform:rotate(14deg); } 80% { transform:rotate(-12deg); } 85% { transform:rotate(8deg); } 90% { transform:rotate(-5deg); } }
@media (prefers-reduced-motion: reduce) {
  .pv-alerta, .pv-alerta-ico .ico, .pv-alerta-pulso { animation:none; }
}
@media (max-width:640px) { .pv-alerta-btn { width:100%; justify-content:center; } }

/* ── Condição de pagamento (pré-venda: pedido do vendedor externo e Kanban) ── */
.cp { display:flex; flex-direction:column; gap:12px; }
.cp-status { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; padding:10px 12px; border-radius:var(--r-md); font-size:13px; }
.cp-status .ico { margin-right:4px; }
.cp-status.falta { background:rgba(230,152,37,.14); color:var(--warn-deep); }
.cp-status.ok    { background:var(--accent-rgbtint); color:var(--accent-deep); }
.cp-status.sobra { background:rgba(215,71,69,.12); color:var(--danger); }
.cp-bloco { display:flex; flex-direction:column; gap:6px; }
.cp-titulo { font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-3); }
.cp-titulo small { text-transform:none; letter-spacing:0; font-weight:500; }
.cp-linha { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-2); font-size:13px; }
.cp-grow { flex:1; min-width:0; }
.cp-x { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; color:var(--text-3); }
.cp-x:hover { background:rgba(215,71,69,.12); color:var(--danger); }
.cp-form { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.cp-form .form-control { flex:1; min-width:140px; }
.cp-planos { display:flex; flex-wrap:wrap; gap:6px; }
.cp-plano { padding:7px 12px; border-radius:999px; border:1px solid var(--border); background:var(--surface); font-size:12.5px; font-weight:600; color:var(--text-2); }
.cp-plano:hover:not(:disabled) { border-color:var(--brand); color:var(--brand); }
.cp-plano.on { background:var(--brand); border-color:var(--brand); color:#fff; }
.cp-plano:disabled { opacity:.45; cursor:not-allowed; }
.cp-limpar { align-self:flex-start; font-size:12px; color:var(--danger); text-decoration:underline; }
.cp-dica { color:var(--text-3); font-size:11.5px; }

/* Modal da pré-venda: os blocos filhos não encolhem (a caixa de itens tem overflow:hidden e, sem isso,
   era espremida e cortada em vez de fazer o conteúdo rolar). */
.pv-modal-scroll > * { flex-shrink:0; }