:root{
  /* Fundo verde-sálvia da identidade: verde de verdade, mas claro o suficiente
     pra ler no sol com o celular na mão. O verde escuro (--pine-dark) segue
     só no cabeçalho e no login, como já era. */
  --bg: #DFEBDB;
  --surface: #FFFFFF;
  --surface-2: #EDF4EA;
  --papel: #F1ECDC;      /* tom quente, só pra promissória (documento) */
  --ink: #221F1A;
  --ink-muted: #837C6C;
  --pine: #0B6E2B;
  --pine-dark: #123A1F;
  --pine-light: #12923A;
  --clay: #A9821E;
  --clay-light: #F3E5C0;
  --gold: #FFE9A6;
  --green: #178F3C;
  --green-light: #E3F0E2;
  --red: #C0392B;
  --red-light: #FBEAE8;
  --border: rgba(34,31,26,0.09);
  --border-soft: rgba(34,31,26,0.07);
  --shadow-xs: 0 1px 2px rgba(20,20,20,0.05);
  --shadow-sm: 0 1px 3px rgba(20,20,20,0.07), 0 1px 2px rgba(20,20,20,0.05);
  --shadow-md: 0 4px 16px rgba(20,20,20,0.08), 0 1px 3px rgba(20,20,20,0.05);
  --shadow-lg: 0 16px 36px rgba(20,20,20,0.14), 0 4px 10px rgba(20,20,20,0.07);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 20px;
  --ease: cubic-bezier(.4,0,.2,1);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  letter-spacing:-0.01em;
}
::selection{ background: var(--clay-light); color:var(--pine); }
a{ color:inherit; }
button, input, select, textarea, a{ touch-action:manipulation; }
/* O celular dá zoom sozinho ao tocar num campo com fonte menor que 16px (regra do
   iOS; o Android faz parecido). Quase todo campo aqui era menor, então o app ficava
   "pulando" a cada toque. Com 16px no celular o zoom automático para — e o
   pinça-pra-ampliar continua funcionando pra quem precisar. */
@media (max-width:820px){
  input, select, textarea{ font-size:16px !important; }
  .qtd-stepper input{ font-size:16px !important; }
}

.app{ max-width: 1180px; margin: 0 auto; padding: 0 20px 80px; }
header.top{
  background: linear-gradient(180deg, var(--pine-dark) 0%, #0B2415 100%); color: #F6F4EE;
  padding: 24px 20px 0; margin: 0 0 28px;
}
header.top .inner{ max-width:1180px; margin:0 auto; }
header.top h1{
  font-family:'Inter', sans-serif;
  font-size: 22px; font-weight: 800; letter-spacing:-0.02em; margin: 0 0 2px;
}
header.top .sub{ color:rgba(245,241,232,0.65); font-size:12.5px; margin-bottom:20px; font-weight:500; }
nav.tabs{ display:flex; gap:2px; overflow-x:auto; background:rgba(0,0,0,0.18); border-radius:12px 12px 0 0; padding:5px 5px 0; -ms-overflow-style:none; scrollbar-width:none; }
nav.tabs::-webkit-scrollbar{ display:none; }
nav.tabs button{
  background:transparent; border:none; color:rgba(245,241,232,0.62); padding:11px 16px;
  font-size:13.5px; font-weight:600; cursor:pointer; border-radius:10px 10px 0 0;
  white-space:nowrap; transition: color .15s var(--ease), background-color .15s var(--ease);
}
nav.tabs button.active{ background:var(--bg); color:var(--pine); }
nav.tabs button:hover:not(.active){ background: rgba(255,255,255,0.08); color:#fff; }
nav.tabs button{ position:relative; }
.nav-badge{
  position:absolute; top:3px; right:3px; background:var(--red); color:#fff;
  font-size:10px; font-weight:700; line-height:1; padding:3px 5.5px; border-radius:10px;
  animation: pulse-badge 1.8s infinite; box-shadow:0 0 0 2px var(--pine-dark);
}
@keyframes pulse-badge{ 0%{transform:scale(1);} 50%{transform:scale(1.15);} 100%{transform:scale(1);} }

.panel{ display:none; }
.panel.active{ display:block; }

.card{
  background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow-sm);
  padding:24px; margin-bottom:20px; border:1px solid var(--border-soft);
  transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
.card:hover{ box-shadow:var(--shadow-md); }
.card h2{ font-family:'Inter',sans-serif; font-weight:700; font-size:17px; margin:0 0 16px; color:var(--ink); letter-spacing:-0.01em; }
.card h3{ font-size:12.5px; margin:20px 0 12px; color:var(--ink-muted); text-transform:uppercase; letter-spacing:0.5px; font-weight:700;}

.kpi-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
.kpi{
  border-radius:var(--radius-sm); padding:18px 18px; background:var(--surface); color:var(--ink);
  box-shadow:var(--shadow-xs); border:1px solid var(--border-soft); border-left:3px solid var(--pine);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.kpi:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.kpi .label{ font-size:11.5px; opacity:0.7; font-weight:700; text-transform:uppercase; letter-spacing:0.4px;}
.kpi .value{ font-size:23px; font-weight:800; margin-top:7px; font-variant-numeric: tabular-nums; letter-spacing:-0.02em;}
.kpi.pine{ border-left-color:var(--pine); }
.kpi.clay{ border-left-color:var(--clay); }
.kpi.green{ border-left-color:var(--green); }
.kpi.red{ border-left-color:var(--red); }
/* KPI cards using inline solid backgrounds (dark accent variants) get light text automatically */
.kpi[style*="background"]{ color:#fff; border-left:none; }
.kpi[style*="background"] .label{ opacity:0.85; }

table{ width:100%; border-collapse:collapse; font-size:13.5px; }
thead th{
  text-align:left; padding:11px 12px; background:var(--surface); color:var(--ink-muted);
  font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:0.4px;
  border-bottom:1px solid var(--border); position:sticky; top:0;
}
tbody td{ padding:12px; border-bottom:1px solid var(--border-soft); }
tbody tr{ transition:background-color .12s var(--ease); }
tbody tr:hover{ background: var(--surface-2); }
tbody tr:last-child td{ border-bottom:none; }
.tablewrap{ max-height:420px; overflow:auto; border:1px solid var(--border-soft); border-radius:var(--radius-sm); }
.num{ text-align:right; font-variant-numeric: tabular-nums; }
.tag{ display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; letter-spacing:0.2px; }
.tag.low{ background:var(--red-light); color:var(--red); }
.tag.ok{ background:var(--green-light); color:var(--green); }

.formgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; align-items:end; margin-bottom:18px;}
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:11.5px; color:var(--ink-muted); font-weight:700; letter-spacing:0.1px; }
input,select,textarea{
  font-family:inherit; font-size:16px; padding:10px 12px; border-radius:var(--radius-sm);
  border:1px solid var(--border); background:var(--surface); color:var(--ink);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
@media (min-width:640px){ input,select,textarea{ font-size:14px; } }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--pine); box-shadow:0 0 0 3px rgba(30,58,52,0.12); }
button.btn{
  background:var(--pine); color:#fff; border:none; padding:11px 20px; border-radius:var(--radius-sm);
  font-size:14px; font-weight:600; cursor:pointer; box-shadow:var(--shadow-xs);
  transition: background-color .15s var(--ease), transform .1s var(--ease), box-shadow .15s var(--ease);
}
button.btn:hover{ background:var(--pine-light); box-shadow:var(--shadow-sm); transform:translateY(-1px); }
button.btn:active{ transform:translateY(0); }
button.btn.secondary{ background:var(--surface); color:var(--pine); border:1.5px solid var(--pine); box-shadow:none; padding:6px 12px; font-size:12.5px;}
button.btn.secondary:hover{ background:var(--green-light); border-color:var(--pine); transform:none; }
button.btn.small{ padding:6px 12px; font-size:12.5px; }

.subtabs{ display:flex; gap:6px; margin-bottom:18px; flex-wrap:wrap; background:var(--surface-2); padding:4px; border-radius:12px; display:inline-flex; }
.subtabs button{
  background:transparent; border:none; color:var(--ink-muted);
  padding:8px 16px; border-radius:9px; font-size:12.5px; font-weight:600; cursor:pointer;
  transition: all .15s var(--ease);
}
.subtabs button.active{ background:var(--surface); color:var(--pine); box-shadow:var(--shadow-xs); }
.subtabs button:hover:not(.active){ color:var(--ink); }

.bars{ display:flex; align-items:flex-end; gap:8px; height:180px; padding:10px 4px 0; }
.bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; }
.bar-stack{ width:100%; display:flex; flex-direction:column-reverse; justify-content:flex-start; height:150px; gap:1px; }
.bar-seg{ width:100%; border-radius:4px 4px 0 0; transition: opacity .15s var(--ease); }
.bar-col:hover .bar-seg{ opacity:0.82; }
.bar-label{ font-size:10.5px; color:var(--ink-muted); font-weight:600; }

.legend{ display:flex; gap:18px; margin-top:14px; flex-wrap:wrap; }
.legend .item{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-muted); font-weight:600; }
.legend .dot{ width:9px; height:9px; border-radius:3px; }

.searchbar{ margin-bottom:14px; }
.searchbar input{ width:100%; max-width:320px; }

.empty{ padding:36px; text-align:center; color:var(--ink-muted); font-size:13.5px; }
.notice{ font-size:12.5px; color:var(--ink-muted); margin-top:8px; line-height:1.5; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:900px){ .kpi-row{grid-template-columns:repeat(2,1fr);} .grid2{grid-template-columns:1fr;} .app{padding:0 14px 80px;} .card{padding:18px;} }
.savebadge{ position:fixed; bottom:20px; right:20px; background:var(--ink); color:#fff; padding:9px 16px;
  border-radius:20px; font-size:12.5px; font-weight:600; opacity:0; transition:opacity 0.3s var(--ease), transform .3s var(--ease); box-shadow:var(--shadow-lg); transform:translateY(6px);}
.savebadge.show{ opacity:1; transform:translateY(0); }

/* ---- login ---- */
.login-screen{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at top, #1B4A2A 0%, var(--pine-dark) 50%, #0B2415 100%); padding:20px;}
.login-box{ background:var(--surface); border-radius:var(--radius-lg); padding:40px 34px; width:100%; max-width:420px; box-shadow:0 30px 80px rgba(0,0,0,0.35); border:1px solid rgba(255,255,255,0.08);}
.login-box h1{ font-family:'Inter',sans-serif; font-weight:800; color:var(--pine); margin:0 0 4px; font-size:22px; text-align:center; letter-spacing:-0.02em;}
.login-box .sub2{ text-align:center; color:var(--ink-muted); font-size:13px; margin-bottom:28px;}
.user-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:10px;}
.user-tile{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:20px 10px;
  text-align:center; cursor:pointer; transition:all .18s var(--ease); box-shadow:var(--shadow-xs); }
.user-tile:hover{ border-color:var(--clay); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.user-tile .avatar{ width:46px; height:46px; border-radius:50%; margin:0 auto 10px; display:flex; align-items:center;
  justify-content:center; font-weight:700; color:#fff; font-size:17px; box-shadow:var(--shadow-xs);}
.user-tile .name{ font-weight:700; font-size:13.5px; }
.user-tile .role{ font-size:11px; color:var(--ink-muted); margin-top:1px; }
.pin-area{ text-align:center; }
.pin-area .back{ background:none; border:none; color:var(--ink-muted); font-size:13px; cursor:pointer; margin-bottom:16px; font-weight:600; padding:6px 0;}
.pin-area .back:hover{ color:var(--pine); }
.pin-dots{ display:flex; justify-content:center; gap:14px; margin:20px 0; }
.pin-dots span{ width:14px; height:14px; border-radius:50%; border:2px solid var(--clay); display:inline-block; transition:all .15s var(--ease); }
.pin-dots span.filled{ background:var(--clay); transform:scale(1.1); }
.keypad{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-width:240px; margin:0 auto; }
.keypad button{ padding:17px 0; font-size:18px; font-weight:600; border-radius:var(--radius-sm); border:1px solid var(--border);
  background:var(--surface); cursor:pointer; color:var(--ink); transition:all .12s var(--ease); }
.keypad button:hover{ background:var(--surface-2); transform:translateY(-1px); }
.keypad button:active{ transform:scale(0.95); }
.pin-error{ color:var(--red); font-size:12.5px; margin-top:10px; min-height:16px; font-weight:600; }

.userbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.userbadge{ color:rgba(245,241,232,0.75); font-size:12.5px; display:flex; align-items:center; gap:10px; font-weight:500;}
.userbadge b{ color:#fff; font-weight:700; }
.logout-btn{ background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.16); color:#fff;
  padding:6px 14px; border-radius:20px; font-size:11.5px; cursor:pointer; font-weight:600; transition:all .15s var(--ease); }
.logout-btn:hover{ background:rgba(255,255,255,0.2); }

/* ---- vendedor sale screen ---- */
.product-picker{ display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.product-picker select{ flex:2; min-width:220px; }
.product-picker input{ width:80px; }
.stockhint{ font-size:11.5px; color:var(--ink-muted); margin-top:-8px; margin-bottom:14px; }
.cart-total{ font-size:22px; font-weight:800; color:var(--pine); text-align:right; padding:16px 0; border-top:1px solid var(--border); margin-top:8px; letter-spacing:-0.02em;}
.receipt{ text-align:center; padding:24px; }
.receipt .check{ font-size:52px; margin-bottom:8px; }
.minhas-vendas{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:20px;}

/* ---- promissória-style receipt ---- */
.promissoria{ background:#FDFBF6; border:1px solid #E5DCC5; border-radius:var(--radius); padding:30px 30px; max-width:460px; margin:0 auto; text-align:left; box-shadow:var(--shadow-md);}
.promissoria .brand{ text-align:center; margin-bottom:20px; }
.promissoria .brand .badge{ display:inline-block; background:var(--pine); color:#fff; padding:9px 24px; border-radius:30px; font-family:'Inter',sans-serif; font-weight:800; font-size:17px; letter-spacing:0.5px;}
.promissoria .brand .tagline{ font-size:10px; letter-spacing:1.5px; color:var(--ink-muted); margin-top:8px; text-transform:uppercase; font-weight:600;}
.promissoria .row{ display:flex; border-bottom:1px solid #ECE4D0; padding:8px 0; font-size:13.5px; gap:8px;}
.promissoria .row .lbl{ color:var(--ink-muted); font-weight:600; min-width:78px; flex-shrink:0;}
.promissoria .row .val{ font-weight:600; color:var(--ink); }
.promissoria .valor-box{ text-align:center; margin:20px 0; padding:16px; background:var(--papel); border-radius:var(--radius-sm); }
.promissoria .itens-titulo{ margin-top:18px; font-size:10.5px; font-weight:800; letter-spacing:1px;
  text-transform:uppercase; color:var(--ink-muted); }
.promissoria .itens-tabela{ margin-top:6px; }
.promissoria .itens-tabela td, .promissoria .itens-tabela th{ padding:6px 6px; font-size:12px; }
.promissoria .logo-marca{ width:min(230px,68%); height:auto; display:block; margin:0 auto 12px; }
.promissoria .valor-box .lbl{ font-size:11px; color:var(--ink-muted); text-transform:uppercase; letter-spacing:0.5px; font-weight:700;}
.promissoria .valor-box .val{ font-size:27px; font-weight:800; color:var(--pine); letter-spacing:-0.02em;}
.promissoria table{ margin-top:8px; }
.promissoria thead th{ background:#F3ECD8; }
.promissoria .sign-row{ display:flex; justify-content:space-between; margin-top:28px; gap:20px; }
.promissoria .sign{ flex:1; border-top:1px solid var(--ink-muted); text-align:center; font-size:10.5px; color:var(--ink-muted); padding-top:6px; }
.promissoria .sign img{ max-height:50px; display:block; margin:0 auto 4px; }
.promissoria .house-photo{ margin-top:18px; text-align:center; }
.promissoria .house-photo img{ max-width:100%; max-height:180px; border-radius:var(--radius-sm); border:1px solid var(--border); }
.promissoria .house-photo .cap{ font-size:10px; color:var(--ink-muted); margin-top:6px; }
/* ---- logo da marca ----
   A logo tem contorno escuro e elipse verde: sobre o cabeçalho verde-escuro ela
   some. Por isso, ali ela vai dentro de um cartão bege. Nos fundos claros
   (login, promissória, tela de venda) entra direto. */
.marca-topo{ display:flex; align-items:center; gap:13px; }
.logo-topo{ width:132px; height:auto; flex-shrink:0; display:block;
  background:var(--clay-light); padding:7px 10px; border-radius:11px;
  box-shadow:0 2px 8px rgba(0,0,0,0.22); }
.login-logo{ width:min(230px,72%); height:auto; display:block; margin:0 auto 16px; }
.promissoria-header .pd-logo{ width:min(210px,64%); height:auto; display:block; margin:0 auto 10px; }

/* ---- modal (substitui confirm/prompt nativos) ---- */
.modal-overlay{ position:fixed; inset:0; z-index:10000; background:rgba(18,58,31,0.55);
  display:flex; align-items:center; justify-content:center; padding:20px;
  animation:modal-fade .14s var(--ease); }
@keyframes modal-fade{ from{opacity:0;} to{opacity:1;} }
.modal-card{ background:var(--surface); border-radius:var(--radius); padding:26px 26px 22px;
  max-width:460px; width:100%; box-shadow:var(--shadow-lg); animation:modal-pop .18s var(--ease); }
@keyframes modal-pop{ from{transform:translateY(10px) scale(.98);} to{transform:none;} }
.modal-card h3{ margin:0 0 12px; font-size:19px; font-weight:800; color:var(--pine-dark); letter-spacing:-0.02em; }
.modal-corpo{ font-size:14px; color:var(--ink); line-height:1.55; }
.modal-corpo p{ margin:0 0 10px; }
.modal-corpo ul{ margin:0 0 10px; padding-left:20px; color:var(--ink-muted); font-size:13px; }
.modal-corpo li{ margin-bottom:4px; }
.modal-alerta{ background:var(--gold); border-radius:var(--radius-sm); padding:9px 12px;
  font-size:12.5px; font-weight:600; color:#6B4E00; }
.modal-card textarea{ width:100%; margin-top:6px; }
.modal-erro{ color:var(--red); font-size:12.5px; font-weight:600; margin-top:6px; }
.modal-acoes{ display:flex; gap:10px; justify-content:flex-end; margin-top:18px; flex-wrap:wrap; }
.modal-acoes .btn{ padding:11px 18px; font-size:14px; }
.modal-acoes .btn.secondary{ padding:11px 18px; font-size:14px; }
button.btn.btn-perigo{ background:var(--red); }
button.btn.btn-perigo:hover{ background:#A93226; }

/* ---- campos obrigatórios ---- */
.field label .req{ color:var(--red); font-weight:800; }
h3 .req{ color:var(--red); font-weight:800; }
.field.campo-faltando input{ border-color:var(--red); background:var(--red-light); }
.field.campo-faltando label{ color:var(--red); font-weight:700; }
.sigpad-wrap.campo-faltando{ border-color:var(--red); background:var(--red-light); }

/* ---- modo teste (?teste=1) ---- */
.modo-teste-bar{ position:fixed; top:0; left:0; right:0; z-index:9999; background:#FFE9A6; color:#6B4E00;
  border-bottom:2px solid var(--clay); padding:8px 16px; font-size:13px; font-weight:600; text-align:center; }
.modo-teste-bar a{ color:#6B4E00; text-decoration:underline; margin-left:8px; font-weight:700; }
body.modo-teste{ padding-top:38px; }

/* ---- cabeçalho "Promissória Digital" na tela de venda ---- */
.promissoria-header{ text-align:center; padding:18px 16px 20px; margin:-4px -4px 20px;
  background:linear-gradient(160deg, var(--clay-light) 0%, #FBF6E7 100%);
  border:1px solid #E8DCBC; border-radius:var(--radius-sm); }
.promissoria-header .pd-selo{ display:inline-block; background:var(--pine); color:#fff; padding:6px 20px;
  border-radius:30px; font-weight:800; font-size:13px; letter-spacing:1px; }
.promissoria-header .pd-titulo{ font-size:23px; font-weight:800; color:var(--pine-dark); margin-top:12px; letter-spacing:-0.02em; }
.promissoria-header .pd-sub{ font-size:12px; color:#7A6A45; margin-top:5px; }
.promissoria .doc-title{ margin-top:10px; font-size:12px; font-weight:800; letter-spacing:2px;
  text-transform:uppercase; color:var(--pine-dark); }

/* ---- listas em cartão (nada de arrastar pro lado) ----
   Onde tem um botão de ação, tabela vira cartão empilhado: o botão fica sempre
   visível, à mão, sem rolagem horizontal. No computador vira grade de 2-3 colunas. */
.lista-cartoes{ display:grid; grid-template-columns:1fr; gap:10px; margin-bottom:16px; }
.lista-cartoes.lista-produtos{ max-height:420px; overflow-y:auto; padding-right:2px; }
@media(min-width:700px){
  .lista-cartoes{ grid-template-columns:repeat(2,1fr); }
  .lista-cartoes.lista-produtos{ grid-template-columns:repeat(3,1fr); }
}
.cartao-item{ border:1px solid var(--border); border-radius:var(--radius-sm); padding:13px 14px;
  background:var(--surface); display:flex; flex-direction:column; gap:9px; }
.cartao-item.esgotado{ opacity:.55; }
.ci-topo{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.ci-nome{ font-weight:700; font-size:14px; line-height:1.3; color:var(--ink); }
.ci-meta{ font-size:12.5px; color:var(--ink-muted); margin-top:-4px; }
.ci-estoque{ font-size:12px; color:var(--ink-muted); white-space:nowrap; font-variant-numeric:tabular-nums; }
.ci-acao{ width:100%; padding:11px; font-size:13.5px; margin-top:auto; }

.carrinho-linha{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.carrinho-preco{ display:flex; flex-direction:column; gap:2px; }
.carrinho-preco label{ font-size:10px; text-transform:uppercase; letter-spacing:.4px; color:var(--ink-muted); }
.carrinho-preco input{ width:96px; padding:8px 10px; }
.carrinho-total{ margin-left:auto; font-size:16px; font-weight:800; color:var(--pine);
  font-variant-numeric:tabular-nums; }

.ci-valor{ font-size:16px; font-weight:800; color:var(--pine); white-space:nowrap;
  font-variant-numeric:tabular-nums; }
.cartao-item.parcela-atrasada{ border-color:var(--red); background:var(--red-light); }
.cartao-item.parcela-parcial{ border-color:var(--clay); background:#FFFCF2; }
.aviso-parcial{ color:#8A6D1E; font-weight:600; }
.tag.parcial, span.tag.parcial{ background:var(--gold); color:#6B4E00; }
.cartao-item.parcela-atrasada .ci-valor{ color:var(--red); }
.cartao-item .ci-acao a.btn{ width:100%; text-align:center; display:block; }
.ci-botoes{ display:flex; gap:7px; margin-top:auto; flex-wrap:wrap; }
.ci-botoes > *{ flex:1 1 auto; text-align:center; font-size:12.5px; padding:9px 10px; white-space:nowrap; }
.ci-botoes a.btn{ text-decoration:none; }

/* preço abaixo do mínimo */
.cartao-item.abaixo-do-piso{ border-color:var(--red); background:var(--red-light); }
.alerta-piso{ font-size:12px; font-weight:600; color:#8A2A1E; line-height:1.45; }
.ok-piso{ font-size:11px; color:var(--ink-muted); }
.alerta-desconto{ border-left:4px solid var(--clay); background:#FFFCF2; }
.alerta-excecao{ border-left:4px solid var(--pine); }
.alerta-excecao ul{ margin:10px 0 12px; padding-left:22px; font-size:13.5px; line-height:1.7; color:var(--ink); }
.alerta-desconto .ad-topo{ font-size:14.5px; line-height:1.5; }
.ad-itens{ font-size:12px; color:var(--ink-muted); line-height:1.45; }
.ad-motivo{ font-size:12.5px; font-style:italic; color:var(--ink); line-height:1.45; }

/* ---- KPIs que quebram em vez de rolar pro lado ---- */
.kpi-row.kpi-quebra, .kpi-row.kpi-estoque{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px;
}

/* ---- chips de filtro por situação ---- */
.filtros-situacao{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px; }
.filtro-chip{ display:inline-flex; align-items:center; gap:7px; border:1.5px solid var(--border);
  background:var(--surface); color:var(--ink-muted); border-radius:30px; padding:8px 14px;
  font-size:13px; font-weight:600; cursor:pointer; font-family:inherit;
  transition:all .13s var(--ease); }
.filtro-chip:hover{ border-color:var(--pine); color:var(--pine); }
.filtro-chip .fc-num{ background:var(--surface-2); color:var(--ink-muted); border-radius:20px;
  padding:1px 8px; font-size:11.5px; font-weight:800; font-variant-numeric:tabular-nums; }
.filtro-chip.ativo{ background:var(--pine); border-color:var(--pine); color:#fff; }
.filtro-chip.ativo .fc-num{ background:rgba(255,255,255,.22); color:#fff; }
.filtro-chip.perigo.ativo{ background:var(--red); border-color:var(--red); }
.filtro-chip.atencao.ativo{ background:var(--clay); border-color:var(--clay); }
.filtro-chip.ok.ativo{ background:var(--green); border-color:var(--green); }

/* ---- botão do WhatsApp e ações destacadas ---- */
.btn.btn-whats{ background:#25D366; color:#fff; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.btn.btn-whats:hover{ background:#1FBA59; }
.btn.btn-perigo-contorno{ background:var(--surface); color:var(--red);
  border:1.5px solid var(--red); box-shadow:none; }
.btn.btn-perigo-contorno:hover{ background:var(--red-light); border-color:var(--red); transform:none; }
.btn.btn-envio{ display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:13px 18px; font-size:14.5px; font-weight:650; }
.btn.btn-envio-2{ background:var(--surface); color:#128C4A; border:1.5px solid #25D366; box-shadow:none; }
.btn.btn-envio-2:hover{ background:#EAF7EF; transform:none; }

/* ---- estoque ---- */
.cartao-item.estoque-baixo{ border-color:var(--clay); background:#FFFCF2; }

/* ---- contagem de estoque ---- */
.barra-contagem{ position:sticky; top:0; z-index:20; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px 14px;
  margin-bottom:14px; display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; box-shadow:var(--shadow-sm); font-size:13.5px; }
.bc-botoes{ display:flex; gap:7px; flex-wrap:wrap; }
.bc-botoes .btn{ padding:9px 13px; font-size:12.5px; }
.cartao-item.contado{ border-color:var(--pine); background:#F4FAF3; }
.linha-contagem{ display:flex; align-items:center; gap:12px; margin-top:auto; }
.dif-contagem{ font-size:12.5px; font-weight:700; padding:4px 10px; border-radius:20px; }
.dif-contagem.sobra{ background:#EAF3ED; color:var(--pine); }
.dif-contagem.falta{ background:var(--red-light); color:var(--red); }
.dif-contagem.ok{ background:var(--surface-2); color:var(--ink-muted); font-weight:600; }
.lista-contagem .qtd-stepper input::placeholder{ color:#C4BFB3; }

/* ---- juntar clientes duplicados ---- */
.grupo-dup{ border-left:4px solid var(--clay); }
.dup-opcao{ cursor:pointer; }
.dup-opcao.escolhido{ border-color:var(--pine); background:#F4FAF3; }
.dup-opcao input[type=radio]{ width:18px; height:18px; accent-color:var(--pine);
  vertical-align:-3px; margin-right:6px; }
.dup-dados{ display:grid; grid-template-columns:1fr; gap:3px; font-size:12.5px; }
@media(min-width:520px){ .dup-dados{ grid-template-columns:1fr 1fr; gap:3px 16px; } }
.dup-dados > div{ display:flex; justify-content:space-between; gap:10px;
  border-bottom:1px solid rgba(34,31,26,.06); padding:3px 0; }
.dup-dados span{ color:var(--ink-muted); }
.dup-dados strong{ text-align:right; font-weight:600; }
.dup-marca{ font-size:12px; font-weight:700; color:var(--pine); }

/* ---- mutirão de cobrança ---- */
.mutirao-convite{ border-left:4px solid var(--pine); background:#F4FAF3; }
.mutirao{ border:2px solid var(--pine); }
.mutirao-fim{ border-color:var(--green); background:#F4FAF3; }
.mut-topo{ display:flex; justify-content:space-between; align-items:center; gap:12px;
  flex-wrap:wrap; font-size:14.5px; }
.mut-cliente{ background:var(--surface-2); border-radius:var(--radius-sm); padding:16px;
  text-align:center; display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.mut-cliente .ci-valor{ color:var(--pine); }

/* ---- meta do vendedor ---- */
.meta-bloco{ display:flex; flex-direction:column; gap:8px; }
.meta-bloco.compacta{ margin-top:12px; padding:12px 14px; background:var(--surface-2);
  border-radius:var(--radius-sm); }
.meta-topo{ display:flex; justify-content:space-between; gap:10px; font-size:13px;
  color:var(--ink-muted); }
.meta-topo strong{ color:var(--ink); font-variant-numeric:tabular-nums; }
.meta-barra{ position:relative; height:14px; background:var(--surface-2);
  border-radius:20px; overflow:hidden; border:1px solid var(--border-soft); }
.meta-bloco.compacta .meta-barra{ background:var(--surface); }
.meta-preenchida{ height:100%; border-radius:20px; transition:width .35s var(--ease); }
.meta-marca{ position:absolute; top:-2px; bottom:-2px; width:2px; background:var(--ink-muted);
  opacity:.55; }
.meta-rodape{ display:flex; justify-content:space-between; gap:10px; font-size:12.5px;
  color:var(--ink-muted); flex-wrap:wrap; }
.meta-ok{ color:var(--pine); font-weight:700; }
.meta-atras{ color:var(--clay); font-weight:700; }

/* ---- comissão e idade ---- */
.bloco-comissao{ margin-top:12px; padding:12px 14px; background:var(--surface-2);
  border-radius:var(--radius-sm); }
.idade-cli{ font-weight:600; color:var(--pine); font-size:11px; }

/* ---- comparação entre anos ---- */
.comp-anos{ display:flex; flex-direction:column; gap:16px; }
.comp-linha{ display:grid; grid-template-columns:56px 1fr; gap:8px 12px; align-items:center; }
.comp-ano{ font-size:19px; font-weight:830; letter-spacing:-.02em; color:var(--pine-dark); }
.comp-barra{ height:10px; background:var(--surface-2); border-radius:20px; overflow:hidden; }
.comp-barra i{ display:block; height:100%; background:var(--pine); border-radius:20px; }
.comp-vals{ grid-column:1/-1; display:grid; gap:8px 18px;
  grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); }
.comp-vals > div{ display:flex; flex-direction:column; gap:1px; }
.comp-vals span{ font-size:10.5px; text-transform:uppercase; letter-spacing:.7px; color:var(--ink-muted); }
.comp-vals strong{ font-size:15px; font-weight:750; font-variant-numeric:tabular-nums; }
.comp-vals strong.pos{ color:var(--pine); } .comp-vals strong.neg{ color:var(--red); }
.var{ font-size:11px; font-weight:700; }
.var.pos{ color:var(--pine); } .var.neg{ color:var(--red); }

/* ---- tarefas do dia ---- */
.tarefas-dia{ border-left:4px solid var(--pine); }
.lista-tarefas{ display:flex; flex-direction:column; gap:10px; }
.tarefa{ display:flex; align-items:center; gap:13px; padding:13px 14px; background:var(--surface-2);
  border-radius:var(--radius-sm); flex-wrap:wrap; }
.tf-icone{ width:38px; height:38px; border-radius:50%; color:#fff; display:flex; align-items:center;
  justify-content:center; font-weight:800; font-size:15px; flex-shrink:0; font-variant-numeric:tabular-nums; }
.tf-txt{ flex:1; min-width:150px; font-size:13.5px; line-height:1.5; }
.tarefa .btn{ padding:9px 15px; font-size:13px; }

/* ---- fechamento do dia ---- */
.fech-resumo{ display:flex; flex-direction:column; gap:2px; }
.fech-linha{ display:flex; justify-content:space-between; gap:12px; padding:9px 2px;
  border-bottom:1px solid var(--border); font-size:13.5px; }
.fech-linha strong{ font-variant-numeric:tabular-nums; color:var(--ink); }
.fech-linha.total{ border-bottom:none; border-top:2px solid var(--border-soft);
  margin-top:4px; padding-top:11px; font-weight:700; }
.fech-linha.total strong{ color:var(--pine); font-size:16px; }
.kpi .kpi-sub{ font-size:11px; color:var(--ink-muted); margin-top:3px; font-weight:600; }

/* ---- detalhe da venda dentro do cartão ---- */
.ci-clicavel{ cursor:pointer; color:var(--pine); text-decoration:underline;
  text-decoration-color:rgba(11,110,43,.3); text-underline-offset:3px; }
.ci-clicavel:hover{ text-decoration-color:var(--pine); }
.cartao-item.aberto{ border-color:var(--pine); }
.detalhe-venda{ background:var(--surface-2); border-radius:var(--radius-sm); padding:12px 14px;
  display:flex; flex-direction:column; gap:12px; }
.dv-bloco strong{ display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.8px;
  color:var(--ink-muted); margin-bottom:5px; }
.dv-linha{ display:flex; justify-content:space-between; gap:10px; font-size:12.5px;
  padding:3px 0; border-bottom:1px solid rgba(34,31,26,.06); }
.dv-linha span:last-child{ font-weight:600; text-align:right; font-variant-numeric:tabular-nums; }
.opcoes-visita{ display:flex; flex-direction:column; gap:9px; margin:10px 0; font-size:13.5px; }
.opcoes-visita label{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.opcoes-visita input[type=date]{ padding:6px 9px; font-size:13px; }

/* ---- rota de cobrança ---- */
.cartao-bairro{ cursor:pointer; }
.cartao-bairro:hover{ border-color:var(--pine); box-shadow:var(--shadow-sm); }
.rota-cliente{ display:flex; gap:12px; align-items:flex-start; }
.rota-foto{ width:74px; height:74px; border-radius:var(--radius-sm); object-fit:cover;
  border:1px solid var(--border); flex-shrink:0; background:var(--surface-2); }
.rota-foto-vazia{ width:74px; height:74px; border-radius:var(--radius-sm); flex-shrink:0;
  background:var(--surface-2); display:flex; align-items:center; justify-content:center;
  font-size:22px; color:var(--ink-muted); }
.rota-dados{ flex:1; min-width:0; }
.rota-visitado{ opacity:.55; }
.tag-visita{ font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:20px;
  background:var(--surface-2); color:var(--ink-muted); }

/* ---- funcionários ---- */
.card-funcionario{ border-left:3px solid var(--pine); }
.nome-funcionario{ margin:0; display:flex; align-items:center; gap:10px;
  font-size:18px; font-weight:800; letter-spacing:-0.02em; color:var(--pine-dark); }
.avatar-func{ width:34px; height:34px; border-radius:50%; color:#fff; display:inline-flex;
  align-items:center; justify-content:center; font-size:12.5px; font-weight:800; letter-spacing:0; }

/* Nas tabelas que sobraram (relatórios do admin), no celular a rolagem lateral
   fica explícita, com uma dica de que dá pra arrastar. */
@media(max-width:700px){
  .tablewrap{ position:relative; }
  .tablewrap::after{ content:'← arraste para ver o resto →'; display:block; text-align:center;
    font-size:10.5px; color:var(--ink-muted); padding:6px 0 2px; }
  .tablewrap table{ min-width:520px; }
}

/* ---- preços por forma de pagamento na lista de produtos ---- */
.precos-cell{ min-width:190px; }
.precos-mini{ display:grid; grid-template-columns:auto 1fr auto; gap:3px 12px; align-items:baseline;
  font-variant-numeric:tabular-nums; }
.pm-lbl{ font-size:11.5px; color:var(--ink-muted); white-space:nowrap; }
.pm-val{ font-size:13px; font-weight:700; color:var(--pine); text-align:right; }
.pm-obs{ font-size:10.5px; color:var(--ink-muted); text-align:right; white-space:nowrap; }
.pm-aviso{ font-size:10.5px; color:var(--clay); margin-top:4px; }

/* ---- stepper de quantidade no carrinho ---- */
.qtd-stepper{ display:inline-flex; align-items:center; gap:0; border:1px solid var(--border);
  border-radius:var(--radius-sm); overflow:hidden; background:var(--surface); }
.qtd-stepper input{ width:46px; text-align:center; border:none; border-radius:0; padding:8px 0;
  font-weight:700; font-size:15px; -moz-appearance:textfield; }
.qtd-stepper input::-webkit-outer-spin-button, .qtd-stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.qtd-stepper input:focus{ box-shadow:none; }
.qtd-btn{ width:40px; height:40px; border:none; background:var(--surface-2); color:var(--pine);
  font-size:20px; font-weight:700; cursor:pointer; line-height:1; transition:background .12s var(--ease); }
.qtd-btn:hover{ background:var(--clay-light); }
.qtd-btn:active{ background:var(--gold); }

/* ---- fotos (fachada + documento) ---- */
.fotos-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
@media(max-width:640px){ .fotos-grid{ grid-template-columns:1fr; } }
.foto-box{ border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px; background:var(--surface); }
.foto-box.foto-obrigatoria{ border-color:var(--clay); background:#FFFCF2; }
.foto-titulo{ font-size:13px; font-weight:700; color:var(--ink); margin-bottom:10px; }
.foto-titulo .obrigatorio{ font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:0.5px;
  background:var(--clay); color:#fff; padding:2px 7px; border-radius:20px; margin-left:4px; }
.foto-titulo .opcional{ font-size:10px; font-weight:600; color:var(--ink-muted); margin-left:4px; }
.aviso-sem-doc{ margin-top:10px; font-size:12px; color:#8A2A1E; background:#FBE4E0;
  border:1px solid var(--red); border-radius:var(--radius-sm); padding:8px 10px; }

/* ---- ações depois de finalizar a venda ---- */
.acoes-recibo{ margin-top:22px; display:flex; flex-direction:column; gap:10px; align-items:stretch; max-width:460px; margin-left:auto; margin-right:auto; }
.btn.btn-zap-principal{ background:#25D366; padding:16px 20px; font-size:15.5px; font-weight:700; width:100%; }
.btn.btn-zap-principal:hover{ background:#1FBA59; }
.btn.btn-zap-principal{ text-decoration:none; display:block; }
.btn.btn-zap-secundario{ background:var(--surface); color:#128C4A; border:1.5px solid #25D366;
  padding:13px 20px; font-size:14px; text-align:center; text-decoration:none; display:block; width:100%; }
.dica-envio{ font-size:11.5px; color:var(--ink-muted); line-height:1.5; text-align:center; padding:2px 4px; }
.acoes-secundarias{ display:flex; gap:10px; justify-content:center; margin-top:4px; }
.acoes-secundarias .btn{ flex:1; text-align:center; }

@media print{
  .no-print{ display:none !important; }
  body{ background:#fff; }
  /* Imprimir só a promissória: some com cabeçalho, menu, abas e qualquer card em volta. */
  header.top, nav.tabs, .subtabs, .kpi-row, .minhas-vendas, .savebadge{ display:none !important; }
  .app{ padding:0 !important; margin:0 !important; max-width:none !important; }
  .app > .card{ background:none; box-shadow:none; border:none; padding:0; margin:0; }
  .promissoria{ box-shadow:none; border:1px solid #ddd; max-width:100%; margin:0; padding:18px 20px; }
  @page{ margin:12mm; }
}

/* ---- signature pad & photo capture ---- */
.sigpad-wrap{ background:#fff; border:1.5px dashed var(--border); border-radius:var(--radius-sm); padding:8px; margin-bottom:10px; transition:border-color .15s var(--ease); }
.sigpad-wrap:hover{ border-color:var(--clay); }
#signature-pad{ width:100%; height:160px; touch-action:none; cursor:crosshair; background:#fff; border-radius:6px; display:block; }
.sigpad-hint{ text-align:center; color:var(--ink-muted); font-size:11.5px; margin-bottom:10px; }
.checkbox-field{ display:flex; align-items:flex-start; gap:9px; margin:16px 0; font-size:13px; line-height:1.5; }
.checkbox-field input{ margin-top:2px; width:17px; height:17px; accent-color:var(--pine); }
.photo-capture{ margin-bottom:18px; }
.photo-capture .preview{ max-width:220px; border-radius:var(--radius-sm); border:1px solid var(--border); display:block; margin-top:10px; box-shadow:var(--shadow-xs); }
.photo-capture label.upload-btn{
  display:inline-block; background:var(--surface-2); border:1px solid var(--border); padding:10px 18px;
  border-radius:var(--radius-sm); font-size:13px; font-weight:600; cursor:pointer; color:var(--ink); transition:all .15s var(--ease);
}
.photo-capture label.upload-btn:hover{ background:var(--border); transform:translateY(-1px); }