/* Exclivia · register.css — el multipasos del alta. */

/* ── Indicador de pasos ─────────────────────────────────────────────────── */

.exc-steps {
  display: flex; align-items: flex-start;
  list-style: none; margin: 0 0 1.5rem; padding: 0;
  counter-reset: paso;
}
.exc-step {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  position: relative;
  text-align: center;
  min-width: 0;
}
/* La línea que une los pasos se dibuja como fondo del propio paso: así no hay
   un elemento extra que se desalinee en pantallas angostas. */
.exc-step::before {
  content: ""; position: absolute; top: 15px; right: 50%;
  width: 100%; height: 2px;
  background: var(--exc-border);
}
.exc-step:first-child::before { display: none; }
.exc-step.is-done::before, .exc-step.is-active::before { background: var(--exc-accent); }

.exc-step-num {
  position: relative; z-index: 1;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--exc-surface);
  border: 2px solid var(--exc-border);
  font-size: .82rem; font-weight: 700;
  color: var(--exc-muted);
}
.exc-step.is-active .exc-step-num {
  background: var(--exc-accent);
  border-color: var(--exc-accent);
  color: var(--exc-accent-contrast);
}
.exc-step.is-done .exc-step-num {
  border-color: var(--exc-accent);
  color: var(--exc-accent);
}
.exc-step-label {
  font-size: .7rem; color: var(--exc-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%;
}
.exc-step.is-active .exc-step-label { color: var(--exc-text); font-weight: 600; }

/* ── Paneles ────────────────────────────────────────────────────────────── */

.exc-step-panel { display: none; }
.exc-step-panel.is-active { display: block; animation: exc-step-in .2s ease; }
@keyframes exc-step-in { from { opacity: 0; transform: translateY(6px); } }

.exc-reg-nav { margin-top: 1.25rem; gap: .6rem; }

/* ── Celular con lada ───────────────────────────────────────────────────── */

.exc-phone-row { display: flex; gap: .5rem; }
.exc-phone-row .exc-input { flex: 1; min-width: 0; }
.exc-phone-code { flex: none; width: 120px; }