La pantalla se volvía negra al abrir el dialogo de eliminar carrera

La razón es que se rendereaba un dialogo de borrado por carrera, pero al abrir uno se abrian los demás también

src/components/carreras/DeleteCarreras.tsx

@@ -30,7 +30,7 @@ export function useDeleteCarreraDialog(carreraId: string, onDeleted?: () => void
 
     const dialog = (
         <Dialog open={open} onOpenChange={setOpen}>
-            <DialogContent>
+            <DialogContent className="bg-white">
                 <DialogHeader>
                     <DialogTitle className="font-mono" >¿Eliminar carrera?</DialogTitle>
                     <DialogDescription>

src/components/planes/AddAsignaturaButton.tsx

@@ -11,9 +11,11 @@ import { supabase, useSupabaseAuth } from "@/auth/supabase"
 import { Field } from "./Field"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs"
 import { asignaturaKeys } from "./planQueries"
+import { useRouter } from "@tanstack/react-router"
 
 export function AddAsignaturaButton({ planId, onAdded }: { planId: string; onAdded?: () => void }) {
   const qc = useQueryClient()
+  const router = useRouter()
   const supabaseAuth = useSupabaseAuth()
   const [open, setOpen] = useState(false)
   const [saving, setSaving] = useState(false)
@@ -45,7 +47,13 @@ export function AddAsignaturaButton({ planId, onAdded }: { planId: string; onAdd
       objetivos: toNull(f.objetivos),
       contenidos: [], bibliografia: [], criterios_evaluacion: null,
     }
-    const { error } = await supabase.from("asignaturas").insert([payload])
+    const { error,data } = await supabase.from("asignaturas").insert([payload]).select().single()
+    console.log(data);
+    router.invalidate()
+    router.navigate({
+      to: "/asignatura/$asignaturaId",
+      params: { asignaturaId: data.id },
+    })
     setSaving(false)
     if (error) { alert(error.message); return }
     setOpen(false)
@@ -64,8 +72,17 @@ export function AddAsignaturaButton({ planId, onAdded }: { planId: string; onAdd
         body: JSON.stringify({ planEstudiosId: planId, prompt: iaPrompt, semestre: iaSemestre.trim() ? Number(iaSemestre) : undefined, insert: true, uuid: supabaseAuth.user?.id }),
       })
       if (!res.ok) throw new Error(await res.text())
+      const data = await res.json()
+      console.log("Asignatura generada:", data)
+      const asignaturaId = data.asignaturaId || data.insertResult?.id
+    if (!asignaturaId) throw new Error("No se recibió el ID de la asignatura generada")
       confetti({ particleCount: 120, spread: 80, origin: { y: 0.6 } })
       setOpen(false)
+      router.invalidate()
+      router.navigate({
+      to: "/asignatura/$asignaturaId",
+      params: { asignaturaId },
+    })
       onAdded?.()
       // qc.invalidateQueries({ queryKey: asignaturaKeys.preview(planId) })
       // qc.invalidateQueries({ queryKey: asignaturaKeys.count(planId) })

src/routes/_authenticated/carreras.tsx

@@ -126,6 +126,17 @@ function RouteComponent() {
   const [detail, setDetail] = useState<CarreraRow | null>(null)
   const [editCarrera, setEditCarrera] = useState<CarreraRow | null>(null)
   const [createOpen, setCreateOpen] = useState(false)
+  const [deleteTarget, setDeleteTarget] = useState<CarreraRow | null>(null)
+
+  // ✅ Se declara UNA SOLA VEZ
+  const { setOpen: setDeleteOpen, dialog: deleteDialog } = useDeleteCarreraDialog(
+    deleteTarget?.id ?? "",
+    async () => {
+      await qc.invalidateQueries({ queryKey: carrerasKeys.root })
+      router.invalidate()
+      // setDeleteTarget(null)
+    }
+  )
 
   const filtered = useMemo(() => {
     const term = q.trim().toLowerCase()
@@ -198,10 +209,7 @@ function RouteComponent() {
               const border = tint(fac?.color, 0.28)
               const chip = tint(fac?.color, 0.1)
               const IconComp = (fac?.icon && (Icons as any)[fac.icon]) || Icons.Building2
-              const { setOpen: setDeleteOpen, dialog: deleteDialog } = useDeleteCarreraDialog(c.id, async () => {
-                await qc.invalidateQueries({ queryKey: carrerasKeys.root })
-                router.invalidate()
-              })
+             
               return (
                 <ContextMenu key={c.id}>
                   <ContextMenuTrigger onClick={(e) => openContextMenu(e)}>
@@ -233,11 +241,14 @@ function RouteComponent() {
                     <ContextMenuItem onClick={() => setEditCarrera(c)}>
                       <Icons.Pencil className="w-4 h-4 mr-2" /> Editar
                     </ContextMenuItem>
-                    <ContextMenuItem onClick={() => setDeleteOpen(true)}>
+                    <ContextMenuItem  onClick={() => {
+                    setDeleteTarget(c)
+                    setDeleteOpen(true)
+                  }}>
                       <Icons.Trash className="w-4 h-4 mr-2" /> Eliminar
                     </ContextMenuItem>
                   </ContextMenuContent>
-                  {deleteDialog}
+                  
                 </ContextMenu>
               )
             })}
@@ -247,6 +258,8 @@ function RouteComponent() {
         </CardContent>
       </Card>
 
+      {deleteDialog}
+
       {/* Crear / Editar */}
       <CarreraFormDialog
         open={createOpen}

src/routes/_authenticated/plan/$planId.tsx

@@ -49,7 +49,10 @@ export const Route = createFileRoute("/_authenticated/plan/$planId")({
 // ...existing code...
 function RouteComponent() {
   const qc = useQueryClient()
-  const { plan, asignaturas: asignaturasPreview } = Route.useLoaderData() as LoaderData
+  //const { plan, asignaturas: asignaturasPreview } = Route.useLoaderData() as LoaderData
+  const { plan } = Route.useLoaderData() as LoaderData
+
+  const { data: asignaturasPreview } = useSuspenseQuery(asignaturasPreviewOptions(plan.id))
   const auth = useSupabaseAuth()
   const asignaturasCount = asignaturasPreview.length