@once
    @push('styles')
        <style>
            :root {
                --primary: #1f73ff;
                --completed: #0caa49;
                --text: #0f172a;
                --muted: #94a3b8;
                --line: #e5eef8;
                --circle: 28px;
                --gap: 12px;
            }

            .wizard {
                counter-reset: step;
                display: flex;
                align-items: flex-start;
                gap: 24px;
                padding: 8px 0;
                margin: 0;
                list-style: none;
                font: 14px/1 system-ui, sans-serif
            }

            .step {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 10px;
                flex: 1;
                min-width: 0;
                color: var(--muted);
                text-align: center;
            }

            /* Conectores: mitad izquierda y derecha del círculo */
            .step::before,
            .step::after {
                content: "";
                position: absolute;
                top: calc(var(--circle)/2);
                height: 2px;
                background: var(--line);
                transform: translateY(-50%);
            }

            .step::before {
                /* hacia la izquierda (menos el 1º) */
                left: 0;
                right: calc(50% + var(--circle)/2 + var(--line-gap));
                display: none;
            }

            .step::after {
                /* hacia la derecha (menos el último) */
                left: calc(50% + var(--circle)/2 + var(--line-gap));
                right: 0;
                display: none;
            }

            .step:not(:first-child)::before {
                display: block;
            }

            .step:not(:last-child)::after {
                display: block;
            }

            /* Círculo numerado */
            .dot {
                width: var(--circle);
                height: var(--circle);
                border-radius: 50%;
                background: #fff;
                border: 2px solid var(--line);
                color: var(--muted);
                display: grid;
                place-items: center;
                font-weight: 700;
                position: relative;
                z-index: 1;
            }

            .dot::before {
                counter-increment: step;
                content: counter(step);
                font-size: 12px;
            }

            /* Etiqueta debajo */
            .label {
                max-width: 100%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            /* Estados */
            .step.is-active {
                color: var(--text);
            }

            .step.is-active .dot {
                background: var(--primary);
                border-color: var(--primary);
                color: #fff;
                box-shadow: 0 0 0 3px rgba(31, 115, 255, .18);
            }

            /* Pinta conector de la derecha del paso completado */
            .step.is-complete .dot {
                background: var(--completed);
                border-color: var(--completed);
                color: #fff;
            }

            .step.is-complete::after {
                background: var(--primary);
            }
        </style>
    @endpush
@endonce
<div>
    @include('realEstates.developments.wizard.progress', ['currentStep' => $step, 'steps' => $steps])

    <x-card :title="$title">
        <x-slot:body>
            @include($steps[$step - 1]['view'])
        </x-slot:body>
    </x-card>


    <x-modal title="Create Branch" id="createBranchModal">
    </x-modal>


</div>
@script
    <script>
        Livewire.on('showModalToCreateBranch', () => {
            $('#createBranchModal').modal('show');
        });
    </script>
@endscript