/* ══════════════════════════════════════════════════════════════
   REGISTRO — Asistente de 3 pasos
   Vista MÓVIL (mobile-first). La versión de escritorio se
   abordará más adelante.
   Depende de: base.css → components.css → wizard-registro.css
   ══════════════════════════════════════════════════════════════ */

.wizard {
    min-height: 100dvh;
    background: var(--relleno-general);
}

/* ── Barra superior con el stepper ─────────────────────────── */
.wizard__topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-10);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-blanco);
    border-bottom: var(--border-width-default) solid var(--contorno);
}

.wizard__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-10);
}

.wizard__step-name {
    font-size: var(--font-size-xsmall);
    font-weight: 700;
    color: var(--color-gris-texto);
}

.wizard__curso {
    flex-shrink: 0;
    padding: 3px 12px;
    font-size: var(--font-size-xsmall);
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--color-naranja);
    background: var(--color-naranja-suave);
    border-radius: var(--border-radius-xl);
    white-space: nowrap;
}

/* ── Cuerpo ─────────────────────────────────────────────────── */
.wizard__body {
    padding: var(--spacing-lg) var(--spacing-lg)
        calc(var(--spacing-xxl) + env(safe-area-inset-bottom));
}

.wizard__card {
    max-width: 480px;
    padding: var(--spacing-lg);
}

.wizard__brand {
    margin-bottom: var(--spacing-lg);
}

.wizard__brand .brand__logo {
    height: 34px;
}

/* ── Pasos ──────────────────────────────────────────────────── */
.wizard__step {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.wizard__step[hidden] {
    display: none;
}

.wizard__step+.wizard__step {
    margin-top: var(--spacing-lg);
}

/* Separador entre bloques de un mismo paso (p.ej. datos de contacto / hijos) */
.wizard__divider {
    height: 1px;
    background: var(--contorno);
    margin: var(--spacing-sm) 0;
}

/* ── Pestañas e hijos ───────────────────────────────────────── */
.wizard__child-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-10);
}

.wizard__add-child {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    font-size: var(--font-size-xsmall);
    font-weight: 700;
    color: var(--color-naranja);
    background: var(--color-naranja-suave);
    border: none;
    border-radius: var(--border-radius-xl);
    cursor: pointer;
    white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
    .wizard__add-child:hover {
        background: var(--color-naranja-claro);
    }
}

.wizard__add-child svg {
    width: 14px;
    height: 14px;
}

.child-panel {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.child-panel[hidden] {
    display: none;
}

/* ── Acciones del pie de cada paso ──────────────────────────── */
.wizard__actions {
    display: flex;
    gap: var(--spacing-10);
    margin-top: var(--spacing-sm);
}

.wizard__actions .btn {
    flex: 1;
}

/* ── Resumen final ──────────────────────────────────────────── */
.wizard__final {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-10);
    padding: var(--spacing-xl) var(--spacing-md);
}

.wizard__final[hidden] {
    display: none;
}

.wizard__final-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    color: var(--color-verde);
    background: var(--color-verde-claro);
    border-radius: 50%;
}

.wizard__final-icon svg {
    width: 32px;
    height: 32px;
}

.wizard__final-title {
    font-size: var(--font-size-h3);
    font-weight: 800;
    color: var(--iconos-oscuros);
}

.wizard__final-text {
    font-size: var(--font-size-small);
    color: var(--color-gris-texto);
    max-width: 32ch;
}