:root{
  --bg0:#0b1220;
  --bg1:#0f172a;
  --card:#ffffff;
  --muted:#64748b;
  --text:#0f172a;
  --border:#e5e7eb;
  --shadow:0 18px 50px rgba(15, 23, 42, .10);
  --radius:18px;
  --primary:#2f80ed;
  --primary2:#56ccf2;
  --danger:#ef4444;
  --ok:#10b981;
  --warn:#f59e0b;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:radial-gradient(900px 500px at 20% -10%, rgba(47,128,237,.18), transparent 60%),radial-gradient(900px 500px at 110% 10%, rgba(86,204,242,.18), transparent 60%),#f5f8ff;color:var(--text)}
a{color:inherit}
.page{min-height:100vh;display:grid;grid-template-columns:270px 1fr}
.side{background:linear-gradient(180deg,var(--bg1),#0a1020);color:#e2e8f0;padding:18px;border-right:1px solid rgba(255,255,255,.08);position:sticky;top:0;align-self:start;height:100vh}
.brand{display:flex;align-items:center;gap:10px;font-weight:900}
.brand .mark{width:38px;height:38px;border-radius:12px;background:transparent;display:grid;place-items:center;overflow:hidden}
.brand-logo{width:100%;height:100%;object-fit:contain;display:block}
.brand .name{font-size:15px;line-height:1.1}
.brand .sub{font-size:12px;color:rgba(226,232,240,.72);font-weight:700;margin-top:2px}
.nav{margin-top:18px;display:flex;flex-direction:column;gap:14px}
.navGroup{display:flex;flex-direction:column;gap:8px}
.navLabel{font-size:11px;font-weight:1000;letter-spacing:.12em;text-transform:uppercase;color:rgba(226,232,240,.62);padding:0 6px}
.navItem{display:flex;align-items:center;justify-content:space-between;gap:10px;text-decoration:none;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03)}
.navItem:hover{background:rgba(255,255,255,.05)}
.navItem.active{background:linear-gradient(135deg,rgba(47,128,237,.18),rgba(86,204,242,.12));border-color:rgba(86,204,242,.18)}
.tag{font-size:11px;font-weight:900;padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);color:rgba(226,232,240,.9)}
.sideFoot{position:absolute;left:18px;right:18px;bottom:18px;display:flex;flex-direction:column;gap:10px}
.sideMe{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 12px;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03)}
.meUser{font-weight:1000}
.meRole{margin-top:2px;color:rgba(226,232,240,.72);font-weight:900;font-size:12px}
.btnSide{display:flex;align-items:center;justify-content:center;text-decoration:none;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#e2e8f0;font-weight:900}
.btnSide.primary{border:none;background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff}
.btnSide:hover{filter:brightness(1.03)}

.main{padding:18px}
.wrap{max-width:1220px;margin:0 auto}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.h1{margin:0;font-size:20px;letter-spacing:-.02em}
.muted{color:var(--muted);font-size:13px}
.controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.input,.select{border:1px solid var(--border);border-radius:14px;padding:11px 12px;font-weight:800;background:#fff;outline:none}
.input:focus,.select:focus{border-color:rgba(47,128,237,.55);box-shadow:0 0 0 4px rgba(47,128,237,.12)}
.btn{border:1px solid var(--border);background:#fff;padding:10px 12px;border-radius:14px;font-weight:900;text-decoration:none;display:inline-flex;align-items:center;gap:10px}
.btn:hover{filter:brightness(1.01)}
.btn.primary{border:none;background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff}
.btn.danger{border:1px solid rgba(239,68,68,.25);background:rgba(239,68,68,.07);color:#7f1d1d}
.btn.wa{border:1px solid rgba(16,185,129,.25);background:rgba(16,185,129,.07);color:#065f46}

.gridKpi{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:14px}
.kpi{background:rgba(255,255,255,.92);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:12px}
.kpi .label{color:var(--muted);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.kpi .value{margin-top:6px;font-size:22px;font-weight:1000;letter-spacing:-.03em}
.kpi .hint{margin-top:6px;color:var(--muted);font-size:12px}

.card{background:rgba(255,255,255,.92);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:14px;margin-top:14px}
.cardHead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cardTitle{font-weight:1000}
.tableWrap{overflow:auto;border-radius:16px;border:1px solid var(--border);background:#fff}
table{width:100%;border-collapse:separate;border-spacing:0}
thead th{position:sticky;top:0;background:#f8fafc;border-bottom:1px solid var(--border);font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#64748b;text-align:left;padding:12px}
tbody td{border-bottom:1px solid var(--border);padding:12px;vertical-align:top}
tbody tr:hover td{background:#fbfdff}
.tId{font-weight:1000;color:#0f172a}
.tMain{font-weight:1000}
.tSub{margin-top:4px;color:var(--muted);font-size:12px}
.rowActions{display:flex;gap:8px;align-items:center;justify-content:flex-end}
.save{border:none;background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;padding:10px 12px;border-radius:14px;font-weight:1000}
.save:disabled{opacity:.7}
.iconBtn{border:1px solid var(--border);background:#fff;padding:10px 12px;border-radius:14px;font-weight:1000}
.iconBtn:hover{filter:brightness(1.01)}
.iconBtn.danger{border:1px solid rgba(239,68,68,.25);background:rgba(239,68,68,.07);color:#7f1d1d}
.iconBtn.wa{border:1px solid rgba(16,185,129,.25);background:rgba(16,185,129,.07);color:#065f46}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;font-weight:1000;font-size:12px;border:1px solid transparent}
.st-nuevo{background:rgba(47,128,237,.10);border-color:rgba(47,128,237,.18);color:#1d4ed8}
.st-contactado{background:rgba(245,158,11,.10);border-color:rgba(245,158,11,.20);color:#92400e}
.st-aprobado{background:rgba(16,185,129,.10);border-color:rgba(16,185,129,.20);color:#065f46}
.st-rechazado{background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.20);color:#7f1d1d}
.kyc-pendiente{background:rgba(100,116,139,.10);border-color:rgba(100,116,139,.20);color:#334155}
.kyc-en_proceso{background:rgba(245,158,11,.10);border-color:rgba(245,158,11,.20);color:#92400e}
.kyc-completo{background:rgba(16,185,129,.10);border-color:rgba(16,185,129,.20);color:#065f46}
.risk-alto{background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.20);color:#7f1d1d}
.risk-medio{background:rgba(245,158,11,.10);border-color:rgba(245,158,11,.20);color:#92400e}
.risk-bajo{background:rgba(16,185,129,.10);border-color:rgba(16,185,129,.20);color:#065f46}
.tagPill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;font-weight:1000;font-size:12px;border:1px solid rgba(100,116,139,.25);background:rgba(100,116,139,.08);color:#334155}
.tagPill button{border:none;background:transparent;color:inherit;font-weight:1000;cursor:pointer;padding:0}

.toast{position:fixed;right:18px;bottom:18px;background:#0f172a;color:#fff;padding:12px 14px;border-radius:14px;display:none;font-weight:900;box-shadow:0 18px 50px rgba(15,23,42,.25);z-index:40}

.modal{position:fixed;inset:0;background:rgba(15,23,42,.55);display:none;align-items:center;justify-content:center;padding:18px;z-index:50}
.modalCard{width:min(900px,100%);background:#fff;border-radius:20px;border:1px solid var(--border);box-shadow:0 30px 90px rgba(15,23,42,.35);overflow:hidden}
.modalTop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 14px 10px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,#fff,#fbfdff)}
.modalTitle{font-weight:1000}
.modalBody{padding:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kv{border:1px solid var(--border);border-radius:16px;padding:12px;background:#fff}
.kv .k{color:var(--muted);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.kv .v{margin-top:6px;font-weight:900}
.modalFoot{display:flex;justify-content:flex-end;gap:10px;padding:12px;border-top:1px solid var(--border);background:#f8fafc}

.auth{min-height:100vh;display:grid;place-items:center;padding:18px}
.authCard{width:100%;max-width:440px;background:rgba(255,255,255,.92);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow);padding:18px}
.authHead{display:flex;align-items:center;gap:10px}
.authHead .mark{width:38px;height:38px;border-radius:12px;background:transparent;display:grid;place-items:center;overflow:hidden}
.authHead .title{font-weight:1000}
.authHead .desc{margin-top:2px;color:var(--muted);font-size:13px}
.field{margin-top:12px}
.field label{display:block;font-weight:1000;font-size:13px;margin:0 0 6px;color:#334155}
.err{margin-top:12px;padding:12px;border-radius:16px;background:rgba(239,68,68,.10);border:1px solid rgba(239,68,68,.20);color:#7f1d1d;font-weight:800}

@media (max-width: 980px){
  .page{grid-template-columns:1fr}
  .side{position:relative;height:auto}
  .sideFoot{position:relative;left:auto;right:auto;bottom:auto;margin-top:12px}
  .gridKpi{grid-template-columns:repeat(2,1fr)}
  .grid2{grid-template-columns:1fr}
}