/* ─────────────────────────────────────────────────────────────────
 * Wizard vertical (side-by-side layout)
 *
 * Filament 5 no soporta wizard vertical de fábrica. Esta hoja convierte
 * cualquier wizard con la clase `.fi-wizard-vertical` a layout 2-cols:
 * header (lista de pasos) a la izquierda en columna, contenido a la derecha.
 *
 * En viewports <768px vuelve a apilarse vertical para móvil.
 * ──────────────────────────────────────────────────────────────── */

.fi-wizard-vertical.fi-sc-wizard {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 2rem;
    align-items: start;
}

/* Header (lista de pasos) — pasa a columna */
.fi-wizard-vertical .fi-sc-wizard-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.25rem;
    padding: 0 !important;
}

.fi-wizard-vertical .fi-sc-wizard-header-step {
    flex: 0 0 auto !important;
    width: 100%;
    padding: 0 !important;
}

/* El conector horizontal entre pasos no aplica en vertical */
.fi-wizard-vertical .fi-sc-wizard-header-step::after,
.fi-wizard-vertical .fi-sc-wizard-header-step::before {
    display: none !important;
}

/* Botón del paso ocupa todo el ancho, alineado a la izquierda */
.fi-wizard-vertical .fi-sc-wizard-header-step-btn {
    width: 100%;
    justify-content: flex-start !important;
    text-align: left;
    padding: 0.75rem !important;
    border-radius: 0.5rem;
    transition: background-color 0.15s ease;
}

.fi-wizard-vertical .fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-btn {
    background-color: rgb(var(--primary-50, 254 252 232) / 1);
}

.dark .fi-wizard-vertical .fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-btn {
    background-color: rgb(var(--primary-950, 66 32 6) / 0.5);
}

.fi-wizard-vertical .fi-sc-wizard-header-step-text {
    text-align: left;
}

/* En móvil, vuelve a apilarse vertical (header arriba, contenido abajo) */
@media (max-width: 768px) {
    .fi-wizard-vertical.fi-sc-wizard {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}