Merge branch 'issue/195-actualizar-esta-seccin-de-seriacin' into issue/197-que-el-contenido-temtico-se-muestre-en-el-historia

Reviewed-on: #215

src/components/asignaturas/detalle/AsignaturaDetailPage.tsx

@@ -23,6 +23,7 @@ import {
 } from '@/components/ui/tooltip'
 import { usePlanAsignaturas } from '@/data'
 import { useSubject, useUpdateAsignatura } from '@/data/hooks/useSubjects'
+import { columnParsers } from '@/lib/asignaturaColumnParsers'
 
 export interface BibliografiaEntry {
   id: string
@@ -46,6 +47,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
@@ -841,80 +846,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,
-}

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" />

src/components/asignaturas/detalle/IAAsignaturaTab.tsx

@@ -20,12 +20,15 @@ import { useState, useEffect, useRef, useMemo } from 'react'
 
 import { ImprovementCard } from './SaveAsignatura/ImprovementCardProps'
 
-import type { IASugerencia } from '@/types/asignatura'
-
 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 {
+  Drawer,
+  DrawerContent,
+  DrawerOverlay,
+  DrawerPortal,
+} from '@/components/ui/drawer'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Textarea } from '@/components/ui/textarea'
 import {
@@ -50,16 +53,7 @@ interface SelectedField {
   value: string
 }
 
-interface IAAsignaturaTabProps {
+export function IAAsignaturaTab() {
-  asignatura?: Record<string, any>
-  onAcceptSuggestion: (sugerencia: IASugerencia) => void
-  onRejectSuggestion: (messageId: string) => void
-}
-
-export function IAAsignaturaTab({
-  onAcceptSuggestion,
-  onRejectSuggestion,
-}: IAAsignaturaTabProps) {
   const queryClient = useQueryClient()
   const { asignaturaId } = useParams({
     from: '/planes/$planId/asignaturas/$asignaturaId',
@@ -75,6 +69,7 @@ export function IAAsignaturaTab({
   const [showSuggestions, setShowSuggestions] = useState(false)
   const [isSending, setIsSending] = useState(false)
   const scrollRef = useRef<HTMLDivElement>(null)
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false)
 
   // --- DATA QUERIES ---
   const { data: datosGenerales } = useSubject(asignaturaId)
@@ -141,7 +136,7 @@ export function IAAsignaturaTab({
     const dynamicFields = datosGenerales?.datos
       ? Object.keys(datosGenerales.datos).map((key) => {
           const estructuraProps =
-            datosGenerales?.estructuras_asignatura?.definicion?.properties || {}
+            datosGenerales.estructuras_asignatura?.definicion?.properties || {}
           return {
             key,
             label:
@@ -355,10 +350,35 @@ export function IAAsignaturaTab({
   ]
 
   return (
-    <div className="flex h-[calc(100vh-160px)] w-full gap-6 overflow-hidden p-4">
+    <div className="flex h-full w-full overflow-hidden bg-white">
-      {/* PANEL IZQUIERDO */}
+      <div className="fixed top-0 z-40 flex w-full items-center justify-between border-b bg-white/80 p-2 backdrop-blur-md">
-      <div className="flex w-64 flex-col border-r pr-4">
+        <Button
-        <div className="mb-4 flex items-center justify-between px-2">
+          variant="ghost"
+          size="sm"
+          className="text-slate-600"
+          onClick={() => setIsSidebarOpen(true)}
+        >
+          <History size={18} className="mr-2" /> Historial
+        </Button>
+
+        <div className="flex flex-col items-center">
+          <span className="text-[9px] font-bold tracking-wider text-teal-600 uppercase">
+            Asistente
+          </span>
+        </div>
+
+        <Button
+          variant="ghost"
+          size="sm"
+          className="text-slate-600"
+          onClick={() => setOpenIA(true)} // O el drawer de acciones/referencias
+        >
+          <FileText size={18} className="mr-2 text-teal-600" /> Referencias
+        </Button>
+      </div>
+      {/* 1. PANEL IZQUIERDO (HISTORIAL) - Desktop */}
+      <aside className="hidden h-full w-64 shrink-0 flex-col border-r bg-white pr-4 md:flex">
+        <div className="mb-4 flex items-center justify-between px-2 pt-4">
           <h2 className="flex items-center gap-2 text-xs font-bold text-slate-500 uppercase">
             <History size={14} /> Historial
           </h2>
@@ -378,25 +398,19 @@ export function IAAsignaturaTab({
         <Button
           onClick={() => {
             setActiveChatId(undefined)
-            hasInitialSelected.current = true
             setIsCreatingNewChat(true)
             setInput('')
             setSelectedFields([])
-
-            // 4. Opcional: Limpiar el caché de mensajes actual para que la pantalla se vea vacía al instante
             queryClient.setQueryData(['subject-messages', undefined], [])
           }}
           variant="outline"
-          className="mb-4 w-full justify-start gap-2 border-dashed border-slate-300 hover:border-teal-500"
+          className="mb-4 w-full justify-start gap-2 border-dashed border-slate-300 text-slate-600 hover:border-teal-500 hover:bg-teal-50/50"
         >
           <MessageSquarePlus size={18} /> Nuevo Chat
         </Button>
 
-        {/* PANEL IZQUIERDO - Cambios en ScrollArea y contenedor */}
         <ScrollArea className="flex-1">
           <div className="flex flex-col gap-1 pr-3">
-            {' '}
-            {/* Eliminado space-y-1 para mejor control con gap */}
             {(showArchived ? archivedChats : activeChats).map((chat: any) => (
               <div
                 key={chat.id}
@@ -507,31 +521,51 @@ export function IAAsignaturaTab({
             ))}
           </div>
         </ScrollArea>
-      </div>
+      </aside>
 
-      {/* PANEL CENTRAL */}
+      {/* 2. PANEL CENTRAL (CHAT) - EL RECUADRO ESTILIZADO */}
-      <div className="relative flex min-w-0 flex-[3] flex-col overflow-hidden rounded-xl border border-slate-200 bg-slate-50/50 shadow-sm">
+      <main className="relative flex min-w-0 flex-1 flex-col overflow-hidden rounded-xl border border-slate-200 bg-slate-50/50 shadow-sm md:m-2">
+        {/* Header Interno del Recuadro */}
         <div className="flex shrink-0 items-center justify-between border-b bg-white p-3">
-          <span className="text-[10px] font-bold tracking-wider text-slate-400 uppercase">
+          <div className="flex items-center gap-2">
-            Asistente IA
+            <Button
-          </span>
+              variant="ghost"
-          <button
+              size="icon"
-            onClick={() => setOpenIA(true)}
+              className="md:hidden"
-            className="flex items-center gap-2 rounded-md bg-slate-100 px-3 py-1.5 text-xs font-medium transition hover:bg-slate-200"
+              onClick={() => setIsSidebarOpen(true)}
-          >
+            >
-            <FileText size={14} className="text-slate-500" />
+              <History size={20} className="text-slate-500" />
-            Referencias
+            </Button>
-            {totalReferencias > 0 && (
+            <div className="flex flex-col">
-              <span className="animate-in zoom-in flex h-4 min-w-[16px] items-center justify-center rounded-full bg-teal-600 px-1 text-[10px] text-white">
+              <span className="text-[10px] font-bold tracking-wider text-teal-600 uppercase">
-                {totalReferencias}
+                Asistente Académico
               </span>
-            )}
+              <span className="text-[11px] text-slate-400">
-          </button>
+                Personalizado para tu asignatura
+              </span>
+            </div>
+          </div>
+
+          <div className="flex gap-2">
+            <button
+              onClick={() => setOpenIA(true)}
+              className="flex items-center gap-2 rounded-lg bg-slate-100 px-3 py-1.5 text-xs font-medium text-slate-600 transition-colors hover:bg-slate-200"
+            >
+              <FileText size={14} />
+              <span className="xs:inline hidden">Referencias</span>
+              {totalReferencias > 0 && (
+                <span className="flex h-4 min-w-[16px] items-center justify-center rounded-full bg-teal-600 px-1 text-[10px] text-white">
+                  {totalReferencias}
+                </span>
+              )}
+            </button>
+          </div>
         </div>
 
+        {/* Área de Mensajes */}
         <div className="relative min-h-0 flex-1">
           <ScrollArea ref={scrollRef} className="h-full w-full">
-            <div className="mx-auto max-w-3xl space-y-8 p-6">
+            <div className="mx-auto max-w-3xl space-y-6 p-3 md:p-6">
               {messages.map((msg) => (
                 <div
                   key={msg.id}
@@ -642,120 +676,126 @@ export function IAAsignaturaTab({
           </ScrollArea>
         </div>
 
-        {/* INPUT */}
+        {/* Input de Chat */}
-        <div className="shrink-0 border-t bg-white p-4">
+        <footer className="shrink-0 border-t bg-white p-3 md:p-4">
-          <div className="relative mx-auto max-w-4xl">
+          <div className="shrink-0 border-t bg-white p-2 md:p-4">
-            {showSuggestions && (
+            <div className="relative mx-auto max-w-4xl">
-              <div className="animate-in fade-in slide-in-from-bottom-2 absolute bottom-full left-0 z-50 mb-2 w-72 overflow-hidden rounded-xl border bg-white shadow-2xl">
+              {showSuggestions && (
-                <div className="flex justify-between border-b bg-slate-50 px-3 py-2 text-[10px] font-bold text-slate-500 uppercase">
+                <div className="animate-in fade-in slide-in-from-bottom-2 absolute bottom-full left-0 z-50 mb-2 w-72 overflow-hidden rounded-xl border bg-white shadow-2xl">
-                  <span>Filtrando campos...</span>
+                  <div className="flex justify-between border-b bg-slate-50 px-3 py-2 text-[10px] font-bold text-slate-500 uppercase">
-                  <span className="rounded bg-slate-200 px-1 text-[9px] text-slate-400">
+                    <span>Filtrando campos...</span>
-                    ESC para cerrar
+                    <span className="rounded bg-slate-200 px-1 text-[9px] text-slate-400">
-                  </span>
+                      ESC para cerrar
-                </div>
+                    </span>
-                <div className="max-h-60 overflow-y-auto p-1">
+                  </div>
-                  {filteredFields.length > 0 ? (
+                  <div className="max-h-60 overflow-y-auto p-1">
-                    filteredFields.map((field) => (
+                    {filteredFields.length > 0 ? (
-                      <button
+                      filteredFields.map((field) => (
-                        key={field.key}
+                        <button
-                        onClick={() => handleSelectField(field)}
+                          key={field.key}
-                        className="flex w-full items-center justify-between rounded-lg px-3 py-2 text-left text-sm transition-colors hover:bg-teal-50"
+                          onClick={() => handleSelectField(field)}
-                      >
+                          className="flex w-full items-center justify-between rounded-lg px-3 py-2 text-left text-sm transition-colors hover:bg-teal-50"
-                        <div className="flex flex-col">
+                        >
-                          <span className="font-medium text-slate-700">
+                          <div className="flex flex-col">
-                            {field.label}
+                            <span className="font-medium text-slate-700">
-                          </span>
+                              {field.label}
-                        </div>
+                            </span>
-                        {selectedFields.find((f) => f.key === field.key) && (
+                          </div>
-                          <Check size={14} className="text-teal-600" />
+                          {selectedFields.find((f) => f.key === field.key) && (
-                        )}
+                            <Check size={14} className="text-teal-600" />
-                      </button>
+                          )}
-                    ))
+                        </button>
-                  ) : (
+                      ))
-                    <div className="p-4 text-center text-xs text-slate-400 italic">
+                    ) : (
-                      No se encontraron coincidencias
+                      <div className="p-4 text-center text-xs text-slate-400 italic">
-                    </div>
+                        No se encontraron coincidencias
-                  )}
+                      </div>
-                </div>
+                    )}
-              </div>
+                  </div>
-            )}
-
-            <div className="flex flex-col gap-2 rounded-xl border bg-slate-50 p-2 transition-all focus-within:bg-white focus-within:ring-1 focus-within:ring-teal-500">
-              {selectedFields.length > 0 && (
-                <div className="flex flex-wrap gap-1.5 px-2 pt-1">
-                  {selectedFields.map((field) => (
-                    <div
-                      key={field.key}
-                      className="animate-in zoom-in-95 flex items-center gap-1 rounded-md border border-teal-200 bg-teal-50 px-2 py-0.5 text-[11px] font-bold text-teal-700 shadow-sm"
-                    >
-                      <Target size={10} />
-                      {field.label}
-                      <button
-                        onClick={() => toggleField(field)}
-                        className="ml-1 rounded-full p-0.5 transition-colors hover:bg-teal-200/50"
-                      >
-                        <X size={10} />
-                      </button>
-                    </div>
-                  ))}
                 </div>
               )}
 
-              <div className="flex items-end gap-2">
+              <div className="flex flex-col gap-2 rounded-xl border bg-slate-50 p-2 transition-all focus-within:bg-white focus-within:ring-1 focus-within:ring-teal-500">
-                <Textarea
+                {selectedFields.length > 0 && (
-                  value={input}
+                  <div className="flex flex-wrap gap-1.5 px-2 pt-1">
-                  onChange={(e) => {
+                    {selectedFields.map((field) => (
-                    setInput(e.target.value)
+                      <div
-                    if (e.target.value.endsWith(':')) setShowSuggestions(true)
+                        key={field.key}
-                    else if (showSuggestions && !e.target.value.includes(':'))
+                        className="animate-in zoom-in-95 flex items-center gap-1 rounded-md border border-teal-200 bg-teal-50 px-2 py-0.5 text-[11px] font-bold text-teal-700 shadow-sm"
-                      setShowSuggestions(false)
+                      >
-                  }}
+                        <Target size={10} />
-                  onKeyDown={(e) => {
+                        {field.label}
-                    if (e.key === 'Enter' && !e.shiftKey) {
+                        <button
-                      e.preventDefault()
+                          onClick={() => toggleField(field)}
-                      handleSend()
+                          className="ml-1 rounded-full p-0.5 transition-colors hover:bg-teal-200/50"
+                        >
+                          <X size={10} />
+                        </button>
+                      </div>
+                    ))}
+                  </div>
+                )}
+
+                <div className="flex items-end gap-2">
+                  <Textarea
+                    value={input}
+                    onChange={(e) => {
+                      setInput(e.target.value)
+                      if (e.target.value.endsWith(':')) setShowSuggestions(true)
+                      else if (showSuggestions && !e.target.value.includes(':'))
+                        setShowSuggestions(false)
+                    }}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' && !e.shiftKey) {
+                        e.preventDefault()
+                        handleSend()
+                      }
+                    }}
+                    placeholder='Escribe ":" para referenciar un campo...'
+                    className="max-h-[120px] min-h-[40px] flex-1 resize-none border-none bg-transparent text-sm shadow-none focus-visible:ring-0"
+                  />
+                  <Button
+                    onClick={() => handleSend()}
+                    disabled={
+                      (!input.trim() && selectedFields.length === 0) ||
+                      isSending
                     }
-                  }}
+                    size="icon"
-                  placeholder='Escribe ":" para referenciar un campo...'
+                    className="h-9 w-9 bg-teal-600 hover:bg-teal-700"
-                  className="max-h-[120px] min-h-[40px] flex-1 resize-none border-none bg-transparent text-sm shadow-none focus-visible:ring-0"
+                  >
-                />
+                    <Send size={16} className="text-white" />
-                <Button
+                  </Button>
-                  onClick={() => handleSend()}
+                </div>
-                  disabled={
-                    (!input.trim() && selectedFields.length === 0) || isSending
-                  }
-                  size="icon"
-                  className="h-9 w-9 bg-teal-600 hover:bg-teal-700"
-                >
-                  <Send size={16} className="text-white" />
-                </Button>
               </div>
             </div>
           </div>
-        </div>
+        </footer>
-      </div>
+      </main>
 
-      {/* PANEL DERECHO ACCIONES */}
+      {/* 3. PANEL DERECHO (ATAJOS) */}
-      <div className="flex flex-[1] flex-col gap-4 overflow-y-auto pr-2">
+      <aside className="hidden w-64 shrink-0 flex-col gap-4 overflow-y-auto p-4 lg:flex">
         <h4 className="flex items-center gap-2 text-sm font-bold text-slate-800">
-          <Lightbulb size={18} className="text-orange-500" /> Atajos
+          <Lightbulb size={18} className="text-orange-500" /> Atajos Rápidos
         </h4>
         <div className="space-y-2">
           {PRESETS.map((preset) => (
             <button
               key={preset.id}
               onClick={() => handleSend(preset.prompt)}
-              className="group flex w-full items-center gap-3 rounded-xl border bg-white p-3 text-left text-sm transition-all hover:border-teal-500 hover:bg-teal-50"
+              className="group flex w-full items-center gap-3 rounded-xl border border-slate-100 bg-white p-3 text-left text-sm transition-all hover:border-teal-500 hover:shadow-sm"
             >
-              <div className="rounded-lg bg-slate-100 p-2 group-hover:bg-teal-100 group-hover:text-teal-600">
+              <div className="rounded-lg bg-slate-50 p-2 group-hover:bg-teal-50 group-hover:text-teal-600">
                 <preset.icon size={16} />
               </div>
-              <span className="font-medium text-slate-700">{preset.label}</span>
+              <span className="font-medium text-slate-600 group-hover:text-slate-900">
+                {preset.label}
+              </span>
             </button>
           ))}
         </div>
-      </div>
+      </aside>
-      {/* --- DRAWER DE REFERENCIAS --- */}
+
+      {/* DRAWERS (Referencias e Historial Móvil) */}
       <Drawer open={openIA} onOpenChange={setOpenIA}>
         <DrawerContent className="fixed inset-x-0 bottom-0 mx-auto mb-4 flex h-[80vh] w-full max-w-2xl flex-col overflow-hidden rounded-2xl border bg-white shadow-2xl">
           <div className="flex items-center justify-between border-b bg-slate-50/50 px-4 py-3">
@@ -790,6 +830,140 @@ export function IAAsignaturaTab({
           </div>
         </DrawerContent>
       </Drawer>
+
+      <Drawer open={isSidebarOpen} onOpenChange={setIsSidebarOpen}>
+        <DrawerPortal>
+          <DrawerOverlay className="fixed inset-0 bg-black/40" />
+          <DrawerContent className="fixed right-0 bottom-0 left-0 h-[70vh] p-4 outline-none">
+            <div className="flex h-full flex-col overflow-hidden">
+              {/* Reutiliza aquí el componente de la lista de chats */}
+              <Button
+                onClick={() => {
+                  setActiveChatId(undefined)
+                  setIsCreatingNewChat(true)
+                  setInput('')
+                  setSelectedFields([])
+                  queryClient.setQueryData(['subject-messages', undefined], [])
+                  setIsSidebarOpen(false) // Cierra el drawer al crear nuevo
+                }}
+                variant="outline"
+                className="mb-6 w-full justify-center gap-2 border-dashed border-teal-500 bg-teal-50/50 text-teal-700 hover:bg-teal-100"
+              >
+                <MessageSquarePlus size={18} /> Nuevo Chat
+              </Button>
+              <h2 className="mb-4 font-bold">Historial de Chats</h2>
+              {(showArchived ? archivedChats : activeChats).map((chat: any) => (
+                <div
+                  key={chat.id}
+                  className={cn(
+                    // 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')
+                  }}
+                >
+                  {editingId === chat.id ? (
+                    <div className="flex min-w-0 flex-1 items-center">
+                      <input
+                        autoFocus
+                        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)}
+                        onKeyDown={(e) => {
+                          if (e.key === 'Enter') handleSaveName(chat.id)
+                          if (e.key === 'Escape') setEditingId(null)
+                        }}
+                      />
+                    </div>
+                  ) : (
+                    <>
+                      {/* CLAVE 2: 'truncate' y 'min-w-0' en el span para que ceda ante los botones */}
+                      <span
+                        onClick={() => setActiveChatId(chat.id)}
+                        className="block max-w-[140px] min-w-0 flex-1 cursor-pointer truncate pr-1"
+                        title={chat.nombre || chat.titulo}
+                      >
+                        {chat.nombre || chat.titulo || 'Conversación'}
+                      </span>
+
+                      {/* CLAVE 3: 'shrink-0' asegura que los botones NUNCA desaparezcan */}
+                      <div
+                        className={cn(
+                          'z-10 flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100',
+                          activeChatId === chat.id
+                            ? 'bg-teal-50'
+                            : 'bg-slate-100',
+                        )}
+                      >
+                        <TooltipProvider delayDuration={300}>
+                          <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>
+
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <button
+                                onClick={(e) => {
+                                  e.stopPropagation()
+                                  const nuevoEstado =
+                                    chat.estado === 'ACTIVA'
+                                      ? 'ARCHIVADA'
+                                      : 'ACTIVA'
+                                  updateStatus({
+                                    id: chat.id,
+                                    estado: nuevoEstado,
+                                  })
+                                }}
+                                className={cn(
+                                  'rounded-md p-1 transition-colors hover:bg-slate-200',
+                                  chat.estado === 'ACTIVA'
+                                    ? 'hover:text-red-500'
+                                    : 'hover:text-teal-600',
+                                )}
+                              >
+                                {chat.estado === 'ACTIVA' ? (
+                                  <Archive size={14} />
+                                ) : (
+                                  <History size={14} className="scale-x-[-1]" />
+                                )}
+                              </button>
+                            </TooltipTrigger>
+                            <TooltipContent side="top" className="text-[10px]">
+                              {chat.estado === 'ACTIVA'
+                                ? 'Archivar'
+                                : 'Desarchivar'}
+                            </TooltipContent>
+                          </Tooltip>
+                        </TooltipProvider>
+                      </div>
+                    </>
+                  )}
+                </div>
+              ))}
+            </div>
+          </DrawerContent>
+        </DrawerPortal>
+      </Drawer>
     </div>
   )
 }

src/data/api/document.api.ts

@@ -1,52 +1,86 @@
 // document.api.ts
 
-const DOCUMENT_PDF_URL =
+import { supabaseBrowser } from '../supabase/client'
-  'https://n8n.app.lci.ulsa.mx/webhook/62ca84ec-0adb-4006-aba1-32282d27d434'
+import { invokeEdge } from '../supabase/invokeEdge'
 
-const DOCUMENT_PDF_ASIGNATURA_URL =
+import { requireData, throwIfError } from './_helpers'
-  'https://n8n.app.lci.ulsa.mx/webhook/041a68be-7568-46d0-bc08-09ded12d017d'
+
+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, {
+  return await invokeEdge<Blob>(
-    method: 'POST',
+    EDGE.carbone_io_wrapper,
-    headers: {
+    {
-      'Content-Type': 'application/json',
+      action: 'downloadReport',
+      plan_estudio_id,
+      body: convertTo ? { convertTo } : {},
     },
-    body: JSON.stringify({ plan_estudio_id }),
+    {
-  })
+      headers: {
-
+        'Content-Type': 'application/json',
-  if (!response.ok) {
+      },
-    throw new Error('Error al generar el PDF')
+      responseType: 'blob',
-  }
+    },
-
+  )
-  // n8n devuelve el archivo → lo tratamos como blob
-  return await response.blob()
 }
 
 export async function fetchAsignaturaPdf({
   asignatura_id,
+  convertTo,
 }: GeneratePdfParamsAsignatura): Promise<Blob> {
-  const response = await fetch(DOCUMENT_PDF_ASIGNATURA_URL, {
+  const supabase = supabaseBrowser()
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify({ asignatura_id }),
-  })
 
-  if (!response.ok) {
+  const { data, error } = await supabase
-    throw new Error('Error al generar el PDF')
+    .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 invokeEdge<Blob>(
-  return await response.blob()
+    EDGE.carbone_io_wrapper,
+    {
+      action: 'downloadReport',
+      asignatura_id,
+      body: {
+        ...body,
+      },
+    },
+    {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      responseType: 'blob',
+    },
+  )
 }

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
 }

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,
+}

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)
+      if (isMountedRef.current) setIsLoading(true)
-      const pdfBlob = await fetchPlanPdf({ plan_estudio_id: planId })
+      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 (pdfUrlRef.current) window.URL.revokeObjectURL(pdfUrlRef.current)
-      if (pdfUrl) window.URL.revokeObjectURL(pdfUrl)
+      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,

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

@@ -139,6 +139,10 @@ function RouteComponent() {
     null,
   )
   const [filterQuery, setFilterQuery] = useState('')
+
+  const [isHistoryOpen, setIsHistoryOpen] = useState(false)
+  const [isActionsOpen, setIsActionsOpen] = useState(false)
+
   const availableFields = useMemo(() => {
     const definicion = data?.estructuras_plan
       ?.definicion as EstructuraDefinicion
@@ -206,7 +210,7 @@ function RouteComponent() {
       return messages
     })
   }, [mensajesDelChat, activeChatId, availableFields])
-  const scrollToBottom = (behavior = 'smooth') => {
+  const scrollToBottom = (behavior: ScrollBehavior = 'smooth') => {
     if (scrollRef.current) {
       const scrollContainer = scrollRef.current.querySelector(
         '[data-radix-scroll-area-viewport]',
@@ -214,7 +218,7 @@ function RouteComponent() {
       if (scrollContainer) {
         scrollContainer.scrollTo({
           top: scrollContainer.scrollHeight,
-          behavior: behavior, // 'instant' para carga inicial, 'smooth' para mensajes nuevos
+          behavior,
         })
       }
     }
@@ -478,37 +482,38 @@ function RouteComponent() {
   }
 
   return (
-    <div className="flex h-[calc(100vh-160px)] max-h-[calc(100vh-160px)] w-full gap-6 overflow-hidden p-4">
+    <div className="flex h-[calc(100vh-160px)] max-h-[calc(100vh-160px)] w-full flex-col gap-6 overflow-hidden p-4 md:flex-row">
-      {/* --- PANEL IZQUIERDO: HISTORIAL --- */}
+      {/* --- HEADER MÓVIL (Solo visible en < md) --- */}
-      <div className="flex w-64 flex-col border-r pr-4">
+      <div className="flex items-center justify-between rounded-lg border bg-white p-2 md:hidden">
-        <div className="mb-4">
+        <Button
-          <div className="mb-4 flex items-center justify-between px-2">
+          variant="ghost"
-            <h2 className="text-xs font-bold tracking-wider text-slate-500 uppercase">
+          size="sm"
-              Chats
+          onClick={() => setIsHistoryOpen(true)}
-            </h2>
+        >
-            {/* Botón de toggle archivados movido aquí arriba */}
+          <Archive size={18} className="mr-2" /> Historial
-            <button
+        </Button>
-              onClick={() => setShowArchived(!showArchived)}
+        <Button
-              className={`rounded-md p-1.5 transition-colors ${
+          variant="ghost"
-                showArchived
+          size="sm"
-                  ? 'bg-teal-50 text-teal-600'
+          onClick={() => setIsActionsOpen(true)}
-                  : 'text-slate-400 hover:bg-slate-100'
+        >
-              }`}
+          <Lightbulb size={18} className="mr-2 text-orange-500" /> Acciones
-              title={showArchived ? 'Ver chats activos' : 'Ver archivados'}
+        </Button>
-            >
+      </div>
-              <Archive size={16} />
-            </button>
-          </div>
-
-          <Button
-            onClick={createNewChat}
-            variant="outline"
-            className="mb-4 w-full justify-start gap-2 border-slate-200 hover:bg-teal-50 hover:text-teal-700"
-          >
-            <MessageSquarePlus size={18} /> Nuevo chat
-          </Button>
-        </div>
 
+      {/* --- PANEL IZQUIERDO: HISTORIAL (Escritorio) --- */}
+      <div className="hidden w-64 flex-col border-r pr-4 md:flex">
+        {/* ... (Tu código actual del historial de chats) ... */}
+        <h2 className="text-xs font-bold tracking-wider text-slate-500 uppercase">
+          Chats
+        </h2>
+        <Button
+          onClick={createNewChat}
+          variant="outline"
+          className="mt-2 mb-4 w-full justify-start gap-2"
+        >
+          <MessageSquarePlus size={18} /> Nuevo chat
+        </Button>
         <ScrollArea className="flex-1">
           <div className="space-y-1 pr-2">
             {' '}
@@ -571,7 +576,7 @@ function RouteComponent() {
                               onBlur={(e) => {
                                 if (editingChatId === chat.id) {
                                   const newTitle =
-                                    e.currentTarget.textContent?.trim() || ''
+                                    e.currentTarget.textContent.trim() || ''
                                   if (newTitle && newTitle !== chat.nombre) {
                                     updateTitleMutation({
                                       id: chat.id,
@@ -655,8 +660,9 @@ function RouteComponent() {
           </div>
         </ScrollArea>
       </div>
-      {/* PANEL DE CHAT PRINCIPAL */}
+
-      <div className="relative flex min-w-0 flex-[3] flex-col overflow-hidden rounded-xl border border-slate-200 bg-slate-50/50 shadow-sm">
+      {/* --- PANEL DE CHAT PRINCIPAL (Centro) --- */}
+      <div className="relative flex min-w-0 flex-1 flex-col overflow-hidden rounded-xl border border-slate-200 bg-slate-50/50 shadow-sm md:flex-[3]">
         {/* NUEVO: Barra superior de campos seleccionados */}
         <div className="shrink-0 border-b bg-white p-3">
           <div className="flex items-center justify-between">
@@ -931,8 +937,9 @@ function RouteComponent() {
           </div>
         </div>
       </div>
-      {/* PANEL LATERAL */}
+
-      <div className="flex flex-[1] flex-col gap-4 overflow-y-auto pr-2">
+      {/* --- PANEL LATERAL: ACCIONES RÁPIDAS (Escritorio) --- */}
+      <div className="hidden flex-[1] flex-col gap-4 overflow-y-auto pr-2 md:flex">
         <h4 className="flex items-center gap-2 text-left text-sm font-bold text-slate-800">
           <Lightbulb size={18} className="text-orange-500" /> Acciones rápidas
         </h4>
@@ -953,6 +960,65 @@ function RouteComponent() {
           ))}
         </div>
       </div>
+
+      {/* --- DRAWER: HISTORIAL (Móvil) --- */}
+      <Drawer open={isHistoryOpen} onOpenChange={setIsHistoryOpen}>
+        <DrawerContent className="h-[80vh] p-4">
+          <Button
+            onClick={() => {
+              createNewChat()
+              setIsHistoryOpen(false)
+            }}
+            className="mb-4 w-full bg-teal-600 text-white"
+          >
+            <MessageSquarePlus size={18} className="mr-2" /> Nuevo Chat
+          </Button>
+          <ScrollArea className="flex-1">
+            {/* Reutiliza aquí el mapeo de chats que tienes en el panel izquierdo */}
+            <p className="mb-4 text-xs font-bold text-slate-400 uppercase">
+              Historial Reciente
+            </p>
+            {activeChats.map((chat) => (
+              <div
+                key={chat.id}
+                onClick={() => {
+                  setActiveChatId(chat.id)
+                  setIsHistoryOpen(false)
+                }}
+                className="border-b p-3 text-sm"
+              >
+                {chat.nombre || 'Chat sin nombre'}
+              </div>
+            ))}
+          </ScrollArea>
+        </DrawerContent>
+      </Drawer>
+
+      {/* --- DRAWER: ACCIONES RÁPIDAS (Móvil) --- */}
+      <Drawer open={isActionsOpen} onOpenChange={setIsActionsOpen}>
+        <DrawerContent className="h-[60vh] p-4">
+          <h4 className="mb-4 flex items-center gap-2 font-bold">
+            <Lightbulb size={18} className="text-orange-500" /> Acciones rápidas
+          </h4>
+          <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
+            {PRESETS.map((preset) => (
+              <button
+                key={preset.id}
+                onClick={() => {
+                  handleSend(preset.prompt)
+                  setIsActionsOpen(false)
+                }}
+                className="flex items-center gap-3 rounded-xl border p-4 text-left text-sm"
+              >
+                <preset.icon size={16} />
+                <span>{preset.label}</span>
+              </button>
+            ))}
+          </div>
+        </DrawerContent>
+      </Drawer>
+
+      {/* Tu Drawer de Referencias IA se queda igual */}
       <Drawer open={openIA} onOpenChange={setOpenIA}>
         <DrawerContent className="fixed inset-x-0 bottom-0 mx-auto mb-4 flex h-[80vh] w-full max-w-2xl flex-col overflow-hidden rounded-2xl border bg-white shadow-2xl">
           {/* Cabecera más compacta */}

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
+    <TooltipProvider delayDuration={150}>
-      draggable
+      <Tooltip>
-      onDragStart={(e) => onDragStart(e, asignatura.id)}
+        <TooltipTrigger asChild>
-      onClick={onClick}
+          <button
-      className={`group cursor-grab rounded-lg border bg-white p-3 shadow-sm transition-all active:cursor-grabbing ${
+            draggable
-        isDragging
+            onDragStart={(e) => onDragStart(e, asignatura.id)}
-          ? 'scale-95 opacity-40'
+            onClick={onClick}
-          : 'hover:border-teal-400 hover:shadow-md'
+            className={[
-      }`}
+              'group relative h-[200px] w-[272px] shrink-0 overflow-hidden rounded-[22px] border text-left',
-    >
+              'transition-all duration-300 ease-out',
-      <div className="mb-1 flex items-start justify-between">
+              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30',
-        <span className="font-mono text-[10px] font-bold text-slate-400">
+              'active:cursor-grabbing cursor-grab',
-          {asignatura.clave}
+              isDragging
-        </span>
+                ? 'scale-[0.985] opacity-45 shadow-none'
-        <Badge
+                : 'hover:-translate-y-1 hover:shadow-lg',
-          variant="outline"
+            ].join(' ')}
-          className={`px-1 py-0 text-[9px] uppercase ${statusBadge[asignatura.estado] || ''}`}
+            style={{
-        >
+              borderColor: hexToRgba(lineaColor, 0.18),
-          {asignatura.estado}
+              background: `
-        </Badge>
+                radial-gradient(circle at top right, ${hexToRgba(lineaColor, 0.22)} 0%, transparent 34%),
-      </div>
+                linear-gradient(180deg, ${hexToRgba(lineaColor, 0.12)} 0%, ${hexToRgba(lineaColor, 0.04)} 42%, var(--card) 100%)
-      <p className="mb-1 text-xs leading-tight font-bold text-slate-700">
+              `,
-        {asignatura.nombre}
+            }}
-      </p>
+            title={asignatura.nombre}
-      <div className="mt-2 flex items-center justify-between">
+          >
-        <span className="text-[10px] text-slate-500">
+            {/* franja */}
-          {asignatura.creditos} CR • HD:{asignatura.hd} • HI:{asignatura.hi}
+            <div
-        </span>
+              className="absolute inset-x-0 top-0 h-2"
-        <GripVertical
+              style={{ backgroundColor: lineaColor }}
-          size={12}
+            />
-          className="text-slate-300 opacity-0 transition-opacity group-hover:opacity-100"
+
-        />
+            {/* glow decorativo */}
-      </div>
+            <div
-    </button>
+              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">
+              <Badge className="border-amber-100 bg-amber-50 text-amber-600 hover:bg-amber-50">
-              <AlertTriangle size={14} className="mr-1" />{' '}
+                <AlertTriangle size={14} className="mr-1" />{' '}
-              {
+                {
-                asignaturas.filter((m) => !m.ciclo || !m.lineaCurricularId)
+                  asignaturas.filter((m) => !m.ciclo || !m.lineaCurricularId)
-                  .length
+                    .length
-              }{' '}
+                }{' '}
-              sin asignar
+                sin asignar
-            </Badge>
+              </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 ${
+                    className={`group relative flex items-center justify-between rounded-xl border-l-4 p-4 transition-all ${lineColors[idx % lineColors.length]
-                      lineColors[idx % lineColors.length]
+                      } ${editingLineaId === linea.id ? 'bg-white ring-2 ring-teal-500/20' : ''}`}
-                    } ${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 ${
+                        className={`block w-full text-xs font-bold break-words outline-none ${editingLineaId === linea.id
-                          editingLineaId === linea.id
+                          ? 'cursor-text border-b border-teal-500/50 pb-1'
-                            ? 'cursor-text border-b border-teal-500/50 pb-1'
+                          : 'cursor-pointer'
-                            : '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="mt-12 rounded-[28px] border border-border bg-card/80 p-5 shadow-sm backdrop-blur-sm">
-        <div className="mb-4 flex items-center justify-between">
+        <div className="mb-5 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
-          <div className="flex items-center gap-2 text-slate-600">
+          <div className="min-w-0">
-            <h3 className="text-sm font-bold tracking-wider uppercase">
+            <div className="flex items-center gap-2">
-              Bandeja de Entrada / Asignaturas sin asignar
+              <div className="flex h-9 w-9 items-center justify-center rounded-2xl bg-muted text-muted-foreground">
-            </h3>
+                <Icons.Inbox className="h-4.5 w-4.5" />
-            <Badge variant="secondary">{unassignedAsignaturas.length}</Badge>
+              </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) => (
+          {unassignedAsignaturas.length > 0 ? (
-            <div key={m.id} className="w-[200px]">
+            <div className="flex flex-wrap gap-4">
-              <AsignaturaCardItem
+              {unassignedAsignaturas.map((m) => (
-                asignatura={m}
+                <div key={m.id} className="w-[272px] shrink-0">
-                isDragging={draggedAsignatura === m.id}
+                  <AsignaturaCardItem
-                onDragStart={handleDragStart}
+                    asignatura={m}
-                onClick={() => {
+                    lineaColor="#94A3B8"
-                  setEditingData(m) // Cargamos los datos en el estado de edición
+                    lineaNombre="Sin asignar"
-                  setIsEditModalOpen(true)
+                    isDragging={draggedAsignatura === m.id}
-                }}
+                    onDragStart={handleDragStart}
-              />
+                    onClick={() => {
+                      setEditingData(m)
+                      setIsEditModalOpen(true)
+                    }}
+                  />
+                </div>
+              ))}
             </div>
-          ))}
+          ) : (
-          {unassignedAsignaturas.length === 0 && (
+            <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="flex w-full items-center justify-center text-sm text-slate-400">
+              <div className="mb-3 flex h-12 w-12 items-center justify-center rounded-2xl bg-muted text-muted-foreground">
-              No hay asignaturas pendientes. Arrastra una asignatura aquí para
+                <Icons.CheckCheck className="h-5 w-5" />
-              desasignarla.
+              </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>

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 (pdfUrlRef.current) window.URL.revokeObjectURL(pdfUrlRef.current)
-        if (prev) window.URL.revokeObjectURL(prev)
+      pdfUrlRef.current = url
-        return 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)
+}

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:
+  font-family: var(--font-sans);
-    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
-    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family:
+  font-family: var(--font-mono);
-    source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
+
+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-sans: 'Indivisa Sans', sans-serif;
-  --font-serif: Lora, serif;
+  --font-serif: 'Indivisa Serif', serif;
-  --font-mono: IBM Plex Mono, monospace;
+  --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-sans: 'Indivisa Sans', sans-serif;
-  --font-serif: Lora, serif;
+  --font-serif: 'Indivisa Serif', serif;
-  --font-mono: IBM Plex Mono, monospace;
+  --font-mono: 'Indivisa Sans', monospace;
   --radius: 1.4rem;
   --shadow-x: 0px;
   --shadow-y: 2px;

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 }
     }