/* VENDEV Hub — Pagamentos re-skin (estilo "carteira digital", pedido do Victor 14/08).
   TODA regra fica sob .pag-shell para não vazar pras outras views que também usam hub.css
   (mesmo padrão do hub-promocoes.css). Roxo mais magenta que o da Central de Promoções —
   as duas telas não podem se confundir de relance. */
.pag-shell{
  --pag-primary:hsl(283 90% 64%);
  --pag-primary-deep:hsl(283 85% 46%);
  --pag-primary-soft:hsl(283 55% 16%);
  --pag-card:hsl(280 22% 7%);
  --pag-panel2:hsl(280 18% 12%);
  --pag-border:hsl(280 18% 17%);
  --pag-grad:linear-gradient(135deg,hsl(283 90% 58%),hsl(305 85% 62%));
  --pag-shadow:0 18px 50px -18px hsl(283 90% 40% / .5);
  --pag-shadow-soft:0 2px 18px -8px hsl(0 0% 0% / .5);
  --pag-radius:1.15rem;
  letter-spacing:-.01em;
}
/* ---------- superfícies ---------- */
.pag-shell .card{
  background:var(--pag-card);border:1px solid var(--pag-border);
  border-radius:var(--pag-radius);box-shadow:var(--pag-shadow-soft);
  transition:border-color .2s,box-shadow .2s,transform .15s;
}
.pag-shell .card:hover{border-color:hsl(283 40% 30%)}
.pag-shell table{background:var(--pag-card);border:1px solid var(--pag-border);border-radius:var(--pag-radius);overflow:hidden}
.pag-shell th{background:var(--pag-panel2);letter-spacing:.6px;font-size:.68rem}
.pag-shell td{border-top:1px solid var(--pag-border)}
.pag-shell tr:hover td{background:hsl(283 30% 10%)}
/* ---------- botão principal: mesma semântica do resto do Hub (b-task = ação primária),
   aqui com o gradiente roxo — b-ok/b-rj continuam intocados (aprovar/recusar são universais) ---------- */
.pag-shell .btn{border-radius:12px}
.pag-shell .b-task{
  background:var(--pag-grad);color:#fff;border:none;font-weight:700;
  box-shadow:0 6px 16px -6px hsl(283 90% 50% / .55)}
.pag-shell .b-task:hover{filter:brightness(1.08)}
.pag-shell .chip.on{background:var(--pag-grad);border-color:transparent;color:#fff;font-weight:700}
.pag-shell .p-roxo{background:var(--pag-primary-soft);color:hsl(283 85% 80%)}

/* ---------- hero: total do momento (estilo "valor a pagar" de carteira) ---------- */
.pag-hero{
  background:linear-gradient(165deg,hsl(283 45% 12%),hsl(280 30% 6%));
  border:1px solid var(--pag-border);border-radius:var(--pag-radius);
  padding:18px 20px;margin-bottom:14px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  box-shadow:var(--pag-shadow-soft);
}
.pag-hero .pag-hero-num{font-size:1.7rem;font-weight:800;letter-spacing:-.03em;
  background:var(--pag-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.pag-hero .pag-hero-lbl{font-size:.72rem;color:var(--tx2);text-transform:uppercase;letter-spacing:.6px}

/* ---------- linha de pagamento em estilo "carteira": avatar + nome + valor à direita ---------- */
.pag-linha{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;
  border:1px solid var(--pag-border);background:var(--pag-panel2);margin-bottom:8px;
}
.pag-linha:last-child{margin-bottom:0}
.pag-avatar{
  flex:0 0 38px;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-weight:800;font-size:.78rem;color:#fff;
  background:var(--pag-grad);
}
.pag-linha .pag-nome{font-weight:700;font-size:.86rem}
.pag-linha .pag-sub{font-size:.7rem;color:var(--tx2)}
.pag-linha .pag-valor{margin-left:auto;font-weight:800;font-size:.92rem;white-space:nowrap;text-align:right}
.pag-linha .pag-valor input[type=text]{width:104px;text-align:right;padding:3px 6px}
.pag-linha .pag-editar{cursor:pointer;opacity:.6;margin-left:6px;font-size:.8rem}
.pag-linha .pag-editar:hover{opacity:1}

/* ---------- contas & chaves: mesmo cartão de sempre, cor de destaque nova ---------- */
.pag-shell .pag-avatar-lg{
  flex:0 0 42px;width:42px;height:42px;border-radius:50%;color:#fff;font-weight:800;
  display:flex;align-items:center;justify-content:center;background:var(--pag-grad)!important;
}