Funcional pero falta arreglar diseño y responsividad

Merge pull request 'Se renderizan las previsualizaciones del plan y de la asignatura y también se pueden descargar como word o pdf' (#211 ) from issue/200-renderizado-de-plantillas-con-edge-function-de-car into main
Reviewed-on: #211
2026-03-23 13:11:24 -06:00 · 2026-03-20 23:47:37 +00:00 · 2026-03-20 17:44:36 -06:00 · 2026-03-20 17:31:59 -06:00 · 2026-03-20 17:31:07 -06:00 · 2026-03-20 21:30:16 +00:00
36 changed files with 1689 additions and 259 deletions
--- a/bun.lock
+++ b/bun.lock
@@ -41,7 +41,7 @@
        "radix-ui": "^1.4.3",
        "react": "^19.2.0",
        "react-dom": "^19.2.0",
-        "tailwind-merge": "^3.4.0",
+        "tailwind-merge": "^3.5.0",
        "tailwindcss": "^4.0.6",
        "tw-animate-css": "^1.3.6",
        "use-debounce": "^10.1.0",
@@ -1327,7 +1327,7 @@

    "symbol-tree": ["symbol-tree@3.2.4", "", {}, "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="],

-    "tailwind-merge": ["tailwind-merge@3.4.0", "", {}, "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g=="],
+    "tailwind-merge": ["tailwind-merge@3.5.0", "", {}, "sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A=="],

    "tailwindcss": ["tailwindcss@4.1.18", "", {}, "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw=="],

--- a/package.json
+++ b/package.json
@@ -54,7 +54,7 @@
    "radix-ui": "^1.4.3",
    "react": "^19.2.0",
    "react-dom": "^19.2.0",
-    "tailwind-merge": "^3.4.0",
+    "tailwind-merge": "^3.5.0",
    "tailwindcss": "^4.0.6",
    "tw-animate-css": "^1.3.6",
    "use-debounce": "^10.1.0",
--- a/public/fonts/indivisa/IndivisaTextSans-Black.otf
+++ b/public/fonts/indivisa/IndivisaTextSans-Black.otf
--- a/public/fonts/indivisa/IndivisaTextSans-BlackItalic.otf
+++ b/public/fonts/indivisa/IndivisaTextSans-BlackItalic.otf
--- a/public/fonts/indivisa/IndivisaTextSans-Bold.otf
+++ b/public/fonts/indivisa/IndivisaTextSans-Bold.otf
--- a/public/fonts/indivisa/IndivisaTextSans-BoldItalic.otf
+++ b/public/fonts/indivisa/IndivisaTextSans-BoldItalic.otf
--- a/public/fonts/indivisa/IndivisaTextSans-Light.otf
+++ b/public/fonts/indivisa/IndivisaTextSans-Light.otf
--- a/public/fonts/indivisa/IndivisaTextSans-LightItalic.otf
+++ b/public/fonts/indivisa/IndivisaTextSans-LightItalic.otf
--- a/public/fonts/indivisa/IndivisaTextSans-Regular.otf
+++ b/public/fonts/indivisa/IndivisaTextSans-Regular.otf
--- a/public/fonts/indivisa/IndivisaTextSans-RegularItalic.otf
+++ b/public/fonts/indivisa/IndivisaTextSans-RegularItalic.otf
--- a/public/fonts/indivisa/IndivisaTextSerif-Black.otf
+++ b/public/fonts/indivisa/IndivisaTextSerif-Black.otf
--- a/public/fonts/indivisa/IndivisaTextSerif-BlackItalic.otf
+++ b/public/fonts/indivisa/IndivisaTextSerif-BlackItalic.otf
--- a/public/fonts/indivisa/IndivisaTextSerif-Bold.otf
+++ b/public/fonts/indivisa/IndivisaTextSerif-Bold.otf
--- a/public/fonts/indivisa/IndivisaTextSerif-BoldItalic.otf
+++ b/public/fonts/indivisa/IndivisaTextSerif-BoldItalic.otf
--- a/public/fonts/indivisa/IndivisaTextSerif-Light.otf
+++ b/public/fonts/indivisa/IndivisaTextSerif-Light.otf
--- a/public/fonts/indivisa/IndivisaTextSerif-LightItalic.otf
+++ b/public/fonts/indivisa/IndivisaTextSerif-LightItalic.otf
--- a/public/fonts/indivisa/IndivisaTextSerif-Regular.otf
+++ b/public/fonts/indivisa/IndivisaTextSerif-Regular.otf
--- a/public/fonts/indivisa/IndivisaTextSerif-RegularItalic.otf
+++ b/public/fonts/indivisa/IndivisaTextSerif-RegularItalic.otf
--- a/src/components/asignaturas/detalle/AsignaturaDetailPage.tsx
+++ b/src/components/asignaturas/detalle/AsignaturaDetailPage.tsx
@@ -15,6 +15,7 @@ import {
  TooltipTrigger,
 } from '@/components/ui/tooltip'
 import { useSubject, useUpdateAsignatura } from '@/data/hooks/useSubjects'
+import { columnParsers } from '@/lib/asignaturaColumnParsers'

 export interface BibliografiaEntry {
  id: string
@@ -38,6 +39,10 @@ export interface AsignaturaResponse {
  datos: AsignaturaDatos
 }

+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+
 type CriterioEvaluacionRow = {
  criterio: string
  porcentaje: number
@@ -791,80 +796,3 @@ function EvaluationView({ items }: { items: Array<CriterioEvaluacionRow> }) {
    </div>
  )
 }
-
-function isRecord(value: unknown): value is Record<string, unknown> {
-  return typeof value === 'object' && value !== null && !Array.isArray(value)
-}
-
-function parseContenidoTematicoToPlainText(value: unknown): string {
-  if (!Array.isArray(value)) return ''
-
-  const blocks: Array<string> = []
-
-  for (const item of value) {
-    if (!isRecord(item)) continue
-
-    const unidad =
-      typeof item.unidad === 'number' && Number.isFinite(item.unidad)
-        ? item.unidad
-        : undefined
-    const titulo = typeof item.titulo === 'string' ? item.titulo : ''
-
-    const header = `${unidad ?? ''}${unidad ? '.' : ''} ${titulo}`.trim()
-    if (!header) continue
-
-    const lines: Array<string> = [header]
-
-    const temas = Array.isArray(item.temas) ? item.temas : []
-    temas.forEach((tema, idx) => {
-      const temaNombre =
-        typeof tema === 'string'
-          ? tema
-          : isRecord(tema) && typeof tema.nombre === 'string'
-            ? tema.nombre
-            : ''
-      if (!temaNombre) return
-
-      if (unidad != null) {
-        lines.push(`${unidad}.${idx + 1} ${temaNombre}`.trim())
-      } else {
-        lines.push(`${idx + 1}. ${temaNombre}`)
-      }
-    })
-
-    blocks.push(lines.join('\n'))
-  }
-
-  return blocks.join('\n\n').trimEnd()
-}
-
-function parseCriteriosEvaluacionToPlainText(value: unknown): string {
-  if (!Array.isArray(value)) return ''
-
-  const lines: Array<string> = []
-  for (const item of value) {
-    if (!isRecord(item)) continue
-    const label = typeof item.criterio === 'string' ? item.criterio.trim() : ''
-    const valueNum =
-      typeof item.porcentaje === 'number'
-        ? item.porcentaje
-        : typeof item.porcentaje === 'string'
-          ? Number(item.porcentaje)
-          : NaN
-
-    if (!label) continue
-    if (!Number.isFinite(valueNum)) continue
-
-    const v = Math.trunc(valueNum)
-    if (v < 1 || v > 100) continue
-
-    lines.push(`${label}: ${v}%`)
-  }
-
-  return lines.join('\n')
-}
-
-const columnParsers: Partial<Record<string, (value: unknown) => string>> = {
-  contenido_tematico: parseContenidoTematicoToPlainText,
-  criterios_de_evaluacion: parseCriteriosEvaluacionToPlainText,
-}
--- a/src/components/asignaturas/detalle/DocumentoSEPTab.tsx
+++ b/src/components/asignaturas/detalle/DocumentoSEPTab.tsx
@@ -18,7 +18,8 @@ import { Card } from '@/components/ui/card'
 interface DocumentoSEPTabProps {
  pdfUrl: string | null
  isLoading: boolean
-  onDownload: () => void
+  onDownloadPdf: () => void
+  onDownloadWord: () => void
  onRegenerate: () => void
  isRegenerating: boolean
 }
@@ -26,7 +27,8 @@ interface DocumentoSEPTabProps {
 export function DocumentoSEPTab({
  pdfUrl,
  isLoading,
-  onDownload,
+  onDownloadPdf,
+  onDownloadWord,
  onRegenerate,
  isRegenerating,
 }: DocumentoSEPTabProps) {
@@ -52,25 +54,23 @@ export function DocumentoSEPTab({
        </div>

        <div className="flex items-center gap-2">
-          {pdfUrl && !isLoading && (
-            <Button variant="outline" onClick={onDownload}>
-              <Download className="mr-2 h-4 w-4" />
-              Descargar
-            </Button>
-          )}
-
          <AlertDialog
            open={showConfirmDialog}
            onOpenChange={setShowConfirmDialog}
          >
            <AlertDialogTrigger asChild>
-              <Button disabled={isRegenerating}>
+              <Button
+                variant="outline"
+                size="sm"
+                className="gap-2"
+                disabled={isRegenerating}
+              >
                {isRegenerating ? (
-                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  <Loader2 className="h-4 w-4 animate-spin" />
                ) : (
-                  <RefreshCw className="mr-2 h-4 w-4" />
+                  <RefreshCw className="h-4 w-4" />
                )}
-                {isRegenerating ? 'Generando...' : 'Regenerar documento'}
+                {isRegenerating ? 'Generando...' : 'Regenerar'}
              </Button>
            </AlertDialogTrigger>

@@ -91,11 +91,31 @@ export function DocumentoSEPTab({
              </AlertDialogFooter>
            </AlertDialogContent>
          </AlertDialog>
+
+          {pdfUrl && !isLoading && (
+            <>
+              <Button
+                size="sm"
+                className="gap-2 bg-teal-700 hover:bg-teal-800"
+                onClick={onDownloadWord}
+              >
+                <Download className="h-4 w-4" /> Descargar Word
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                className="gap-2"
+                onClick={onDownloadPdf}
+              >
+                <Download className="h-4 w-4" /> Descargar PDF
+              </Button>
+            </>
+          )}
        </div>
      </div>

      {/* PDF Preview */}
-      <Card className="h-[800px] overflow-hidden">
+      <Card className="h-200 overflow-hidden">
        {isLoading ? (
          <div className="flex h-full items-center justify-center">
            <Loader2 className="h-10 w-10 animate-spin" />
--- a/src/components/asignaturas/wizard/PasoBasicosClonadoInterno.tsx
+++ b/src/components/asignaturas/wizard/PasoBasicosClonadoInterno.tsx
@@ -0,0 +1,93 @@
+import * as Icons from 'lucide-react'
+import { useEffect, useRef } from 'react'
+
+import type { NewSubjectWizardState } from '@/features/asignaturas/nueva/types'
+
+import { PasoBasicosForm } from '@/components/asignaturas/wizard/PasoBasicosForm/PasoBasicosForm'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { useSubject } from '@/data'
+
+export function PasoBasicosClonadoInterno({
+  wizard,
+  onChange,
+}: {
+  wizard: NewSubjectWizardState
+  onChange: React.Dispatch<React.SetStateAction<NewSubjectWizardState>>
+}) {
+  const sourceId = wizard.clonInterno?.asignaturaOrigenId ?? null
+  const { data: source, isLoading, isError } = useSubject(sourceId)
+
+  const lastAppliedRef = useRef<string | null>(null)
+
+  useEffect(() => {
+    if (!source) return
+    if (lastAppliedRef.current === source.id) return
+
+    lastAppliedRef.current = source.id
+
+    onChange((w) => ({
+      ...w,
+      datosBasicos: {
+        ...w.datosBasicos,
+        nombre: source.nombre,
+        codigo: source.codigo ?? '',
+        tipo: (source.tipo as any) ?? null,
+        creditos: source.creditos,
+        horasAcademicas: (source as any).horas_academicas ?? null,
+        horasIndependientes: (source as any).horas_independientes ?? null,
+        estructuraId: (source.estructura_id ??
+          w.datosBasicos.estructuraId) as any,
+      },
+    }))
+  }, [onChange, source])
+
+  if (!sourceId) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Datos básicos</CardTitle>
+        </CardHeader>
+        <CardContent className="text-muted-foreground text-sm">
+          Selecciona una asignatura fuente para continuar.
+        </CardContent>
+      </Card>
+    )
+  }
+
+  if (isLoading) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Datos básicos</CardTitle>
+        </CardHeader>
+        <CardContent className="text-muted-foreground text-sm">
+          Cargando información de la asignatura fuente…
+        </CardContent>
+      </Card>
+    )
+  }
+
+  if (isError || !source) {
+    return (
+      <Card className="border-destructive/40">
+        <CardHeader>
+          <CardTitle className="text-destructive flex items-center gap-2 text-base">
+            <Icons.AlertTriangle className="h-5 w-5" />
+            No se pudo cargar la fuente
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="text-muted-foreground text-sm">
+          Intenta seleccionar otra asignatura.
+        </CardContent>
+      </Card>
+    )
+  }
+
+  return (
+    <PasoBasicosForm
+      wizard={wizard}
+      onChange={onChange}
+      estructuraFuenteId={source.estructura_id ?? null}
+    />
+  )
+}
--- a/src/components/asignaturas/wizard/PasoBasicosForm/PasoBasicosForm.tsx
+++ b/src/components/asignaturas/wizard/PasoBasicosForm/PasoBasicosForm.tsx
@@ -1,3 +1,4 @@
+import * as Icons from 'lucide-react'
 import { useEffect, useState } from 'react'

 import PasoSugerenciasForm from './PasoSugerenciasForm'
@@ -21,9 +22,11 @@ import { cn } from '@/lib/utils'
 export function PasoBasicosForm({
  wizard,
  onChange,
+  estructuraFuenteId,
 }: {
  wizard: NewSubjectWizardState
  onChange: React.Dispatch<React.SetStateAction<NewSubjectWizardState>>
+  estructuraFuenteId?: string | null
 }) {
  const { data: estructuras } = useSubjectEstructuras()

@@ -258,6 +261,17 @@ export function PasoBasicosForm({
              )}
            </SelectContent>
          </Select>
+          {estructuraFuenteId &&
+          wizard.datosBasicos.estructuraId &&
+          wizard.datosBasicos.estructuraId !== estructuraFuenteId ? (
+            <div className="border-destructive/40 bg-destructive/5 text-destructive flex items-start gap-2 rounded-md border p-2 text-xs">
+              <Icons.AlertTriangle className="mt-0.5 h-4 w-4 flex-none" />
+              <span>
+                Es posible que se pierdan datos generales al seleccionar otra
+                estructura.
+              </span>
+            </div>
+          ) : null}
          <p className="text-muted-foreground text-xs">
            Define los campos requeridos (ej. Objetivos, Temario, Evaluación).
          </p>
--- a/src/components/asignaturas/wizard/PasoFuenteClonadoInterno.tsx
+++ b/src/components/asignaturas/wizard/PasoFuenteClonadoInterno.tsx
@@ -0,0 +1,360 @@
+import { keepPreviousData, useQuery } from '@tanstack/react-query'
+import * as Icons from 'lucide-react'
+import { useEffect, useMemo } from 'react'
+import { useDebounce } from 'use-debounce'
+
+import type { NewSubjectWizardState } from '@/features/asignaturas/nueva/types'
+
+import Pagination03 from '@/components/shadcn-studio/pagination/pagination-03'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { supabaseBrowser, useCatalogosPlanes, usePlanes } from '@/data'
+import { cn } from '@/lib/utils'
+
+type SourceSubjectRow = {
+  id: string
+  nombre: string
+  codigo: string | null
+  creditos: number
+  tipo: any
+  plan_estudio_id: string
+  estructura_id: string | null
+}
+
+const ALL = '__all__'
+
+const normalizeLikeTerm = (term: string) =>
+  term.trim().replace(/[(),]/g, ' ').replace(/\s+/g, ' ')
+
+export function PasoFuenteClonadoInterno({
+  wizard,
+  onChange,
+}: {
+  wizard: NewSubjectWizardState
+  onChange: React.Dispatch<React.SetStateAction<NewSubjectWizardState>>
+}) {
+  const pageSize = 20
+
+  const facultadId = wizard.clonInterno?.facultadId ?? null
+  const carreraId = wizard.clonInterno?.carreraId ?? null
+  const planOrigenId = wizard.clonInterno?.planOrigenId ?? null
+  const search = wizard.clonInterno?.search ?? ''
+  const page = Math.max(1, wizard.clonInterno?.page ?? 1)
+
+  const [debouncedSearch] = useDebounce(search, 350)
+
+  const { data: catalogos } = useCatalogosPlanes()
+
+  const carrerasOptions = useMemo(() => {
+    const raw = catalogos?.carreras ?? []
+    return facultadId ? raw.filter((c) => c.facultad_id === facultadId) : raw
+  }, [catalogos?.carreras, facultadId])
+
+  const planesQuery = usePlanes({
+    search: '',
+    facultadId: facultadId ?? 'todas',
+    carreraId: carreraId ?? 'todas',
+    estadoId: 'todos',
+    limit: 500,
+    offset: 0,
+  } as any)
+
+  const needPlansForFilter = Boolean((facultadId || carreraId) && !planOrigenId)
+  const plansForFilter = planesQuery.data?.data ?? []
+
+  const { data: subjectsPaged, isLoading: subjectsLoading } = useQuery({
+    queryKey: [
+      'asignaturas',
+      'clone-source',
+      {
+        facultadId,
+        carreraId,
+        planOrigenId,
+        search: debouncedSearch,
+        page,
+        pageSize,
+        planIdsKey: needPlansForFilter
+          ? plansForFilter.map((p) => p.id).join(',')
+          : null,
+      },
+    ],
+    enabled: !needPlansForFilter || !planesQuery.isLoading,
+    placeholderData: keepPreviousData,
+    queryFn: async () => {
+      const supabase = supabaseBrowser()
+
+      const from = (page - 1) * pageSize
+      const to = from + pageSize - 1
+
+      let q = supabase
+        .from('asignaturas')
+        .select(
+          'id,nombre,codigo,creditos,tipo,plan_estudio_id,estructura_id',
+          {
+            count: 'exact',
+          },
+        )
+        .order('nombre', { ascending: true })
+
+      if (planOrigenId) {
+        q = q.eq('plan_estudio_id', planOrigenId)
+      } else if (needPlansForFilter) {
+        const planIds = plansForFilter.map((p) => p.id)
+        if (!planIds.length) {
+          return { data: [] as Array<SourceSubjectRow>, count: 0 }
+        }
+        q = q.in('plan_estudio_id', planIds)
+      }
+
+      const term = normalizeLikeTerm(debouncedSearch)
+      if (term) {
+        // PostgREST OR syntax
+        q = q.or(`nombre.ilike.%${term}%,codigo.ilike.%${term}%`)
+      }
+
+      q = q.range(from, to)
+
+      const { data, error, count } = await q
+      if (error) throw new Error(error.message)
+
+      return {
+        data: data as unknown as Array<SourceSubjectRow>,
+        count: count ?? 0,
+      }
+    },
+  })
+
+  const subjects = subjectsPaged?.data ?? []
+  const total = subjectsPaged?.count ?? 0
+  const pageCount = Math.max(1, Math.ceil(total / pageSize))
+
+  useEffect(() => {
+    // clamp page if results shrink
+    if (page > pageCount) {
+      onChange((w) => ({
+        ...w,
+        clonInterno: { ...(w.clonInterno ?? {}), page: pageCount },
+      }))
+    }
+  }, [onChange, page, pageCount])
+
+  const patchClonInterno = (
+    patch: Partial<NonNullable<NewSubjectWizardState['clonInterno']>>,
+  ) =>
+    onChange((w) => ({
+      ...w,
+      clonInterno: { ...(w.clonInterno ?? {}), ...patch },
+    }))
+
+  const hasAnyFilter = Boolean(
+    facultadId || carreraId || planOrigenId || search.trim().length,
+  )
+
+  const clearDisabled = !hasAnyFilter
+
+  const selectedId = wizard.clonInterno?.asignaturaOrigenId ?? null
+
+  const resetSelection = () => patchClonInterno({ asignaturaOrigenId: null })
+
+  return (
+    <div className="grid gap-4">
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Fuente</CardTitle>
+        </CardHeader>
+        <CardContent className="grid gap-4">
+          <div className="grid gap-3 sm:grid-cols-3">
+            <div className="grid gap-1">
+              <Label>Facultad</Label>
+              <Select
+                value={facultadId ?? ALL}
+                onValueChange={(val) => {
+                  const next = val === ALL ? null : val
+                  patchClonInterno({
+                    facultadId: next,
+                    carreraId: null,
+                    planOrigenId: null,
+                    page: 1,
+                  })
+                  resetSelection()
+                }}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Todas" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value={ALL}>Todas</SelectItem>
+                  {(catalogos?.facultades ?? []).map((f) => (
+                    <SelectItem key={f.id} value={f.id}>
+                      {f.nombre}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="grid gap-1">
+              <Label>Carrera</Label>
+              <Select
+                value={carreraId ?? ALL}
+                onValueChange={(val) => {
+                  const next = val === ALL ? null : val
+                  patchClonInterno({
+                    carreraId: next,
+                    planOrigenId: null,
+                    page: 1,
+                  })
+                  resetSelection()
+                }}
+                disabled={!facultadId}
+              >
+                <SelectTrigger>
+                  <SelectValue
+                    placeholder={facultadId ? 'Todas' : 'Selecciona facultad'}
+                  />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value={ALL}>Todas</SelectItem>
+                  {carrerasOptions.map((c) => (
+                    <SelectItem key={c.id} value={c.id}>
+                      {c.nombre}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="grid gap-1">
+              <Label>Plan</Label>
+              <Select
+                value={planOrigenId ?? ALL}
+                onValueChange={(val) => {
+                  const next = val === ALL ? null : val
+                  patchClonInterno({ planOrigenId: next, page: 1 })
+                  resetSelection()
+                }}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Todos" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value={ALL}>Todos</SelectItem>
+                  {(planesQuery.data?.data ?? []).map((p) => (
+                    <SelectItem key={p.id} value={p.id}>
+                      {p.nombre}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          <div className="grid gap-3 sm:grid-cols-[1fr_auto]">
+            <div className="grid gap-1">
+              <Label>Buscar</Label>
+              <Input
+                placeholder="Nombre o código..."
+                value={search}
+                onChange={(e) =>
+                  patchClonInterno({ search: e.target.value, page: 1 })
+                }
+              />
+            </div>
+            <div className="flex items-end justify-end">
+              <Button
+                type="button"
+                variant="secondary"
+                onClick={() => {
+                  patchClonInterno({
+                    facultadId: null,
+                    carreraId: null,
+                    planOrigenId: null,
+                    search: '',
+                    page: 1,
+                    asignaturaOrigenId: null,
+                  })
+                }}
+                disabled={clearDisabled}
+              >
+                <Icons.X className="mr-2 h-4 w-4" />
+                Limpiar filtros
+              </Button>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="grid gap-2">
+        <div className="text-muted-foreground text-xs">
+          Selecciona una asignatura fuente (solo una).
+        </div>
+
+        <div className="grid max-h-80 gap-2 overflow-y-auto">
+          {subjectsLoading ? (
+            <div className="text-muted-foreground text-sm">
+              Cargando asignaturas…
+            </div>
+          ) : subjects.length === 0 ? (
+            <div className="text-muted-foreground text-sm">
+              No hay asignaturas con esos filtros.
+            </div>
+          ) : (
+            subjects.map((m) => {
+              const active = String(selectedId) === String(m.id)
+              return (
+                <label
+                  key={m.id}
+                  className={cn(
+                    'hover:bg-accent flex cursor-pointer items-center justify-between rounded-md border p-3 text-left',
+                    active && 'border-primary bg-primary/5 ring-primary ring-1',
+                  )}
+                >
+                  <input
+                    className="sr-only"
+                    type="radio"
+                    name="asignaturaFuente"
+                    checked={active}
+                    onChange={() =>
+                      patchClonInterno({ asignaturaOrigenId: m.id, page })
+                    }
+                  />
+                  <div className="min-w-0">
+                    <div className="truncate font-medium">{m.nombre}</div>
+                    <div className="text-muted-foreground mt-0.5 text-xs">
+                      {(m.codigo ? m.codigo : '—') +
+                        ' • ' +
+                        String(m.creditos) +
+                        ' créditos'}
+                    </div>
+                  </div>
+                  {active ? (
+                    <Icons.CheckCircle2 className="text-primary h-5 w-5 flex-none" />
+                  ) : (
+                    <span className="h-5 w-5 flex-none" aria-hidden />
+                  )}
+                </label>
+              )
+            })
+          )}
+        </div>
+
+        {pageCount > 1 ? (
+          <Pagination03
+            page={page}
+            pageCount={pageCount}
+            onPageChange={(nextPage) => patchClonInterno({ page: nextPage })}
+          />
+        ) : null}
+      </div>
+    </div>
+  )
+}
--- a/src/components/asignaturas/wizard/WizardControls.tsx
+++ b/src/components/asignaturas/wizard/WizardControls.tsx
@@ -15,6 +15,7 @@ import {
  qk,
  useCreateSubjectManual,
  subjects_get_maybe,
+  subjects_get,
 } from '@/data'

 export function WizardControls({
@@ -201,6 +202,85 @@ export function WizardControls({
    let startedWaiting = false

    try {
+      if (wizard.tipoOrigen === 'CLONADO_INTERNO') {
+        if (!wizard.plan_estudio_id) {
+          throw new Error('Plan de estudio inválido.')
+        }
+
+        const asignaturaOrigenId = wizard.clonInterno?.asignaturaOrigenId
+        if (!asignaturaOrigenId) {
+          throw new Error('Selecciona una asignatura fuente.')
+        }
+
+        if (!wizard.datosBasicos.estructuraId) {
+          throw new Error('Estructura inválida.')
+        }
+        if (!wizard.datosBasicos.nombre.trim()) {
+          throw new Error('Nombre inválido.')
+        }
+        if (wizard.datosBasicos.tipo == null) {
+          throw new Error('Tipo inválido.')
+        }
+        if (wizard.datosBasicos.creditos == null) {
+          throw new Error('Créditos inválidos.')
+        }
+
+        const fuente = await subjects_get(asignaturaOrigenId as any)
+
+        const supabase = supabaseBrowser()
+
+        const codigo = (wizard.datosBasicos.codigo ?? '').trim()
+
+        const payload: TablesInsert<'asignaturas'> = {
+          plan_estudio_id: wizard.plan_estudio_id,
+          estructura_id: wizard.datosBasicos.estructuraId,
+          codigo: codigo ? codigo : null,
+          nombre: wizard.datosBasicos.nombre,
+          tipo: wizard.datosBasicos.tipo,
+          creditos: wizard.datosBasicos.creditos,
+          datos: (fuente as any).datos,
+          contenido_tematico: (fuente as any).contenido_tematico,
+          criterios_de_evaluacion: (fuente as any).criterios_de_evaluacion,
+          tipo_origen: 'CLONADO_INTERNO',
+          meta_origen: {
+            ...(fuente as any).meta_origen,
+            asignatura_origen_id: fuente.id,
+            plan_origen_id: (fuente as any).plan_estudio_id,
+          },
+          horas_academicas:
+            wizard.datosBasicos.horasAcademicas ??
+            (fuente as any).horas_academicas ??
+            null,
+          horas_independientes:
+            wizard.datosBasicos.horasIndependientes ??
+            (fuente as any).horas_independientes ??
+            null,
+        }
+
+        const { data: inserted, error: insertError } = await supabase
+          .from('asignaturas')
+          .insert(payload)
+          .select('id,plan_estudio_id')
+          .single()
+
+        if (insertError) throw new Error(insertError.message)
+
+        qc.invalidateQueries({
+          queryKey: qk.planAsignaturas(wizard.plan_estudio_id),
+        })
+        qc.invalidateQueries({
+          queryKey: qk.planHistorial(wizard.plan_estudio_id),
+        })
+
+        navigate({
+          to: `/planes/${inserted.plan_estudio_id}/asignaturas/${inserted.id}`,
+          state: { showConfetti: true },
+          resetScroll: false,
+        })
+
+        return
+      }
+
      if (wizard.tipoOrigen === 'IA_SIMPLE') {
        if (!wizard.plan_estudio_id) {
          throw new Error('Plan de estudio inválido.')
--- a/src/components/shadcn-studio/pagination/pagination-03.tsx
+++ b/src/components/shadcn-studio/pagination/pagination-03.tsx
@@ -0,0 +1,128 @@
+import { buttonVariants } from '@/components/ui/button'
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from '@/components/ui/pagination'
+import { cn } from '@/lib/utils'
+
+export type Pagination03Props = {
+  page: number
+  pageCount: number
+  onPageChange: (page: number) => void
+  className?: string
+}
+
+const toInt = (n: unknown, fallback: number) => {
+  const x = typeof n === 'number' ? n : Number(n)
+  return Number.isFinite(x) ? Math.floor(x) : fallback
+}
+
+function getPageItems(page: number, pageCount: number): Array<number | '...'> {
+  if (pageCount <= 7) {
+    return Array.from({ length: pageCount }, (_, i) => i + 1)
+  }
+
+  const items: Array<number | '...'> = []
+  const safePage = Math.min(Math.max(page, 1), pageCount)
+
+  items.push(1)
+
+  const start = Math.max(2, safePage - 1)
+  const end = Math.min(pageCount - 1, safePage + 1)
+
+  if (start > 2) items.push('...')
+  for (let p = start; p <= end; p++) items.push(p)
+  if (end < pageCount - 1) items.push('...')
+
+  items.push(pageCount)
+  return items
+}
+
+export function Pagination03({
+  page,
+  pageCount,
+  onPageChange,
+  className,
+}: Pagination03Props) {
+  const safePageCount = Math.max(1, toInt(pageCount, 1))
+  const safePage = Math.min(Math.max(toInt(page, 1), 1), safePageCount)
+
+  const items = getPageItems(safePage, safePageCount)
+  const canPrev = safePage > 1
+  const canNext = safePage < safePageCount
+
+  const go = (p: number) => {
+    const next = Math.min(Math.max(p, 1), safePageCount)
+    if (next === safePage) return
+    onPageChange(next)
+  }
+
+  return (
+    <Pagination className={className}>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious
+            href="#"
+            className={cn(!canPrev && 'pointer-events-none opacity-50')}
+            onClick={(e) => {
+              e.preventDefault()
+              if (!canPrev) return
+              go(safePage - 1)
+            }}
+          />
+        </PaginationItem>
+
+        {items.map((it, idx) =>
+          it === '...' ? (
+            <PaginationItem key={`ellipsis-${idx}`}>
+              <PaginationEllipsis />
+            </PaginationItem>
+          ) : (
+            <PaginationItem key={it}>
+              <PaginationLink
+                href="#"
+                isActive={it === safePage}
+                onClick={(e) => {
+                  e.preventDefault()
+                  go(it)
+                }}
+                className={
+                  it === safePage
+                    ? cn(
+                        buttonVariants({
+                          variant: 'default',
+                          size: 'icon',
+                        }),
+                        'hover:text-primary-foreground! dark:bg-primary dark:text-primary-foreground dark:hover:text-primary-foreground dark:hover:bg-primary/90 shadow-none! dark:border-transparent',
+                      )
+                    : undefined
+                }
+              >
+                {it}
+              </PaginationLink>
+            </PaginationItem>
+          ),
+        )}
+
+        <PaginationItem>
+          <PaginationNext
+            href="#"
+            className={cn(!canNext && 'pointer-events-none opacity-50')}
+            onClick={(e) => {
+              e.preventDefault()
+              if (!canNext) return
+              go(safePage + 1)
+            }}
+          />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  )
+}
+
+export default Pagination03
--- a/src/components/ui/pagination.tsx
+++ b/src/components/ui/pagination.tsx
@@ -0,0 +1,127 @@
+import * as React from "react"
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  MoreHorizontalIcon,
+} from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants, type Button } from "@/components/ui/button"
+
+function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      data-slot="pagination"
+      className={cn("mx-auto flex w-full justify-center", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationContent({
+  className,
+  ...props
+}: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="pagination-content"
+      className={cn("flex flex-row items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationItem({ ...props }: React.ComponentProps<"li">) {
+  return <li data-slot="pagination-item" {...props} />
+}
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<React.ComponentProps<typeof Button>, "size"> &
+  React.ComponentProps<"a">
+
+function PaginationLink({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) {
+  return (
+    <a
+      aria-current={isActive ? "page" : undefined}
+      data-slot="pagination-link"
+      data-active={isActive}
+      className={cn(
+        buttonVariants({
+          variant: isActive ? "outline" : "ghost",
+          size,
+        }),
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function PaginationPrevious({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      size="default"
+      className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
+      {...props}
+    >
+      <ChevronLeftIcon />
+      <span className="hidden sm:block">Previous</span>
+    </PaginationLink>
+  )
+}
+
+function PaginationNext({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      size="default"
+      className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
+      {...props}
+    >
+      <span className="hidden sm:block">Next</span>
+      <ChevronRightIcon />
+    </PaginationLink>
+  )
+}
+
+function PaginationEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontalIcon className="size-4" />
+      <span className="sr-only">More pages</span>
+    </span>
+  )
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+}
--- a/src/data/api/document.api.ts
+++ b/src/data/api/document.api.ts
@@ -1,52 +1,86 @@
 // document.api.ts

-const DOCUMENT_PDF_URL =
-  'https://n8n.app.lci.ulsa.mx/webhook/62ca84ec-0adb-4006-aba1-32282d27d434'
+import { supabaseBrowser } from '../supabase/client'
+import { invokeEdge } from '../supabase/invokeEdge'

-const DOCUMENT_PDF_ASIGNATURA_URL =
-  'https://n8n.app.lci.ulsa.mx/webhook/041a68be-7568-46d0-bc08-09ded12d017d'
+import { requireData, throwIfError } from './_helpers'
+
+import type { Tables } from '@/types/supabase'
+
+const EDGE = {
+  carbone_io_wrapper: 'carbone-io-wrapper',
+} as const

 interface GeneratePdfParams {
  plan_estudio_id: string
+  convertTo?: 'pdf'
 }
 interface GeneratePdfParamsAsignatura {
  asignatura_id: string
+  convertTo?: 'pdf'
 }

 export async function fetchPlanPdf({
  plan_estudio_id,
+  convertTo,
 }: GeneratePdfParams): Promise<Blob> {
-  const response = await fetch(DOCUMENT_PDF_URL, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
+  return await invokeEdge<Blob>(
+    EDGE.carbone_io_wrapper,
+    {
+      action: 'downloadReport',
+      plan_estudio_id,
+      body: convertTo ? { convertTo } : {},
    },
-    body: JSON.stringify({ plan_estudio_id }),
-  })
-
-  if (!response.ok) {
-    throw new Error('Error al generar el PDF')
-  }
-
-  // n8n devuelve el archivo → lo tratamos como blob
-  return await response.blob()
+    {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      responseType: 'blob',
+    },
+  )
 }

 export async function fetchAsignaturaPdf({
  asignatura_id,
+  convertTo,
 }: GeneratePdfParamsAsignatura): Promise<Blob> {
-  const response = await fetch(DOCUMENT_PDF_ASIGNATURA_URL, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify({ asignatura_id }),
-  })
+  const supabase = supabaseBrowser()

-  if (!response.ok) {
-    throw new Error('Error al generar el PDF')
+  const { data, error } = await supabase
+    .from('asignaturas')
+    .select('*')
+    .eq('id', asignatura_id)
+    .single()
+
+  throwIfError(error)
+
+  const row = requireData(
+    data as Pick<
+      Tables<'asignaturas'>,
+      'datos' | 'contenido_tematico' | 'criterios_de_evaluacion'
+    >,
+    'Asignatura no encontrada',
+  )
+
+  const body: Record<string, unknown> = {
+    data: row,
  }
+  if (convertTo) body.convertTo = convertTo

-  // n8n devuelve el archivo → lo tratamos como blob
-  return await response.blob()
+  return await invokeEdge<Blob>(
+    EDGE.carbone_io_wrapper,
+    {
+      action: 'downloadReport',
+      asignatura_id,
+      body: {
+        ...body,
+      },
+    },
+    {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      responseType: 'blob',
+    },
+  )
 }
--- a/src/data/supabase/invokeEdge.ts
+++ b/src/data/supabase/invokeEdge.ts
@@ -12,6 +12,7 @@ import type { SupabaseClient } from '@supabase/supabase-js'
 export type EdgeInvokeOptions = {
  method?: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE'
  headers?: Record<string, string>
+  responseType?: 'json' | 'text' | 'blob' | 'arrayBuffer'
 }

 export class EdgeFunctionError extends Error {
@@ -26,6 +27,55 @@ export class EdgeFunctionError extends Error {
  }
 }

+// Soporta base64 puro o data:...;base64,...
+function decodeBase64ToUint8Array(input: string): Uint8Array {
+  const trimmed = input.trim()
+  const base64 = trimmed.startsWith('data:')
+    ? trimmed.slice(trimmed.indexOf(',') + 1)
+    : trimmed
+
+  const bin = atob(base64)
+  const bytes = new Uint8Array(bin.length)
+  for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i)
+  return bytes
+}
+
+function stripDataUrlPrefix(input: string): string {
+  const trimmed = input.trim()
+  if (!trimmed.startsWith('data:')) return trimmed
+  const commaIdx = trimmed.indexOf(',')
+  return commaIdx >= 0 ? trimmed.slice(commaIdx + 1) : trimmed
+}
+
+function looksLikeBase64(s: string): boolean {
+  const t = stripDataUrlPrefix(s).replace(/\s+/g, '').replace(/=+$/g, '')
+
+  // base64 típico: solo chars permitidos y longitud razonable
+  if (t.length < 64) return false
+  return /^[A-Za-z0-9+/]+$/.test(t)
+}
+
+function startsWithZip(bytes: Uint8Array): boolean {
+  return bytes.length >= 2 && bytes[0] === 0x50 && bytes[1] === 0x4b // "PK"
+}
+
+function startsWithPdf(bytes: Uint8Array): boolean {
+  return (
+    bytes.length >= 5 &&
+    bytes[0] === 0x25 &&
+    bytes[1] === 0x50 &&
+    bytes[2] === 0x44 &&
+    bytes[3] === 0x46 &&
+    bytes[4] === 0x2d
+  ) // "%PDF-"
+}
+
+function binaryStringToUint8Array(input: string): Uint8Array {
+  const bytes = new Uint8Array(input.length)
+  for (let i = 0; i < input.length; i++) bytes[i] = input.charCodeAt(i) & 0xff
+  return bytes
+}
+
 export async function invokeEdge<TOut>(
  functionName: string,
  body?:
@@ -42,10 +92,16 @@ export async function invokeEdge<TOut>(
 ): Promise<TOut> {
  const supabase = client ?? supabaseBrowser()

-  const { data, error } = await supabase.functions.invoke(functionName, {
+  // Nota: algunas versiones/defs de @supabase/supabase-js no tipan `responseType`
+  // aunque el runtime lo soporte. Usamos `any` para no bloquear el uso de Blob.
+  const invoke: any = (supabase.functions as any).invoke.bind(
+    supabase.functions,
+  )
+  const { data, error } = await invoke(functionName, {
    body,
    method: opts.method ?? 'POST',
    headers: opts.headers,
+    responseType: opts.responseType,
  })

  if (error) {
@@ -104,5 +160,20 @@ export async function invokeEdge<TOut>(
    throw new EdgeFunctionError(message, functionName, status, details)
  }

+  if (opts.responseType === 'blob') {
+    const anyData: unknown = data
+
+    if (anyData instanceof Blob) {
+      return anyData as TOut
+    }
+
+    throw new EdgeFunctionError(
+      'La Edge Function no devolvió un binario (Blob) válido.',
+      functionName,
+      undefined,
+      { receivedType: typeof anyData, received: anyData },
+    )
+  }
+
  return data as TOut
 }
--- a/src/features/asignaturas/nueva/NuevaAsignaturaModalContainer.tsx
+++ b/src/features/asignaturas/nueva/NuevaAsignaturaModalContainer.tsx
@@ -3,8 +3,10 @@ import * as Icons from 'lucide-react'

 import { useNuevaAsignaturaWizard } from './hooks/useNuevaAsignaturaWizard'

+import { PasoBasicosClonadoInterno } from '@/components/asignaturas/wizard/PasoBasicosClonadoInterno.tsx'
 import { PasoBasicosForm } from '@/components/asignaturas/wizard/PasoBasicosForm/PasoBasicosForm'
 import { PasoDetallesPanel } from '@/components/asignaturas/wizard/PasoDetallesPanel'
+import { PasoFuenteClonadoInterno } from '@/components/asignaturas/wizard/PasoFuenteClonadoInterno.tsx'
 import { PasoMetodoCardGroup } from '@/components/asignaturas/wizard/PasoMetodoCardGroup'
 import { PasoResumenCard } from '@/components/asignaturas/wizard/PasoResumenCard'
 import { WizardControls } from '@/components/asignaturas/wizard/WizardControls'
@@ -63,7 +65,12 @@ export function NuevaAsignaturaModalContainer({ planId }: { planId: string }) {
          basicos: 'Sugerencias',
          detalles: 'Estructura',
        }
-      : undefined
+      : wizard.tipoOrigen === 'CLONADO_INTERNO'
+        ? {
+            basicos: 'Fuente',
+            detalles: 'Datos básicos',
+          }
+        : undefined

  const handleClose = () => {
    navigate({ to: `/planes/${planId}/asignaturas`, resetScroll: false })
@@ -99,6 +106,21 @@ export function NuevaAsignaturaModalContainer({ planId }: { planId: string }) {
    >
      {({ methods }) => {
        const idx = Wizard.utils.getIndex(methods.current.id)
+        const stepId = methods.current.id
+
+        const disableNext =
+          wizard.isLoading ||
+          (stepId === 'metodo'
+            ? !canContinueDesdeMetodo
+            : stepId === 'basicos'
+              ? wizard.tipoOrigen === 'CLONADO_INTERNO'
+                ? !canContinueDesdeDetalles
+                : !canContinueDesdeBasicos
+              : stepId === 'detalles'
+                ? wizard.tipoOrigen === 'CLONADO_INTERNO'
+                  ? !canContinueDesdeBasicos
+                  : !canContinueDesdeDetalles
+                : false)

        return (
          <WizardLayout
@@ -118,12 +140,7 @@ export function NuevaAsignaturaModalContainer({ planId }: { planId: string }) {
                  onPrev={() => methods.prev()}
                  onNext={() => methods.next()}
                  disablePrev={idx === 0 || wizard.isLoading}
-                  disableNext={
-                    wizard.isLoading ||
-                    (idx === 0 && !canContinueDesdeMetodo) ||
-                    (idx === 1 && !canContinueDesdeBasicos) ||
-                    (idx === 2 && !canContinueDesdeDetalles)
-                  }
+                  disableNext={disableNext}
                  disableCreate={wizard.isLoading}
                  isLastStep={idx >= Wizard.steps.length - 1}
                  wizard={wizard}
@@ -141,13 +158,27 @@ export function NuevaAsignaturaModalContainer({ planId }: { planId: string }) {

              {idx === 1 && (
                <Wizard.Stepper.Panel>
-                  <PasoBasicosForm wizard={wizard} onChange={setWizard} />
+                  {wizard.tipoOrigen === 'CLONADO_INTERNO' ? (
+                    <PasoFuenteClonadoInterno
+                      wizard={wizard}
+                      onChange={setWizard}
+                    />
+                  ) : (
+                    <PasoBasicosForm wizard={wizard} onChange={setWizard} />
+                  )}
                </Wizard.Stepper.Panel>
              )}

              {idx === 2 && (
                <Wizard.Stepper.Panel>
-                  <PasoDetallesPanel wizard={wizard} onChange={setWizard} />
+                  {wizard.tipoOrigen === 'CLONADO_INTERNO' ? (
+                    <PasoBasicosClonadoInterno
+                      wizard={wizard}
+                      onChange={setWizard}
+                    />
+                  ) : (
+                    <PasoDetallesPanel wizard={wizard} onChange={setWizard} />
+                  )}
                </Wizard.Stepper.Panel>
              )}

--- a/src/features/asignaturas/nueva/types.ts
+++ b/src/features/asignaturas/nueva/types.ts
@@ -50,10 +50,12 @@ export type NewSubjectWizardState = {
  }
  sugerencias: Array<AsignaturaSugerida>
  clonInterno?: {
-    facultadId?: string
-    carreraId?: string
-    planOrigenId?: string
+    facultadId?: string | null
+    carreraId?: string | null
+    planOrigenId?: string | null
    asignaturaOrigenId?: string | null
+    search?: string
+    page?: number
  }
  clonTradicional?: {
    archivoWordAsignaturaId: string | null
--- a/src/lib/asignaturaColumnParsers.ts
+++ b/src/lib/asignaturaColumnParsers.ts
@@ -0,0 +1,78 @@
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+
+export function parseContenidoTematicoToPlainText(value: unknown): string {
+  if (!Array.isArray(value)) return ''
+
+  const blocks: Array<string> = []
+
+  for (const item of value) {
+    if (!isRecord(item)) continue
+
+    const unidad =
+      typeof item.unidad === 'number' && Number.isFinite(item.unidad)
+        ? item.unidad
+        : undefined
+    const titulo = typeof item.titulo === 'string' ? item.titulo : ''
+
+    const header = `${unidad ?? ''}${unidad ? '.' : ''} ${titulo}`.trim()
+    if (!header) continue
+
+    const lines: Array<string> = [header]
+
+    const temas = Array.isArray(item.temas) ? item.temas : []
+    temas.forEach((tema, idx) => {
+      const temaNombre =
+        typeof tema === 'string'
+          ? tema
+          : isRecord(tema) && typeof tema.nombre === 'string'
+            ? tema.nombre
+            : ''
+      if (!temaNombre) return
+
+      if (unidad != null) {
+        lines.push(`${unidad}.${idx + 1} ${temaNombre}`.trim())
+      } else {
+        lines.push(`${idx + 1}. ${temaNombre}`)
+      }
+    })
+
+    blocks.push(lines.join('\n'))
+  }
+
+  return blocks.join('\n\n').trimEnd()
+}
+
+export function parseCriteriosEvaluacionToPlainText(value: unknown): string {
+  if (!Array.isArray(value)) return ''
+
+  const lines: Array<string> = []
+  for (const item of value) {
+    if (!isRecord(item)) continue
+    const label = typeof item.criterio === 'string' ? item.criterio.trim() : ''
+    const valueNum =
+      typeof item.porcentaje === 'number'
+        ? item.porcentaje
+        : typeof item.porcentaje === 'string'
+          ? Number(item.porcentaje)
+          : NaN
+
+    if (!label) continue
+    if (!Number.isFinite(valueNum)) continue
+
+    const v = Math.trunc(valueNum)
+    if (v < 1 || v > 100) continue
+
+    lines.push(`${label}: ${v}%`)
+  }
+
+  return lines.join('\n')
+}
+
+export const columnParsers: Partial<
+  Record<string, (value: unknown) => string>
+> = {
+  contenido_tematico: parseContenidoTematicoToPlainText,
+  criterios_de_evaluacion: parseCriteriosEvaluacionToPlainText,
+}
--- a/src/routes/planes/$planId/_detalle/documento.tsx
+++ b/src/routes/planes/$planId/_detalle/documento.tsx
@@ -8,10 +8,11 @@ import {
  Clock,
  FileJson,
 } from 'lucide-react'
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'

 import { Button } from '@/components/ui/button'
 import { Card, CardContent } from '@/components/ui/card'
+import { usePlan } from '@/data'
 import { fetchPlanPdf } from '@/data/api/document.api'

 export const Route = createFileRoute('/planes/$planId/_detalle/documento')({
@@ -20,30 +21,41 @@ export const Route = createFileRoute('/planes/$planId/_detalle/documento')({

 function RouteComponent() {
  const { planId } = useParams({ from: '/planes/$planId/_detalle/documento' })
+  const { data: plan } = usePlan(planId)
  const [pdfUrl, setPdfUrl] = useState<string | null>(null)
+  const pdfUrlRef = useRef<string | null>(null)
+  const isMountedRef = useRef<boolean>(false)
  const [isLoading, setIsLoading] = useState(true)

+  const planFileBaseName = sanitizeFileBaseName(plan?.nombre ?? 'plan_estudios')
+
  const loadPdfPreview = useCallback(async () => {
    try {
-      setIsLoading(true)
-      const pdfBlob = await fetchPlanPdf({ plan_estudio_id: planId })
+      if (isMountedRef.current) setIsLoading(true)
+      const pdfBlob = await fetchPlanPdf({
+        plan_estudio_id: planId,
+        convertTo: 'pdf',
+      })
+
+      if (!isMountedRef.current) return
      const url = window.URL.createObjectURL(pdfBlob)

-      // Limpiar URL anterior si existe para evitar fugas de memoria
-      if (pdfUrl) window.URL.revokeObjectURL(pdfUrl)
-
+      if (pdfUrlRef.current) window.URL.revokeObjectURL(pdfUrlRef.current)
+      pdfUrlRef.current = url
      setPdfUrl(url)
    } catch (error) {
      console.error('Error cargando preview:', error)
    } finally {
-      setIsLoading(false)
+      if (isMountedRef.current) setIsLoading(false)
    }
  }, [planId])

  useEffect(() => {
+    isMountedRef.current = true
    loadPdfPreview()
    return () => {
-      if (pdfUrl) window.URL.revokeObjectURL(pdfUrl)
+      isMountedRef.current = false
+      if (pdfUrlRef.current) window.URL.revokeObjectURL(pdfUrlRef.current)
    }
  }, [loadPdfPreview])

@@ -51,12 +63,13 @@ function RouteComponent() {
    try {
      const pdfBlob = await fetchPlanPdf({
        plan_estudio_id: planId,
+        convertTo: 'pdf',
      })

      const url = window.URL.createObjectURL(pdfBlob)
      const link = document.createElement('a')
      link.href = url
-      link.download = 'plan_estudios.pdf'
+      link.download = `${planFileBaseName}.pdf`
      document.body.appendChild(link)
      link.click()

@@ -67,6 +80,27 @@ function RouteComponent() {
      alert('No se pudo generar el PDF')
    }
  }
+
+  const handleDownloadWord = async () => {
+    try {
+      const docBlob = await fetchPlanPdf({
+        plan_estudio_id: planId,
+      })
+
+      const url = window.URL.createObjectURL(docBlob)
+      const link = document.createElement('a')
+      link.href = url
+      link.download = `${planFileBaseName}.docx`
+      document.body.appendChild(link)
+      link.click()
+
+      link.remove()
+      setTimeout(() => window.URL.revokeObjectURL(url), 1000)
+    } catch (error) {
+      console.error(error)
+      alert('No se pudo generar el Word')
+    }
+  }
  return (
    <div className="flex min-h-screen flex-col gap-6 bg-slate-50/30 p-6">
      {/* HEADER DE ACCIONES */}
@@ -88,12 +122,17 @@ function RouteComponent() {
          >
            <RefreshCcw size={16} /> Regenerar
          </Button>
-          <Button variant="outline" size="sm" className="gap-2">
-            <Download size={16} /> Descargar Word
-          </Button>
          <Button
            size="sm"
            className="gap-2 bg-teal-700 hover:bg-teal-800"
+            onClick={handleDownloadWord}
+          >
+            <Download size={16} /> Descargar Word
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            className="gap-2"
            onClick={handleDownloadPdf}
          >
            <Download size={16} /> Descargar PDF
@@ -139,7 +178,7 @@ function RouteComponent() {
          )}
        </div>

-        <CardContent className="flex min-h-[800px] justify-center bg-slate-500 p-0">
+        <CardContent className="flex min-h-200 justify-center bg-slate-500 p-0">
          {isLoading ? (
            <div className="flex flex-col items-center justify-center gap-4 text-white">
              <RefreshCcw size={40} className="animate-spin opacity-50" />
@@ -149,7 +188,7 @@ function RouteComponent() {
            /* 3. VISOR DE PDF REAL */
            <iframe
              src={`${pdfUrl}#toolbar=0&navpanes=0`}
-              className="h-[1000px] w-full max-w-[1000px] border-none shadow-2xl"
+              className="h-250 w-full max-w-250 border-none shadow-2xl"
              title="PDF Preview"
            />
          ) : (
@@ -163,6 +202,24 @@ function RouteComponent() {
  )
 }

+function sanitizeFileBaseName(input: string): string {
+  const text = String(input)
+  const withoutControlChars = Array.from(text)
+    .filter((ch) => {
+      const code = ch.charCodeAt(0)
+      return code >= 32 && code !== 127
+    })
+    .join('')
+
+  const cleaned = withoutControlChars
+    .replace(/[<>:"/\\|?*]+/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim()
+    .replace(/[. ]+$/g, '')
+
+  return (cleaned || 'documento').slice(0, 150)
+}
+
 // Componente pequeño para las tarjetas de estado superior
 function StatusCard({
  icon,
--- a/src/routes/planes/$planId/_detalle/mapa.tsx
+++ b/src/routes/planes/$planId/_detalle/mapa.tsx
@@ -5,7 +5,6 @@ import {
  Plus,
  ChevronDown,
  AlertTriangle,
-  GripVertical,
  Trash2,
  Pencil,
 } from 'lucide-react'
@@ -46,16 +45,33 @@ import {
  useUpdateAsignatura,
  useUpdateLinea,
 } from '@/data'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'

 // --- Mapeadores (Fuera del componente para mayor limpieza) ---
+const palette = [
+  '#4F46E5', // índigo
+  '#7C3AED', // violeta
+  '#EA580C', // naranja
+  '#059669', // esmeralda
+  '#DC2626', // rojo
+  '#0891B2', // cyan
+  '#CA8A04', // ámbar
+  '#C026D3', // fucsia
+]
+
 const mapLineasToLineaCurricular = (
  lineasApi: Array<any> = [],
 ): Array<LineaCurricular> => {
-  return lineasApi.map((linea) => ({
+  return lineasApi.map((linea, index) => ({
    id: linea.id,
    nombre: linea.nombre,
    orden: linea.orden ?? 0,
-    color: '#1976d2',
+    color: palette[index % palette.length],
  }))
 }

@@ -121,52 +137,216 @@ function StatItem({
  )
 }

+import * as Icons from 'lucide-react'
+
+const estadoConfig: Record<
+  Asignatura['estado'],
+  {
+    label: string
+    dot: string
+    soft: string
+    icon: React.ComponentType<{ className?: string }>
+  }
+> = {
+  borrador: {
+    label: 'Borrador',
+    dot: 'bg-slate-500',
+    soft: 'bg-slate-100 text-slate-700',
+    icon: Icons.FileText,
+  },
+  revisada: {
+    label: 'Revisada',
+    dot: 'bg-amber-500',
+    soft: 'bg-amber-100 text-amber-700',
+    icon: Icons.ScanSearch,
+  },
+  aprobada: {
+    label: 'Aprobada',
+    dot: 'bg-emerald-500',
+    soft: 'bg-emerald-100 text-emerald-700',
+    icon: Icons.BadgeCheck,
+  },
+  generando: {
+    label: 'Generando',
+    dot: 'bg-sky-500',
+    soft: 'bg-sky-100 text-sky-700',
+    icon: Icons.LoaderCircle,
+  },
+}
+
+function hexToRgba(hex: string, alpha: number) {
+  const clean = hex.replace('#', '')
+  const bigint = parseInt(clean, 16)
+  const r = (bigint >> 16) & 255
+  const g = (bigint >> 8) & 255
+  const b = bigint & 255
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`
+}
+
 function AsignaturaCardItem({
  asignatura,
+  lineaColor,
+  lineaNombre,
  onDragStart,
  isDragging,
  onClick,
 }: {
  asignatura: Asignatura
+  lineaColor: string
+  lineaNombre?: string
  onDragStart: (e: React.DragEvent, id: string) => void
  isDragging: boolean
  onClick: () => void
 }) {
+  const estado = estadoConfig[asignatura.estado] ?? estadoConfig.borrador
+  const EstadoIcon = estado.icon
+
  return (
-    <button
-      draggable
-      onDragStart={(e) => onDragStart(e, asignatura.id)}
-      onClick={onClick}
-      className={`group cursor-grab rounded-lg border bg-white p-3 shadow-sm transition-all active:cursor-grabbing ${
-        isDragging
-          ? 'scale-95 opacity-40'
-          : 'hover:border-teal-400 hover:shadow-md'
-      }`}
-    >
-      <div className="mb-1 flex items-start justify-between">
-        <span className="font-mono text-[10px] font-bold text-slate-400">
-          {asignatura.clave}
-        </span>
-        <Badge
-          variant="outline"
-          className={`px-1 py-0 text-[9px] uppercase ${statusBadge[asignatura.estado] || ''}`}
-        >
-          {asignatura.estado}
-        </Badge>
-      </div>
-      <p className="mb-1 text-xs leading-tight font-bold text-slate-700">
-        {asignatura.nombre}
-      </p>
-      <div className="mt-2 flex items-center justify-between">
-        <span className="text-[10px] text-slate-500">
-          {asignatura.creditos} CR • HD:{asignatura.hd} • HI:{asignatura.hi}
-        </span>
-        <GripVertical
-          size={12}
-          className="text-slate-300 opacity-0 transition-opacity group-hover:opacity-100"
-        />
-      </div>
-    </button>
+    <TooltipProvider delayDuration={150}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            draggable
+            onDragStart={(e) => onDragStart(e, asignatura.id)}
+            onClick={onClick}
+            className={[
+              'group relative h-[200px] w-[272px] shrink-0 overflow-hidden rounded-[22px] border text-left',
+              'transition-all duration-300 ease-out',
+              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30',
+              'active:cursor-grabbing cursor-grab',
+              isDragging
+                ? 'scale-[0.985] opacity-45 shadow-none'
+                : 'hover:-translate-y-1 hover:shadow-lg',
+            ].join(' ')}
+            style={{
+              borderColor: hexToRgba(lineaColor, 0.18),
+              background: `
+                radial-gradient(circle at top right, ${hexToRgba(lineaColor, 0.22)} 0%, transparent 34%),
+                linear-gradient(180deg, ${hexToRgba(lineaColor, 0.12)} 0%, ${hexToRgba(lineaColor, 0.04)} 42%, var(--card) 100%)
+              `,
+            }}
+            title={asignatura.nombre}
+          >
+            {/* franja */}
+            <div
+              className="absolute inset-x-0 top-0 h-2"
+              style={{ backgroundColor: lineaColor }}
+            />
+
+            {/* glow decorativo */}
+            <div
+              className="absolute -top-10 -right-10 h-28 w-28 rounded-full blur-2xl transition-transform duration-500 group-hover:scale-110"
+              style={{ backgroundColor: hexToRgba(lineaColor, 0.22) }}
+            />
+
+            <div className="relative flex h-full flex-col p-4">
+              {/* top */}
+              <div className="flex items-start justify-between gap-2">
+                <div
+                  className="inline-flex h-8 max-w-[200px] items-center gap-1.5 rounded-full border px-2.5 text-[11px] font-semibold"
+                  style={{
+                    borderColor: hexToRgba(lineaColor, 0.2),
+                    backgroundColor: hexToRgba(lineaColor, 0.1),
+                    color: lineaColor,
+                  }}
+                >
+                  <Icons.KeyRound className="h-3.5 w-3.5 shrink-0" />
+                  <span className="truncate">{asignatura.clave || 'Sin clave'}</span>
+                </div>
+
+                <div className="relative flex h-8 items-center overflow-hidden rounded-full bg-background/70 px-2 backdrop-blur-sm">
+                  <div className="flex gap-4 items-center gap-1.5 transition-transform duration-300 group-hover:-translate-x-[72px]">
+                    <span className={`h-2.5 w-2.5 rounded-full ${estado.dot}`} />
+                    <EstadoIcon
+                      className={[
+                        'h-3.5 w-3.5 text-foreground/65',
+                        asignatura.estado === 'generando' ? 'animate-spin' : '',
+                      ].join(' ')}
+                    />
+                  </div>
+                  <div
+                    className={[
+                      'absolute right-2 flex translate-x-6 items-center gap-1.5 opacity-0 transition-all duration-300',
+                      'group-hover:translate-x-0 group-hover:opacity-100'
+                    ].join(' ')}
+                  >
+                    <span className="text-[11px] font-semibold whitespace-nowrap">
+                      {estado.label}
+                    </span>
+                  </div>
+
+                </div>
+              </div>
+
+              {/* titulo */}
+              <div className="mt-4 min-h-[72px]">
+                <h3
+                  className="overflow-hidden text-[18px] leading-[1.08] font-bold text-foreground"
+                  style={{
+                    display: '-webkit-box',
+                    WebkitLineClamp: 3,
+                    WebkitBoxOrient: 'vertical',
+                  }}
+                >
+                  {asignatura.nombre}
+                </h3>
+              </div>
+
+              {/* bottom */}
+              <div className="mt-auto grid grid-cols-3 gap-2">
+                <div className="rounded-2xl border border-white/40 bg-white/55 px-2.5 py-2 backdrop-blur-sm dark:border-white/10 dark:bg-white/5">
+                  <div className="mb-1 flex items-center gap-1.5 text-muted-foreground">
+                    <Icons.Award className="h-3.5 w-3.5" />
+                    <span className="text-[10px] font-medium uppercase tracking-wide">
+                      CR
+                    </span>
+                  </div>
+                  <div className="text-sm font-bold text-foreground">
+                    {asignatura.creditos}
+                  </div>
+                </div>
+
+                <div className="rounded-2xl border border-white/40 bg-white/55 px-2.5 py-2 backdrop-blur-sm dark:border-white/10 dark:bg-white/5">
+                  <div className="mb-1 flex items-center gap-1.5 text-muted-foreground">
+                    <Icons.Clock3 className="h-3.5 w-3.5" />
+                    <span className="text-[10px] font-medium uppercase tracking-wide">
+                      HD
+                    </span>
+                  </div>
+                  <div className="text-sm font-bold text-foreground">
+                    {asignatura.hd}
+                  </div>
+                </div>
+
+                <div className="rounded-2xl border border-white/40 bg-white/55 px-2.5 py-2 backdrop-blur-sm dark:border-white/10 dark:bg-white/5">
+                  <div className="mb-1 flex items-center gap-1.5 text-muted-foreground">
+                    <Icons.BookOpenText className="h-3.5 w-3.5" />
+                    <span className="text-[10px] font-medium uppercase tracking-wide">
+                      HI
+                    </span>
+                  </div>
+                  <div className="text-sm font-bold text-foreground">
+                    {asignatura.hi}
+                  </div>
+                </div>
+              </div>
+
+              {/* drag affordance */}
+              <div className="pointer-events-none absolute right-3 bottom-3 rounded-full bg-background/70 p-1.5 opacity-0 backdrop-blur-sm transition-all duration-300 group-hover:opacity-100">
+                <Icons.GripVertical className="h-4 w-4 text-muted-foreground/55" />
+              </div>
+            </div>
+          </button>
+        </TooltipTrigger>
+
+        <TooltipContent side="bottom">
+          <div className="text-xs">
+            {lineaNombre ? `${lineaNombre} · ` : ''}
+            {asignatura.nombre}
+          </div>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
  )
 }

@@ -524,15 +704,15 @@ function MapaCurricularPage() {
          </Button>
          {asignaturas.filter((m) => !m.ciclo || !m.lineaCurricularId).length >
            0 && (
-            <Badge className="border-amber-100 bg-amber-50 text-amber-600 hover:bg-amber-50">
-              <AlertTriangle size={14} className="mr-1" />{' '}
-              {
-                asignaturas.filter((m) => !m.ciclo || !m.lineaCurricularId)
-                  .length
-              }{' '}
-              sin asignar
-            </Badge>
-          )}
+              <Badge className="border-amber-100 bg-amber-50 text-amber-600 hover:bg-amber-50">
+                <AlertTriangle size={14} className="mr-1" />{' '}
+                {
+                  asignaturas.filter((m) => !m.ciclo || !m.lineaCurricularId)
+                    .length
+                }{' '}
+                sin asignar
+              </Badge>
+            )}
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button className="bg-teal-700 text-white hover:bg-teal-800">
@@ -618,9 +798,8 @@ function MapaCurricularPage() {
              return (
                <Fragment key={linea.id}>
                  <div
-                    className={`group relative flex items-center justify-between rounded-xl border-l-4 p-4 transition-all ${
-                      lineColors[idx % lineColors.length]
-                    } ${editingLineaId === linea.id ? 'bg-white ring-2 ring-teal-500/20' : ''}`}
+                    className={`group relative flex items-center justify-between rounded-xl border-l-4 p-4 transition-all ${lineColors[idx % lineColors.length]
+                      } ${editingLineaId === linea.id ? 'bg-white ring-2 ring-teal-500/20' : ''}`}
                  >
                    <div className="flex-1 overflow-hidden">
                      <span
@@ -635,11 +814,10 @@ function MapaCurricularPage() {
                            setTempNombreLinea(linea.nombre)
                          }
                        }}
-                        className={`block w-full text-xs font-bold break-words outline-none ${
-                          editingLineaId === linea.id
-                            ? 'cursor-text border-b border-teal-500/50 pb-1'
-                            : 'cursor-pointer'
-                        }`}
+                        className={`block w-full text-xs font-bold break-words outline-none ${editingLineaId === linea.id
+                          ? 'cursor-text border-b border-teal-500/50 pb-1'
+                          : 'cursor-pointer'
+                          }`}
                      >
                        {linea.nombre}
                      </span>
@@ -677,6 +855,8 @@ function MapaCurricularPage() {
                          <AsignaturaCardItem
                            key={m.id}
                            asignatura={m}
+                            lineaColor={linea.color || '#1976d2'}
+                            lineaNombre={linea.nombre}
                            isDragging={draggedAsignatura === m.id}
                            onDragStart={handleDragStart}
                            onClick={() => {
@@ -727,45 +907,81 @@ function MapaCurricularPage() {
      </div>

      {/* Asignaturas Sin Asignar */}
-      <div className="mt-10 rounded-2xl border border-slate-200 bg-slate-50 p-6">
-        <div className="mb-4 flex items-center justify-between">
-          <div className="flex items-center gap-2 text-slate-600">
-            <h3 className="text-sm font-bold tracking-wider uppercase">
-              Bandeja de Entrada / Asignaturas sin asignar
-            </h3>
-            <Badge variant="secondary">{unassignedAsignaturas.length}</Badge>
+      <div className="mt-12 rounded-[28px] border border-border bg-card/80 p-5 shadow-sm backdrop-blur-sm">
+        <div className="mb-5 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+          <div className="min-w-0">
+            <div className="flex items-center gap-2">
+              <div className="flex h-9 w-9 items-center justify-center rounded-2xl bg-muted text-muted-foreground">
+                <Icons.Inbox className="h-4.5 w-4.5" />
+              </div>
+
+              <div className="min-w-0">
+                <div className="flex items-center gap-2">
+                  <h3 className="text-sm font-bold tracking-wide text-foreground uppercase">
+                    Bandeja de entrada
+                  </h3>
+
+                  <div className="inline-flex h-6 min-w-6 items-center justify-center rounded-full bg-muted px-2 text-[11px] font-semibold text-muted-foreground">
+                    {unassignedAsignaturas.length}
+                  </div>
+                </div>
+
+                <p className="mt-0.5 text-sm text-muted-foreground">
+                  Asignaturas sin ciclo o línea curricular
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2 rounded-full border border-dashed border-border bg-background/80 px-3 py-1.5 text-xs text-muted-foreground">
+            <Icons.MoveDown className="h-3.5 w-3.5" />
+            <span>Arrastra aquí para desasignar</span>
          </div>
-          <p className="text-xs text-slate-400">
-            Arrastra una asignatura aquí para quitarla del mapa
-          </p>
        </div>

        <div
-          className={`flex min-h-[120px] flex-wrap gap-4 rounded-xl border-2 border-dashed p-4 transition-colors ${
-            draggedAsignatura
-              ? 'border-teal-300 bg-teal-50/50'
-              : 'border-slate-200 bg-white/50'
-          }`}
          onDragOver={handleDragOver}
-          onDrop={(e) => handleDrop(e, null, null)} // Limpia ciclo y línea
+          onDrop={(e) => handleDrop(e, null, null)}
+          className={[
+            'rounded-[24px] border-2 border-dashed p-4 transition-all duration-300',
+            'min-h-[220px]',
+            draggedAsignatura
+              ? 'border-primary/35 bg-primary/6 shadow-inner'
+              : 'border-border bg-muted/20',
+          ].join(' ')}
        >
-          {unassignedAsignaturas.map((m) => (
-            <div key={m.id} className="w-[200px]">
-              <AsignaturaCardItem
-                asignatura={m}
-                isDragging={draggedAsignatura === m.id}
-                onDragStart={handleDragStart}
-                onClick={() => {
-                  setEditingData(m) // Cargamos los datos en el estado de edición
-                  setIsEditModalOpen(true)
-                }}
-              />
+          {unassignedAsignaturas.length > 0 ? (
+            <div className="flex flex-wrap gap-4">
+              {unassignedAsignaturas.map((m) => (
+                <div key={m.id} className="w-[272px] shrink-0">
+                  <AsignaturaCardItem
+                    asignatura={m}
+                    lineaColor="#94A3B8"
+                    lineaNombre="Sin asignar"
+                    isDragging={draggedAsignatura === m.id}
+                    onDragStart={handleDragStart}
+                    onClick={() => {
+                      setEditingData(m)
+                      setIsEditModalOpen(true)
+                    }}
+                  />
+                </div>
+              ))}
            </div>
-          ))}
-          {unassignedAsignaturas.length === 0 && (
-            <div className="flex w-full items-center justify-center text-sm text-slate-400">
-              No hay asignaturas pendientes. Arrastra una asignatura aquí para
-              desasignarla.
+          ) : (
+            <div className="flex min-h-[188px] flex-col items-center justify-center rounded-[20px] border border-border/70 bg-background/70 px-6 text-center">
+              <div className="mb-3 flex h-12 w-12 items-center justify-center rounded-2xl bg-muted text-muted-foreground">
+                <Icons.CheckCheck className="h-5 w-5" />
+              </div>
+
+              <p className="text-sm font-semibold text-foreground">
+                No hay asignaturas pendientes
+              </p>
+
+              <p className="mt-1 max-w-md text-sm text-muted-foreground">
+                Todo está colocado en el mapa. Arrastra una asignatura aquí para quitarle
+                ciclo y línea curricular.
+              </p>
            </div>
          )}
        </div>
--- a/src/routes/planes/$planId/asignaturas/$asignaturaId/documento.tsx
+++ b/src/routes/planes/$planId/asignaturas/$asignaturaId/documento.tsx
@@ -1,7 +1,8 @@
 import { createFileRoute, useParams } from '@tanstack/react-router'
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'

 import { DocumentoSEPTab } from '@/components/asignaturas/detalle/DocumentoSEPTab'
+import { useSubject } from '@/data'
 import { fetchAsignaturaPdf } from '@/data/api/document.api'

 export const Route = createFileRoute(
@@ -15,48 +16,75 @@ function RouteComponent() {
    from: '/planes/$planId/asignaturas/$asignaturaId/documento',
  })

+  const { data: asignatura } = useSubject(asignaturaId)
+  const asignaturaFileBaseName = sanitizeFileBaseName(
+    asignatura?.nombre ?? 'documento_sep',
+  )
+
  const [pdfUrl, setPdfUrl] = useState<string | null>(null)
+  const pdfUrlRef = useRef<string | null>(null)
+  const isMountedRef = useRef<boolean>(false)
  const [isLoading, setIsLoading] = useState(true)
  const [isRegenerating, setIsRegenerating] = useState(false)

  const loadPdfPreview = useCallback(async () => {
    try {
-      setIsLoading(true)
+      if (isMountedRef.current) setIsLoading(true)

      const pdfBlob = await fetchAsignaturaPdf({
        asignatura_id: asignaturaId,
+        convertTo: 'pdf',
      })

+      if (!isMountedRef.current) return
+
      const url = window.URL.createObjectURL(pdfBlob)

-      setPdfUrl((prev) => {
-        if (prev) window.URL.revokeObjectURL(prev)
-        return url
-      })
+      if (pdfUrlRef.current) window.URL.revokeObjectURL(pdfUrlRef.current)
+      pdfUrlRef.current = url
+      setPdfUrl(url)
    } catch (error) {
      console.error('Error cargando PDF:', error)
    } finally {
-      setIsLoading(false)
+      if (isMountedRef.current) setIsLoading(false)
    }
  }, [asignaturaId])

  useEffect(() => {
+    isMountedRef.current = true
    loadPdfPreview()

    return () => {
-      if (pdfUrl) window.URL.revokeObjectURL(pdfUrl)
+      isMountedRef.current = false
+      if (pdfUrlRef.current) window.URL.revokeObjectURL(pdfUrlRef.current)
    }
  }, [loadPdfPreview])

-  const handleDownload = async () => {
+  const handleDownloadPdf = async () => {
    const pdfBlob = await fetchAsignaturaPdf({
      asignatura_id: asignaturaId,
+      convertTo: 'pdf',
    })

    const url = window.URL.createObjectURL(pdfBlob)
    const link = document.createElement('a')
    link.href = url
-    link.download = 'documento_sep.pdf'
+    link.download = `${asignaturaFileBaseName}.pdf`
+    document.body.appendChild(link)
+    link.click()
+    link.remove()
+    window.URL.revokeObjectURL(url)
+  }
+
+  const handleDownloadWord = async () => {
+    const docBlob = await fetchAsignaturaPdf({
+      asignatura_id: asignaturaId,
+    })
+
+    const url = window.URL.createObjectURL(docBlob)
+    const link = document.createElement('a')
+    link.href = url
+    link.download = `${asignaturaFileBaseName}.docx`
    document.body.appendChild(link)
    link.click()
    link.remove()
@@ -77,9 +105,28 @@ function RouteComponent() {
    <DocumentoSEPTab
      pdfUrl={pdfUrl}
      isLoading={isLoading}
-      onDownload={handleDownload}
+      onDownloadPdf={handleDownloadPdf}
+      onDownloadWord={handleDownloadWord}
      onRegenerate={handleRegenerate}
      isRegenerating={isRegenerating}
    />
  )
 }
+
+function sanitizeFileBaseName(input: string): string {
+  const text = String(input)
+  const withoutControlChars = Array.from(text)
+    .filter((ch) => {
+      const code = ch.charCodeAt(0)
+      return code >= 32 && code !== 127
+    })
+    .join('')
+
+  const cleaned = withoutControlChars
+    .replace(/[<>:"/\\|?*]+/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim()
+    .replace(/[. ]+$/g, '')
+
+  return (cleaned || 'documento').slice(0, 150)
+}
--- a/src/styles.css
+++ b/src/styles.css
@@ -4,18 +4,145 @@

@custom-variant dark (&:is(.dark *));

+@font-face {
+  font-family: 'Indivisa Sans';
+  src: url('/fonts/indivisa/IndivisaTextSans-Light.otf') format('opentype');
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Indivisa Sans';
+  src: url('/fonts/indivisa/IndivisaTextSans-LightItalic.otf')
+    format('opentype');
+  font-weight: 300;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Indivisa Sans';
+  src: url('/fonts/indivisa/IndivisaTextSans-Regular.otf') format('opentype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Indivisa Sans';
+  src: url('/fonts/indivisa/IndivisaTextSans-RegularItalic.otf')
+    format('opentype');
+  font-weight: 400;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Indivisa Sans';
+  src: url('/fonts/indivisa/IndivisaTextSans-Bold.otf') format('opentype');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Indivisa Sans';
+  src: url('/fonts/indivisa/IndivisaTextSans-BoldItalic.otf') format('opentype');
+  font-weight: 700;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Indivisa Sans';
+  src: url('/fonts/indivisa/IndivisaTextSans-Black.otf') format('opentype');
+  font-weight: 900;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Indivisa Sans';
+  src: url('/fonts/indivisa/IndivisaTextSans-BlackItalic.otf')
+    format('opentype');
+  font-weight: 900;
+  font-style: italic;
+}
+
+/* Serif */
+
+@font-face {
+  font-family: 'Indivisa Serif';
+  src: url('/fonts/indivisa/IndivisaTextSerif-Light.otf') format('opentype');
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Indivisa Serif';
+  src: url('/fonts/indivisa/IndivisaTextSerif-LightItalic.otf')
+    format('opentype');
+  font-weight: 300;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Indivisa Serif';
+  src: url('/fonts/indivisa/IndivisaTextSerif-Regular.otf') format('opentype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Indivisa Serif';
+  src: url('/fonts/indivisa/IndivisaTextSerif-RegularItalic.otf')
+    format('opentype');
+  font-weight: 400;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Indivisa Serif';
+  src: url('/fonts/indivisa/IndivisaTextSerif-Bold.otf') format('opentype');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Indivisa Serif';
+  src: url('/fonts/indivisa/IndivisaTextSerif-BoldItalic.otf')
+    format('opentype');
+  font-weight: 700;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Indivisa Serif';
+  src: url('/fonts/indivisa/IndivisaTextSerif-Black.otf') format('opentype');
+  font-weight: 900;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Indivisa Serif';
+  src: url('/fonts/indivisa/IndivisaTextSerif-BlackItalic.otf')
+    format('opentype');
+  font-weight: 900;
+  font-style: italic;
+}
+
 body {
  @apply m-0;
-  font-family:
-    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
-    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }

 code {
-  font-family:
-    source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+  font-family: var(--font-mono);
+}
+
+strong,
+b,
+.font-bold {
+  font-family: 'Indivisa Sans', serif;
+  font-weight: 900;
+  /* Inter letter space */
+  letter-spacing: -0.025em;
 }

 :root {
@@ -51,9 +178,9 @@ code {
  --sidebar-accent-foreground: oklch(0.6304 0.2472 28.2698);
  --sidebar-border: oklch(0.9401 0 0);
  --sidebar-ring: oklch(0 0 0);
-  --font-sans: Plus Jakarta Sans, sans-serif;
-  --font-serif: Lora, serif;
-  --font-mono: IBM Plex Mono, monospace;
+  --font-sans: 'Indivisa Sans', sans-serif;
+  --font-serif: 'Indivisa Serif', serif;
+  --font-mono: 'Indivisa Sans', monospace;
  --radius: 1.4rem;
  --shadow-x: 0px;
  --shadow-y: 2px;
@@ -101,7 +228,7 @@ code {
  --chart-1: oklch(0.6686 0.1794 251.7436);
  --chart-2: oklch(0.6342 0.2516 22.4415);
  --chart-3: oklch(0.8718 0.1716 90.9505);
-  --chart-4: oklch(0.4503 0.229 263.0881);
+  --chart-4: oklch(11.492% 0.00001 271.152);
  --chart-5: oklch(0.8322 0.146 185.9404);
  --sidebar: oklch(0.1564 0.0688 261.2771);
  --sidebar-foreground: oklch(0.9551 0 0);
@@ -111,9 +238,9 @@ code {
  --sidebar-accent-foreground: oklch(0.6786 0.2095 24.6583);
  --sidebar-border: oklch(0.3289 0.0092 268.3843);
  --sidebar-ring: oklch(0.6048 0.2166 257.2136);
-  --font-sans: Plus Jakarta Sans, sans-serif;
-  --font-serif: Lora, serif;
-  --font-mono: IBM Plex Mono, monospace;
+  --font-sans: 'Indivisa Sans', sans-serif;
+  --font-serif: 'Indivisa Serif', serif;
+  --font-mono: 'Indivisa Sans', monospace;
  --radius: 1.4rem;
  --shadow-x: 0px;
  --shadow-y: 2px;
--- a/src/types/supabase.ts
+++ b/src/types/supabase.ts
@@ -154,9 +154,9 @@ export type Database = {
          numero_ciclo: number | null
          orden_celda: number | null
          plan_estudio_id: string
+          prerrequisito_asignatura_id: string | null
          tipo: Database['public']['Enums']['tipo_asignatura']
          tipo_origen: Database['public']['Enums']['tipo_origen'] | null
-          prerrequisito_asignatura_id?: string
        }
        Insert: {
          actualizado_en?: string
@@ -180,6 +180,7 @@ export type Database = {
          numero_ciclo?: number | null
          orden_celda?: number | null
          plan_estudio_id: string
+          prerrequisito_asignatura_id?: string | null
          tipo?: Database['public']['Enums']['tipo_asignatura']
          tipo_origen?: Database['public']['Enums']['tipo_origen'] | null
        }
@@ -205,6 +206,7 @@ export type Database = {
          numero_ciclo?: number | null
          orden_celda?: number | null
          plan_estudio_id?: string
+          prerrequisito_asignatura_id?: string | null
          tipo?: Database['public']['Enums']['tipo_asignatura']
          tipo_origen?: Database['public']['Enums']['tipo_origen'] | null
        }
@@ -258,6 +260,20 @@ export type Database = {
            referencedRelation: 'plantilla_plan'
            referencedColumns: ['plan_estudio_id']
          },
+          {
+            foreignKeyName: 'asignaturas_prerrequisito_asignatura_id_fkey'
+            columns: ['prerrequisito_asignatura_id']
+            isOneToOne: false
+            referencedRelation: 'asignaturas'
+            referencedColumns: ['id']
+          },
+          {
+            foreignKeyName: 'asignaturas_prerrequisito_asignatura_id_fkey'
+            columns: ['prerrequisito_asignatura_id']
+            isOneToOne: false
+            referencedRelation: 'plantilla_asignatura'
+            referencedColumns: ['asignatura_id']
+          },
        ]
      }
      bibliografia_asignatura: {
@@ -1377,6 +1393,7 @@ export type Database = {
        Args: { p_append: Json; p_id: string }
        Returns: undefined
      }
+      suma_porcentajes: { Args: { '': Json }; Returns: number }
      unaccent: { Args: { '': string }; Returns: string }
      unaccent_immutable: { Args: { '': string }; Returns: string }
    }
Author	SHA1	Message	Date
Guillermo Arrieta Medina	ed318fa67b	Funcional pero falta arreglar diseño y responsividad	2026-03-23 13:11:24 -06:00
Guillermo.Arrieta	4c730fa0ab	Merge pull request 'Se renderizan las previsualizaciones del plan y de la asignatura y también se pueden descargar como word o pdf' (#211 ) from issue/200-renderizado-de-plantillas-con-edge-function-de-car into main All checks were successful Deploy to Azure Static Web Apps / build-and-deploy (push) Successful in 1m21s Details Reviewed-on: #211	2026-03-20 23:47:37 +00:00
Guillermo Arrieta Medina	2abe296b9e	close #200 : Se guardan los docx y pdf con el nombre del plan/asignatura	2026-03-20 17:44:36 -06:00
Guillermo Arrieta Medina	1bce226d15	Se descargan correctamente los docx del plan y de la asignatura	2026-03-20 17:31:59 -06:00
Guillermo Arrieta Medina	b986ec343e	Se visualiza y descarga el pdf de la asignatura	2026-03-20 17:31:07 -06:00
Alejandro Rosales	379e2d3826	Actualizar src/routes/planes/$planId/_detalle/mapa.tsx All checks were successful Deploy to Azure Static Web Apps / build-and-deploy (push) Successful in 1m20s Details	2026-03-20 21:30:16 +00:00
Alejandro Rosales	cb5422f57c	Merge pull request 'Refactor AsignaturaCardItem to use Tooltip and improve styling; update color mapping for lineas' (#208 ) from mejorar-diseño-de-tarjetas into main All checks were successful Deploy to Azure Static Web Apps / build-and-deploy (push) Successful in 1m27s Details Reviewed-on: #208	2026-03-20 21:17:37 +00:00
Your Name	67724181fd	Refactor AsignaturaCardItem to use Tooltip and improve styling; update color mapping for lineas	2026-03-20 15:17:17 -06:00
Guillermo Arrieta Medina	d9a5cec3c5	En el body se manda el parámetro para convertir el documento a pdf	2026-03-20 13:22:23 -06:00
Guillermo Arrieta Medina	96848e1793	Se utiliza la edge function de carbone para obtener el pdf del anexo del plan de estudios a partir del id del plan	2026-03-20 12:24:17 -06:00
Alejandro Rosales	cbaf96c6b5	Merge pull request 'Add letter-spacing to font-bold class in styles.css' (#206 ) from agregar-tipografía into main All checks were successful Deploy to Azure Static Web Apps / build-and-deploy (push) Successful in 1m13s Details Reviewed-on: #206	2026-03-20 17:37:05 +00:00
Alejandro Rosales	0fb831fb58	Merge branch 'main' into agregar-tipografía	2026-03-20 17:36:58 +00:00
Alejandro Rosales	0d1aa61022	Add letter-spacing to font-bold class in styles.css	2026-03-20 11:35:51 -06:00
Alejandro Rosales	84281a88f2	Merge pull request 'Add Indivisa font family and update styles.css' (#205 ) from agregar-tipografía into main All checks were successful Deploy to Azure Static Web Apps / build-and-deploy (push) Successful in 1m30s Details Reviewed-on: #205	2026-03-20 17:33:03 +00:00
Alejandro Rosales	d91018c612	Add Indivisa font family and update styles.css	2026-03-20 11:30:39 -06:00