/* ============================================================================
   PAGAMENTOS V2 · PAINEL — estilos
   Mesma linguagem visual do Hub Ontime: creme + ameixa + laranja.
   ============================================================================ */
:root{
  --plum-deep:#2D1B2D; --plum:#4A2C4A; --plum-light:#5C1A5C; --plum-soft:#6B5E6B;
  --bg:#FAF7F5; --surface:#FFF; --surface-soft:#F6F2F6;
  --border:#E8E2E8; --border-soft:#F0EBF0;
  --ink:#1A0F1A; --muted:#6B5E6B; --subtle:#A89CB0;
  --orange:#FF6E00; --orange-deep:#D25500; --orange-soft:#FFF1E0;
  --ok:#16794A; --ok-soft:#E8F6EE;
  --warn:#B45309; --warn-soft:#FEF3C7;
  --danger:#DC2626; --danger-soft:#FEE2E2;
  --info:#1D4ED8; --info-soft:#EFF4FF;
  --font-display:'Fraunces',serif; --font-body:'Manrope',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --radius:16px; --radius-md:12px; --radius-sm:9px;
  --shadow-sm:0 1px 2px rgba(26,15,26,.04);
  --shadow:0 1px 2px rgba(45,27,45,.04), 0 8px 24px -12px rgba(45,27,45,.12);
  --shadow-lg:0 18px 44px -14px rgba(26,15,26,.35);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--font-body); font-size:14px; color:var(--ink);
  background:var(--bg); min-height:100vh; -webkit-font-smoothing:antialiased;
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#C9C2CC;border-radius:10px}

/* ------------------------------------------------------------- o fundo
   Luzes grandes da marca que se movem devagar, com um grão fino por cima para
   o creme não parecer papel liso. Fica atrás de tudo e não compete com a
   leitura — a graça é perceber que o fundo está vivo, não olhar para ele. */
.fundo{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none}
.brilho{position:absolute; border-radius:50%; filter:blur(90px)}
.b1{
  width:52vw; height:52vw; min-width:420px; min-height:420px; top:-16vw; right:-12vw;
  background:radial-gradient(circle,rgba(255,110,0,.30),transparent 68%);
  animation:deriva1 26s ease-in-out infinite;
}
.b2{
  width:56vw; height:56vw; min-width:440px; min-height:440px; bottom:-22vw; left:-16vw;
  background:radial-gradient(circle,rgba(92,26,92,.26),transparent 68%);
  animation:deriva2 32s ease-in-out infinite;
}
.b3{
  width:34vw; height:34vw; min-width:280px; min-height:280px; top:42%; left:46%;
  background:radial-gradient(circle,rgba(255,138,46,.16),transparent 70%);
  animation:deriva3 38s ease-in-out infinite;
}
@keyframes deriva1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-6vw,5vh) scale(1.12)}}
@keyframes deriva2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(7vw,-6vh) scale(1.1)}}
@keyframes deriva3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-8vw,-7vh) scale(1.18)}}
.grao{
  position:absolute; inset:-50%; opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* um véu quente no topo, atrás do cabeçalho */
body::before{
  content:''; position:fixed; inset:0 0 auto 0; height:340px; z-index:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(255,110,0,.07),transparent 78%);
}

/* -------------------------------------------------------------- header */
.main{flex:1;display:flex;flex-direction:column;overflow-y:auto}
header{
  position:sticky;top:0;z-index:50;
  min-height:70px;padding:12px 30px;gap:14px;flex-wrap:wrap;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(251,247,245,.82);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid rgba(232,226,232,.9);
}
.marca{display:flex;align-items:center;gap:12px;min-width:0}
.marca-icone{
  width:38px;height:38px;border-radius:11px;flex-shrink:0;overflow:hidden;
  display:grid;place-items:center;background:var(--plum-deep);color:var(--orange);
  box-shadow:0 6px 16px -8px rgba(45,27,45,.5);
}
.marca-icone img{width:100%;height:100%;object-fit:cover;display:block}
.marca-texto{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.marca-texto h1{
  font-family:var(--font-display);font-size:21px;font-weight:600;letter-spacing:-.02em;
}
.marca-texto span{
  font-size:11.5px;font-weight:600;color:var(--muted);text-transform:capitalize;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.header-right{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.stamp{
  display:flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;
  background:rgba(255,255,255,.7);border:1px solid var(--border);
  font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap;
}
.stamp .dot{width:7px;height:7px;border-radius:50%;background:#22C55E;flex-shrink:0;
  box-shadow:0 0 0 3px rgba(34,197,94,.16)}
.stamp .dot.warn{background:#F59E0B;box-shadow:0 0 0 3px rgba(245,158,11,.16)}
.stamp .dot.off{background:#9CA3AF;box-shadow:none}
.btn[hidden]{display:none}
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:11px;
  font-family:inherit;font-weight:600;font-size:13px;border:1px solid transparent;
  cursor:pointer;transition:all .15s;
}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{
  background:linear-gradient(135deg,#FF8A2E 0%,var(--orange) 55%,var(--orange-deep) 100%);
  color:#fff;font-weight:800;
  box-shadow:0 8px 20px -10px rgba(255,110,0,.65), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.05)}
.btn-ghost{background:#fff;color:var(--plum);border-color:var(--border);box-shadow:var(--shadow-sm)}
.btn-ghost:hover:not(:disabled){background:var(--surface-soft);border-color:var(--orange);color:var(--orange-deep)}
.btn-danger{background:#fff;color:var(--danger);border-color:var(--danger-soft)}
.btn-danger:hover:not(:disabled){background:var(--danger-soft);border-color:var(--danger)}
.btn-sm{padding:6px 11px;font-size:12px;border-radius:8px}
.btn-icon{
  width:30px;height:30px;padding:0;justify-content:center;border-radius:8px;
  background:none;border:1px solid transparent;color:var(--subtle);cursor:pointer;font-size:13px;
}
.btn-icon:hover{background:var(--orange-soft);color:var(--orange-deep)}

/* ------------------------------------------------------------- conteúdo */
.content{position:relative;z-index:1;padding:24px 30px 80px;max-width:1500px;
  margin:0 auto;width:100%;display:flex;flex-direction:column;gap:24px}
header{position:sticky}
/* A entrada animada vale só na primeira pintura. Trocar de cartão ou de filtro
   redesenha só o que mudou, e sem fade — senão a tela pisca a cada clique. */
body.entrando .section{animation:fadeUp .45s ease-out both}
.section-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.section-title{
  font-family:var(--font-display);font-size:19px;font-weight:600;letter-spacing:-.01em;
  display:flex;align-items:center;gap:9px;
}
.section-title i{color:var(--orange);font-size:18px}
.section-sub{font-size:12.5px;color:var(--muted)}

.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.kpi{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px 22px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
  transition:transform .2s, box-shadow .2s;
}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.kpi::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--subtle)}
.kpi.ok::before{background:var(--ok)} .kpi.info::before{background:var(--info)}
.kpi.warn::before{background:var(--warn)} .kpi.danger::before{background:var(--danger)}
.kpi.orange::before{background:var(--orange)}
.k-label{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.k-value{font-family:var(--font-display);font-size:26px;font-weight:700;margin-top:8px;
  line-height:1.05;letter-spacing:-.02em}
.k-sub{font-size:11.5px;color:var(--muted);margin-top:5px;line-height:1.4}
.kpi.clicavel{cursor:pointer}

/* ---------------------------------------------------------- linha do tempo
   Três momentos do mesmo dinheiro: ontem, hoje, amanhã. A ordem é fixa; o que
   se move é o destaque. Cartões compactos de propósito — eles orientam, quem
   trabalha é a tabela logo abaixo. */
.timeline{
  display:grid; align-items:stretch; gap:10px;
  grid-template-columns:var(--c1,1fr) auto var(--c2,1.2fr) auto var(--c3,1fr);
  transition:grid-template-columns .42s cubic-bezier(.4,0,.2,1);
}
.timeline-seta{display:grid; place-items:center; color:#DCD3DC; font-size:13px}

.marco{
  position:relative; overflow:hidden; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px;
  padding:14px 16px; border-radius:var(--radius-md);
  background:rgba(255,255,255,.86); border:1px solid var(--border);
  box-shadow:var(--shadow-sm); backdrop-filter:blur(6px);
  transition:background .38s ease, box-shadow .3s ease, border-color .3s ease,
             transform .2s ease, padding .38s ease;
}
body.entrando .marco{animation:fadeUp .45s ease-out both}
.marco::before{content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--subtle); transition:background .3s}
.marco.ok::before{background:var(--ok)} .marco.info::before{background:var(--info)}
.marco.orange::before{background:var(--orange)}
.marco:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.marco:focus-visible{outline:2px solid var(--orange); outline-offset:2px}

.marco-topo{display:flex; align-items:baseline; gap:8px; justify-content:center; flex-wrap:wrap}
.marco-quando{font-size:9.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); transition:color .3s}
.marco-qtd{font-family:var(--font-mono); font-size:10px; color:var(--subtle); transition:color .3s}
.marco-valor{
  font-family:var(--font-display); font-weight:700; font-size:22px; line-height:1.05;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; margin-top:2px;
  transition:font-size .38s ease, color .38s ease;
}
.marco-sub{font-size:10.5px; color:var(--muted); line-height:1.4; transition:color .3s}
.marco-alerta{
  display:flex; align-items:center; gap:6px; margin-top:6px; padding:4px 10px;
  border-radius:999px; background:var(--warn-soft); color:var(--warn);
  font-size:10.5px; font-weight:700;
}
.marco-barra{width:100%; height:4px; border-radius:99px; background:var(--surface-soft);
  overflow:hidden; margin-top:8px}
.marco-barra span{display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--ok),#22C55E); transition:width .6s ease-out}

/* ---- o cartão em destaque ---- */
.marco.destaque{
  padding:18px 20px; border-color:transparent;
  background:linear-gradient(150deg,#2A0B2A 0%,#3D1238 58%,#2A0B2A 100%);
  box-shadow:0 16px 36px -20px rgba(42,11,42,.7);
}
.marco.destaque::after{
  content:''; position:absolute; width:230px; height:230px; top:-100px; right:-80px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(255,110,0,.42),transparent 68%); filter:blur(30px);
}
.marco.destaque::before{background:var(--orange)}
.marco.destaque .marco-quando{color:rgba(255,255,255,.6)}
.marco.destaque .marco-qtd{color:rgba(255,255,255,.45)}
.marco.destaque .marco-valor{font-size:29px; color:var(--orange)}
.marco.destaque .marco-sub{color:rgba(255,255,255,.58)}
.marco.destaque .marco-barra{background:rgba(255,255,255,.14)}
.marco.destaque .marco-alerta{background:rgba(255,255,255,.1); color:#FFD9A8}
.marco.destaque:hover{box-shadow:0 22px 44px -20px rgba(42,11,42,.78)}

@media (max-width:900px){
  .timeline{grid-template-columns:1fr!important; gap:10px}
  .timeline-seta{display:none}
  .marco.destaque{padding:16px 18px}
  .marco.destaque .marco-valor{font-size:26px}
}

/* ------------------------------------------------------------- tabela */
.card{background:rgba(255,255,255,.9);backdrop-filter:blur(8px);
  border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);overflow:hidden}
.card-bar{
  padding:14px 20px;border-bottom:1px solid var(--border);background:var(--surface-soft);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.card-bar-title{font-family:var(--font-display);font-size:16px;font-weight:600;
  display:flex;align-items:center;gap:8px}
.card-bar-title i{color:var(--orange)}
.filtros{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-left:auto}
.busca{position:relative}
.busca i{position:absolute;left:11px;top:50%;transform:translateY(-50%);
  color:var(--subtle);font-size:13px;pointer-events:none}
.busca input{
  width:230px;max-width:100%;padding:9px 12px 9px 32px;background:var(--bg);
  border:1px solid var(--border);border-radius:9px;font-family:inherit;font-size:13px;
  color:var(--ink);outline:none;transition:all .15s;
}
.busca input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,110,0,.1);background:#fff}
select.filtro{
  padding:9px 30px 9px 12px;background:var(--bg);border:1px solid var(--border);
  border-radius:9px;font-family:inherit;font-size:13px;font-weight:600;color:var(--ink);
  outline:none;cursor:pointer;appearance:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 256 256" fill="%23A89CB0"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg>');
  background-repeat:no-repeat;background-position:right 10px center;
}
select.filtro:focus{border-color:var(--orange)}
.chips{display:flex;gap:6px;flex-wrap:wrap;padding:12px 20px 0}
.chip{
  display:inline-flex;align-items:center;gap:7px;padding:7px 13px;background:var(--surface-soft);
  border:1px solid var(--border);border-radius:999px;font-size:12.5px;font-weight:600;
  color:var(--plum-soft);cursor:pointer;transition:all .14s;font-family:inherit;
}
.chip:hover{border-color:var(--orange);color:var(--orange-deep)}
.chip.active{background:var(--plum-deep);border-color:var(--plum-deep);color:#fff}
.chip .cnt{font-family:var(--font-mono);font-size:11px;font-weight:700;
  background:rgba(0,0,0,.07);padding:1px 6px;border-radius:5px}
.chip.active .cnt{background:rgba(255,255,255,.18)}

/* cor por tipo de título — a mesma leitura rápida da ferramenta antiga */
.chip.t-bol{background:#EFEAFB; border-color:#DCD2F5; color:#5B3FA8}
.chip.t-nf{background:var(--orange-soft); border-color:#FFD9B8; color:var(--orange-deep)}
.chip.t-pa{background:#E4F1FE; border-color:#C6E1FB; color:#1B6FBF}
.chip.t-pc{background:#E7F7F1; border-color:#C7EBDE; color:#12795A}
.chip.t-rb{background:#FDECF3; border-color:#F8D3E3; color:#B0246A}
.chip.t-px{background:#FDF3D9; border-color:#F5E4B0; color:#8A6410}
.chip.t-ted{background:#E9EEF5; border-color:#D3DDEA; color:#3C5A80}
.chip.t-ciot{background:#F0EAE2; border-color:#E0D4C4; color:#7A5A2E}
.chip.t-adi,.chip.t-res{background:#F3E8F3; border-color:#E5D2E5; color:#7A2E7A}
.chip.active[class*="t-"]{background:var(--plum-deep); border-color:var(--plum-deep); color:#fff}

.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:separate;border-spacing:0;text-align:left}
th{
  padding:12px 16px;font-size:10.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);background:var(--surface-soft);
  border-bottom:1px solid var(--border);white-space:nowrap;
}
th.sortable{cursor:pointer;transition:color .15s}
th.sortable:hover{color:var(--ink)}
th i{font-size:11px;margin-left:4px;color:var(--subtle)}
th i.on{color:var(--orange)}
td{padding:11px 16px;font-size:12.5px;border-bottom:1px solid var(--border-soft);vertical-align:top}
tbody tr:hover td{background:rgba(255,110,0,.03)}
tbody tr.editada td{background:rgba(255,110,0,.05)}
tbody tr.editada td:first-child{box-shadow:inset 3px 0 0 var(--orange)}
td.num{font-family:var(--font-mono);text-align:right;white-space:nowrap}
td.mono{font-family:var(--font-mono);white-space:nowrap}
.forn{font-weight:600;color:var(--plum-deep)}
.forn small{display:block;font-weight:400;color:var(--plum-soft);font-size:11px;margin-top:2px}
.antes{display:block;font-weight:400;color:var(--subtle);font-size:10.5px;margin-top:2px;
  text-decoration:line-through}
.acoes{display:flex;gap:2px;justify-content:flex-end}
.empty{padding:40px 20px;text-align:center;color:var(--plum-soft);font-size:13px}
.empty i{display:block;font-size:26px;color:var(--border);margin-bottom:10px}
.paginacao{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:10px 20px;font-size:12.5px;font-weight:600;color:var(--muted);
}
.paginacao.topo{border-bottom:1px solid var(--border-soft);background:var(--surface-soft)}
.paginacao.baixo{border-top:1px solid var(--border-soft)}
/* aviso discreto dos ocultos: eles ficam fora dos totais, mas não somem sem deixar rastro */
.ocultos-linha{
  display:flex;align-items:center;gap:10px;padding:10px 20px;
  border-top:1px solid var(--border-soft);background:var(--surface-soft);
  font-size:12.5px;color:var(--muted);
}
.ocultos-linha button{
  background:none;border:none;padding:0;font-family:inherit;font-size:12.5px;
  font-weight:700;color:var(--orange-deep);cursor:pointer;text-decoration:underline;
}
tbody tr.linha-oculta td{opacity:.45;font-style:italic}
.rodape{
  padding:12px 20px;border-top:1px solid var(--border);background:var(--surface-soft);
  font-size:12.5px;font-weight:600;color:var(--muted);
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
}

.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:10.5px;
  font-weight:700;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.b-ok{background:var(--ok-soft);color:var(--ok)}
.b-warn{background:var(--warn-soft);color:var(--warn)}
.b-danger{background:var(--danger-soft);color:var(--danger)}
.b-info{background:var(--info-soft);color:var(--info)}
.b-mute{background:var(--surface-soft);color:var(--plum-soft)}
.b-orange{background:var(--orange-soft);color:var(--orange-deep)}

.note{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;
  border-radius:var(--radius-sm);font-size:12.5px;line-height:1.55;margin-bottom:12px}
.note i{font-size:15px;flex-shrink:0;margin-top:1px}
.note.warn{background:var(--warn-soft);color:#7C2D12}
.note.info{background:var(--info-soft);color:#1E3A8A}
.note.danger{background:var(--danger-soft);color:#7F1D1D}

/* -------------------------------------------------------------- loader */
/* ---------------------------------------------------------- carregamento
   O carregamento é a própria página se preenchendo. Os três cartões já ocupam
   o lugar deles, e o do meio — exatamente onde nasce o cartão em destaque — é
   quem mostra o mascote e o progresso. Quando o dado chega, aquele cartão vira
   o "previsto para hoje": nada aparece nem some, a tela só ganha conteúdo. */
#loader{
  position:fixed;inset:0;z-index:9000;display:flex;align-items:flex-start;
  justify-content:center;padding:94px 30px 0;background:var(--bg);
  transition:opacity .3s ease, visibility .3s
}
#loader.out{opacity:0;visibility:hidden;pointer-events:none}
.load-palco{position:relative;width:min(1500px,100%);display:grid;gap:24px}

.load-card{
  position:relative;overflow:hidden;border-radius:var(--radius-md);
  padding:18px 20px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;min-height:126px;
  background:linear-gradient(150deg,#2A0B2A 0%,#3D1238 58%,#2A0B2A 100%);
  box-shadow:0 16px 36px -20px rgba(42,11,42,.7);
}
.load-brilho{
  position:absolute;width:230px;height:230px;top:-100px;right:-80px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,110,0,.42),transparent 68%);filter:blur(30px);
}
.load-mascote{position:relative;width:52px;height:52px;display:grid;place-items:center}
.load-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.14);
  border-top-color:var(--orange);animation:spin .9s linear infinite}
.load-mascote img{width:38px;height:38px;border-radius:50%;object-fit:cover}
.load-text{font-family:var(--font-display);font-size:13.5px;font-weight:600;color:#fff;
  text-align:center;min-height:19px}
.load-barra{width:min(260px,80%);height:4px;border-radius:99px;
  background:rgba(255,255,255,.14);overflow:hidden}
.load-barra span{display:block;height:100%;width:0%;border-radius:99px;
  background:linear-gradient(90deg,#FF8A2E,var(--orange));transition:width .3s ease}
.load-pct{font-family:var(--font-mono);font-size:10.5px;color:rgba(255,255,255,.55)}

/* os dois cartões laterais e a tabela, no lugar exato onde vão nascer */
.esq-linha{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:10px;align-items:stretch}
.esq-bloco{border-radius:var(--radius-md);border:1px solid var(--border);min-height:126px;
  background:linear-gradient(100deg,var(--surface) 30%,var(--surface-soft) 50%,var(--surface) 70%);
  background-size:220% 100%;animation:brilho 1.4s ease-in-out infinite}
.esq-tabela{height:230px;border-radius:var(--radius);border:1px solid var(--border);
  background:linear-gradient(100deg,var(--surface) 30%,var(--surface-soft) 50%,var(--surface) 70%);
  background-size:220% 100%;animation:brilho 1.4s ease-in-out infinite .15s}
@keyframes brilho{0%{background-position:180% 0}100%{background-position:-60% 0}}

/* fio de progresso no alto da janela */
.fio{position:fixed;top:0;left:0;right:0;height:2.5px;z-index:9500;
  background:transparent;opacity:0;transition:opacity .25s}
.fio.ativo{opacity:1}
.fio span{display:block;height:100%;width:0%;
  background:linear-gradient(90deg,#FF8A2E,var(--orange));
  box-shadow:0 0 8px rgba(255,110,0,.6);transition:width .3s ease}

@media (max-width:900px){
  #loader{padding:80px 16px 0}
  .esq-linha{grid-template-columns:1fr}
  .esq-bloco{min-height:70px}
  .esq-tabela{height:150px}
}

/* -------------------------------------------------- modal / toast */
.modal{position:fixed;inset:0;z-index:3000;display:none;align-items:center;
  justify-content:center;padding:18px;background:rgba(26,15,26,.55);backdrop-filter:blur(4px)}
.modal.show{display:flex}
.modal-box{background:var(--surface);border-radius:18px;width:100%;max-width:660px;
  max-height:90vh;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);
  animation:fadeUp .2s ease-out}
.modal-box.sm{max-width:420px}
.modal-head{padding:20px 24px 14px;border-bottom:1px solid var(--border-soft)}
.modal-head h3{font-family:var(--font-display);font-weight:500;font-size:19px;
  display:flex;align-items:center;gap:10px}
.modal-head h3 i{color:var(--orange);font-size:17px}
.modal-head p{margin-top:5px;font-size:12.5px;color:var(--plum-soft);line-height:1.5}
.modal-body{padding:18px 24px;overflow-y:auto}
.modal-foot{padding:14px 20px;background:var(--surface-soft);
  border-top:1px solid var(--border-soft);display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:13px}
.campo{display:flex;flex-direction:column;gap:5px}
.campo.wide{grid-column:1/-1}
.campo label{font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.campo input,.campo select,.campo textarea{
  padding:10px 12px;background:var(--bg);border:1px solid var(--border);border-radius:9px;
  font-family:inherit;font-size:13px;color:var(--ink);outline:none;transition:all .15s;width:100%;
}
.campo textarea{resize:vertical;min-height:60px}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,110,0,.1);background:#fff}
.campo input.mudou{border-color:var(--orange);background:var(--orange-soft)}
.campo .orig{font-size:10.5px;color:var(--subtle)}
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);z-index:4000;
  background:var(--plum-deep);color:#fff;padding:13px 22px;border-radius:11px;max-width:92vw;
  text-align:center;font-size:13px;font-weight:600;box-shadow:0 12px 32px -8px rgba(45,27,45,.4);
  opacity:0;pointer-events:none;transition:all .25s;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--danger)}

@media (max-width:1024px){
  header{padding:10px 16px}
  .content{padding:20px 16px 80px;gap:24px}
  .filtros{margin-left:0;width:100%}
  .busca{flex:1}
  .busca input{width:100%}
}
@media (max-width:640px){
  .marca-texto h1{font-size:18px}
  .stamp{display:none}
  th,td{padding:10px 12px}
  .campos{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .brilho{animation:none!important}
}

/* ---------------------------------------------------- ambiente de teste
   Uma tarja discreta, sempre à vista: em teste ninguém deve confundir a tela
   com a de verdade. Quem decide é o  endereço da página, não uma configuração
   que alguém possa esquecer de trocar. */
body.ambiente-teste::after{
  content:'AMBIENTE DE TESTE';
  position:fixed; left:0; bottom:0; z-index:9800;
  padding:5px 14px 5px 12px; border-radius:0 10px 0 0;
  background:var(--warn, #B45309); color:#fff;
  font-family:var(--font-body, sans-serif); font-size:10.5px; font-weight:800;
  letter-spacing:.12em; pointer-events:none;
  box-shadow:0 -2px 12px -4px rgba(0,0,0,.4);
}

/* no painel, que é só leitura, a mesma informação sem os botões */
.valor-nota{display:block;font-size:10px;color:var(--subtle);margin-top:2px}
.valor-nota.pendente{color:var(--danger)}