diff --git a/src/routes/planes/$planId/_detalle/MateriaCard.tsx b/src/routes/planes/$planId/_detalle/MateriaCard.tsx
index 0f6bf41..403c7c9 100644
--- a/src/routes/planes/$planId/_detalle/MateriaCard.tsx
+++ b/src/routes/planes/$planId/_detalle/MateriaCard.tsx
@@ -1,5 +1,5 @@
 import * as Dialog from '@radix-ui/react-dialog';
-import { Pencil, X, Info } from 'lucide-react';
+import { Pencil, X } from 'lucide-react';
 export type Materia = {
   id: string;
   clave: string;
diff --git a/src/routes/planes/$planId/_detalle/datos.tsx b/src/routes/planes/$planId/_detalle/datos.tsx
index 90e58e9..8680682 100644
--- a/src/routes/planes/$planId/_detalle/datos.tsx
+++ b/src/routes/planes/$planId/_detalle/datos.tsx
@@ -1,41 +1,148 @@
 import { createFileRoute } from '@tanstack/react-router'
+import { useState } from 'react'
+import type { DatosGeneralesField } from '@/types/plan'
+import { Button } from '@/components/ui/button'
+import { Textarea } from '@/components/ui/textarea'
+import { 
+  Pencil, 
+  Check, 
+  X, 
+  Sparkles, 
+  AlertCircle 
+} from 'lucide-react'
+//import { toast } from 'sonner' // Asegúrate de tener sonner instalado o quita la línea
 
 export const Route = createFileRoute('/planes/$planId/_detalle/datos')({
-  component: DatosGenerales,
+  component: DatosGeneralesPage,
 })
 
-function DatosGenerales() {
+function DatosGeneralesPage() {
+  // 1. Definimos los DATOS iniciales (Lo que antes venía por props)
+  const [campos, setCampos] = useState<DatosGeneralesField[]>([
+    { id: '1', label: 'Objetivo General', value: 'Formar profesionales...', requerido: true, tipo: 'texto' },
+    { id: '2', label: 'Perfil de Ingreso', value: 'Interés por la tecnología...', requerido: true, tipo: 'lista' },
+    { id: '3', label: 'Perfil de Egreso', value: '', requerido: true, tipo: 'texto' },
+  ])
+
+  // 2. Estados de edición
+  const [editingId, setEditingId] = useState<string | null>(null)
+  const [editValue, setEditValue] = useState('')
+
+  // 3. Manejadores de acciones (Ahora como funciones locales)
+  const handleEdit = (campo: DatosGeneralesField) => {
+    setEditingId(campo.id)
+    setEditValue(campo.value)
+  }
+
+  const handleCancel = () => {
+    setEditingId(null)
+    setEditValue('')
+  }
+
+  const handleSave = (id: string) => {
+    // Actualizamos el estado local de la lista
+    setCampos(prev => prev.map(c => 
+      c.id === id ? { ...c, value: editValue } : c
+    ))
+    setEditingId(null)
+    setEditValue('')
+    //toast.success('Cambios guardados localmente')
+  }
+
+  const handleIARequest = (id: string) => {
+    //toast.info('La IA está analizando el campo ' + id)
+    // Aquí conectarías con tu endpoint de IA
+  }
+
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-      <Card title="Objetivo General">
-        Formar profesionales altamente capacitados...
-      </Card>
+    <div className="container mx-auto px-6 py-6 animate-in fade-in duration-500">
+      <div className="mb-6">
+        <h2 className="text-lg font-semibold text-foreground">
+          Datos Generales del Plan
+        </h2>
+        <p className="text-sm text-muted-foreground mt-1">
+          Información estructural y descriptiva del plan de estudios
+        </p>
+      </div>
 
-      <Card title="Perfil de Ingreso">
-        Egresados de educación media superior...
-      </Card>
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {campos.map((campo) => {
+          const isEditing = editingId === campo.id
 
-      <Card title="Perfil de Egreso">
-        Profesional capaz de diseñar...
-      </Card>
+          return (
+            <div
+              key={campo.id}
+              className={`border rounded-xl transition-all ${
+                isEditing ? 'border-teal-500 ring-2 ring-teal-50 shadow-lg' : 'bg-white hover:shadow-md'
+              }`}
+            >
+              {/* Header de la Card */}
+              <div className="flex items-center justify-between px-5 py-3 border-b bg-slate-50/50">
+                <div className="flex items-center gap-2">
+                  <h3 className="font-medium text-sm text-slate-700">{campo.label}</h3>
+                  {campo.requerido && <span className="text-red-500 text-xs">*</span>}
+                </div>
 
-      <Card title="Competencias Genéricas">
-        Pensamiento crítico, comunicación efectiva...
-      </Card>
+                {!isEditing && (
+                  <div className="flex gap-1">
+                    <Button variant="ghost" size="icon" className="h-8 w-8 text-teal-600" onClick={() => handleIARequest(campo.id)}>
+                      <Sparkles size={14} />
+                    </Button>
+                    <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => handleEdit(campo)}>
+                      <Pencil size={14} />
+                    </Button>
+                  </div>
+                )}
+              </div>
+
+              {/* Contenido de la Card */}
+              <div className="p-5">
+                {isEditing ? (
+                  <div className="space-y-3">
+                    <Textarea
+                      value={editValue}
+                      onChange={(e) => setEditValue(e.target.value)}
+                      className="min-h-[120px]"
+                    />
+                    <div className="flex justify-end gap-2">
+                      <Button variant="outline" size="sm" onClick={handleCancel}>
+                        <X size={14} className="mr-1" /> Cancelar
+                      </Button>
+                      <Button size="sm" className="bg-teal-600 hover:bg-teal-700" onClick={() => handleSave(campo.id)}>
+                        <Check size={14} className="mr-1" /> Guardar
+                      </Button>
+                    </div>
+                  </div>
+                ) : (
+                  <div className="min-h-[100px]">
+                    {campo.value ? (
+                      <div className="text-sm text-slate-600 leading-relaxed">
+                        {campo.tipo === 'lista' ? (
+                          <ul className="space-y-1">
+                            {campo.value.split('\n').map((item, i) => (
+                              <li key={i} className="flex gap-2">
+                                <span className="mt-1.5 h-1.5 w-1.5 rounded-full bg-teal-500 shrink-0" />
+                                {item}
+                              </li>
+                            ))}
+                          </ul>
+                        ) : (
+                          <p className="whitespace-pre-wrap">{campo.value}</p>
+                        )}
+                      </div>
+                    ) : (
+                      <div className="flex items-center gap-2 text-slate-400 text-sm">
+                        <AlertCircle size={14} />
+                        <span>Sin contenido.</span>
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+            </div>
+          )
+        })}
+      </div>
     </div>
   )
-}
-
-interface CustomCardProps {
-  title: string;
-  children: React.ReactNode;
-}
-
-function Card({ title, children }: CustomCardProps) {
-  return (
-    <div className="rounded-lg border bg-white p-4">
-      <h3 className="font-semibold mb-2">{title}</h3>
-      <p className="text-sm text-gray-600">{children}</p>
-    </div>
-  )
-}
+}
\ No newline at end of file
diff --git a/src/routes/planes/$planId/_detalle/mapa.tsx b/src/routes/planes/$planId/_detalle/mapa.tsx
index 8e73c1f..3999584 100644
--- a/src/routes/planes/$planId/_detalle/mapa.tsx
+++ b/src/routes/planes/$planId/_detalle/mapa.tsx
@@ -1,123 +1,302 @@
 import { createFileRoute } from '@tanstack/react-router'
-import { MateriaCard } from './MateriaCard';
-import type { Materia } from './MateriaCard'; // Agregamos 'type' aquí
+import { useState } from 'react'
+import { Badge } from '@/components/ui/badge'
+import { Input } from '@/components/ui/input'
+import { 
+  Plus, 
+  ChevronDown, 
+  AlertTriangle, 
+  GripVertical,
+  Trash2
+} from 'lucide-react'
+import type { Materia, LineaCurricular } from '@/types/plan'
+import { Button } from '@/components/ui/button'
+import { 
+  Dialog, DialogContent, DialogHeader, DialogTitle 
+} from "@/components/ui/dialog"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
 
 export const Route = createFileRoute('/planes/$planId/_detalle/mapa')({
-  component: MapaCurricular,
+  component: MapaCurricularPage,
 })
 
-const CICLOS = ["Ciclo 1", "Ciclo 2", "Ciclo 3", "Ciclo 4", "Ciclo 5", "Ciclo 6", "Ciclo 7", "Ciclo 8", "Ciclo 9"];
-const LINEAS = ["Formación Básica", "Ciencias de la Computación", "Desarrollo de Software", "Redes y Seguridad", "Gestión y Profesionalización"];
+// --- Constantes de Estilo y Datos ---
+const INITIAL_LINEAS: LineaCurricular[] = [
+  { id: 'l1', nombre: 'Formación Básica', orden: 1 },
+  { id: 'l2', nombre: 'Ciencias de la Computación', orden: 2 },
+];
 
-// Ejemplo de materia
-const MATERIAS: Materia[] = [
-  {
-    id: "1",
-    clave: 'MAT101',
-    nombre: 'Cálculo Diferencial',
-    creditos: 8,
-    hd: 4,
-    hi: 4,
-    ciclo: 1,
-    linea: 'Formación Básica',
-    tipo: 'Obligatoria',
-    estado: 'Aprobada',
-  },
-  {
-    id: "2",
-    clave: 'FIS101',
-    nombre: 'Física Mecánica',
-    creditos: 6,
-    hd: 3,
-    hi: 3,
-    ciclo: 1,
-    linea: 'Formación Básica',
-    tipo: 'Obligatoria',
-    estado: 'Aprobada',
-  },
-  {
-    id: "3",
-    clave: 'PRO101',
-    nombre: 'Fundamentos de Programación',
-    creditos: 8,
-    hd: 4,
-    hi: 4,
-    ciclo: 1,
-    linea: 'Ciencias de la Computación',
-    tipo: 'Obligatoria',
-    estado: 'Revisada',
-  },
-  {
-    id: "4",
-    clave: 'EST101',
-    nombre: 'Estructura de Datos',
-    creditos: 6,
-    hd: 3,
-    hi: 3,
-    ciclo: 2,
-    linea: 'Ciencias de la Computación',
-    tipo: 'Obligatoria',
-    estado: 'Borrador',
-  },
-]
+const INITIAL_MATERIAS: Materia[] = [
+  { id: "1", clave: 'MAT101', nombre: 'Cálculo Diferencial', creditos: 8, hd: 4, hi: 4, ciclo: 1, lineaCurricularId: 'l1', tipo: 'obligatoria', estado: 'aprobada' },
+  { id: "2", clave: 'FIS101', nombre: 'Física Mecánica', creditos: 6, hd: 3, hi: 3, ciclo: 1, lineaCurricularId: 'l1', tipo: 'obligatoria', estado: 'aprobada' },
+  { id: "3", clave: 'PRO101', nombre: 'Fundamentos de Programación', creditos: 8, hd: 4, hi: 4, ciclo: null, lineaCurricularId: null, tipo: 'obligatoria', estado: 'borrador' },
+];
 
-function MapaCurricular() {
+const lineColors = [
+  'bg-blue-50 border-blue-200 text-blue-700',
+  'bg-purple-50 border-purple-200 text-purple-700',
+  'bg-orange-50 border-orange-200 text-orange-700',
+  'bg-emerald-50 border-emerald-200 text-emerald-700',
+];
+
+const statusBadge: Record<string, string> = {
+  borrador: 'bg-slate-100 text-slate-600',
+  revisada: 'bg-amber-100 text-amber-700',
+  aprobada: 'bg-emerald-100 text-emerald-700',
+};
+
+// --- Subcomponentes ---
+function StatItem({ label, value, total }: { label: string, value: number, total?: number }) {
   return (
-    <div className="p-4 overflow-x-auto">
-      <h2 className="text-xl font-semibold mb-6">Mapa Curricular</h2>
+    <div className="flex items-baseline gap-1.5">
+      <span className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">{label}:</span>
+      <span className="text-sm font-bold text-slate-700">
+        {value}{total ? <span className="text-slate-400 font-normal">/{total}</span> : ''}
+      </span>
+    </div>
+  )
+}
 
-      {/* Contenedor de la Grid */}
-      <div 
-        className="grid min-w-[1200px] border-l border-t border-slate-200"
-        style={{ 
-          // 1 columna para nombres de líneas + 9 ciclos
-          gridTemplateColumns: '200px repeat(9, 1fr)',
-        }}
-      >
-        {/* Header: Espacio vacío + Ciclos */}
-        <div className="bg-slate-50 p-2 border-r border-b border-slate-200 font-medium text-sm text-slate-500">
-          Línea Curricular
-        </div>
-        {CICLOS.map((ciclo) => (
-          <div key={ciclo} className="bg-slate-50 p-2 border-r border-b border-slate-200 text-center font-medium text-sm text-slate-500">
-            {ciclo}
-          </div>
-        ))}
-
-        {/* Filas por cada Línea Curricular */}
-        {LINEAS.map((linea) => (
-          <>
-            {/* Nombre de la línea (Primera columna) */}
-            <div className="bg-slate-50 p-3 border-r border-b border-slate-200 flex items-center text-xs font-bold uppercase text-slate-600">
-              {linea}
-            </div>
-
-            {/* Celdas para cada ciclo en esta línea */}
-            {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((numCiclo) => (
-              <div 
-                key={`${linea}-${numCiclo}`} 
-                className="p-2 border-r border-b border-slate-100 min-h-[120px] bg-white/50"
-              >
-                {/* Filtrar materias que pertenecen a esta posición */}
-                {MATERIAS.filter(m => m.linea === linea && m.ciclo === numCiclo).map((materia) => (
-                <MateriaCard key={materia.id} materia={materia} />
-              ))}
-              </div>
-            ))}
-          </>
-        ))}
+function MateriaCardItem({ materia, onDragStart, isDragging, onClick }: { 
+  materia: Materia, 
+  onDragStart: (e: React.DragEvent, id: string) => void,
+  isDragging: boolean,
+  onClick: () => void
+}) {
+  return (
+    <div
+      draggable
+      onDragStart={(e) => onDragStart(e, materia.id)}
+      onClick={onClick}
+      className={`group p-3 rounded-lg border bg-white shadow-sm cursor-grab active:cursor-grabbing transition-all ${
+        isDragging ? 'opacity-40 scale-95' : 'hover:border-teal-400 hover:shadow-md'
+      }`}
+    >
+      <div className="flex justify-between items-start mb-1">
+        <span className="text-[10px] font-mono font-bold text-slate-400">{materia.clave}</span>
+        <Badge variant="outline" className={`text-[9px] px-1 py-0 uppercase ${statusBadge[materia.estado] || ''}`}>
+          {materia.estado}
+        </Badge>
       </div>
-
-      {/* Sección de materias sin asignar (como en tu imagen) */}
-      <div className="mt-8">
-        <h3 className="text-sm font-bold text-slate-500 mb-3 uppercase tracking-wider">Materias sin asignar</h3>
-        <div className="flex gap-4">
-           <div className="p-3 border rounded-lg bg-slate-50 border-dashed border-slate-300 w-48 text-[10px]">
-              <div className="font-bold">Inglés Técnico</div>
-              <div className="text-slate-500">4 cr • HD: 2 • HI: 2</div>
-           </div>
-        </div>
+      <p className="text-xs font-bold text-slate-700 leading-tight mb-1">{materia.nombre}</p>
+      <div className="flex items-center justify-between mt-2">
+        <span className="text-[10px] text-slate-500">{materia.creditos} CR • HD:{materia.hd} • HI:{materia.hi}</span>
+        <GripVertical size={12} className="text-slate-300 opacity-0 group-hover:opacity-100 transition-opacity" />
       </div>
     </div>
   )
+}
+
+// --- Componente Principal ---
+function MapaCurricularPage() {
+  const [materias, setMaterias] = useState<Materia[]>(INITIAL_MATERIAS);
+  const [lineas, setLineas] = useState<LineaCurricular[]>(INITIAL_LINEAS);
+  const [draggedMateria, setDraggedMateria] = useState<string | null>(null);
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [selectedMateria, setSelectedMateria] = useState<Materia | null>(null);
+  
+  const ciclosTotales = 9;
+  const ciclosArray = Array.from({ length: ciclosTotales }, (_, i) => i + 1);
+
+  // --- Lógica de Gestión ---
+  const agregarLinea = (nombre: string) => {
+    const nueva = { id: crypto.randomUUID(), nombre, orden: lineas.length + 1 };
+    setLineas([...lineas, nueva]);
+  };
+
+  const borrarLinea = (id: string) => {
+    setMaterias(prev => prev.map(m => m.lineaCurricularId === id ? { ...m, ciclo: null, lineaCurricularId: null } : m));
+    setLineas(prev => prev.filter(l => l.id !== id));
+  };
+
+  const getTotalesCiclo = (ciclo: number) => {
+    return materias.filter(m => m.ciclo === ciclo).reduce((acc, m) => ({
+      cr: acc.cr + (m.creditos || 0), hd: acc.hd + (m.hd || 0), hi: acc.hi + (m.hi || 0)
+    }), { cr: 0, hd: 0, hi: 0 });
+  };
+
+  const getSubtotalLinea = (lineaId: string) => {
+    return materias.filter(m => m.lineaCurricularId === lineaId && m.ciclo !== null).reduce((acc, m) => ({
+      cr: acc.cr + (m.creditos || 0), hd: acc.hd + (m.hd || 0), hi: acc.hi + (m.hi || 0)
+    }), { cr: 0, hd: 0, hi: 0 });
+  };
+
+  // --- Handlers Drag & Drop ---
+  const handleDragStart = (e: React.DragEvent, id: string) => { setDraggedMateria(id); e.dataTransfer.effectAllowed = 'move'; };
+  const handleDragOver = (e: React.DragEvent) => e.preventDefault();
+  const handleDrop = (e: React.DragEvent, ciclo: number | null, lineaId: string | null) => {
+    e.preventDefault();
+    if (draggedMateria) {
+      setMaterias(prev => prev.map(m => m.id === draggedMateria ? { ...m, ciclo, lineaCurricularId: lineaId } : m));
+      setDraggedMateria(null);
+    }
+  };
+
+  // --- Estadísticas Generales ---
+  const stats = materias.reduce((acc, m) => {
+    if (m.ciclo !== null) {
+      acc.cr += m.creditos || 0; acc.hd += m.hd || 0; acc.hi += m.hi || 0;
+    }
+    return acc;
+  }, { cr: 0, hd: 0, hi: 0 });
+
+  return (
+    <div className="container mx-auto px-2 py-6">
+      {/* Header */}
+      <div className="flex justify-between items-center mb-6">
+        <div>
+          <h2 className="text-xl font-bold">Mapa Curricular</h2>
+          <p className="text-sm text-slate-500">Organiza las materias por línea curricular y ciclo</p>
+        </div>
+        <div className="flex items-center gap-3">
+          {materias.filter(m => !m.ciclo).length > 0 && (
+            <Badge className="bg-amber-50 text-amber-600 border-amber-100 hover:bg-amber-50">
+              <AlertTriangle size={14} className="mr-1" /> {materias.filter(m => !m.ciclo).length} materias sin asignar
+            </Badge>
+          )}
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button className="bg-teal-700 hover:bg-teal-800 text-white">
+                <Plus size={16} className="mr-2" /> Agregar <ChevronDown size={14} className="ml-2" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem onClick={() => agregarLinea("Nueva Línea")}>Nueva Línea Curricular</DropdownMenuItem>
+              <DropdownMenuItem onClick={() => agregarLinea("Área Común")}>Agregar Área Común</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+
+      {/* Barra Totales */}
+      <div className="bg-slate-50/80 border border-slate-200 rounded-xl p-4 mb-8 flex gap-10">
+        <StatItem label="Total Créditos" value={stats.cr} total={320} />
+        <StatItem label="Total HD" value={stats.hd} />
+        <StatItem label="Total HI" value={stats.hi} />
+        <StatItem label="Total Horas" value={stats.hd + stats.hi} />
+      </div>
+
+      {/* Grid Principal */}
+      <div className="overflow-x-auto pb-6">
+        <div className="min-w-[1500px]">
+          {/* Header Ciclos */}
+          <div className="grid gap-3 mb-4" style={{ gridTemplateColumns: `220px repeat(${ciclosTotales}, 1fr) 120px` }}>
+            <div className="text-xs font-bold text-slate-400 self-end px-2">LÍNEA CURRICULAR</div>
+            {ciclosArray.map(n => <div key={n} className="bg-slate-100 rounded-lg p-2 text-center text-sm font-bold text-slate-600">Ciclo {n}</div>)}
+            <div className="text-xs font-bold text-slate-400 self-end text-center">SUBTOTAL</div>
+          </div>
+
+          {/* Filas por Línea */}
+          {lineas.map((linea, idx) => {
+            const sub = getSubtotalLinea(linea.id);
+            return (
+              <div key={linea.id} className="grid gap-3 mb-3" style={{ gridTemplateColumns: `220px repeat(${ciclosTotales}, 1fr) 120px` }}>
+                <div className={`p-4 rounded-xl border-l-4 flex justify-between items-center ${lineColors[idx % lineColors.length]}`}>
+                  <span className="text-xs font-bold">{linea.nombre}</span>
+                  <Trash2 size={14} className="text-slate-400 hover:text-red-500 cursor-pointer" onClick={() => borrarLinea(linea.id)} />
+                </div>
+
+                {ciclosArray.map(ciclo => (
+                  <div
+                    key={ciclo}
+                    onDragOver={handleDragOver}
+                    onDrop={(e) => handleDrop(e, ciclo, linea.id)}
+                    className="min-h-[140px] p-2 rounded-xl border-2 border-dashed border-slate-100 bg-slate-50/20 space-y-2"
+                  >
+                    {materias.filter(m => m.ciclo === ciclo && m.lineaCurricularId === linea.id).map(m => (
+                      <MateriaCardItem key={m.id} materia={m} isDragging={draggedMateria === m.id} onDragStart={handleDragStart} onClick={() => { setSelectedMateria(m); setIsEditModalOpen(true); }} />
+                    ))}
+                  </div>
+                ))}
+
+                <div className="p-4 bg-slate-50 rounded-xl flex flex-col justify-center text-[10px] text-slate-500 font-medium border border-slate-100">
+                   <div>Cr: {sub.cr}</div><div>HD: {sub.hd}</div><div>HI: {sub.hi}</div>
+                </div>
+              </div>
+            )
+          })}
+
+          {/* Fila Totales Ciclo */}
+          <div className="grid gap-3 mt-6 border-t pt-4" style={{ gridTemplateColumns: `220px repeat(${ciclosTotales}, 1fr) 120px` }}>
+            <div className="p-2 font-bold text-slate-600">Totales por Ciclo</div>
+            {ciclosArray.map(ciclo => {
+              const t = getTotalesCiclo(ciclo);
+              return (
+                <div key={ciclo} className="text-[10px] text-center p-2 bg-slate-50 rounded-lg">
+                  <div className="font-bold text-slate-700">Cr: {t.cr}</div>
+                  <div>HD: {t.hd} • HI: {t.hi}</div>
+                </div>
+              )
+            })}
+            <div className="bg-teal-50 rounded-lg p-2 text-center text-teal-800 font-bold text-xs flex flex-col justify-center">
+              <div>{stats.cr} Cr</div><div>{stats.hd + stats.hi} Hrs</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Modal de Edición */}
+      <Dialog open={isEditModalOpen} onOpenChange={setIsEditModalOpen}>
+        <DialogContent className="sm:max-w-[500px]">
+          <DialogHeader><DialogTitle>Editar Materia</DialogTitle></DialogHeader>
+          {selectedMateria && (
+            <div className="grid grid-cols-2 gap-4 py-4">
+              <div className="space-y-2"><label className="text-xs font-bold uppercase">Clave</label><Input defaultValue={selectedMateria.clave} /></div>
+              <div className="space-y-2"><label className="text-xs font-bold uppercase">Nombre</label><Input defaultValue={selectedMateria.nombre} /></div>
+              <div className="space-y-2"><label className="text-xs font-bold uppercase">Créditos</label><Input type="number" defaultValue={selectedMateria.creditos} /></div>
+              <div className="flex gap-2">
+                <div className="space-y-2"><label className="text-xs font-bold uppercase">HD</label><Input type="number" defaultValue={selectedMateria.hd} /></div>
+                <div className="space-y-2"><label className="text-xs font-bold uppercase">HI</label><Input type="number" defaultValue={selectedMateria.hi} /></div>
+              </div>
+            </div>
+          )}
+          <div className="flex justify-end gap-3 mt-4">
+            <Button variant="outline" onClick={() => setIsEditModalOpen(false)}>Cancelar</Button>
+            <Button className="bg-teal-700 text-white">Guardar Cambios</Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+          {/* 4. Materias Pendientes (Sin Asignar) */}
+      {materias.filter(m => m.ciclo === null).length > 0 && (
+        <div className="mt-10 p-6 bg-slate-50 rounded-2xl border border-slate-200 shadow-sm animate-in slide-in-from-bottom-4 duration-500">
+          <div className="flex items-center gap-2 mb-4 text-amber-600">
+            <AlertTriangle size={20} />
+            <h3 className="font-bold text-sm uppercase tracking-tight">
+              Materias pendientes de asignar ({materias.filter(m => m.ciclo === null).length})
+            </h3>
+          </div>
+          
+          <div 
+            className={`flex flex-wrap gap-4 min-h-[100px] p-4 rounded-xl border-2 border-dashed transition-all ${
+              draggedMateria ? 'border-amber-200 bg-amber-50/50' : 'border-slate-200 bg-white/50'
+            }`}
+            onDragOver={handleDragOver}
+            onDrop={(e) => handleDrop(e, null, null)} // null devuelve la materia al estado "sin asignar"
+          >
+            {materias
+              .filter(m => m.ciclo === null)
+              .map(m => (
+                <div key={m.id} className="w-[200px]">
+                  <MateriaCardItem 
+                    materia={m} 
+                    isDragging={draggedMateria === m.id} 
+                    onDragStart={handleDragStart} 
+                    onClick={() => { setSelectedMateria(m); setIsEditModalOpen(true); }} 
+                  />
+                </div>
+              ))}
+          </div>
+          <p className="mt-3 text-[11px] text-slate-400 italic text-center">
+            Arrastra las materias desde aquí hacia cualquier ciclo y línea del mapa curricular.
+          </p>
+        </div>
+      )}
+    </div>
+  )
 }
\ No newline at end of file
diff --git a/src/types/plan.ts b/src/types/plan.ts
new file mode 100644
index 0000000..b4c8510
--- /dev/null
+++ b/src/types/plan.ts
@@ -0,0 +1,102 @@
+export type PlanStatus = 
+  | 'borrador' 
+  | 'revision' 
+  | 'expertos' 
+  | 'consejo' 
+  | 'aprobado' 
+  | 'rechazado';
+
+export type TipoPlan = 'Licenciatura' | 'Maestría' | 'Doctorado' | 'Especialidad';
+
+export type TipoMateria = 'obligatoria' | 'optativa' | 'troncal';
+
+export type MateriaStatus = 'borrador' | 'revisada' | 'aprobada';
+
+export interface Facultad {
+  id: string;
+  nombre: string;
+  color: string;
+  icono: string;
+}
+
+export interface Carrera {
+  id: string;
+  nombre: string;
+  facultadId: string;
+}
+
+export interface LineaCurricular {
+  id: string;
+  nombre: string;
+  orden: number;
+  color?: string;
+}
+
+export interface Materia {
+  id: string;
+  clave: string;
+  nombre: string;
+  creditos: number;
+  ciclo: number | null;
+  lineaCurricularId: string | null;
+  tipo: TipoMateria;
+  estado: MateriaStatus;
+  orden?: number;
+  hd: number;      // <--- Añadir
+  hi: number;      // <--- Añadir
+}
+
+export interface Plan {
+  id: string;
+  nombre: string;
+  carrera: Carrera;
+  facultad: Facultad;
+  tipoPlan: TipoPlan;
+  nivel?: string;
+  modalidad?: string;
+  duracionCiclos: number;
+  creditosTotales: number;
+  fechaCreacion: string;
+  estadoActual: PlanStatus;
+}
+
+export interface DatosGeneralesField {
+  id: string;
+  label: string;
+  value: string;
+  tipo: 'texto' | 'lista' | 'parrafo';
+  requerido: boolean;
+}
+
+export interface CambioPlan {
+  id: string;
+  fecha: string;
+  usuario: string;
+  tab: string;
+  descripcion: string;
+  detalle?: string;
+}
+
+export interface ComentarioFlujo {
+  id: string;
+  usuario: string;
+  fecha: string;
+  texto: string;
+  fase: PlanStatus;
+}
+
+export interface DocumentoPlan {
+  id: string;
+  fechaGeneracion: string;
+  version: number;
+  url?: string;
+}
+
+export type PlanTab = 
+  | 'datos-generales' 
+  | 'mapa-curricular' 
+  | 'materias' 
+  | 'flujo' 
+  | 'ia' 
+  | 'documento' 
+  | 'historial';