::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #1a2540; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- estilo fintech oscuro ---------- */
body {
  background:
    radial-gradient(1100px 500px at 12% -10%, rgba(56, 189, 248, .08), transparent 55%),
    radial-gradient(900px 480px at 95% -5%, rgba(167, 139, 250, .08), transparent 55%),
    radial-gradient(800px 500px at 60% 110%, rgba(52, 211, 153, .05), transparent 55%),
    #070b14;
}
.card {
  background: linear-gradient(180deg, rgba(23, 32, 52, .72), rgba(13, 19, 33, .86)) !important;
  border-color: rgba(148, 163, 184, .12) !important;
}
.num { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.kpi-num { font-size: 30px; font-weight: 800; line-height: 1.1; }
.ring-label { font-size: 30px; font-weight: 800; }

.lchip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .25rem .65rem; border-radius: 999px; font-size: 11px; font-weight: 600;
  border: 1px solid rgba(148, 163, 184, .2); cursor: pointer; user-select: none;
  color: #cbd5e1; transition: opacity .15s;
}
.lchip.on { background: rgba(148, 163, 184, .12); }
.lchip.off { opacity: .35; }
.lchip .dot { width: 8px; height: 8px; border-radius: 999px; }

.step {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .7rem; border-radius: .7rem;
  background: rgba(30, 41, 59, .6); border: 1px solid rgba(148, 163, 184, .14);
  font-size: 12px; color: #e2e8f0; white-space: nowrap;
}
.step .t { color: #64748b; font-size: 10px; }
.step.end { border-color: rgba(56, 189, 248, .45); background: rgba(56, 189, 248, .10); }
.step-arrow { color: #475569; font-weight: 700; }

.tl { position: relative; }
.tl::before {
  content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px;
  background: linear-gradient(180deg, rgba(56, 189, 248, .5), rgba(148, 163, 184, .1));
}
.tl-item { position: relative; padding-left: 26px; }
.tl-item::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 11px; height: 11px;
  border-radius: 999px; background: #0ea5e9; box-shadow: 0 0 0 4px rgba(14, 165, 233, .15);
}

@media print {
  aside, header, #toast, #modal, #viewer { display: none !important; }
  #app { display: block !important; }
  body, #content { background: #ffffff !important; color: #0f172a !important; }
  .card { background: #ffffff !important; border-color: #cbd5e1 !important; box-shadow: none !important; }
  .card, .card * { color: #0f172a !important; }
  .lchip, .step { border: 1px solid #94a3b8; }
  #content { padding: 0 !important; max-width: 100% !important; }
  .overflow-auto, .overflow-x-auto { max-height: none !important; overflow: visible !important; }
}