Wizard listo para enviar información a ai-generate-plan

2026-01-15 15:54:36 -06:00
parent b08d58e262
commit 9aad9aed00
14 changed files with 1199 additions and 1142 deletions
--- a/scripts/update-types.ts
+++ b/scripts/update-types.ts
@@ -1,6 +1,7 @@
 // scripts/update-types.ts
-// Uso:
-// bun run scripts/update-types.ts
+/* Uso:
+bun run scripts/update-types.ts
+*/
 import { $ } from "bun";

 console.log("🔄 Generando tipos de Supabase...");
--- a/src/components/planes/wizard/PasoBasicosForm/PasoBasicosForm.tsx
+++ b/src/components/planes/wizard/PasoBasicosForm/PasoBasicosForm.tsx
@@ -1,7 +1,9 @@
-import { TemplateSelectorCard } from './TemplateSelectorCard'
-
-import type { NivelPlanEstudio, TipoCiclo } from '@/data/types/domain'
-import type { CARRERAS } from '@/features/planes/nuevo/catalogs'
+import type {
+  EstructuraPlanRow,
+  FacultadRow,
+  NivelPlanEstudio,
+  TipoCiclo,
+} from '@/data/types/domain'
 import type { NewPlanWizardState } from '@/features/planes/nuevo/types'

 import { Input } from '@/components/ui/input'
@@ -13,31 +15,23 @@ import {
  SelectTrigger,
  SelectValue,
 } from '@/components/ui/select'
-import { Separator } from '@/components/ui/separator'
 import { useCatalogosPlanes } from '@/data/hooks/usePlans'
-import {
-  FACULTADES,
-  NIVELES,
-  TIPOS_CICLO,
-  PLANTILLAS_ANEXO_1,
-  PLANTILLAS_ANEXO_2,
-} from '@/features/planes/nuevo/catalogs'
+import { NIVELES, TIPOS_CICLO } from '@/features/planes/nuevo/catalogs'
 import { cn } from '@/lib/utils'

 export function PasoBasicosForm({
  wizard,
  onChange,
-  carrerasFiltradas,
 }: {
  wizard: NewPlanWizardState
  onChange: React.Dispatch<React.SetStateAction<NewPlanWizardState>>
-  carrerasFiltradas: typeof CARRERAS
 }) {
  const { data: catalogos } = useCatalogosPlanes()

  // Preferir los catálogos remotos si están disponibles; si no, usar los locales
-  const facultadesList = catalogos?.facultades ?? FACULTADES
-  const rawCarreras = catalogos?.carreras ?? carrerasFiltradas
+  const facultadesList = catalogos?.facultades ?? []
+  const rawCarreras = catalogos?.carreras ?? []
+  const estructurasPlanList = catalogos?.estructurasPlan ?? []

  const filteredCarreras = rawCarreras.filter((c: any) => {
    const facId = wizard.datosBasicos.facultadId
@@ -57,10 +51,15 @@ export function PasoBasicosForm({
            placeholder="Ej. Ingeniería en Sistemas (2026)"
            value={wizard.datosBasicos.nombrePlan}
            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-              onChange((w) => ({
-                ...w,
-                datosBasicos: { ...w.datosBasicos, nombrePlan: e.target.value },
-              }))
+              onChange(
+                (w): NewPlanWizardState => ({
+                  ...w,
+                  datosBasicos: {
+                    ...w.datosBasicos,
+                    nombrePlan: e.target.value,
+                  },
+                }),
+              )
            }
            className="placeholder:text-muted-foreground/70 font-medium not-italic placeholder:font-normal placeholder:italic"
          />
@@ -71,14 +70,16 @@ export function PasoBasicosForm({
          <Select
            value={wizard.datosBasicos.facultadId}
            onValueChange={(value) =>
-              onChange((w) => ({
-                ...w,
-                datosBasicos: {
-                  ...w.datosBasicos,
-                  facultadId: value,
-                  carreraId: '',
-                },
-              }))
+              onChange(
+                (w): NewPlanWizardState => ({
+                  ...w,
+                  datosBasicos: {
+                    ...w.datosBasicos,
+                    facultadId: value,
+                    carreraId: '',
+                  },
+                }),
+              )
            }
          >
            <SelectTrigger
@@ -93,7 +94,7 @@ export function PasoBasicosForm({
              <SelectValue placeholder="Ej. Facultad de Ingeniería" />
            </SelectTrigger>
            <SelectContent>
-              {facultadesList.map((f: any) => (
+              {facultadesList.map((f: FacultadRow) => (
                <SelectItem key={f.id} value={f.id}>
                  {f.nombre}
                </SelectItem>
@@ -107,10 +108,12 @@ export function PasoBasicosForm({
          <Select
            value={wizard.datosBasicos.carreraId}
            onValueChange={(value) =>
-              onChange((w) => ({
-                ...w,
-                datosBasicos: { ...w.datosBasicos, carreraId: value },
-              }))
+              onChange(
+                (w): NewPlanWizardState => ({
+                  ...w,
+                  datosBasicos: { ...w.datosBasicos, carreraId: value },
+                }),
+              )
            }
            disabled={!wizard.datosBasicos.facultadId}
          >
@@ -174,13 +177,15 @@ export function PasoBasicosForm({
          <Select
            value={wizard.datosBasicos.tipoCiclo}
            onValueChange={(value: TipoCiclo) =>
-              onChange((w) => ({
-                ...w,
-                datosBasicos: {
-                  ...w.datosBasicos,
-                  tipoCiclo: value as any,
-                },
-              }))
+              onChange(
+                (w): NewPlanWizardState => ({
+                  ...w,
+                  datosBasicos: {
+                    ...w.datosBasicos,
+                    tipoCiclo: value as any,
+                  },
+                }),
+              )
            }
          >
            <SelectTrigger
@@ -212,22 +217,63 @@ export function PasoBasicosForm({
            min={1}
            value={wizard.datosBasicos.numCiclos ?? ''}
            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-              onChange((w) => ({
-                ...w,
-                datosBasicos: {
-                  ...w.datosBasicos,
-                  // Keep undefined when the input is empty so the field stays optional
-                  numCiclos:
-                    e.target.value === '' ? undefined : Number(e.target.value),
-                },
-              }))
+              onChange(
+                (w): NewPlanWizardState => ({
+                  ...w,
+                  datosBasicos: {
+                    ...w.datosBasicos,
+                    // Keep undefined when the input is empty so the field stays optional
+                    numCiclos:
+                      e.target.value === ''
+                        ? undefined
+                        : Number(e.target.value),
+                  },
+                }),
+              )
            }
            className="placeholder:text-muted-foreground/70 font-medium not-italic placeholder:font-normal placeholder:italic"
            placeholder="Ej. 8"
          />
        </div>
+
+        <div className="grid gap-1">
+          <Label htmlFor="estructuraPlan">Estructura de plan de estudios</Label>
+          <Select
+            value={wizard.datosBasicos.estructuraPlanId ?? ''}
+            onValueChange={(value: string) =>
+              onChange(
+                (w): NewPlanWizardState => ({
+                  ...w,
+                  datosBasicos: {
+                    ...w.datosBasicos,
+                    estructuraPlanId: value,
+                  },
+                }),
+              )
+            }
+          >
+            <SelectTrigger
+              id="tipoCiclo"
+              className={cn(
+                'w-full min-w-0 [&>span]:block! [&>span]:truncate!',
+                !wizard.datosBasicos.estructuraPlanId
+                  ? 'text-muted-foreground font-normal italic opacity-70' // Es Placeholder
+                  : 'font-medium not-italic', // Tiene Valor (Medium)
+              )}
+            >
+              <SelectValue placeholder="Ej. Plan base SEP/ULSA (2026)" />
+            </SelectTrigger>
+            <SelectContent>
+              {estructurasPlanList.map((t: EstructuraPlanRow) => (
+                <SelectItem key={t.id} value={t.id}>
+                  {t.nombre}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
      </div>
-      <Separator className="my-3" />
+      {/* <Separator className="my-3" />
      <div className="grid gap-4 sm:grid-cols-2">
        <TemplateSelectorCard
          cardTitle="Plantilla de plan de estudios"
@@ -263,7 +309,7 @@ export function PasoBasicosForm({
            }))
          }
        />
-      </div>
+      </div> */}
    </div>
  )
 }
--- a/src/components/planes/wizard/PasoDetallesPanel/FileDropZone.tsx
+++ b/src/components/planes/wizard/PasoDetallesPanel/FileDropZone.tsx
@@ -2,13 +2,13 @@ import { Upload, File, X, FileText } from 'lucide-react'
 import { useState, useCallback, useEffect, useRef } from 'react'

 import { Button } from '@/components/ui/button'
+import { formatFileSize } from '@/features/planes/utils/format-file-size'
 import { cn } from '@/lib/utils'

-interface UploadedFile {
-  id: string
-  name: string
-  size: string
-  type: string
+export interface UploadedFile {
+  id: string // Necesario para React (key)
+  file: File // La fuente de verdad (contiene name, size, type)
+  preview?: string // Opcional: si fueran imágenes
 }

 interface FileDropzoneProps {
@@ -37,9 +37,7 @@ export function FileDropzone({
          typeof crypto !== 'undefined' && 'randomUUID' in crypto
            ? (crypto as any).randomUUID()
            : `file-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
-        name: file.name,
-        size: formatFileSize(file.size),
-        type: file.name.split('.').pop() || 'file',
+        file,
      }))
      setFiles((prev) => {
        const room = Math.max(0, maxFiles - prev.length)
@@ -97,12 +95,6 @@ export function FileDropzone({
    if (onFilesChangeRef.current) onFilesChangeRef.current(files)
  }, [files])

-  const formatFileSize = (bytes: number): string => {
-    if (bytes < 1024) return bytes + ' B'
-    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
-    return (bytes / (1024 * 1024)).toFixed(1) + ' MB'
-  }
-
  const getFileIcon = (type: string) => {
    switch (type.toLowerCase()) {
      case 'pdf':
@@ -170,23 +162,25 @@ export function FileDropzone({
      {/* Uploaded files list */}
      {files.length > 0 && (
        <div className="space-y-2">
-          {files.map((file) => (
+          {files.map((item) => (
            <div
-              key={file.id}
+              key={item.id}
              className="bg-accent/50 border-border fade-in flex items-center gap-3 rounded-lg border p-3"
            >
-              {getFileIcon(file.type)}
+              {getFileIcon(item.file.type)}
              <div className="min-w-0 flex-1">
                <p className="text-foreground truncate text-sm font-medium">
-                  {file.name}
+                  {item.file.name}
+                </p>
+                <p className="text-muted-foreground text-xs">
+                  {formatFileSize(item.file.size)}
                </p>
-                <p className="text-muted-foreground text-xs">{file.size}</p>
              </div>
              <Button
                variant="ghost"
                size="icon"
                className="text-muted-foreground hover:text-destructive h-8 w-8"
-                onClick={() => removeFile(file.id)}
+                onClick={() => removeFile(item.id)}
              >
                <X className="h-4 w-4" />
              </Button>
--- a/src/components/planes/wizard/PasoDetallesPanel/PasoDetallesPanel.tsx
+++ b/src/components/planes/wizard/PasoDetallesPanel/PasoDetallesPanel.tsx
@@ -1,6 +1,7 @@
 import { FileDropzone } from './FileDropZone'
 import ReferenciasParaIA from './ReferenciasParaIA'

+import type { UploadedFile } from './FileDropZone'
 import type { NewPlanWizardState } from '@/features/planes/nuevo/types'

 import { Button } from '@/components/ui/button'
@@ -116,14 +117,16 @@ export function PasoDetallesPanel({
              }
            })
          }
-          onFilesChange={(files) =>
-            onChange((w) => ({
-              ...w,
-              iaConfig: {
-                ...(w.iaConfig || ({} as any)),
-                archivosAdjuntos: files,
-              },
-            }))
+          onFilesChange={(files: Array<UploadedFile>) =>
+            onChange(
+              (w): NewPlanWizardState => ({
+                ...w,
+                iaConfig: {
+                  ...(w.iaConfig || ({} as any)),
+                  archivosAdjuntos: files,
+                },
+              }),
+            )
          }
        />
        <div className="flex items-center justify-between">
--- a/src/components/planes/wizard/PasoDetallesPanel/ReferenciasParaIA.tsx
+++ b/src/components/planes/wizard/PasoDetallesPanel/ReferenciasParaIA.tsx
@@ -5,6 +5,8 @@ import BarraBusqueda from '../../BarraBusqueda'

 import { FileDropzone } from './FileDropZone'

+import type { UploadedFile } from './FileDropZone'
+
 import { Checkbox } from '@/components/ui/checkbox'
 import { Label } from '@/components/ui/label'
 import {
@@ -27,9 +29,7 @@ const ReferenciasParaIA = ({
  selectedRepositorioIds?: Array<string>
  onToggleArchivo?: (id: string, checked: boolean) => void
  onToggleRepositorio?: (id: string, checked: boolean) => void
-  onFilesChange?: (
-    files: Array<{ id: string; name: string; size: string; type: string }>,
-  ) => void
+  onFilesChange?: (files: Array<UploadedFile>) => void
 }) => {
  const [busquedaArchivos, setBusquedaArchivos] = useState('')
  const [busquedaRepositorios, setBusquedaRepositorios] = useState('')
--- a/src/components/planes/wizard/PasoResumenCard.tsx
+++ b/src/components/planes/wizard/PasoResumenCard.tsx
@@ -8,12 +8,11 @@ import {
  CardTitle,
 } from '@/components/ui/card'
 import {
-  PLANTILLAS_ANEXO_1,
-  PLANTILLAS_ANEXO_2,
  PLANES_EXISTENTES,
  ARCHIVOS,
  REPOSITORIOS,
 } from '@/features/planes/nuevo/catalogs'
+import { formatFileSize } from '@/features/planes/utils/format-file-size'

 export function PasoResumenCard({ wizard }: { wizard: NewPlanWizardState }) {
  return (
@@ -32,12 +31,6 @@ export function PasoResumenCard({ wizard }: { wizard: NewPlanWizardState }) {
            const repositoriosRef =
              wizard.iaConfig?.repositoriosReferencia ?? []
            const adjuntos = wizard.iaConfig?.archivosAdjuntos ?? []
-            const plantillaPlan = PLANTILLAS_ANEXO_1.find(
-              (x) => x.id === wizard.datosBasicos.plantillaPlanId,
-            )
-            const plantillaMapa = PLANTILLAS_ANEXO_2.find(
-              (x) => x.id === wizard.datosBasicos.plantillaMapaId,
-            )
            const contenido = (
              <>
                <div>
@@ -68,89 +61,56 @@ export function PasoResumenCard({ wizard }: { wizard: NewPlanWizardState }) {
                    {wizard.datosBasicos.tipoCiclo})
                  </span>
                </div>
-                <div className="mt-2">
-                  <span className="text-muted-foreground">
-                    Plantilla plan:{' '}
-                  </span>
-                  <span className="font-medium">
-                    {(plantillaPlan?.name ||
-                      wizard.datosBasicos.plantillaPlanId ||
-                      '—') +
-                      ' · ' +
-                      (wizard.datosBasicos.plantillaPlanVersion || '—')}
-                  </span>
-                </div>
-                <div>
-                  <span className="text-muted-foreground">
-                    Mapa curricular:{' '}
-                  </span>
-                  <span className="font-medium">
-                    {(plantillaMapa?.name ||
-                      wizard.datosBasicos.plantillaMapaId ||
-                      '—') +
-                      ' · ' +
-                      (wizard.datosBasicos.plantillaMapaVersion || '—')}
-                  </span>
-                </div>
                <div className="mt-2">
                  <span className="text-muted-foreground">Modo: </span>
                  <span className="font-medium">
-                    {wizard.modoCreacion === 'MANUAL' && 'Manual'}
-                    {wizard.modoCreacion === 'IA' && 'Generado con IA'}
-                    {wizard.modoCreacion === 'CLONADO' &&
-                      wizard.subModoClonado === 'INTERNO' &&
+                    {wizard.tipoOrigen === 'MANUAL' && 'Manual'}
+                    {wizard.tipoOrigen === 'IA' && 'Generado con IA'}
+                    {wizard.tipoOrigen === 'CLONADO_INTERNO' &&
                      'Clonado desde plan del sistema'}
-                    {wizard.modoCreacion === 'CLONADO' &&
-                      wizard.subModoClonado === 'TRADICIONAL' &&
+                    {wizard.tipoOrigen === 'CLONADO_TRADICIONAL' &&
                      'Importado desde documentos tradicionales'}
                  </span>
                </div>
-                {wizard.modoCreacion === 'CLONADO' &&
-                  wizard.subModoClonado === 'INTERNO' && (
-                    <div className="mt-2">
-                      <span className="text-muted-foreground">
-                        Plan origen:{' '}
-                      </span>
-                      <span className="font-medium">
-                        {(() => {
-                          const p = PLANES_EXISTENTES.find(
-                            (x) => x.id === wizard.clonInterno?.planOrigenId,
-                          )
-                          return (
-                            p?.nombre || wizard.clonInterno?.planOrigenId || '—'
-                          )
-                        })()}
-                      </span>
-                    </div>
-                  )}
-                {wizard.modoCreacion === 'CLONADO' &&
-                  wizard.subModoClonado === 'TRADICIONAL' && (
-                    <div className="mt-2">
-                      <div className="font-medium">Documentos adjuntos</div>
-                      <ul className="text-muted-foreground list-disc pl-5 text-xs">
-                        <li>
-                          <span className="text-foreground">
-                            Word del plan:
-                          </span>{' '}
-                          {wizard.clonTradicional?.archivoWordPlanId?.name ||
-                            '—'}
-                        </li>
-                        <li>
-                          <span className="text-foreground">
-                            Mapa curricular:
-                          </span>{' '}
-                          {wizard.clonTradicional?.archivoMapaExcelId?.name ||
-                            '—'}
-                        </li>
-                        <li>
-                          <span className="text-foreground">Asignaturas:</span>{' '}
-                          {wizard.clonTradicional?.archivoAsignaturasExcelId
-                            ?.name || '—'}
-                        </li>
-                      </ul>
-                    </div>
-                  )}
-                {wizard.modoCreacion === 'IA' && (
+                {wizard.tipoOrigen === 'CLONADO_INTERNO' && (
+                  <div className="mt-2">
+                    <span className="text-muted-foreground">Plan origen: </span>
+                    <span className="font-medium">
+                      {(() => {
+                        const p = PLANES_EXISTENTES.find(
+                          (x) => x.id === wizard.clonInterno?.planOrigenId,
+                        )
+                        return (
+                          p?.nombre || wizard.clonInterno?.planOrigenId || '—'
+                        )
+                      })()}
+                    </span>
+                  </div>
+                )}
+                {wizard.tipoOrigen === 'CLONADO_TRADICIONAL' && (
+                  <div className="mt-2">
+                    <div className="font-medium">Documentos adjuntos</div>
+                    <ul className="text-muted-foreground list-disc pl-5 text-xs">
+                      <li>
+                        <span className="text-foreground">Word del plan:</span>{' '}
+                        {wizard.clonTradicional?.archivoWordPlanId?.name || '—'}
+                      </li>
+                      <li>
+                        <span className="text-foreground">
+                          Mapa curricular:
+                        </span>{' '}
+                        {wizard.clonTradicional?.archivoMapaExcelId?.name ||
+                          '—'}
+                      </li>
+                      <li>
+                        <span className="text-foreground">Asignaturas:</span>{' '}
+                        {wizard.clonTradicional?.archivoAsignaturasExcelId
+                          ?.name || '—'}
+                      </li>
+                    </ul>
+                  </div>
+                )}
+                {wizard.tipoOrigen === 'IA' && (
                  <div className="bg-muted/50 mt-2 rounded-md p-3">
                    <div>
                      <span className="text-muted-foreground">Enfoque: </span>
@@ -208,8 +168,10 @@ export function PasoResumenCard({ wizard }: { wizard: NewPlanWizardState }) {
                        <ul className="text-muted-foreground list-disc pl-5 text-xs">
                          {adjuntos.map((f) => (
                            <li key={f.id}>
-                              <span className="text-foreground">{f.name}</span>{' '}
-                              <span>· {f.size}</span>
+                              <span className="text-foreground">
+                                {f.file.name}
+                              </span>{' '}
+                              <span>· {formatFileSize(f.file.size)}</span>
                            </li>
                          ))}
                        </ul>
--- a/src/data/api/plans.api.ts
+++ b/src/data/api/plans.api.ts
@@ -14,6 +14,7 @@ import type {
  TipoCiclo,
  UUID,
 } from "../types/domain";
+import type { UploadedFile } from "@/components/planes/wizard/PasoDetallesPanel/FileDropZone";

 const EDGE = {
  plans_create_manual: "plans_create_manual",
@@ -220,6 +221,7 @@ export type AIGeneratePlanInput = {
    notasAdicionales?: string;
    archivosReferencia?: Array<UUID>;
    repositoriosIds?: Array<UUID>;
+    archivosAdjuntos: Array<UploadedFile>;
    usarMCP?: boolean;
  };
 };
@@ -339,15 +341,20 @@ export async function plans_get_document(
 export async function getCatalogos() {
  const supabase = supabaseBrowser();

-  const [facRes, carRes, estRes] = await Promise.all([
-    supabase.from("facultades").select("*").order("nombre"),
-    supabase.from("carreras").select("*").order("nombre"),
-    supabase.from("estados_plan").select("*").order("orden"),
-  ]);
+  const [facultadesRes, carrerasRes, estadosRes, estructurasPlanRes] =
+    await Promise.all([
+      supabase.from("facultades").select("*").order("nombre"),
+      supabase.from("carreras").select("*").order("nombre"),
+      supabase.from("estados_plan").select("*").order("orden"),
+      supabase.from("estructuras_plan").select("*").order("creado_en", {
+        ascending: true,
+      }),
+    ]);

  return {
-    facultades: facRes.data ?? [],
-    carreras: carRes.data ?? [],
-    estados: estRes.data ?? [],
+    facultades: facultadesRes.data ?? [],
+    carreras: carrerasRes.data ?? [],
+    estados: estadosRes.data ?? [],
+    estructurasPlan: estructurasPlanRes.data ?? [],
  };
 }
--- a/src/data/supabase/client.ts
+++ b/src/data/supabase/client.ts
@@ -3,7 +3,7 @@ import { createClient } from "@supabase/supabase-js";
 import { getEnv } from "./env";

 import type { SupabaseClient } from "@supabase/supabase-js";
-import type { Database } from "src/types/supabase.js";
+import type { Database } from "src/types/supabase";

 let _client: SupabaseClient<Database> | null = null;

--- a/src/features/planes/nuevo/NuevoPlanModalContainer.tsx
+++ b/src/features/planes/nuevo/NuevoPlanModalContainer.tsx
@@ -51,7 +51,6 @@ export default function NuevoPlanModalContainer() {
  const {
    wizard,
    setWizard,
-    carrerasFiltradas,
    canContinueDesdeModo,
    canContinueDesdeBasicos,
    canContinueDesdeDetalles,
@@ -125,7 +124,10 @@ export default function NuevoPlanModalContainer() {
            {({ methods }) => {
              const currentIndex = Wizard.utils.getIndex(methods.current.id) + 1
              const totalSteps = Wizard.steps.length
-              const nextStep = Wizard.steps[currentIndex]
+              const nextStep = Wizard.steps[currentIndex] ?? {
+                title: '',
+                description: '',
+              }

              return (
                <>
@@ -154,7 +156,6 @@ export default function NuevoPlanModalContainer() {
                          <PasoBasicosForm
                            wizard={wizard}
                            onChange={setWizard}
-                            carrerasFiltradas={carrerasFiltradas}
                          />
                        </Wizard.Stepper.Panel>
                      )}
--- a/src/features/planes/nuevo/hooks/useNuevoPlanWizard.ts
+++ b/src/features/planes/nuevo/hooks/useNuevoPlanWizard.ts
@@ -1,6 +1,4 @@
-import { useMemo, useState } from "react";
-
-import { CARRERAS } from "../catalogs";
+import { useState } from "react";

 import type { NewPlanWizardState, PlanPreview } from "../types";
 import type { NivelPlanEstudio, TipoCiclo } from "@/data/types/domain";
@@ -16,10 +14,7 @@ export function useNuevoPlanWizard() {
      nivel: "",
      tipoCiclo: "",
      numCiclos: undefined,
-      plantillaPlanId: "",
-      plantillaPlanVersion: "",
-      plantillaMapaId: "",
-      plantillaMapaVersion: "",
+      estructuraPlanId: null,
    },
    // datosBasicos: {
    //   nombrePlan: "Medicina",
@@ -51,11 +46,6 @@ export function useNuevoPlanWizard() {
    errorMessage: null,
  });

-  const carrerasFiltradas = useMemo(() => {
-    const fac = wizard.datosBasicos.facultadId;
-    return fac ? CARRERAS.filter((c) => c.facultadId === fac) : CARRERAS;
-  }, [wizard.datosBasicos.facultadId]);
-
  const canContinueDesdeModo = wizard.tipoOrigen === "MANUAL" ||
    wizard.tipoOrigen === "IA" ||
    (wizard.tipoOrigen === "CLONADO_INTERNO" ||
@@ -68,10 +58,7 @@ export function useNuevoPlanWizard() {
    (wizard.datosBasicos.numCiclos !== undefined &&
      wizard.datosBasicos.numCiclos > 0) &&
    // Requerir ambas plantillas (plan y mapa) con versión
-    !!wizard.datosBasicos.plantillaPlanId &&
-    !!wizard.datosBasicos.plantillaPlanVersion &&
-    !!wizard.datosBasicos.plantillaMapaId &&
-    !!wizard.datosBasicos.plantillaMapaVersion;
+    !!wizard.datosBasicos.estructuraPlanId;

  const canContinueDesdeDetalles = (() => {
    if (wizard.tipoOrigen === "MANUAL") return true;
@@ -130,7 +117,6 @@ export function useNuevoPlanWizard() {
  return {
    wizard,
    setWizard,
-    carrerasFiltradas,
    canContinueDesdeModo,
    canContinueDesdeBasicos,
    canContinueDesdeDetalles,
--- a/src/features/planes/nuevo/types.ts
+++ b/src/features/planes/nuevo/types.ts
@@ -1,3 +1,4 @@
+import type { UploadedFile } from "@/components/planes/wizard/PasoDetallesPanel/FileDropZone";
 import type {
  NivelPlanEstudio,
  TipoCiclo,
@@ -24,10 +25,7 @@ export type NewPlanWizardState = {
    tipoCiclo: TipoCiclo | "";
    numCiclos: number | undefined;
    // Selección de plantillas (obligatorias)
-    plantillaPlanId?: string;
-    plantillaPlanVersion?: string;
-    plantillaMapaId?: string;
-    plantillaMapaVersion?: string;
+    estructuraPlanId: string | null;
  };
  clonInterno?: { planOrigenId: string | null };
  clonTradicional?: {
@@ -58,7 +56,7 @@ export type NewPlanWizardState = {
    archivosReferencia: Array<string>;
    repositoriosReferencia?: Array<string>;
    archivosAdjuntos?: Array<
-      { id: string; name: string; size: string; type: string }
+      UploadedFile
    >;
  };
  resumen: { previewPlan?: PlanPreview };
--- a/src/features/planes/utils/format-file-size.ts
+++ b/src/features/planes/utils/format-file-size.ts
@@ -0,0 +1,5 @@
+export const formatFileSize = (bytes: number): string => {
+  if (bytes < 1024) return bytes + " B";
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
+  return (bytes / (1024 * 1024)).toFixed(1) + " MB";
+};
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -30,4 +30,29 @@ export const Route = createRootRouteWithContext<MyRouterContext>()({
      />
    </>
  ),
+
+  errorComponent: ({ error, reset }) => {
+    return (
+      <div className="flex min-h-[50vh] flex-col items-center justify-center space-y-4 p-6 text-center">
+        <h2 className="text-2xl font-bold text-red-600">
+          ¡Ups! Algo salió mal
+        </h2>
+        <p className="max-w-md text-gray-600">
+          Ocurrió un error inesperado al cargar esta sección.
+        </p>
+
+        {/* Opcional: Mostrar el detalle técnico en desarrollo */}
+        <pre className="max-w-full overflow-auto rounded border border-gray-300 bg-gray-100 p-4 text-left text-xs">
+          {error.message}
+        </pre>
+
+        <button
+          onClick={reset}
+          className="rounded bg-blue-600 px-4 py-2 text-white transition-colors hover:bg-blue-700"
+        >
+          Intentar de nuevo
+        </button>
+      </div>
+    )
+  },
 })
--- a/src/types/supabase.ts
+++ b/src/types/supabase.ts