/* -------------------------------------------------------------------------
   Estilos propios. Solo lo que Bootstrap no cubre; el resto son utilidades.
   Se usan variables de Bootstrap para respetar el tema claro/oscuro.
   ------------------------------------------------------------------------- */

/* --- Trampa para bots -----------------------------------------------------
   Fuera de pantalla en lugar de display:none, porque algunos bots ignoran
   los campos ocultos con display. Es inalcanzable para el usuario real. */
.campo-trampa {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Indicador de pasos --------------------------------------------------- */
.stepper-lista {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: paso;
}

.stepper-item {
    position: relative;
    flex: 1 1 0;
    max-width: 14rem;
    text-align: center;
    color: var(--bs-secondary-color);
}

/* Linea que une los dos pasos */
.stepper-item + .stepper-item::before {
    content: "";
    position: absolute;
    top: 1.125rem;
    right: 50%;
    left: -50%;
    height: 2px;
    background-color: var(--bs-border-color);
    z-index: 0;
}

.stepper-item.is-activo + .stepper-item::before,
.stepper-item.is-completo + .stepper-item::before {
    background-color: var(--bs-primary);
}

.stepper-circulo {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 2px solid var(--bs-border-color);
    background-color: var(--bs-body-bg);
    font-weight: 600;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.stepper-item.is-activo .stepper-circulo,
.stepper-item.is-completo .stepper-circulo {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary);
    color: #fff;
}

.stepper-item.is-completo .stepper-circulo {
    font-size: 0;
}

.stepper-item.is-completo .stepper-circulo::after {
    content: "✓";
    font-size: 1.05rem;
}

.stepper-texto {
    display: block;
    margin-top: .5rem;
    font-size: .8125rem;
    line-height: 1.25;
}

.stepper-item.is-activo .stepper-texto {
    color: var(--bs-body-color);
    font-weight: 600;
}

/* Barra de progreso del stepper. Definida aca y no con style="" en el HTML
   porque la Content-Security-Policy no permite estilos en el marcado. */
.stepper-progreso {
    height: 6px;
}

#barraProgreso {
    width: 50%;
}

/* --- Transicion entre pasos ---------------------------------------------- */
.paso {
    animation: aparecer .25s ease;
}

@keyframes aparecer {
    from { opacity: 0; transform: translateY(.5rem); }
    to   { opacity: 1; transform: none; }
}

/* --- Panel de exito ------------------------------------------------------- */
.exito-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: var(--bs-success-bg-subtle);
    color: var(--bs-success);
    font-size: 2rem;
    line-height: 1;
}

/* --- Ajustes para pantallas chicas --------------------------------------- */
@media (max-width: 575.98px) {
    .stepper-texto {
        font-size: .75rem;
    }

    /* Botones a ancho completo y con buena area de toque. */
    .btn {
        --bs-btn-padding-y: .625rem;
    }
}

/* --- Accesibilidad -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .paso {
        animation: none;
    }

    .stepper-circulo {
        transition: none;
    }
}