/* Painel de Pagamentos NextX — tema escuro, azul da marca (#3EA8FF) */
:root{
  --azul:#3EA8FF; --azul-esc:#2b7fd0;
  --bg:#0b1017; --bg2:#111a26; --card:#141f2e; --card2:#18293c;
  --linha:#22344b; --txt:#e8eef7; --muted:#8ba0b9;
  --ok:#28c76f; --ok-bg:#0f2a1e; --wait:#f5a623; --wait-bg:#2c2410; --bad:#ff5b6b; --bad-bg:#2a1319;
  --radius:14px; --sombra:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:radial-gradient(1200px 600px at 80% -10%, #16263a 0%, var(--bg) 55%) fixed;
  color:var(--txt); font-size:15px; line-height:1.5; min-height:100vh;
}
a{color:var(--azul); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1120px; margin:0 auto; padding:0 20px}
.main{padding:26px 0 60px}
h1{font-size:26px; font-weight:800; margin:0 0 4px; letter-spacing:-.02em}
h3{font-size:16px; font-weight:700; margin:0 0 14px}
.muted{color:var(--muted)}
.mini{font-size:12.5px; margin-top:10px}

/* ---------- nav ---------- */
nav{background:rgba(10,16,24,.85); backdrop-filter:blur(10px); border-bottom:1px solid var(--linha); position:sticky; top:0; z-index:20}
.navbar{display:flex; align-items:center; gap:18px; height:60px}
.brand{font-size:20px; font-weight:800; color:var(--txt); letter-spacing:-.02em}
.brand:hover{text-decoration:none}
.brand b{color:var(--azul)}
.brand.big{font-size:30px; display:block; margin-bottom:6px}
.tag{font-size:11px; font-weight:700; color:var(--azul); background:rgba(62,168,255,.12); padding:3px 8px; border-radius:999px; vertical-align:middle; margin-left:4px}
.navmenu{display:flex; gap:6px; margin-left:8px}
.navlink{color:var(--muted); font-weight:600; padding:8px 12px; border-radius:9px; font-size:14px}
.navlink:hover{color:var(--txt); background:var(--card); text-decoration:none}
.navlink.on{color:var(--txt); background:var(--card2)}
.navright{margin-left:auto; display:flex; align-items:center; gap:12px}
.whoami{color:var(--muted); font-size:13px; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ---------- botões ---------- */
.btn{background:var(--azul); color:#04121f; border:none; font-weight:700; font-size:14px;
  padding:11px 18px; border-radius:10px; cursor:pointer; font-family:inherit; display:inline-block; text-align:center}
.btn:hover{background:var(--azul-esc); text-decoration:none; color:#04121f}
.btn.block{width:100%}
.btn.sm{padding:8px 14px; font-size:13px}
.btn.xs{padding:6px 10px; font-size:12px; border-radius:8px}
.btn.ghost{background:transparent; color:var(--txt); border:1px solid var(--linha)}
.btn.ghost:hover{background:var(--card); color:var(--txt)}
.btn.danger{background:transparent; color:var(--bad); border:1px solid rgba(255,91,107,.4)}
.btn.danger:hover{background:var(--bad-bg); color:var(--bad)}

/* ---------- cards ---------- */
.card{background:var(--card); border:1px solid var(--linha); border-radius:var(--radius); box-shadow:var(--sombra)}
.pagehead{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px}

/* ---------- alertas ---------- */
.alert{padding:12px 16px; border-radius:10px; margin-bottom:18px; font-weight:600; font-size:14px}
.alert.err{background:var(--bad-bg); color:#ff9aa5; border:1px solid rgba(255,91,107,.3)}
.alert.ok{background:var(--ok-bg); color:#7ee2a8; border:1px solid rgba(40,199,111,.3)}

/* ---------- login ---------- */
.loginwrap{min-height:calc(100vh - 120px); display:flex; align-items:center; justify-content:center}
.formbox{max-width:400px; width:100%; padding:34px; text-align:left}
.formbox h1{font-size:22px}
.formbox .eyebrow{color:var(--azul); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px}
.formbox .mini{text-align:center; margin-top:18px}
label{display:block; font-size:13px; font-weight:600; color:var(--muted); margin:14px 0 6px}
input[type=text],input[type=email],input[type=password]{
  width:100%; background:var(--bg2); border:1px solid var(--linha); color:var(--txt);
  padding:11px 13px; border-radius:10px; font-size:15px; font-family:inherit}
input:focus{outline:none; border-color:var(--azul); box-shadow:0 0 0 3px rgba(62,168,255,.15)}

/* ---------- KPIs ---------- */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px}
.kpi{background:var(--card); border:1px solid var(--linha); border-left:4px solid var(--linha);
  border-radius:var(--radius); padding:16px 18px; display:flex; flex-direction:column; gap:2px}
.kpi.ok{border-left-color:var(--ok)}
.kpi.wait{border-left-color:var(--wait)}
.kpi.bad{border-left-color:var(--bad)}
.kpi-num{font-size:30px; font-weight:800; letter-spacing:-.02em}
.kpi-lab{font-size:13px; font-weight:700; color:var(--txt)}
.kpi-sub{font-size:12px; color:var(--muted)}

/* ---------- filtros / chips ---------- */
.filtros{display:flex; gap:10px; margin-bottom:14px}
.busca{flex:1}
.chips{display:flex; flex-wrap:wrap; gap:18px; margin-bottom:18px}
.chipgroup{display:flex; gap:8px; flex-wrap:wrap}
.chip{padding:7px 14px; border-radius:999px; background:var(--card); border:1px solid var(--linha);
  color:var(--muted); font-weight:600; font-size:13px}
.chip:hover{color:var(--txt); text-decoration:none; border-color:var(--azul)}
.chip.on{background:var(--azul); color:#04121f; border-color:var(--azul)}

/* ---------- tabela ---------- */
.tablewrap{overflow:hidden}
table.vendas{width:100%; border-collapse:collapse; font-size:14px}
table.vendas thead th{text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); font-weight:700; padding:14px 16px; border-bottom:1px solid var(--linha)}
table.vendas tbody td{padding:13px 16px; border-bottom:1px solid var(--linha); vertical-align:middle}
table.vendas tbody tr:last-child td{border-bottom:none}
table.vendas tbody tr:hover{background:var(--card2)}
.right{text-align:right}
.mono{font-variant-numeric:tabular-nums}
.nowrap{white-space:nowrap}
.cli{font-weight:600}
.cli-sub{font-size:12px; color:var(--muted)}
.metodo{text-transform:capitalize; color:var(--muted)}
.afil{display:inline-block; padding:3px 9px; border-radius:999px; font-size:12.5px; font-weight:600;
  background:rgba(62,168,255,.12); color:#9ccdff; border:1px solid rgba(62,168,255,.25)}

/* ---------- badges ---------- */
.badge{display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700;
  background:var(--card2); color:var(--muted); border:1px solid var(--linha)}
.badge.ok{background:var(--ok-bg); color:#7ee2a8; border-color:rgba(40,199,111,.3)}
.badge.wait{background:var(--wait-bg); color:#f7c46b; border-color:rgba(245,166,35,.3)}
.badge.bad{background:var(--bad-bg); color:#ff9aa5; border-color:rgba(255,91,107,.3)}

/* ---------- vazio ---------- */
.vazio{padding:56px 24px; text-align:center}
.vazio-emoji{font-size:44px; margin-bottom:8px}

/* ---------- form admin ---------- */
.formbox2{padding:22px; margin-bottom:22px}
.grid-form{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; align-items:end}
.grid-form label{margin-top:0}
.grid-form .check,.grid-form>div:last-child{grid-column:span 3; display:flex; align-items:center; justify-content:space-between}
.inline{display:flex; align-items:center; gap:8px; font-weight:600; color:var(--txt); margin:0}
.inline input{width:auto}
.acoes{display:flex; gap:8px; justify-content:flex-end; align-items:center; flex-wrap:wrap}
.inline-form{display:inline}
.dd{position:relative; display:inline-block}
.dd summary{list-style:none; cursor:pointer}
.dd summary::-webkit-details-marker{display:none}
.dd-body{position:absolute; right:0; top:110%; background:var(--card2); border:1px solid var(--linha);
  border-radius:10px; padding:10px; display:flex; gap:6px; z-index:5; box-shadow:var(--sombra)}
.dd-body input{width:150px}

/* ---------- responsivo ---------- */
@media (max-width:860px){
  .kpis{grid-template-columns:1fr 1fr}
  .grid-form{grid-template-columns:1fr}
  .grid-form .check,.grid-form>div:last-child{grid-column:span 1}
  .navmenu{margin-left:0}
  .whoami{display:none}
}
@media (max-width:640px){
  .kpis{grid-template-columns:1fr 1fr; gap:10px}
  .kpi-num{font-size:24px}
  .pagehead{flex-direction:column; align-items:flex-start}
  /* tabela vira cards */
  table.vendas thead{display:none}
  table.vendas, table.vendas tbody, table.vendas tr, table.vendas td{display:block; width:100%}
  table.vendas tr{border:1px solid var(--linha); border-radius:12px; margin-bottom:12px; padding:6px 4px}
  table.vendas tbody td{border:none; padding:8px 14px; display:flex; justify-content:space-between; gap:14px; text-align:right}
  table.vendas tbody td::before{content:attr(data-l); color:var(--muted); font-weight:600; font-size:12px; text-align:left}
  table.vendas td.right, table.vendas td[data-l=Cliente]{text-align:right}
  .acoes{justify-content:flex-end}
  .dd-body{position:static; box-shadow:none}
}