/* ERP HARP 3D — mesma identidade do site, mas sem enfeite: é ferramenta de trabalho. */
:root{
  --bg:#07070C; --bg-2:#0E0E16; --card:#14141F; --linha:rgba(255,255,255,.10);
  --txt:#F2F2F7; --dim:#A9A9B8; --faint:#76768A;
  --amarelo:#F5FF00; --verde:#00E59B; --azul:#00A8FF; --rosa:#FF1F6D; --violeta:#7B2BFF; --laranja:#FFB020;
}
*{ box-sizing:border-box }
[hidden]{ display:none !important }
html{ background:var(--bg) }
body{ margin:0; font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--txt); background:var(--bg); min-height:100vh }
button,input,select,textarea{ font:inherit; color:inherit }
b{ font-weight:700 }

/* ---------- marca ---------- */
.marca{ font-weight:800; font-size:18px; letter-spacing:.02em; display:flex; align-items:center; gap:6px }
.marca b{ color:var(--amarelo) }
.marca small{ font-weight:600; font-size:12px; color:var(--faint); letter-spacing:.06em; text-transform:uppercase; margin-left:6px }
.cubo{ color:var(--amarelo); font-size:22px; line-height:1 }

/* ---------- botões ---------- */
.btn{
  background:rgba(255,255,255,.06); border:1px solid var(--linha); border-radius:9px;
  padding:7px 12px; cursor:pointer; font-weight:600; font-size:13px; white-space:nowrap; transition:background .15s, border-color .15s;
}
.btn:hover{ background:rgba(255,255,255,.12) }
.btn:disabled{ opacity:.5; cursor:default }
a.btn{ display:inline-block; color:inherit; text-decoration:none }
.btn-principal{ background:var(--amarelo); color:#111; border-color:var(--amarelo) }
.btn-principal:hover{ background:#fff }
.btn-ok{ background:rgba(0,229,155,.14); border-color:rgba(0,229,155,.45); color:var(--verde) }
.btn-ok:hover{ background:rgba(0,229,155,.25) }
.btn-perigo{ color:var(--rosa); border-color:rgba(255,31,109,.4) }
.btn-perigo:hover{ background:rgba(255,31,109,.14) }
.btn-link{ background:none; border:0; color:var(--dim); text-decoration:underline; padding:7px 6px }

/* ---------- login ---------- */
.login{ min-height:100vh; display:grid; place-items:center; padding:24px }
.login-card{ width:100%; max-width:360px; background:var(--bg-2); border:1px solid var(--linha); border-radius:16px; padding:28px; display:flex; flex-direction:column; gap:14px }
.login-card .sub{ margin:-6px 0 4px; color:var(--dim) }
.campo{ display:flex; flex-direction:column; gap:5px }
.campo > span{ font-size:12px; font-weight:600; color:var(--dim) }
.campo input,.campo select,.campo textarea,.entrada{
  background:var(--bg); border:1px solid var(--linha); border-radius:9px; padding:9px 11px; outline:none;
}
.entrada{ width:100% }
.campo input:focus,.campo textarea:focus,.entrada:focus{ border-color:var(--amarelo) }
.erro{ margin:0; color:var(--rosa); font-size:13px }

/* ---------- topo ---------- */
.topo{
  position:sticky; top:0; z-index:20; display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
  padding:12px 18px; background:rgba(7,7,12,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--linha);
}
.topo-acoes{ display:flex; flex-wrap:wrap; gap:10px; align-items:center }
.usuario{ color:var(--dim); font-size:13px }
.filtro{ display:flex; border:1px solid var(--linha); border-radius:9px; overflow:hidden }
.filtro-btn{ background:none; border:0; padding:7px 12px; cursor:pointer; font-weight:600; font-size:13px; color:var(--dim) }
.filtro-btn.is-on{ background:var(--amarelo); color:#111 }

.aviso{ margin:12px 18px 0; padding:10px 14px; border-radius:10px; background:rgba(255,31,109,.10); border:1px solid rgba(255,31,109,.3); color:#ffb3c9 }

/* ---------- quadro ---------- */
.quadro{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(290px,1fr); gap:14px; padding:18px; overflow-x:auto; align-items:start; min-height:calc(100vh - 70px) }
.coluna{ background:var(--bg-2); border:1px solid var(--linha); border-radius:14px; display:flex; flex-direction:column; max-height:calc(100vh - 110px) }
.coluna-topo{ display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid var(--linha); position:sticky; top:0 }
.coluna-topo h2{ margin:0; font-size:13px; letter-spacing:.05em; text-transform:uppercase }
.contagem{ background:rgba(255,255,255,.08); border-radius:99px; padding:1px 9px; font-size:12px; font-weight:700; color:var(--dim) }
.coluna-lista{ padding:10px; display:flex; flex-direction:column; gap:10px; overflow-y:auto }
.vazio{ color:var(--faint); text-align:center; padding:18px 6px; font-size:13px }

.col-AGUARDANDO_PAGAMENTO .coluna-topo{ box-shadow:inset 0 3px 0 var(--laranja) }
.col-PAGAMENTO_APROVADO .coluna-topo{ box-shadow:inset 0 3px 0 var(--azul) }
.col-EM_PRODUCAO .coluna-topo{ box-shadow:inset 0 3px 0 var(--amarelo) }
.col-PRONTO .coluna-topo{ box-shadow:inset 0 3px 0 var(--verde) }
.col-ENVIADO .coluna-topo{ box-shadow:inset 0 3px 0 var(--violeta) }
.col-ENTREGUE .coluna-topo{ box-shadow:inset 0 3px 0 var(--faint) }

/* ---------- card ---------- */
.card{ background:var(--card); border:1px solid var(--linha); border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:8px }
.card-topo{ display:flex; justify-content:space-between; align-items:center; gap:8px }
.card-id{ font-family:ui-monospace,Menlo,monospace; font-size:12px; color:var(--faint); background:none; border:0; padding:0; cursor:pointer }
.card-id:hover{ color:var(--amarelo) }
.card-cliente{ font-weight:700 }
.card-linha{ color:var(--dim); font-size:13px; word-break:break-word }
.card-total{ font-weight:800; font-size:16px }
.card-acoes{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px }

.tag{ font-size:10.5px; font-weight:800; letter-spacing:.06em; padding:2px 8px; border-radius:99px; text-transform:uppercase }
.tag-SITE{ background:rgba(0,168,255,.16); color:var(--azul); border:1px solid rgba(0,168,255,.4) }
.tag-ERP{ background:rgba(123,43,255,.2); color:#b78bff; border:1px solid rgba(123,43,255,.5) }
.pg{ font-size:11px; font-weight:700; padding:2px 8px; border-radius:99px }
.pg-APROVADO{ background:rgba(0,229,155,.14); color:var(--verde) }
.pg-PENDENTE{ background:rgba(255,176,32,.14); color:var(--laranja) }
.pg-RECUSADO{ background:rgba(255,31,109,.14); color:var(--rosa) }
.revenda{ font-size:10.5px; font-weight:800; color:var(--verde); border:1px solid rgba(0,229,155,.4); border-radius:99px; padding:1px 7px }
.rastreio{ font-family:ui-monospace,Menlo,monospace; font-size:12.5px; color:var(--verde) }

/* ---------- modal ---------- */
.overlay{ position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.7); display:grid; place-items:center; padding:18px; overflow-y:auto }
.modal{ position:relative; width:100%; max-width:560px; background:var(--bg-2); border:1px solid var(--linha); border-radius:16px; padding:22px; max-height:calc(100vh - 36px); overflow-y:auto }
.modal-fechar{ position:absolute; top:12px; right:12px; background:none; border:0; color:var(--dim); font-size:18px; cursor:pointer }
.modal h3{ margin:0 0 4px; font-size:18px }
.modal h4{ margin:18px 0 6px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint) }
.modal p{ margin:4px 0 }
.dica{ color:var(--dim); font-size:13px }
.grade{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0 }
.historico{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px }
.historico li{ border-left:2px solid var(--linha); padding-left:10px }
.historico time{ display:block; font-size:12px; color:var(--faint) }
.modal .dica{ margin:6px 0 }
.modal-acoes{ display:flex; gap:8px; justify-content:flex-end; margin-top:16px }

/* ---------- abas ---------- */
.abas{ display:flex; gap:4px }
.aba{ background:none; border:0; color:var(--dim); padding:8px 14px; border-radius:9px; cursor:pointer; font-weight:700; font-size:14px }
.aba:hover{ color:var(--txt) }
.aba.is-on{ background:rgba(245,255,0,.12); color:var(--amarelo) }

/* ---------- orçamentos ---------- */
.orcamentos{ padding:18px }
.orc-barra{ display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; margin-bottom:16px }
.orc-barra .filtro{ max-width:100%; overflow-x:auto }
.orc-lista{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:14px }
.card-clicavel{ cursor:pointer; transition:border-color .15s }
.card-clicavel:hover{ border-color:var(--amarelo) }
.st{ font-size:10.5px; font-weight:800; letter-spacing:.06em; padding:2px 9px; border-radius:99px; text-transform:uppercase }
.st-RASCUNHO{ background:rgba(255,255,255,.1); color:var(--dim) }
.st-ENVIADO{ background:rgba(0,168,255,.16); color:var(--azul) }
.st-APROVADO{ background:rgba(0,229,155,.16); color:var(--verde) }
.st-RECUSADO{ background:rgba(255,31,109,.16); color:var(--rosa) }
.st-EXPIRADO{ background:rgba(255,176,32,.16); color:var(--laranja) }
.modal.largo{ max-width:760px }
.valores{ width:100%; border-collapse:collapse; font-size:14px }
.valores td{ padding:4px 0 }
.valores td:last-child{ text-align:right; white-space:nowrap }
.valores tr.total td{ border-top:1px solid var(--linha); padding-top:8px; font-weight:800; font-size:16px }
.valores .menos{ color:var(--verde) }
.mensagem{ width:100%; min-height:150px; resize:vertical; background:var(--bg); border:1px solid var(--linha); border-radius:9px; padding:10px; font:13px/1.45 ui-monospace,Menlo,monospace }
.sub-form{ border:1px solid var(--linha); border-radius:11px; padding:12px; margin:8px 0; background:rgba(255,255,255,.02) }
.grade3{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:10px 0 }
.escolhido{ display:flex; align-items:center; justify-content:space-between; gap:8px; background:rgba(0,229,155,.1); border:1px solid rgba(0,229,155,.35); border-radius:9px; padding:8px 11px }
.achados{ display:flex; flex-direction:column; gap:4px; margin-top:6px }
.achado{ text-align:left; background:rgba(255,255,255,.05); border:1px solid var(--linha); border-radius:8px; padding:7px 10px; cursor:pointer }
.achado:hover{ border-color:var(--amarelo) }
.frete-op{ display:flex; justify-content:space-between; gap:10px; padding:9px 11px; border:1px solid var(--linha); border-radius:9px; cursor:pointer; margin-top:6px }
.frete-op.is-on{ border-color:var(--amarelo); background:rgba(245,255,0,.07) }

/* ---------- equipe ---------- */
.st-ATIVO{ background:rgba(0,229,155,.16); color:var(--verde) }
.st-INATIVO{ background:rgba(255,31,109,.16); color:var(--rosa) }
.st-ADMIN{ background:rgba(123,43,255,.2); color:#b78bff }
.st-SELLER{ background:rgba(0,168,255,.16); color:var(--azul) }
.chips{ display:flex; flex-wrap:wrap; gap:5px; margin-top:6px }
.chip{ font-size:11.5px; padding:2px 9px; border-radius:99px; border:1px solid var(--linha); color:var(--dim) }
.card-inativo{ opacity:.6 }
.marcar{ display:flex; align-items:flex-start; gap:9px; padding:8px 0; cursor:pointer }
.marcar input{ margin-top:3px; width:16px; height:16px; accent-color:var(--amarelo) }
.marcar small{ display:block; color:var(--faint) }
.senha-gerada{ font:700 16px ui-monospace,Menlo,monospace; letter-spacing:.04em }
.linha-campo{ display:flex; gap:8px; align-items:flex-end }
.linha-campo .campo{ flex:1 }

/* ---------- filtros do quadro ---------- */
.barra-filtros{ display:flex; flex-wrap:wrap; gap:10px 22px; padding:12px 18px 0; align-items:center }
.grupo-filtro{ display:flex; align-items:center; gap:8px }
.grupo-filtro > span{ font-size:11px; color:var(--faint); text-transform:uppercase; letter-spacing:.07em; font-weight:700 }
.quadro{ min-height:calc(100vh - 130px) }
.tag-ME{ background:rgba(0,168,255,.14); color:var(--azul); border:1px solid rgba(0,168,255,.4) }
.tag-RET{ background:rgba(0,229,155,.12); color:var(--verde); border:1px solid rgba(0,229,155,.4) }
.tags{ display:flex; gap:5px; flex-wrap:wrap }
.pg-PARCIAL{ background:rgba(255,176,32,.16); color:var(--laranja); border:1px solid rgba(255,176,32,.45) }
.progresso{ height:6px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden; margin:7px 0 3px }
.progresso > i{ display:block; height:100%; background:linear-gradient(90deg,var(--verde),var(--azul)); border-radius:99px }
.falta{ color:var(--laranja); font-size:12.5px; font-weight:600 }

/* ---------- financeiro ---------- */
.financeiro{ padding:0 0 40px }
.fin-subabas{ display:flex; gap:2px; padding:10px 18px 0; overflow-x:auto; border-bottom:1px solid var(--linha) }
.fin-subaba{ background:none; border:0; border-bottom:2px solid transparent; color:var(--dim); padding:10px 14px; cursor:pointer; font-weight:700; font-size:13.5px; white-space:nowrap }
.fin-subaba:hover{ color:var(--txt) }
.fin-subaba.is-on{ color:var(--amarelo); border-bottom-color:var(--amarelo) }
.fin-corpo{ padding:18px }
.fin-topo{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; justify-content:space-between; margin-bottom:14px }
.fin-topo h2{ margin:0; font-size:18px }
.fin-acoes{ display:flex; flex-wrap:wrap; gap:8px; align-items:center }
.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); gap:12px }
.kpi{ background:var(--card); border:1px solid var(--linha); border-radius:14px; padding:14px 15px; position:relative; overflow:hidden }
.kpi::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--cor, var(--linha)) }
.kpi .rotulo{ font-size:12px; color:var(--dim); font-weight:600 }
.kpi .valor{ font-size:23px; font-weight:800; margin-top:5px; letter-spacing:-.01em; font-variant-numeric:tabular-nums }
.kpi .sub{ font-size:12px; color:var(--faint); margin-top:3px }
.kpi.verde{ --cor:var(--verde) } .kpi.verde .valor{ color:var(--verde) }
.kpi.rosa{ --cor:var(--rosa) } .kpi.rosa .valor{ color:var(--rosa) }
.kpi.azul{ --cor:var(--azul) } .kpi.amarelo{ --cor:var(--amarelo) } .kpi.laranja{ --cor:var(--laranja) } .kpi.violeta{ --cor:var(--violeta) }
.sub .ruim{ color:var(--rosa) } .sub .bom{ color:var(--verde) }
.alertas{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px }
.alerta{ display:inline-flex; align-items:center; gap:8px; border-radius:99px; padding:6px 13px; font-size:12.5px; font-weight:700; border:1px solid var(--linha); background:rgba(255,255,255,.04); color:var(--dim); cursor:pointer }
.alerta:hover{ border-color:var(--amarelo) }
.alerta.ruim{ color:var(--rosa); border-color:rgba(255,31,109,.45); background:rgba(255,31,109,.08) }
.alerta.aviso-lar{ color:var(--laranja); border-color:rgba(255,176,32,.45); background:rgba(255,176,32,.08) }
.graficos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr)); gap:14px; margin-top:14px }
.painel{ background:var(--card); border:1px solid var(--linha); border-radius:14px; padding:15px }
.painel > h3{ margin:0 0 4px; font-size:14px }
.painel > .dica{ margin:0 0 10px; font-size:12px }
.painel.largo{ grid-column:1/-1 }
svg.grafico{ width:100%; height:auto; display:block; overflow:visible }
svg.grafico text{ fill:var(--faint); font-size:10.5px; font-family:inherit }
svg.grafico .grade{ stroke:rgba(255,255,255,.07); stroke-width:1 }
svg.grafico .zero{ stroke:rgba(255,255,255,.35); stroke-dasharray:4 4 }
svg.grafico rect.barra{ transition:opacity .15s } svg.grafico rect.barra:hover{ opacity:.75 }
.legenda{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12px; color:var(--dim); margin-top:8px }
.legenda i{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px }
.rosca-box{ display:grid; grid-template-columns:150px 1fr; gap:14px; align-items:center }
.rosca-lista{ display:flex; flex-direction:column; gap:6px; font-size:12.5px }
.rosca-lista div{ display:flex; justify-content:space-between; gap:10px } .rosca-lista i{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:7px }
.barras-h{ display:flex; flex-direction:column; gap:9px }
.barra-h .topo-b{ display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:3px } .barra-h .trilho{ height:8px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden } .barra-h .trilho > i{ display:block; height:100%; border-radius:99px }
.vazio-g{ color:var(--faint); font-size:13px; padding:18px 0; text-align:center }
.periodo{ display:flex; gap:6px; flex-wrap:wrap }
.fin-lista{ display:flex; flex-direction:column; gap:8px }
.fin-linha{ display:grid; grid-template-columns:86px minmax(0,1fr) auto; gap:6px 14px; align-items:center; background:var(--card); border:1px solid var(--linha); border-radius:12px; padding:10px 14px }
.fin-linha.atrasado{ border-color:rgba(255,31,109,.4) }
.fin-linha.pago{ opacity:.85 }
.fin-linha.cancelado{ opacity:.45 }
.fin-venc{ font-size:12px; color:var(--dim); line-height:1.25 } .fin-venc b{ display:block; font-size:15px; color:var(--txt) }
.fin-venc .ruim{ color:var(--rosa); font-weight:700 }
.fin-desc{ min-width:0 } .fin-desc .t{ font-weight:700; overflow:hidden; text-overflow:ellipsis } .fin-desc .s{ font-size:12px; color:var(--dim); margin-top:2px }
.fin-valor{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap } .fin-valor b{ font-size:16px } .fin-valor small{ display:block; color:var(--faint); font-size:11.5px }
.fin-valor.entra b{ color:var(--verde) } .fin-valor.sai b{ color:var(--txt) }
.fin-botoes{ grid-column:1/-1; display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end }
.fin-botoes .btn{ padding:5px 10px; font-size:12px }
.selo{ display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.04em; padding:1px 8px; border-radius:99px; border:1px solid var(--linha); color:var(--dim); margin-right:5px; text-transform:uppercase }
.selo.ok{ color:var(--verde); border-color:rgba(0,229,155,.45) } .selo.alerta-s{ color:var(--laranja); border-color:rgba(255,176,32,.5) } .selo.azul{ color:var(--azul); border-color:rgba(0,168,255,.45) } .selo.violeta{ color:#b78bff; border-color:rgba(123,43,255,.5) }
.resumo-lista{ font-size:13px; color:var(--dim); margin:0 0 12px }
.contas-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px }
.conta-card{ background:var(--card); border:1px solid var(--linha); border-radius:14px; padding:15px; display:flex; flex-direction:column; gap:6px }
.conta-card.inativa{ opacity:.5 }
.conta-card .saldo{ font-size:26px; font-weight:800; font-variant-numeric:tabular-nums }
.conta-card .saldo.neg{ color:var(--rosa) }
.chamada{ border:1px dashed rgba(245,255,0,.5); border-radius:14px; padding:22px; text-align:center; background:rgba(245,255,0,.04) }
.chamada h3{ margin:0 0 6px } .chamada p{ margin:0 0 14px; color:var(--dim) }
.grade2{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:10px 0 }
.linha-extrato{ display:grid; grid-template-columns:78px minmax(0,1fr) auto; gap:6px 12px; align-items:center; border:1px solid var(--linha); border-radius:10px; padding:9px 12px; margin-bottom:8px; background:rgba(255,255,255,.02) }
.linha-extrato .v{ font-weight:800; font-variant-numeric:tabular-nums; text-align:right } .linha-extrato .v.e{ color:var(--verde) } .linha-extrato .v.s{ color:var(--rosa) }
.sugestoes{ grid-column:1/-1; display:flex; flex-wrap:wrap; gap:6px; align-items:center }
.sugestoes .btn{ font-size:12px; padding:5px 10px; text-align:left }
.escolha{ display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 }
.escolha label{ display:flex; gap:7px; align-items:center; border:1px solid var(--linha); border-radius:9px; padding:7px 11px; cursor:pointer; font-size:13px }
.escolha input:checked + span{ color:var(--amarelo); font-weight:700 }
.preview{ font-size:13px; color:var(--verde); margin:4px 0 }
.arq-aviso{ font-size:12px; color:var(--dim); margin-top:4px }
.tabela-simples{ width:100%; border-collapse:collapse; font-size:13px } .tabela-simples th{ text-align:left; color:var(--faint); font-size:11.5px; font-weight:700; padding:6px 8px; border-bottom:1px solid var(--linha) } .tabela-simples td{ padding:7px 8px; border-bottom:1px solid rgba(255,255,255,.05); font-variant-numeric:tabular-nums } .tabela-simples td.r, .tabela-simples th.r{ text-align:right }
.negativo{ color:var(--rosa) }
.destaque-aviso{ border:1px solid rgba(255,31,109,.5); background:rgba(255,31,109,.08); color:var(--rosa); border-radius:12px; padding:11px 14px; margin-bottom:12px; font-weight:600; font-size:13.5px }

/* ---------- cabeçalho enxuto, indicadores, busca (Fase 5.5) ---------- */
.btn-config{ background:rgba(255,255,255,.06); border:1px solid var(--linha); color:var(--dim); width:38px; height:38px; border-radius:10px; font-size:20px; line-height:1; cursor:pointer }
.btn-config:hover,.btn-config.is-on{ color:var(--amarelo); border-color:var(--amarelo) }
.overlay-senha{ z-index:200 }
.total-prod{ display:flex; align-items:baseline; gap:8px; color:var(--dim); font-size:13px }
.total-prod b{ font-size:30px; line-height:1; color:var(--amarelo); font-variant-numeric:tabular-nums }
.btn-filtros.is-on{ border-color:var(--amarelo); color:var(--amarelo) }
.badge-filtros{ display:inline-block; min-width:18px; padding:0 5px; margin-left:4px; border-radius:99px; background:var(--amarelo); color:#111; font-size:11px; font-weight:800; text-align:center }
.tags-filtros{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:10px 18px 0 }
.tag-filtro{ background:rgba(245,255,0,.1); border:1px solid rgba(245,255,0,.4); color:var(--txt); border-radius:99px; padding:3px 10px; font-size:12px; cursor:pointer }
.tag-filtro:hover{ background:rgba(255,31,109,.18); border-color:var(--rosa) }
/* caixa flutuante de filtros e calendário */
.popover{ position:fixed; z-index:60; width:380px; max-width:calc(100vw - 16px); overflow-y:auto; background:var(--bg-2); border:1px solid var(--linha); border-radius:14px; padding:16px; box-shadow:0 18px 50px rgba(0,0,0,.6) }
.painel-filtros h3{ margin:0; font-size:16px } .painel-filtros h4{ margin:0 0 7px; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--faint) }
.painel-topo{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px }
.grupo-painel{ padding:11px 0; border-top:1px solid var(--linha) } .grupo-painel .chips + .chips{ margin-top:6px }
.chips{ display:flex; flex-wrap:wrap; gap:6px }
.chip-filtro{ display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.05); border:1px solid var(--linha); border-radius:99px; padding:5px 12px; font-size:12.5px; color:var(--dim); cursor:pointer }
.chip-filtro:hover{ border-color:var(--amarelo) }
.chip-filtro.is-on{ background:var(--amarelo); border-color:var(--amarelo); color:#111; font-weight:700 }
.chip-filtro small{ font-size:11px; opacity:.75; font-variant-numeric:tabular-nums }
.chip-filtro.ruim:not(.is-on) small{ color:var(--rosa); opacity:1 }
.calendario{ margin-top:10px; background:var(--card); border:1px solid var(--linha); border-radius:12px; padding:10px }
.cal-topo{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px }
.cal-nav{ background:none; border:0; color:var(--dim); font-size:20px; width:32px; height:28px; cursor:pointer; border-radius:8px } .cal-nav:hover{ background:rgba(255,255,255,.1); color:var(--txt) }
.cal-grade{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; text-align:center }
.cal-sem{ font-size:11px; color:var(--faint); padding:3px 0 }
.cal-dia{ background:none; border:0; border-radius:8px; padding:7px 0; font-size:13px; color:var(--txt); cursor:pointer; font-variant-numeric:tabular-nums }
.cal-dia:hover{ background:rgba(255,255,255,.12) }
.cal-dia.is-hoje{ box-shadow:inset 0 0 0 1px var(--azul) }
.cal-dia.is-meio{ background:rgba(245,255,0,.16); border-radius:0 }
.cal-dia.is-ponta{ background:var(--amarelo); color:#111; font-weight:800 }
.cal-rodape{ margin-top:8px; text-align:center; font-size:12.5px; color:var(--dim) }
.busca-box{ display:flex; align-items:center; gap:8px; flex:1 1 320px; max-width:520px }
.busca-box .entrada{ flex:1 }
.card-atrasado{ border-color:rgba(255,31,109,.55) }
.prazo{ font-size:12px; color:var(--dim); margin-top:4px } .prazo.atrasado{ color:var(--rosa); font-weight:700 }
.btn:disabled{ cursor:not-allowed }
.orc-barra .busca-box{ max-width:520px }

/* ---------- configurações ---------- */
.cfg-layout{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:18px; align-items:start }
.cfg-nav{ display:flex; flex-direction:column; gap:4px; position:sticky; top:12px }
.cfg-nav button{ text-align:left; background:none; border:1px solid transparent; color:var(--dim); padding:10px 13px; border-radius:10px; cursor:pointer; font-weight:700; font-size:13.5px }
.cfg-nav button:hover{ color:var(--txt) } .cfg-nav button.is-on{ color:var(--amarelo); background:rgba(245,255,0,.08); border-color:rgba(245,255,0,.3) }
.cfg-nav .cfg-sep{ margin:10px 0 2px 13px; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--faint) }
.cfg-corpo h2{ margin:0 0 4px; font-size:18px }
.cfg-bloco{ background:var(--card); border:1px solid var(--linha); border-radius:14px; padding:16px; margin-bottom:14px }
.cfg-bloco h3{ margin:0 0 8px; font-size:14px }
.perm-grupo{ border:1px solid var(--linha); border-radius:12px; padding:10px 14px; margin:10px 0; background:rgba(255,255,255,.02) }
.perm-grupo > h5{ margin:0 0 4px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim) }
.perm-grupo.desligado .perm-item:not(.perm-base){ opacity:.4 }
.perm-item{ display:flex; gap:9px; align-items:flex-start; padding:5px 0; cursor:pointer; font-size:13.5px }
.perm-item input{ margin-top:3px; width:16px; height:16px; accent-color:var(--amarelo); flex:none }
.perm-item.perm-base{ font-weight:700 }
.tipos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; margin:8px 0 }
.tipo-op{ border:1px solid var(--linha); border-radius:11px; padding:9px 11px; cursor:pointer; background:rgba(255,255,255,.02); text-align:left; color:inherit }
.tipo-op b{ display:block; font-size:13.5px } .tipo-op small{ color:var(--faint); font-size:11.5px }
.tipo-op.is-on{ border-color:var(--amarelo); background:rgba(245,255,0,.08) }
.meta-barra{ height:9px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden; margin:6px 0 }
.meta-barra > i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--azul),var(--verde)) }
.meta-barra.uso-ok > i{ background:linear-gradient(90deg,var(--azul),var(--verde)) } .meta-barra.uso-atencao > i{ background:var(--laranja) } .meta-barra.uso-critico > i{ background:var(--rosa) }
.uso-numeros{ margin-bottom:4px } .uso-numeros b{ font-size:22px }
.lista-ajuda{ margin:6px 0 0; padding-left:18px; line-height:1.55 } .lista-ajuda li{ margin-bottom:8px; color:var(--dim) } .lista-ajuda a{ color:var(--azul) }
.meta-barra.bateu > i{ background:linear-gradient(90deg,var(--verde),var(--amarelo)) }
.ranking td.nome{ font-weight:700 } .ranking tr.destaque td{ background:rgba(245,255,0,.06) } .ranking tr{ cursor:pointer }
.tabela-rolagem{ overflow-x:auto }
.auditoria td{ font-size:12.5px; vertical-align:top }
.senha-status{ display:inline-block; padding:3px 11px; border-radius:99px; font-size:12px; font-weight:800 }
.senha-status.ok{ background:rgba(0,229,155,.16); color:var(--verde) } .senha-status.nao{ background:rgba(255,31,109,.16); color:var(--rosa) }

/* ---------- lista compacta de clientes ---------- */
.cli-lista{ background:var(--card); border:1px solid var(--linha); border-radius:12px; overflow:hidden }
.cli-linha{ display:grid; grid-template-columns:22px 62px minmax(130px,1.4fr) minmax(150px,1.6fr) minmax(90px,.8fr) 58px 96px 62px; align-items:center; gap:10px; padding:5px 12px; min-height:34px; font-size:13px; border-bottom:1px solid rgba(255,255,255,.06) }
.cli-linha:last-child{ border-bottom:0 }
.cli-linha > span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0 }
.cli-cab{ position:sticky; top:0; background:var(--bg-2); color:var(--faint); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; min-height:30px }
.cli-clicavel{ cursor:pointer } .cli-clicavel:hover,.cli-clicavel:focus-visible{ background:rgba(245,255,0,.06); outline:0 } .cli-clicavel.is-sel{ background:rgba(245,255,0,.1) }
.cli-cod{ color:var(--faint); font-variant-numeric:tabular-nums; font-size:12px }
.cli-nome{ font-weight:600 } .cli-nome .revenda{ margin-left:6px; font-size:9.5px; padding:1px 5px }
.cli-contato,.cli-vend{ color:var(--dim) }
.cli-num{ text-align:right; font-variant-numeric:tabular-nums }
.cli-gasto{ font-weight:600 }
.btn-mini{ padding:3px 8px; font-size:12px }
@media (max-width:720px){
  .cli-linha{ grid-template-columns:22px 58px minmax(0,1fr) 90px 60px; row-gap:0 }
  .cli-contato,.cli-vend,.cli-linha > .cli-num:not(.cli-gasto){ display:none }
}

.captcha-box{ margin:6px 0; min-height:0 }

/* ---------- cadastro de cliente com preenchimento automático ---------- */
.cnpj-status{ margin:-6px 0 10px; font-size:12.5px; color:var(--dim); min-height:0 }
.cnpj-status:empty{ display:none }
.cnpj-status.ok{ color:var(--verde) } .cnpj-status.alerta{ color:var(--laranja) } .cnpj-status.erro{ color:var(--rosa) } .cnpj-status.buscando{ color:var(--azul) }
.cnpj-status.aviso{ color:var(--laranja); background:rgba(255,176,32,.1); border:1px solid rgba(255,176,32,.4); border-radius:9px; padding:7px 10px; margin:0 0 10px }
.cliente-detalhes{ margin-top:6px } .cliente-detalhes summary{ cursor:pointer; color:var(--dim); font-size:12.5px; margin-bottom:8px }

/* ---------- toast ---------- */
.toast{ position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:80; background:var(--verde); color:#04120c; font-weight:700; padding:10px 18px; border-radius:10px; box-shadow:0 8px 30px rgba(0,0,0,.5); max-width:90vw }
.toast.erro{ background:var(--rosa); color:#fff }

@media (max-width:700px){
  .quadro{ grid-auto-columns:minmax(260px,86vw); padding:12px }
  .cfg-layout{ grid-template-columns:1fr } .cfg-nav{ position:static; flex-direction:row; overflow-x:auto } .cfg-nav button{ white-space:nowrap } .cfg-nav .cfg-sep{ display:none }
  .topo{ padding:10px 12px } .abas{ order:3; flex:1 1 100%; overflow-x:auto; scrollbar-width:none } .aba{ white-space:nowrap; padding:8px 12px }
  .total-prod b{ font-size:26px } .busca-box{ flex:1 1 100%; max-width:none; order:3 }
  .barra-filtros,.tags-filtros{ padding-left:12px; padding-right:12px }
  .popover{ left:8px !important; right:8px; width:auto }
  .grade,.grade3,.grade2{ grid-template-columns:1fr }
  .fin-linha{ grid-template-columns:1fr auto }
  .fin-venc{ grid-column:1/-1; display:flex; gap:8px; align-items:baseline } .fin-venc b{ display:inline }
  .rosca-box{ grid-template-columns:1fr }
  .fin-corpo{ padding:12px } .fin-subabas{ padding:8px 10px 0 }
  .linha-extrato{ grid-template-columns:1fr auto } .linha-extrato .d{ grid-column:1/-1 }
}