/* ═══════════════════════════════════════════════════════
   CREAR — wizard de creación de rifa
   ═══════════════════════════════════════════════════════ */

body { background: var(--gray-50); }

/* ─── Nav simplificado ───────────────────────────────── */
.wizard-topbar {
  height: 60px;
  display: flex;
  align-items: center;
  background: #fff;
  border-bottom: 3px solid var(--co);
  position: sticky;
  top: 0;
  z-index: 10;
  padding-inline: var(--pad-x);
}

.wizard-topbar__logo {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--gray-900);
}

.wizard-topbar__logo span { color: var(--co); }

.wizard-topbar__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.wizard-topbar__step {
  font-size: var(--text-sm);
  color: var(--gray-400);
}

/* ─── Layout ─────────────────────────────────────────── */
.wizard-main {
  min-height: calc(100vh - 60px);
  display: flex;
  justify-content: center;
  padding: var(--sp-8) var(--pad-x) var(--sp-16);
}

.wizard-container { width: 100%; max-width: 600px; }

/* ─── Progress dots ──────────────────────────────────── */
.wizard-progress {
  margin-bottom: var(--sp-6);
}

.wizard-progress__track {
  display: flex;
  align-items: center;
}

.step-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}

.step-dot__circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--gray-300);
  background: #fff;
  color: var(--gray-400);
  font-size: var(--text-sm);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-base);
  flex-shrink: 0;
}

.step-dot__label {
  font-size: var(--text-xs);
  color: var(--gray-400);
  white-space: nowrap;
  font-weight: 500;
  transition: color var(--t-base);
}

.step-dot.is-active .step-dot__circle { border-color: var(--co); background: var(--co); color: #fff; }
.step-dot.is-active .step-dot__label  { color: var(--co); font-weight: 700; }

.step-dot.is-done .step-dot__circle { border-color: var(--cve); background: var(--cve); color: #fff; }
.step-dot.is-done .step-dot__label  { color: var(--cve); }

.step-dot__line {
  flex: 1;
  height: 2px;
  background: var(--gray-200);
  margin: 0 var(--sp-2);
  margin-bottom: calc(var(--sp-2) + var(--text-xs));
  transition: background var(--t-base);
}

.step-dot__line.is-done { background: var(--cve); }

/* ─── Error banner ───────────────────────────────────── */
.wizard-error {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-sm);
  color: #991b1b;
  margin-bottom: var(--sp-4);
  display: none;
}

/* ─── Panel (cada paso) ──────────────────────────────── */
.wizard-panel {
  background: #fff;
  border-radius: var(--r-2xl);
  border: 1px solid var(--gray-200);
  padding: var(--sp-8);
  margin-bottom: var(--sp-5);
  animation: fadeUp 180ms ease;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.wizard-panel__icon  { font-size: 36px; margin-bottom: var(--sp-3); }

.wizard-panel__title {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--gray-900);
  margin-bottom: var(--sp-1);
}

.wizard-panel__sub {
  font-size: var(--text-base);
  color: var(--gray-500);
  margin-bottom: var(--sp-6);
}

/* ─── Payment chips ──────────────────────────────────── */
.payment-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.payment-chip {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-full);
  border: 1.5px solid var(--gray-200);
  background: #fff;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--gray-700);
  cursor: pointer;
  transition: all var(--t-fast);
}

.payment-chip:hover { border-color: var(--co); background: var(--col); color: var(--co); }

/* ─── Preview card (paso 4) ──────────────────────────── */
.preview-rifa {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  border: 2px solid var(--gray-200);
  border-radius: var(--r-xl);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-6);
  background: var(--gray-50);
}

.preview-rifa__icon {
  font-size: 2.5rem;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--col), var(--cgl));
  width: 60px;
  height: 60px;
  border-radius: var(--r-xl);
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-rifa__titulo {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--sp-1);
}

.preview-rifa__meta { font-size: var(--text-sm); color: var(--gray-500); }
.preview-rifa__sep  { margin: 0 var(--sp-2); color: var(--gray-300); }

/* ─── Botones de navegación ──────────────────────────── */
.wizard-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
}

/* ─── Inline link ────────────────────────────────────── */
.link-muted { color: var(--co); font-weight: 500; font-size: var(--text-sm); }
.link-muted:hover { text-decoration: underline; }

/* ─── Responsive ─────────────────────────────────────── */
@media (max-width: 768px) {
  .wizard-main { padding: var(--sp-4) 0 var(--sp-16); }
  .wizard-container { padding-inline: var(--pad-x); }
  .wizard-panel { padding: var(--sp-6) var(--sp-5); border-radius: var(--r-xl); }
  .step-dot__label { display: none; }
}