/* ===== orcamentos.html — estilos da página =====
   Saiu de um <style> inline (HTML vai com `no-store` e voltava inteiro a
   cada carregamento). Aqui fora é asset versionado por ?v=, cache de 1 ano.
   O <link> ficou na MESMA POSIÇÃO do <style> — a cascata não mudou.
   ⚠️ Ao mexer aqui, BUMPE o ?v= do <link> em orcamentos.html. */
.ui-sidebar { height: calc(100vh / 0.9); position: sticky; top: 0; }
.sidebar-brand { display:flex; align-items:center; gap:10px; padding:6px 14px 10px; margin-bottom:4px; }
.sidebar-brand .logo { width:32px; height:32px; border-radius:10px; background:var(--brand-color,#660099); display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; }
.sidebar-brand .name { font-weight:700; font-size:16px; }
.page-head { display:flex; align-items:center; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.page-head h1 { font-size:26px; flex:1; min-width:200px; letter-spacing:-0.03em; }
.filter-bar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.filter-bar button { font-size:12.5px; padding:7px 14px; border-radius:var(--r-pill); border:0.5px solid var(--border); background:var(--bg-base); color:var(--text-secondary); cursor:pointer; }
.filter-bar button.active { background:var(--accent); color:#fff; border-color:var(--accent); }
/* Busca da lista. Fica na MESMA linha dos filtros de tipo (empurrada pela direita)
   e cai pra linha de baixo sozinha no celular, pelo flex-wrap da .filter-bar. */
.list-search { position:relative; margin-left:auto; display:flex; align-items:center; }
.list-search input { width:280px; max-width:100%; font-size:12.5px; padding:7px 30px 7px 32px; border-radius:var(--r-pill); border:0.5px solid var(--border); background:var(--bg-base); color:var(--text-primary); outline:none; }
.list-search input:focus { border-color:var(--accent); }
.list-search .ico { position:absolute; left:12px; font-size:12px; color:var(--text-tertiary); pointer-events:none; }
.list-search .clr { position:absolute; right:4px; border:0; background:transparent; color:var(--text-tertiary); cursor:pointer; padding:4px 7px; font-size:12px; line-height:1; }
.list-count { font-size:12.5px; color:var(--text-tertiary); margin:-8px 0 12px; }
.list-count b { color:var(--text-primary); }
.list-count .lnk { border:0; background:transparent; color:var(--accent); cursor:pointer; font-size:12.5px; padding:0 2px; text-decoration:underline; }
/* 2ª linha de filtros: status + período. Vira coluna no celular pelo flex-wrap. */
.filter-bar2 { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin:-6px 0 14px; }
.filter-bar2 .ff { display:flex; flex-direction:column; gap:4px; }
.filter-bar2 .ff > label { font-size:11px; text-transform:uppercase; letter-spacing:.04em; font-weight:700; color:var(--text-tertiary); }
.filter-bar2 select, .filter-bar2 input[type=date] { font-size:12.5px; padding:6px 10px; border-radius:var(--r-sm,8px); border:0.5px solid var(--border); background:var(--bg-base); color:var(--text-primary); outline:none; }
.filter-bar2 select:focus, .filter-bar2 input[type=date]:focus { border-color:var(--accent); }
.filter-bar2 .chips { display:flex; gap:6px; flex-wrap:wrap; }
.filter-bar2 .chips button { font-size:12px; padding:6px 12px; border-radius:var(--r-pill); border:0.5px solid var(--border); background:var(--bg-base); color:var(--text-secondary); cursor:pointer; }
.filter-bar2 .chips button.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.filter-bar2 .ff-clear { margin-left:auto; align-self:flex-end; }
/* Navegador de MÊS. A lista abre no mês corrente e se anda de mês em mês: o
   histórico inteiro numa tela só pesa (o payload é dominado pelos itens dos
   pedidos) e apaga a leitura de "como foi este mês". */
.mes-bar { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:-6px 0 12px; }
.mes-bar .mes-arrow { width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:0.5px solid var(--border); background:var(--bg-base); color:var(--text-secondary); cursor:pointer; font-size:11px; }
.mes-bar .mes-arrow:disabled { opacity:.35; cursor:default; }
.mes-bar select#mes-sel { font-size:13.5px; font-weight:700; padding:6px 12px; border-radius:var(--r-pill); border:0.5px solid var(--border); background:var(--bg-base); color:var(--text-primary); outline:none; min-width:190px; }
.mes-bar select#mes-sel:focus { border-color:var(--accent); }
.mes-bar .mes-tudo { font-size:12px; padding:6px 12px; border-radius:var(--r-pill); border:0.5px solid var(--border); background:var(--bg-base); color:var(--text-secondary); cursor:pointer; }
.mes-bar .mes-tudo.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.mes-bar .mes-hint { font-size:12px; color:var(--text-tertiary); }
/* Ranking por vendedor */
.rank-wrap { overflow-x:auto; }
.rank-t { width:100%; border-collapse:collapse; font-size:13px; }
.rank-t th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-tertiary); font-weight:700; padding:8px 10px; border-bottom:0.5px solid var(--border); white-space:nowrap; }
.rank-t td { padding:10px; border-bottom:0.5px solid var(--border); vertical-align:middle; }
.rank-t tbody tr { cursor:pointer; }
.rank-t tbody tr:hover { background:var(--bg-hover); }
.rank-t .num { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.rank-t .c { text-align:center; }
.rank-t .vend { font-weight:800; color:var(--accent); }
.rank-t .aberto { font-weight:700; color:var(--text-secondary); }
.rank-t tfoot td { padding:10px; font-weight:800; border-top:1px solid var(--border); }
.rank-pos { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--bg-hover); font-size:11px; font-weight:800; color:var(--text-secondary); margin-right:8px; }
.rank-pos.p1 { background:#fde68a; color:#7c5b06; }
.rank-bar { height:5px; border-radius:3px; background:var(--bg-hover); overflow:hidden; margin-top:5px; }
.rank-bar > i { display:block; height:100%; background:var(--accent); }
.rank-note { font-size:12px; color:var(--text-tertiary); line-height:1.55; margin:10px 2px 0; }
/* --- Aba Produção (o que produzir / o que tem que sair) --- */
.prod-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.prod-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.prod-seg { display:inline-flex; border:0.5px solid var(--border); border-radius:9px; overflow:hidden; }
.prod-seg button { border:0; background:var(--bg-elevated); padding:7px 13px; font-size:12.5px; font-weight:700; color:var(--text-secondary); cursor:pointer; }
.prod-seg button + button { border-left:0.5px solid var(--border); }
.prod-seg button.on { background:var(--accent); color:#fff; }
.prod-bar select { border:0.5px solid var(--border); border-radius:9px; padding:7px 10px; font-size:12.5px; background:var(--bg-elevated); color:var(--text-primary); }
.prod-chk { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text-secondary); cursor:pointer; }
.prod-kpis { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.prod-kpi { border:0.5px solid var(--border); border-radius:12px; padding:9px 14px; min-width:120px; background:var(--bg-elevated); }
.prod-kpi span { display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-tertiary); font-weight:700; }
.prod-kpi b { display:block; font-size:21px; line-height:1.2; }
.prod-kpi i { display:block; font-size:11px; font-style:normal; color:var(--text-tertiary); margin-top:1px; }
.prod-t .prod-nome { font-weight:700; font-size:13.5px; }
.prod-t .prod-nome i { color:var(--text-tertiary); font-size:11px; width:12px; }
.prod-meta { font-size:11px; color:var(--text-tertiary); margin-top:2px; }
.prod-qtd { display:inline-block; min-width:40px; padding:3px 9px; border-radius:8px; background:var(--bg-hover); font-weight:800; font-size:14px; }
.prod-vars { display:flex; flex-direction:column; gap:2px; margin-top:5px; }
.prod-vars span { font-size:11.5px; color:var(--text-secondary); background:#FFF8E1; border-left:3px solid #F5A623; border-radius:0 5px 5px 0; padding:2px 7px; }
.prod-itens { font-size:12px; color:var(--text-secondary); }
.prod-det > td { background:var(--bg-hover); padding:0 !important; }
.prod-sub { width:100%; border-collapse:collapse; font-size:12px; }
.prod-sub td { padding:7px 10px; border-bottom:0.5px solid var(--border); }
.prod-sub tr:last-child td { border-bottom:0; }
.prod-sub-det { font-size:11px; color:var(--text-tertiary); margin-top:2px; }
.prod-mais { font-size:11.5px; color:var(--text-tertiary); padding:7px 10px; }
@media (max-width: 820px){ .prod-bar #prod-pdf { margin-left:0 !important; } }
.o-list { display:flex; flex-direction:column; gap:9px; }
.o-card { background:var(--bg-elevated); border:0.5px solid var(--border); border-left:3px solid var(--accent); border-radius:var(--r-md); padding:12px 14px; display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; cursor:pointer; transition:background .12s; }
.o-card:hover { background:var(--bg-hover,rgba(0,0,0,.03)); }
.o-card.pedido { border-left-color:#0a66c2; }
.o-card.aprovado { border-left-color:#9634c7; }
/* Estoque já lançado: o botão fica "aceso" — clicar de novo estorna. */
.btn-est-on { background:rgba(30,122,69,.14) !important; border-color:rgba(30,122,69,.45) !important; color:var(--green,#1e7a45) !important; }
/* "já mandei pro cliente": check + quando foi o último envio (o histórico
   completo fica no title, que é onde cabe sem poluir o card). */
.selo-env { display:inline-flex; align-items:center; gap:2px; background:var(--green,#1e7a45); color:#fff;
    border-radius:999px; padding:1px 6px; font-size:9.5px; font-weight:800; margin-top:4px; }
.env-quando { display:block; font-size:9.5px; color:var(--text-tertiary); margin-top:2px; white-space:nowrap; }
.o-num { text-align:center; min-width:64px; }
.o-num .n { font-size:20px; font-weight:800; line-height:1; }
.o-num .t { font-size:10px; text-transform:uppercase; font-weight:700; color:var(--text-tertiary); margin-top:3px; }
.o-body { min-width:0; }
.o-body .cli { font-weight:700; font-size:14px; }
.o-body .meta { font-size:11.5px; color:var(--text-tertiary); display:flex; gap:10px; flex-wrap:wrap; margin-top:2px; }
.o-right { text-align:right; }
.o-total { font-size:16px; font-weight:800; color:var(--accent); }
.o-actions { display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end; margin-top:6px; }
.o-actions .ui-btn { padding:5px 9px; font-size:11px; }
.st-pill { font-size:10px; padding:2px 9px; border-radius:var(--r-pill); font-weight:700; text-transform:uppercase; }
.cat-pill { background:#f0ecfb; color:#5b3fa8; display:inline-flex; align-items:center; gap:4px; }
/* Select de status na lista: some com cara de <select> e mantém o visual de chip,
   herdando a cor do status (o style inline vem de stStyle). */
.st-live { font-size:10px; font-weight:700; text-transform:uppercase; border:none; border-radius:var(--r-pill);
    padding:2px 20px 2px 9px; cursor:pointer; appearance:none; -webkit-appearance:none; font-family:inherit;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 4.5L6 7.5L9 4.5' stroke='currentColor' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
    background-repeat:no-repeat; background-position:right 6px center; background-size:11px; }
.st-live:hover { filter:brightness(.95); }
.st-live:disabled { opacity:.6; cursor:wait; }
/* Pedido sem parcela lançada: o botão de Contas a Receber fica VERMELHO em vez de
   apagado — o motivo vem no title (hover). Sinaliza sem inchar a linha do card. */
.btn-fin-alert { color:#b3261e !important; border-color:#f0b4ae !important; background:#fdeaea !important;
    opacity:1 !important; cursor:help !important; }
.btn-fin-alert:hover { background:#fbdcda !important; }
/* Link de pagamento JÁ gerado — diferencia de "ainda não cobrei este pedido". */
.btn-pay-on { color:#33004C !important; border-color:#bf9ecf !important; background:#efe6f4 !important; }
.btn-pay-on:hover { background:#e4d5eb !important; }
/* Card de topo: pedidos que não chegaram no financeiro + geração em massa. */
.fin-top { display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; padding:12px 14px; border-radius:12px;
    background:#fff8e8; border:0.5px solid #f0c98a; }
.fin-top .ico { color:#c98a00; font-size:17px; margin-top:1px; }
.fin-top .txt { flex:1; font-size:12.5px; color:#7a5200; line-height:1.55; }
.fin-top .txt b { color:#5c3d00; }
.cst-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
.cst-dots { display:flex; gap:4px; }
.cst-dot { width:18px; height:18px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; }
.cst-dot.on { border-color:var(--text-primary); }
.cst-label { flex:1; min-width:120px; }
.cst-sale { font-size:11.5px; color:var(--text-secondary); display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.cst-del { background:transparent; border:0; color:#b3261e; cursor:pointer; font-size:16px; padding:4px 8px; }
.cfg-empty { font-size:12.5px; color:var(--text-tertiary); padding:6px 0; }
.st-aberto { background:rgba(10,102,194,.12); color:#0a66c2; }
.st-aprovado { background:rgba(150,52,199,.14); color:#660099; }
.empty { padding:60px 20px; text-align:center; background:var(--bg-elevated); border:0.5px dashed var(--border-strong); border-radius:var(--r-md); color:var(--text-tertiary); }
.empty i { font-size:50px; opacity:0.4; display:block; margin-bottom:14px; }

/* Editor */
.ed-card { background:var(--bg-elevated); border:0.5px solid var(--border); border-radius:var(--r-md); padding:16px; margin-bottom:14px; }
.ed-card h3 { font-size:14px; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.ed-card h3 i { color:var(--accent); }
/* Zona de risco: nasce FECHADA, discreta e longe da barra de ações. O vermelho só
   aparece depois de aberta — fechada ela não deve competir por atenção com Salvar. */
.ed-danger { border:0.5px solid var(--border); border-radius:var(--r-md); background:var(--bg-elevated); margin:18px 0 14px; }
.ed-danger > summary { list-style:none; cursor:pointer; padding:11px 14px; font-size:12.5px; color:var(--text-tertiary); display:flex; align-items:center; gap:8px; user-select:none; }
.ed-danger > summary::-webkit-details-marker { display:none; }
.ed-danger > summary:hover { color:#b3261e; }
.ed-danger[open] { border-color:#f2c6c1; background:#fff6f5; }
.ed-danger[open] > summary { color:#b3261e; font-weight:600; border-bottom:0.5px solid #f2c6c1; }
.ed-danger-body { padding:12px 14px 14px; }
.ed-danger-body p { font-size:12.5px; color:var(--text-secondary); margin:0 0 8px; line-height:1.5; }
.ed-danger-body #del-btn { color:#b3261e; border-color:#f2c6c1; }
.del-warn { background:#fff6f5; border:0.5px solid #f2c6c1; border-radius:10px; padding:10px 12px; font-size:12.5px; color:#8c1d18; line-height:1.5; margin:0 0 14px; }
.del-alvo { font-size:13px; color:var(--text-secondary); margin:0 0 14px; padding:10px 12px; background:var(--bg-subtle,#f6f7f8); border-radius:10px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.ui-field label { display:block; font-size:12px; font-weight:600; margin-bottom:4px; }
.seg { display:inline-flex; border:0.5px solid var(--border-strong); border-radius:var(--r-pill); overflow:hidden; }
.seg button { padding:8px 18px; font-size:13px; background:var(--bg-base); border:none; cursor:pointer; color:var(--text-secondary); font-weight:600; }
.seg button.active { background:var(--accent); color:#fff; }
.seg button:disabled { opacity:.55; cursor:not-allowed; }
.items-table { width:100%; border-collapse:collapse; font-size:12.5px; }
.items-table th { text-align:left; padding:6px 6px; color:var(--text-tertiary); font-size:11px; text-transform:uppercase; font-weight:600; border-bottom:1px solid var(--border); white-space:nowrap; }
.items-table td { padding:4px 4px; vertical-align:top; }
.items-table input { width:100%; padding:6px 6px; border:0.5px solid var(--border); border-radius:6px; font-family:inherit; font-size:12.5px; background:var(--bg-base); color:var(--text-primary); }
.items-table input[readonly] { background:var(--bg-hover); font-weight:700; }

/* Celular (17/09/2026): a tabela de itens tinha 649px numa tela de 340px — o
   vendedor rolava de lado duas telas pra digitar a quantidade. Cada linha vira
   um cartão; SKU/Un./NCM saem (ficam no computador). */
@media (max-width: 820px) {
  .items-table thead { display:none; }
  .items-table, .items-table tbody { display:block; width:100%; }
  .items-table tr[data-i] { display:grid; grid-template-columns:1fr 1fr; gap:6px 10px;
      border:1px solid var(--border); border-radius:12px; padding:10px; margin-bottom:10px; }
  .items-table tr[data-i] > td { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0; }
  .items-table tr[data-i] > td:first-child, .items-table tr[data-i] > td.it-acoes { grid-column:1/-1; }
  .items-table td[data-r]::before { content:attr(data-r); font-size:11.5px; font-weight:600; color:var(--text-secondary); white-space:nowrap; }
  .items-table tr[data-i] > td.col-prod { display:none; }
  .items-table input { font-size:16px; padding:8px; }          /* <16px faz o iPhone dar zoom */
  .items-table td[data-r] input { max-width:60%; text-align:right; }
  .items-table .it-acts { width:100%; display:flex; gap:8px; justify-content:flex-end; }
  .items-table .it-act { min-width:44px; min-height:44px; }
  .item-med > td, .item-detail > td { display:block; }
  .item-med, .item-detail.aberto { display:block; }
  .wrap-x { overflow-x:visible; }
}

/* Ações da linha do item: botões de verdade (fundo + borda) em vez de ícones
   soltos — do jeito antigo não pareciam clicáveis. */
.it-acts { display:flex; gap:4px; align-items:center; }
.it-act { background:var(--bg-elevated); border:0.5px solid var(--border); border-radius:6px; color:var(--text-secondary); cursor:pointer; font-size:13px; padding:6px 8px; line-height:1; transition:background .12s, color .12s, border-color .12s; }
.it-act:hover { background:var(--bg-hover); color:var(--text-primary); }
.it-del { color:#b3261e; }
.it-del:hover { background:#b3261e; color:#fff; border-color:#b3261e; }
.it-dup:hover { border-color:var(--accent); color:var(--accent); }
.it-more.on { color:var(--accent); border-color:var(--accent); }
.item-detail { display:none; }
.item-detail.aberto { display:table-row; }
.item-detail > td { background:var(--bg-hover); border-radius:0 0 8px 8px; }
.k-prodcell { display:flex; align-items:center; gap:7px; }
.k-prodcell .k-nome { flex:1; min-width:120px; }
.tier-tag { flex:0 0 auto; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; padding:2px 6px; border-radius:999px; background:#fff3e0; color:#b26a00; white-space:nowrap; }
.k-thumb { width:34px; height:34px; border-radius:6px; object-fit:cover; flex:0 0 auto; cursor:pointer; border:0.5px solid var(--border); background:var(--bg-hover); }
.k-thumb.ph { display:flex; align-items:center; justify-content:center; color:var(--text-tertiary); font-size:15px; }
input.money { text-align:right; }
.imgpick { display:flex; gap:6px; flex-wrap:wrap; }
.imgpick img { width:52px; height:52px; object-fit:cover; border:2px solid transparent; border-radius:6px; cursor:pointer; }
.imgpick img.main { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.imgpick .pk-wrap { position:relative; display:inline-block; }
.imgpick .pk-zoom { position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:5px; border:none; background:rgba(0,0,0,.55); color:#fff; font-size:10px; line-height:18px; text-align:center; cursor:zoom-in; padding:0; }
#lightbox { position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:10000; display:none; align-items:center; justify-content:center; padding:20px; cursor:zoom-out; }
#lightbox.on { display:flex; }
#lightbox img { max-width:96vw; max-height:92vh; object-fit:contain; border-radius:8px; box-shadow:0 8px 40px rgba(0,0,0,.5); background:#fff; }
#lightbox .lb-close { position:absolute; top:14px; right:18px; color:#fff; font-size:34px; line-height:1; cursor:pointer; font-weight:300; user-select:none; }
.tot-box { margin-left:auto; max-width:340px; margin-top:6px; }
.tot-box .row { display:flex; justify-content:space-between; padding:5px 0; border-bottom:1px dashed var(--border); font-size:13px; }
.tot-box .grand { border-bottom:none; border-top:2px solid var(--accent); padding-top:8px; margin-top:4px; font-size:18px; font-weight:800; }
.tot-box .grand b { color:var(--accent); }
/* Parcela (13/09/2026): cada uma é um bloco com rótulo em cada campo e TODOS os
   controles na mesma altura. Antes os inputs não tinham .ui-input (borda crua do
   navegador) e, com menos de 2 contas bancárias, o grid ganhava uma coluna vazia
   — o botão de excluir ia parar longe e a linha "quebrava". */
.parc-row { display:grid; grid-template-columns:36px minmax(110px,1fr) minmax(140px,1fr) minmax(180px,1.6fr) minmax(150px,1.2fr) 40px; gap:10px; align-items:end; }
.parc-row.sem-banco { grid-template-columns:36px minmax(110px,1fr) minmax(140px,1fr) minmax(200px,2.2fr) 40px; }
.parc-row .pc-f { display:flex; flex-direction:column; min-width:0; }
.parc-row .pc-f > label { font-size:11px; font-weight:600; color:var(--text-tertiary); margin:0 0 4px; white-space:nowrap; }
.parc-row .ui-input, .parc-row .p-forma-btn { height:40px; width:100%; box-sizing:border-box; margin:0; }
.parc-row .pc-money { position:relative; }
.parc-row .pc-money > span { position:absolute; left:11px; top:50%; transform:translateY(-50%); font-size:12px; color:var(--text-tertiary); pointer-events:none; }
.parc-row .pc-money .ui-input { padding-left:34px; text-align:right; font-variant-numeric:tabular-nums; font-weight:600; }
.parc-n { height:40px; display:grid; place-items:center; border-radius:10px; background:var(--accent-soft); color:var(--accent); font-weight:800; font-size:13px; }
.parc-row .it-del { width:40px; height:40px; padding:0; display:grid; place-items:center; border-radius:10px; }
@media (max-width: 720px) {
  .parc-row, .parc-row.sem-banco { grid-template-columns:36px 1fr 1fr; }
  .parc-row .pc-forma, .parc-row .pc-banco { grid-column:2 / -1; }
  .parc-row .it-del { grid-column:1; grid-row:1; width:36px; align-self:start; margin-top:19px; height:32px; }
  .parc-n { display:none; }
}
/* Faixa de cobrança, abaixo de cada parcela: PIX/boleto/link pelo Mercado Pago
   da empresa, o status enquanto espera e, quando cai, bruto/taxa/líquido. */
.parc-wrap { margin-bottom: 10px; padding: 10px 12px; border:0.5px solid var(--border); border-radius: 12px; background: var(--bg-base); }
.parc-wrap .parc-row { margin-bottom: 0; }
.parc-cob:empty { display:none; }
/* Campo VAZIO no editor do pedido ganha um fundo leve na cor do tema — mostra de
   relance o que falta preencher (pedido do dono, 13/09/2026). Quem marca é o
   marcarVazios() no fim do script; some assim que o campo recebe valor. */
#view-editor .campo-vazio, #view-editor .p-forma-btn:has(.fp-lbl.vazio) {
  background-color: color-mix(in srgb, var(--accent) 8%, var(--bg-elevated, #fff)) !important;
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border)) !important;
}
#view-editor .campo-vazio::placeholder { color: color-mix(in srgb, var(--accent) 45%, var(--text-tertiary)); }
.parc-cob { margin: 10px 0 0; padding: 7px 10px; border:0.5px solid var(--border); border-radius: 9px; background: var(--bg-hover); }
.parc-cob .cob-rot { font-size: 11.5px; color: var(--text-tertiary); margin-right: 4px; }
.parc-cob .cob-acoes { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.parc-cob .cob-btn, .parc-cob .cob-mini { font-size: 11.5px; padding: 4px 9px; }
.parc-cob .cob-top { font-size: 12.5px; display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.parc-cob .cob-qr { width: 132px; height: 132px; image-rendering: pixelated; background:#fff; padding:5px; border-radius:8px; display:block; margin-bottom:6px; }
.parc-cob .cob-linha { display:flex; gap:6px; flex-wrap:wrap; }
.parc-cob .cob-pago { display:flex; align-items:center; gap:7px; font-size:12.5px; color: var(--green,#1e7a45); }

/* ===== Seletor visual de forma de pagamento =====
   Era um <select> com 20 linhas de texto ("Boleto Itaú", "Boleto Bradesco"…) e
   o vendedor tinha que ler todas pra achar a certa. Agora o campo mostra a LOGO
   do banco escolhido e abre um seletor com as formas agrupadas e buscáveis — a
   logo é reconhecida pelo rótulo (App.formaPagamentoInfo), então forma nova
   cadastrada pelo master já aparece certa aqui. */
.p-forma-btn {
    display:flex; align-items:center; gap:9px; width:100%; min-width:0;
    border:0.5px solid var(--border-strong); border-radius:var(--r-sm);
    background:var(--bg-elevated); color:var(--text-primary);
    padding:5px 10px 5px 6px; height:38px; cursor:pointer; font-family:inherit; font-size:12.5px; text-align:left;
}
.p-forma-btn:hover { border-color:var(--accent); }
.p-forma-btn .fp-lbl { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; }
.p-forma-btn .fp-lbl.vazio { color:var(--text-tertiary); font-weight:500; }
.p-forma-btn > i { color:var(--text-tertiary); font-size:11px; flex:none; }
.p-forma-btn .fp-selo { width:42px; height:28px; border-radius:6px; }
.p-forma-btn .fp-selo img { max-width:92%; max-height:80%; }

.fp-modal { background:var(--bg-elevated); border-radius:var(--r-lg); width:100%; max-width:680px; max-height:86vh; display:flex; flex-direction:column; overflow:hidden; }
.fp-modal .fp-head { padding:16px 20px 12px; border-bottom:0.5px solid var(--divider); }
.fp-modal .fp-head h3 { margin:0 0 10px; font-size:16px; display:flex; align-items:center; gap:9px; }
.fp-modal .fp-head h3 i { color:var(--accent); }
.fp-modal .fp-head h3 button { margin-left:auto; background:none; border:0; cursor:pointer; color:var(--text-tertiary); font-size:22px; line-height:1; padding:0 4px; }
.fp-body { padding:14px 20px 18px; overflow-y:auto; }
.fp-grupo { font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--text-tertiary); margin:16px 0 9px; display:flex; align-items:center; gap:7px; }
.fp-grupo:first-child { margin-top:0; }
.fp-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:9px; }
/* A estrela fica por cima do card, no canto — marcar o padrão da empresa não é
   escolher a forma desta parcela, então precisa de um alvo separado do card. */
.fp-card-wrap { position:relative; }
.fp-card-wrap .fp-star {
    position:absolute; top:3px; right:3px; width:22px; height:22px; padding:0;
    border:0; border-radius:50%; background:transparent; cursor:pointer;
    color:var(--text-tertiary); font-size:11px; line-height:1;
}
.fp-card-wrap .fp-star:hover { background:var(--bg-hover); color:var(--text-secondary); }
.fp-card-wrap .fp-star.on { color:#f5a623; }
.fp-card.padrao { border-color:#f5a623; }
.fp-card {
    display:flex; flex-direction:column; align-items:center; gap:7px;
    padding:11px 8px 9px; border:1px solid var(--border); border-radius:12px;
    background:var(--bg-base); cursor:pointer; font-family:inherit; transition:border-color .12s, transform .12s, box-shadow .12s;
}
.fp-card:hover { border-color:var(--accent); transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,.08); }
.fp-card.sel { border-color:var(--accent); border-width:2px; padding:10px 7px 8px; background:var(--accent-soft); }
.fp-card .fp-nome { font-size:11.5px; font-weight:600; color:var(--text-primary); text-align:center; line-height:1.25; }
.fp-card .fp-sub { font-size:10px; color:var(--text-tertiary); }
.fp-vazio { padding:26px 10px; text-align:center; color:var(--text-tertiary); font-size:13px; }
@media (max-width:560px){ .fp-grid { grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:7px; } }
.contact-search { position:relative; }
.contact-results { position:absolute; top:100%; left:0; right:0; z-index:20; background:var(--bg-elevated); border:0.5px solid var(--border); border-radius:8px; box-shadow:0 8px 30px rgba(0,0,0,.15); max-height:240px; overflow:auto; display:none; }
.contact-results.show { display:block; }
.contact-results .r { padding:9px 12px; cursor:pointer; font-size:13px; border-bottom:0.5px solid var(--border); }
.contact-results .r:hover { background:var(--bg-hover); }
.prod-ac { position:fixed; z-index:9999; background:var(--bg-elevated); border:0.5px solid var(--border); border-radius:8px; box-shadow:0 8px 30px rgba(0,0,0,.18); max-height:300px; overflow:auto; display:none; }
.prod-ac.show { display:block; }
.prod-ac .pr { display:flex; align-items:center; gap:10px; padding:7px 10px; cursor:pointer; border-bottom:0.5px solid var(--border); }
.prod-ac .pr:last-child { border-bottom:0; }
.prod-ac .pr:hover, .prod-ac .pr.sel { background:var(--bg-hover); }
.prod-ac .pr img, .prod-ac .pr .noimg { width:38px; height:38px; border-radius:6px; object-fit:cover; flex:0 0 auto; background:var(--bg-hover); display:flex; align-items:center; justify-content:center; font-size:16px; }
.prod-ac .pr .pi { flex:1; min-width:0; }
.prod-ac .pr .pn { font-size:13px; font-weight:600; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.prod-ac .pr .pmeta { font-size:11.5px; color:var(--text-tertiary); }
.prod-ac .pr .ppr { font-size:12.5px; font-weight:700; color:var(--accent); white-space:nowrap; }
.prod-ac .empty { padding:10px 12px; font-size:12.5px; color:var(--text-tertiary); }
.wrap-x { overflow-x:auto; }
.cot-chip { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:3px 4px 3px 10px; border-radius:999px; background:var(--accent); color:#fff; }
.cot-chip a { color:#fff; text-decoration:none; display:inline-flex; align-items:center; gap:5px; }
.cot-chip button { width:22px; height:22px; border:0; border-radius:50%; background:rgba(255,255,255,.2); color:#fff; cursor:pointer; display:inline-grid; place-items:center; font-size:11px; }
.cot-link { background:none; border:0; padding:0; color:var(--accent); font-weight:600; cursor:pointer; font-size:12px; display:inline-flex; align-items:center; gap:5px; }
.cot-item { border:0.5px solid var(--border); border-radius:10px; padding:9px 11px; margin-bottom:8px; }
.cot-item .topo { display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:13px; }
.cot-item .topo .dt { color:var(--text-tertiary); font-size:12px; }
.cot-item .ops { display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.cot-item .ops button { font-size:12px; padding:5px 10px; }
.modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:9998; display:none; align-items:center; justify-content:center; padding:16px; }
.modal-bg.show { display:flex; }
/* O cartão do modal. Aceita os DOIS nomes de propósito: esta página nasceu com
   `.modal-card`, mas as outras 16 telas do sistema usam `.modal` — quem copia um
   modal de lá pra cá acabava com um card SEM FUNDO (transparente, com o formulário
   aparecendo por trás). O base.css já trata os dois como irmãos no override mobile. */
.modal-card, .modal { background:var(--bg-elevated); border-radius:14px; padding:20px; max-width:420px; width:100%; }
/* --- Expedição (separação + etiquetas em lote) --- */
.exp-card { background:var(--bg-elevated); border-radius:14px; padding:20px; width:100%; max-width:760px; max-height:92vh; display:flex; flex-direction:column; }
.exp-filters { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; margin-bottom:10px; }
.exp-filters .ui-field { margin:0; }
.exp-quick { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.exp-quick button { font-size:12px; padding:4px 10px; border-radius:999px; border:1px solid var(--border); background:var(--bg-elevated); color:var(--text-secondary); cursor:pointer; }
.exp-quick button.active { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
.exp-list { flex:1; overflow-y:auto; border:1px solid var(--border); border-radius:10px; margin-bottom:10px; min-height:120px; }
.exp-row { display:flex; align-items:center; gap:10px; padding:8px 10px; border-bottom:0.5px solid var(--border); font-size:13px; }
.exp-row:last-child { border-bottom:0; }
.exp-row .n { font-weight:700; min-width:52px; }
.exp-row .c { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.exp-row .m { font-size:11.5px; color:var(--text-tertiary); white-space:nowrap; }
.exp-row .lb { font-size:10.5px; padding:1px 7px; border-radius:999px; white-space:nowrap; }
.exp-row .lb.on { background:rgba(102,0,153,.12); color:#660099; }
.exp-row .lb.off { background:rgba(0,0,0,.06); color:var(--text-tertiary); }
.exp-empty { padding:26px 14px; text-align:center; color:var(--text-tertiary); font-size:13px; }
.exp-foot { display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:flex-end; }
.exp-opts { flex:1; display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--text-secondary); }
.exp-opts label { display:flex; align-items:center; gap:6px; cursor:pointer; }
@media (max-width:820px){ .grid2,.grid3{grid-template-columns:1fr;} .o-card{grid-template-columns:auto 1fr;} .o-right{grid-column:1/-1;text-align:left;} }
/* Selos E (estoque) e C (conta) na lista de pedidos */
.o-num .selos { display:flex; gap:3px; justify-content:center; margin-top:4px; }
.selo { width:17px; height:17px; border-radius:5px; font-size:10.5px; font-weight:800; display:inline-flex;
        align-items:center; justify-content:center; color:#fff; line-height:1; cursor:help; }
.selo-e { background:#0a66c2; }
.selo-c { background:#15803d; opacity:.55; }
.selo-c.pago { opacity:1; }
.selo.off { background:transparent; color:#8a8f98; border:1px dashed #b9bec6; }
/* 27/09/2026: pedidos de todas as origens num lugar só (origem, pagamento online, entrega digital, resumo por origem) */
.pag-on { display:inline-flex; align-items:center; gap:4px; }
.pag-on.ok { background:#e7f6ec; color:#17693a; }
.pag-on.wait { background:#fff4e0; color:#a15c00; }
.pag-on.bad { background:#fdeaea; color:#b3261e; }
.o-dig { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:6px; font-size:12px; color:var(--text-tertiary); }
.o-dig .o-dig-btn { padding:4px 10px; font-size:12px; display:inline-flex; align-items:center; gap:6px; }
.o-origens { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:8px; margin:0 0 12px; }
.o-orig { display:flex; align-items:center; gap:10px; padding:10px 12px; border:0.5px solid var(--border); border-radius:12px; background:var(--bg-elevated); min-width:0; }
.o-orig > i { width:30px; height:30px; flex:0 0 30px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent); }
.o-orig div { min-width:0; display:flex; flex-direction:column; line-height:1.3; }
.o-orig b { font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.o-orig span { font-size:11.5px; color:var(--text-tertiary); }

/* ---- Variação = produto filho (08/10/2026): chip na linha + escolha da variação ---- */
.var-chip { display:inline-flex; align-items:center; gap:6px; margin-left:6px; padding:3px 9px; border-radius:999px; border:1px solid var(--accent-border, #d8c4ef); background:var(--accent-subtle, #f4ecfb); color:var(--accent, #660099); font-size:11.5px; font-weight:600; cursor:pointer; white-space:nowrap; max-width:160px; overflow:hidden; text-overflow:ellipsis; flex-shrink:0; }
.var-chip i { font-size:11px; }
.var-chip span { overflow:hidden; text-overflow:ellipsis; }
.vx-bg { z-index:10050; }
.vx-card { max-width:560px; max-height:calc(100vh - 32px); display:flex; flex-direction:column; }
.vx-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.vx-head h3 { margin:0; font-size:17px; display:flex; align-items:center; gap:10px; }
.vx-x { width:34px; height:34px; border-radius:8px; border:0; background:transparent; color:var(--text-secondary); cursor:pointer; font-size:16px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.vx-x:hover { background:var(--bg-hover, rgba(0,0,0,.06)); }
.vx-sub { font-size:12.5px; color:var(--text-secondary); margin-bottom:12px; line-height:1.45; }
.vx-busca { margin-bottom:10px; }
.vx-lista { overflow:auto; display:flex; flex-direction:column; gap:6px; min-height:0; }
.vx-op { display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:8px 10px; border:1px solid var(--border); border-radius:10px; background:var(--bg-base); color:var(--text-primary); cursor:pointer; font:inherit; }
.vx-op:hover { border-color:var(--accent, #660099); }
.vx-op.on { border-color:var(--accent, #660099); box-shadow:0 0 0 2px var(--accent-subtle, #f4ecfb); }
.vx-op.dis { opacity:.5; cursor:not-allowed; }
.vx-op img, .vx-noimg { width:38px; height:38px; border-radius:8px; object-fit:cover; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; background:var(--bg-elevated); }
.vx-t { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.vx-t b { font-size:13.5px; }
.vx-t small { font-size:11.5px; color:var(--text-secondary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vx-st { font-size:11.5px; font-weight:600; color:var(--text-secondary); white-space:nowrap; flex-shrink:0; }
.vx-st.ok { color:#15803d; } .vx-st.esg { color:#b3261e; } .vx-st.off { color:var(--text-tertiary); }
.vx-acts { display:flex; justify-content:flex-end; margin-top:12px; }
@media (max-width:520px){ .vx-st { white-space:normal; text-align:right; max-width:84px; } }

/* Validade do orçamento + estoque insuficiente (08/10/2026) */
.val-st { display:block; font-size:11.5px; color:var(--text-tertiary); margin-top:4px; line-height:1.3; }
.val-st.venc { color:#b3261e; font-weight:600; }
.ed-falta { border:1px solid #f1b9b3; background:#fff4f2; color:#7a1d14; border-radius:12px; padding:12px 14px; margin-bottom:14px; }
.ed-falta .falta-head { display:flex; align-items:center; gap:8px; font-size:14px; }
.ed-falta ul { margin:8px 0 8px 20px; padding:0; font-size:13px; line-height:1.55; }
.ed-falta .falta-pe { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:12px; }
.ed-falta .falta-pe .ui-btn { display:inline-flex; align-items:center; gap:7px; }
.ed-falta .sb, .falta-card .sb { color:inherit; opacity:.8; }
.falta-bg { z-index:10050; }
.falta-card { max-width:520px; }
.falta-mhead { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.falta-mhead h3 { margin:0; font-size:17px; display:flex; align-items:center; gap:10px; }
.falta-mhead h3 i { color:#c2410c; }
.falta-lista { margin:6px 0 10px 18px; padding:0; font-size:13.5px; line-height:1.6; }
.falta-txt { font-size:12.5px; margin:0 0 6px; line-height:1.5; }
.falta-acts { display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; margin-top:12px; }
.falta-acts .ui-btn { display:inline-flex; align-items:center; gap:7px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ed-falta { background:rgba(180,35,24,.14); color:#fecaca; border-color:rgba(248,113,113,.35); } }
:root[data-theme="dark"] .ed-falta { background:rgba(180,35,24,.14); color:#fecaca; border-color:rgba(248,113,113,.35); }
.grid-datas { flex:1 1 560px; min-width:280px; grid-template-columns:minmax(64px,.55fr) repeat(3, minmax(138px,1fr)); align-items:start; }
@media (max-width:820px){ .grid-datas { grid-template-columns:1fr 1fr; flex-basis:100%; } }
@media (max-width:420px){ .grid-datas { grid-template-columns:1fr; } }