/* WSJF Calculator – estilo alineado con tu sitio (Bootstrap-first) */

.wsjf .wsjf-card {
  border-radius: 16px;
}

.wsjf-stepper {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.wsjf-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.02);
}

[data-bs-theme="dark"] .wsjf-step {
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
}

.wsjf-step-dot {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  border: 1px solid rgba(0,0,0,.15);
  background: rgba(0,0,0,.04);
}

[data-bs-theme="dark"] .wsjf-step-dot {
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}

.wsjf-step.active .wsjf-step-dot {
  background: rgba(13,110,253,.12); /* bootstrap primary tint */
  border-color: rgba(13,110,253,.35);
}

.wsjf-step.done .wsjf-step-dot {
  background: rgba(25,135,84,.14); /* bootstrap success tint */
  border-color: rgba(25,135,84,.35);
}

.wsjf-step-label {
  font-weight: 600;
  font-size: 0.95rem;
}

.wsjf-tip {
  display: inline-flex;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.75rem;
  border: 1px solid rgba(0,0,0,.18);
  color: inherit;
  opacity: .75;
  cursor: help;
  margin-left: 6px;
}

[data-bs-theme="dark"] .wsjf-tip {
  border-color: rgba(255,255,255,.18);
  opacity: .85;
}

.wsjf-table th, .wsjf-table td {
  vertical-align: middle;
}

.wsjf-auto {
  font-variant-numeric: tabular-nums;
  color: rgba(0,0,0,.7);
}

[data-bs-theme="dark"] .wsjf-auto {
  color: rgba(255,255,255,.78);
}

.wsjf-side {
  border-radius: 16px;
}

.wsjf-toast {
  border-radius: 12px;
  margin-bottom: 12px;
}