:root{
  --bg: #0b1220;
  --card: rgba(255,255,255,.9);
  --muted: #6b7280;
  --accent: #2563eb;
  --danger: #ef4444;
}
body{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: #f5f7fb; }
.topbar{
  background: radial-gradient(1200px 600px at 10% 10%, rgba(37,99,235,.25), transparent 60%),
              radial-gradient(900px 500px at 90% 30%, rgba(59,130,246,.18), transparent 55%),
              linear-gradient(180deg, #0b1220, #0b1220);
  color: white;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.brand-title{ font-weight: 700; letter-spacing: .2px; }
.brand-sub{ font-size: 12px; color: rgba(255,255,255,.75); }
.btn-ghost{ border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.92); background: rgba(255,255,255,.06); }
.btn-ghost:hover{ background: rgba(255,255,255,.12); color: #fff; }
.btn-ghost-danger{ border: 1px solid rgba(239,68,68,.4); color: #fff; background: rgba(239,68,68,.15); }
.btn-ghost-danger:hover{ background: rgba(239,68,68,.25); }
.card{ border: 0; border-radius: 18px; }
.shadow-soft{ box-shadow: 0 10px 30px rgba(2,6,23,.08); }
textarea.form-control{ min-height: 120px; }
.form-control, .form-select{ border-radius: 14px; }
.badge-soft{
  background: rgba(37,99,235,.12);
  color: #1d4ed8;
  border: 1px solid rgba(37,99,235,.18);
  border-radius: 999px;
  font-weight: 600;
}
.stepper{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.stepper .step{
  display:flex; align-items:center; gap:10px;
  padding:12px 12px;
  border-radius: 16px;
  text-decoration:none;
  border: 1px solid rgba(2,6,23,.08);
  background: #fff;
  color:#0f172a;
  box-shadow: 0 8px 18px rgba(2,6,23,.05);
}
.stepper .step .num{
  width:28px; height:28px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  font-weight:700;
  background: rgba(2,6,23,.05);
}
.stepper .step .label{ font-size: 13px; font-weight: 600; }
.stepper .step.active{ border-color: rgba(37,99,235,.35); }
.stepper .step.active .num{ background: rgba(37,99,235,.15); color: #1d4ed8; }
.stepper .step.done{ opacity:.85; }
.stepper .step.done .num{ background: rgba(16,185,129,.18); color: #047857; }
.sig-pad{ border: 1px dashed rgba(2,6,23,.25); border-radius: 16px; background: #fff; }
.table-modern th{ background: rgba(2,6,23,.04); }
.kpi{ display:flex; gap:12px; flex-wrap:wrap; }
.kpi .pill{ padding: 8px 10px; border-radius: 999px; background: #fff; border:1px solid rgba(2,6,23,.08); box-shadow: 0 8px 18px rgba(2,6,23,.04); font-size: 12px; }

/* Botones de estado (HN wizard) */
.btn-status{
  border: 0 !important;
  padding: .55rem 1.05rem;
  border-radius: .65rem;
  font-weight: 700;
  letter-spacing: .2px;
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
  transition: transform .08s ease, box-shadow .12s ease, filter .12s ease;
}

.btn-status:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.14);
  filter: brightness(1.02);
}

.btn-status:active{
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
}

/* Colores */
.btn-sent{
  background: linear-gradient(135deg, #f59e0b, #f97316);
  color: #fff !important;
}

.btn-progress{
  background: linear-gradient(135deg, #2563eb, #06b6d4);
  color: #fff !important;
}

.btn-final{
  background: linear-gradient(135deg, #16a34a, #22c55e);
  color: #fff !important;
}