Se agrega avance sobre detalle de plan de estudios

src/routes/planes2/$planId/route.tsx

@@ -0,0 +1,58 @@
+import { createFileRoute, Outlet, Link } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/planes2/$planId')({
+  component: PlanLayout,
+})
+
+function PlanLayout() {
+  const { planId } = Route.useParams()
+
+  return (
+    <div className="space-y-6">
+      {/* Header del plan */}
+      <div>
+        <Link to="/planes2" className="text-sm text-gray-500">
+          ← Volver a planes
+        </Link>
+
+        <h1 className="text-2xl font-bold mt-2">Plan de Estudios 2024</h1>
+        <p className="text-gray-600">
+          Ingeniería en Sistemas Computacionales
+        </p>
+      </div>
+
+      {/* Tabs */}
+      <nav className="flex gap-6 border-b">
+        <Tab to="/planes2/$planId" params={{ planId }}>
+          Datos Generales
+        </Tab>
+
+        <Tab to="/planes2/$planId/mapa" params={{ planId }}>
+          Mapa Curricular
+        </Tab>
+
+        <Tab to="/planes2/$planId/materias" params={{ planId }}>
+          Materias
+        </Tab>
+      </nav>
+
+      {/* Aquí se renderiza cada tab */}
+      <Outlet />
+    </div>
+  )
+}
+
+function Tab({ to, params, children }) {
+  return (
+    <Link
+      to={to}
+      params={params}
+      className="pb-2 border-b-2 border-transparent hover:border-teal-600"
+      activeProps={{
+        className: 'border-teal-600 text-teal-700 font-medium',
+      }}
+    >
+      {children}
+    </Link>
+  )
+}