Actualizar esta sección de seriación fix #195

Reviewed-on: #199

.gitea/workflows/deploy.yaml

@@ -0,0 +1,37 @@
+name: Deploy to Azure Static Web Apps
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+
+      - name: Install dependencies
+        run: bun install
+
+      - name: Build
+        env:
+          VITE_SUPABASE_URL: ${{ vars.VITE_SUPABASE_URL }}
+          VITE_SUPABASE_ANON_KEY: ${{ vars.VITE_SUPABASE_ANON_KEY }}
+        run: bunx --bun vite build
+
+      # No hace falta instalar el CLI globalmente, usamos bunx
+      - name: Deploy to Azure Static Web Apps
+        env:
+          AZURE_SWA_DEPLOYMENT_TOKEN: ${{ secrets.AZURE_SWA_DEPLOYMENT_TOKEN }}
+        run: |
+          bunx @azure/static-web-apps-cli deploy ./dist \
+            --env production \
+            --deployment-token "$AZURE_SWA_DEPLOYMENT_TOKEN"

bun.lock

@@ -4,6 +4,7 @@
     "": {
       "name": "acad-ia-2",
       "dependencies": {
+        "@dnd-kit/react": "^0.3.2",
         "@radix-ui/react-alert-dialog": "^1.1.15",
         "@radix-ui/react-avatar": "^1.1.11",
         "@radix-ui/react-checkbox": "^1.3.3",
@@ -138,6 +139,18 @@
 
     "@csstools/css-tokenizer": ["@csstools/css-tokenizer@3.0.4", "", {}, "sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw=="],
 
+    "@dnd-kit/abstract": ["@dnd-kit/abstract@0.3.2", "", { "dependencies": { "@dnd-kit/geometry": "^0.3.2", "@dnd-kit/state": "^0.3.2", "tslib": "^2.6.2" } }, "sha512-uvPVK+SZYD6Viddn9M0K0JQdXknuVSxA/EbMlFRanve3P/XTc18oLa5zGftKSGjfQGmuzkZ34E26DSbly1zi3Q=="],
+
+    "@dnd-kit/collision": ["@dnd-kit/collision@0.3.2", "", { "dependencies": { "@dnd-kit/abstract": "^0.3.2", "@dnd-kit/geometry": "^0.3.2", "tslib": "^2.6.2" } }, "sha512-pNmNSLCI8S9fNQ7QJ3fBCDjiT0sqBhUFcKgmyYaGvGCAU+kq0AP8OWlh0JSisc9k5mFyxmRpmFQcnJpILz/RPA=="],
+
+    "@dnd-kit/dom": ["@dnd-kit/dom@0.3.2", "", { "dependencies": { "@dnd-kit/abstract": "^0.3.2", "@dnd-kit/collision": "^0.3.2", "@dnd-kit/geometry": "^0.3.2", "@dnd-kit/state": "^0.3.2", "tslib": "^2.6.2" } }, "sha512-cIUAVgt2szQyz6JRy7I+0r+xeyOAGH21Y15hb5bIyHoDEaZBvIDH+OOlD9eoLjCbsxDLN9WloU2CBi3OE6LYDg=="],
+
+    "@dnd-kit/geometry": ["@dnd-kit/geometry@0.3.2", "", { "dependencies": { "@dnd-kit/state": "^0.3.2", "tslib": "^2.6.2" } }, "sha512-3UBPuIS7E3oGiHxOE8h810QA+0pnrnCtGxl4Os1z3yy5YkC/BEYGY+TxWPTQaY1/OMV7GCX7ZNMlama2QN3n3w=="],
+
+    "@dnd-kit/react": ["@dnd-kit/react@0.3.2", "", { "dependencies": { "@dnd-kit/abstract": "^0.3.2", "@dnd-kit/dom": "^0.3.2", "@dnd-kit/state": "^0.3.2", "tslib": "^2.6.2" }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" } }, "sha512-1Opg1xw6I75Z95c+rF2NJa0pdGb8rLAENtuopKtJ1J0PudWlz+P6yL137xy/6DV43uaRmNGtsdbMbR0yRYJ72g=="],
+
+    "@dnd-kit/state": ["@dnd-kit/state@0.3.2", "", { "dependencies": { "@preact/signals-core": "^1.10.0", "tslib": "^2.6.2" } }, "sha512-dLUIkoYrIJhGXfF2wGLTfb46vUokEsO/OoE21TSfmahYrx7ysTmnwbePsznFaHlwgZhQEh6AlLvthLCeY21b1A=="],
+
     "@emnapi/core": ["@emnapi/core@1.8.1", "", { "dependencies": { "@emnapi/wasi-threads": "1.1.0", "tslib": "^2.4.0" } }, "sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg=="],
 
     "@emnapi/runtime": ["@emnapi/runtime@1.8.1", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg=="],
@@ -250,6 +263,8 @@
 
     "@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@0.2.12", "", { "dependencies": { "@emnapi/core": "^1.4.3", "@emnapi/runtime": "^1.4.3", "@tybys/wasm-util": "^0.10.0" } }, "sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ=="],
 
+    "@preact/signals-core": ["@preact/signals-core@1.14.0", "", {}, "sha512-AowtCcCU/33lFlh1zRFf/u+12rfrhtNakj7UpaGEsmMwUKpKWMVvcktOGcwBBNiB4lWrZWc01LhiyyzVklJyaQ=="],
+
     "@radix-ui/number": ["@radix-ui/number@1.1.1", "", {}, "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g=="],
 
     "@radix-ui/primitive": ["@radix-ui/primitive@1.1.3", "", {}, "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg=="],

package.json

@@ -17,6 +17,7 @@
     "ci:verify": "prettier --check . && eslint . && tsc --noEmit"
   },
   "dependencies": {
+    "@dnd-kit/react": "^0.3.2",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-avatar": "^1.1.11",
     "@radix-ui/react-checkbox": "^1.3.3",

src/components/asignaturas/detalle/AsignaturaDetailPage.tsx

@@ -7,6 +7,13 @@ import type { AsignaturaDetail } from '@/data'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
 import { Textarea } from '@/components/ui/textarea'
 import {
   Tooltip,
@@ -14,6 +21,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@/components/ui/tooltip'
+import { usePlanAsignaturas } from '@/data'
 import { useSubject, useUpdateAsignatura } from '@/data/hooks/useSubjects'
 
 export interface BibliografiaEntry {
@@ -59,8 +67,12 @@ export default function AsignaturaDetailPage() {
   const { asignaturaId } = useParams({
     from: '/planes/$planId/asignaturas/$asignaturaId',
   })
+  const { planId } = useParams({
+    from: '/planes/$planId/asignaturas/$asignaturaId',
+  })
   const { data: asignaturaApi } = useSubject(asignaturaId)
-
+  const { data: asignaturasApi, isLoading: loadingAsig } =
+    usePlanAsignaturas(planId)
   const [asignatura, setAsignatura] = useState<AsignaturaDetail | null>(null)
   const updateAsignatura = useUpdateAsignatura()
 
@@ -81,16 +93,54 @@ export default function AsignaturaDetailPage() {
       },
     })
   }
+
+  const asignaturaSeriada = useMemo(() => {
+    if (!asignaturaApi?.prerrequisito_asignatura_id || !asignaturasApi)
+      return null
+    return asignaturasApi.find(
+      (asig) => asig.id === asignaturaApi.prerrequisito_asignatura_id,
+    )
+  }, [asignaturaApi, asignaturasApi])
+  const requisitosFormateados = useMemo(() => {
+    if (!asignaturaSeriada) return []
+    return [
+      {
+        type: 'Pre-requisito',
+        code: asignaturaSeriada.codigo,
+        name: asignaturaSeriada.nombre,
+        id: asignaturaSeriada.id, // Guardamos el ID para el select
+      },
+    ]
+  }, [asignaturaSeriada])
+
+  const handleUpdatePrerrequisito = (newId: string | null) => {
+    updateAsignatura.mutate({
+      asignaturaId,
+      patch: {
+        prerrequisito_asignatura_id: newId,
+      },
+    })
+  }
   /* ---------- sincronizar API ---------- */
   useEffect(() => {
-    if (asignaturaApi) setAsignatura(asignaturaApi)
+    console.log(requisitosFormateados)
-  }, [asignaturaApi])
 
-  return <DatosGenerales onPersistDato={handlePersistDatoGeneral} />
+    if (asignaturaApi) setAsignatura(asignaturaApi)
+  }, [asignaturaApi, requisitosFormateados])
+
+  return (
+    <DatosGenerales
+      pre={requisitosFormateados}
+      availableSubjects={asignaturasApi}
+      onPersistDato={handlePersistDatoGeneral}
+    />
+  )
 }
 
 function DatosGenerales({
   onPersistDato,
+  pre,
+  availableSubjects,
 }: {
   onPersistDato: (clave: string, value: string) => void
 }) {
@@ -265,18 +315,19 @@ function DatosGenerales({
             <InfoCard
               title="Requisitos y Seriación"
               type="requirements"
-              initialContent={[
+              initialContent={pre}
-                {
+              // Pasamos las materias del plan para el Select (excluyendo la actual)
-                  type: 'Pre-requisito',
+              availableSubjects={
-                  code: 'PA-301',
+                availableSubjects?.filter((a) => a.id !== asignaturaId) || []
-                  name: 'Programación Avanzada',
+              }
-                },
+              onPersist={({ value }) => {
-                {
+                updateAsignatura.mutate({
-                  type: 'Co-requisito',
+                  asignaturaId,
-                  code: 'MAT-201',
+                  patch: {
-                  name: 'Matemáticas Discretas',
+                    prerrequisito_asignatura_id: value, // value ya viene como ID o null desde handleSave
-                },
+                  },
-              ]}
+                })
+              }}
             />
 
             {/* Tarjeta de Evaluación */}
@@ -316,6 +367,7 @@ interface InfoCardProps {
   containerRef?: React.RefObject<HTMLDivElement | null>
   forceEditToken?: number
   highlightToken?: number
+  availableSubjects?: any
 }
 
 function InfoCard({
@@ -332,6 +384,7 @@ function InfoCard({
   containerRef,
   forceEditToken,
   highlightToken,
+  availableSubjects,
 }: InfoCardProps) {
   const [isEditing, setIsEditing] = useState(false)
   const [isHighlighted, setIsHighlighted] = useState(false)
@@ -349,7 +402,8 @@ function InfoCard({
   useEffect(() => {
     setData(initialContent)
     setTempText(initialContent)
-
+    console.log(data)
+    console.log(initialContent)
     if (type === 'evaluation') {
       const raw = Array.isArray(initialContent) ? initialContent : []
       const rows: Array<CriterioEvaluacionRowDraft> = raw
@@ -392,6 +446,8 @@ function InfoCard({
 
   const handleSave = () => {
     console.log('clave, valor:', clave, String(tempText ?? ''))
+    console.log(clave)
+    console.log(tempText)
 
     if (type === 'evaluation') {
       const cleaned: Array<CriterioEvaluacionRow> = []
@@ -422,6 +478,25 @@ function InfoCard({
       void onPersist?.({ type, clave, value: cleaned })
       return
     }
+    if (type === 'requirements') {
+      console.log('entre aqui ')
+
+      // Si tempText es un array y tiene elementos, tomamos el ID del primero
+      // Si es "none" o está vacío, mandamos null (para limpiar la seriación)
+      const prerequisiteId =
+        Array.isArray(tempText) && tempText.length > 0 ? tempText[0].id : null
+
+      setData(tempText) // Actualiza la vista local
+      setIsEditing(false)
+
+      // Mandamos el ID específico a la base de datos
+      void onPersist?.({
+        type,
+        clave: 'prerrequisito_asignatura_id', // Forzamos la columna correcta
+        value: prerequisiteId,
+      })
+      return
+    }
 
     setData(tempText)
     setIsEditing(false)
@@ -541,7 +616,52 @@ function InfoCard({
         <CardContent className="pt-4">
           {isEditing ? (
             <div className="space-y-3">
-              {type === 'evaluation' ? (
+              {/* Condicionales de edición según el tipo */}
+              {type === 'requirements' ? (
+                <div className="space-y-3">
+                  <label className="text-xs font-medium text-slate-500">
+                    Materia de Seriación
+                  </label>
+                  <Select
+                    value={tempText?.[0]?.id || 'none'}
+                    onValueChange={(val) => {
+                      const selected = availableSubjects?.find(
+                        (s) => s.id === val,
+                      )
+                      if (val === 'none' || !selected) {
+                        console.log('guardando')
+
+                        setTempText([])
+                      } else {
+                        console.log('hola')
+
+                        setTempText([
+                          {
+                            id: selected.id,
+                            type: 'Pre-requisito',
+                            code: selected.codigo,
+                            name: selected.nombre,
+                          },
+                        ])
+                      }
+                    }}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Selecciona una materia" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="none">
+                        Ninguna (Sin seriación)
+                      </SelectItem>
+                      {availableSubjects?.map((asig) => (
+                        <SelectItem key={asig.id} value={asig.id}>
+                          {asig.codigo} - {asig.nombre}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              ) : type === 'evaluation' ? (
                 <div className="space-y-3">
                   <div className="space-y-2">
                     {evalRows.map((row) => (
@@ -563,85 +683,36 @@ function InfoCard({
                             )
                           }}
                         />
-
                         <Input
                           value={row.porcentaje}
                           placeholder="%"
                           type="number"
-                          min={1}
-                          max={100}
-                          step={1}
-                          inputMode="numeric"
                           onChange={(e) => {
                             const raw = e.target.value
-                            // Solo permitir '' o dígitos
                             if (raw !== '' && !/^\d+$/.test(raw)) return
 
-                            if (raw === '') {
-                              setEvalRows((prev) =>
-                                prev.map((r) =>
-                                  r.id === row.id
-                                    ? {
-                                        id: r.id,
-                                        criterio: r.criterio,
-                                        porcentaje: '',
-                                      }
-                                    : r,
-                                ),
-                              )
-                              return
-                            }
-
-                            const n = Number(raw)
-                            if (!Number.isFinite(n)) return
-                            const porcentaje = Math.trunc(n)
-                            if (porcentaje < 1 || porcentaje > 100) return
-
-                            // No permitir suma > 100
                             setEvalRows((prev) => {
                               const next = prev.map((r) =>
-                                r.id === row.id
+                                r.id === row.id ? { ...r, porcentaje: raw } : r,
-                                  ? {
+                              )
-                                      id: r.id,
+                              const total = next.reduce(
-                                      criterio: r.criterio,
+                                (acc, r) => acc + (Number(r.porcentaje) || 0),
-                                      porcentaje: raw,
+                                0,
-                                    }
-                                  : r,
                               )
-
-                              const total = next.reduce((acc, r) => {
-                                const v = String(r.porcentaje).trim()
-                                if (!v) return acc
-                                const nn = Number(v)
-                                if (!Number.isFinite(nn)) return acc
-                                const vv = Math.trunc(nn)
-                                if (vv < 1 || vv > 100) return acc
-                                return acc + vv
-                              }, 0)
-
                               return total > 100 ? prev : next
                             })
                           }}
                         />
-
+                        <div className="text-sm text-slate-600">%</div>
-                        <div
-                          className="flex w-[1ch] items-center justify-center text-sm text-slate-600"
-                          aria-hidden
-                        >
-                          %
-                        </div>
-
                         <Button
                           variant="ghost"
                           size="icon"
                           className="h-8 w-8 text-red-600 hover:bg-red-50"
-                          onClick={() => {
+                          onClick={() =>
                             setEvalRows((prev) =>
                               prev.filter((r) => r.id !== row.id),
                             )
-                          }}
+                          }
-                          aria-label="Quitar renglón"
-                          title="Quitar"
                         >
                           <Minus className="h-4 w-4" />
                         </Button>
@@ -651,22 +722,15 @@ function InfoCard({
 
                   <div className="flex items-center justify-between">
                     <span
-                      className={
+                      className={`text-sm ${evaluationTotal === 100 ? 'text-muted-foreground' : 'text-destructive font-semibold'}`}
-                        'text-sm ' +
-                        (evaluationTotal === 100
-                          ? 'text-muted-foreground'
-                          : 'text-destructive font-semibold')
-                      }
                     >
                       Total: {evaluationTotal}/100
                     </span>
-
                     <Button
                       variant="ghost"
                       size="sm"
                       className="text-emerald-700 hover:bg-emerald-50"
-                      onClick={() => {
+                      onClick={() =>
-                        // Agregar una fila vacía (siempre permitido)
                         setEvalRows((prev) => [
                           ...prev,
                           {
@@ -675,7 +739,7 @@ function InfoCard({
                             porcentaje: '',
                           },
                         ])
-                      }}
+                      }
                     >
                       <Plus className="mr-2 h-4 w-4" /> Agregar renglón
                     </Button>
@@ -689,28 +753,15 @@ function InfoCard({
                   className="min-h-30 text-sm leading-relaxed"
                 />
               )}
+
+              {/* Botones de acción comunes */}
               <div className="flex justify-end gap-2">
                 <Button
                   size="sm"
                   variant="ghost"
                   onClick={() => {
                     setIsEditing(false)
-                    if (type === 'evaluation') {
+                    // Lógica de reset si es necesario...
-                      const raw = Array.isArray(data) ? data : []
-                      setEvalRows(
-                        raw.map((r: CriterioEvaluacionRow) => ({
-                          id: crypto.randomUUID(),
-                          criterio:
-                            typeof r.criterio === 'string' ? r.criterio : '',
-                          porcentaje:
-                            typeof r.porcentaje === 'number'
-                              ? String(Math.trunc(r.porcentaje))
-                              : typeof r.porcentaje === 'string'
-                                ? String(Math.trunc(Number(r.porcentaje)))
-                                : '',
-                        })),
-                      )
-                    }
                   }}
                 >
                   Cancelar
@@ -726,6 +777,7 @@ function InfoCard({
               </div>
             </div>
           ) : (
+            /* Modo Visualización */
             <div className="text-sm leading-relaxed text-slate-600">
               {type === 'text' &&
                 (data ? (
@@ -734,9 +786,7 @@ function InfoCard({
                   <p className="text-slate-400 italic">Sin información.</p>
                 ))}
               {type === 'requirements' && <RequirementsView items={data} />}
-              {type === 'evaluation' && (
+              {type === 'evaluation' && <EvaluationView items={data} />}
-                <EvaluationView items={data as Array<CriterioEvaluacionRow>} />
-              )}
             </div>
           )}
         </CardContent>

src/components/asignaturas/detalle/ContenidoTematico.tsx

@@ -1,3 +1,5 @@
+import { DragDropProvider } from '@dnd-kit/react'
+import { isSortable, useSortable } from '@dnd-kit/react/sortable'
 import { useParams } from '@tanstack/react-router'
 import {
   Plus,
@@ -11,7 +13,7 @@ import {
 import { useEffect, useRef, useState } from 'react'
 
 import type { ContenidoApi, ContenidoTemaApi } from '@/data/api/subjects.api'
-import type { FocusEvent, KeyboardEvent } from 'react'
+import type { FocusEvent, KeyboardEvent, ReactNode } from 'react'
 
 import {
   AlertDialog,
@@ -50,6 +52,95 @@ export interface UnidadTematica {
   temas: Array<Tema>
 }
 
+function createClientId(prefix: string) {
+  try {
+    const c = (globalThis as any).crypto
+    if (c && typeof c.randomUUID === 'function')
+      return `${prefix}-${c.randomUUID()}`
+  } catch {
+    // ignore
+  }
+  return `${prefix}-${Date.now()}-${Math.random().toString(16).slice(2)}`
+}
+
+function arrayMove<T>(array: Array<T>, fromIndex: number, toIndex: number) {
+  const next = array.slice()
+  const startIndex = fromIndex < 0 ? next.length + fromIndex : fromIndex
+  if (startIndex < 0 || startIndex >= next.length) return next
+  const endIndex = toIndex < 0 ? next.length + toIndex : toIndex
+  const [item] = next.splice(startIndex, 1)
+  next.splice(endIndex, 0, item)
+  return next
+}
+
+function renumberUnidades(unidades: Array<UnidadTematica>) {
+  return unidades.map((u, idx) => ({ ...u, numero: idx + 1 }))
+}
+
+function InsertUnidadOverlay({
+  onInsert,
+  position,
+}: {
+  onInsert: () => void
+  position: 'top' | 'bottom'
+}) {
+  return (
+    <div
+      className={cn(
+        'pointer-events-auto absolute right-0 left-0 z-30 flex justify-center',
+        // Match the `space-y-4` gap so the hover target is *between* units.
+        position === 'top' ? '-top-4 h-4' : '-bottom-4 h-4',
+      )}
+    >
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        className="bg-background/95 border-border/60 hover:bg-background cursor-pointer opacity-0 shadow-sm transition-opacity group-hover:opacity-100"
+        onClick={(e) => {
+          e.stopPropagation()
+          onInsert()
+        }}
+      >
+        <Plus className="mr-2 h-3 w-3" /> Nueva unidad
+      </Button>
+    </div>
+  )
+}
+
+function SortableUnidad({
+  id,
+  index,
+  registerContainer,
+  children,
+}: {
+  id: string
+  index: number
+  registerContainer: (el: HTMLDivElement | null) => void
+  children: (args: { handleRef: (el: HTMLElement | null) => void }) => ReactNode
+}) {
+  const { ref, handleRef, isDragSource, isDropTarget } = useSortable({
+    id,
+    index,
+  })
+
+  return (
+    <div
+      ref={(el) => {
+        ref(el)
+        registerContainer(el)
+      }}
+      className={cn(
+        'group relative',
+        isDragSource && 'opacity-80',
+        isDropTarget && 'ring-primary/20 ring-2',
+      )}
+    >
+      {children({ handleRef })}
+    </div>
+  )
+}
+
 function isRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === 'object' && value !== null && !Array.isArray(value)
 }
@@ -100,20 +191,18 @@ function mapContenidoItem(value: unknown, index: number): ContenidoApi | null {
   if (Array.isArray(value.temas)) {
     temas = value.temas
       .map(mapTemaValue)
-      .filter((t): t is ContenidoTemaApi => t !== null)
+      .filter((x): x is ContenidoTemaApi => x !== null)
-  } else if (typeof value.temas === 'string' && value.temas.trim()) {
-    temas = value.temas
-      .split(/\r?\n|,/)
-      .map((t) => t.trim())
-      .filter(Boolean)
   }
 
-  return { unidad, titulo, temas }
+  return {
+    ...value,
+    unidad,
+    titulo,
+    temas,
+  }
 }
 
 function mapContenidoTematicoFromDb(value: unknown): Array<ContenidoApi> {
-  if (value == null) return []
-
   if (typeof value === 'string') {
     try {
       return mapContenidoTematicoFromDb(JSON.parse(value))
@@ -192,7 +281,16 @@ export function ContenidoTematico() {
   const [temaDraftHoras, setTemaDraftHoras] = useState('')
   const [temaOriginalHoras, setTemaOriginalHoras] = useState(0)
 
+  const didInitExpandedUnitsRef = useRef(false)
+
+  const unidadesRef = useRef<Array<UnidadTematica>>([])
+  useEffect(() => {
+    unidadesRef.current = unidades
+  }, [unidades])
+
   const persistUnidades = async (nextUnidades: Array<UnidadTematica>) => {
+    // A partir del primer guardado, ya respetamos lo que el usuario deje expandido.
+    didInitExpandedUnitsRef.current = true
     const payload = serializeUnidadesToApi(nextUnidades)
     await updateContenido.mutateAsync({
       subjectId: asignaturaId,
@@ -246,10 +344,17 @@ export function ContenidoTematico() {
     })
   }
 
+  const parseHorasEstimadas = (raw: string): number => {
+    const normalized = raw.trim().replace(',', '.')
+    const parsed = Number.parseFloat(normalized)
+    if (!Number.isFinite(parsed)) return 0
+
+    return parsed
+  }
+
   const commitEditTema = () => {
     if (!editingTema) return
-    const parsedHoras = Number.parseInt(temaDraftHoras, 10)
+    const horasEstimadas = parseHorasEstimadas(temaDraftHoras)
-    const horasEstimadas = Number.isFinite(parsedHoras) ? parsedHoras : 0
 
     const next = unidades.map((u) => {
       if (u.id !== editingTema.unitId) return u
@@ -303,28 +408,110 @@ export function ContenidoTematico() {
       data ? data.contenido_tematico : undefined,
     )
 
-    const transformed = contenido.map((u, idx) => ({
+    // 1. EL ESCUDO: Comparamos si nuestro estado local ya tiene esta info exacta
-      id: `u-${u.unidad || idx + 1}`,
+    // (Esto ocurre justo después de arrastrar, ya que actualizamos la UI antes que la BD)
-      numero: u.unidad || idx + 1,
+    const currentPayload = JSON.stringify(
-      nombre: u.titulo || 'Sin título',
+      serializeUnidadesToApi(unidadesRef.current),
-      temas: Array.isArray(u.temas)
+    )
-        ? u.temas.map((t: any, tidx: number) => ({
+
-            id: `t-${u.unidad || idx + 1}-${tidx + 1}`,
+    // Normalizamos la data de la BD para que tenga exactamente la misma forma que el payload
-            nombre: typeof t === 'string' ? t : t?.nombre || 'Tema',
+    const incomingPayload = JSON.stringify(
-            horasEstimadas: t?.horasEstimadas || 0,
+      contenido.map((u, idx) => ({
-          }))
+        unidad: u.unidad || idx + 1,
-        : [],
+        titulo: u.titulo || 'Sin título',
-    }))
+        temas: Array.isArray(u.temas)
+          ? u.temas.map((t) => {
+              if (typeof t === 'string') {
+                return {
+                  nombre: t,
+                  horasEstimadas: 0,
+                  descripcion: undefined,
+                }
+              }
+
+              return {
+                nombre: t.nombre || 'Tema',
+                horasEstimadas: t.horasEstimadas ?? 0,
+                descripcion: t.descripcion,
+              }
+            })
+          : [],
+      })),
+    )
+
+    // Si los datos son idénticos, abortamos el useEffect.
+    // ¡Nuestros IDs locales se salvan y no hay parpadeos!
+    if (currentPayload === incomingPayload && unidadesRef.current.length > 0) {
+      return
+    }
+
+    // 2. Si llegamos aquí, es la carga inicial o alguien más editó la BD desde otro lado.
+    // Reciclamos IDs buscando por CONTENIDO (nombre), NUNCA POR ÍNDICE.
+    const prevUnidades = [...unidadesRef.current]
+
+    const transformed = contenido.map((u, idx) => {
+      const dbTitulo = u.titulo || 'Sin título'
+
+      // Buscamos si ya existe una unidad con este mismo título
+      const existingUnitIndex = prevUnidades.findIndex(
+        (prev) => prev.nombre === dbTitulo,
+      )
+      let unidadId
+      let existingUnit = null
+
+      if (existingUnitIndex !== -1) {
+        existingUnit = prevUnidades[existingUnitIndex]
+        unidadId = existingUnit.id
+        prevUnidades.splice(existingUnitIndex, 1) // Lo sacamos de la lista para no repetirlo
+      } else {
+        unidadId = createClientId(`u-${u.unidad || idx + 1}`)
+      }
+
+      return {
+        id: unidadId,
+        numero: u.unidad || idx + 1,
+        nombre: dbTitulo,
+        temas: Array.isArray(u.temas)
+          ? u.temas.map((t: any, tidx: number) => {
+              const dbTemaNombre =
+                typeof t === 'string' ? t : t?.nombre || 'Tema'
+
+              // Reciclamos subtemas por nombre también
+              const existingTema = existingUnit?.temas.find(
+                (prevT) => prevT.nombre === dbTemaNombre,
+              )
+              const temaId = existingTema
+                ? existingTema.id
+                : createClientId(`t-${u.unidad || idx + 1}-${tidx + 1}`)
+
+              return {
+                id: temaId,
+                nombre: dbTemaNombre,
+                horasEstimadas:
+                  coerceNumber(
+                    typeof t === 'string' ? undefined : t?.horasEstimadas,
+                  ) ?? 0,
+              }
+            })
+          : [],
+      }
+    })
 
     setUnidades(transformed)
-    // Mantener las unidades ya expandidas si existen; si no, expandir la primera.
+
     setExpandedUnits((prev) => {
       const validIds = new Set(transformed.map((u) => u.id))
       const filtered = new Set(
         Array.from(prev).filter((id) => validIds.has(id)),
       )
-      if (filtered.size > 0) return filtered
+
-      return transformed.length > 0 ? new Set([transformed[0].id]) : new Set()
+      // Expandir la primera unidad solo una vez al llegar a la ruta.
+      // Luego, no auto-expandimos de nuevo (aunque `data` cambie).
+      if (!didInitExpandedUnitsRef.current && transformed.length > 0) {
+        return filtered.size > 0 ? filtered : new Set([transformed[0].id])
+      }
+
+      return filtered
     })
   }, [data])
 
@@ -353,7 +540,7 @@ export function ContenidoTematico() {
   // 3. Cálculo de horas (ahora dinámico basado en los nuevos datos)
   const totalHoras = unidades.reduce(
     (acc, u) =>
-      acc + u.temas.reduce((sum, t) => sum + (t.horasEstimadas || 0), 0),
+      acc + u.temas.reduce((sum, t) => sum + (t.horasEstimadas ?? 0), 0),
     0,
   )
 
@@ -364,16 +551,22 @@ export function ContenidoTematico() {
     setExpandedUnits(newExpanded)
   }
 
-  const addUnidad = () => {
+  const insertUnidadAt = (insertIndex: number) => {
-    const newNumero = unidades.length + 1
+    const newId = createClientId('u')
-    const newId = `u-${newNumero}`
     const newUnidad: UnidadTematica = {
       id: newId,
       nombre: 'Nueva Unidad',
-      numero: newNumero,
+      numero: 0,
       temas: [],
     }
-    const next = [...unidades, newUnidad]
+
+    const clampedIndex = Math.max(0, Math.min(insertIndex, unidades.length))
+    const next = renumberUnidades([
+      ...unidades.slice(0, clampedIndex),
+      newUnidad,
+      ...unidades.slice(clampedIndex),
+    ])
+
     setUnidades(next)
     setExpandedUnits((prev) => {
       const n = new Set(prev)
@@ -382,10 +575,40 @@ export function ContenidoTematico() {
     })
     setPendingScrollUnitId(newId)
 
-    // Abrir edición del título inmediatamente
     setEditingUnit(newId)
     setUnitDraftNombre(newUnidad.nombre)
     setUnitOriginalNombre(newUnidad.nombre)
+
+    void persistUnidades(next)
+  }
+
+  const handleReorderEnd = (event: any) => {
+    if (event?.canceled) return
+
+    const source = event?.operation?.source
+    if (!source) return
+
+    // Type-guard nativo de dnd-kit para asegurar que el elemento tiene metadata de orden
+    if (!isSortable(source)) return
+
+    // Extraemos las posiciones exactas calculadas por dnd-kit
+    const { initialIndex, index } = source.sortable
+
+    // Si lo soltó en la misma posición de la que salió, cancelamos
+    if (initialIndex === index) return
+
+    setUnidades((prev) => {
+      // Hacemos el movimiento usando los índices directos
+      const moved = arrayMove(prev, initialIndex, index)
+      const next = renumberUnidades(moved)
+
+      // Disparamos la persistencia hacia Supabase
+      void persistUnidades(next).catch((err) => {
+        console.error('No se pudo guardar el orden de unidades', err)
+      })
+
+      return next
+    })
   }
 
   // --- Lógica de Temas ---
@@ -451,158 +674,182 @@ export function ContenidoTematico() {
         </div>
       </div>
 
-      <div className="space-y-4">
+      <DragDropProvider onDragEnd={handleReorderEnd}>
-        {unidades.map((unidad) => (
+        <div className="space-y-4">
-          <div
+          {unidades.map((unidad, index) => (
-            key={unidad.id}
+            <SortableUnidad
-            ref={(el) => {
+              key={unidad.id}
-              if (el) unitContainerRefs.current.set(unidad.id, el)
+              id={unidad.id}
-              else unitContainerRefs.current.delete(unidad.id)
+              index={index}
-            }}
+              registerContainer={(el) => {
-          >
+                if (el) unitContainerRefs.current.set(unidad.id, el)
-            <Card className="overflow-hidden border-slate-200 shadow-sm">
+                else unitContainerRefs.current.delete(unidad.id)
-              <Collapsible
+              }}
-                open={expandedUnits.has(unidad.id)}
+            >
-                onOpenChange={() => toggleUnit(unidad.id)}
+              {({ handleRef }) => (
-              >
+                <>
-                <CardHeader className="border-b border-slate-100 bg-slate-50/50 py-3">
+                  {index === 0 && (
-                  <div className="flex items-center gap-3">
+                    <InsertUnidadOverlay
-                    <GripVertical className="h-4 w-4 cursor-grab text-slate-300" />
+                      position="top"
-                    <CollapsibleTrigger asChild>
+                      onInsert={() => insertUnidadAt(index)}
-                      <Button variant="ghost" size="sm" className="h-auto p-0">
+                    />
-                        {expandedUnits.has(unidad.id) ? (
+                  )}
-                          <ChevronDown className="h-4 w-4" />
+                  <InsertUnidadOverlay
-                        ) : (
+                    position="bottom"
-                          <ChevronRight className="h-4 w-4" />
+                    onInsert={() => insertUnidadAt(index + 1)}
-                        )}
+                  />
-                      </Button>
-                    </CollapsibleTrigger>
-                    <Badge className="bg-blue-600 font-mono">
-                      Unidad {unidad.numero}
-                    </Badge>
 
-                    {editingUnit === unidad.id ? (
+                  <Card className="overflow-hidden border-slate-200 shadow-sm">
-                      <Input
+                    <Collapsible
-                        ref={unitTitleInputRef}
+                      open={expandedUnits.has(unidad.id)}
-                        value={unitDraftNombre}
+                      onOpenChange={() => toggleUnit(unidad.id)}
-                        onChange={(e) => setUnitDraftNombre(e.target.value)}
+                    >
-                        onBlur={() => {
+                      <CardHeader className="border-b border-slate-100 bg-slate-50/50 py-3">
-                          if (cancelNextBlurRef.current) {
+                        <div className="flex items-center gap-3">
-                            cancelNextBlurRef.current = false
+                          <span
-                            return
+                            ref={handleRef as any}
-                          }
+                            className="inline-flex cursor-grab touch-none items-center text-slate-300"
-                          commitEditUnit()
+                            aria-label="Reordenar unidad"
-                        }}
+                          >
-                        onKeyDown={(e) => {
+                            <GripVertical className="h-4 w-4" />
-                          if (e.key === 'Enter') {
+                          </span>
-                            e.preventDefault()
+                          <CollapsibleTrigger asChild>
-                            e.currentTarget.blur()
+                            <Button
-                            return
+                              variant="ghost"
-                          }
+                              size="sm"
-                          if (e.key === 'Escape') {
+                              className="h-auto cursor-pointer p-0"
-                            e.preventDefault()
+                            >
-                            cancelNextBlurRef.current = true
+                              {expandedUnits.has(unidad.id) ? (
-                            cancelEditUnit()
+                                <ChevronDown className="h-4 w-4" />
-                            e.currentTarget.blur()
+                              ) : (
-                          }
+                                <ChevronRight className="h-4 w-4" />
-                        }}
+                              )}
-                        className="h-8 max-w-md bg-white"
+                            </Button>
-                      />
+                          </CollapsibleTrigger>
-                    ) : (
+                          <Badge className="bg-blue-600 font-mono">
-                      <CardTitle
+                            Unidad {unidad.numero}
-                        className="cursor-pointer text-base font-semibold transition-colors hover:text-blue-600"
+                          </Badge>
-                        onClick={() => beginEditUnit(unidad.id)}
-                      >
-                        {unidad.nombre}
-                      </CardTitle>
-                    )}
 
-                    <div className="ml-auto flex items-center gap-3">
+                          {editingUnit === unidad.id ? (
-                      <span className="flex items-center gap-1 text-xs font-medium text-slate-400">
+                            <Input
-                        <Clock className="h-3 w-3" />{' '}
+                              ref={unitTitleInputRef}
-                        {unidad.temas.reduce(
+                              value={unitDraftNombre}
-                          (sum, t) => sum + (t.horasEstimadas || 0),
+                              onChange={(e) =>
-                          0,
+                                setUnitDraftNombre(e.target.value)
-                        )}
+                              }
-                        h
+                              onBlur={() => {
-                      </span>
+                                if (cancelNextBlurRef.current) {
-                      <Button
+                                  cancelNextBlurRef.current = false
-                        variant="ghost"
+                                  return
-                        size="icon"
+                                }
-                        className="h-8 w-8 text-slate-400 hover:text-red-500"
+                                commitEditUnit()
-                        onClick={() =>
+                              }}
-                          setDeleteDialog({ type: 'unidad', id: unidad.id })
+                              onKeyDown={(e) => {
-                        }
+                                if (e.key === 'Enter') {
-                      >
+                                  e.preventDefault()
-                        <Trash2 className="h-4 w-4" />
+                                  e.currentTarget.blur()
-                      </Button>
+                                  return
-                    </div>
+                                }
-                  </div>
+                                if (e.key === 'Escape') {
-                </CardHeader>
+                                  e.preventDefault()
-                <CollapsibleContent>
+                                  cancelNextBlurRef.current = true
-                  <CardContent className="bg-white pt-4">
+                                  cancelEditUnit()
-                    <div className="ml-10 space-y-1 border-l-2 border-slate-50 pl-4">
+                                  e.currentTarget.blur()
-                      {unidad.temas.map((tema, idx) => (
+                                }
-                        <TemaRow
+                              }}
-                          key={tema.id}
+                              className="h-8 max-w-md bg-white"
-                          tema={tema}
+                            />
-                          index={idx + 1}
+                          ) : (
-                          isEditing={
+                            <CardTitle
-                            !!editingTema &&
+                              className="cursor-pointer text-base font-semibold transition-colors hover:text-blue-600"
-                            editingTema.unitId === unidad.id &&
+                              onClick={() => beginEditUnit(unidad.id)}
-                            editingTema.temaId === tema.id
+                            >
-                          }
+                              {unidad.nombre}
-                          draftNombre={temaDraftNombre}
+                            </CardTitle>
-                          draftHoras={temaDraftHoras}
+                          )}
-                          onBeginEdit={() => beginEditTema(unidad.id, tema.id)}
-                          onDraftNombreChange={setTemaDraftNombre}
-                          onDraftHorasChange={setTemaDraftHoras}
-                          onEditorBlurCapture={handleTemaEditorBlurCapture}
-                          onEditorKeyDownCapture={
-                            handleTemaEditorKeyDownCapture
-                          }
-                          onNombreInputRef={(el) => {
-                            temaNombreInputElRef.current = el
-                          }}
-                          onDelete={() =>
-                            setDeleteDialog({
-                              type: 'tema',
-                              id: tema.id,
-                              parentId: unidad.id,
-                            })
-                          }
-                        />
-                      ))}
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        className="mt-2 w-full justify-start text-blue-600 hover:bg-blue-50 hover:text-blue-700"
-                        onClick={() => addTema(unidad.id)}
-                      >
-                        <Plus className="mr-2 h-3 w-3" /> Añadir subtema
-                      </Button>
-                    </div>
-                  </CardContent>
-                </CollapsibleContent>
-              </Collapsible>
-            </Card>
-          </div>
-        ))}
-      </div>
 
-      <div className="flex justify-center pt-2">
+                          <div className="ml-auto flex items-center gap-3">
-        <Button
+                            <span className="flex cursor-default items-center gap-1 text-xs font-medium text-slate-400">
-          variant="outline"
+                              <Clock className="h-3 w-3" />{' '}
-          className="gap-2"
+                              {unidad.temas.reduce(
-          onClick={(e) => {
+                                (sum, t) => sum + (t.horasEstimadas || 0),
-            // Evita que Enter vuelva a disparar el click sobre el botón.
+                                0,
-            e.currentTarget.blur()
+                              )}
-            addUnidad()
+                              h
-          }}
+                            </span>
-        >
+                            <Button
-          <Plus className="h-4 w-4" /> Nueva unidad
+                              variant="ghost"
-        </Button>
+                              size="icon"
-      </div>
+                              className="h-8 w-8 cursor-pointer text-slate-400 hover:text-red-500"
+                              onClick={() =>
+                                setDeleteDialog({
+                                  type: 'unidad',
+                                  id: unidad.id,
+                                })
+                              }
+                            >
+                              <Trash2 className="h-4 w-4" />
+                            </Button>
+                          </div>
+                        </div>
+                      </CardHeader>
+                      <CollapsibleContent>
+                        <CardContent className="bg-white pt-4">
+                          <div className="ml-10 space-y-1 border-l-2 border-slate-50 pl-4">
+                            {unidad.temas.map((tema, idx) => (
+                              <TemaRow
+                                key={tema.id}
+                                tema={tema}
+                                index={idx + 1}
+                                isEditing={
+                                  !!editingTema &&
+                                  editingTema.unitId === unidad.id &&
+                                  editingTema.temaId === tema.id
+                                }
+                                draftNombre={temaDraftNombre}
+                                draftHoras={temaDraftHoras}
+                                onBeginEdit={() =>
+                                  beginEditTema(unidad.id, tema.id)
+                                }
+                                onDraftNombreChange={setTemaDraftNombre}
+                                onDraftHorasChange={setTemaDraftHoras}
+                                onEditorBlurCapture={
+                                  handleTemaEditorBlurCapture
+                                }
+                                onEditorKeyDownCapture={
+                                  handleTemaEditorKeyDownCapture
+                                }
+                                onNombreInputRef={(el) => {
+                                  temaNombreInputElRef.current = el
+                                }}
+                                onDelete={() =>
+                                  setDeleteDialog({
+                                    type: 'tema',
+                                    id: tema.id,
+                                    parentId: unidad.id,
+                                  })
+                                }
+                              />
+                            ))}
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="mt-2 w-full cursor-pointer justify-start text-blue-600 hover:bg-blue-50 hover:text-blue-700"
+                              onClick={() => addTema(unidad.id)}
+                            >
+                              <Plus className="mr-2 h-3 w-3" /> Añadir subtema
+                            </Button>
+                          </div>
+                        </CardContent>
+                      </CollapsibleContent>
+                    </Collapsible>
+                  </Card>
+                </>
+              )}
+            </SortableUnidad>
+          ))}
+        </div>
+      </DragDropProvider>
 
       <DeleteConfirmDialog
         dialog={deleteDialog}
@@ -667,6 +914,9 @@ function TemaRow({
           <Input
             type="number"
             value={draftHoras}
+            min={0}
+            max={200}
+            step={0.5}
             onChange={(e) => onDraftHorasChange(e.target.value)}
             className="h-8 w-16 bg-white"
           />
@@ -675,7 +925,7 @@ function TemaRow({
         <>
           <button
             type="button"
-            className="flex flex-1 items-center gap-3 text-left"
+            className="flex flex-1 cursor-pointer items-center gap-3 text-left"
             onClick={(e) => {
               e.stopPropagation()
               onBeginEdit()
@@ -690,7 +940,7 @@ function TemaRow({
             <Button
               variant="ghost"
               size="icon"
-              className="h-7 w-7 text-slate-400 hover:text-blue-600"
+              className="h-7 w-7 cursor-pointer text-slate-400 hover:text-blue-600"
               onClick={(e) => {
                 e.stopPropagation()
                 onBeginEdit()
@@ -701,7 +951,7 @@ function TemaRow({
             <Button
               variant="ghost"
               size="icon"
-              className="h-7 w-7 text-slate-400 hover:text-red-500"
+              className="h-7 w-7 cursor-pointer text-slate-400 hover:text-red-500"
               onClick={(e) => {
                 e.stopPropagation()
                 onDelete()

src/components/asignaturas/detalle/IAAsignaturaTab.tsx

@@ -28,6 +28,12 @@ import { Button } from '@/components/ui/button'
 import { Drawer, DrawerContent } from '@/components/ui/drawer'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Textarea } from '@/components/ui/textarea'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
 import {
   useAISubjectChat,
   useConversationBySubject,
@@ -131,15 +137,45 @@ export function IAAsignaturaTab({
   }, [todasConversaciones])
 
   const availableFields = useMemo(() => {
-    if (!datosGenerales?.datos) return []
+    // 1. Obtenemos los campos dinámicos de la DB
-    const estructuraProps =
+    const dynamicFields = datosGenerales?.datos
-      datosGenerales?.estructuras_asignatura?.definicion?.properties || {}
+      ? Object.keys(datosGenerales.datos).map((key) => {
-    return Object.keys(datosGenerales.datos).map((key) => ({
+          const estructuraProps =
-      key,
+            datosGenerales?.estructuras_asignatura?.definicion?.properties || {}
-      label:
+          return {
-        estructuraProps[key]?.title || key.replace(/_/g, ' ').toUpperCase(),
+            key,
-      value: String(datosGenerales.datos[key] || ''),
+            label:
-    }))
+              estructuraProps[key]?.title ||
+              key.replace(/_/g, ' ').toUpperCase(),
+            value: String(datosGenerales.datos[key] || ''),
+          }
+        })
+      : []
+
+    // 2. Definimos tus campos manuales (hardcoded)
+    const hardcodedFields = [
+      {
+        key: 'contenido_tematico',
+        label: 'Contenido temático',
+        value: '', // Puedes dejarlo vacío o buscarlo en datosGenerales si existiera
+      },
+      {
+        key: 'criterios_de_evaluacion',
+        label: 'Criterios de evaluación',
+        value: '',
+      },
+    ]
+
+    // 3. Unimos ambos, filtrando duplicados por si acaso el backend ya los envía
+    const combined = [...dynamicFields]
+
+    hardcodedFields.forEach((hf) => {
+      if (!combined.some((f) => f.key === hf.key)) {
+        combined.push(hf)
+      }
+    })
+
+    return combined
   }, [datosGenerales])
 
   // --- PROCESAMIENTO DE MENSAJES ---
@@ -269,7 +305,7 @@ export function IAAsignaturaTab({
       }
 
       setInput('')
-      setSelectedFields([])
+      // setSelectedFields([])
 
       // Invalidamos la lista de conversaciones para que el nuevo chat aparezca en el historial (panel izquierdo)
       queryClient.invalidateQueries({
@@ -341,11 +377,8 @@ export function IAAsignaturaTab({
 
         <Button
           onClick={() => {
-            // 1. Limpiamos el ID
             setActiveChatId(undefined)
-            // 2. Marcamos que ya hubo una "interacción inicial" para que el useEffect no actúe
             hasInitialSelected.current = true
-            // 3. Limpiamos estados visuales
             setIsCreatingNewChat(true)
             setInput('')
             setSelectedFields([])
@@ -359,29 +392,34 @@ export function IAAsignaturaTab({
           <MessageSquarePlus size={18} /> Nuevo Chat
         </Button>
 
+        {/* PANEL IZQUIERDO - Cambios en ScrollArea y contenedor */}
         <ScrollArea className="flex-1">
-          <div className="space-y-1 pr-3">
+          <div className="flex flex-col gap-1 pr-3">
-            {/* CORRECCIÓN: Mapear ambos casos */}
+            {' '}
+            {/* Eliminado space-y-1 para mejor control con gap */}
             {(showArchived ? archivedChats : activeChats).map((chat: any) => (
               <div
                 key={chat.id}
                 className={cn(
-                  'group relative flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition-all',
+                  // Agregamos 'overflow-hidden' para que nada salga de este cuadro
+                  'group relative flex w-full min-w-0 items-center justify-between gap-2 overflow-hidden rounded-lg px-3 py-2 text-sm transition-all',
                   activeChatId === chat.id
                     ? 'bg-teal-50 text-teal-900'
                     : 'text-slate-600 hover:bg-slate-100',
                 )}
+                onDoubleClick={() => {
+                  setEditingId(chat.id)
+                  setTempName(chat.nombre || chat.titulo || 'Conversacion')
+                }}
               >
-                <FileText size={14} className="shrink-0 opacity-50" />
-
                 {editingId === chat.id ? (
-                  <div className="flex flex-1 items-center gap-1">
+                  <div className="flex min-w-0 flex-1 items-center">
                     <input
                       autoFocus
-                      className="w-full rounded bg-white px-1 text-xs ring-1 ring-teal-400 outline-none"
+                      className="w-full rounded border-none bg-white px-1 text-xs ring-1 ring-teal-400 outline-none"
                       value={tempName}
                       onChange={(e) => setTempName(e.target.value)}
-                      onBlur={() => handleSaveName(chat.id)} // Guardar al hacer clic fuera
+                      onBlur={() => handleSaveName(chat.id)}
                       onKeyDown={(e) => {
                         if (e.key === 'Enter') handleSaveName(chat.id)
                         if (e.key === 'Escape') setEditingId(null)
@@ -390,54 +428,78 @@ export function IAAsignaturaTab({
                   </div>
                 ) : (
                   <>
+                    {/* CLAVE 2: 'truncate' y 'min-w-0' en el span para que ceda ante los botones */}
                     <span
                       onClick={() => setActiveChatId(chat.id)}
-                      className="flex-1 cursor-pointer truncate"
+                      className="block max-w-[140px] min-w-0 flex-1 cursor-pointer truncate pr-1"
+                      title={chat.nombre || chat.titulo}
                     >
-                      {/* CORRECCIÓN: Usar 'nombre' si así se llama en tu DB */}
                       {chat.nombre || chat.titulo || 'Conversación'}
                     </span>
 
-                    <div className="flex opacity-0 transition-opacity group-hover:opacity-100">
+                    {/* CLAVE 3: 'shrink-0' asegura que los botones NUNCA desaparezcan */}
-                      <button
+                    <div
-                        onClick={(e) => {
+                      className={cn(
-                          e.stopPropagation()
+                        'z-10 flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100',
-                          setEditingId(chat.id)
+                        activeChatId === chat.id
-                          setTempName(chat.nombre || chat.titulo || '')
+                          ? 'bg-teal-50'
-                        }}
+                          : 'bg-slate-100',
-                        className="p-1 hover:text-teal-600"
+                      )}
-                      >
+                    >
-                        <Edit2 size={12} />
+                      <TooltipProvider delayDuration={300}>
-                      </button>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <button
+                              onClick={(e) => {
+                                e.stopPropagation()
+                                setEditingId(chat.id)
+                                setTempName(chat.nombre || chat.titulo || '')
+                              }}
+                              className="rounded-md p-1 transition-colors hover:bg-slate-200 hover:text-teal-600"
+                            >
+                              <Edit2 size={14} />
+                            </button>
+                          </TooltipTrigger>
+                          <TooltipContent side="top" className="text-[10px]">
+                            Editar nombre
+                          </TooltipContent>
+                        </Tooltip>
 
-                      {/* Botón para Archivar/Desarchivar dinámico */}
+                        <Tooltip>
-                      <button
+                          <TooltipTrigger asChild>
-                        onClick={(e) => {
+                            <button
-                          e.stopPropagation()
+                              onClick={(e) => {
-                          // Si el estado actual es ACTIVA, mandamos ARCHIVADA. Si no, viceversa.
+                                e.stopPropagation()
-                          const nuevoEstado =
+                                const nuevoEstado =
-                            chat.estado === 'ACTIVA' ? 'ARCHIVADA' : 'ACTIVA'
+                                  chat.estado === 'ACTIVA'
-                          updateStatus({ id: chat.id, estado: nuevoEstado })
+                                    ? 'ARCHIVADA'
-                        }}
+                                    : 'ACTIVA'
-                        className={cn(
+                                updateStatus({
-                          'p-1 transition-colors',
+                                  id: chat.id,
-                          chat.estado === 'ACTIVA'
+                                  estado: nuevoEstado,
-                            ? 'hover:text-red-500'
+                                })
-                            : 'hover:text-teal-600',
+                              }}
-                        )}
+                              className={cn(
-                        title={
+                                'rounded-md p-1 transition-colors hover:bg-slate-200',
-                          chat.estado === 'ACTIVA'
+                                chat.estado === 'ACTIVA'
-                            ? 'Archivar chat'
+                                  ? 'hover:text-red-500'
-                            : 'Desarchivar chat'
+                                  : 'hover:text-teal-600',
-                        }
+                              )}
-                      >
+                            >
-                        {chat.estado === 'ACTIVA' ? (
+                              {chat.estado === 'ACTIVA' ? (
-                          <Archive size={12} />
+                                <Archive size={14} />
-                        ) : (
+                              ) : (
-                          /* Icono de Desarchivar */
+                                <History size={14} className="scale-x-[-1]" />
-                          <History size={12} className="scale-x-[-1]" />
+                              )}
-                        )}
+                            </button>
-                      </button>
+                          </TooltipTrigger>
+                          <TooltipContent side="top" className="text-[10px]">
+                            {chat.estado === 'ACTIVA'
+                              ? 'Archivar'
+                              : 'Desarchivar'}
+                          </TooltipContent>
+                        </Tooltip>
+                      </TooltipProvider>
                     </div>
                   </>
                 )}
@@ -511,6 +573,7 @@ export function IAAsignaturaTab({
                     >
                       {/* Texto del mensaje principal */}
                       <div
+                        style={{ whiteSpace: 'pre-line' }}
                         className={cn(
                           'text-sm leading-relaxed',
                           msg.role === 'assistant' && 'p-4',
@@ -532,6 +595,18 @@ export function IAAsignaturaTab({
                                 key={sug.id}
                                 sug={sug}
                                 asignaturaId={asignaturaId}
+                                onApplied={(campoFinalizado) => {
+                                  // Filtramos el array para conservar todos MENOS el que se aplicó
+                                  console.log(campoFinalizado)
+                                  console.log('campos:', selectedFields)
+
+                                  setSelectedFields((prev) =>
+                                    prev.filter((fieldObj) => {
+                                      // Accedemos a .key porque fieldObj es { key: "...", label: "..." }
+                                      return fieldObj.key !== campoFinalizado
+                                    }),
+                                  )
+                                }}
                               />
                             ))}
                           </div>

src/components/asignaturas/detalle/SaveAsignatura/ImprovementCardProps.tsx

@@ -1,4 +1,4 @@
-import { Check, Loader2 } from 'lucide-react'
+import { Check, Loader2, BookOpen, Clock, ListChecks } from 'lucide-react'
 import { useState } from 'react'
 
 import type { IASugerencia } from '@/types/asignatura'
@@ -7,50 +7,65 @@ import { Button } from '@/components/ui/button'
 import {
   useUpdateAsignatura,
   useSubject,
-  useUpdateSubjectRecommendation, // Importamos tu nuevo hook
+  useUpdateSubjectRecommendation,
 } from '@/data'
+import { cn } from '@/lib/utils'
 
 interface ImprovementCardProps {
   sug: IASugerencia
   asignaturaId: string
+  onApplied: (campoKey: string) => void
 }
 
-export function ImprovementCard({ sug, asignaturaId }: ImprovementCardProps) {
+export function ImprovementCard({
+  sug,
+  asignaturaId,
+  onApplied,
+}: ImprovementCardProps) {
   const { data: asignatura } = useSubject(asignaturaId)
   const updateAsignatura = useUpdateAsignatura()
-
-  // Hook para marcar en la base de datos que la sugerencia fue aceptada
   const updateRecommendation = useUpdateSubjectRecommendation()
 
   const [isApplying, setIsApplying] = useState(false)
 
   const handleApply = async () => {
-    if (!asignatura?.datos) return
+    if (!asignatura) return
 
     setIsApplying(true)
     try {
-      // 1. Actualizar el contenido real de la asignatura (JSON datos)
+      // 1. Identificar a qué columna debe ir el guardado
-      const nuevosDatos = {
+      let patchData = {}
-        ...asignatura.datos,
+
-        [sug.campoKey]: sug.valorSugerido,
+      if (sug.campoKey === 'contenido_tematico') {
+        // Se guarda directamente en la columna contenido_tematico
+        patchData = { contenido_tematico: sug.valorSugerido }
+      } else if (sug.campoKey === 'criterios_de_evaluacion') {
+        // Se guarda directamente en la columna criterios_de_evaluacion
+        patchData = { criterios_de_evaluacion: sug.valorSugerido }
+      } else {
+        // Otros campos (ciclo, fines, etc.) se siguen guardando en el JSON de la columna 'datos'
+        patchData = {
+          datos: {
+            ...asignatura.datos,
+            [sug.campoKey]: sug.valorSugerido,
+          },
+        }
       }
 
+      // 2. Ejecutar la actualización con la estructura correcta
       await updateAsignatura.mutateAsync({
         asignaturaId: asignaturaId as any,
-        patch: {
+        patch: patchData as any,
-          datos: nuevosDatos,
-        } as any,
       })
 
-      // 2. Marcar la sugerencia como "aplicada: true" en la tabla de mensajes
+      // 3. Marcar la recomendación como aplicada
-      // Usamos los datos que vienen en el objeto 'sug'
       await updateRecommendation.mutateAsync({
         mensajeId: sug.messageId,
         campoAfectado: sug.campoKey,
       })
+      console.log(sug.campoKey)
 
-      // Al terminar, React Query invalidará 'subject-messages'
+      onApplied(sug.campoKey)
-      // y la card pasará automáticamente al estado "Aplicado" (gris)
     } catch (error) {
       console.error('Error al aplicar mejora:', error)
     } finally {
@@ -58,10 +73,89 @@ export function ImprovementCard({ sug, asignaturaId }: ImprovementCardProps) {
     }
   }
 
+  // --- FUNCIÓN PARA RENDERIZAR EL CONTENIDO DE FORMA SEGURA ---
+  const renderContenido = (valor: any) => {
+    // Si no es un array, es texto simple
+    if (!Array.isArray(valor)) {
+      return <p className="italic">"{String(valor)}"</p>
+    }
+
+    // --- CASO 1: CONTENIDO TEMÁTICO (Detectamos si el primer objeto tiene 'unidad') ---
+    if (valor[0]?.hasOwnProperty('unidad')) {
+      return (
+        <div className="space-y-3">
+          {valor.map((u: any, idx: number) => (
+            <div
+              key={idx}
+              className="rounded-md border border-teal-100 bg-white p-2 shadow-sm"
+            >
+              <div className="mb-1 flex items-center gap-2 border-b border-slate-50 pb-1 text-[11px] font-bold text-teal-800">
+                <BookOpen size={12} /> Unidad {u.unidad}: {u.titulo}
+              </div>
+              <ul className="space-y-1">
+                {u.temas?.map((t: any, tidx: number) => (
+                  <li
+                    key={tidx}
+                    className="flex items-start justify-between gap-2 text-[10px] text-slate-600"
+                  >
+                    <span className="leading-tight">• {t.nombre}</span>
+                    <span className="flex shrink-0 items-center gap-0.5 font-mono text-slate-400">
+                      <Clock size={10} /> {t.horasEstimadas}h
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      )
+    }
+
+    // --- CASO 2: CRITERIOS DE EVALUACIÓN (Detectamos si tiene 'criterio') ---
+    if (valor[0]?.hasOwnProperty('criterio')) {
+      return (
+        <div className="space-y-2">
+          <div className="mb-1 flex items-center gap-2 text-[10px] font-bold text-slate-400 uppercase">
+            <ListChecks size={12} /> Desglose de evaluación
+          </div>
+          {valor.map((c: any, idx: number) => (
+            <div
+              key={idx}
+              className="flex items-center justify-between gap-3 rounded-md border border-slate-100 bg-white p-2 shadow-sm"
+            >
+              <span className="text-[11px] leading-tight text-slate-700">
+                {c.criterio}
+              </span>
+              <div className="flex shrink-0 items-center gap-1 rounded-full border border-orange-100 bg-orange-50 px-2 py-0.5 text-[10px] font-bold text-orange-600">
+                {c.porcentaje}%
+              </div>
+            </div>
+          ))}
+          {/* Opcional: Suma total para verificar que de 100% */}
+          <div className="pt-1 text-right text-[9px] font-medium text-slate-400">
+            Total:{' '}
+            {valor.reduce(
+              (acc: number, curr: any) => acc + (curr.porcentaje || 0),
+              0,
+            )}
+            %
+          </div>
+        </div>
+      )
+    }
+
+    // Caso por defecto (Array genérico)
+    return (
+      <pre className="text-[10px]">
+        {/* JSON.stringify(valor, null, 2)*/ 'hola'}
+      </pre>
+    )
+  }
+
   // --- ESTADO APLICADO ---
   if (sug.aceptada) {
     return (
-      <div className="flex flex-col rounded-xl border border-slate-100 bg-white p-3 shadow-sm">
+      <div className="flex flex-col rounded-xl border border-slate-100 bg-white p-3 opacity-80 shadow-sm">
         <div className="mb-3 flex items-center justify-between gap-4">
           <span className="text-sm font-bold text-slate-800">
             {sug.campoNombre}
@@ -72,7 +166,7 @@ export function ImprovementCard({ sug, asignaturaId }: ImprovementCardProps) {
           </div>
         </div>
         <div className="rounded-lg border border-teal-100 bg-teal-50/30 p-3 text-xs leading-relaxed text-slate-500">
-          "{sug.valorSugerido}"
+          {renderContenido(sug.valorSugerido)}
         </div>
       </div>
     )
@@ -101,8 +195,13 @@ export function ImprovementCard({ sug, asignaturaId }: ImprovementCardProps) {
         </Button>
       </div>
 
-      <div className="line-clamp-4 rounded-lg border border-dashed border-slate-200 bg-slate-50/50 p-3 text-xs leading-relaxed text-slate-600 italic">
+      <div
-        "{sug.valorSugerido}"
+        className={cn(
+          'rounded-lg border border-dashed border-slate-200 bg-slate-50/50 p-3 text-xs leading-relaxed text-slate-600',
+          !Array.isArray(sug.valorSugerido) && 'line-clamp-4 italic',
+        )}
+      >
+        {renderContenido(sug.valorSugerido)}
       </div>
     </div>
   )

src/components/ui/radio-group.tsx

@@ -0,0 +1,43 @@
+import * as React from "react"
+import { CircleIcon } from "lucide-react"
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn("grid gap-3", className)}
+      {...props}
+    />
+  )
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        "aspect-square size-4 shrink-0 rounded-full border border-input text-primary shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="relative flex items-center justify-center"
+      >
+        <CircleIcon className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-primary" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }

src/components/wizard/WizardResponsiveHeader.tsx

@@ -5,16 +5,24 @@ export function WizardResponsiveHeader({
   wizard,
   methods,
   titleOverrides,
+  hiddenStepIds,
 }: {
   wizard: any
   methods: any
   titleOverrides?: Record<string, string>
+  hiddenStepIds?: Array<string>
 }) {
-  const idx = wizard.utils.getIndex(methods.current.id)
+  const hidden = new Set(hiddenStepIds ?? [])
-  const totalSteps = wizard.steps.length
+  const visibleSteps = (wizard.steps as Array<any>).filter(
-  const currentIndex = idx + 1
+    (s) => s && !hidden.has(s.id),
-  const hasNextStep = idx < totalSteps - 1
+  )
-  const nextStep = wizard.steps[currentIndex]
+
+  const idx = visibleSteps.findIndex((s) => s.id === methods.current.id)
+  const safeIdx = idx >= 0 ? idx : 0
+  const totalSteps = visibleSteps.length
+  const currentIndex = Math.min(safeIdx + 1, totalSteps)
+  const hasNextStep = safeIdx < totalSteps - 1
+  const nextStep = visibleSteps[safeIdx + 1]
 
   const resolveTitle = (step: any) => titleOverrides?.[step?.id] ?? step?.title
 
@@ -45,10 +53,11 @@ export function WizardResponsiveHeader({
 
       <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) => (
+          {visibleSteps.map((step: any, visibleIdx: number) => (
             <wizard.Stepper.Step
               key={step.id}
               of={step.id}
+              icon={visibleIdx + 1}
               className="whitespace-nowrap"
             >
               <wizard.Stepper.Title>

src/data/api/plans.api.ts

@@ -207,7 +207,7 @@ export async function plan_asignaturas_list(
   const { data, error } = await supabase
     .from('asignaturas')
     .select(
-      'id,plan_estudio_id,horas_academicas,horas_independientes,estructura_id,codigo,nombre,tipo,creditos,numero_ciclo,linea_plan_id,orden_celda,estado,datos,contenido_tematico,asignatura_hash,tipo_origen,meta_origen,creado_por,actualizado_por,creado_en,actualizado_en',
+      'id,plan_estudio_id,horas_academicas,horas_independientes,estructura_id,codigo,nombre,tipo,creditos,numero_ciclo,linea_plan_id,orden_celda,estado,datos,contenido_tematico,asignatura_hash,tipo_origen,meta_origen,creado_por,actualizado_por,creado_en,actualizado_en,prerrequisito_asignatura_id',
     )
     .eq('plan_estudio_id', planId)
     .order('numero_ciclo', { ascending: true, nullsFirst: false })

src/data/api/subjects.api.ts

@@ -191,7 +191,7 @@ export async function subjects_get(subjectId: UUID): Promise<AsignaturaDetail> {
     .from('asignaturas')
     .select(
       `
-      id,plan_estudio_id,estructura_id,codigo,nombre,tipo,creditos,numero_ciclo,linea_plan_id,orden_celda,estado,datos,contenido_tematico,horas_academicas,horas_independientes,asignatura_hash,tipo_origen,meta_origen,creado_por,actualizado_por,creado_en,actualizado_en,criterios_de_evaluacion,
+      id,plan_estudio_id,estructura_id,codigo,nombre,tipo,creditos,numero_ciclo,linea_plan_id,orden_celda,estado,datos,contenido_tematico,horas_academicas,horas_independientes,asignatura_hash,tipo_origen,meta_origen,creado_por,actualizado_por,creado_en,actualizado_en,criterios_de_evaluacion,prerrequisito_asignatura_id,
       planes_estudio(
         id,carrera_id,estructura_id,nombre,nivel,tipo_ciclo,numero_ciclos,datos,estado_actual_id,activo,tipo_origen,meta_origen,creado_por,actualizado_por,creado_en,actualizado_en,
         carreras(id,facultad_id,nombre,nombre_corto,clave_sep,activa, facultades(id,nombre,nombre_corto,color,icono))

src/features/bibliografia/nueva/NuevaBibliografiaModalContainer.tsx

@@ -26,6 +26,12 @@ import type {
 import type { TablesInsert } from '@/types/supabase'
 
 import { defineStepper } from '@/components/stepper'
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@/components/ui/accordion'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import {
@@ -38,6 +44,7 @@ import {
 import { Checkbox } from '@/components/ui/checkbox'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
 import {
   Select,
   SelectContent,
@@ -45,6 +52,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
+import { Separator } from '@/components/ui/separator'
 import { Textarea } from '@/components/ui/textarea'
 import {
   Tooltip,
@@ -57,6 +65,221 @@ import { buscar_bibliografia } from '@/data'
 import { useCreateBibliografia } from '@/data/hooks/useSubjects'
 import { cn } from '@/lib/utils'
 
+type BibliotecaOption = {
+  id: string
+  title: string
+  authors: Array<string>
+  publisher?: string
+  year?: number
+  isbn?: string
+  shelf?: string
+  badgeText?: string
+}
+
+type BibliotecaOptionTemplate = Omit<BibliotecaOption, 'id'>
+
+// Hardcodeado: 3 conjuntos de coincidencias (0, 2 y 5).
+const BIBLIOTECA_MATCH_SETS: Array<Array<BibliotecaOptionTemplate>> = [
+  [],
+  [
+    {
+      title: 'Coincidencia en biblioteca (Ejemplar 1)',
+      authors: ['Autor A', 'Autor B'],
+      publisher: 'Editorial X',
+      year: 2020,
+      isbn: '9780000000001',
+      shelf: 'QA76.9 .A1 2020',
+      badgeText: 'Coincidencia ISBN',
+    },
+    {
+      title: 'Coincidencia en biblioteca (Ejemplar 2)',
+      authors: ['Autor C'],
+      publisher: 'Editorial Y',
+      year: 2016,
+      shelf: 'QA76.9 .A2 2016',
+    },
+  ],
+  [
+    {
+      title: 'Coincidencia en biblioteca (Ejemplar 1)',
+      authors: ['Autor A', 'Autor B'],
+      publisher: 'Editorial X',
+      year: 2020,
+      isbn: '9780000000001',
+      shelf: 'QA76.9 .A1 2020',
+      badgeText: 'Coincidencia ISBN',
+    },
+    {
+      title: 'Coincidencia en biblioteca (Ejemplar 2)',
+      authors: ['Autor C'],
+      publisher: 'Editorial Y',
+      year: 2016,
+      shelf: 'QA76.9 .A2 2016',
+    },
+    {
+      title: 'Coincidencia en biblioteca (Ejemplar 3)',
+      authors: ['Autor D', 'Autor E'],
+      publisher: 'Editorial Z',
+      year: 2014,
+      shelf: 'QA76.9 .A3 2014',
+    },
+    {
+      title: 'Coincidencia en biblioteca (Ejemplar 4)',
+      authors: ['Autor F'],
+      publisher: 'Editorial W',
+      year: 2011,
+      shelf: 'QA76.9 .A4 2011',
+    },
+    {
+      title: 'Coincidencia en biblioteca (Ejemplar 5)',
+      authors: ['Autor G'],
+      publisher: 'Editorial V',
+      year: 2009,
+      shelf: 'QA76.9 .A5 2009',
+    },
+  ],
+]
+
+export function BookSelectionAccordion({
+  onlineSourceLabel,
+  online,
+  options,
+  value,
+  onValueChange,
+}: {
+  onlineSourceLabel: string
+  online: {
+    id: string
+    title: string
+    authorsLine: string
+    year?: number
+    isbn?: string
+  }
+  options: Array<BibliotecaOption>
+  value: string | undefined
+  onValueChange: (value: string) => void
+}) {
+  // Estado inicial indefinido para que nada esté seleccionado por defecto
+  const [selectedBook, setSelectedBook] = useState<string | undefined>(value)
+
+  useEffect(() => {
+    setSelectedBook(value)
+  }, [value])
+
+  const onlineValue = `online:${online.id}`
+
+  const optionBaseClass =
+    'relative flex items-start space-x-3 rounded-lg border p-4 transition-colors'
+
+  const optionClass = (isSelected: boolean) =>
+    cn(
+      optionBaseClass,
+      isSelected
+        ? 'border-primary bg-primary/5'
+        : 'hover:border-primary/30 hover:bg-accent/50',
+    )
+
+  return (
+    <>
+      {/* Un solo RadioGroup controla ambos lados */}
+      <RadioGroup
+        value={selectedBook}
+        onValueChange={(v) => {
+          setSelectedBook(v)
+          onValueChange(v)
+        }}
+        className="flex flex-col gap-6 md:flex-row"
+      >
+        {/* --- LADO IZQUIERDO: Sugerencia Online --- */}
+        <div className="flex-1 space-y-4">
+          <h4 className="text-muted-foreground text-sm font-medium">
+            Sugerencia Original ({onlineSourceLabel})
+          </h4>
+
+          <div className={optionClass(selectedBook === onlineValue)}>
+            <RadioGroupItem
+              value={onlineValue}
+              id={onlineValue}
+              className="mt-1"
+            />
+            <Label
+              htmlFor={onlineValue}
+              className="flex flex-1 cursor-pointer flex-col"
+            >
+              <span className="font-semibold">{online.title}</span>
+              <span className="text-muted-foreground text-sm">
+                {online.authorsLine}
+                {online.year ? ` (${online.year})` : ''}
+              </span>
+              {online.isbn ? (
+                <span className="text-muted-foreground mt-1 text-xs">
+                  ISBN: {online.isbn}
+                </span>
+              ) : null}
+            </Label>
+          </div>
+        </div>
+
+        {/* Separador vertical para escritorio, horizontal en móviles */}
+        <Separator orientation="vertical" className="hidden h-auto md:block" />
+        <Separator orientation="horizontal" className="md:hidden" />
+
+        {/* --- LADO DERECHO: Alternativas de Biblioteca --- */}
+        <div className="flex-1 space-y-4">
+          <h4 className="text-muted-foreground text-sm font-medium">
+            Disponibles en Biblioteca
+          </h4>
+
+          <div className="max-h-75 space-y-3 overflow-y-auto pr-2">
+            {options.length === 0 ? (
+              <div className="text-muted-foreground text-sm">
+                No se encontraron alternativas.
+              </div>
+            ) : (
+              options.map((opt) => {
+                const optValue = `biblio:${opt.id}`
+                const authorsLine = opt.authors.join('; ')
+                const isSelected = selectedBook === optValue
+                return (
+                  <div key={opt.id} className={optionClass(isSelected)}>
+                    <RadioGroupItem
+                      value={optValue}
+                      id={optValue}
+                      className="mt-1 cursor-pointer"
+                    />
+                    <Label
+                      htmlFor={optValue}
+                      className="flex flex-1 cursor-pointer flex-col"
+                    >
+                      <div className="flex items-center gap-2">
+                        <span className="font-semibold">{opt.title}</span>
+                        {opt.badgeText ? (
+                          <Badge className="bg-green-600 hover:bg-green-700">
+                            {opt.badgeText}
+                          </Badge>
+                        ) : null}
+                      </div>
+                      <span className="text-muted-foreground text-sm">
+                        {authorsLine}
+                        {opt.year ? ` (${opt.year})` : ''}
+                      </span>
+                      {opt.shelf ? (
+                        <span className="bg-muted mt-2 w-fit rounded px-1 font-mono text-xs">
+                          Estante: {opt.shelf}
+                        </span>
+                      ) : null}
+                    </Label>
+                  </div>
+                )
+              })
+            )}
+          </div>
+        </div>
+      </RadioGroup>
+    </>
+  )
+}
+
 type MetodoBibliografia = 'MANUAL' | 'EN_LINEA' | null
 export type FormatoCita = 'apa' | 'ieee' | 'vancouver' | 'chicago'
 
@@ -156,6 +379,10 @@ type WizardState = {
       selected: boolean
       endpoint: EndpointResult['endpoint']
       item: GoogleBooksVolume | OpenLibraryDoc
+      biblioteca?: {
+        options?: Array<BibliotecaOption>
+        choiceId?: string
+      }
     }>
     isLoading: boolean
     errorMessage: string | null
@@ -192,10 +419,96 @@ const Wizard = defineStepper(
     title: 'Datos básicos',
     description: 'Seleccionar o capturar',
   },
+  {
+    id: 'biblioteca',
+    title: 'Biblioteca',
+    description: 'Comparar con alternativas de la biblioteca',
+  },
   { id: 'paso3', title: 'Detalles', description: 'Formato y citas' },
   { id: 'resumen', title: 'Resumen', description: 'Confirmar' },
 )
 
+type BibliotecaStepHandle = {
+  validateBeforeNext: () => boolean
+}
+
+function bibliotecaOptionToRef(opt: BibliotecaOption): BibliografiaRef {
+  return {
+    id: opt.id,
+    raw: undefined,
+    title: opt.title,
+    subtitle: undefined,
+    authors: opt.authors,
+    publisher: opt.publisher,
+    year: opt.year,
+    isbn: opt.isbn,
+    tipo: 'BASICA',
+  }
+}
+
+function getOnlineSuggestionTitle(s: IASugerencia): string {
+  if (s.endpoint === 'google') {
+    const info = (s.item as GoogleBooksVolume).volumeInfo ?? {}
+    return (info.title ?? '').trim() || 'Sin título'
+  }
+
+  const doc = s.item as OpenLibraryDoc
+  return (
+    (typeof doc['title'] === 'string' ? doc['title'] : '').trim() ||
+    'Sin título'
+  )
+}
+
+function getOnlineSuggestionAuthors(s: IASugerencia): Array<string> {
+  if (s.endpoint === 'google') {
+    const info = (s.item as GoogleBooksVolume).volumeInfo ?? {}
+    return Array.isArray(info.authors) ? info.authors : []
+  }
+
+  const doc = s.item as OpenLibraryDoc
+  return Array.isArray(doc['author_name'])
+    ? (doc['author_name'] as Array<unknown>).filter(
+        (a): a is string => typeof a === 'string',
+      )
+    : []
+}
+
+function getOnlineSuggestionIsbn(s: IASugerencia): string | undefined {
+  if (s.endpoint === 'google') {
+    const info = (s.item as GoogleBooksVolume).volumeInfo
+    const isbn = info?.industryIdentifiers?.find(
+      (x) => x.identifier,
+    )?.identifier
+    return typeof isbn === 'string' && isbn.trim() ? isbn.trim() : undefined
+  }
+
+  const doc = s.item as OpenLibraryDoc
+  const isbn = Array.isArray(doc['isbn'])
+    ? (doc['isbn'] as Array<unknown>).find(
+        (x): x is string => typeof x === 'string',
+      )
+    : undefined
+  return typeof isbn === 'string' && isbn.trim() ? isbn.trim() : undefined
+}
+
+function getOnlineSuggestionYear(s: IASugerencia): number | undefined {
+  return s.endpoint === 'google'
+    ? tryParseYear((s.item as GoogleBooksVolume).volumeInfo?.publishedDate)
+    : tryParseYearFromOpenLibrary(s.item as OpenLibraryDoc)
+}
+
+function iaSugerenciaToChosenRef(s: IASugerencia): BibliografiaRef {
+  const choiceId = s.biblioteca?.choiceId
+  const options = s.biblioteca?.options
+
+  if (choiceId && choiceId !== 'online' && Array.isArray(options)) {
+    const chosen = options.find((o) => o.id === choiceId)
+    if (chosen) return bibliotecaOptionToRef(chosen)
+  }
+
+  return endpointResultToRef(iaSugerenciaToEndpointResult(s))
+}
+
 function parsearAutor(nombreCompleto: string): CSLAuthor {
   if (nombreCompleto.includes(',')) {
     return {
@@ -446,6 +759,7 @@ export function NuevaBibliografiaModalContainer({
   const createBibliografia = useCreateBibliografia()
 
   const formatoStepRef = useRef<FormatoYCitasStepHandle | null>(null)
+  const bibliotecaStepRef = useRef<BibliotecaStepHandle | null>(null)
 
   const [wizard, setWizard] = useState<WizardState>({
     metodo: null,
@@ -483,9 +797,9 @@ export function NuevaBibliografiaModalContainer({
   const styleCacheRef = useRef(new Map<string, string>())
   const localeCacheRef = useRef(new Map<string, string>())
 
-  const titleOverrides =
+  const titleOverrides: Record<string, string> =
     wizard.metodo === 'EN_LINEA'
-      ? { paso2: 'Sugerencias', paso3: 'Estructura' }
+      ? { paso2: 'Sugerencias', biblioteca: 'Biblioteca', paso3: 'Estructura' }
       : { paso2: 'Datos básicos', paso3: 'Detalles' }
 
   const handleClose = () => {
@@ -499,7 +813,7 @@ export function NuevaBibliografiaModalContainer({
     wizard.metodo === 'EN_LINEA'
       ? wizard.ia.sugerencias
           .filter((s) => s.selected)
-          .map((s) => endpointResultToRef(iaSugerenciaToEndpointResult(s)))
+          .map((s) => iaSugerenciaToChosenRef(s))
       : wizard.manual.refs
 
   // Mantener `wizard.refs` como snapshot para pasos 3/4.
@@ -789,14 +1103,17 @@ export function NuevaBibliografiaModalContainer({
     }
   }
 
+  const WizardDef = Wizard as any
+
   return (
-    <Wizard.Stepper.Provider
+    <WizardDef.Stepper.Provider
-      initialStep={Wizard.utils.getFirst().id}
+      initialStep={WizardDef.utils.getFirst().id}
       className="flex h-full flex-col"
     >
-      {({ methods }) => {
+      {({ methods }: any) => {
-        const idx = Wizard.utils.getIndex(methods.current.id)
+        const idx = WizardDef.utils.getIndex(methods.current.id)
-        const isLast = idx >= Wizard.steps.length - 1
+        const isLast = idx >= WizardDef.steps.length - 1
+        const currentId = methods.current.id as string
 
         return (
           <WizardLayout
@@ -804,17 +1121,59 @@ export function NuevaBibliografiaModalContainer({
             onClose={handleClose}
             headerSlot={
               <WizardResponsiveHeader
-                wizard={Wizard}
+                wizard={WizardDef}
                 methods={methods}
                 titleOverrides={titleOverrides}
+                hiddenStepIds={
+                  wizard.metodo === 'MANUAL' ? ['biblioteca'] : undefined
+                }
               />
             }
             footerSlot={
-              <Wizard.Stepper.Controls>
+              <WizardDef.Stepper.Controls>
                 <div className="flex grow items-center justify-between">
                   <Button
                     variant="secondary"
-                    onClick={() => methods.prev()}
+                    onClick={() => {
+                      const goToStep = (targetId: string) => {
+                        if (typeof methods?.goTo === 'function') {
+                          methods.goTo(targetId)
+                          return
+                        }
+                        if (typeof methods?.setStep === 'function') {
+                          methods.setStep(targetId)
+                          return
+                        }
+                        if (typeof methods?.navigation?.goTo === 'function') {
+                          methods.navigation.goTo(targetId)
+                          return
+                        }
+
+                        const targetIdx = WizardDef.utils.getIndex(targetId)
+
+                        const stepOnce = () => {
+                          const currentIdx = WizardDef.utils.getIndex(
+                            methods.current.id,
+                          )
+                          if (currentIdx === targetIdx) return
+                          if (currentIdx < targetIdx) methods.next()
+                          else methods.prev()
+                          queueMicrotask(stepOnce)
+                        }
+
+                        stepOnce()
+                      }
+
+                      if (
+                        wizard.metodo === 'MANUAL' &&
+                        methods.current.id === 'paso3'
+                      ) {
+                        goToStep('paso2')
+                        return
+                      }
+
+                      methods.prev()
+                    }}
                     disabled={
                       idx === 0 || wizard.ia.isLoading || wizard.isSaving
                     }
@@ -830,26 +1189,79 @@ export function NuevaBibliografiaModalContainer({
                   ) : (
                     <Button
                       onClick={() => {
-                        if (idx === 2) {
+                        const goToStep = (targetId: string) => {
+                          if (typeof methods?.goTo === 'function') {
+                            methods.goTo(targetId)
+                            return
+                          }
+                          if (typeof methods?.setStep === 'function') {
+                            methods.setStep(targetId)
+                            return
+                          }
+                          if (typeof methods?.navigation?.goTo === 'function') {
+                            methods.navigation.goTo(targetId)
+                            return
+                          }
+
+                          const targetIdx = WizardDef.utils.getIndex(targetId)
+
+                          const stepOnce = () => {
+                            const currentIdx = WizardDef.utils.getIndex(
+                              methods.current.id,
+                            )
+                            if (currentIdx === targetIdx) return
+                            if (currentIdx < targetIdx) methods.next()
+                            else methods.prev()
+                            queueMicrotask(stepOnce)
+                          }
+
+                          stepOnce()
+                        }
+
+                        if (
+                          wizard.metodo === 'MANUAL' &&
+                          currentId === 'paso2'
+                        ) {
+                          goToStep('paso3')
+                          return
+                        }
+
+                        if (currentId === 'biblioteca') {
+                          const ok =
+                            bibliotecaStepRef.current?.validateBeforeNext() ??
+                            true
+                          if (!ok) return
+                        }
+
+                        if (currentId === 'paso3') {
                           const ok =
                             formatoStepRef.current?.validateBeforeNext() ?? true
                           if (!ok) return
+                          if (wizard.metodo === 'EN_LINEA' && wizard.formato) {
+                            void generateCitasForFormato(
+                              wizard.formato,
+                              wizard.refs,
+                              {
+                                force: true,
+                              },
+                            )
+                          }
                         }
                         methods.next()
                       }}
                       disabled={
                         wizard.ia.isLoading ||
                         wizard.isSaving ||
-                        (idx === 0 && !canContinueDesdeMetodo) ||
+                        (currentId === 'metodo' && !canContinueDesdeMetodo) ||
-                        (idx === 1 && !canContinueDesdePaso2) ||
+                        (currentId === 'paso2' && !canContinueDesdePaso2) ||
-                        (idx === 2 && !canContinueDesdePaso3)
+                        (currentId === 'paso3' && !canContinueDesdePaso3)
                       }
                     >
                       Siguiente
                     </Button>
                   )}
                 </div>
-              </Wizard.Stepper.Controls>
+              </WizardDef.Stepper.Controls>
             }
           >
             <div className="mx-auto max-w-3xl">
@@ -863,8 +1275,8 @@ export function NuevaBibliografiaModalContainer({
                 </Card>
               ) : null}
 
-              {idx === 0 && (
+              {currentId === 'metodo' && (
-                <Wizard.Stepper.Panel>
+                <WizardDef.Stepper.Panel>
                   <MetodoStep
                     metodo={wizard.metodo}
                     onChange={(metodo) =>
@@ -876,11 +1288,11 @@ export function NuevaBibliografiaModalContainer({
                       }))
                     }
                   />
-                </Wizard.Stepper.Panel>
+                </WizardDef.Stepper.Panel>
               )}
 
-              {idx === 1 && (
+              {currentId === 'paso2' && (
-                <Wizard.Stepper.Panel>
+                <WizardDef.Stepper.Panel>
                   {wizard.metodo === 'EN_LINEA' ? (
                     <SugerenciasStep
                       q={wizard.ia.q}
@@ -941,11 +1353,33 @@ export function NuevaBibliografiaModalContainer({
                       }
                     />
                   )}
-                </Wizard.Stepper.Panel>
+                </WizardDef.Stepper.Panel>
               )}
 
-              {idx === 2 && (
+              {currentId === 'biblioteca' && wizard.metodo === 'EN_LINEA' && (
-                <Wizard.Stepper.Panel>
+                <WizardDef.Stepper.Panel>
+                  <BibliotecaStep
+                    ref={bibliotecaStepRef}
+                    sugerencias={wizard.ia.sugerencias.filter(
+                      (s) => s.selected,
+                    )}
+                    onPatchSugerencia={(id, patch) =>
+                      setWizard((w) => ({
+                        ...w,
+                        ia: {
+                          ...w.ia,
+                          sugerencias: w.ia.sugerencias.map((s) =>
+                            s.id === id ? { ...s, ...patch } : s,
+                          ),
+                        },
+                      }))
+                    }
+                  />
+                </WizardDef.Stepper.Panel>
+              )}
+
+              {currentId === 'paso3' && (
+                <WizardDef.Stepper.Panel>
                   <FormatoYCitasStep
                     ref={formatoStepRef}
                     refs={wizard.refs}
@@ -985,11 +1419,11 @@ export function NuevaBibliografiaModalContainer({
                       }))
                     }
                   />
-                </Wizard.Stepper.Panel>
+                </WizardDef.Stepper.Panel>
               )}
 
-              {idx === 3 && (
+              {currentId === 'resumen' && (
-                <Wizard.Stepper.Panel>
+                <WizardDef.Stepper.Panel>
                   <ResumenStep
                     metodo={wizard.metodo}
                     formato={wizard.formato}
@@ -998,13 +1432,13 @@ export function NuevaBibliografiaModalContainer({
                       wizard.formato ? wizard.citaEdits[wizard.formato] : {}
                     }
                   />
-                </Wizard.Stepper.Panel>
+                </WizardDef.Stepper.Panel>
               )}
             </div>
           </WizardLayout>
         )
       }}
-    </Wizard.Stepper.Provider>
+    </WizardDef.Stepper.Provider>
   )
 }
 
@@ -1348,6 +1782,189 @@ function SugerenciasStep({
   )
 }
 
+type BibliotecaStepProps = {
+  sugerencias: Array<IASugerencia>
+  onPatchSugerencia: (id: string, patch: Partial<IASugerencia>) => void
+}
+
+const BibliotecaStep = forwardRef<BibliotecaStepHandle, BibliotecaStepProps>(
+  function BibliotecaStep({ sugerencias, onPatchSugerencia }, ref) {
+    const [openIds, setOpenIds] = useState<Array<string>>([])
+    const anchorRefs = useRef<Record<string, HTMLDivElement | null>>({})
+    const initializedRef = useRef(new Set<string>())
+
+    const scrollToAccordion = (id: string) => {
+      const el = anchorRefs.current[id]
+      if (!el) return
+      el.scrollIntoView({ behavior: 'smooth', block: 'center' })
+    }
+
+    useEffect(() => {
+      for (const s of sugerencias) {
+        const b = s.biblioteca
+        const hasOptions = Array.isArray(b?.options)
+        if (hasOptions) continue
+        if (initializedRef.current.has(s.id)) continue
+
+        initializedRef.current.add(s.id)
+
+        const setIdx = Math.floor(Math.random() * 3)
+        const templates = BIBLIOTECA_MATCH_SETS[setIdx] ?? []
+        const options: Array<BibliotecaOption> = templates.map((t, i) => ({
+          id: `biblio:${s.id}:${i + 1}`,
+          ...t,
+        }))
+
+        onPatchSugerencia(s.id, {
+          biblioteca: {
+            options,
+            choiceId: options.length === 0 ? 'online' : undefined,
+          },
+        })
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [sugerencias])
+
+    const validateBeforeNext = () => {
+      const unresolved = sugerencias.find((s) => {
+        const b = s.biblioteca
+        if (!b || !Array.isArray(b.options)) return true
+        if (b.options.length === 0) return false
+        return !b.choiceId
+      })
+
+      if (!unresolved) return true
+
+      setOpenIds((prev) =>
+        prev.includes(unresolved.id) ? prev : [...prev, unresolved.id],
+      )
+      requestAnimationFrame(() => scrollToAccordion(unresolved.id))
+      return false
+    }
+
+    useImperativeHandle(ref, () => ({ validateBeforeNext }))
+
+    return (
+      <div className="space-y-4">
+        <Card>
+          <CardHeader>
+            <CardTitle>Comparar con alternativas de la biblioteca</CardTitle>
+            <CardDescription>
+              Conserva la sugerencia original o sustitúyela por una
+              coincidencia.
+            </CardDescription>
+          </CardHeader>
+        </Card>
+
+        <Accordion
+          type="multiple"
+          value={openIds}
+          onValueChange={setOpenIds}
+          className="w-full space-y-2"
+        >
+          {sugerencias.map((s) => {
+            const title = getOnlineSuggestionTitle(s)
+            const authors = getOnlineSuggestionAuthors(s)
+            const authorsLine = authors.join('; ') || '—'
+            const year = getOnlineSuggestionYear(s)
+            const isbn = getOnlineSuggestionIsbn(s)
+            const sourceLabel =
+              s.endpoint === 'google' ? 'Google Books' : 'Open Library'
+
+            const b = s.biblioteca
+            const options = b?.options ?? []
+
+            const badgeState: 'por_revisar' | 'sustituido' | 'mantenido' =
+              !b || !Array.isArray(b.options)
+                ? 'por_revisar'
+                : options.length === 0
+                  ? 'mantenido'
+                  : !b.choiceId
+                    ? 'por_revisar'
+                    : b.choiceId === 'online'
+                      ? 'mantenido'
+                      : 'sustituido'
+
+            const badge =
+              badgeState === 'por_revisar' ? (
+                <Badge className="bg-yellow-500 text-black hover:bg-yellow-500">
+                  Por revisar
+                </Badge>
+              ) : badgeState === 'sustituido' ? (
+                <Badge className="bg-green-600 text-white hover:bg-green-700">
+                  Sustituido
+                </Badge>
+              ) : (
+                <Badge className="bg-blue-600 text-white hover:bg-blue-700">
+                  Mantenido
+                </Badge>
+              )
+
+            const radioValue =
+              b?.choiceId === 'online' || (options.length === 0 && !b?.choiceId)
+                ? `online:${s.id}`
+                : typeof b?.choiceId === 'string'
+                  ? `biblio:${b.choiceId}`
+                  : undefined
+
+            return (
+              <AccordionItem
+                key={s.id}
+                value={s.id}
+                className="border-border/60 bg-background/40 rounded-lg border border-b-0 px-3"
+              >
+                <div
+                  ref={(el) => {
+                    anchorRefs.current[s.id] = el
+                  }}
+                />
+                <AccordionTrigger className="hover:bg-accent/30 data-[state=open]:bg-accent/20 data-[state=open]:text-accent-foreground -mx-3 px-3">
+                  <div className="flex w-full items-center justify-between gap-3">
+                    <span className="min-w-0 text-wrap">{title}</span>
+                    {badge}
+                  </div>
+                </AccordionTrigger>
+                <AccordionContent className="text-muted-foreground mt-4">
+                  <div className="mx-1 grid gap-3 pb-2">
+                    <BookSelectionAccordion
+                      onlineSourceLabel={sourceLabel}
+                      online={{
+                        id: s.id,
+                        title,
+                        authorsLine,
+                        year,
+                        isbn,
+                      }}
+                      options={options}
+                      value={radioValue}
+                      onValueChange={(v) => {
+                        const nextChoiceId = v.startsWith('online:')
+                          ? 'online'
+                          : v.startsWith('biblio:')
+                            ? v.slice('biblio:'.length)
+                            : undefined
+
+                        if (!nextChoiceId) return
+
+                        onPatchSugerencia(s.id, {
+                          biblioteca: {
+                            options,
+                            choiceId: nextChoiceId,
+                          },
+                        })
+                      }}
+                    />
+                  </div>
+                </AccordionContent>
+              </AccordionItem>
+            )
+          })}
+        </Accordion>
+      </div>
+    )
+  },
+)
+
 function DatosBasicosManualStep({
   draft,
   refs,
@@ -1419,6 +2036,12 @@ function DatosBasicosManualStep({
                     publisher: e.target.value.slice(0, 300),
                   })
                 }
+                onBlur={() => {
+                  const trimmed = draft.publisher.trim()
+                  if (trimmed !== draft.publisher) {
+                    onChangeDraft({ ...draft, publisher: trimmed })
+                  }
+                }}
                 maxLength={300}
               />
             </div>
@@ -1817,9 +2440,17 @@ const FormatoYCitasStep = forwardRef<
                         onChange={(e) => {
                           const raw = e.currentTarget.value.slice(0, 300)
                           onChangeRef(r.id, {
-                            publisher: raw.trim() || undefined,
+                            publisher: raw.length > 0 ? raw : undefined,
                           })
                         }}
+                        onBlur={() => {
+                          const trimmed = publisherText.trim()
+                          if (trimmed !== publisherText) {
+                            onChangeRef(r.id, {
+                              publisher: trimmed || undefined,
+                            })
+                          }
+                        }}
                       />
                     </div>
                   </div>

src/routes/planes/$planId/_detalle/iaplan.tsx

@@ -13,8 +13,9 @@ import {
   X,
   MessageSquarePlus,
   Archive,
-  RotateCcw,
   Loader2,
+  Sparkles,
+  RotateCcw,
 } from 'lucide-react'
 import { useState, useEffect, useRef, useMemo } from 'react'
 
@@ -22,10 +23,17 @@ import type { UploadedFile } from '@/components/planes/wizard/PasoDetallesPanel/
 
 import { ImprovementCard } from '@/components/planes/detalle/Ia/ImprovementCard'
 import ReferenciasParaIA from '@/components/planes/wizard/PasoDetallesPanel/ReferenciasParaIA'
+import { Avatar, AvatarFallback } from '@/components/ui/avatar'
 import { Button } from '@/components/ui/button'
 import { Drawer, DrawerContent } from '@/components/ui/drawer'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Textarea } from '@/components/ui/textarea'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
 import {
   useAIPlanChat,
   useConversationByPlan,
@@ -121,6 +129,7 @@ function RouteComponent() {
   const [pendingSuggestion, setPendingSuggestion] = useState<any>(null)
   const queryClient = useQueryClient()
   const scrollRef = useRef<HTMLDivElement>(null)
+  const isInitialLoad = useRef(true)
   const [showArchived, setShowArchived] = useState(false)
   const [editingChatId, setEditingChatId] = useState<string | null>(null)
   const editableRef = useRef<HTMLSpanElement>(null)
@@ -197,20 +206,20 @@ function RouteComponent() {
       return messages
     })
   }, [mensajesDelChat, activeChatId, availableFields])
-  const scrollToBottom = () => {
+  const scrollToBottom = (behavior = 'smooth') => {
     if (scrollRef.current) {
-      // Buscamos el viewport interno del ScrollArea de Radix
       const scrollContainer = scrollRef.current.querySelector(
         '[data-radix-scroll-area-viewport]',
       )
       if (scrollContainer) {
         scrollContainer.scrollTo({
           top: scrollContainer.scrollHeight,
-          behavior: 'smooth',
+          behavior: behavior, // 'instant' para carga inicial, 'smooth' para mensajes nuevos
         })
       }
     }
   }
+
   const { activeChats, archivedChats } = useMemo(() => {
     const allChats = lastConversation || []
     return {
@@ -222,22 +231,22 @@ function RouteComponent() {
   }, [lastConversation])
 
   useEffect(() => {
-    console.log(mensajesDelChat)
+    if (chatMessages.length > 0) {
-
+      if (isInitialLoad.current) {
-    scrollToBottom()
+        // Si es el primer render con mensajes, vamos al final al instante
-  }, [chatMessages, isLoading])
+        scrollToBottom('instant')
-
+        isInitialLoad.current = false
-  useEffect(() => {
+      } else {
-    // Verificamos cuáles campos de la lista "selectedFields" ya no están presentes en el texto del input
+        // Si ya estaba cargado y llegan nuevos, hacemos el smooth
-    const camposActualizados = selectedFields.filter((field) =>
+        scrollToBottom('smooth')
-      input.includes(field.label),
+      }
-    )
-
-    // Solo actualizamos el estado si hubo un cambio real (para evitar bucles infinitos)
-    if (camposActualizados.length !== selectedFields.length) {
-      setSelectedFields(camposActualizados)
     }
-  }, [input, selectedFields])
+  }, [chatMessages])
+
+  // 2. Resetear el flag cuando cambies de chat activo
+  useEffect(() => {
+    isInitialLoad.current = true
+  }, [activeChatId])
 
   useEffect(() => {
     if (isLoadingConv || isSending) return
@@ -297,7 +306,7 @@ function RouteComponent() {
       },
     ])
     setInput('')
-    setSelectedFields([])
+    // setSelectedFields([])
   }
 
   const archiveChat = (e: React.MouseEvent, id: string) => {
@@ -405,7 +414,7 @@ function RouteComponent() {
     setIsSending(true)
     setOptimisticMessage(finalContent)
     setInput('')
-    setSelectedFields([])
+    // setSelectedFields([])
 
     try {
       const payload = {
@@ -501,82 +510,114 @@ function RouteComponent() {
         </div>
 
         <ScrollArea className="flex-1">
-          <div className="space-y-1">
+          <div className="space-y-1 pr-2">
+            {' '}
+            {/* Agregamos un pr-2 para que el scrollbar no tape botones */}
             {!showArchived ? (
               activeChats.map((chat) => (
                 <div
                   key={chat.id}
                   onClick={() => setActiveChatId(chat.id)}
-                  className={`group relative flex w-full cursor-pointer items-center gap-3 rounded-lg px-3 py-3 text-sm transition-colors ${
+                  className={`group relative flex w-full items-center overflow-hidden rounded-lg px-3 py-3 text-sm transition-colors ${
                     activeChatId === chat.id
                       ? 'bg-slate-100 font-medium text-slate-900'
                       : 'text-slate-600 hover:bg-slate-50'
                   }`}
                 >
-                  <FileText size={16} className="shrink-0 opacity-40" />
+                  {/* LADO IZQUIERDO: Icono + Texto */}
-
+                  <div
-                  <span
+                    className="flex min-w-0 flex-1 items-center gap-3 transition-all duration-200"
-                    ref={editingChatId === chat.id ? editableRef : null}
+                    style={{
-                    contentEditable={editingChatId === chat.id}
+                      // Aplicamos la máscara solo cuando el mouse está encima para que se note el desvanecimiento
-                    suppressContentEditableWarning={true}
+                      // donde aparecen los botones
-                    className={`truncate pr-14 transition-all outline-none ${
+                      maskImage:
-                      editingChatId === chat.id
+                        'linear-gradient(to right, black 70%, transparent 95%)',
-                        ? 'min-w-[50px] cursor-text rounded bg-white px-1 ring-1 ring-teal-500'
+                      WebkitMaskImage:
-                        : 'cursor-pointer'
+                        'linear-gradient(to right, black 70%, transparent 95%)',
-                    }`}
-                    onDoubleClick={(e) => {
-                      e.stopPropagation()
-                      setEditingChatId(chat.id)
-                    }}
-                    onKeyDown={(e) => {
-                      if (e.key === 'Enter') {
-                        e.preventDefault()
-                        const newTitle = e.currentTarget.textContent || ''
-                        updateTitleMutation(
-                          { id: chat.id, nombre: newTitle },
-                          {
-                            onSuccess: () => setEditingChatId(null),
-                          },
-                        )
-                      }
-                      if (e.key === 'Escape') {
-                        setEditingChatId(null)
-
-                        e.currentTarget.textContent = chat.nombre || ''
-                      }
-                    }}
-                    onBlur={(e) => {
-                      if (editingChatId === chat.id) {
-                        const newTitle = e.currentTarget.textContent || ''
-                        if (newTitle !== chat.nombre) {
-                          updateTitleMutation({ id: chat.id, nombre: newTitle })
-                        }
-                        setEditingChatId(null)
-                      }
-                    }}
-                    onClick={(e) => {
-                      if (editingChatId === chat.id) e.stopPropagation()
                     }}
                   >
-                    {chat.nombre || `Chat ${chat.creado_en.split('T')[0]}`}
+                    {/* pr-12 reserva espacio para los botones absolutos */}
-                  </span>
+                    <FileText size={16} className="shrink-0 opacity-40" />
+                    <TooltipProvider delayDuration={400}>
+                      <Tooltip>
+                        <TooltipTrigger asChild className="min-w-0 flex-1">
+                          <div className="min-w-0 flex-1">
+                            <span
+                              ref={
+                                editingChatId === chat.id ? editableRef : null
+                              }
+                              contentEditable={editingChatId === chat.id}
+                              suppressContentEditableWarning={true}
+                              className={`block truncate outline-none ${
+                                editingChatId === chat.id
+                                  ? 'max-h-20 min-w-[100px] cursor-text overflow-y-auto rounded bg-white px-1 break-all shadow-sm ring-1 ring-teal-500'
+                                  : 'cursor-pointer'
+                              }`}
+                              onDoubleClick={(e) => {
+                                e.stopPropagation()
+                                setEditingChatId(chat.id)
+                              }}
+                              onKeyDown={(e) => {
+                                if (e.key === 'Enter') {
+                                  e.preventDefault()
+                                  e.currentTarget.blur()
+                                }
+                                if (e.key === 'Escape') {
+                                  setEditingChatId(null)
+                                  e.currentTarget.textContent =
+                                    chat.nombre || ''
+                                }
+                              }}
+                              onBlur={(e) => {
+                                if (editingChatId === chat.id) {
+                                  const newTitle =
+                                    e.currentTarget.textContent?.trim() || ''
+                                  if (newTitle && newTitle !== chat.nombre) {
+                                    updateTitleMutation({
+                                      id: chat.id,
+                                      nombre: newTitle,
+                                    })
+                                  }
+                                  setEditingChatId(null)
+                                }
+                              }}
+                            >
+                              {chat.nombre ||
+                                `Chat ${chat.creado_en.split('T')[0]}`}
+                            </span>
+                          </div>
+                        </TooltipTrigger>
+                        {editingChatId !== chat.id && (
+                          <TooltipContent
+                            side="right"
+                            className="max-w-[280px] break-all"
+                          >
+                            {chat.nombre || 'Conversación'}
+                          </TooltipContent>
+                        )}
+                      </Tooltip>
+                    </TooltipProvider>
+                  </div>
 
-                  {/* ACCIONES */}
+                  {/* LADO DERECHO: Acciones ABSOLUTAS */}
-                  <div className="absolute right-2 flex items-center gap-1 opacity-0 group-hover:opacity-100">
+                  <div
+                    className={`absolute top-1/2 right-2 z-20 flex -translate-y-1/2 items-center gap-1 rounded-md px-1 opacity-0 transition-opacity group-hover:opacity-100 ${
+                      activeChatId === chat.id ? 'bg-slate-100' : 'bg-slate-50'
+                    }`}
+                  >
                     <button
                       onClick={(e) => {
                         e.stopPropagation()
                         setEditingChatId(chat.id)
-                        // Pequeño timeout para asegurar que el DOM se actualice antes de enfocar
                         setTimeout(() => editableRef.current?.focus(), 50)
                       }}
-                      className="p-1 text-slate-400 hover:text-teal-600"
+                      className="rounded-md p-1 text-slate-400 transition-colors hover:text-teal-600"
                     >
                       <Send size={12} className="rotate-45" />
                     </button>
                     <button
                       onClick={(e) => archiveChat(e, chat.id)}
-                      className="p-1 text-slate-400 hover:text-amber-600"
+                      className="rounded-md p-1 text-slate-400 transition-colors hover:text-amber-600"
                     >
                       <Archive size={14} />
                     </button>
@@ -584,24 +625,26 @@ function RouteComponent() {
                 </div>
               ))
             ) : (
-              /* ... Resto del código de archivados (sin cambios) ... */
+              /* Sección de archivados (Simplificada para mantener consistencia) */
-              <div className="animate-in fade-in slide-in-from-left-2">
+              <div className="animate-in fade-in slide-in-from-left-2 px-1">
                 <p className="mb-2 px-2 text-[10px] font-bold text-slate-400 uppercase">
                   Archivados
                 </p>
                 {archivedChats.map((chat) => (
                   <div
                     key={chat.id}
-                    className="group relative mb-1 flex w-full items-center gap-3 rounded-lg bg-slate-50/50 px-3 py-2 text-sm text-slate-400"
+                    className="group relative mb-1 flex w-full items-center overflow-hidden rounded-lg bg-slate-50/50 px-3 py-2 text-sm text-slate-400"
                   >
-                    <Archive size={14} className="shrink-0 opacity-30" />
+                    <div className="flex min-w-0 flex-1 items-center gap-3 pr-10">
-                    <span className="truncate pr-8">
+                      <Archive size={14} className="shrink-0 opacity-30" />
-                      {chat.nombre ||
+                      <span className="block truncate">
-                        `Archivado ${chat.creado_en.split('T')[0]}`}
+                        {chat.nombre ||
-                    </span>
+                          `Archivado ${chat.creado_en.split('T')[0]}`}
+                      </span>
+                    </div>
                     <button
                       onClick={(e) => unarchiveChat(e, chat.id)}
-                      className="absolute right-2 p-1 opacity-0 group-hover:opacity-100 hover:text-teal-600"
+                      className="absolute top-1/2 right-2 shrink-0 -translate-y-1/2 rounded bg-slate-100 p-1 opacity-0 transition-opacity group-hover:opacity-100 hover:text-teal-600"
                     >
                       <RotateCcw size={14} />
                     </button>
@@ -721,33 +764,24 @@ function RouteComponent() {
                     )
                   })}
 
-                  {(isSending || isSyncing) &&
-                    optimisticMessage &&
-                    !chatMessages.some(
-                      (m) => m.content === optimisticMessage,
-                    ) && (
-                      <div className="animate-in fade-in slide-in-from-right-2 ml-auto flex max-w-[85%] flex-col items-end">
-                        <div className="rounded-2xl rounded-tr-none bg-teal-600/70 p-3 text-sm whitespace-pre-wrap text-white shadow-sm">
-                          {optimisticMessage}
-                        </div>
-                      </div>
-                    )}
-
                   {(isSending || isSyncing) && (
-                    <div className="animate-in fade-in slide-in-from-left-2 flex flex-col items-start duration-300">
+                    <div className="animate-in fade-in slide-in-from-bottom-2 flex gap-4">
-                      <div className="rounded-2xl rounded-tl-none border border-slate-200 bg-white p-4 shadow-sm">
+                      <Avatar className="h-9 w-9 shrink-0 border bg-teal-600 text-white shadow-sm">
-                        <div className="flex items-center gap-2">
+                        <AvatarFallback>
+                          <Sparkles size={16} className="animate-pulse" />
+                        </AvatarFallback>
+                      </Avatar>
+                      <div className="flex flex-col items-start gap-2">
+                        <div className="rounded-2xl rounded-tl-none border border-slate-200 bg-white p-4 shadow-sm">
                           <div className="flex gap-1">
-                            <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-teal-500 [animation-delay:-0.3s]" />
+                            <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-slate-400 [animation-delay:-0.3s]"></span>
-                            <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-teal-500 [animation-delay:-0.15s]" />
+                            <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-slate-400 [animation-delay:-0.15s]"></span>
-                            <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-teal-500" />
+                            <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-slate-400"></span>
                           </div>
-                          <span className="text-[10px] font-medium tracking-tight text-slate-400 uppercase">
-                            {isSyncing
-                              ? 'Actualizando historial...'
-                              : 'Esperando respuesta...'}
-                          </span>
                         </div>
+                        <span className="text-[10px] font-medium text-slate-400 italic">
+                          La IA está analizando tu solicitud...
+                        </span>
                       </div>
                     </div>
                   )}

src/routes/planes/$planId/_detalle/mapa.tsx

@@ -76,7 +76,7 @@ const mapAsignaturasToAsignaturas = (
       // Mapeo directo de los nuevos campos de la API
       hd: asig.horas_academicas ?? 0,
       hi: asig.horas_independientes ?? 0,
-      prerrequisitos: [],
+      prerrequisito_asignatura_id: asig.prerrequisito_asignatura_id ?? null,
     }
   })
 }
@@ -336,6 +336,7 @@ function MapaCurricularPage() {
       horas_independientes?: TablesUpdate<'asignaturas'>['horas_independientes']
       numero_ciclo?: TablesUpdate<'asignaturas'>['numero_ciclo']
       linea_plan_id?: TablesUpdate<'asignaturas'>['linea_plan_id']
+      prerrequisito_asignatura_id?: string | null
     }
     const patch: Partial<AsignaturaPatch> = {
       nombre: editingData.nombre,
@@ -345,6 +346,7 @@ function MapaCurricularPage() {
       horas_independientes: editingData.hi,
       numero_ciclo: editingData.ciclo,
       linea_plan_id: editingData.lineaCurricularId,
+      prerrequisito_asignatura_id: editingData.prerrequisito_asignatura_id,
       tipo: editingData.tipo.toUpperCase() as TipoAsignatura, // Asegurar que coincida con el ENUM (OBLIGATORIA/OPTATIVA)
     }
 
@@ -490,7 +492,7 @@ function MapaCurricularPage() {
     e: React.FocusEvent<HTMLSpanElement>,
     id: string,
   ) => {
-    const nuevoNombre = e.currentTarget.textContent?.trim() || ''
+    const nuevoNombre = e.currentTarget.textContent.trim() || ''
 
     // Buscamos la línea original para comparar
     const lineaOriginal = lineas.find((l) => l.id === id)
@@ -935,65 +937,55 @@ function MapaCurricularPage() {
               {/* Fila 4: Seriación (Prerrequisitos) */}
               <div className="space-y-2">
                 <label className="text-xs font-bold text-slate-500 uppercase">
-                  Seriación (Prerrequisitos)
+                  Seriación (Prerrequisito)
                 </label>
                 <Select
-                  value={seriacionValue}
+                  // Cambiamos a manejo de valor único basado en el ID de la columna
+                  value={editingData.prerrequisito_asignatura_id || undefined}
                   onValueChange={(val) => {
-                    if (val === 'none') {
+                    console.log(editingData)
-                      setSeriacionValue('')
+
-                      return
+                    setEditingData({
-                    }
+                      ...editingData,
-                    if (!editingData.prerrequisitos.includes(val)) {
+                      prerrequisito_asignatura_id: val === 'none' ? null : val,
-                      setEditingData({
+                    })
-                        ...editingData,
-                        prerrequisitos: [...editingData.prerrequisitos, val],
-                      })
-                    }
-                    setSeriacionValue('')
                   }}
                 >
-                  <SelectTrigger>
+                  <SelectTrigger className="w-full bg-white">
                     <SelectValue placeholder="Seleccionar asignatura..." />
                   </SelectTrigger>
                   <SelectContent>
                     <SelectItem value="none">-- Sin Seriación --</SelectItem>
 
                     {asignaturas
-                      .filter((m) => m.id !== editingData.id)
+                      .filter((asig) => {
-                      .map((m) => (
+                        // 1. No es la misma materia
-                        <SelectItem key={m.id} value={m.id}>
+                        const noEsMisma = asig.id !== editingData.id
-                          {m.nombre} ({m.clave})
+                        // 2. El ciclo debe ser estrictamente MENOR
+                        const esCicloMenor =
+                          asig.ciclo !== null &&
+                          editingData.ciclo !== null &&
+                          asig.ciclo < editingData.ciclo
+
+                        return noEsMisma && esCicloMenor
+                      })
+                      .sort(
+                        (a, b) =>
+                          (a.ciclo || 0) - (b.ciclo || 0) ||
+                          a.nombre.localeCompare(b.nombre),
+                      )
+                      .map((asig) => (
+                        <SelectItem key={asig.id} value={asig.id}>
+                          <span className="font-bold text-teal-600">
+                            [C{asig.ciclo}]
+                          </span>{' '}
+                          {asig.nombre}
                         </SelectItem>
                       ))}
                   </SelectContent>
                 </Select>
 
-                {/* Visualización de los prerrequisitos seleccionados */}
+                {/* Visualización del Prerrequisito con el Nombre */}
-                <div className="mt-2 flex flex-wrap gap-2">
-                  {editingData.prerrequisitos.map((pre) => (
-                    <Badge
-                      key={pre}
-                      variant="secondary"
-                      className="bg-slate-100 text-slate-600"
-                    >
-                      {pre}
-                      <button
-                        className="ml-1 hover:text-red-500"
-                        onClick={() => {
-                          setEditingData({
-                            ...editingData,
-                            prerrequisitos: editingData.prerrequisitos.filter(
-                              (p) => p !== pre,
-                            ),
-                          })
-                        }}
-                      >
-                        ×
-                      </button>
-                    </Badge>
-                  ))}
-                </div>
               </div>
 
               {/* Fila 5: Tipo */}

src/routes/planes/$planId/asignaturas/$asignaturaId/route.tsx

@@ -166,30 +166,20 @@ function AsignaturaLayout() {
                   onSave={(val) => handleUpdateHeader('nombre', val)}
                 />
               </h1>
+              {
+                // console.log(headerData),
 
+                console.log(asignaturaApi.planes_estudio?.nombre)
+              }
               <div className="flex flex-wrap gap-4 text-sm text-blue-200">
                 <span className="flex items-center gap-1">
                   <GraduationCap className="h-4 w-4 shrink-0" />
+                  Pertenece al plan:{' '}
                   <span className="text-blue-100">
-                    {(asignaturaApi.planes_estudio?.datos as DatosPlan)
+                    {(asignaturaApi.planes_estudio as DatosPlan).nombre || ''}
-                      .nombre || ''}
-                  </span>
-                </span>
-
-                <span className="flex items-center gap-1">
-                  <span className="text-blue-100">
-                    {(asignaturaApi.planes_estudio?.datos as DatosPlan)
-                      .nombre ?? ''}
                   </span>
                 </span>
               </div>
-
-              <p className="text-sm text-blue-300">
-                Pertenece al plan:{' '}
-                <span className="cursor-pointer underline">
-                  {asignaturaApi.planes_estudio?.nombre}
-                </span>
-              </p>
             </div>
 
             <div className="flex flex-col items-end gap-2 text-right">

src/types/plan.ts

@@ -50,7 +50,7 @@ export interface Asignatura {
   orden?: number
   hd: number // <--- Añadir
   hi: number // <--- Añadir
-  prerrequisitos: Array<string>
+  prerrequisito_asignatura_id: string | null
 }
 
 export interface Plan {

src/types/supabase.ts

@@ -156,6 +156,7 @@ export type Database = {
           plan_estudio_id: string
           tipo: Database['public']['Enums']['tipo_asignatura']
           tipo_origen: Database['public']['Enums']['tipo_origen'] | null
+          prerrequisito_asignatura_id?: string
         }
         Insert: {
           actualizado_en?: string

staticwebapp.config.json

@@ -0,0 +1,14 @@
+{
+  "navigationFallback": {
+    "rewrite": "/index.html",
+    "exclude": [
+      "/assets/*",
+      "/*.css",
+      "/*.js",
+      "/*.ico",
+      "/*.png",
+      "/*.jpg",
+      "/*.svg"
+    ]
+  }
+}