From a65e34b41c187d8989165e7c7ac44a3de479dd51 Mon Sep 17 00:00:00 2001
From: Guillermo Arrieta Medina <guillermo.arrieta@lasallistas.org.mx>
Date: Mon, 5 Jan 2026 13:24:48 -0600
Subject: [PATCH] =?UTF-8?q?Separaci=C3=B3n=20vista/l=C3=B3gica=20del=20wiz?=
 =?UTF-8?q?ard=20de=20creaci=C3=B3n=20de=20plan?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/planes/App.css                 |   42 -
 src/components/planes/exampleStepper.tsx      |  163 ---
 .../planes/wizard/PasoBasicosForm.tsx         |  181 +++
 .../planes/wizard/PasoDetallesPanel.tsx       |  322 +++++
 .../planes/wizard/PasoModoCardGroup.tsx       |  122 ++
 .../planes/wizard/PasoResumenCard.tsx         |   74 +
 .../planes/wizard/StepWithTooltip.tsx         |   41 +
 .../planes/wizard/WizardControls.tsx          |   47 +
 src/components/planes/wizard/WizardHeader.tsx |   78 ++
 src/components/stepper.tsx                    |   12 +-
 .../planes/new/NuevoPlanModalContainer.tsx    |  205 +++
 src/features/planes/new/catalogs.ts           |   56 +
 .../planes/new/hooks/useNuevoPlanWizard.ts    |  102 ++
 src/features/planes/new/types.ts              |   41 +
 src/routeTree.gen.ts                          |  224 ++-
 .../asignaturas/$asignaturaId/route.tsx       |    2 +-
 .../$planId}/asignaturas/_lista/nueva.tsx     |   12 +-
 .../$planId}/asignaturas/_lista/route.tsx     |    3 +-
 .../planes/$planId/{route.tsx => index.tsx}   |    2 +-
 src/routes/planes/_lista/nuevo.tsx            | 1203 +----------------
 src/routes/stepper.tsx                        |   65 -
 src/routes/stepper2.tsx                       |   82 --
 22 files changed, 1384 insertions(+), 1695 deletions(-)
 delete mode 100644 src/components/planes/App.css
 delete mode 100644 src/components/planes/exampleStepper.tsx
 create mode 100644 src/components/planes/wizard/PasoBasicosForm.tsx
 create mode 100644 src/components/planes/wizard/PasoDetallesPanel.tsx
 create mode 100644 src/components/planes/wizard/PasoModoCardGroup.tsx
 create mode 100644 src/components/planes/wizard/PasoResumenCard.tsx
 create mode 100644 src/components/planes/wizard/StepWithTooltip.tsx
 create mode 100644 src/components/planes/wizard/WizardControls.tsx
 create mode 100644 src/components/planes/wizard/WizardHeader.tsx
 create mode 100644 src/features/planes/new/NuevoPlanModalContainer.tsx
 create mode 100644 src/features/planes/new/catalogs.ts
 create mode 100644 src/features/planes/new/hooks/useNuevoPlanWizard.ts
 create mode 100644 src/features/planes/new/types.ts
 rename src/routes/{ => planes/$planId}/asignaturas/$asignaturaId/route.tsx (67%)
 rename src/routes/{ => planes/$planId}/asignaturas/_lista/nueva.tsx (99%)
 rename src/routes/{ => planes/$planId}/asignaturas/_lista/route.tsx (68%)
 rename src/routes/planes/$planId/{route.tsx => index.tsx} (77%)
 delete mode 100644 src/routes/stepper.tsx
 delete mode 100644 src/routes/stepper2.tsx

diff --git a/src/components/planes/App.css b/src/components/planes/App.css
deleted file mode 100644
index b9d355d..0000000
--- a/src/components/planes/App.css
+++ /dev/null
@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
diff --git a/src/components/planes/exampleStepper.tsx b/src/components/planes/exampleStepper.tsx
deleted file mode 100644
index 569fa81..0000000
--- a/src/components/planes/exampleStepper.tsx
+++ /dev/null
@@ -1,163 +0,0 @@
-import { defineStepper } from '@stepperize/react'
-import * as React from 'react'
-
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Separator } from '@/components/ui/separator'
-import { Textarea } from '@/components/ui/textarea'
-// import './App.css'
-
-const { useStepper, steps, utils } = defineStepper(
-  {
-    id: 'shipping',
-    title: 'Shipping',
-    description: 'Enter your shipping details',
-  },
-  {
-    id: 'payment',
-    title: 'Payment',
-    description: 'Enter your payment details',
-  },
-  { id: 'complete', title: 'Complete', description: 'Checkout complete' },
-)
-
-function App() {
-  const stepper = useStepper()
-
-  const currentIndex = utils.getIndex(stepper.current.id)
-  return (
-    <div className="w-[450px] space-y-6 rounded-lg border p-6">
-      <div className="flex justify-between">
-        <h2 className="text-lg font-medium">Checkout</h2>
-        <div className="flex items-center gap-2">
-          <span className="text-muted-foreground text-sm">
-            Step {currentIndex + 1} of {steps.length}
-          </span>
-          <div />
-        </div>
-      </div>
-      <nav aria-label="Checkout Steps" className="group my-4">
-        <ol
-          className="flex items-center justify-between gap-2"
-          aria-orientation="horizontal"
-        >
-          {stepper.all.map((step, index, array) => (
-            <React.Fragment key={step.id}>
-              <li className="flex flex-shrink-0 items-center gap-4">
-                <Button
-                  type="button"
-                  role="tab"
-                  variant={index <= currentIndex ? 'default' : 'secondary'}
-                  aria-current={
-                    stepper.current.id === step.id ? 'step' : undefined
-                  }
-                  aria-posinset={index + 1}
-                  aria-setsize={steps.length}
-                  aria-selected={stepper.current.id === step.id}
-                  className="flex size-10 items-center justify-center rounded-full"
-                  onClick={() => stepper.goTo(step.id)}
-                >
-                  {index + 1}
-                </Button>
-                <span className="text-sm font-medium">{step.title}</span>
-              </li>
-              {index < array.length - 1 && (
-                <Separator
-                  className={`flex-1 ${
-                    index < currentIndex ? 'bg-primary' : 'bg-muted'
-                  }`}
-                />
-              )}
-            </React.Fragment>
-          ))}
-        </ol>
-      </nav>
-      <div className="space-y-4">
-        {stepper.switch({
-          shipping: () => <ShippingComponent />,
-          payment: () => <PaymentComponent />,
-          complete: () => <CompleteComponent />,
-        })}
-        {!stepper.isLast ? (
-          <div className="flex justify-end gap-4">
-            <Button
-              variant="secondary"
-              onClick={stepper.prev}
-              disabled={stepper.isFirst}
-            >
-              Back
-            </Button>
-            <Button onClick={stepper.next}>
-              {stepper.isLast ? 'Complete' : 'Next'}
-            </Button>
-          </div>
-        ) : (
-          <Button onClick={stepper.reset}>Reset</Button>
-        )}
-      </div>
-    </div>
-  )
-}
-
-const ShippingComponent = () => {
-  return (
-    <div className="grid gap-4">
-      <div className="grid gap-2">
-        <label htmlFor="name" className="text-start text-sm font-medium">
-          Name
-        </label>
-        <Input id="name" placeholder="John Doe" className="w-full" />
-      </div>
-      <div className="grid gap-2">
-        <label htmlFor="address" className="text-start text-sm font-medium">
-          Address
-        </label>
-        <Textarea
-          id="address"
-          placeholder="123 Main St, Anytown USA"
-          className="w-full"
-        />
-      </div>
-    </div>
-  )
-}
-
-const PaymentComponent = () => {
-  return (
-    <div className="grid gap-4">
-      <div className="grid gap-2">
-        <label htmlFor="card-number" className="text-start text-sm font-medium">
-          Card Number
-        </label>
-        <Input
-          id="card-number"
-          placeholder="4111 1111 1111 1111"
-          className="w-full"
-        />
-      </div>
-      <div className="grid grid-cols-2 gap-4">
-        <div className="grid gap-2">
-          <label
-            htmlFor="expiry-date"
-            className="text-start text-sm font-medium"
-          >
-            Expiry Date
-          </label>
-          <Input id="expiry-date" placeholder="MM/YY" className="w-full" />
-        </div>
-        <div className="grid gap-2">
-          <label htmlFor="cvc" className="text-start text-sm font-medium">
-            CVC
-          </label>
-          <Input id="cvc" placeholder="123" className="w-full" />
-        </div>
-      </div>
-    </div>
-  )
-}
-
-const CompleteComponent = () => {
-  return <h3 className="py-4 text-lg font-medium">Stepper complete 🔥</h3>
-}
-
-export default App
diff --git a/src/components/planes/wizard/PasoBasicosForm.tsx b/src/components/planes/wizard/PasoBasicosForm.tsx
new file mode 100644
index 0000000..e7f16c1
--- /dev/null
+++ b/src/components/planes/wizard/PasoBasicosForm.tsx
@@ -0,0 +1,181 @@
+import type { CARRERAS } from '@/features/planes/new/catalogs'
+import type { NewPlanWizardState } from '@/features/planes/new/types'
+
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import {
+  FACULTADES,
+  NIVELES,
+  TIPOS_CICLO,
+} from '@/features/planes/new/catalogs'
+
+export function PasoBasicosForm({
+  wizard,
+  onChange,
+  carrerasFiltradas,
+}: {
+  wizard: NewPlanWizardState
+  onChange: React.Dispatch<React.SetStateAction<NewPlanWizardState>>
+  carrerasFiltradas: typeof CARRERAS
+}) {
+  return (
+    <div className="grid gap-4 sm:grid-cols-2">
+      <div className="grid gap-1 sm:col-span-2">
+        <Label htmlFor="nombrePlan">Nombre del plan</Label>
+        <Input
+          id="nombrePlan"
+          placeholder="Ej. Ingeniería en Sistemas 2026"
+          value={wizard.datosBasicos.nombrePlan}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            onChange((w) => ({
+              ...w,
+              datosBasicos: { ...w.datosBasicos, nombrePlan: e.target.value },
+            }))
+          }
+        />
+      </div>
+
+      <div className="grid gap-1">
+        <Label htmlFor="facultad">Facultad</Label>
+        <Select
+          value={wizard.datosBasicos.facultadId}
+          onValueChange={(value) =>
+            onChange((w) => ({
+              ...w,
+              datosBasicos: {
+                ...w.datosBasicos,
+                facultadId: value,
+                carreraId: '',
+              },
+            }))
+          }
+        >
+          <SelectTrigger
+            id="facultad"
+            className="w-full min-w-0 [&>span]:block! [&>span]:truncate!"
+          >
+            <SelectValue placeholder="Selecciona facultad…" />
+          </SelectTrigger>
+          <SelectContent>
+            {FACULTADES.map((f) => (
+              <SelectItem key={f.id} value={f.id}>
+                {f.nombre}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="grid gap-1">
+        <Label htmlFor="carrera">Carrera</Label>
+        <Select
+          value={wizard.datosBasicos.carreraId}
+          onValueChange={(value) =>
+            onChange((w) => ({
+              ...w,
+              datosBasicos: { ...w.datosBasicos, carreraId: value },
+            }))
+          }
+          disabled={!wizard.datosBasicos.facultadId}
+        >
+          <SelectTrigger
+            id="carrera"
+            className="w-full min-w-0 [&>span]:block! [&>span]:truncate!"
+          >
+            <SelectValue placeholder="Selecciona carrera…" />
+          </SelectTrigger>
+          <SelectContent>
+            {carrerasFiltradas.map((c) => (
+              <SelectItem key={c.id} value={c.id}>
+                {c.nombre}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="grid gap-1">
+        <Label htmlFor="nivel">Nivel</Label>
+        <Select
+          value={wizard.datosBasicos.nivel}
+          onValueChange={(value) =>
+            onChange((w) => ({
+              ...w,
+              datosBasicos: { ...w.datosBasicos, nivel: value },
+            }))
+          }
+        >
+          <SelectTrigger
+            id="nivel"
+            className="w-full min-w-0 [&>span]:block! [&>span]:truncate!"
+          >
+            <SelectValue placeholder="Selecciona nivel…" />
+          </SelectTrigger>
+          <SelectContent>
+            {NIVELES.map((n) => (
+              <SelectItem key={n} value={n}>
+                {n}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="grid gap-1">
+        <Label htmlFor="tipoCiclo">Tipo de ciclo</Label>
+        <Select
+          value={wizard.datosBasicos.tipoCiclo}
+          onValueChange={(value) =>
+            onChange((w) => ({
+              ...w,
+              datosBasicos: {
+                ...w.datosBasicos,
+                tipoCiclo: value as any,
+              },
+            }))
+          }
+        >
+          <SelectTrigger
+            id="tipoCiclo"
+            className="w-full min-w-0 [&>span]:block! [&>span]:truncate!"
+          >
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {TIPOS_CICLO.map((t) => (
+              <SelectItem key={t.value} value={t.value}>
+                {t.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="grid gap-1">
+        <Label htmlFor="numCiclos">Número de ciclos</Label>
+        <Input
+          id="numCiclos"
+          type="number"
+          min={1}
+          value={wizard.datosBasicos.numCiclos}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            onChange((w) => ({
+              ...w,
+              datosBasicos: {
+                ...w.datosBasicos,
+                numCiclos: Number(e.target.value || 1),
+              },
+            }))
+          }
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/planes/wizard/PasoDetallesPanel.tsx b/src/components/planes/wizard/PasoDetallesPanel.tsx
new file mode 100644
index 0000000..7f67a5d
--- /dev/null
+++ b/src/components/planes/wizard/PasoDetallesPanel.tsx
@@ -0,0 +1,322 @@
+import type { NewPlanWizardState } from '@/features/planes/new/types'
+
+import { Button } from '@/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import {
+  CARRERAS,
+  FACULTADES,
+  PLANES_EXISTENTES,
+} from '@/features/planes/new/catalogs'
+
+export function PasoDetallesPanel({
+  wizard,
+  onChange,
+  onGenerarIA,
+  isLoading,
+}: {
+  wizard: NewPlanWizardState
+  onChange: React.Dispatch<React.SetStateAction<NewPlanWizardState>>
+  onGenerarIA: () => void
+  isLoading: boolean
+}) {
+  if (wizard.modoCreacion === 'MANUAL') {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Creación manual</CardTitle>
+          <CardDescription>
+            Se creará un plan en blanco con estructura mínima.
+          </CardDescription>
+        </CardHeader>
+      </Card>
+    )
+  }
+
+  if (wizard.modoCreacion === 'IA') {
+    return (
+      <div className="grid gap-4">
+        <div>
+          <Label htmlFor="desc">Descripción del enfoque</Label>
+          <textarea
+            id="desc"
+            className="bg-background text-foreground ring-offset-background focus-visible:ring-ring min-h-24 w-full rounded-md border px-3 py-2 text-sm shadow-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
+            placeholder="Describe el enfoque del programa…"
+            value={wizard.iaConfig?.descripcionEnfoque || ''}
+            onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+              onChange((w) => ({
+                ...w,
+                iaConfig: {
+                  ...(w.iaConfig || ({} as any)),
+                  descripcionEnfoque: e.target.value,
+                },
+              }))
+            }
+          />
+        </div>
+        <div>
+          <Label htmlFor="poblacion">Población objetivo</Label>
+          <Input
+            id="poblacion"
+            placeholder="Ej. Egresados de bachillerato con perfil STEM"
+            value={wizard.iaConfig?.poblacionObjetivo || ''}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              onChange((w) => ({
+                ...w,
+                iaConfig: {
+                  ...(w.iaConfig || ({} as any)),
+                  poblacionObjetivo: e.target.value,
+                },
+              }))
+            }
+          />
+        </div>
+        <div>
+          <Label htmlFor="notas">Notas adicionales</Label>
+          <textarea
+            id="notas"
+            className="bg-background text-foreground ring-offset-background focus-visible:ring-ring min-h-24 w-full rounded-md border px-3 py-2 text-sm shadow-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
+            placeholder="Lineamientos institucionales, restricciones, etc."
+            value={wizard.iaConfig?.notasAdicionales || ''}
+            onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+              onChange((w) => ({
+                ...w,
+                iaConfig: {
+                  ...(w.iaConfig || ({} as any)),
+                  notasAdicionales: e.target.value,
+                },
+              }))
+            }
+          />
+        </div>
+        <div className="flex items-center justify-between">
+          <div className="text-muted-foreground text-sm">
+            Opcional: se pueden adjuntar recursos IA más adelante.
+          </div>
+          <Button onClick={onGenerarIA} disabled={isLoading}>
+            {isLoading ? 'Generando…' : 'Generar borrador con IA'}
+          </Button>
+        </div>
+
+        {wizard.resumen.previewPlan && (
+          <Card>
+            <CardHeader>
+              <CardTitle>Preview IA</CardTitle>
+              <CardDescription>
+                Materias aprox.: {wizard.resumen.previewPlan.numMateriasAprox}
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <ul className="text-muted-foreground list-disc pl-5 text-sm">
+                {wizard.resumen.previewPlan.secciones?.map((s) => (
+                  <li key={s.id}>
+                    <span className="text-foreground font-medium">
+                      {s.titulo}:
+                    </span>{' '}
+                    {s.resumen}
+                  </li>
+                ))}
+              </ul>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    )
+  }
+
+  if (
+    wizard.modoCreacion === 'CLONADO' &&
+    wizard.subModoClonado === 'INTERNO'
+  ) {
+    return (
+      <div className="grid gap-4">
+        <div className="grid gap-3 sm:grid-cols-3">
+          <div>
+            <Label htmlFor="clonFacultad">Facultad</Label>
+            <select
+              id="clonFacultad"
+              className="bg-background text-foreground ring-offset-background focus-visible:ring-ring h-10 w-full rounded-md border px-3 text-sm shadow-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
+              value={wizard.datosBasicos.facultadId}
+              onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
+                onChange((w) => ({
+                  ...w,
+                  datosBasicos: {
+                    ...w.datosBasicos,
+                    facultadId: e.target.value,
+                  },
+                }))
+              }
+            >
+              <option value="">Todas</option>
+              {FACULTADES.map((f) => (
+                <option key={f.id} value={f.id}>
+                  {f.nombre}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <Label htmlFor="clonCarrera">Carrera</Label>
+            <select
+              id="clonCarrera"
+              className="bg-background text-foreground ring-offset-background focus-visible:ring-ring h-10 w-full rounded-md border px-3 text-sm shadow-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
+              value={wizard.datosBasicos.carreraId}
+              onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
+                onChange((w) => ({
+                  ...w,
+                  datosBasicos: {
+                    ...w.datosBasicos,
+                    carreraId: e.target.value,
+                  },
+                }))
+              }
+            >
+              <option value="">Todas</option>
+              {CARRERAS.map((c) => (
+                <option key={c.id} value={c.id}>
+                  {c.nombre}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <Label htmlFor="buscarPlan">Buscar</Label>
+            <Input
+              id="buscarPlan"
+              placeholder="Nombre del plan…"
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                const term = e.target.value.toLowerCase()
+                void term
+              }}
+            />
+          </div>
+        </div>
+
+        <div className="grid gap-3">
+          {PLANES_EXISTENTES.filter(
+            (p) =>
+              (!wizard.datosBasicos.facultadId ||
+                p.facultadId === wizard.datosBasicos.facultadId) &&
+              (!wizard.datosBasicos.carreraId ||
+                p.carreraId === wizard.datosBasicos.carreraId),
+          ).map((p) => (
+            <Card
+              key={p.id}
+              className={
+                p.id === wizard.clonInterno?.planOrigenId
+                  ? 'ring-ring ring-2'
+                  : ''
+              }
+              onClick={() =>
+                onChange((w) => ({ ...w, clonInterno: { planOrigenId: p.id } }))
+              }
+              role="button"
+              tabIndex={0}
+            >
+              <CardHeader>
+                <CardTitle className="flex items-center justify-between">
+                  <span>{p.nombre}</span>
+                  <span className="text-muted-foreground text-sm">
+                    {p.estado} · {p.anio}
+                  </span>
+                </CardTitle>
+                <CardDescription>ID: {p.id}</CardDescription>
+              </CardHeader>
+            </Card>
+          ))}
+        </div>
+      </div>
+    )
+  }
+
+  if (
+    wizard.modoCreacion === 'CLONADO' &&
+    wizard.subModoClonado === 'TRADICIONAL'
+  ) {
+    return (
+      <div className="grid gap-4">
+        <div>
+          <Label htmlFor="word">Word del plan (obligatorio)</Label>
+          <input
+            id="word"
+            type="file"
+            accept=".doc,.docx"
+            className="bg-background text-foreground ring-offset-background focus-visible:ring-ring file:bg-secondary block w-full rounded-md border px-3 py-2 text-sm shadow-sm file:mr-4 file:rounded-md file:border-0 file:px-3 file:py-1.5 file:text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              onChange((w) => ({
+                ...w,
+                clonTradicional: {
+                  ...(w.clonTradicional || ({} as any)),
+                  archivoWordPlanId: e.target.files?.[0]
+                    ? `file_${e.target.files[0].name}`
+                    : null,
+                },
+              }))
+            }
+          />
+        </div>
+        <div>
+          <Label htmlFor="mapa">Excel del mapa curricular</Label>
+          <input
+            id="mapa"
+            type="file"
+            accept=".xls,.xlsx"
+            className="bg-background text-foreground ring-offset-background focus-visible:ring-ring file:bg-secondary block w-full rounded-md border px-3 py-2 text-sm shadow-sm file:mr-4 file:rounded-md file:border-0 file:px-3 file:py-1.5 file:text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              onChange((w) => ({
+                ...w,
+                clonTradicional: {
+                  ...(w.clonTradicional || ({} as any)),
+                  archivoMapaExcelId: e.target.files?.[0]
+                    ? `file_${e.target.files[0].name}`
+                    : null,
+                },
+              }))
+            }
+          />
+        </div>
+        <div>
+          <Label htmlFor="materias">Excel/listado de materias</Label>
+          <input
+            id="materias"
+            type="file"
+            accept=".xls,.xlsx,.csv"
+            className="bg-background text-foreground ring-offset-background focus-visible:ring-ring file:bg-secondary block w-full rounded-md border px-3 py-2 text-sm shadow-sm file:mr-4 file:rounded-md file:border-0 file:px-3 file:py-1.5 file:text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              onChange((w) => ({
+                ...w,
+                clonTradicional: {
+                  ...(w.clonTradicional || ({} as any)),
+                  archivoMateriasExcelId: e.target.files?.[0]
+                    ? `file_${e.target.files[0].name}`
+                    : null,
+                },
+              }))
+            }
+          />
+        </div>
+        <div className="text-muted-foreground text-sm">
+          Sube al menos Word y uno de los Excel para continuar.
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Selecciona un modo</CardTitle>
+        <CardDescription>
+          Elige una opción en el paso anterior para continuar.
+        </CardDescription>
+      </CardHeader>
+    </Card>
+  )
+}
diff --git a/src/components/planes/wizard/PasoModoCardGroup.tsx b/src/components/planes/wizard/PasoModoCardGroup.tsx
new file mode 100644
index 0000000..f3eb4c3
--- /dev/null
+++ b/src/components/planes/wizard/PasoModoCardGroup.tsx
@@ -0,0 +1,122 @@
+import * as Icons from 'lucide-react'
+
+import type {
+  NewPlanWizardState,
+  ModoCreacion,
+  SubModoClonado,
+} from '@/features/planes/new/types'
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+
+export function PasoModoCardGroup({
+  wizard,
+  onChange,
+}: {
+  wizard: NewPlanWizardState
+  onChange: React.Dispatch<React.SetStateAction<NewPlanWizardState>>
+}) {
+  const isSelected = (m: ModoCreacion) => wizard.modoCreacion === m
+  const isSubSelected = (s: SubModoClonado) => wizard.subModoClonado === s
+  return (
+    <div className="grid gap-4 sm:grid-cols-3">
+      <Card
+        className={isSelected('MANUAL') ? 'ring-ring ring-2' : ''}
+        onClick={() =>
+          onChange((w) => ({
+            ...w,
+            modoCreacion: 'MANUAL',
+            subModoClonado: undefined,
+          }))
+        }
+        role="button"
+        tabIndex={0}
+      >
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Icons.Pencil className="text-primary h-5 w-5" /> Manual
+          </CardTitle>
+          <CardDescription>Plan vacío con estructura mínima.</CardDescription>
+        </CardHeader>
+      </Card>
+
+      <Card
+        className={isSelected('IA') ? 'ring-ring ring-2' : ''}
+        onClick={() =>
+          onChange((w) => ({
+            ...w,
+            modoCreacion: 'IA',
+            subModoClonado: undefined,
+          }))
+        }
+        role="button"
+        tabIndex={0}
+      >
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Icons.Sparkles className="text-primary h-5 w-5" /> Con IA
+          </CardTitle>
+          <CardDescription>
+            Borrador completo a partir de datos base.
+          </CardDescription>
+        </CardHeader>
+      </Card>
+
+      <Card
+        className={isSelected('CLONADO') ? 'ring-ring ring-2' : ''}
+        onClick={() => onChange((w) => ({ ...w, modoCreacion: 'CLONADO' }))}
+        role="button"
+        tabIndex={0}
+      >
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Icons.Copy className="text-primary h-5 w-5" /> Clonado
+          </CardTitle>
+          <CardDescription>Desde un plan existente o archivos.</CardDescription>
+        </CardHeader>
+        {wizard.modoCreacion === 'CLONADO' && (
+          <CardContent className="flex flex-col gap-3">
+            <div
+              role="button"
+              tabIndex={0}
+              onClick={(e) => {
+                e.stopPropagation()
+                onChange((w) => ({ ...w, subModoClonado: 'INTERNO' }))
+              }}
+              className={`hover:border-primary/50 hover:bg-accent flex cursor-pointer flex-row items-center justify-center gap-2 rounded-lg border p-4 text-center transition-all sm:flex-col ${
+                isSubSelected('INTERNO')
+                  ? 'border-primary bg-primary/5 ring-primary text-primary ring-1'
+                  : 'border-border text-muted-foreground'
+              } `}
+            >
+              <Icons.Database className="mb-1 h-6 w-6" />
+              <span className="text-sm font-medium">Del sistema</span>
+            </div>
+
+            <div
+              role="button"
+              tabIndex={0}
+              onClick={(e) => {
+                e.stopPropagation()
+                onChange((w) => ({ ...w, subModoClonado: 'TRADICIONAL' }))
+              }}
+              className={`hover:border-primary/50 hover:bg-accent flex cursor-pointer flex-row items-center justify-center gap-2 rounded-lg border p-4 text-center transition-all sm:flex-col ${
+                isSubSelected('TRADICIONAL')
+                  ? 'border-primary bg-primary/5 ring-primary text-primary ring-1'
+                  : 'border-border text-muted-foreground'
+              } `}
+            >
+              <Icons.Upload className="mb-1 h-6 w-6" />
+              <span className="text-sm font-medium">Desde archivos</span>
+            </div>
+          </CardContent>
+        )}
+      </Card>
+    </div>
+  )
+}
diff --git a/src/components/planes/wizard/PasoResumenCard.tsx b/src/components/planes/wizard/PasoResumenCard.tsx
new file mode 100644
index 0000000..b1ccdbf
--- /dev/null
+++ b/src/components/planes/wizard/PasoResumenCard.tsx
@@ -0,0 +1,74 @@
+import type { NewPlanWizardState } from '@/features/planes/new/types'
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+
+export function PasoResumenCard({ wizard }: { wizard: NewPlanWizardState }) {
+  const modo = wizard.modoCreacion
+  const sub = wizard.subModoClonado
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Resumen</CardTitle>
+        <CardDescription>
+          Verifica la información antes de crear.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="grid gap-2 text-sm">
+          <div>
+            <span className="text-muted-foreground">Nombre: </span>
+            <span className="font-medium">
+              {wizard.datosBasicos.nombrePlan || '—'}
+            </span>
+          </div>
+          <div>
+            <span className="text-muted-foreground">Facultad/Carrera: </span>
+            <span className="font-medium">
+              {wizard.datosBasicos.facultadId || '—'} /{' '}
+              {wizard.datosBasicos.carreraId || '—'}
+            </span>
+          </div>
+          <div>
+            <span className="text-muted-foreground">Nivel: </span>
+            <span className="font-medium">
+              {wizard.datosBasicos.nivel || '—'}
+            </span>
+          </div>
+          <div>
+            <span className="text-muted-foreground">Ciclos: </span>
+            <span className="font-medium">
+              {wizard.datosBasicos.numCiclos} ({wizard.datosBasicos.tipoCiclo})
+            </span>
+          </div>
+          <div className="mt-2">
+            <span className="text-muted-foreground">Modo: </span>
+            <span className="font-medium">
+              {modo === 'MANUAL' && 'Manual'}
+              {modo === 'IA' && 'Generado con IA'}
+              {modo === 'CLONADO' &&
+                sub === 'INTERNO' &&
+                'Clonado desde plan del sistema'}
+              {modo === 'CLONADO' &&
+                sub === 'TRADICIONAL' &&
+                'Importado desde documentos tradicionales'}
+            </span>
+          </div>
+          {wizard.resumen.previewPlan && (
+            <div className="bg-muted mt-2 rounded-md p-3">
+              <div className="font-medium">Preview IA</div>
+              <div className="text-muted-foreground">
+                Materias aprox.: {wizard.resumen.previewPlan.numMateriasAprox}
+              </div>
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/src/components/planes/wizard/StepWithTooltip.tsx b/src/components/planes/wizard/StepWithTooltip.tsx
new file mode 100644
index 0000000..b45ace7
--- /dev/null
+++ b/src/components/planes/wizard/StepWithTooltip.tsx
@@ -0,0 +1,41 @@
+import { useState } from 'react'
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
+
+export function StepWithTooltip({
+  title,
+  desc,
+}: {
+  title: string
+  desc: string
+}) {
+  const [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <TooltipProvider delayDuration={0}>
+      <Tooltip open={isOpen} onOpenChange={setIsOpen}>
+        <TooltipTrigger asChild>
+          <span
+            className="cursor-help decoration-dotted underline-offset-4 hover:underline"
+            onClick={(e) => {
+              e.stopPropagation()
+              setIsOpen((prev) => !prev)
+            }}
+            onMouseEnter={() => setIsOpen(true)}
+            onMouseLeave={() => setIsOpen(false)}
+          >
+            {title}
+          </span>
+        </TooltipTrigger>
+        <TooltipContent className="max-w-[200px] text-xs">
+          <p>{desc}</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  )
+}
diff --git a/src/components/planes/wizard/WizardControls.tsx b/src/components/planes/wizard/WizardControls.tsx
new file mode 100644
index 0000000..70ea27f
--- /dev/null
+++ b/src/components/planes/wizard/WizardControls.tsx
@@ -0,0 +1,47 @@
+import { Button } from '@/components/ui/button'
+
+export function WizardControls({
+  errorMessage,
+  onPrev,
+  onNext,
+  onCreate,
+  disablePrev,
+  disableNext,
+  disableCreate,
+  isLastStep,
+}: {
+  errorMessage?: string | null
+  onPrev: () => void
+  onNext: () => void
+  onCreate: () => void
+  disablePrev: boolean
+  disableNext: boolean
+  disableCreate: boolean
+  isLastStep: boolean
+}) {
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex-1">
+        {errorMessage && (
+          <span className="text-destructive text-sm font-medium">
+            {errorMessage}
+          </span>
+        )}
+      </div>
+      <div className="flex gap-4">
+        <Button variant="secondary" onClick={onPrev} disabled={disablePrev}>
+          Anterior
+        </Button>
+        {isLastStep ? (
+          <Button onClick={onCreate} disabled={disableCreate}>
+            Crear plan
+          </Button>
+        ) : (
+          <Button onClick={onNext} disabled={disableNext}>
+            Siguiente
+          </Button>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/planes/wizard/WizardHeader.tsx b/src/components/planes/wizard/WizardHeader.tsx
new file mode 100644
index 0000000..4021e25
--- /dev/null
+++ b/src/components/planes/wizard/WizardHeader.tsx
@@ -0,0 +1,78 @@
+import * as Icons from 'lucide-react'
+
+import { StepWithTooltip } from './StepWithTooltip'
+
+import { CircularProgress } from '@/components/CircularProgress'
+import { DialogHeader, DialogTitle } from '@/components/ui/dialog'
+
+export function WizardHeader({
+  currentIndex,
+  totalSteps,
+  currentTitle,
+  currentDescription,
+  nextTitle,
+  onClose,
+  Wizard,
+}: {
+  currentIndex: number
+  totalSteps: number
+  currentTitle: string
+  currentDescription: string
+  nextTitle?: string
+  onClose: () => void
+  Wizard: any
+}) {
+  return (
+    <div className="z-10 flex-none border-b bg-white">
+      <div className="flex items-center justify-between p-6 pb-4">
+        <DialogHeader className="p-0">
+          <DialogTitle>Nuevo plan de estudios</DialogTitle>
+        </DialogHeader>
+        <button
+          onClick={onClose}
+          className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none"
+        >
+          <Icons.X className="h-4 w-4" />
+          <span className="sr-only">Cerrar</span>
+        </button>
+      </div>
+      <div className="px-6 pb-6">
+        <div className="block sm:hidden">
+          <div className="flex items-center gap-5">
+            <CircularProgress current={currentIndex} total={totalSteps} />
+            <div className="flex flex-col justify-center">
+              <h2 className="text-lg font-bold text-slate-900">
+                <StepWithTooltip
+                  title={currentTitle}
+                  desc={currentDescription}
+                />
+              </h2>
+              {nextTitle ? (
+                <p className="text-sm text-slate-400">Siguiente: {nextTitle}</p>
+              ) : (
+                <p className="text-sm font-medium text-green-500">
+                  ¡Último paso!
+                </p>
+              )}
+            </div>
+          </div>
+        </div>
+        <div className="hidden sm:block">
+          <Wizard.Stepper.Navigation className="border-border/60 rounded-xl border bg-slate-50 p-2">
+            {Wizard.steps.map((step: any) => (
+              <Wizard.Stepper.Step
+                key={step.id}
+                of={step.id}
+                className="whitespace-nowrap"
+              >
+                <Wizard.Stepper.Title>
+                  <StepWithTooltip title={step.title} desc={step.description} />
+                </Wizard.Stepper.Title>
+              </Wizard.Stepper.Step>
+            ))}
+          </Wizard.Stepper.Navigation>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/stepper.tsx b/src/components/stepper.tsx
index 93c3750..1844f6c 100644
--- a/src/components/stepper.tsx
+++ b/src/components/stepper.tsx
@@ -57,15 +57,17 @@ const defineStepper = <const Steps extends Array<Stepperize.Step>>(
         className,
         ...props
       }) => {
+        // Avoid leaking non-DOM props like `initialStep` onto the div
+        const { initialStep, initialMetadata, ...restProps } = props as {
+          initialStep?: any
+          initialMetadata?: any
+        } & Record<string, unknown>
         return (
           <StepperContext.Provider
             value={{ variant, labelOrientation, tracking }}
           >
-            <Scoped
-              initialStep={props.initialStep}
-              initialMetadata={props.initialMetadata}
-            >
-              <StepperContainer className={className} {...props}>
+            <Scoped initialStep={initialStep} initialMetadata={initialMetadata}>
+              <StepperContainer className={className} {...(restProps as any)}>
                 {children}
               </StepperContainer>
             </Scoped>
diff --git a/src/features/planes/new/NuevoPlanModalContainer.tsx b/src/features/planes/new/NuevoPlanModalContainer.tsx
new file mode 100644
index 0000000..8f985da
--- /dev/null
+++ b/src/features/planes/new/NuevoPlanModalContainer.tsx
@@ -0,0 +1,205 @@
+import { useNavigate } from '@tanstack/react-router'
+import * as Icons from 'lucide-react'
+
+import { useNuevoPlanWizard } from './hooks/useNuevoPlanWizard'
+
+import { PasoBasicosForm } from '@/components/planes/wizard/PasoBasicosForm'
+import { PasoDetallesPanel } from '@/components/planes/wizard/PasoDetallesPanel'
+import { PasoModoCardGroup } from '@/components/planes/wizard/PasoModoCardGroup'
+import { PasoResumenCard } from '@/components/planes/wizard/PasoResumenCard'
+import { WizardControls } from '@/components/planes/wizard/WizardControls'
+import { WizardHeader } from '@/components/planes/wizard/WizardHeader'
+import { defineStepper } from '@/components/stepper'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+
+// Mock de permisos/rol
+const auth_get_current_user_role = () => 'JEFE_CARRERA' as const
+
+const Wizard = defineStepper(
+  {
+    id: 'modo',
+    title: 'Método',
+    description: 'Selecciona cómo crearás el plan',
+  },
+  {
+    id: 'basicos',
+    title: 'Datos básicos',
+    description: 'Nombre, carrera, nivel y ciclos',
+  },
+  { id: 'detalles', title: 'Detalles', description: 'IA, clonado o archivos' },
+  { id: 'resumen', title: 'Resumen', description: 'Confirma y crea el plan' },
+)
+
+export default function NuevoPlanModalContainer() {
+  const navigate = useNavigate()
+  const role = auth_get_current_user_role()
+
+  const {
+    wizard,
+    setWizard,
+    carrerasFiltradas,
+    canContinueDesdeModo,
+    canContinueDesdeBasicos,
+    canContinueDesdeDetalles,
+    generarPreviewIA,
+  } = useNuevoPlanWizard()
+
+  const handleClose = () => {
+    navigate({ to: '/planes', resetScroll: false })
+  }
+
+  const crearPlan = async () => {
+    setWizard((w) => ({ ...w, isLoading: true, errorMessage: null }))
+    await new Promise((r) => setTimeout(r, 900))
+    const nuevoId = (() => {
+      if (wizard.modoCreacion === 'MANUAL') return 'plan_new_manual_001'
+      if (wizard.modoCreacion === 'IA') return 'plan_new_ai_001'
+      if (wizard.subModoClonado === 'INTERNO') return 'plan_new_clone_001'
+      return 'plan_new_import_001'
+    })()
+    navigate({ to: `/planes/${nuevoId}` })
+  }
+
+  return (
+    <Dialog open={true} onOpenChange={(open) => !open && handleClose()}>
+      <DialogContent
+        className="flex h-[90vh] w-[calc(100%-2rem)] flex-col gap-0 overflow-hidden p-0 sm:max-w-4xl"
+        onInteractOutside={(e) => {
+          e.preventDefault()
+        }}
+      >
+        {role !== 'JEFE_CARRERA' ? (
+          <>
+            <DialogHeader className="flex-none border-b p-6">
+              <DialogTitle>Nuevo plan de estudios</DialogTitle>
+            </DialogHeader>
+            <div className="flex-1 p-6">
+              <Card className="border-destructive/40">
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2">
+                    <Icons.ShieldAlert className="text-destructive h-5 w-5" />
+                    Sin permisos
+                  </CardTitle>
+                  <CardDescription>
+                    No tienes permisos para crear planes de estudio.
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="flex justify-end">
+                  <button
+                    className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground rounded-md border px-3 py-2 text-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none"
+                    onClick={handleClose}
+                  >
+                    Volver
+                  </button>
+                </CardContent>
+              </Card>
+            </div>
+          </>
+        ) : (
+          <Wizard.Stepper.Provider
+            initialStep={Wizard.utils.getFirst().id}
+            className="flex h-full flex-col"
+          >
+            {({ methods }) => {
+              const currentIndex = Wizard.utils.getIndex(methods.current.id) + 1
+              const totalSteps = Wizard.steps.length
+              const nextStep = Wizard.steps[currentIndex]
+
+              return (
+                <>
+                  <WizardHeader
+                    currentIndex={currentIndex}
+                    totalSteps={totalSteps}
+                    currentTitle={methods.current.title}
+                    currentDescription={methods.current.description}
+                    nextTitle={nextStep?.title}
+                    onClose={handleClose}
+                    Wizard={Wizard}
+                  />
+
+                  <div className="flex-1 overflow-y-auto bg-gray-50/30 p-6">
+                    <div className="mx-auto max-w-3xl">
+                      {Wizard.utils.getIndex(methods.current.id) === 0 && (
+                        <Wizard.Stepper.Panel>
+                          <PasoModoCardGroup
+                            wizard={wizard}
+                            onChange={setWizard}
+                          />
+                        </Wizard.Stepper.Panel>
+                      )}
+                      {Wizard.utils.getIndex(methods.current.id) === 1 && (
+                        <Wizard.Stepper.Panel>
+                          <PasoBasicosForm
+                            wizard={wizard}
+                            onChange={setWizard}
+                            carrerasFiltradas={carrerasFiltradas}
+                          />
+                        </Wizard.Stepper.Panel>
+                      )}
+                      {Wizard.utils.getIndex(methods.current.id) === 2 && (
+                        <Wizard.Stepper.Panel>
+                          <PasoDetallesPanel
+                            wizard={wizard}
+                            onChange={setWizard}
+                            onGenerarIA={generarPreviewIA}
+                            isLoading={wizard.isLoading}
+                          />
+                        </Wizard.Stepper.Panel>
+                      )}
+                      {Wizard.utils.getIndex(methods.current.id) === 3 && (
+                        <Wizard.Stepper.Panel>
+                          <PasoResumenCard wizard={wizard} />
+                        </Wizard.Stepper.Panel>
+                      )}
+                    </div>
+                  </div>
+
+                  <div className="flex-none border-t bg-white p-6">
+                    <Wizard.Stepper.Controls>
+                      <WizardControls
+                        errorMessage={wizard.errorMessage}
+                        onPrev={() => methods.prev()}
+                        onNext={() => methods.next()}
+                        onCreate={crearPlan}
+                        disablePrev={
+                          Wizard.utils.getIndex(methods.current.id) === 0 ||
+                          wizard.isLoading
+                        }
+                        disableNext={
+                          wizard.isLoading ||
+                          (Wizard.utils.getIndex(methods.current.id) === 0 &&
+                            !canContinueDesdeModo) ||
+                          (Wizard.utils.getIndex(methods.current.id) === 1 &&
+                            !canContinueDesdeBasicos) ||
+                          (Wizard.utils.getIndex(methods.current.id) === 2 &&
+                            !canContinueDesdeDetalles)
+                        }
+                        disableCreate={wizard.isLoading}
+                        isLastStep={
+                          Wizard.utils.getIndex(methods.current.id) >=
+                          Wizard.steps.length - 1
+                        }
+                      />
+                    </Wizard.Stepper.Controls>
+                  </div>
+                </>
+              )
+            }}
+          </Wizard.Stepper.Provider>
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/src/features/planes/new/catalogs.ts b/src/features/planes/new/catalogs.ts
new file mode 100644
index 0000000..1298106
--- /dev/null
+++ b/src/features/planes/new/catalogs.ts
@@ -0,0 +1,56 @@
+import type { TipoCiclo } from "./types";
+
+export const FACULTADES = [
+  { id: "ing", nombre: "Facultad de Ingeniería" },
+  {
+    id: "med",
+    nombre: "Facultad de Medicina en medicina en medicina en medicina",
+  },
+  { id: "neg", nombre: "Facultad de Negocios" },
+];
+
+export const CARRERAS = [
+  { id: "sis", nombre: "Ing. en Sistemas", facultadId: "ing" },
+  { id: "ind", nombre: "Ing. Industrial", facultadId: "ing" },
+  { id: "medico", nombre: "Médico Cirujano", facultadId: "med" },
+  { id: "act", nombre: "Actuaría", facultadId: "neg" },
+];
+
+export const NIVELES = [
+  "Licenciatura",
+  "Especialidad",
+  "Maestría",
+  "Doctorado",
+];
+export const TIPOS_CICLO: Array<{ value: TipoCiclo; label: string }> = [
+  { value: "SEMESTRE", label: "Semestre" },
+  { value: "CUATRIMESTRE", label: "Cuatrimestre" },
+  { value: "TRIMESTRE", label: "Trimestre" },
+];
+
+export const PLANES_EXISTENTES = [
+  {
+    id: "plan-2021-sis",
+    nombre: "ISC 2021",
+    estado: "Aprobado",
+    anio: 2021,
+    facultadId: "ing",
+    carreraId: "sis",
+  },
+  {
+    id: "plan-2020-ind",
+    nombre: "I. Industrial 2020",
+    estado: "Aprobado",
+    anio: 2020,
+    facultadId: "ing",
+    carreraId: "ind",
+  },
+  {
+    id: "plan-2019-med",
+    nombre: "Medicina 2019",
+    estado: "Vigente",
+    anio: 2019,
+    facultadId: "med",
+    carreraId: "medico",
+  },
+];
diff --git a/src/features/planes/new/hooks/useNuevoPlanWizard.ts b/src/features/planes/new/hooks/useNuevoPlanWizard.ts
new file mode 100644
index 0000000..0374e8b
--- /dev/null
+++ b/src/features/planes/new/hooks/useNuevoPlanWizard.ts
@@ -0,0 +1,102 @@
+import { useMemo, useState } from "react";
+
+import { CARRERAS } from "../catalogs";
+
+import type { NewPlanWizardState, PlanPreview } from "../types";
+
+export function useNuevoPlanWizard() {
+  const [wizard, setWizard] = useState<NewPlanWizardState>({
+    step: 1,
+    modoCreacion: null,
+    datosBasicos: {
+      nombrePlan: "",
+      carreraId: "",
+      facultadId: "",
+      nivel: "",
+      tipoCiclo: "SEMESTRE",
+      numCiclos: 8,
+    },
+    clonInterno: { planOrigenId: null },
+    clonTradicional: {
+      archivoWordPlanId: null,
+      archivoMapaExcelId: null,
+      archivoMateriasExcelId: null,
+    },
+    iaConfig: {
+      descripcionEnfoque: "",
+      poblacionObjetivo: "",
+      notasAdicionales: "",
+      archivosReferencia: [],
+    },
+    resumen: {},
+    isLoading: false,
+    errorMessage: null,
+  });
+
+  const carrerasFiltradas = useMemo(() => {
+    const fac = wizard.datosBasicos.facultadId;
+    return fac ? CARRERAS.filter((c) => c.facultadId === fac) : CARRERAS;
+  }, [wizard.datosBasicos.facultadId]);
+
+  const canContinueDesdeModo = wizard.modoCreacion === "MANUAL" ||
+    wizard.modoCreacion === "IA" ||
+    (wizard.modoCreacion === "CLONADO" && !!wizard.subModoClonado);
+
+  const canContinueDesdeBasicos = !!wizard.datosBasicos.nombrePlan &&
+    !!wizard.datosBasicos.carreraId &&
+    !!wizard.datosBasicos.facultadId &&
+    !!wizard.datosBasicos.nivel &&
+    wizard.datosBasicos.numCiclos > 0;
+
+  const canContinueDesdeDetalles = (() => {
+    if (wizard.modoCreacion === "MANUAL") return true;
+    if (wizard.modoCreacion === "IA") {
+      return !!wizard.iaConfig?.descripcionEnfoque;
+    }
+    if (wizard.modoCreacion === "CLONADO") {
+      if (wizard.subModoClonado === "INTERNO") {
+        return !!wizard.clonInterno?.planOrigenId;
+      }
+      if (wizard.subModoClonado === "TRADICIONAL") {
+        const t = wizard.clonTradicional;
+        if (!t) return false;
+        const tieneWord = !!t.archivoWordPlanId;
+        const tieneAlMenosUnExcel = !!t.archivoMapaExcelId ||
+          !!t.archivoMateriasExcelId;
+        return tieneWord && tieneAlMenosUnExcel;
+      }
+    }
+    return false;
+  })();
+
+  const generarPreviewIA = async () => {
+    setWizard((w) => ({ ...w, isLoading: true, errorMessage: null }));
+    await new Promise((r) => setTimeout(r, 800));
+    const preview: PlanPreview = {
+      nombrePlan: wizard.datosBasicos.nombrePlan || "Plan sin nombre",
+      nivel: wizard.datosBasicos.nivel || "Licenciatura",
+      tipoCiclo: wizard.datosBasicos.tipoCiclo,
+      numCiclos: wizard.datosBasicos.numCiclos,
+      numMateriasAprox: wizard.datosBasicos.numCiclos * 6,
+      secciones: [
+        { id: "obj", titulo: "Objetivos", resumen: "Borrador de objetivos…" },
+        { id: "perfil", titulo: "Perfil de egreso", resumen: "Borrador…" },
+      ],
+    };
+    setWizard((w) => ({
+      ...w,
+      isLoading: false,
+      resumen: { previewPlan: preview },
+    }));
+  };
+
+  return {
+    wizard,
+    setWizard,
+    carrerasFiltradas,
+    canContinueDesdeModo,
+    canContinueDesdeBasicos,
+    canContinueDesdeDetalles,
+    generarPreviewIA,
+  };
+}
diff --git a/src/features/planes/new/types.ts b/src/features/planes/new/types.ts
new file mode 100644
index 0000000..b651804
--- /dev/null
+++ b/src/features/planes/new/types.ts
@@ -0,0 +1,41 @@
+export type TipoCiclo = "SEMESTRE" | "CUATRIMESTRE" | "TRIMESTRE";
+export type ModoCreacion = "MANUAL" | "IA" | "CLONADO";
+export type SubModoClonado = "INTERNO" | "TRADICIONAL";
+
+export type PlanPreview = {
+  nombrePlan: string;
+  nivel: string;
+  tipoCiclo: TipoCiclo;
+  numCiclos: number;
+  numMateriasAprox?: number;
+  secciones?: Array<{ id: string; titulo: string; resumen: string }>;
+};
+
+export type NewPlanWizardState = {
+  step: 1 | 2 | 3 | 4;
+  modoCreacion: ModoCreacion | null;
+  subModoClonado?: SubModoClonado;
+  datosBasicos: {
+    nombrePlan: string;
+    carreraId: string;
+    facultadId: string;
+    nivel: string;
+    tipoCiclo: TipoCiclo;
+    numCiclos: number;
+  };
+  clonInterno?: { planOrigenId: string | null };
+  clonTradicional?: {
+    archivoWordPlanId: string | null;
+    archivoMapaExcelId: string | null;
+    archivoMateriasExcelId: string | null;
+  };
+  iaConfig?: {
+    descripcionEnfoque: string;
+    poblacionObjetivo: string;
+    notasAdicionales: string;
+    archivosReferencia: Array<string>;
+  };
+  resumen: { previewPlan?: PlanPreview };
+  isLoading: boolean;
+  errorMessage: string | null;
+};
diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts
index 8b40112..47f53ea 100644
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -9,29 +9,17 @@
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
 import { Route as rootRouteImport } from './routes/__root'
-import { Route as Stepper2RouteImport } from './routes/stepper2'
-import { Route as StepperRouteImport } from './routes/stepper'
 import { Route as LoginRouteImport } from './routes/login'
 import { Route as DashboardRouteImport } from './routes/dashboard'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as DemoTanstackQueryRouteImport } from './routes/demo/tanstack-query'
 import { Route as PlanesListaRouteRouteImport } from './routes/planes/_lista/route'
-import { Route as PlanesPlanIdRouteRouteImport } from './routes/planes/$planId/route'
-import { Route as AsignaturasListaRouteRouteImport } from './routes/asignaturas/_lista/route'
-import { Route as AsignaturasAsignaturaIdRouteRouteImport } from './routes/asignaturas/$asignaturaId/route'
+import { Route as PlanesPlanIdIndexRouteImport } from './routes/planes/$planId/index'
 import { Route as PlanesListaNuevoRouteImport } from './routes/planes/_lista/nuevo'
-import { Route as AsignaturasListaNuevaRouteImport } from './routes/asignaturas/_lista/nueva'
+import { Route as PlanesPlanIdAsignaturasListaRouteRouteImport } from './routes/planes/$planId/asignaturas/_lista/route'
+import { Route as PlanesPlanIdAsignaturasAsignaturaIdRouteRouteImport } from './routes/planes/$planId/asignaturas/$asignaturaId/route'
+import { Route as PlanesPlanIdAsignaturasListaNuevaRouteImport } from './routes/planes/$planId/asignaturas/_lista/nueva'
 
-const Stepper2Route = Stepper2RouteImport.update({
-  id: '/stepper2',
-  path: '/stepper2',
-  getParentRoute: () => rootRouteImport,
-} as any)
-const StepperRoute = StepperRouteImport.update({
-  id: '/stepper',
-  path: '/stepper',
-  getParentRoute: () => rootRouteImport,
-} as any)
 const LoginRoute = LoginRouteImport.update({
   id: '/login',
   path: '/login',
@@ -57,75 +45,71 @@ const PlanesListaRouteRoute = PlanesListaRouteRouteImport.update({
   path: '/planes',
   getParentRoute: () => rootRouteImport,
 } as any)
-const PlanesPlanIdRouteRoute = PlanesPlanIdRouteRouteImport.update({
-  id: '/planes/$planId',
-  path: '/planes/$planId',
+const PlanesPlanIdIndexRoute = PlanesPlanIdIndexRouteImport.update({
+  id: '/planes/$planId/',
+  path: '/planes/$planId/',
   getParentRoute: () => rootRouteImport,
 } as any)
-const AsignaturasListaRouteRoute = AsignaturasListaRouteRouteImport.update({
-  id: '/asignaturas/_lista',
-  path: '/asignaturas',
-  getParentRoute: () => rootRouteImport,
-} as any)
-const AsignaturasAsignaturaIdRouteRoute =
-  AsignaturasAsignaturaIdRouteRouteImport.update({
-    id: '/asignaturas/$asignaturaId',
-    path: '/asignaturas/$asignaturaId',
-    getParentRoute: () => rootRouteImport,
-  } as any)
 const PlanesListaNuevoRoute = PlanesListaNuevoRouteImport.update({
   id: '/nuevo',
   path: '/nuevo',
   getParentRoute: () => PlanesListaRouteRoute,
 } as any)
-const AsignaturasListaNuevaRoute = AsignaturasListaNuevaRouteImport.update({
-  id: '/nueva',
-  path: '/nueva',
-  getParentRoute: () => AsignaturasListaRouteRoute,
-} as any)
+const PlanesPlanIdAsignaturasListaRouteRoute =
+  PlanesPlanIdAsignaturasListaRouteRouteImport.update({
+    id: '/planes/$planId/asignaturas/_lista',
+    path: '/planes/$planId/asignaturas',
+    getParentRoute: () => rootRouteImport,
+  } as any)
+const PlanesPlanIdAsignaturasAsignaturaIdRouteRoute =
+  PlanesPlanIdAsignaturasAsignaturaIdRouteRouteImport.update({
+    id: '/planes/$planId/asignaturas/$asignaturaId',
+    path: '/planes/$planId/asignaturas/$asignaturaId',
+    getParentRoute: () => rootRouteImport,
+  } as any)
+const PlanesPlanIdAsignaturasListaNuevaRoute =
+  PlanesPlanIdAsignaturasListaNuevaRouteImport.update({
+    id: '/nueva',
+    path: '/nueva',
+    getParentRoute: () => PlanesPlanIdAsignaturasListaRouteRoute,
+  } as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/dashboard': typeof DashboardRoute
   '/login': typeof LoginRoute
-  '/stepper': typeof StepperRoute
-  '/stepper2': typeof Stepper2Route
-  '/asignaturas/$asignaturaId': typeof AsignaturasAsignaturaIdRouteRoute
-  '/asignaturas': typeof AsignaturasListaRouteRouteWithChildren
-  '/planes/$planId': typeof PlanesPlanIdRouteRoute
   '/planes': typeof PlanesListaRouteRouteWithChildren
   '/demo/tanstack-query': typeof DemoTanstackQueryRoute
-  '/asignaturas/nueva': typeof AsignaturasListaNuevaRoute
   '/planes/nuevo': typeof PlanesListaNuevoRoute
+  '/planes/$planId': typeof PlanesPlanIdIndexRoute
+  '/planes/$planId/asignaturas/$asignaturaId': typeof PlanesPlanIdAsignaturasAsignaturaIdRouteRoute
+  '/planes/$planId/asignaturas': typeof PlanesPlanIdAsignaturasListaRouteRouteWithChildren
+  '/planes/$planId/asignaturas/nueva': typeof PlanesPlanIdAsignaturasListaNuevaRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/dashboard': typeof DashboardRoute
   '/login': typeof LoginRoute
-  '/stepper': typeof StepperRoute
-  '/stepper2': typeof Stepper2Route
-  '/asignaturas/$asignaturaId': typeof AsignaturasAsignaturaIdRouteRoute
-  '/asignaturas': typeof AsignaturasListaRouteRouteWithChildren
-  '/planes/$planId': typeof PlanesPlanIdRouteRoute
   '/planes': typeof PlanesListaRouteRouteWithChildren
   '/demo/tanstack-query': typeof DemoTanstackQueryRoute
-  '/asignaturas/nueva': typeof AsignaturasListaNuevaRoute
   '/planes/nuevo': typeof PlanesListaNuevoRoute
+  '/planes/$planId': typeof PlanesPlanIdIndexRoute
+  '/planes/$planId/asignaturas/$asignaturaId': typeof PlanesPlanIdAsignaturasAsignaturaIdRouteRoute
+  '/planes/$planId/asignaturas': typeof PlanesPlanIdAsignaturasListaRouteRouteWithChildren
+  '/planes/$planId/asignaturas/nueva': typeof PlanesPlanIdAsignaturasListaNuevaRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
   '/dashboard': typeof DashboardRoute
   '/login': typeof LoginRoute
-  '/stepper': typeof StepperRoute
-  '/stepper2': typeof Stepper2Route
-  '/asignaturas/$asignaturaId': typeof AsignaturasAsignaturaIdRouteRoute
-  '/asignaturas/_lista': typeof AsignaturasListaRouteRouteWithChildren
-  '/planes/$planId': typeof PlanesPlanIdRouteRoute
   '/planes/_lista': typeof PlanesListaRouteRouteWithChildren
   '/demo/tanstack-query': typeof DemoTanstackQueryRoute
-  '/asignaturas/_lista/nueva': typeof AsignaturasListaNuevaRoute
   '/planes/_lista/nuevo': typeof PlanesListaNuevoRoute
+  '/planes/$planId/': typeof PlanesPlanIdIndexRoute
+  '/planes/$planId/asignaturas/$asignaturaId': typeof PlanesPlanIdAsignaturasAsignaturaIdRouteRoute
+  '/planes/$planId/asignaturas/_lista': typeof PlanesPlanIdAsignaturasListaRouteRouteWithChildren
+  '/planes/$planId/asignaturas/_lista/nueva': typeof PlanesPlanIdAsignaturasListaNuevaRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
@@ -133,74 +117,52 @@ export interface FileRouteTypes {
     | '/'
     | '/dashboard'
     | '/login'
-    | '/stepper'
-    | '/stepper2'
-    | '/asignaturas/$asignaturaId'
-    | '/asignaturas'
-    | '/planes/$planId'
     | '/planes'
     | '/demo/tanstack-query'
-    | '/asignaturas/nueva'
     | '/planes/nuevo'
+    | '/planes/$planId'
+    | '/planes/$planId/asignaturas/$asignaturaId'
+    | '/planes/$planId/asignaturas'
+    | '/planes/$planId/asignaturas/nueva'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
     | '/dashboard'
     | '/login'
-    | '/stepper'
-    | '/stepper2'
-    | '/asignaturas/$asignaturaId'
-    | '/asignaturas'
-    | '/planes/$planId'
     | '/planes'
     | '/demo/tanstack-query'
-    | '/asignaturas/nueva'
     | '/planes/nuevo'
+    | '/planes/$planId'
+    | '/planes/$planId/asignaturas/$asignaturaId'
+    | '/planes/$planId/asignaturas'
+    | '/planes/$planId/asignaturas/nueva'
   id:
     | '__root__'
     | '/'
     | '/dashboard'
     | '/login'
-    | '/stepper'
-    | '/stepper2'
-    | '/asignaturas/$asignaturaId'
-    | '/asignaturas/_lista'
-    | '/planes/$planId'
     | '/planes/_lista'
     | '/demo/tanstack-query'
-    | '/asignaturas/_lista/nueva'
     | '/planes/_lista/nuevo'
+    | '/planes/$planId/'
+    | '/planes/$planId/asignaturas/$asignaturaId'
+    | '/planes/$planId/asignaturas/_lista'
+    | '/planes/$planId/asignaturas/_lista/nueva'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   DashboardRoute: typeof DashboardRoute
   LoginRoute: typeof LoginRoute
-  StepperRoute: typeof StepperRoute
-  Stepper2Route: typeof Stepper2Route
-  AsignaturasAsignaturaIdRouteRoute: typeof AsignaturasAsignaturaIdRouteRoute
-  AsignaturasListaRouteRoute: typeof AsignaturasListaRouteRouteWithChildren
-  PlanesPlanIdRouteRoute: typeof PlanesPlanIdRouteRoute
   PlanesListaRouteRoute: typeof PlanesListaRouteRouteWithChildren
   DemoTanstackQueryRoute: typeof DemoTanstackQueryRoute
+  PlanesPlanIdIndexRoute: typeof PlanesPlanIdIndexRoute
+  PlanesPlanIdAsignaturasAsignaturaIdRouteRoute: typeof PlanesPlanIdAsignaturasAsignaturaIdRouteRoute
+  PlanesPlanIdAsignaturasListaRouteRoute: typeof PlanesPlanIdAsignaturasListaRouteRouteWithChildren
 }
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
-    '/stepper2': {
-      id: '/stepper2'
-      path: '/stepper2'
-      fullPath: '/stepper2'
-      preLoaderRoute: typeof Stepper2RouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/stepper': {
-      id: '/stepper'
-      path: '/stepper'
-      fullPath: '/stepper'
-      preLoaderRoute: typeof StepperRouteImport
-      parentRoute: typeof rootRouteImport
-    }
     '/login': {
       id: '/login'
       path: '/login'
@@ -236,25 +198,11 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof PlanesListaRouteRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/planes/$planId': {
-      id: '/planes/$planId'
+    '/planes/$planId/': {
+      id: '/planes/$planId/'
       path: '/planes/$planId'
       fullPath: '/planes/$planId'
-      preLoaderRoute: typeof PlanesPlanIdRouteRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/asignaturas/_lista': {
-      id: '/asignaturas/_lista'
-      path: '/asignaturas'
-      fullPath: '/asignaturas'
-      preLoaderRoute: typeof AsignaturasListaRouteRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/asignaturas/$asignaturaId': {
-      id: '/asignaturas/$asignaturaId'
-      path: '/asignaturas/$asignaturaId'
-      fullPath: '/asignaturas/$asignaturaId'
-      preLoaderRoute: typeof AsignaturasAsignaturaIdRouteRouteImport
+      preLoaderRoute: typeof PlanesPlanIdIndexRouteImport
       parentRoute: typeof rootRouteImport
     }
     '/planes/_lista/nuevo': {
@@ -264,29 +212,30 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof PlanesListaNuevoRouteImport
       parentRoute: typeof PlanesListaRouteRoute
     }
-    '/asignaturas/_lista/nueva': {
-      id: '/asignaturas/_lista/nueva'
+    '/planes/$planId/asignaturas/_lista': {
+      id: '/planes/$planId/asignaturas/_lista'
+      path: '/planes/$planId/asignaturas'
+      fullPath: '/planes/$planId/asignaturas'
+      preLoaderRoute: typeof PlanesPlanIdAsignaturasListaRouteRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/planes/$planId/asignaturas/$asignaturaId': {
+      id: '/planes/$planId/asignaturas/$asignaturaId'
+      path: '/planes/$planId/asignaturas/$asignaturaId'
+      fullPath: '/planes/$planId/asignaturas/$asignaturaId'
+      preLoaderRoute: typeof PlanesPlanIdAsignaturasAsignaturaIdRouteRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/planes/$planId/asignaturas/_lista/nueva': {
+      id: '/planes/$planId/asignaturas/_lista/nueva'
       path: '/nueva'
-      fullPath: '/asignaturas/nueva'
-      preLoaderRoute: typeof AsignaturasListaNuevaRouteImport
-      parentRoute: typeof AsignaturasListaRouteRoute
+      fullPath: '/planes/$planId/asignaturas/nueva'
+      preLoaderRoute: typeof PlanesPlanIdAsignaturasListaNuevaRouteImport
+      parentRoute: typeof PlanesPlanIdAsignaturasListaRouteRoute
     }
   }
 }
 
-interface AsignaturasListaRouteRouteChildren {
-  AsignaturasListaNuevaRoute: typeof AsignaturasListaNuevaRoute
-}
-
-const AsignaturasListaRouteRouteChildren: AsignaturasListaRouteRouteChildren = {
-  AsignaturasListaNuevaRoute: AsignaturasListaNuevaRoute,
-}
-
-const AsignaturasListaRouteRouteWithChildren =
-  AsignaturasListaRouteRoute._addFileChildren(
-    AsignaturasListaRouteRouteChildren,
-  )
-
 interface PlanesListaRouteRouteChildren {
   PlanesListaNuevoRoute: typeof PlanesListaNuevoRoute
 }
@@ -298,17 +247,32 @@ const PlanesListaRouteRouteChildren: PlanesListaRouteRouteChildren = {
 const PlanesListaRouteRouteWithChildren =
   PlanesListaRouteRoute._addFileChildren(PlanesListaRouteRouteChildren)
 
+interface PlanesPlanIdAsignaturasListaRouteRouteChildren {
+  PlanesPlanIdAsignaturasListaNuevaRoute: typeof PlanesPlanIdAsignaturasListaNuevaRoute
+}
+
+const PlanesPlanIdAsignaturasListaRouteRouteChildren: PlanesPlanIdAsignaturasListaRouteRouteChildren =
+  {
+    PlanesPlanIdAsignaturasListaNuevaRoute:
+      PlanesPlanIdAsignaturasListaNuevaRoute,
+  }
+
+const PlanesPlanIdAsignaturasListaRouteRouteWithChildren =
+  PlanesPlanIdAsignaturasListaRouteRoute._addFileChildren(
+    PlanesPlanIdAsignaturasListaRouteRouteChildren,
+  )
+
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   DashboardRoute: DashboardRoute,
   LoginRoute: LoginRoute,
-  StepperRoute: StepperRoute,
-  Stepper2Route: Stepper2Route,
-  AsignaturasAsignaturaIdRouteRoute: AsignaturasAsignaturaIdRouteRoute,
-  AsignaturasListaRouteRoute: AsignaturasListaRouteRouteWithChildren,
-  PlanesPlanIdRouteRoute: PlanesPlanIdRouteRoute,
   PlanesListaRouteRoute: PlanesListaRouteRouteWithChildren,
   DemoTanstackQueryRoute: DemoTanstackQueryRoute,
+  PlanesPlanIdIndexRoute: PlanesPlanIdIndexRoute,
+  PlanesPlanIdAsignaturasAsignaturaIdRouteRoute:
+    PlanesPlanIdAsignaturasAsignaturaIdRouteRoute,
+  PlanesPlanIdAsignaturasListaRouteRoute:
+    PlanesPlanIdAsignaturasListaRouteRouteWithChildren,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)
diff --git a/src/routes/asignaturas/$asignaturaId/route.tsx b/src/routes/planes/$planId/asignaturas/$asignaturaId/route.tsx
similarity index 67%
rename from src/routes/asignaturas/$asignaturaId/route.tsx
rename to src/routes/planes/$planId/asignaturas/$asignaturaId/route.tsx
index e314491..5238f4d 100644
--- a/src/routes/asignaturas/$asignaturaId/route.tsx
+++ b/src/routes/planes/$planId/asignaturas/$asignaturaId/route.tsx
@@ -1,6 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router'
 
-export const Route = createFileRoute('/asignaturas/$asignaturaId')({
+export const Route = createFileRoute('/planes/$planId/asignaturas/$asignaturaId')({
   component: RouteComponent,
 })
 
diff --git a/src/routes/asignaturas/_lista/nueva.tsx b/src/routes/planes/$planId/asignaturas/_lista/nueva.tsx
similarity index 99%
rename from src/routes/asignaturas/_lista/nueva.tsx
rename to src/routes/planes/$planId/asignaturas/_lista/nueva.tsx
index f0dc9bd..0ff0335 100644
--- a/src/routes/asignaturas/_lista/nueva.tsx
+++ b/src/routes/planes/$planId/asignaturas/_lista/nueva.tsx
@@ -35,7 +35,9 @@ import {
   TooltipTrigger,
 } from '@/components/ui/tooltip'
 
-export const Route = createFileRoute('/asignaturas/_lista/nueva')({
+export const Route = createFileRoute(
+  '/planes/$planId/asignaturas/_lista/nueva',
+)({
   component: NuevaMateriaModal,
 })
 
@@ -54,7 +56,7 @@ type MateriaPreview = {
 
 type NewSubjectWizardState = {
   step: 1 | 2 | 3 | 4
-  // planId: string
+  planId: string
   modoCreacion: ModoCreacion | null
   subModoClonado?: SubModoClonado
   datosBasicos: {
@@ -175,12 +177,12 @@ const Wizard = defineStepper(
 
 function NuevaMateriaModal() {
   const navigate = useNavigate()
-  // const { planId } = Route.useParams()
+  const { planId } = Route.useParams()
   const role = auth_get_current_user_role()
 
   const [wizard, setWizard] = useState<NewSubjectWizardState>({
     step: 1,
-    // planId: planId,
+    planId: planId,
     modoCreacion: null,
     datosBasicos: {
       nombre: '',
@@ -207,7 +209,7 @@ function NuevaMateriaModal() {
 
   const handleClose = () => {
     // Redirige a la pestaña de materias del plan
-    navigate({ to: `/planes`, resetScroll: false })
+    navigate({ to: `/planes/${planId}/asignaturas`, resetScroll: false })
   }
 
   // --- Validaciones ---
diff --git a/src/routes/asignaturas/_lista/route.tsx b/src/routes/planes/$planId/asignaturas/_lista/route.tsx
similarity index 68%
rename from src/routes/asignaturas/_lista/route.tsx
rename to src/routes/planes/$planId/asignaturas/_lista/route.tsx
index dda38c1..980020f 100644
--- a/src/routes/asignaturas/_lista/route.tsx
+++ b/src/routes/planes/$planId/asignaturas/_lista/route.tsx
@@ -1,6 +1,6 @@
 import { createFileRoute, Outlet } from '@tanstack/react-router'
 
-export const Route = createFileRoute('/asignaturas/_lista')({
+export const Route = createFileRoute('/planes/$planId/asignaturas/_lista')({
   component: RouteComponent,
 })
 
@@ -8,6 +8,7 @@ function RouteComponent() {
   return (
     <main className="bg-background min-h-screen w-full">
       <div className="mx-auto flex w-full max-w-7xl flex-col gap-4 px-4 py-6 md:px-6 lg:px-8">
+        <h1 className="text-foreground text-2xl font-semibold">Asignaturas</h1>
         <Outlet />
       </div>
     </main>
diff --git a/src/routes/planes/$planId/route.tsx b/src/routes/planes/$planId/index.tsx
similarity index 77%
rename from src/routes/planes/$planId/route.tsx
rename to src/routes/planes/$planId/index.tsx
index 9537c88..b1edf28 100644
--- a/src/routes/planes/$planId/route.tsx
+++ b/src/routes/planes/$planId/index.tsx
@@ -1,6 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router'
 
-export const Route = createFileRoute('/planes/$planId')({
+export const Route = createFileRoute('/planes/$planId/')({
   component: RouteComponent,
 })
 
diff --git a/src/routes/planes/_lista/nuevo.tsx b/src/routes/planes/_lista/nuevo.tsx
index 571e3a7..82c2cdd 100644
--- a/src/routes/planes/_lista/nuevo.tsx
+++ b/src/routes/planes/_lista/nuevo.tsx
@@ -1,1204 +1,7 @@
-import { createFileRoute, useNavigate } from '@tanstack/react-router'
-import * as Icons from 'lucide-react'
-import { useMemo, useState } from 'react'
+import { createFileRoute } from '@tanstack/react-router'
 
-import { CircularProgress } from '@/components/CircularProgress'
-import { defineStepper } from '@/components/stepper'
-import { Button } from '@/components/ui/button'
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card'
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select'
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@/components/ui/tooltip'
+import NuevoPlanModalContainer from '@/features/planes/new/NuevoPlanModalContainer'
 
 export const Route = createFileRoute('/planes/_lista/nuevo')({
-  component: NuevoPlanModal,
+  component: NuevoPlanModalContainer,
 })
-
-// Tipos del wizard (mock frontend)
-type TipoCiclo = 'SEMESTRE' | 'CUATRIMESTRE' | 'TRIMESTRE'
-type ModoCreacion = 'MANUAL' | 'IA' | 'CLONADO'
-type SubModoClonado = 'INTERNO' | 'TRADICIONAL'
-
-type PlanPreview = {
-  nombrePlan: string
-  nivel: string
-  tipoCiclo: TipoCiclo
-  numCiclos: number
-  numMateriasAprox?: number
-  secciones?: Array<{ id: string; titulo: string; resumen: string }>
-}
-
-type NewPlanWizardState = {
-  step: 1 | 2 | 3 | 4
-  modoCreacion: ModoCreacion | null
-  subModoClonado?: SubModoClonado
-  datosBasicos: {
-    nombrePlan: string
-    carreraId: string
-    facultadId: string
-    nivel: string
-    tipoCiclo: TipoCiclo
-    numCiclos: number
-  }
-  clonInterno?: { planOrigenId: string | null }
-  clonTradicional?: {
-    archivoWordPlanId: string | null
-    archivoMapaExcelId: string | null
-    archivoMateriasExcelId: string | null
-  }
-  iaConfig?: {
-    descripcionEnfoque: string
-    poblacionObjetivo: string
-    notasAdicionales: string
-    archivosReferencia: Array<string>
-  }
-  resumen: { previewPlan?: PlanPreview }
-  isLoading: boolean
-  errorMessage: string | null
-}
-
-// Mock de permisos/rol
-const auth_get_current_user_role = () => 'JEFE_CARRERA' as const
-
-// Mock catálogos
-const FACULTADES = [
-  { id: 'ing', nombre: 'Facultad de Ingeniería' },
-  {
-    id: 'med',
-    nombre: 'Facultad de Medicina en medicina en medicina en medicina',
-  },
-  { id: 'neg', nombre: 'Facultad de Negocios' },
-]
-
-const CARRERAS = [
-  { id: 'sis', nombre: 'Ing. en Sistemas', facultadId: 'ing' },
-  { id: 'ind', nombre: 'Ing. Industrial', facultadId: 'ing' },
-  { id: 'medico', nombre: 'Médico Cirujano', facultadId: 'med' },
-  { id: 'act', nombre: 'Actuaría', facultadId: 'neg' },
-]
-
-const NIVELES = ['Licenciatura', 'Especialidad', 'Maestría', 'Doctorado']
-const TIPOS_CICLO: Array<{ value: TipoCiclo; label: string }> = [
-  { value: 'SEMESTRE', label: 'Semestre' },
-  { value: 'CUATRIMESTRE', label: 'Cuatrimestre' },
-  { value: 'TRIMESTRE', label: 'Trimestre' },
-]
-
-// Mock planes existentes para clonado interno
-const PLANES_EXISTENTES = [
-  {
-    id: 'plan-2021-sis',
-    nombre: 'ISC 2021',
-    estado: 'Aprobado',
-    anio: 2021,
-    facultadId: 'ing',
-    carreraId: 'sis',
-  },
-  {
-    id: 'plan-2020-ind',
-    nombre: 'I. Industrial 2020',
-    estado: 'Aprobado',
-    anio: 2020,
-    facultadId: 'ing',
-    carreraId: 'ind',
-  },
-  {
-    id: 'plan-2019-med',
-    nombre: 'Medicina 2019',
-    estado: 'Vigente',
-    anio: 2019,
-    facultadId: 'med',
-    carreraId: 'medico',
-  },
-]
-
-// Definición de pasos con wrapper
-const Wizard = defineStepper(
-  {
-    id: 'modo',
-    title: 'Método',
-    description: 'Selecciona cómo crearás el plan',
-  },
-  {
-    id: 'basicos',
-    title: 'Datos básicos',
-    description: 'Nombre, carrera, nivel y ciclos',
-  },
-  { id: 'detalles', title: 'Detalles', description: 'IA, clonado o archivos' },
-  { id: 'resumen', title: 'Resumen', description: 'Confirma y crea el plan' },
-)
-
-function NuevoPlanModal() {
-  const navigate = useNavigate()
-
-  const [wizard, setWizard] = useState<NewPlanWizardState>({
-    step: 1,
-    modoCreacion: null,
-    datosBasicos: {
-      nombrePlan: '',
-      carreraId: '',
-      facultadId: '',
-      nivel: '',
-      tipoCiclo: 'SEMESTRE',
-      numCiclos: 8,
-    },
-    clonInterno: { planOrigenId: null },
-    clonTradicional: {
-      archivoWordPlanId: null,
-      archivoMapaExcelId: null,
-      archivoMateriasExcelId: null,
-    },
-    iaConfig: {
-      descripcionEnfoque: '',
-      poblacionObjetivo: '',
-      notasAdicionales: '',
-      archivosReferencia: [],
-    },
-    resumen: {},
-    isLoading: false,
-    errorMessage: null,
-  })
-
-  const role = auth_get_current_user_role()
-
-  const handleClose = () => {
-    navigate({ to: '/planes', resetScroll: false })
-  }
-
-  // --- LÓGICA DE VALIDACIÓN Y DATA ---
-  const carrerasFiltradas = useMemo(() => {
-    const fac = wizard.datosBasicos.facultadId
-    return fac ? CARRERAS.filter((c) => c.facultadId === fac) : CARRERAS
-  }, [wizard.datosBasicos.facultadId])
-
-  const canContinueDesdeModo =
-    wizard.modoCreacion === 'MANUAL' ||
-    wizard.modoCreacion === 'IA' ||
-    (wizard.modoCreacion === 'CLONADO' && !!wizard.subModoClonado)
-
-  const canContinueDesdeBasicos =
-    !!wizard.datosBasicos.nombrePlan &&
-    !!wizard.datosBasicos.carreraId &&
-    !!wizard.datosBasicos.facultadId &&
-    !!wizard.datosBasicos.nivel &&
-    wizard.datosBasicos.numCiclos > 0
-
-  const canContinueDesdeDetalles = (() => {
-    if (wizard.modoCreacion === 'MANUAL') return true
-    if (wizard.modoCreacion === 'IA') {
-      return !!wizard.iaConfig?.descripcionEnfoque
-    }
-    if (wizard.modoCreacion === 'CLONADO') {
-      if (wizard.subModoClonado === 'INTERNO') {
-        return !!wizard.clonInterno?.planOrigenId
-      }
-      if (wizard.subModoClonado === 'TRADICIONAL') {
-        const t = wizard.clonTradicional
-        if (!t) return false
-        const tieneWord = !!t.archivoWordPlanId
-        const tieneAlMenosUnExcel =
-          !!t.archivoMapaExcelId || !!t.archivoMateriasExcelId
-        return tieneWord && tieneAlMenosUnExcel
-      }
-    }
-    return false
-  })()
-
-  const generarPreviewIA = async () => {
-    setWizard((w) => ({ ...w, isLoading: true, errorMessage: null }))
-    await new Promise((r) => setTimeout(r, 800))
-    const preview: PlanPreview = {
-      nombrePlan: wizard.datosBasicos.nombrePlan || 'Plan sin nombre',
-      nivel: wizard.datosBasicos.nivel || 'Licenciatura',
-      tipoCiclo: wizard.datosBasicos.tipoCiclo,
-      numCiclos: wizard.datosBasicos.numCiclos,
-      numMateriasAprox: wizard.datosBasicos.numCiclos * 6,
-      secciones: [
-        { id: 'obj', titulo: 'Objetivos', resumen: 'Borrador de objetivos…' },
-        { id: 'perfil', titulo: 'Perfil de egreso', resumen: 'Borrador…' },
-      ],
-    }
-    setWizard((w) => ({
-      ...w,
-      isLoading: false,
-      resumen: { previewPlan: preview },
-    }))
-  }
-
-  const crearPlan = async () => {
-    setWizard((w) => ({ ...w, isLoading: true, errorMessage: null }))
-    await new Promise((r) => setTimeout(r, 900))
-    const nuevoId = (() => {
-      if (wizard.modoCreacion === 'MANUAL') return 'plan_new_manual_001'
-      if (wizard.modoCreacion === 'IA') return 'plan_new_ai_001'
-      if (wizard.subModoClonado === 'INTERNO') return 'plan_new_clone_001'
-      return 'plan_new_import_001'
-    })()
-    navigate({ to: `/planes/${nuevoId}` })
-  }
-  // ------------------------------------------------
-
-  return (
-    <Dialog open={true} onOpenChange={(open) => !open && handleClose()}>
-      {/* FIX LAYOUT:
-          1. h-[90vh]: Altura fija del 90% de la ventana.
-          2. flex-col gap-0 p-0: Quitamos espacios automáticos para control manual.
-      */}
-      <DialogContent
-        className="flex h-[90vh] w-[calc(100%-2rem)] flex-col gap-0 overflow-hidden p-0 sm:max-w-4xl"
-        onInteractOutside={(e) => {
-          e.preventDefault()
-        }}
-      >
-        {role !== 'JEFE_CARRERA' ? (
-          // --- VISTA SIN PERMISOS ---
-          <>
-            <DialogHeader className="flex-none border-b p-6">
-              <DialogTitle>Nuevo plan de estudios</DialogTitle>
-            </DialogHeader>
-            <div className="flex-1 p-6">
-              <Card className="border-destructive/40">
-                <CardHeader>
-                  <CardTitle className="flex items-center gap-2">
-                    <Icons.ShieldAlert className="text-destructive h-5 w-5" />
-                    Sin permisos
-                  </CardTitle>
-                  <CardDescription>
-                    No tienes permisos para crear planes de estudio.
-                  </CardDescription>
-                </CardHeader>
-                <CardContent className="flex justify-end">
-                  <Button variant="secondary" onClick={handleClose}>
-                    Volver
-                  </Button>
-                </CardContent>
-              </Card>
-            </div>
-          </>
-        ) : (
-          // --- VISTA WIZARD ---
-          <Wizard.Stepper.Provider
-            initialStep={Wizard.utils.getFirst().id}
-            className="flex h-full flex-col"
-          >
-            {({ methods }) => {
-              // --- LÓGICA PARA MÓVIL (Cálculos) ---
-              const currentIndex = Wizard.utils.getIndex(methods.current.id) + 1
-              const totalSteps = Wizard.steps.length
-              const nextStep = Wizard.steps[currentIndex]
-              return (
-                <>
-                  {/* =========================================================
-                      HEADER RESPONSIVO
-                      ========================================================= */}
-                  <div className="z-10 flex-none border-b bg-white">
-                    <div className="flex items-center justify-between p-6 pb-4">
-                      <DialogHeader className="p-0">
-                        {' '}
-                        {/* Quitamos padding interno porque ya lo tiene el div padre */}
-                        <DialogTitle /* className="hidden sm:block" */>
-                          Nuevo plan de estudios
-                        </DialogTitle>
-                      </DialogHeader>
-
-                      {/* BOTÓN DE CERRAR (X) */}
-                      <button
-                        onClick={handleClose}
-                        className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none"
-                      >
-                        <Icons.X className="h-4 w-4" />
-                        <span className="sr-only">Cerrar</span>
-                      </button>
-                    </div>
-
-                    <div className="px-6 pb-6">
-                      {/* OPCIÓN A: MÓVIL (< 640px) 
-                          - Usa block sm:hidden
-                          - Muestra el CircularProgress y Texto Grande
-                      */}
-                      <div className="block sm:hidden">
-                        <div className="flex items-center gap-5">
-                          <CircularProgress
-                            current={currentIndex}
-                            total={totalSteps}
-                          />
-                          <div className="flex flex-col justify-center">
-                            <h2 className="text-lg font-bold text-slate-900">
-                              {/* Usamos el Helper del Tooltip aquí también */}
-                              <StepWithTooltip
-                                title={methods.current.title}
-                                desc={methods.current.description}
-                              />
-                            </h2>
-                            {nextStep ? (
-                              <p className="text-sm text-slate-400">
-                                Siguiente: {nextStep.title}
-                              </p>
-                            ) : (
-                              <p className="text-sm font-medium text-green-500">
-                                ¡Último paso!
-                              </p>
-                            )}
-                          </div>
-                        </div>
-                      </div>
-
-                      {/* OPCIÓN B: DESKTOP (>= 640px)
-                          - Usa hidden sm:block
-                          - Muestra la navegación original horizontal
-                      */}
-                      <div className="hidden sm:block">
-                        <Wizard.Stepper.Navigation className="border-border/60 rounded-xl border bg-slate-50 p-2">
-                          {Wizard.steps.map((step) => (
-                            <Wizard.Stepper.Step
-                              key={step.id}
-                              of={step.id}
-                              className="whitespace-nowrap"
-                            >
-                              <Wizard.Stepper.Title>
-                                {/* Envolvemos el título en nuestro componente Tooltip */}
-                                <StepWithTooltip
-                                  title={step.title}
-                                  desc={step.description}
-                                />
-                              </Wizard.Stepper.Title>
-                            </Wizard.Stepper.Step>
-                          ))}
-                        </Wizard.Stepper.Navigation>
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* 2. CONTENIDO (SCROLLEABLE - Meat) 
-                    flex-1: Ocupa todo el espacio restante.
-                    overflow-y-auto: Scrollea solo esta parte.
-                  */}
-                  <div className="flex-1 overflow-y-auto bg-gray-50/30 p-6">
-                    {/* Aquí renderizamos el panel. Quitamos el 'grid' del padre para evitar conflictos de altura */}
-                    <div className="mx-auto max-w-3xl">
-                      {Wizard.utils.getIndex(methods.current.id) === 0 && (
-                        <Wizard.Stepper.Panel>
-                          <PasoModo wizard={wizard} onChange={setWizard} />
-                        </Wizard.Stepper.Panel>
-                      )}
-                      {Wizard.utils.getIndex(methods.current.id) === 1 && (
-                        <Wizard.Stepper.Panel>
-                          <PasoBasicos
-                            wizard={wizard}
-                            onChange={setWizard}
-                            carrerasFiltradas={carrerasFiltradas}
-                          />
-                        </Wizard.Stepper.Panel>
-                      )}
-                      {Wizard.utils.getIndex(methods.current.id) === 2 && (
-                        <Wizard.Stepper.Panel>
-                          <PasoDetalles
-                            wizard={wizard}
-                            onChange={setWizard}
-                            onGenerarIA={generarPreviewIA}
-                            isLoading={wizard.isLoading}
-                          />
-                        </Wizard.Stepper.Panel>
-                      )}
-                      {Wizard.utils.getIndex(methods.current.id) === 3 && (
-                        <Wizard.Stepper.Panel>
-                          <PasoResumen wizard={wizard} />
-                        </Wizard.Stepper.Panel>
-                      )}
-                    </div>
-                  </div>
-
-                  {/* 3. CONTROLES (FIJO - Bottom Bun) 
-                    flex-none: Siempre visible abajo.
-                */}
-                  <div className="flex-none border-t bg-white p-6">
-                    <Wizard.Stepper.Controls className="flex items-center justify-between">
-                      <div className="flex-1">
-                        {wizard.errorMessage && (
-                          <span className="text-destructive text-sm font-medium">
-                            {wizard.errorMessage}
-                          </span>
-                        )}
-                      </div>
-
-                      <div className="flex gap-4">
-                        <Button
-                          variant="secondary"
-                          onClick={() => methods.prev()}
-                          disabled={
-                            Wizard.utils.getIndex(methods.current.id) === 0 ||
-                            wizard.isLoading
-                          }
-                        >
-                          Anterior
-                        </Button>
-
-                        {Wizard.utils.getIndex(methods.current.id) <
-                        Wizard.steps.length - 1 ? (
-                          <Button
-                            onClick={() => methods.next()}
-                            disabled={
-                              wizard.isLoading ||
-                              (Wizard.utils.getIndex(methods.current.id) ===
-                                0 &&
-                                !canContinueDesdeModo) ||
-                              (Wizard.utils.getIndex(methods.current.id) ===
-                                1 &&
-                                !canContinueDesdeBasicos) ||
-                              (Wizard.utils.getIndex(methods.current.id) ===
-                                2 &&
-                                !canContinueDesdeDetalles)
-                            }
-                          >
-                            Siguiente
-                          </Button>
-                        ) : (
-                          <Button
-                            onClick={crearPlan}
-                            disabled={wizard.isLoading}
-                          >
-                            Crear plan
-                          </Button>
-                        )}
-                      </div>
-                    </Wizard.Stepper.Controls>
-                  </div>
-                </>
-              )
-            }}
-          </Wizard.Stepper.Provider>
-        )}
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-function StepWithTooltip({ title, desc }: { title: string; desc: string }) {
-  const [isOpen, setIsOpen] = useState(false)
-
-  return (
-    <TooltipProvider delayDuration={0}>
-      <Tooltip open={isOpen} onOpenChange={setIsOpen}>
-        <TooltipTrigger asChild>
-          <span
-            className="cursor-help decoration-dotted underline-offset-4 hover:underline"
-            onClick={(e) => {
-              e.stopPropagation() // Evita que el clic dispare la navegación del stepper si está dentro de un botón
-              setIsOpen((prev) => !prev)
-            }}
-            onMouseEnter={() => setIsOpen(true)}
-            onMouseLeave={() => setIsOpen(false)}
-          >
-            {title}
-          </span>
-        </TooltipTrigger>
-        <TooltipContent className="max-w-[200px] text-xs">
-          <p>{desc}</p>
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  )
-}
-
-// Paso 1: selección de modo
-function PasoModo({
-  wizard,
-  onChange,
-}: {
-  wizard: NewPlanWizardState
-  onChange: React.Dispatch<React.SetStateAction<NewPlanWizardState>>
-}) {
-  const isSelected = (m: ModoCreacion) => wizard.modoCreacion === m
-  const isSubSelected = (s: SubModoClonado) => wizard.subModoClonado === s
-  return (
-    <div className="grid gap-4 sm:grid-cols-3">
-      <Card
-        className={isSelected('MANUAL') ? 'ring-ring ring-2' : ''}
-        onClick={() =>
-          onChange((w) => ({
-            ...w,
-            modoCreacion: 'MANUAL',
-            subModoClonado: undefined,
-          }))
-        }
-        role="button"
-        tabIndex={0}
-      >
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <Icons.Pencil className="text-primary h-5 w-5" /> Manual
-          </CardTitle>
-          <CardDescription>Plan vacío con estructura mínima.</CardDescription>
-        </CardHeader>
-      </Card>
-
-      <Card
-        className={isSelected('IA') ? 'ring-ring ring-2' : ''}
-        onClick={() =>
-          onChange((w) => ({
-            ...w,
-            modoCreacion: 'IA',
-            subModoClonado: undefined,
-          }))
-        }
-        role="button"
-        tabIndex={0}
-      >
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <Icons.Sparkles className="text-primary h-5 w-5" /> Con IA
-          </CardTitle>
-          <CardDescription>
-            Borrador completo a partir de datos base.
-          </CardDescription>
-        </CardHeader>
-      </Card>
-
-      <Card
-        className={isSelected('CLONADO') ? 'ring-ring ring-2' : ''}
-        onClick={() => onChange((w) => ({ ...w, modoCreacion: 'CLONADO' }))}
-        role="button"
-        tabIndex={0}
-      >
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <Icons.Copy className="text-primary h-5 w-5" /> Clonado
-          </CardTitle>
-          <CardDescription>Desde un plan existente o archivos.</CardDescription>
-        </CardHeader>
-        {wizard.modoCreacion === 'CLONADO' && (
-          <CardContent className="flex flex-col gap-3">
-            {/* USO DE GRID PARA RESPONSIVIDAD:
-      - grid-cols-1: En móviles (default) ocupan todo el ancho, uno encima de otro.
-      - sm:grid-cols-2: A partir de 640px, se ponen lado a lado con ancho equitativo.
-      - gap-3: El "ligero espacio" entre ellos.
-  */}
-
-            {/* OPCIÓN 1: INTERNO */}
-            <div
-              role="button"
-              tabIndex={0}
-              onClick={(e) => {
-                e.stopPropagation()
-                onChange((w) => ({ ...w, subModoClonado: 'INTERNO' }))
-              }}
-              className={`hover:border-primary/50 hover:bg-accent flex cursor-pointer flex-row items-center justify-center gap-2 rounded-lg border p-4 text-center transition-all sm:flex-col ${
-                isSubSelected('INTERNO')
-                  ? 'border-primary bg-primary/5 ring-primary text-primary ring-1' // Estado Activo
-                  : 'border-border text-muted-foreground' // Estado Inactivo
-              } `}
-            >
-              <Icons.Database className="mb-1 h-6 w-6" />
-              <span className="text-sm font-medium">Del sistema</span>
-            </div>
-
-            {/* OPCIÓN 2: TRADICIONAL */}
-            <div
-              role="button"
-              tabIndex={0}
-              onClick={(e) => {
-                e.stopPropagation()
-                onChange((w) => ({ ...w, subModoClonado: 'TRADICIONAL' }))
-              }}
-              className={`hover:border-primary/50 hover:bg-accent flex cursor-pointer flex-row items-center justify-center gap-2 rounded-lg border p-4 text-center transition-all sm:flex-col ${
-                isSubSelected('TRADICIONAL')
-                  ? 'border-primary bg-primary/5 ring-primary text-primary ring-1'
-                  : 'border-border text-muted-foreground'
-              } `}
-            >
-              <Icons.Upload className="mb-1 h-6 w-6" />
-              <span className="text-sm font-medium">Desde archivos</span>
-            </div>
-          </CardContent>
-        )}
-      </Card>
-    </div>
-  )
-}
-
-// Paso 2: datos básicos
-function PasoBasicos({
-  wizard,
-  onChange,
-  carrerasFiltradas,
-}: {
-  wizard: NewPlanWizardState
-  onChange: React.Dispatch<React.SetStateAction<NewPlanWizardState>>
-  carrerasFiltradas: typeof CARRERAS
-}) {
-  return (
-    <div className="grid gap-4 sm:grid-cols-2">
-      <div className="grid gap-1 sm:col-span-2">
-        <Label htmlFor="nombrePlan">Nombre del plan</Label>
-        <Input
-          id="nombrePlan"
-          placeholder="Ej. Ingeniería en Sistemas 2026"
-          value={wizard.datosBasicos.nombrePlan}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-            onChange((w) => ({
-              ...w,
-              datosBasicos: { ...w.datosBasicos, nombrePlan: e.target.value },
-            }))
-          }
-        />
-      </div>
-
-      {/* <div className="grid gap-1">
-        <Label htmlFor="facultad">Facultad</Label>
-        <select
-          id="facultad"
-          className="bg-background text-foreground ring-offset-background focus-visible:ring-ring h-10 w-full rounded-md border px-3 text-sm shadow-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
-          value={wizard.datosBasicos.facultadId}
-          onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
-            onChange((w) => ({
-              ...w,
-              datosBasicos: {
-                ...w.datosBasicos,
-                facultadId: e.target.value,
-                carreraId: '',
-              },
-            }))
-          }
-        >
-          <option value="">Selecciona facultad…</option>
-          {FACULTADES.map((f) => (
-            <option key={f.id} value={f.id}>
-              {f.nombre}
-            </option>
-          ))}
-        </select>
-      </div> */}
-      <div className="grid gap-1">
-        <Label htmlFor="facultad">Facultad</Label>
-        <Select
-          value={wizard.datosBasicos.facultadId}
-          onValueChange={(value) =>
-            onChange((w) => ({
-              ...w,
-              datosBasicos: {
-                ...w.datosBasicos,
-                facultadId: value,
-                carreraId: '', // Mantenemos tu lógica de resetear la carrera
-              },
-            }))
-          }
-        >
-          <SelectTrigger
-            id="facultad"
-            className="w-full min-w-0 [&>span]:block! [&>span]:truncate!"
-          >
-            <SelectValue placeholder="Selecciona facultad…" />
-          </SelectTrigger>
-          <SelectContent>
-            {FACULTADES.map((f) => (
-              <SelectItem key={f.id} value={f.id}>
-                {f.nombre}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
-
-      <div className="grid gap-1">
-        <Label htmlFor="carrera">Carrera</Label>
-        <Select
-          value={wizard.datosBasicos.carreraId}
-          onValueChange={(value) =>
-            onChange((w) => ({
-              ...w,
-              datosBasicos: { ...w.datosBasicos, carreraId: value },
-            }))
-          }
-          disabled={!wizard.datosBasicos.facultadId}
-        >
-          <SelectTrigger
-            id="carrera"
-            className="w-full min-w-0 [&>span]:block! [&>span]:truncate!"
-          >
-            <SelectValue placeholder="Selecciona carrera…" />
-          </SelectTrigger>
-          <SelectContent>
-            {carrerasFiltradas.map((c) => (
-              <SelectItem key={c.id} value={c.id}>
-                {c.nombre}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
-
-      <div className="grid gap-1">
-        <Label htmlFor="nivel">Nivel</Label>
-        <Select
-          value={wizard.datosBasicos.nivel}
-          onValueChange={(value) =>
-            onChange((w) => ({
-              ...w,
-              datosBasicos: { ...w.datosBasicos, nivel: value },
-            }))
-          }
-        >
-          <SelectTrigger
-            id="nivel"
-            className="w-full min-w-0 [&>span]:block! [&>span]:truncate!"
-          >
-            <SelectValue placeholder="Selecciona nivel…" />
-          </SelectTrigger>
-          <SelectContent>
-            {NIVELES.map((n) => (
-              <SelectItem key={n} value={n}>
-                {n}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
-
-      <div className="grid gap-1">
-        <Label htmlFor="tipoCiclo">Tipo de ciclo</Label>
-        <Select
-          value={wizard.datosBasicos.tipoCiclo}
-          onValueChange={(value) =>
-            onChange((w) => ({
-              ...w,
-              datosBasicos: {
-                ...w.datosBasicos,
-                tipoCiclo: value as TipoCiclo,
-              },
-            }))
-          }
-        >
-          <SelectTrigger
-            id="tipoCiclo"
-            className="w-full min-w-0 [&>span]:block! [&>span]:truncate!"
-          >
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            {TIPOS_CICLO.map((t) => (
-              <SelectItem key={t.value} value={t.value}>
-                {t.label}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
-
-      <div className="grid gap-1">
-        <Label htmlFor="numCiclos">Número de ciclos</Label>
-        <Input
-          id="numCiclos"
-          type="number"
-          min={1}
-          value={wizard.datosBasicos.numCiclos}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-            onChange((w) => ({
-              ...w,
-              datosBasicos: {
-                ...w.datosBasicos,
-                numCiclos: Number(e.target.value || 1),
-              },
-            }))
-          }
-        />
-      </div>
-    </div>
-  )
-}
-
-// Paso 3: detalles por modo
-function PasoDetalles({
-  wizard,
-  onChange,
-  onGenerarIA,
-  isLoading,
-}: {
-  wizard: NewPlanWizardState
-  onChange: React.Dispatch<React.SetStateAction<NewPlanWizardState>>
-  onGenerarIA: () => void
-  isLoading: boolean
-}) {
-  if (wizard.modoCreacion === 'MANUAL') {
-    return (
-      <Card>
-        <CardHeader>
-          <CardTitle>Creación manual</CardTitle>
-          <CardDescription>
-            Se creará un plan en blanco con estructura mínima.
-          </CardDescription>
-        </CardHeader>
-      </Card>
-    )
-  }
-
-  if (wizard.modoCreacion === 'IA') {
-    return (
-      <div className="grid gap-4">
-        <div>
-          <Label htmlFor="desc">Descripción del enfoque</Label>
-          <textarea
-            id="desc"
-            className="bg-background text-foreground ring-offset-background focus-visible:ring-ring min-h-24 w-full rounded-md border px-3 py-2 text-sm shadow-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
-            placeholder="Describe el enfoque del programa…"
-            value={wizard.iaConfig?.descripcionEnfoque || ''}
-            onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
-              onChange((w) => ({
-                ...w,
-                iaConfig: {
-                  ...(w.iaConfig || ({} as any)),
-                  descripcionEnfoque: e.target.value,
-                },
-              }))
-            }
-          />
-        </div>
-        <div>
-          <Label htmlFor="poblacion">Población objetivo</Label>
-          <Input
-            id="poblacion"
-            placeholder="Ej. Egresados de bachillerato con perfil STEM"
-            value={wizard.iaConfig?.poblacionObjetivo || ''}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-              onChange((w) => ({
-                ...w,
-                iaConfig: {
-                  ...(w.iaConfig || ({} as any)),
-                  poblacionObjetivo: e.target.value,
-                },
-              }))
-            }
-          />
-        </div>
-        <div>
-          <Label htmlFor="notas">Notas adicionales</Label>
-          <textarea
-            id="notas"
-            className="bg-background text-foreground ring-offset-background focus-visible:ring-ring min-h-24 w-full rounded-md border px-3 py-2 text-sm shadow-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
-            placeholder="Lineamientos institucionales, restricciones, etc."
-            value={wizard.iaConfig?.notasAdicionales || ''}
-            onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
-              onChange((w) => ({
-                ...w,
-                iaConfig: {
-                  ...(w.iaConfig || ({} as any)),
-                  notasAdicionales: e.target.value,
-                },
-              }))
-            }
-          />
-        </div>
-        <div className="flex items-center justify-between">
-          <div className="text-muted-foreground text-sm">
-            Opcional: se pueden adjuntar recursos IA más adelante.
-          </div>
-          <Button onClick={onGenerarIA} disabled={isLoading}>
-            {isLoading ? 'Generando…' : 'Generar borrador con IA'}
-          </Button>
-        </div>
-
-        {wizard.resumen.previewPlan && (
-          <Card>
-            <CardHeader>
-              <CardTitle>Preview IA</CardTitle>
-              <CardDescription>
-                Materias aprox.: {wizard.resumen.previewPlan.numMateriasAprox}
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <ul className="text-muted-foreground list-disc pl-5 text-sm">
-                {wizard.resumen.previewPlan.secciones?.map((s) => (
-                  <li key={s.id}>
-                    <span className="text-foreground font-medium">
-                      {s.titulo}:
-                    </span>{' '}
-                    {s.resumen}
-                  </li>
-                ))}
-              </ul>
-            </CardContent>
-          </Card>
-        )}
-      </div>
-    )
-  }
-
-  if (
-    wizard.modoCreacion === 'CLONADO' &&
-    wizard.subModoClonado === 'INTERNO'
-  ) {
-    return (
-      <div className="grid gap-4">
-        <div className="grid gap-3 sm:grid-cols-3">
-          <div>
-            <Label htmlFor="clonFacultad">Facultad</Label>
-            <select
-              id="clonFacultad"
-              className="bg-background text-foreground ring-offset-background focus-visible:ring-ring h-10 w-full rounded-md border px-3 text-sm shadow-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
-              value={wizard.datosBasicos.facultadId}
-              onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
-                onChange((w) => ({
-                  ...w,
-                  datosBasicos: {
-                    ...w.datosBasicos,
-                    facultadId: e.target.value,
-                  },
-                }))
-              }
-            >
-              <option value="">Todas</option>
-              {FACULTADES.map((f) => (
-                <option key={f.id} value={f.id}>
-                  {f.nombre}
-                </option>
-              ))}
-            </select>
-          </div>
-          <div>
-            <Label htmlFor="clonCarrera">Carrera</Label>
-            <select
-              id="clonCarrera"
-              className="bg-background text-foreground ring-offset-background focus-visible:ring-ring h-10 w-full rounded-md border px-3 text-sm shadow-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
-              value={wizard.datosBasicos.carreraId}
-              onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
-                onChange((w) => ({
-                  ...w,
-                  datosBasicos: {
-                    ...w.datosBasicos,
-                    carreraId: e.target.value,
-                  },
-                }))
-              }
-            >
-              <option value="">Todas</option>
-              {CARRERAS.map((c) => (
-                <option key={c.id} value={c.id}>
-                  {c.nombre}
-                </option>
-              ))}
-            </select>
-          </div>
-          <div>
-            <Label htmlFor="buscarPlan">Buscar</Label>
-            <Input
-              id="buscarPlan"
-              placeholder="Nombre del plan…"
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                const term = e.target.value.toLowerCase()
-                // Podrías guardar este término en estado local si quisieras.
-                void term
-              }}
-            />
-          </div>
-        </div>
-
-        <div className="grid gap-3">
-          {PLANES_EXISTENTES.filter(
-            (p) =>
-              (!wizard.datosBasicos.facultadId ||
-                p.facultadId === wizard.datosBasicos.facultadId) &&
-              (!wizard.datosBasicos.carreraId ||
-                p.carreraId === wizard.datosBasicos.carreraId),
-          ).map((p) => (
-            <Card
-              key={p.id}
-              className={
-                p.id === wizard.clonInterno?.planOrigenId
-                  ? 'ring-ring ring-2'
-                  : ''
-              }
-              onClick={() =>
-                onChange((w) => ({ ...w, clonInterno: { planOrigenId: p.id } }))
-              }
-              role="button"
-              tabIndex={0}
-            >
-              <CardHeader>
-                <CardTitle className="flex items-center justify-between">
-                  <span>{p.nombre}</span>
-                  <span className="text-muted-foreground text-sm">
-                    {p.estado} · {p.anio}
-                  </span>
-                </CardTitle>
-                <CardDescription>ID: {p.id}</CardDescription>
-              </CardHeader>
-            </Card>
-          ))}
-        </div>
-      </div>
-    )
-  }
-
-  if (
-    wizard.modoCreacion === 'CLONADO' &&
-    wizard.subModoClonado === 'TRADICIONAL'
-  ) {
-    return (
-      <div className="grid gap-4">
-        <div>
-          <Label htmlFor="word">Word del plan (obligatorio)</Label>
-          <input
-            id="word"
-            type="file"
-            accept=".doc,.docx"
-            className="bg-background text-foreground ring-offset-background focus-visible:ring-ring file:bg-secondary block w-full rounded-md border px-3 py-2 text-sm shadow-sm file:mr-4 file:rounded-md file:border-0 file:px-3 file:py-1.5 file:text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-              onChange((w) => ({
-                ...w,
-                clonTradicional: {
-                  ...(w.clonTradicional || ({} as any)),
-                  archivoWordPlanId: e.target.files?.[0]
-                    ? `file_${e.target.files[0].name}`
-                    : null,
-                },
-              }))
-            }
-          />
-        </div>
-        <div>
-          <Label htmlFor="mapa">Excel del mapa curricular</Label>
-          <input
-            id="mapa"
-            type="file"
-            accept=".xls,.xlsx"
-            className="bg-background text-foreground ring-offset-background focus-visible:ring-ring file:bg-secondary block w-full rounded-md border px-3 py-2 text-sm shadow-sm file:mr-4 file:rounded-md file:border-0 file:px-3 file:py-1.5 file:text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-              onChange((w) => ({
-                ...w,
-                clonTradicional: {
-                  ...(w.clonTradicional || ({} as any)),
-                  archivoMapaExcelId: e.target.files?.[0]
-                    ? `file_${e.target.files[0].name}`
-                    : null,
-                },
-              }))
-            }
-          />
-        </div>
-        <div>
-          <Label htmlFor="materias">Excel/listado de materias</Label>
-          <input
-            id="materias"
-            type="file"
-            accept=".xls,.xlsx,.csv"
-            className="bg-background text-foreground ring-offset-background focus-visible:ring-ring file:bg-secondary block w-full rounded-md border px-3 py-2 text-sm shadow-sm file:mr-4 file:rounded-md file:border-0 file:px-3 file:py-1.5 file:text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-              onChange((w) => ({
-                ...w,
-                clonTradicional: {
-                  ...(w.clonTradicional || ({} as any)),
-                  archivoMateriasExcelId: e.target.files?.[0]
-                    ? `file_${e.target.files[0].name}`
-                    : null,
-                },
-              }))
-            }
-          />
-        </div>
-        <div className="text-muted-foreground text-sm">
-          Sube al menos Word y uno de los Excel para continuar.
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Selecciona un modo</CardTitle>
-        <CardDescription>
-          Elige una opción en el paso anterior para continuar.
-        </CardDescription>
-      </CardHeader>
-    </Card>
-  )
-}
-
-// Paso 4: resumen
-function PasoResumen({ wizard }: { wizard: NewPlanWizardState }) {
-  const modo = wizard.modoCreacion
-  const sub = wizard.subModoClonado
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Resumen</CardTitle>
-        <CardDescription>
-          Verifica la información antes de crear.
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <div className="grid gap-2 text-sm">
-          <div>
-            <span className="text-muted-foreground">Nombre: </span>
-            <span className="font-medium">
-              {wizard.datosBasicos.nombrePlan || '—'}
-            </span>
-          </div>
-          <div>
-            <span className="text-muted-foreground">Facultad/Carrera: </span>
-            <span className="font-medium">
-              {wizard.datosBasicos.facultadId || '—'} /{' '}
-              {wizard.datosBasicos.carreraId || '—'}
-            </span>
-          </div>
-          <div>
-            <span className="text-muted-foreground">Nivel: </span>
-            <span className="font-medium">
-              {wizard.datosBasicos.nivel || '—'}
-            </span>
-          </div>
-          <div>
-            <span className="text-muted-foreground">Ciclos: </span>
-            <span className="font-medium">
-              {wizard.datosBasicos.numCiclos} ({wizard.datosBasicos.tipoCiclo})
-            </span>
-          </div>
-          <div className="mt-2">
-            <span className="text-muted-foreground">Modo: </span>
-            <span className="font-medium">
-              {modo === 'MANUAL' && 'Manual'}
-              {modo === 'IA' && 'Generado con IA'}
-              {modo === 'CLONADO' &&
-                sub === 'INTERNO' &&
-                'Clonado desde plan del sistema'}
-              {modo === 'CLONADO' &&
-                sub === 'TRADICIONAL' &&
-                'Importado desde documentos tradicionales'}
-            </span>
-          </div>
-          {wizard.resumen.previewPlan && (
-            <div className="bg-muted mt-2 rounded-md p-3">
-              <div className="font-medium">Preview IA</div>
-              <div className="text-muted-foreground">
-                Materias aprox.: {wizard.resumen.previewPlan.numMateriasAprox}
-              </div>
-            </div>
-          )}
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/src/routes/stepper.tsx b/src/routes/stepper.tsx
deleted file mode 100644
index b7cfb7b..0000000
--- a/src/routes/stepper.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-
-import { defineStepper } from '@/components/stepper'
-import { Button } from '@/components/ui/button'
-
-export const Route = createFileRoute('/stepper')({
-  component: MyFirstStepper,
-})
-
-const stepperInstance = defineStepper(
-  { id: 'step-1', title: 'Step 1' },
-  { id: 'step-2', title: 'Step 2' },
-  { id: 'step-3', title: 'Step 3' },
-)
-
-export function MyFirstStepper() {
-  return (
-    <stepperInstance.Stepper.Provider className="space-y-4">
-      {({ methods }) => (
-        <>
-          <stepperInstance.Stepper.Navigation>
-            {methods.all.map((step) => (
-              <stepperInstance.Stepper.Step
-                of={step.id}
-                onClick={() => methods.goTo(step.id)}
-              >
-                <stepperInstance.Stepper.Title>
-                  {step.title}
-                </stepperInstance.Stepper.Title>
-              </stepperInstance.Stepper.Step>
-            ))}
-          </stepperInstance.Stepper.Navigation>
-          {methods.switch({
-            'step-1': (step) => <Content id={step.id} />,
-            'step-2': (step) => <Content id={step.id} />,
-            'step-3': (step) => <Content id={step.id} />,
-          })}
-          <stepperInstance.Stepper.Controls>
-            {!methods.isLast && (
-              <Button
-                type="button"
-                variant="secondary"
-                onClick={methods.prev}
-                disabled={methods.isFirst}
-              >
-                Previous
-              </Button>
-            )}
-            <Button onClick={methods.isLast ? methods.reset : methods.next}>
-              {methods.isLast ? 'Reset' : 'Next'}
-            </Button>
-          </stepperInstance.Stepper.Controls>
-        </>
-      )}
-    </stepperInstance.Stepper.Provider>
-  )
-}
-
-const Content = ({ id }: { id: string }) => {
-  return (
-    <stepperInstance.Stepper.Panel className="h-50 content-center rounded border bg-slate-50 p-8">
-      <p className="text-xl font-normal">Content for {id}</p>
-    </stepperInstance.Stepper.Panel>
-  )
-}
diff --git a/src/routes/stepper2.tsx b/src/routes/stepper2.tsx
deleted file mode 100644
index 25ef11b..0000000
--- a/src/routes/stepper2.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-
-import { CircularProgress } from '@/components/CircularProgress'
-import { defineStepper } from '@/components/stepper' // Tu wrapper
-import { Button } from '@/components/ui/button'
-
-export const Route = createFileRoute('/stepper2')({
-  component: MobileStepperView,
-})
-
-// 1. Definimos los pasos igual que siempre
-const myStepper = defineStepper(
-  { id: 'contact', title: 'Contact Details' },
-  { id: 'shipping', title: 'Shipping Information' },
-  { id: 'billing', title: 'Billing Address' },
-  { id: 'review', title: 'Payment Review' },
-)
-
-export default function MobileStepperView() {
-  return (
-    // Usa el Provider del wrapper para tener el contexto
-    <myStepper.Stepper.Provider>
-      {({ methods }) => {
-        // Calculamos índices para el gráfico
-        const currentIndex =
-          methods.all.findIndex((s) => s.id === methods.current.id) + 1
-        const totalSteps = methods.all.length
-        const nextStep = methods.all[currentIndex] // El paso siguiente (si existe)
-
-        return (
-          <div className="flex h-full flex-col bg-white p-4">
-            {/* --- AQUÍ ESTÁ LA MAGIA (Tu UI Personalizada) --- */}
-            <div className="mb-6 flex items-center gap-4">
-              {/* El Gráfico Circular */}
-              <CircularProgress current={currentIndex} total={totalSteps} />
-
-              {/* Los Textos */}
-              <div className="flex flex-col">
-                <h2 className="text-lg font-bold text-slate-900">
-                  {methods.current.title}
-                </h2>
-                {nextStep && (
-                  <p className="text-sm text-slate-400">
-                    Next: {nextStep.title}
-                  </p>
-                )}
-              </div>
-            </div>
-            {/* ----------------------------------------------- */}
-
-            {/* El contenido de los pasos (Switch) */}
-            <div className="flex-1">
-              {methods.switch({
-                contact: () => <div>Formulario Contacto...</div>,
-                shipping: () => <div>Formulario Envío...</div>,
-                billing: () => <div>Formulario Facturación...</div>,
-                review: () => <div>Resumen...</div>,
-              })}
-            </div>
-
-            {/* Controles de Navegación (Footer) */}
-            <div className="mt-4 flex justify-between">
-              <Button
-                variant="ghost"
-                onClick={methods.prev}
-                disabled={methods.isFirst}
-              >
-                Back
-              </Button>
-              <Button
-                className="bg-red-500 text-white hover:bg-red-600"
-                onClick={methods.next}
-              >
-                {methods.isLast ? 'Finish' : 'Next'}
-              </Button>
-            </div>
-          </div>
-        )
-      }}
-    </myStepper.Stepper.Provider>
-  )
-}