/* Estilo para el contenedor del stepper */

    .stepper-wrapper {
        overflow-x: auto; /* Permite scroll horizontal */
        -webkit-overflow-scrolling: touch; /* Mejora el scroll en dispositivos móviles */
        scrollbar-width: thin; /* Reduce el grosor de la barra de scroll */
        scrollbar-color: #ced4da transparent; /* Cambia el color de la barra de scroll */
    }

    .stepper-wrapper::-webkit-scrollbar {
        height: 8px;
    }

    .stepper-wrapper::-webkit-scrollbar-thumb {
        background-color: #ced4da;
        border-radius: 4px;
    }

    .stepper-wrapper::-webkit-scrollbar-track {
        background-color: transparent;
    }

    /* Estilo para los pasos */
    .stepper {
        display: flex;
        gap: 2rem; /* Espacio entre pasos */
        min-width: max-content; /* Asegura que el stepper no se rompa */
        padding: 1rem 0;
    }

    .step {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        flex-shrink: 0; /* Evita que los pasos se compriman */
    }

    .step .icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .step.active .icon {
        background-color: #0d6efd; /* Azul Bootstrap */
    }

    .step.completed .icon {
        background-color: #198754; /* Verde Bootstrap */
    }

    .step .label {
        font-size: 0.875rem;
        margin-top: 0.5rem;
        color: #495057;
    }

    .step.active .label {
        font-weight: bold;
        color: #0d6efd;
    }

    .step.completed .label {
        color: #198754;
    }