*{box-sizing:border-box;margin:0;padding:0;font-family:'Segoe UI',system-ui,sans-serif}
:root{
  --bg:#07090c;--bg2:#0d1218;--bg3:#131c24;--bg4:#050709;
  --border:#1c2830;--text:#dde4ec;--muted:#57687a;--muted2:#8494a8;
  --blue:#10b981;--green:#4ade80;--yellow:#f59e0b;--purple:#a78bfa;
  --red:#fb7185;--orange:#f97316;--cyan:#22d3ee;--sky:#38bdf8;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);min-height:100vh}

/* ── NAV ── */
nav{background:#030507;border-bottom:1px solid var(--border);padding:0 20px;
  display:flex;align-items:center;position:sticky;top:0;z-index:200;height:54px;gap:0}
.nav-brand{display:flex;align-items:center;margin-right:20px;text-decoration:none;flex-shrink:0}
/* Logo PR Grupo Paraná — PNG transparente: sem caixa de fundo, sem distorção.
   width:auto + object-fit:contain preservam a proporção em qualquer altura. */
.nav-brand img,.nav-logo{height:34px;width:auto;max-width:190px;object-fit:contain;display:block}
.nav-tabs{display:flex;gap:0;flex:1}
.nav-tab{padding:0 16px;height:54px;display:flex;align-items:center;gap:7px;font-size:13px;
  font-weight:500;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;
  transition:all .18s;white-space:nowrap;background:none;border-left:none;border-right:none;border-top:none}
.nav-tab:hover{color:var(--text);background:rgba(255,255,255,.025)}
.nav-tab.active{color:var(--blue);border-bottom-color:var(--blue);background:rgba(16,185,129,.04)}
.nav-tab .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.live-badge{background:#0a2a15;color:var(--green);font-size:10px;font-weight:700;
  padding:3px 9px;border-radius:20px;border:1px solid #16593a;letter-spacing:.04em}
.gen-date{font-size:10px;color:var(--muted);display:none}
@media(min-width:900px){.gen-date{display:block}}

/* ── PAGES ── */
.page{display:none;padding:18px 20px 40px;max-width:1540px;margin:0 auto;animation:fadein .2s}
.page.active{display:block}
@keyframes fadein{from{opacity:.3}to{opacity:1}}

/* ══ HOME — página de entrada (sem dados, só atalhos) ══ */
.entrada{background:linear-gradient(135deg,#080d13 0%,#0a1118 60%,#060a0f 100%);
  border:1px solid var(--border);border-radius:14px;padding:34px 30px 30px;margin-bottom:18px;text-align:center}
.entrada-logo{height:46px;width:auto;max-width:210px;object-fit:contain;display:block;margin:0 auto 16px}
.entrada h1{font-size:23px;font-weight:700;line-height:1.25;margin-bottom:7px}
.entrada h1 span{color:var(--yellow)}
.entrada p{color:var(--muted2);font-size:13.5px;line-height:1.6;margin:0}

.atalhos{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:12px}
.atalho{display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:17px 18px;
  cursor:pointer;transition:all .2s ease;position:relative;overflow:hidden;color:inherit;font:inherit}
.atalho::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ac);
  opacity:.75;transition:opacity .2s ease}
.atalho:hover{transform:translateY(-2px);border-color:var(--ac);
  box-shadow:0 10px 30px rgba(0,0,0,.34)}
.atalho:hover::before{opacity:1}
.atalho:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.atalho-ico{font-size:25px;line-height:1;flex-shrink:0;width:46px;height:46px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;background:var(--bg3);
  border:1px solid var(--border);transition:all .2s ease}
.atalho:hover .atalho-ico{border-color:var(--ac);transform:scale(1.05)}
.atalho-txt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.atalho-txt b{font-size:14.5px;font-weight:700;color:var(--text);line-height:1.25}
.atalho-txt small{font-size:11.5px;color:var(--muted2);line-height:1.4}
.atalho-seta{font-size:17px;color:var(--muted);flex-shrink:0;transition:all .2s ease}
.atalho:hover .atalho-seta{color:var(--ac);transform:translateX(3px)}
.atalho.a-blue{--ac:var(--blue)}
.atalho.a-red{--ac:var(--red)}
.atalho.a-purple{--ac:var(--purple)}
.atalho.a-orange{--ac:var(--orange)}
.atalho.a-sky{--ac:var(--sky)}
.atalho.a-yellow{--ac:var(--yellow)}
@media(max-width:640px){
  .entrada{padding:26px 18px 22px}
  .entrada-logo{height:38px}
  .entrada h1{font-size:19px}
  .entrada p{font-size:12.5px}
  .atalhos{grid-template-columns:1fr;gap:10px}
  .atalho{padding:14px 15px;gap:12px}
  .atalho-ico{width:40px;height:40px;font-size:21px}
  .atalho-txt b{font-size:13.5px}
}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 15px;border-radius:7px;
  font-size:12px;font-weight:700;cursor:pointer;border:none;transition:all .15s}
.btn-blue{background:var(--blue);color:#000}.btn-blue:hover{background:#60cbfa}
.btn-green{background:var(--green);color:#000}.btn-green:hover{background:#6ee7b7}
.btn-yellow{background:var(--yellow);color:#000}.btn-yellow:hover{background:#fbbf24}
.btn-orange{background:var(--orange);color:#000}.btn-orange:hover{background:#fb923c}
.btn-ghost{background:var(--bg3);color:var(--muted2);border:1px solid var(--border)}
.btn-ghost:hover{color:var(--text);border-color:var(--blue)}

/* ── KPI ── */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:10px;margin-bottom:14px}
.kpi{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:13px 15px}
.kpi-label{font-size:11px;color:#aeb9c9;text-transform:uppercase;letter-spacing:.05em;margin-bottom:7px}
.kpi-val{font-size:21px;font-weight:700;line-height:1.15;white-space:nowrap;overflow:hidden;display:block}
.kpi-sub{font-size:10px;color:var(--muted);margin-top:4px}
.kpi.k-blue .kpi-val{color:var(--blue)}
.kpi.k-green .kpi-val{color:var(--green)}
.kpi.k-yellow .kpi-val{color:var(--yellow)}
.kpi.k-purple .kpi-val{color:var(--purple)}
.kpi.k-red .kpi-val{color:var(--red)}
.kpi.k-orange .kpi-val{color:var(--orange)}
.kpi.k-cyan .kpi-val{color:var(--cyan)}
.kpi.k-sky .kpi-val{color:var(--sky)}

/* ── CARDS / CHARTS ── */
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:12px}
.row-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}
.span2{grid-column:span 2}
.card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:15px}
.card-title{font-size:11px;color:#aeb9c9;text-transform:uppercase;letter-spacing:.06em;
  margin-bottom:13px;display:flex;align-items:center;justify-content:space-between}
.card-badge{font-size:10px;color:var(--muted2);background:var(--bg3);
  padding:2px 8px;border-radius:4px}

/* ── CÓDIGO DO PRODUTO ──
   Chip destacado e rotulado ("cod: 18.01.1100"), separado do nome do item.
   O código é a chave de busca no dia a dia, então ganha monoespaçada e cor. */
.pcod-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:7px}
.pcod{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:5px;
  background:rgba(56,189,248,.08);border:1px solid rgba(56,189,248,.28);
  font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:11.5px;
  font-weight:600;color:var(--sky);letter-spacing:.02em;white-space:nowrap}
.pcod b{font-family:'Segoe UI',system-ui,sans-serif;font-size:10px;font-weight:600;
  color:var(--muted2);text-transform:lowercase;letter-spacing:.03em}
.pcod-meta{font-size:11px;color:var(--muted2)}

/* ── BUSCA RÁPIDA DA TABELA ── */
.tbl-busca{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:22px 0 16px}
.tbl-busca-campo{position:relative;flex:1 1 240px;min-width:180px;max-width:340px}
.tbl-busca-campo.tbl-busca-nf{flex:0 1 150px;min-width:120px}
.tbl-busca-ico{position:absolute;left:10px;top:50%;transform:translateY(-50%);
  font-size:12px;opacity:.65;pointer-events:none}
.tbl-busca-inp{width:100%;height:34px;padding:0 28px 0 30px;font-size:12px;border-radius:8px;
  background:var(--bg3);border:1px solid var(--border);color:var(--text);transition:all .18s ease}
.tbl-busca-inp::placeholder{color:var(--muted)}
.tbl-busca-inp:focus{outline:none;border-color:#38bdf8;box-shadow:0 0 0 3px rgba(56,189,248,.14)}
.tbl-busca-campo.has-val .tbl-busca-inp{border-color:#10b981}
.tbl-busca-x{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:none;
  background:none;border:none;color:var(--muted);font-size:12px;cursor:pointer;padding:3px 4px;line-height:1}
.tbl-busca-x:hover{color:var(--text)}
.tbl-busca-campo.has-val .tbl-busca-x{display:block}
.tbl-busca-info{font-size:11px;color:var(--muted2)}
@media(max-width:640px){
  .tbl-busca-campo,.tbl-busca-campo.tbl-busca-nf{flex:1 1 100%;max-width:none}
}

/* ── TABLE ── */
.tbl-wrap{overflow:auto;max-height:380px}
table{width:100%;border-collapse:collapse;font-size:12px}
th{color:var(--muted);font-weight:500;text-align:left;padding:7px 10px;
  border-bottom:1px solid var(--border);white-space:nowrap;
  position:sticky;top:0;background:var(--bg2);cursor:pointer;user-select:none}
th:hover{color:var(--text)}
td{padding:7px 10px;border-bottom:1px solid #0f161d;color:#bfcad8;white-space:nowrap}
tr:hover td{background:var(--bg3)}
.badge{display:inline-block;padding:2px 7px;border-radius:4px;font-size:10px;font-weight:700}
.b-v{background:#062a1a;color:var(--blue)}
.b-d{background:#1e1a0a;color:var(--yellow)}
.b-t{background:#1a0a2e;color:var(--purple)}
.b-e{background:#062a1a;color:var(--blue)}
.b-u{background:#0a2e1e;color:var(--green)}
.ok{color:var(--green)}
.warn{color:var(--red)}

/* ── UPLOAD ── */
.upload-box{background:var(--bg2);border:1px solid var(--border);border-radius:10px;
  padding:18px;margin-bottom:14px}
.upload-box h3{font-size:13px;font-weight:600;margin-bottom:3px}
.upload-box p{font-size:12px;color:var(--muted);margin-bottom:12px}
.flow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.flow-step{background:var(--bg3);border:1px solid var(--border);border-radius:7px;
  padding:5px 12px;font-size:11px;color:var(--muted2)}
.flow-step strong{color:var(--text)}
.flow-arrow{color:var(--muted);font-size:13px}
.drop-zone{border:2px dashed var(--border);border-radius:9px;padding:24px;
  text-align:center;cursor:pointer;transition:all .2s;position:relative}
.drop-zone:hover,.drop-zone.drag{border-color:var(--blue);background:rgba(16,185,129,.04)}
.drop-zone input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.drop-icon{font-size:28px;margin-bottom:8px}
.drop-text{font-size:13px;color:var(--muted2);margin-bottom:3px}
.drop-sub{font-size:11px;color:var(--muted)}
.upload-log{margin-top:10px;padding:9px 13px;background:var(--bg3);border-radius:7px;
  font-size:12px;display:none}
.upload-log.ok-log{color:var(--green)}
.upload-log.err-log{color:var(--red)}

/* ── ESTOQUE ── */
.est-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-bottom:14px}
.est-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:14px}
.est-name{font-size:11px;color:var(--muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:.04em}
.est-val{font-size:18px;font-weight:700}
.est-sub{font-size:11px;color:var(--muted);margin-top:4px}
.est-bar-wrap{height:6px;background:var(--bg3);border-radius:3px;margin-top:10px;overflow:hidden}
.est-bar{height:100%;border-radius:3px;transition:width .6s}
.pos{color:var(--green)}.neg{color:var(--red)}

/* ── LEGEND ── */
.legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.leg{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted2)}
.leg-sq{width:10px;height:10px;border-radius:2px;flex-shrink:0}

/* ── SECTION LABEL ── */
.sec{font-size:11px;font-weight:700;color:#aeb9c9;text-transform:uppercase;
  letter-spacing:.08em;margin:18px 0 10px;display:flex;align-items:center;gap:8px}
.sec::after{content:'';flex:1;height:1px;background:var(--border)}

/* ── RESPONSIVE ── */
/* 1200px — large tablet / small laptop */
@media(max-width:1200px){
  .row-4{grid-template-columns:repeat(2,1fr)}
  .row-3{grid-template-columns:1fr 1fr}
  .span2{grid-column:span 1}
}
/* 900px — tablet */
@media(max-width:900px){
  .row-3,.row-4{grid-template-columns:1fr 1fr}
  .span2{grid-column:span 1}
  .hero{padding:22px 20px}
  .nav-tab{padding:0 10px;font-size:12px}
  .nav-name{display:none}
}
/* 700px — large phone */
@media(max-width:700px){
  .row-2,.row-3,.row-4{grid-template-columns:1fr}
  .span2{grid-column:span 1}
  .hero{grid-template-columns:1fr;padding:18px 16px}
  .hero h1{font-size:20px}
  .page{padding:12px 10px 30px}
  nav{padding:0 8px;height:50px}
  .nav-icon{width:28px;height:28px;font-size:15px}
  .nav-tabs{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;flex-shrink:1}
  .nav-tabs::-webkit-scrollbar{display:none}
  .nav-tab{height:50px;padding:0 10px;font-size:11px;white-space:nowrap;flex-shrink:0}
  .nav-tab .dot{display:none}
  .live-badge{display:none}
  .nav-log{display:none}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:560px}
  .card{padding:12px}
  .upload-box{padding:14px}
  .flow{gap:5px}
  .flow-arrow{display:none}
}
/* 480px — small phone */
@media(max-width:480px){
  .kpi-grid{grid-template-columns:1fr 1fr}
  .hero-btns{flex-direction:column}
  .hero-btns .btn{justify-content:center}
  nav{padding:0 6px}
  .nav-tab{padding:0 8px;font-size:10px}
  .page{padding:10px 8px 24px}
}

/* ── VENDAS FILTER BAR ─────────────────────────────────── */
.v-filter-bar{
  background:var(--bg2);border:1px solid var(--border);border-radius:14px;
  padding:16px 20px;margin-bottom:16px;display:flex;flex-direction:column;gap:0}
.vf-divider{height:1px;background:var(--border);margin:12px 0}

/* Row 1: fixed-column grid */
.vf-row{display:grid;grid-template-columns:140px 1fr 160px 1fr;gap:14px;align-items:start}
/* Row 2: period + actions */
.vf-row2{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap}

.vf-group{display:flex;flex-direction:column;gap:5px}
.vf-wide{flex:1;min-width:200px}
.vf-label{font-size:11px;font-weight:700;color:#aeb9c9;text-transform:uppercase;letter-spacing:.06em}

.vf-select{
  background:var(--bg3);color:var(--text);border:1px solid #33465a;
  border-radius:8px;padding:7px 10px;font-size:12px;cursor:pointer;outline:none;
  transition:border-color .15s,box-shadow .15s;width:100%;height:34px}
.vf-select:focus,.vf-select:hover{border-color:var(--blue);box-shadow:0 0 0 3px rgba(16,185,129,.1)}

/* ── Filtro Global · Período (De/Até) ──
   O calendário do <input type=date> é um popup NATIVO do navegador (não estilizável
   por CSS comum). Ele herdava o tema escuro e ficava preto/ilegível. Forçamos o popup
   em tema CLARO (fundo branco, texto escuro, bordas/sombras suaves nativas) e usamos a
   cor principal no dia selecionado. Scopado só a #gf-de/#gf-ate — não afeta os demais
   campos de data do site (que seguem o tema escuro). */
#gf-de, #gf-ate{
  color-scheme: light;          /* popup do calendário em modo claro/legível */
  accent-color: var(--blue);    /* dia selecionado destacado na cor do sistema */
}
/* O campo em si continua escuro; deixa o ícone do calendário visível sobre ele */
#gf-de::-webkit-calendar-picker-indicator,
#gf-ate::-webkit-calendar-picker-indicator{
  filter: invert(1) brightness(1.35);
  opacity:.75; cursor:pointer; transition:opacity .15s;
}
#gf-de::-webkit-calendar-picker-indicator:hover,
#gf-ate::-webkit-calendar-picker-indicator:hover{ opacity:1; }

/* CFOP chips */
.vf-chips{display:flex;gap:5px;flex-wrap:wrap;padding-top:1px}
/* Checkboxes de Produto (multi-seleção) */
.vf-checks{display:flex;flex-wrap:wrap;gap:6px 8px;padding-top:2px}
.vf-check{
  display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none;
  font-size:12px;color:#c2cbd8;background:var(--bg3);border:1px solid #33465a;
  border-radius:8px;padding:5px 11px;transition:all .15s;white-space:nowrap}
.vf-check:hover{border-color:var(--blue);color:var(--text);background:rgba(16,185,129,.06)}
.vf-check input{accent-color:var(--blue);cursor:pointer;width:14px;height:14px;margin:0}
.vf-check:has(input:checked){background:rgba(16,185,129,.14);border-color:var(--blue);color:var(--text)}
.vf-chip{
  padding:5px 13px;border-radius:20px;font-size:11px;font-weight:600;
  cursor:pointer;border:1px solid #33465a;background:var(--bg3);
  color:#c2cbd8;transition:all .18s;white-space:nowrap;line-height:1.4}
.vf-chip:hover{border-color:var(--blue);color:var(--text);background:rgba(16,185,129,.06)}
.vf-chip.active{background:var(--blue);border-color:var(--blue);color:#000;box-shadow:0 2px 8px rgba(16,185,129,.3)}
.vf-chip.venda.active{background:var(--blue);border-color:var(--blue);color:#000;box-shadow:0 2px 8px rgba(16,185,129,.3)}
.vf-chip.doacao.active{background:var(--yellow);border-color:var(--yellow);color:#000;box-shadow:0 2px 8px rgba(245,158,11,.3)}
.vf-chip.transf.active{background:var(--purple);border-color:var(--purple);color:#fff;box-shadow:0 2px 8px rgba(167,139,250,.3)}
.vf-chip.outros.active{background:var(--muted);border-color:var(--muted);color:#fff}

/* Cliente autocomplete */
.vf-autocomplete{position:relative}
.vf-search{
  background:var(--bg3);color:var(--text);border:1px solid #33465a;
  border-radius:8px;padding:7px 10px;font-size:12px;outline:none;
  transition:border-color .15s,box-shadow .15s;height:34px;width:100%}
.vf-search:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(16,185,129,.1)}
.vf-search::placeholder{color:var(--muted)}
.vf-search.has-selection{border-color:var(--blue);color:var(--blue)}
.vf-ac-list{
  display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;
  background:var(--bg3);border:1px solid var(--border);border-radius:10px;
  max-height:240px;overflow-y:auto;z-index:300;
  box-shadow:0 8px 28px rgba(0,0,0,.5);
  scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.vf-ac-list::-webkit-scrollbar{width:4px}
.vf-ac-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.vf-ac-list.open{display:block}
.vf-ac-item{
  padding:8px 12px;font-size:12px;color:var(--muted2);cursor:pointer;
  transition:background .1s,color .1s;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border-bottom:1px solid rgba(255,255,255,.03)}
.vf-ac-item:last-child{border-bottom:none}
.vf-ac-item:hover,.vf-ac-item.ac-focus{background:rgba(16,185,129,.08);color:var(--text)}
.vf-ac-item mark{background:none;color:var(--blue);font-weight:700}
.vf-ac-empty{padding:12px;font-size:12px;color:var(--muted);text-align:center}

/* Texto fantasma (Tab hint) */
.vf-ghost{
  position:absolute;top:0;left:0;right:0;bottom:0;
  padding:7px 10px;font-size:12px;line-height:20px;
  pointer-events:none;white-space:pre;overflow:hidden;
  border-radius:8px;}

/* Date range */
.vf-date-range{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.vf-range-sep{color:var(--muted);font-size:16px;font-weight:300;padding-bottom:8px}
.vf-period-field{display:flex;flex-direction:column;gap:4px}
.vf-period-label{font-size:11px;font-weight:700;color:#aeb9c9;text-transform:uppercase;letter-spacing:.06em}
.vf-period-input-wrap{position:relative;display:flex;align-items:center}
.vf-period-text{
  background:var(--bg3);color:var(--text);
  border:1px solid #33465a;border-right:none;
  border-radius:8px 0 0 8px;padding:7px 11px;
  font-size:12px;outline:none;width:126px;height:34px;
  transition:border-color .15s,background .15s;
  letter-spacing:.03em;font-variant-numeric:tabular-nums}
.vf-period-text::placeholder{color:var(--muted);font-size:11px;letter-spacing:0}
.vf-period-text:focus{border-color:var(--blue);background:var(--bg4)}
.vf-period-text.has-value{color:var(--text);border-color:var(--blue)}
.vf-period-text.invalid{border-color:var(--red);color:var(--red)}
.vf-period-cal-btn{
  background:var(--bg3);border:1px solid #33465a;
  border-radius:0 8px 8px 0;padding:0 10px;font-size:15px;cursor:pointer;
  transition:background .15s,border-color .15s;
  display:flex;align-items:center;justify-content:center;height:34px;flex-shrink:0}
.vf-period-cal-btn:hover{background:var(--bg4);border-color:var(--blue)}
.vf-period-cal-btn:active{transform:scale(.95)}

/* Actions */
.vf-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.vf-count{font-size:11px;color:var(--muted2);white-space:nowrap}
.vf-reset{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--bg3);color:#d6deea;border:1px solid #44566b;
  border-radius:8px;padding:0 16px;font-size:12px;font-weight:600;
  cursor:pointer;transition:all .15s;height:34px;white-space:nowrap}
.vf-reset:hover{border-color:var(--red);color:var(--red);background:rgba(251,113,133,.12)}

/* ═══════════ FILTROS ENTRADAS — redesign moderno (cards · chips · resumo) ═══════════ */
.v-filter-bar.fbar{
  display:block !important;
  background:linear-gradient(180deg, rgba(19,28,36,.72), rgba(13,18,24,.72));
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.06); border-radius:18px;
  padding:16px; margin-bottom:16px; box-shadow:0 6px 24px rgba(0,0,0,.22);
}
.fcards{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fcard{
  background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06);
  border-radius:14px; padding:13px 14px; transition:border-color .2s ease, background .2s ease;
}
.fcard:hover{ border-color:rgba(16,185,129,.28); background:rgba(16,185,129,.03); }
.fcard-wide{ grid-column:1 / -1; }
.fcard-h{
  display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700;
  color:#c8d2e0; text-transform:uppercase; letter-spacing:.05em; margin-bottom:11px;
}
.fcard-ico{ font-size:14px; }
.fcard-hint{ font-weight:400; font-size:11px; color:var(--muted); text-transform:none; letter-spacing:0; }
/* chips do Tipo de Operação */
.fchips{ display:flex; flex-wrap:wrap; gap:8px; }
.vf-chip.fchip{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 15px; font-size:13px; font-weight:600; border-radius:11px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1);
  color:#aeb9c9; cursor:pointer; transition:all .2s ease;
}
.vf-chip.fchip:hover{ border-color:rgba(56,189,248,.5); color:#e8eef6; background:rgba(56,189,248,.08); transform:translateY(-1px); }
.vf-chip.fchip.active{
  background:linear-gradient(135deg,#10b981,#38bdf8); border-color:transparent; color:#04121a;
  box-shadow:0 0 0 1px rgba(56,189,248,.55), 0 6px 18px rgba(16,185,129,.35);
}
/* busca de cliente maior e mais visível */
.fsearch-wrap{ position:relative; }
.fsearch-ico{ position:absolute; left:14px; top:23px; transform:translateY(-50%); font-size:15px; opacity:.7; pointer-events:none; }
.vf-search.fsearch{
  width:100%; height:46px; padding:0 14px 0 40px; font-size:15px; border-radius:12px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1); color:var(--text);
  transition:all .2s ease;
}
.vf-search.fsearch:focus{ border-color:#38bdf8; box-shadow:0 0 0 4px rgba(56,189,248,.14); background:rgba(56,189,248,.05); }
.vf-search.fsearch.has-selection{ border-color:#10b981; box-shadow:0 0 0 3px rgba(16,185,129,.16); color:#e8eef6; }
/* grid de produtos (2-3 colunas) com chips grandes */
.fprod-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.fprod-chip{
  position:relative; display:flex; align-items:center; justify-content:center; gap:6px; text-align:center;
  padding:10px 12px; font-size:12.5px; font-weight:600; border-radius:11px; min-height:42px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1); color:#aeb9c9;
  cursor:pointer; user-select:none; transition:all .2s ease;
}
.fprod-chip input{ position:absolute; opacity:0; width:0; height:0; }
.fprod-chip:hover{ border-color:rgba(56,189,248,.5); color:#e8eef6; background:rgba(56,189,248,.08); transform:translateY(-1px); }
.fprod-chip:has(input:checked){
  background:linear-gradient(135deg,#10b981,#38bdf8); border-color:transparent; color:#04121a;
  box-shadow:0 0 0 1px rgba(56,189,248,.55), 0 6px 16px rgba(16,185,129,.32);
}
/* barra de resumo dos filtros ativos */
.fresumo{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:14px; padding-top:13px; border-top:1px solid rgba(255,255,255,.07); }
.fresumo-count{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700;
  color:#04121a; background:linear-gradient(135deg,#10b981,#38bdf8); padding:5px 11px; border-radius:20px;
}
.fresumo-none{ font-size:12.5px; color:var(--muted); }
.ftag{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; color:#d4dcea;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  padding:4px 6px 4px 10px; border-radius:9px; animation:ftagIn .2s ease;
}
.ftag b{ color:#fff; font-weight:700; }
.ftag button{ border:none; background:rgba(255,255,255,.08); color:#aeb9c9; cursor:pointer; width:17px; height:17px; border-radius:5px; font-size:11px; line-height:1; transition:all .2s ease; }
.ftag button:hover{ background:var(--red); color:#fff; }
@keyframes ftagIn{ from{ opacity:0; transform:translateY(-3px) scale(.96); } to{ opacity:1; transform:none; } }
.fresumo-clear{
  margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600;
  color:#f0a5b0; cursor:pointer; background:rgba(251,113,133,.1); border:1px solid rgba(251,113,133,.3);
  padding:6px 13px; border-radius:10px; transition:all .2s ease;
}
.fresumo-clear:hover{ background:rgba(251,113,133,.2); color:#fff; border-color:var(--red); }
/* responsivo: tablet quebra em 1 coluna; mobile produtos 2 col */
@media(max-width:900px){ .fcards{ grid-template-columns:1fr; } }
@media(max-width:640px){
  .v-filter-bar.fbar{ padding:12px; border-radius:14px; }
  .fprod-grid{ grid-template-columns:1fr 1fr; }
  .fresumo-clear{ margin-left:0; width:100%; justify-content:center; }
}

/* ═══════════ FILTRO DE CATEGORIA (Saídas) — tema SALMÃO · resumo compacto + modal ═══════════ */
:root{
  --sal:#FF8A7A; --sal-hover:#FF7262;
  --sal-grad:linear-gradient(135deg,#FF9A8B 0%,#FF8A7A 45%,#FF7B6B 100%);
  --sal-bd:rgba(255,138,122,.45); --sal-glow:rgba(255,138,122,.35); --sal-soft:rgba(255,138,122,.10); --sal-ink:#4a140c;
}
/* Card COMPACTO na tela (≤ ~90px de altura) */
.dcat-compact{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 18px !important; border:1px solid var(--sal-bd) !important; }
.dcc-info{ display:flex; align-items:center; gap:12px; flex:1 1 260px; min-width:0; }
.dcc-ico{ font-size:20px; flex-shrink:0; }
.dcc-txt{ min-width:0; }
.dcc-main{ font-size:13.5px; color:#e6d6d2; font-weight:600; line-height:1.4; }
.dcc-main b{ color:#fff; font-weight:700; }
.dcc-sub{ font-size:12px; color:var(--muted2); margin-top:5px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; line-height:1.6; }
.dcc-lbl{ color:var(--muted); margin-right:2px; }
.dcc-hid{ color:#ffd7cf; background:var(--sal-soft); border:1px solid var(--sal-bd); padding:2px 9px; border-radius:8px; font-weight:600; white-space:nowrap; }
.dcc-more{ color:var(--sal); font-weight:700; white-space:nowrap; }
.dcc-edit{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; flex-shrink:0;
  background:var(--sal-soft); border:1px solid var(--sal-bd); color:#ffd7cf; border-radius:12px;
  padding:11px 20px; font-size:13px; font-weight:700; cursor:pointer; transition:all .2s ease; }
.dcc-edit:hover{ background:var(--sal-grad); border-color:transparent; color:var(--sal-ink); box-shadow:0 6px 18px var(--sal-glow); transform:translateY(-1px); }

/* Overlay + modal */
.dcat-overlay{ position:fixed; inset:0; z-index:400; display:none; align-items:flex-start; justify-content:center;
  padding:5vh 16px; overflow-y:auto; background:rgba(4,6,10,.62); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.dcat-overlay.open{ display:flex; }
.dcat-modal{ width:100%; max-width:740px; margin:auto 0; background:linear-gradient(180deg,#171016,#120c10);
  border:1px solid var(--sal-bd); border-radius:20px; box-shadow:0 24px 70px rgba(0,0,0,.55); padding:20px 22px; animation:dcatIn .2s ease; }
@keyframes dcatIn{ from{ opacity:0; transform:translateY(-10px) scale(.985);} to{ opacity:1; transform:none; } }
.dcat-modal-h{ display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.dcat-x{ flex-shrink:0; margin-left:auto; background:rgba(255,255,255,.06); border:none; color:#e6d6d2; width:32px; height:32px; border-radius:10px; cursor:pointer; font-size:14px; transition:all .2s ease; }
.dcat-x:hover{ background:var(--sal-hover); color:#fff; }
.dcat-modes{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.dcat-mode{ flex:1 1 200px; display:flex; align-items:center; justify-content:center; gap:9px; padding:12px 14px; border-radius:13px;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03); cursor:pointer; font-size:13px; font-weight:600; color:#cabcb8; text-align:center; transition:all .2s ease; }
.dcat-mode:hover{ border-color:var(--sal-bd); }
.dcat-mode input{ accent-color:var(--sal); width:16px; height:16px; flex-shrink:0; }
.dcat-mode:has(input:checked){ background:var(--sal-soft); border-color:var(--sal); color:#ffe6e0; box-shadow:inset 0 0 0 1px var(--sal-bd); }
.dcat-todas-msg{ padding:16px; border-radius:13px; background:var(--sal-soft); border:1px solid var(--sal-bd); color:#ffcfc6; font-size:13px; font-weight:500; text-align:center; line-height:1.5; }
.dcat-tools{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.dcat-body{ max-height:48vh; overflow-y:auto; overflow-x:hidden; padding-right:4px; }
.dcat-modal-f{ display:flex; justify-content:flex-end; margin-top:16px; padding-top:16px; border-top:1px solid rgba(255,255,255,.08); }
.dcat-apply{ background:var(--sal-grad); color:var(--sal-ink); border:none; border-radius:12px; padding:11px 22px; font-size:13px; font-weight:800; cursor:pointer; white-space:nowrap; transition:all .2s ease; }
.dcat-apply:hover{ box-shadow:0 8px 22px var(--sal-glow); transform:translateY(-1px); }

/* Cabeçalho · busca · botões · contador */
.dcat-title{ display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:#e6d6d2; flex-wrap:wrap; flex:1 1 auto; }
.dcat-count{ background:var(--sal-grad); color:var(--sal-ink); font-size:11px; font-weight:800; padding:2px 10px; border-radius:20px; white-space:nowrap; }
.dcat-search-wrap{ position:relative; flex:1 1 200px; min-width:160px; }
.dcat-search-ico{ position:absolute; left:12px; top:50%; transform:translateY(-50%); opacity:.6; font-size:13px; pointer-events:none; }
.dcat-search{ width:100%; height:40px; padding:0 12px 0 34px; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1); color:var(--text); font-size:13px; transition:all .2s ease; }
.dcat-search:focus{ border-color:var(--sal); box-shadow:0 0 0 3px var(--sal-glow); background:var(--sal-soft); outline:none; }
.dcat-search::placeholder{ color:var(--muted); }
.dcat-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.dcat-btn{ display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:8px 14px; border-radius:11px; font-size:12.5px; font-weight:600;
  cursor:pointer; white-space:nowrap; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); color:#d8ccc8; transition:all .2s ease; }
.dcat-btn:hover{ border-color:var(--sal-bd); color:#fff; background:var(--sal-soft); transform:translateY(-1px); }
.dcat-fav-toggle.on{ background:var(--sal-grad); border-color:transparent; color:var(--sal-ink); }

/* grupos colapsáveis */
.dcat-grupo{ margin-bottom:8px; }
.dcat-grupo-h{ display:flex; align-items:center; gap:8px; cursor:pointer; padding:8px 6px; border-radius:9px; user-select:none; transition:background .15s ease; }
.dcat-grupo-h:hover{ background:rgba(255,255,255,.035); }
.dcat-arrow{ font-size:11px; color:#b98f88; transition:transform .2s ease; flex-shrink:0; }
.dcat-grupo.col .dcat-arrow{ transform:rotate(-90deg); }
.dcat-grupo-name{ font-size:11px; font-weight:700; color:#c3b0ab; text-transform:uppercase; letter-spacing:.05em; }
.dcat-grupo-cnt{ font-size:10px; color:#ffe0d8; background:var(--sal-soft); border:1px solid var(--sal-bd); padding:1px 8px; border-radius:20px; white-space:nowrap; flex-shrink:0; }
.dcat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:6px; max-height:2200px; overflow:hidden; transition:max-height .25s ease, opacity .2s ease, margin .2s ease; }
.dcat-grupo.col .dcat-grid{ max-height:0; opacity:0; margin-top:0; pointer-events:none; }

/* chips — SEM cortar texto (quebra em linha extra quando necessário) */
.dcat-chip{ position:relative; display:flex; align-items:center; gap:8px; min-height:46px; padding:9px 12px; border-radius:14px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1); color:#cdbbb6; cursor:pointer; font-size:12.5px; font-weight:600; line-height:1.28; user-select:none; transition:all .2s ease; }
.dcat-chip input{ position:absolute; opacity:0; width:0; height:0; }
.dcat-chip:hover{ border-color:var(--sal-bd); color:#fff; background:var(--sal-soft); transform:translateY(-1px); }
.dcat-chip:has(input:checked){ background:var(--sal-grad); border-color:transparent; color:var(--sal-ink); box-shadow:0 0 0 1px var(--sal-bd), 0 5px 16px var(--sal-glow); }
.dcat-chip-body{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.dcat-chip-txt{ width:100%; overflow-wrap:break-word; word-break:normal; hyphens:none; }
.dcat-star{ font-size:15px; line-height:1; color:#a98a84; transition:color .15s ease, transform .15s ease; flex-shrink:0; }
.dcat-star:hover{ transform:scale(1.25); }
.dcat-star.on{ color:#ffb020; }
.dcat-chip:has(input:checked) .dcat-star{ color:rgba(74,20,12,.5); }
.dcat-chip:has(input:checked) .dcat-star.on{ color:#7a3b00; }
.dcat-badge{ align-self:flex-start; font-size:8.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; background:rgba(255,138,122,.2); color:var(--sal); padding:2px 7px; border-radius:6px; white-space:nowrap; line-height:1.35; }
.dcat-chip:has(input:checked) .dcat-badge{ background:rgba(74,20,12,.18); color:var(--sal-ink); }

/* barra de resumo (no modal) */
.dcat-resumo{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:14px; padding-top:12px; border-top:1px solid rgba(255,255,255,.07); }
.dcat-resumo-n{ font-size:12px; font-weight:800; color:var(--sal-ink); background:var(--sal-grad); padding:4px 12px; border-radius:20px; white-space:nowrap; }
.dcat-resumo-none{ font-size:12.5px; color:var(--muted); }
.dcat-resumo-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.dcat-rtag{ font-size:11.5px; color:#e6d6d2; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); padding:3px 10px; border-radius:8px; white-space:nowrap; }
.dcat-rtag.more{ background:var(--sal-soft); color:var(--sal); border-color:var(--sal-bd); font-weight:700; }
.dcat-vazio{ padding:18px; text-align:center; color:var(--muted); font-size:12.5px; line-height:1.5; }

/* responsivo — nada corta em nenhuma largura */
@media(max-width:900px){ .dcat-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:640px){ .dcat-modal{ padding:16px; border-radius:16px; } .dcat-body{ max-height:56vh; } }
@media(max-width:560px){
  .dcat-grid{ grid-template-columns:repeat(2,1fr); }
  .dcat-search-wrap{ flex-basis:100%; }
  .dcat-actions{ width:100%; }
  .dcat-actions .dcat-btn{ flex:1 1 auto; justify-content:center; }
  .dcat-mode{ flex-basis:100%; }
}
@media(max-width:380px){ .dcat-grid{ grid-template-columns:1fr; } }

/* ═══════════ SOLICITAÇÃO DE COMPRA (pedidos) ═══════════ */
.ped-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.ped-tab{ padding:9px 16px; border-radius:11px; font-size:13px; font-weight:600; cursor:pointer;
  background:var(--bg2); border:1px solid var(--border); color:var(--muted2); transition:all .2s ease; white-space:nowrap; }
.ped-tab:hover{ border-color:var(--cyan); color:var(--text); }
.ped-tab.on{ background:rgba(34,211,238,.12); border-color:var(--cyan); color:var(--cyan); }
.ped-st{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700;
  border:1px solid; border-radius:20px; padding:3px 10px; white-space:nowrap; background:rgba(255,255,255,.03); }
/* ── Escopo da conferência de estoque ── */
.inv-escopo{ display:block; margin-bottom:12px; padding:10px 14px; border-radius:10px;
  background:var(--bg2); border:1px solid var(--border); color:var(--muted2);
  font-size:12.5px; line-height:1.5; }
.inv-escopo b{ color:var(--text); }
.inv-escopo.on{ background:rgba(34,211,238,.08); border-color:rgba(34,211,238,.35); }
.inv-escopo.on b{ color:var(--cyan); }

/* ── Centro de custo: Operação × Britador Novo (aba Saídas) ── */
.dbn-bar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.dbn-chip{ display:inline-flex; align-items:center; gap:7px; padding:8px 15px; border-radius:11px;
  background:var(--bg2); border:1px solid var(--border); color:var(--muted2);
  font-size:13px; font-weight:700; cursor:pointer; transition:all .18s ease; white-space:nowrap; }
.dbn-chip:hover{ border-color:var(--amber,#f0b429); color:var(--text); }
.dbn-chip.on{ background:rgba(240,180,41,.13); border-color:rgba(240,180,41,.6); color:#f0b429;
  box-shadow:0 2px 12px rgba(240,180,41,.16); }
.dbn-n{ display:inline-flex; align-items:center; justify-content:center; min-width:19px; height:19px;
  padding:0 5px; border-radius:10px; background:rgba(240,180,41,.22); color:#f0b429;
  font-size:11px; font-weight:800; }
.dbn-chip.on .dbn-n{ background:#f0b429; color:#2a1d00; }
.dbn-hint{ font-size:12px; color:var(--muted); flex:1; min-width:170px; }
.dbn-badge{ display:inline-block; margin-left:6px; padding:2px 8px; border-radius:20px;
  background:rgba(240,180,41,.14); border:1px solid rgba(240,180,41,.42); color:#f0b429;
  font-size:10.5px; font-weight:700; white-space:nowrap; vertical-align:middle; }
.dbn-mv{ background:none; border:1px solid transparent; border-radius:6px; cursor:pointer;
  font-size:13px; padding:2px 5px; opacity:.35; filter:grayscale(1); transition:all .18s ease; }
.dbn-mv:hover{ opacity:1; filter:none; border-color:rgba(240,180,41,.5); background:rgba(240,180,41,.1); }
.dbn-mv.on{ opacity:1; filter:none; border-color:rgba(240,180,41,.55); background:rgba(240,180,41,.16); }
/* Checkbox "Britador Novo" no modal de saída */
.desp-cc-box{ display:flex; align-items:flex-start; gap:10px; padding:11px 13px; cursor:pointer;
  background:var(--bg3); border:1px solid var(--border); border-radius:9px; transition:all .18s ease; }
.desp-cc-box:hover{ border-color:rgba(240,180,41,.45); }
.desp-cc-box.on{ background:rgba(240,180,41,.09); border-color:rgba(240,180,41,.55); }
.desp-cc-box input{ width:16px; height:16px; margin-top:2px; accent-color:#f0b429; cursor:pointer; flex-shrink:0; }
.desp-cc-box b{ display:block; font-size:12.5px; color:var(--text); margin-bottom:3px; }
.desp-cc-box small{ display:block; font-size:11px; color:var(--muted); line-height:1.45; }
.desp-cc-box.on b{ color:#f0b429; }
@media(max-width:560px){ .dbn-hint{ flex-basis:100%; } .dbn-chip{ flex:1; justify-content:center; padding:8px 10px; } }

/* Faixa "período mostrado" no Estoque de produção — ocupa a linha toda do grid */
.est-periodo{ grid-column:1/-1; padding:9px 13px; border-radius:9px;
  background:rgba(34,211,238,.07); border:1px solid rgba(34,211,238,.28);
  color:var(--muted2); font-size:12.5px; }
.est-periodo b{ color:var(--cyan); }

/* ══ Dashboard executivo de Pedidos de Compra ══ */
/* Necessita atenção — grupos com cor por prioridade */
.ped-aten-g{ border-left:3px solid var(--nv); border-radius:9px; background:var(--bg3);
  padding:11px 13px; margin-bottom:10px; }
.ped-aten-g:last-child{ margin-bottom:0; }
.ped-aten-g.crit{ --nv:var(--red);    background:rgba(251,113,133,.06); }
.ped-aten-g.aten{ --nv:var(--orange); background:rgba(249,115,22,.05); }
.ped-aten-g.norm{ --nv:var(--green);  background:rgba(74,222,128,.05); }
.ped-aten-h{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700;
  color:var(--text); margin-bottom:8px; }
.ped-aten-c{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px;
  padding:0 6px; border-radius:10px; background:var(--nv); color:#0b1016; font-size:11px; font-weight:800; }
.ped-aten-l{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding:6px 0;
  border-top:1px solid var(--border); font-size:12.5px; cursor:pointer; transition:opacity .15s ease; }
.ped-aten-l:hover{ opacity:.72; }
.ped-aten-l:first-of-type{ border-top:none; }
.ped-aten-l > b{ color:var(--sky); font-weight:700; white-space:nowrap; }
.ped-aten-t{ color:var(--muted2); flex:1; min-width:130px; }
.ped-aten-tag{ padding:2px 8px; border-radius:20px; background:var(--nv); color:#0b1016;
  font-size:10.5px; font-weight:800; white-space:nowrap; }
.ped-aten-v{ font-weight:700; color:var(--text); white-space:nowrap; }
.ped-aten-mais{ margin-top:6px; font-size:11.5px; color:var(--muted); font-style:italic; }
.ped-aten-ok{ padding:16px; border-radius:9px; background:rgba(74,222,128,.07);
  border:1px solid rgba(74,222,128,.3); color:var(--muted2); font-size:13px; }
.ped-aten-ok b{ color:var(--green); }

/* Últimas movimentações */
.ped-feed{ display:flex; flex-direction:column; }
.ped-feed-l{ display:flex; align-items:center; gap:11px; padding:9px 0;
  border-bottom:1px solid var(--border); cursor:pointer; transition:opacity .15s ease; }
.ped-feed-l:last-child{ border-bottom:none; }
.ped-feed-l:hover{ opacity:.72; }
.ped-feed-i{ font-size:16px; flex-shrink:0; width:22px; text-align:center; }
.ped-feed-c{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.ped-feed-c b{ font-size:12.5px; color:var(--text); font-weight:600; }
.ped-feed-c small,.ped-feed-m small{ font-size:11px; color:var(--muted); }
.ped-feed-m{ display:flex; flex-direction:column; gap:2px; text-align:right; flex-shrink:0; }
.ped-feed-m b{ font-size:12px; color:var(--muted2); font-weight:600; }

/* Resumo financeiro */
.ped-fin-l{ display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:9px 0; border-bottom:1px solid var(--border); }
.ped-fin-k{ font-size:12.5px; color:var(--muted2); }
.ped-fin-v{ display:flex; flex-direction:column; align-items:flex-end; gap:2px;
  font-size:14px; font-weight:700; color:var(--text); text-align:right; }
.ped-fin-v small{ font-size:11px; font-weight:400; color:var(--muted); }
.ped-fin-tab{ margin-top:12px; }
.ped-fin-th{ font-size:11px; font-weight:700; color:var(--muted2); text-transform:uppercase;
  letter-spacing:.05em; margin-bottom:8px; }
.ped-fin-fl{ display:grid; grid-template-columns:1fr 62px 26px auto; align-items:center; gap:8px;
  padding:5px 0; font-size:12px; }
.ped-fin-fn{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); }
.ped-fin-fb{ height:6px; border-radius:3px; background:var(--bg3); overflow:hidden; }
.ped-fin-fb i{ display:block; height:100%; border-radius:3px; background:var(--cyan); }
.ped-fin-fq{ text-align:right; font-weight:700; color:var(--cyan); }
.ped-fin-fv{ text-align:right; color:var(--muted2); white-space:nowrap; }
.ped-fin-mais{ margin-top:6px; font-size:11.5px; color:var(--muted); font-style:italic; }
@media(max-width:640px){
  .ped-aten-l{ gap:7px; font-size:12px; }
  .ped-aten-t{ flex-basis:100%; min-width:0; }
  .ped-feed-m{ text-align:right; }
  .ped-fin-fl{ grid-template-columns:1fr 40px 24px; }
  .ped-fin-fv{ display:none; }
}

/* ── Tooltip com os produtos do pedido (hover no desktop, toque no celular) ── */
.ped-num-cel{ white-space:nowrap; }
.ped-num{ font-weight:700; color:var(--sky); cursor:pointer; }
.ped-num:hover{ text-decoration:underline; }
/* Sempre visível: mostra a contagem de itens de relance e é o gatilho por toque
   (não dá para confiar só em @media(hover:none) — nem todo aparelho reporta). */
.ped-tip-chip{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px;
  padding:0 6px; margin-left:6px; vertical-align:middle; border-radius:10px; cursor:pointer;
  background:var(--bg3); border:1px solid var(--border); color:var(--muted2);
  font-size:11px; font-weight:700; line-height:1; transition:all .15s ease; }
.ped-tip-chip:hover{ border-color:var(--cyan); color:var(--cyan); }
.ped-tip{ position:fixed; z-index:9500; display:none; max-width:330px; min-width:180px;
  padding:11px 13px; border-radius:11px; background:var(--bg2);
  border:1px solid var(--border); box-shadow:0 12px 38px rgba(0,0,0,.5);
  font-size:12.5px; color:var(--text); pointer-events:none;
  opacity:0; transform:translateY(-3px); transition:opacity .13s ease, transform .13s ease; }
.ped-tip.on{ display:block; opacity:1; transform:translateY(0); }
/* Aberto por toque/clique no chip: aceita interação (rolar a lista de produtos) */
.ped-tip.fixo{ pointer-events:auto; max-width:min(330px, calc(100vw - 24px)); }
.ped-tip-h{ font-size:11px; font-weight:700; color:var(--muted2); text-transform:uppercase;
  letter-spacing:.05em; padding-bottom:7px; margin-bottom:7px; border-bottom:1px solid var(--border); }
.ped-tip-h b{ color:var(--cyan); }
.ped-tip-lista{ list-style:none; margin:0; padding:0; max-height:190px; overflow-y:auto; }
.ped-tip-lista li{ position:relative; padding:3px 0 3px 13px; line-height:1.45; word-break:break-word; }
.ped-tip-lista li::before{ content:'•'; position:absolute; left:0; color:var(--cyan); font-weight:700; }
.ped-tip-lista::-webkit-scrollbar{ width:6px; }
.ped-tip-lista::-webkit-scrollbar-thumb{ background:var(--border); border-radius:3px; }
.ped-tip-q{ display:inline-block; margin-right:6px; padding:1px 6px; border-radius:5px;
  background:var(--bg3); color:var(--muted2); font-size:11px; font-weight:700; }
.ped-tip-uno{ line-height:1.45; word-break:break-word; }
.ped-tip-mais{ margin-top:7px; padding-top:7px; border-top:1px solid var(--border);
  font-size:11.5px; color:var(--muted); font-style:italic; }
.ped-tip-vazio{ color:var(--muted); font-style:italic; }
@media(max-width:640px){
  .ped-tip{ max-width:calc(100vw - 24px); font-size:12px; }
  .ped-tip-chip{ min-width:24px; height:24px; font-size:11.5px; }   /* alvo de toque maior */
}

/* Botões de ação da tabela — visíveis, com cor por tipo de ação */
.ped-act{ display:inline-flex; align-items:center; justify-content:center; gap:5px; height:30px; min-width:32px;
  padding:0 9px; background:var(--bg3); border:1px solid var(--border); border-radius:8px; color:var(--muted2);
  font-size:13px; font-weight:700; line-height:1; cursor:pointer; vertical-align:middle;
  transition:all .18s ease; }
.ped-act + .ped-act{ margin-left:5px; }
.ped-act:hover{ background:rgba(255,255,255,.09); border-color:var(--cyan); color:var(--text); transform:translateY(-1px); }
.ped-act-lb{ font-size:11.5px; letter-spacing:.01em; }
.ped-act.ok{ background:rgba(74,222,128,.14); border-color:rgba(74,222,128,.5); color:var(--green); }
.ped-act.ok:hover{ background:var(--green); border-color:var(--green); color:#04240f; box-shadow:0 3px 11px rgba(74,222,128,.35); }
.ped-act.del{ background:rgba(251,113,133,.12); border-color:rgba(251,113,133,.45); color:var(--red); }
.ped-act.del:hover{ background:var(--red); border-color:var(--red); color:#2b0709; box-shadow:0 3px 11px rgba(251,113,133,.32); }
@media(max-width:1100px){ .ped-act-lb{ display:none; } }
/* Seleção para impressão em lote */
.ped-ck{ width:16px; height:16px; accent-color:var(--cyan); cursor:pointer; vertical-align:middle; }
.ped-selbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; padding:10px 14px;
  background:rgba(34,211,238,.08); border:1px solid rgba(34,211,238,.35); border-radius:11px; }
.ped-selbar-n{ font-size:13px; font-weight:800; color:var(--cyan); }
.ped-selbar-i{ font-size:12px; color:var(--muted2); }
.ped-selbar .ped-btn2{ margin-left:auto; }
.ped-selbar .ped-btn2 + .ped-btn2{ margin-left:0; }
.ped-btn2{ display:inline-flex; align-items:center; gap:6px; background:var(--bg3); border:1px solid var(--border);
  color:var(--muted2); border-radius:9px; padding:8px 14px; font-size:12.5px; font-weight:600; cursor:pointer;
  transition:all .2s ease; white-space:nowrap; }
.ped-btn2:hover{ border-color:var(--cyan); color:var(--text); }
.ped-btn2.ok{ background:rgba(74,222,128,.14); border-color:rgba(74,222,128,.5); color:var(--green); }
.ped-btn2.ok:hover{ background:var(--green); border-color:var(--green); color:#04240f; box-shadow:0 4px 13px rgba(74,222,128,.32); }
.ped-btn2.danger{ background:rgba(251,113,133,.12); border-color:rgba(251,113,133,.45); color:var(--red); }
.ped-btn2.danger:hover{ background:var(--red); border-color:var(--red); color:#2b0709; box-shadow:0 4px 13px rgba(251,113,133,.3); }
.ped-btn-main{ display:inline-flex; align-items:center; gap:6px; background:var(--green); border:none; color:#04240f;
  border-radius:9px; padding:8px 18px; font-size:12.5px; font-weight:800; cursor:pointer; white-space:nowrap; transition:all .2s ease; }
.ped-btn-main:hover{ box-shadow:0 4px 14px rgba(74,222,128,.35); transform:translateY(-1px); }
.ped-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; }
.ped-fg label{ display:block; font-size:11px; font-weight:700; color:var(--muted2); text-transform:uppercase;
  letter-spacing:.05em; margin-bottom:5px; }
.ped-fg input, .ped-fg select{ width:100%; box-sizing:border-box; background:var(--bg3); border:1px solid var(--border);
  border-radius:8px; padding:9px 11px; color:var(--text); font-size:13px; height:38px; }
.ped-fg input:focus, .ped-fg select:focus{ border-color:var(--cyan); outline:none; box-shadow:0 0 0 3px rgba(34,211,238,.12); }
.ped-in{ width:100%; min-width:70px; box-sizing:border-box; background:var(--bg3); border:1px solid var(--border);
  border-radius:7px; padding:7px 9px; color:var(--text); font-size:12.5px; }
.ped-in:focus{ border-color:var(--cyan); outline:none; }
/* sino de notificações */
.ped-bell{ position:relative; display:flex; align-items:center; justify-content:center; width:38px; height:38px;
  font-size:17px; cursor:pointer; border-radius:10px; transition:background .15s; user-select:none; }
.ped-bell:hover{ background:rgba(255,255,255,.06); }
.ped-bell-badge{ position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 4px;
  display:flex; align-items:center; justify-content:center; font-size:9.5px; font-weight:800; color:#fff;
  background:var(--red); border-radius:10px; }
.ped-bell-drop{ display:none; position:absolute; top:44px; right:0; width:255px; background:var(--bg2);
  border:1px solid var(--border); border-radius:12px; box-shadow:0 14px 40px rgba(0,0,0,.5); padding:10px; z-index:300; }
.ped-bell-drop.open{ display:block; }
.ped-not-title{ font-size:12px; font-weight:700; color:var(--text); padding:4px 6px 8px; border-bottom:1px solid var(--border); margin-bottom:6px; }
.ped-not-item{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px 6px;
  border-radius:8px; cursor:pointer; font-size:12.5px; color:var(--muted2); }
.ped-not-item:hover{ background:rgba(255,255,255,.05); }
.ped-not-item b{ color:var(--text); font-size:13px; }
/* toast ao entrar */
.ped-toast{ position:fixed; right:16px; bottom:16px; z-index:500; display:flex; align-items:center; gap:10px;
  background:var(--bg2); border:1px solid var(--border); border-left:4px solid var(--red); border-radius:12px;
  padding:13px 16px; font-size:13px; color:var(--text); box-shadow:0 14px 40px rgba(0,0,0,.5); max-width:min(92vw,380px);
  animation:pedToastIn .25s ease; }
@keyframes pedToastIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
.ped-toast button{ background:var(--bg3); border:1px solid var(--border); color:var(--muted2); border-radius:7px;
  padding:5px 11px; font-size:12px; cursor:pointer; white-space:nowrap; }
.ped-toast button:hover{ color:var(--text); border-color:var(--cyan); }
/* overlay recebimento parcial */
.ped-overlay{ position:fixed; inset:0; z-index:400; display:none; align-items:flex-start; justify-content:center;
  padding:6vh 16px; overflow-y:auto; background:rgba(4,6,10,.62); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.ped-overlay.open{ display:flex; }
.ped-modal{ width:100%; max-width:620px; margin:auto 0; background:var(--bg2); border:1px solid var(--border);
  border-radius:16px; box-shadow:0 24px 70px rgba(0,0,0,.55); padding:20px; }
@media(max-width:640px){ .ped-grid{ grid-template-columns:1fr 1fr; } .ped-tabs{ gap:6px; } .ped-tab{ flex:1; text-align:center; padding:9px 8px; } }
@media(max-width:430px){ .ped-grid{ grid-template-columns:1fr; } }

@media(max-width:1100px){
  .vf-row{grid-template-columns:140px 1fr 150px}
  .vf-row > .vf-wide{grid-column:span 3}
}
@media(max-width:768px){
  .vf-row{grid-template-columns:1fr 1fr}
  .vf-row > .vf-wide{grid-column:span 2}
  .vf-row2{flex-direction:column;align-items:stretch}
  .vf-date-range{flex-direction:column;align-items:stretch}
  .vf-actions{margin-left:0;justify-content:space-between}
}
@media(max-width:500px){
  .vf-row{grid-template-columns:1fr}
  .vf-row > .vf-wide{grid-column:span 1}
}

/* ── NAV LOG ─────────────────────────────────────────────── */
.gen-date{display:none} /* hide old */
.nav-log{position:relative;display:flex;align-items:center;gap:6px;
  cursor:pointer;padding:4px 10px;border-radius:6px;
  border:1px solid var(--border);background:var(--bg2);
  transition:border-color .15s;user-select:none;max-width:320px}
.nav-log:hover{border-color:var(--blue)}
.nav-log-icon{font-size:14px;flex-shrink:0}
.nav-log-text{font-size:11px;color:var(--muted2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:240px}
.nav-log-dropdown{display:none;position:absolute;top:calc(100% + 8px);right:0;
  background:#060a0e;border:1px solid var(--border);border-radius:10px;
  min-width:340px;max-width:420px;z-index:500;
  box-shadow:0 8px 32px rgba(0,0,0,.5);overflow:hidden}
.nav-log:hover .nav-log-dropdown,
.nav-log-dropdown:hover{display:block}
.nav-log-header{padding:10px 14px;border-bottom:1px solid var(--border);
  font-size:11px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em;
  display:flex;align-items:center;gap:6px}
.nav-log-item{padding:9px 14px;border-bottom:1px solid #0f161d;
  display:flex;gap:10px;align-items:flex-start}
.nav-log-item:last-child{border-bottom:none}
.nav-log-bullet{font-size:14px;flex-shrink:0;margin-top:1px}
.nav-log-body{flex:1;min-width:0}
.nav-log-msg{font-size:12px;color:var(--text);line-height:1.4;
  white-space:normal;word-break:break-word}
.nav-log-time{font-size:10px;color:var(--muted);margin-top:3px}
.nav-log-empty{padding:16px 14px;font-size:12px;color:var(--muted);text-align:center}

/* ── CONFERÊNCIA DE ESTOQUE (Inventário) ─────────────────── */
.inv-views{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0}
.inv-vbtn{background:var(--bg3);border:1px solid var(--border);color:var(--muted2);
  border-radius:8px;padding:7px 14px;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s}
.inv-vbtn:hover{border-color:var(--blue);color:var(--text)}
.inv-vbtn.active{background:var(--blue);border-color:var(--blue);color:#04240f}
.inv-hbtn{background:var(--bg3);border:1px solid var(--border);color:var(--muted2);
  border-radius:6px;padding:6px 12px;font-size:12px;cursor:pointer;transition:all .15s}
.inv-hbtn:hover{border-color:var(--blue);color:var(--text)}
/* indicadores em tempo real */
.inv-indic{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch}
.inv-chip{background:var(--bg2);border:1px solid var(--border);border-radius:10px;
  padding:8px 14px;min-width:88px;text-align:center;flex:1}
.inv-chip-v{font-size:20px;font-weight:800;line-height:1.1}
.inv-chip-l{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
.inv-progress{flex-basis:100%;height:8px;background:var(--bg3);border-radius:6px;overflow:hidden;margin-top:2px}
.inv-progress-fill{height:100%;background:linear-gradient(90deg,var(--green),var(--blue));transition:width .3s}
/* input grande do card foco */
.inv-bigin{width:100%;box-sizing:border-box;text-align:center;font-size:34px;font-weight:800;
  background:var(--bg4);border:2px solid var(--blue);border-radius:12px;color:var(--text);
  padding:8px 6px;outline:none;-moz-appearance:textfield}
.inv-bigin::-webkit-outer-spin-button,.inv-bigin::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.inv-cellin{width:80px;box-sizing:border-box;text-align:center;font-size:15px;font-weight:700;
  background:var(--bg4);border:1px solid var(--blue);border-radius:7px;color:var(--text);padding:6px 4px;outline:none;-moz-appearance:textfield}
.inv-cellin::-webkit-outer-spin-button,.inv-cellin::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.inv-navbtn{flex:1;min-width:100px;background:var(--bg3);border:1px solid var(--border);color:var(--text);
  border-radius:10px;padding:11px 12px;font-size:14px;font-weight:600;cursor:pointer;transition:all .15s}
.inv-navbtn:hover:not(:disabled){border-color:var(--blue)}
.inv-navbtn:disabled{opacity:.4;cursor:not-allowed}
.inv-navbtn-main{background:var(--green);border-color:var(--green);color:#04240f;flex:2}
.inv-row-focus{background:rgba(16,185,129,.08)}
@media(max-width:768px){
  .inv-chip{min-width:74px;padding:7px 8px}
  .inv-chip-v{font-size:17px}
  .inv-bigin{font-size:40px}
  .inv-navbtn{padding:13px 10px;font-size:15px}
}

/* ── FILTRO GLOBAL ─────────────────────────────────────────
   Botão no nav + painel dropdown com os critérios comuns a
   todas as abas (Período/Ano/Mês/Cliente/Produto/Categoria/Status) */
.gf-wrap{position:relative}
.gf-trigger{
  position:relative;display:flex;align-items:center;gap:6px;cursor:pointer;
  padding:5px 10px;border-radius:6px;border:1px solid var(--border);
  background:var(--bg2);color:var(--muted2);font-size:12px;font-weight:600;
  transition:border-color .15s,color .15s;
}
.gf-trigger:hover{border-color:var(--blue);color:var(--text)}
.gf-trigger.gf-active{border-color:var(--blue);color:var(--blue)}
.gf-badge{
  background:var(--blue);color:#fff;font-size:10px;font-weight:700;
  min-width:16px;height:16px;border-radius:8px;display:none;align-items:center;
  justify-content:center;padding:0 4px;line-height:1;
}
.gf-panel{
  display:none;position:absolute;top:calc(100% + 8px);right:0;z-index:600;
  width:340px;max-width:92vw;max-height:80vh;overflow-y:auto;
  background:#060a0e;border:1px solid var(--border);border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,.55);
}
.gf-panel.open{display:block}
.gf-panel-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border-bottom:1px solid var(--border);
  font-size:13px;font-weight:700;color:var(--text);position:sticky;top:0;
  background:#060a0e;z-index:1;
}
.gf-close{background:none;border:none;color:var(--muted2);font-size:16px;cursor:pointer;line-height:1}
.gf-close:hover{color:var(--red)}
.gf-body{display:flex;flex-direction:column;gap:12px;padding:14px}
.gf-field{display:flex;flex-direction:column;gap:5px}
.gf-active{
  display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 12px;
}
.gf-active-empty{font-size:11px;color:var(--muted)}
.gf-chip{
  display:inline-flex;align-items:center;gap:6px;background:var(--bg3);
  border:1px solid var(--border);border-radius:20px;padding:3px 6px 3px 10px;
  font-size:11px;color:var(--muted2);
}
.gf-chip b{color:var(--text);font-weight:600}
.gf-chip button{
  background:none;border:none;color:var(--muted);cursor:pointer;font-size:11px;
  padding:2px 4px;line-height:1;border-radius:50%;
}
.gf-chip button:hover{color:var(--red);background:rgba(251,113,133,.12)}
.gf-footer{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:12px 14px;border-top:1px solid var(--border);
}
.gf-admin{display:flex;gap:6px}
.gf-admin-btn{
  display:flex;align-items:center;gap:4px;cursor:pointer;
  background:none;border:1px solid var(--border);color:var(--muted);
  border-radius:6px;padding:4px 9px;font-size:11px;transition:all .15s;
}
.gf-admin-btn:hover{border-color:var(--blue);color:var(--blue)}
@media(max-width:768px){
  .gf-trigger-label{display:none}
  .gf-panel{
    position:fixed;top:54px;left:8px;right:8px;width:auto;max-width:none;
    max-height:calc(100vh - 64px);
  }
}

/* ── PRODUÇÃO PAGE ──────────────────────────────────── */
.prod-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.prod-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:14px}
.prod-form{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:18px;margin-bottom:14px}
.prod-form h3{font-size:13px;font-weight:700;color:var(--text);margin-bottom:14px;
  display:flex;align-items:center;gap:8px}
.form-row{display:grid;gap:12px;margin-bottom:12px}
.form-row-2{grid-template-columns:1fr 1fr}
.form-row-3{grid-template-columns:1fr 1fr 1fr}
.form-row-4{grid-template-columns:1fr 1fr 1fr 1fr}
.form-group{display:flex;flex-direction:column;gap:5px}
.form-group label{font-size:10px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.05em}
.form-group input,.form-group select,.form-group textarea{
  background:var(--bg3);color:var(--text);border:1px solid var(--border);
  border-radius:7px;padding:7px 10px;font-size:13px;outline:none;
  transition:border-color .15s;width:100%}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--blue)}
.form-group input.calc-result{background:var(--bg4);color:var(--green);
  font-weight:700;border-color:var(--green);cursor:not-allowed}
.form-group input.calc-warn{color:var(--red);border-color:var(--red)}
.form-group textarea{resize:vertical;min-height:60px;font-size:12px}

/* Horímetro card */
.hor-display{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-top:12px}
.hor-stat{background:var(--bg3);border-radius:8px;padding:12px 14px;border:1px solid var(--border)}
.hor-stat-label{font-size:10px;color:#aeb9c9;text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}
.hor-stat-val{font-size:20px;font-weight:700}
.hor-stat-sub{font-size:10px;color:var(--muted);margin-top:3px}
.hs-blue .hor-stat-val{color:var(--blue)}
.hs-green .hor-stat-val{color:var(--green)}
.hs-yellow .hor-stat-val{color:var(--yellow)}
.hs-red .hor-stat-val{color:var(--red)}
.hs-orange .hor-stat-val{color:var(--orange)}

/* Produção cards */
.prod-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:14px}
.prod-card-title{font-size:11px;color:#aeb9c9;text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px}
.prod-card-val{font-size:24px;font-weight:700;color:var(--blue)}
.prod-card-sub{font-size:11px;color:var(--muted);margin-top:4px}
.prod-card.c-b{border-top:3px solid var(--blue)}
.prod-card.c-g{border-top:3px solid var(--green)}
.prod-card.c-y{border-top:3px solid var(--yellow)}
.prod-card.c-p{border-top:3px solid var(--purple)}
.prod-card.c-b .prod-card-val{color:var(--blue)}
.prod-card.c-g .prod-card-val{color:var(--green)}
.prod-card.c-y .prod-card-val{color:var(--yellow)}
.prod-card.c-p .prod-card-val{color:var(--purple)}

/* Parada table */
.parada-table{width:100%;border-collapse:collapse;font-size:12px;margin-top:8px}
.parada-table th{color:var(--muted);font-weight:600;text-align:left;padding:7px 10px;
  border-bottom:1px solid var(--border);font-size:10px;text-transform:uppercase;letter-spacing:.04em}
.parada-table td{padding:7px 10px;border-bottom:1px solid #0f161d;color:#bfcad8;vertical-align:middle}
.parada-table tr:hover td{background:var(--bg3)}
.parada-table .err-cell{color:var(--red);font-weight:700}
.parada-table .ok-cell{color:var(--green)}
.btn-del{background:none;border:none;color:var(--muted);cursor:pointer;padding:3px 6px;
  border-radius:4px;font-size:14px;transition:color .15s}
.btn-del:hover{color:var(--red)}

/* Erro indicator */
.erro-ok{color:var(--green);font-weight:700;font-size:13px}
.erro-warn{color:var(--red);font-weight:700;font-size:13px}

/* History list */
.hist-list{display:flex;flex-direction:column;gap:8px;max-height:400px;overflow-y:auto}
.hist-item{background:var(--bg3);border:1px solid var(--border);border-radius:8px;
  padding:10px 14px;cursor:pointer;transition:border-color .15s;display:grid;
  grid-template-columns:auto 1fr auto;gap:12px;align-items:center}
.hist-item:hover{border-color:var(--blue)}
.hist-item.active{border-color:var(--blue);background:var(--bg4)}
.hist-date{font-size:12px;font-weight:700;color:var(--text);white-space:nowrap}
.hist-info{font-size:11px;color:var(--muted2)}
.hist-badges{display:flex;gap:6px;flex-wrap:wrap}
.hist-badge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px}
.hb-blue{background:#062a1a;color:var(--blue)}
.hb-green{background:#0a2e1e;color:var(--green)}
.hb-red{background:#2e1a1a;color:var(--red)}
.hb-ok{background:#0a2e1e;color:var(--green)}
.hb-orange{background:#2a1e0a;color:var(--orange)}
.hb-paused{background:#1a2330;color:var(--muted2)}
/* estado "sem dados" dos gráficos (dashboard de receitas) */
.chart-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:13px;background:var(--bg2);border-radius:10px}

/* Tabs inside produção */
.prod-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:16px}
.prod-tab{padding:9px 18px;font-size:13px;font-weight:500;color:var(--muted);
  cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;background:none;
  border-left:none;border-right:none;border-top:none}
.prod-tab:hover{color:var(--text)}
.prod-tab.active{color:var(--orange);border-bottom-color:var(--orange)}

/* Gráficos: sempre 100% do container */
.card canvas{width:100% !important}
.card > div[style*="height"]{min-height:180px}

/* Tabelas: scroll horizontal global */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl-wrap table{min-width:560px}
#page-vendas .tbl-wrap table{min-width:640px}

/* Produção — empilha em tablet */
@media(max-width:900px){
  .prod-grid,.prod-grid-3{grid-template-columns:1fr}
  .form-row-2,.form-row-3,.form-row-4{grid-template-columns:1fr 1fr}
  .row-2{grid-template-columns:1fr}
  /* Charts menores em tablet */
  .card > div[style*="height:250"]{height:200px !important}
  .card > div[style*="height:370"]{height:260px !important}
  .card > div[style*="height:220"]{height:180px !important}
  /* Produção tabs: scroll horizontal */
  .prod-tabs{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:0}
  .prod-tabs::-webkit-scrollbar{display:none}
  .prod-tab{white-space:nowrap;flex-shrink:0}
  /* hist-item: stack info */
  .hist-item{grid-template-columns:auto 1fr;gap:8px}
  .hist-badges{grid-column:span 2}
}

/* Mobile */
@media(max-width:700px){
  .form-row-2,.form-row-3,.form-row-4{grid-template-columns:1fr}
  /* Charts menores em mobile */
  .card > div[style*="height"]{height:180px !important;min-height:160px}
  /* Produção form full width */
  .prod-form{padding:14px}
  .prod-grid,.prod-grid-3{gap:10px}
  /* hist-item simples */
  .hist-item{grid-template-columns:1fr;gap:4px}
  .hist-date{font-size:11px}
}

/* Vendas KPI */
#page-vendas .kpi-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
@media(max-width:600px){
  #page-vendas .kpi-grid{grid-template-columns:repeat(2,1fr)}
}

/* ═══════════════════════════════════════════════════
   OCULTAR VALORES (modo privacidade — botão 👁 no nav)
   ═══════════════════════════════════════════════════ */

/* Seletor base reutilizável — aplica blur em tudo listado */
body.vals-hidden .kpi-val,
body.vals-hidden .kpi-val *,
body.vals-hidden .kpi-sub,
/* Home — hero stats (faturamento, m³, clientes no banner) */
body.vals-hidden .hero-stat-val,
body.vals-hidden .hero-stat-label,
/* Home — cards de stats */
body.vals-hidden .hcs-val,
/* Produção — cards de lançamento (brita/pedrisco/po/bica) */
body.vals-hidden .prod-card-val,
/* Produção — detalhe do histórico (horímetro stats) */
body.vals-hidden .hor-stat-val,
/* Produção — badge "X m³" no histórico */
body.vals-hidden .hist-badge.hb-blue,
/* Produção — tabela detalhada do dashboard (colunas numéricas) */
body.vals-hidden #prod-detail-tbody td:not(:first-child),
/* Produção — classe ok-val (tempo ligado, status) */
body.vals-hidden .ok-val,
/* Vendas / EPI — valores monetários e m³ nas tabelas */
body.vals-hidden td[data-label="Valor"],
body.vals-hidden td[data-label="m³"],
body.vals-hidden .ok,
/* Estoque — valores na tabela */
body.vals-hidden #est-tbody-prod td:not(:first-child) {
  filter: blur(7px) !important;
  user-select: none !important;
  pointer-events: none;
  transition: filter .2s;
}

/* Gráficos Chart.js — bloqueia visualização dos dados */
body.vals-hidden canvas {
  filter: blur(12px) !important;
  pointer-events: none;
  transition: filter .2s;
}

/* Ícone do botão fica azul quando ativo */
body.vals-hidden #btn-hide-vals {
  border-color: var(--blue) !important;
  color: var(--blue) !important;
}

/* ═══════════════════════════════════════════════════
   MOBILE RESPONSIVE v2
   ─ Visibilidade controlada por .m-hide
   ─ Elementos de desktop ocultos via .nav-btn-desktop
   ═══════════════════════════════════════════════════ */

/* Por padrão visível em todos os tamanhos */
.m-hide { }
.nav-btn-desktop { }
/* Por padrão oculto (aparece só no mobile) */
.m-show-grid { display:none !important; }

@media(max-width:768px){

  /* ── Utilitários de visibilidade ── */
  .m-hide        { display:none !important; }
  .nav-btn-desktop { display:none !important; }

  /* ── NAV: scrollável sem overflow ── */
  nav{
    padding:0 8px;
    height:50px;
    gap:0;
  }
  .nav-brand img,.nav-logo{ height:26px; max-width:140px; }
  .auth-logo{ height:44px; }
  .nav-tabs{
    overflow-x:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
    flex-shrink:1;
  }
  .nav-tabs::-webkit-scrollbar{ display:none; }
  .nav-tab{
    height:50px;
    padding:0 10px;
    font-size:11px;
    white-space:nowrap;
    flex-shrink:0;
  }
  .nav-tab .dot{ display:none; }
  .nav-right{
    gap:6px;
    flex-shrink:0;
  }
  /* Ocultar nav-log em mobile (redundante com .m-hide mas garante) */
  .nav-log{ display:none !important; }

  /* ── LIVE badge: mantém visível ── */
  .live-badge{ display:inline-flex !important; }

  /* ── PÁGINA: padding reduzido ── */
  .page{ padding:10px 8px 28px; }

  /* ── HERO: sem hero-stats ── */
  .hero{
    grid-template-columns:1fr;
    padding:18px 14px;
    gap:14px;
  }
  .hero h1{ font-size:19px; }
  .hero p{ font-size:12px; margin-bottom:12px; }
  .hero-stats{ display:none !important; }
  .hero-btns{ gap:8px; }
  .hero-btns .btn{ min-height:44px; justify-content:center; flex:1; }

  /* ── KPIs: 2 colunas ── */
  .kpi-grid{
    grid-template-columns:repeat(2,1fr) !important;
    gap:8px;
  }
  .kpi{ padding:11px 12px; }
  .kpi-val{ font-size:18px !important; }

  /* ── ROWS: empilhar ── */
  .row-2,.row-3,.row-4{ grid-template-columns:1fr; }
  .span2{ grid-column:span 1; }

  /* ── CHARTS: altura reduzida ── */
  .card > div[style*="height"]{
    height:180px !important;
    min-height:160px;
  }
  .card canvas{ width:100% !important; }

  /* ── TABELAS: scroll horizontal touch ── */
  .tbl-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    max-height:340px;
  }
  table{ min-width:520px; }
  #page-vendas .tbl-wrap table{ min-width:580px; }

  /* ── CARDS: padding reduzido ── */
  .card{ padding:12px; }
  .card-title{ font-size:9px; margin-bottom:10px; }
  .upload-box{ padding:12px; }

  /* ── BUTTONS: tamanho adequado para toque ── */
  .btn{ min-height:44px; padding:10px 14px; }
  .btn-ghost{ min-height:40px; }

  /* ── FORMULÁRIOS: 1 coluna ── */
  .form-row-2,.form-row-3,.form-row-4{
    grid-template-columns:1fr !important;
  }
  .prod-form{ padding:12px; }

  /* ── PRODUÇÃO tabs: scroll horizontal ── */
  .prod-tabs{
    overflow-x:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
    padding-bottom:0;
  }
  .prod-tabs::-webkit-scrollbar{ display:none; }
  .prod-tab{
    white-space:nowrap;
    flex-shrink:0;
    padding:9px 14px;
    font-size:12px;
    min-height:44px;
  }

  /* ── PROD GRID ── */
  .prod-grid,.prod-grid-3{ grid-template-columns:1fr; gap:8px; }

  /* ── HISTÓRICO ── */
  .hist-list{ max-height:320px; }
  .hist-item{ grid-template-columns:1fr; gap:4px; }
  .hist-badges{ grid-column:span 1; }

  /* ── ESTOQUE ── */
  .est-grid{ grid-template-columns:1fr 1fr !important; gap:8px; }

  /* ── VENDAS filter bar: 4 dropdowns compactos no mobile ── */
  .v-filter-bar{ display:flex !important; padding:10px 12px; gap:0; }

  /* Oculta todo o conteúdo desktop do filtro */
  #v-filters .vf-row,
  #v-filters .vf-divider,
  #v-filters .vf-row2 { display:none !important; }

  /* Exibe só o grid mobile de 4 selects */
  .m-show-grid{ display:grid !important; }
  #v-mobile-filters{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:8px;
    width:100%;
  }
  /* ── FILTRO MOBILE: grid 3 linhas ── */
  #v-mobile-filters{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 8px;
    width: 100%;
  }
  #v-mobile-filters .vf-group{ display:flex; flex-direction:column; gap:4px; }
  #v-mobile-filters .vf-label{ font-size:10px; font-weight:700; color:#aeb9c9; text-transform:uppercase; letter-spacing:.05em; }
  #v-mobile-filters .vf-select,
  #v-mobile-filters .vmf-date{ height:36px; font-size:13px; padding:6px 8px; width:100%; border-radius:8px;
    background:var(--bg3); color:var(--text); border:1px solid #33465a; outline:none;
    -webkit-appearance:none; appearance:none; }
  #v-mobile-filters .vmf-date{ color-scheme:dark; }
  /* Linha 3: botão Limpar ocupa as 2 colunas */
  #v-mobile-filters .vmf-clear{
    grid-column: 1 / -1;
  }
  #v-mobile-filters .vmf-clear .vf-reset{ width:100%; height:34px; font-size:12px; border-radius:8px; }

  /* ── TABELA NF: layout compacto em grid por card ── */
  #page-vendas .tbl-wrap{ overflow-x:visible; }
  #page-vendas .tbl-wrap table{ min-width:unset !important; width:100%; }
  #page-vendas thead{ display:none; }

  /* Cada linha vira um card em grid 2 colunas */
  #page-vendas #v-tbody tr{
    display:grid;
    grid-template-columns: 1fr auto;
    gap: 1px 8px;
    background:var(--bg3);
    border:1px solid var(--border);
    border-radius:10px;
    padding:10px 12px;
    margin-bottom:7px;
  }
  /* Reset de todos os tds */
  #page-vendas #v-tbody td{
    display:block;
    padding:0;
    border:none !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:12px;
    color:var(--text);
    line-height:1.5;
  }
  /* Tipo: oculto */
  #page-vendas #v-tbody td[data-label="Tipo"]{ display:none !important; }
  /* Pgto: oculto no card (menos relevante) */
  #page-vendas #v-tbody td[data-label="Pgto"]{ display:none !important; }

  /* Posições no grid:
     NF  (col2 linha1) — muted/monospace, alinhado à direita
     Data (col1 linha1) — muted pequeno
     Cliente (col1-2 linha2) — nome em destaque
     Produto (col1 linha3) — muted pequeno
     m³  (col2 linha3) — verde alinhado direita
     Valor (col1-2 linha4) — grande destaque
  */
  #page-vendas #v-tbody td[data-label="Data"]{
    grid-column:1; grid-row:1;
    font-size:10px; color:var(--muted2);
  }
  #page-vendas #v-tbody td[data-label="Nº NF"]{
    grid-column:2; grid-row:1;
    font-size:10px; color:var(--muted); font-family:monospace;
    text-align:right;
  }
  #page-vendas #v-tbody td[data-label="Cliente"]{
    grid-column:1/-1; grid-row:2;
    font-size:13px; font-weight:700; color:var(--text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    margin: 1px 0;
  }
  #page-vendas #v-tbody td[data-label="Produto"]{
    grid-column:1; grid-row:3;
    font-size:11px; color:var(--muted2);
  }
  #page-vendas #v-tbody td[data-label="m³"]{
    grid-column:2; grid-row:3;
    font-size:11px; color:var(--blue); text-align:right;
  }
  #page-vendas #v-tbody td[data-label="Valor"]{
    grid-column:1/-1; grid-row:4;
    font-size:16px; font-weight:700; color:var(--green);
    margin-top:3px; border-top:1px solid var(--border) !important;
    padding-top:5px !important;
  }

  /* Linha "Ver mais" */
  #page-vendas #v-tbody tr#v-load-more{
    display:block; background:none; border:none; padding:4px 0;
  }
  #page-vendas #v-tbody tr#v-load-more td{
    display:block; text-align:center; padding:8px 0; font-size:12px;
    color:var(--muted2); white-space:normal;
  }

  /* ── GRÁFICOS VENDAS: row-3 em 1 coluna ── */
  .row-3{ grid-template-columns:1fr !important; }
  #page-vendas .row-3 .card > div[style*="height"]{ height:200px !important; }

  /* ── HOME GRID: oculto via .m-hide ── */

  /* ── KPI: último card ímpar ocupa linha inteira ── */
  .kpi-grid .kpi:last-child:nth-child(odd){ grid-column:span 2; }

  /* ── Fontes ── */
  h2{ font-size:15px; }
  .sec{ font-size:10px; }
  .prod-card-val{ font-size:20px; }
  .hor-stat-val{ font-size:18px; }

  /* ── Espaçamentos ── */
  .row-2,.row-3,.row-4{ margin-bottom:8px; }
  .sec{ margin:12px 0 8px; }
  .kpi-grid{ gap:8px; margin-bottom:10px; }
  .card{ padding:12px; margin-bottom:8px; }
  .v-filter-bar{ margin-bottom:10px; }
}

/* ── 480px — telefone pequeno ── */
@media(max-width:480px){
  .kpi-grid{ grid-template-columns:1fr 1fr !important; }
  .est-grid{ grid-template-columns:1fr !important; }
  nav{ padding:0 6px; }
  .nav-tab{ padding:0 8px; font-size:10px; }
  .page{ padding:8px 6px 20px; }
  .hero h1{ font-size:17px; }
  .hero-btns{ flex-direction:column; }
  .hero-btns .btn{ justify-content:center; }
}

/* ═══════════════════════════════════════════════════
   AUTENTICAÇÃO — tela de login (portão)
   ═══════════════════════════════════════════════════ */
#auth-gate{
  position:fixed; inset:0; z-index:10000;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 120% at 50% 0%, #131a2e 0%, var(--bg,#07090c) 60%);
  padding:20px;
}
.auth-card{
  width:100%; max-width:380px;
  background:var(--bg2,#161b27); border:1px solid var(--border,#222b3d);
  border-radius:16px; padding:28px 26px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.auth-logo{
  display:block; height:52px; width:auto; max-width:200px; object-fit:contain;
  margin:0 auto 14px;
}
.auth-brand{
  font-size:15px; font-weight:700; color:var(--muted2,#8494a8);
  text-align:center; margin-bottom:22px; letter-spacing:.02em;
}
.auth-brand span{ color:var(--orange,#fb923c); }
.auth-view h2{
  font-size:20px; font-weight:700; color:var(--text,#e6e9f0);
  margin:0 0 16px;
}
.auth-hint{ font-size:12px; color:var(--muted,#8892a0); margin:0 0 16px; line-height:1.5; }
.auth-lbl{
  display:block; font-size:11px; font-weight:600; color:var(--muted,#8892a0);
  text-transform:uppercase; letter-spacing:.04em; margin:12px 0 5px;
}
.auth-inp{
  width:100%; box-sizing:border-box;
  background:var(--bg,#07090c); border:1px solid var(--border,#222b3d);
  border-radius:9px; padding:11px 13px; font-size:14px;
  color:var(--text,#e6e9f0); transition:border-color .15s; outline:none;
}
.auth-inp:focus{ border-color:var(--blue,#60a5fa); }
.auth-inp::placeholder{ color:var(--muted,#57687a); }
.auth-view{ margin:0; }

/* Campo de senha com botão de olhinho */
.auth-pass-wrap{ position:relative; }
.auth-pass-wrap .auth-inp{ padding-right:42px; }
.auth-eye{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer;
  font-size:16px; line-height:1; padding:6px;
  color:var(--muted,#57687a); border-radius:6px; transition:background .15s;
}
.auth-eye:hover{ background:rgba(255,255,255,.06); }
.auth-error{
  min-height:18px; font-size:12px; color:var(--red,#f87171);
  margin:10px 0 0; line-height:1.4;
}
.auth-btn{
  width:100%; margin-top:16px;
  background:linear-gradient(135deg, var(--blue,#3b82f6), #2563eb);
  border:none; border-radius:9px; padding:12px;
  font-size:14px; font-weight:700; color:#fff; cursor:pointer;
  transition:filter .15s, opacity .15s;
}
.auth-btn:hover{ filter:brightness(1.08); }
.auth-links{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  margin-top:16px;
}
.auth-links a{
  font-size:12px; color:var(--blue,#60a5fa); cursor:pointer; text-decoration:none;
}
.auth-links a:hover{ text-decoration:underline; }

@media(max-width:480px){
  .auth-card{ padding:22px 18px; border-radius:14px; }
}

/* ═══════════════════════════════════════════════════
   RBAC — esconde tudo de ESCRITA para o papel "cliente"
   (a segurança real é o RLS no banco; isto é só a UI)
   ═══════════════════════════════════════════════════ */
body.role-cliente .upload-box,            /* importar XLSX */
body.role-cliente .nav-btn-desktop,       /* (legado, sem uso atual) */
body.role-cliente .btn-del,               /* botões 🗑 de excluir */
body.role-cliente #btn-salvar,            /* salvar lançamento de produção */
body.role-cliente .admin-only,            /* qualquer ação marcada como admin */
body.role-cliente .prod-tab[onclick*="lancamento"],  /* aba Lançamento */
body.role-cliente #prod-tab-lancamento,   /* conteúdo da aba Lançamento */
/* EPI & Uniformes — oculto inteiro para o cliente */
body.role-cliente .nav-tab[onclick*="epi"],          /* aba EPI no nav */
body.role-cliente .atalho[onclick*="epi"],           /* atalho Estoque na home */
body.role-cliente #page-epi{              /* a própria página EPI */
  display:none !important;
}