.stepper-wrapper {
            width: 100%;
            max-width: 950px;
            margin: 0 auto;
            padding: 50px 20px;
        }

        .stepper {
            display: flex;
            justify-content: space-between;
            position: relative;
            z-index: 1;
        }

        /* Línea conectora de fondo general */
        .stepper::before {
            content: '';
            position: absolute;
            top: 24px;
            left: 8%;
            right: 8%;
            height: 4px;
            background-color: #cbd5e1;
            z-index: -1;
        }

        .step {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            flex: 1;
        }

        /* Estilo base del círculo */
        .step-circle {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 1.1rem;
            background-color: #ffffff;
            color: #64748b;
            border: 2px solid #cbd5e1;
            transition: all 0.3s ease;
            position: relative;
        }

        /* Estado: Completado */
        .step.completed .step-circle {
            background-color: #3b82f6;
            color: #ffffff;
            border-color: #3b82f6;
        }

        /* Estado: Etapa Actual */
        .step.current .step-circle {
            background-color: #1e3a8a;
            color: #ffffff;
            border-color: #1e3a8a;
            box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.2);
        }

        /* Badge de "Etapa actual" */
        .badge-current {
            position: absolute;
            top: -42px;
            background-color: #f97316;
            color: white;
            font-size: 0.75rem;
            font-weight: 600;
            padding: 4px 12px;
            border-radius: 50rem;
            white-space: nowrap;
            box-shadow: 0 2px 6px rgba(0,0,0,0.15);
        }

        .badge-current::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 50%;
            transform: translateX(-50%) rotate(45deg);
            width: 8px;
            height: 8px;
            background-color: #f97316;
        }

        /* Etiquetas de texto debajo de cada paso */
        .step-label {
            margin-top: 12px;
            font-size: 0.95rem;
            font-weight: 600;
            color: #1e293b;
            text-align: center;
            max-width: 130px;
        }

        .step.pending .step-label {
            color: #64748b;
        }

        /* --- Diseño Responsive para dispositivos móviles --- */
        @media (max-width: 768px) {
            .stepper {
                flex-direction: column;
                align-items: flex-start;
                padding-left: 20px;
            }
            .stepper::before {
                top: 10px;
                bottom: 10px;
                left: 43px;
                right: auto;
                width: 4px;
                height: 100%;
            }
            .step {
                flex-direction: row;
                align-items: center;
                margin-bottom: 28px;
                flex: unset;
            }
            .step-label {
                margin-top: 0;
                margin-left: 16px;
                text-align: left;
                max-width: 100%;
            }
            .badge-current {
                top: -30px;
                left: 0;
            }
        }