/* ============================================================================
 *  components/stepper.css — indicador de progreso multi-paso.
 *
 *  BEM-light:
 *    .stepper                          block
 *    .stepper--horizontal              orientation
 *    .stepper--vertical                orientation
 *    .stepper--no-labels               toggle (solo markers)
 *    .stepper--no-numbers              toggle (sin números visibles)
 *    .stepper__list                    <ol> contenedor
 *    .stepper__step                    <li>
 *    .stepper__step--done              status: completado
 *    .stepper__step--active            status: en curso
 *    .stepper__step--pending           status: futuro
 *    .stepper__marker                  círculo del step
 *    .stepper__number                  número visible
 *    .stepper__icon                    icono FA (override del número)
 *    .stepper__body                    label + description
 *    .stepper__label                   texto principal
 *    .stepper__description             subtexto opcional
 *
 *  Customización: --stepper-progress (inline en <ol>) controla el fill bar
 *  horizontal. Sin JS, en CSS puro.
 * ========================================================================= */

.stepper {
    --stepper-marker-size:  28px;
    --stepper-line-color:   var(--unad-light);
    --stepper-line-fill:    var(--unad-primary);
    --stepper-progress:     0%;

    font-family: var(--font-body);
    color: var(--unad-h1);
    margin-bottom: var(--space-xl);
}

.stepper__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    position: relative;
}

.stepper__step {
    display: flex;
    align-items: center;
    flex: 1 1 0;
    position: relative;
    min-width: 0;
}

/* Paso oculto (server-side via prop `hidden`, o runtime). !important para
   anular el `display: flex` de arriba. */
.stepper__step[hidden] {
    display: none !important;
}

.stepper__marker {
    width: var(--stepper-marker-size);
    height: var(--stepper-marker-size);
    border-radius: 50%;
    background: var(--unad-white);
    border: 2px solid var(--stepper-line-color);
    color: var(--unad-footer);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-family: var(--font-headline);
    font-size: 0.8125rem;
    flex-shrink: 0;
    z-index: 1;
    transition: background-color var(--duration-base) var(--easing-default),
                border-color var(--duration-base) var(--easing-default),
                color var(--duration-base) var(--easing-default);
}

.stepper__icon {
    font-size: 0.95em;
    line-height: 1;
}

.stepper__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.stepper__label {
    font-weight: 600;
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--unad-h1);
    letter-spacing: 0.02em;
}

@media (max-width: 575px) {
    .stepper__label { font-size: 0.6875rem; }
}

.stepper__description {
    font-size: 0.6875rem;
    color: var(--unad-footer);
    margin-top: var(--space-xxs);
    line-height: 1.3;
}

/* ─── Status ────────────────────────────────────────────────────────── */
.stepper__step--done .stepper__marker {
    background: var(--unad-primary);
    border-color: var(--unad-primary);
    color: var(--unad-white);
}

.stepper__step--active .stepper__marker {
    background: var(--unad-white);
    border-color: var(--unad-primary);
    color: var(--unad-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--unad-primary) 25%, transparent);
}

.stepper__step--active .stepper__label {
    color: var(--unad-primary);
}

.stepper__step--pending .stepper__marker {
    background: var(--unad-white);
    border-color: var(--unad-light);
    color: var(--unad-footer);
}

.stepper__step--pending .stepper__label {
    color: var(--unad-footer);
}

/* ─── Horizontal: línea conectora con progress fill ─────────────────── */
.stepper--horizontal .stepper__list {
    align-items: flex-start;
    gap: 0;
}

.stepper--horizontal .stepper__step {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 var(--space-xs);
}

.stepper--horizontal .stepper__body {
    align-items: center;
    margin-top: var(--space-sm);
    max-width: 140px;
}

/* Línea base (gris) detrás de los markers */
.stepper--horizontal .stepper__list::before {
    content: '';
    position: absolute;
    top: calc(var(--stepper-marker-size, 36px) / 2 - 1px);
    left: calc(100% / var(--stepper-steps, 2) / 2);
    right: calc(100% / var(--stepper-steps, 2) / 2);
    height: 2px;
    background: var(--stepper-line-color);
    z-index: 0;
}

/* Línea de progreso (color brand) */
.stepper--horizontal .stepper__list::after {
    content: '';
    position: absolute;
    top: calc(var(--stepper-marker-size, 36px) / 2 - 1px);
    left: calc(100% / var(--stepper-steps, 2) / 2);
    width: calc((100% - 100% / var(--stepper-steps, 2)) * var(--stepper-progress, 0) / 100);
    height: 2px;
    background: var(--stepper-line-fill);
    z-index: 0;
    transition: width var(--duration-slow) var(--easing-default);
}

/* ─── Vertical ──────────────────────────────────────────────────────── */
.stepper--vertical .stepper__list {
    flex-direction: column;
    gap: var(--space-base);
}

.stepper--vertical .stepper__step {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-md);
}

.stepper--vertical .stepper__step::before {
    content: '';
    position: absolute;
    left: calc(var(--stepper-marker-size) / 2 - 1px);
    top: var(--stepper-marker-size);
    bottom: calc(-1 * var(--space-base));
    width: 2px;
    background: var(--stepper-line-color);
    z-index: 0;
}

.stepper--vertical .stepper__step:last-child::before {
    display: none;
}

.stepper--vertical .stepper__step--done::before {
    background: var(--stepper-line-fill);
}

.stepper--vertical .stepper__body {
    padding-top: calc(var(--space-xs));
}

/* ─── Mobile: horizontal → solo markers, labels solo en active ──────── */
@media (max-width: 575.98px) {
    /* El label del step active queda position:absolute fuera del box;
     * reservar margin-bottom extra para que el content del slot no se
     * solape con ese label flotante. */
    .stepper {
        margin-bottom: calc(var(--stepper-marker-size) + var(--space-xl));
    }
    .stepper--horizontal .stepper__body {
        display: none;
    }
    .stepper--horizontal .stepper__step--active .stepper__body {
        display: flex;
        position: absolute;
        top: calc(var(--stepper-marker-size) + var(--space-xs));
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
    }
}

.stepper--no-labels .stepper__body {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .stepper__marker,
    .stepper--horizontal .stepper__list::after {
        transition: none;
    }
}