/* onboarding.css — activación y wizard de puesta en marcha. */

.wizard { max-width: 720px; margin: 0 auto; }

/* ── barra de pasos ── */
.pasos { display: flex; gap: 6px; margin-bottom: 22px; }
.pasos > div { flex: 1; height: 4px; border-radius: 2px; background: var(--borde); }
.pasos > div.hecho { background: linear-gradient(90deg, var(--pf-teal), var(--pf-cyan)); }
.pasos > div.actual { background: var(--pf-cyan); }

.paso-nro {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--panel-alto); border: 1px solid var(--borde);
  font-size: 13px; font-weight: 600; color: var(--texto-medio);
}
.paso.hecho .paso-nro { background: linear-gradient(90deg, var(--pf-teal), var(--pf-cyan));
                        border: 0; color: #08131A; }
.paso.actual .paso-nro { border-color: var(--pf-cyan); color: var(--pf-cyan); }
.paso { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--borde-sutil); }
.paso:last-child { border-bottom: 0; }
.paso .cuerpo { flex: 1; min-width: 0; }
.paso h3 { margin: 2px 0 6px; font-size: 15px; font-weight: 600; }
.paso p { margin: 0 0 12px; color: var(--texto-medio); font-size: 13.5px; line-height: 1.55; }
.paso.pendiente { opacity: .5; }

/* ── el dato que hay que copiar (address del signer, código de referido) ── */
.copiable {
  display: flex; align-items: center; gap: 10px; margin: 10px 0 12px;
  padding: 11px 13px; border-radius: var(--radio-sm);
  background: var(--fondo); border: 1px solid var(--borde);
}
.copiable code {
  flex: 1; min-width: 0; font-family: ui-monospace, Consolas, monospace; font-size: 13px;
  color: var(--pf-cyan); overflow-wrap: anywhere; user-select: all;
}
.copiable button {
  flex: none; padding: 5px 11px; font-size: 12.5px; border-radius: 5px; cursor: pointer;
  background: var(--panel-alto); border: 1px solid var(--borde); color: var(--texto);
}
.copiable button:hover { border-color: var(--pf-cyan); }

/* ── avisos dentro del wizard ── */
.obligatorio {
  border-left: 3px solid var(--atencion); background: rgba(227,160,8,.07);
  padding: 11px 14px; border-radius: var(--radio-sm); margin: 10px 0 12px;
  font-size: 13.5px; color: var(--texto);
}
.tranquilidad {
  border-left: 3px solid var(--favor); background: rgba(57,198,117,.07);
  padding: 11px 14px; border-radius: var(--radio-sm); margin: 10px 0 0;
  font-size: 13px; color: var(--texto-medio);
}
.esperando { color: var(--texto-tenue); font-size: 13px; font-style: italic; }