Se agrega vista principaldel detalle del plan

src/components/layout/AppLayout.tsx

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react'
+import { Sidebar } from './Sidebar'
+import { Header } from './Header'
+import { StatsGrid } from '../plans/StatsGrid'
+
+export function AppLayout({ children }: { children: ReactNode }) {
+  return (
+    <div className="min-h-screen flex bg-gray-100">
+      {/* <Sidebar /> */}
+
+      <div className="flex-1 flex flex-col">
+        <Header />
+
+        {/* Separación Header → Stats */}
+        <section className="mt-4 bg-white border-b">
+          <div className="px-6 py-6">
+            <StatsGrid />
+          </div>
+        </section>
+
+        <main className="flex-1 p-6">
+          {children}
+        </main>
+      </div>
+    </div>
+  )
+}

src/components/layout/Header.tsx

@@ -0,0 +1,18 @@
+export function Header() {
+  return (
+    <div className="flex items-center gap-4 bg-white border-b shadow-[0_1px_2px_rgba(0,0,0,0.05)] z-10 relative">
+      <div className="h-12 w-12 rounded-full bg-emerald-600 flex items-center justify-center text-white">
+        🎓
+      </div>
+
+      <div>
+        <h1 className="text-xl font-semibold text-gray-900">
+          Gestión Curricular
+        </h1>
+        <p className="text-sm text-gray-500">
+          Sistema de Planes de Estudio
+        </p>
+      </div>
+    </div>
+  )
+}

src/components/layout/Sidebar.tsx

@@ -0,0 +1,32 @@
+import { LayoutGrid, BookOpen } from 'lucide-react'
+
+export function Sidebar() {
+  return (
+    <aside className="w-64 bg-white border-r px-4 py-6">
+      <h2 className="text-lg font-semibold mb-6">
+        Planes de Estudio
+      </h2>
+
+      <nav className="space-y-2">
+        <NavItem icon={LayoutGrid} label="Dashboard" active />
+        <NavItem icon={BookOpen} label="Planes" />
+      </nav>
+    </aside>
+  )
+}
+
+function NavItem({ icon: Icon, label, active }: any) {
+  return (
+    <div
+      className={`flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer
+        ${
+          active
+            ? 'bg-gray-100 text-gray-900'
+            : 'text-gray-500 hover:bg-gray-50'
+        }`}
+    >
+      <Icon size={18} />
+      <span className="text-sm font-medium">{label}</span>
+    </div>
+  )
+}