genración del pdf de plan de estudios ya funciona

Reviewed-on: #2

.gitignore

@@ -4,6 +4,7 @@ dist
 dist-ssr
 *.local
 count.txt
-.env
+.env*
 .nitro
 .tanstack
+.cta.json

bun.lock

@@ -32,6 +32,8 @@
         "clsx": "^2.1.1",
         "cmdk": "^1.1.1",
         "gsap": "^3.13.0",
+        "jspdf": "^3.0.3",
+        "jspdf-autotable": "^5.0.2",
         "lucide-react": "^0.540.0",
         "next-themes": "^0.4.6",
         "react": "^19.0.0",
@@ -482,12 +484,18 @@
 
     "@types/node": ["@types/node@24.3.0", "", { "dependencies": { "undici-types": "~7.10.0" } }, "sha512-aPTXCrfwnDLj4VvXrm+UUCQjNEvJgNA8s5F1cvwQU+3KNltTOkBm1j30uNLyqqPNe7gE3KFzImYoZEfLhp4Yow=="],
 
+    "@types/pako": ["@types/pako@2.0.4", "", {}, "sha512-VWDCbrLeVXJM9fihYodcLiIv0ku+AlOa/TQ1SvYOaBuyrSKgEcro95LJyIsJ4vSo6BXIxOKxiJAat04CmST9Fw=="],
+
     "@types/phoenix": ["@types/phoenix@1.6.6", "", {}, "sha512-PIzZZlEppgrpoT2QgbnDU+MMzuR6BbCjllj0bM70lWoejMeNJAxCchxnv7J3XFkI8MpygtRpzXrIlmWUBclP5A=="],
 
+    "@types/raf": ["@types/raf@3.4.3", "", {}, "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw=="],
+
     "@types/react": ["@types/react@19.1.10", "", { "dependencies": { "csstype": "^3.0.2" } }, "sha512-EhBeSYX0Y6ye8pNebpKrwFJq7BoQ8J5SO6NlvNwwHjSj6adXJViPQrKlsyPw7hLBLvckEMO1yxeGdR82YBBlDg=="],
 
     "@types/react-dom": ["@types/react-dom@19.1.7", "", { "peerDependencies": { "@types/react": "^19.0.0" } }, "sha512-i5ZzwYpqjmrKenzkoLM2Ibzt6mAsM7pxB6BCIouEVVmgiqaMj1TjaK7hnA36hbW5aZv20kx7Lw6hWzPWg0Rurw=="],
 
+    "@types/trusted-types": ["@types/trusted-types@2.0.7", "", {}, "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="],
+
     "@types/unist": ["@types/unist@3.0.3", "", {}, "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="],
 
     "@types/use-sync-external-store": ["@types/use-sync-external-store@0.0.6", "", {}, "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg=="],
@@ -536,6 +544,8 @@
 
     "bail": ["bail@2.0.2", "", {}, "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw=="],
 
+    "base64-arraybuffer": ["base64-arraybuffer@1.0.2", "", {}, "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ=="],
+
     "binary-extensions": ["binary-extensions@2.3.0", "", {}, "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw=="],
 
     "braces": ["braces@3.0.3", "", { "dependencies": { "fill-range": "^7.1.1" } }, "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA=="],
@@ -548,6 +558,8 @@
 
     "canvas-confetti": ["canvas-confetti@1.9.3", "", {}, "sha512-rFfTURMvmVEX1gyXFgn5QMn81bYk70qa0HLzcIOSVEyl57n6o9ItHeBtUSWdvKAPY0xlvBHno4/v3QPrT83q9g=="],
 
+    "canvg": ["canvg@3.0.11", "", { "dependencies": { "@babel/runtime": "^7.12.5", "@types/raf": "^3.4.0", "core-js": "^3.8.3", "raf": "^3.4.1", "regenerator-runtime": "^0.13.7", "rgbcolor": "^1.0.1", "stackblur-canvas": "^2.0.0", "svg-pathdata": "^6.0.3" } }, "sha512-5ON+q7jCTgMp9cjpu4Jo6XbvfYwSB2Ow3kzHKfIyJfaCAOHLbdKPQqGKgfED/R5B+3TFFfe8pegYA+b423SRyA=="],
+
     "ccount": ["ccount@2.0.1", "", {}, "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg=="],
 
     "chai": ["chai@5.3.1", "", { "dependencies": { "assertion-error": "^2.0.1", "check-error": "^2.1.1", "deep-eql": "^5.0.1", "loupe": "^3.1.0", "pathval": "^2.0.0" } }, "sha512-48af6xm9gQK8rhIcOxWwdGzIervm8BVTin+yRp9HEvU20BtVZ2lBywlIJBzwaDtvo0FvjeL7QdCADoUoqIbV3A=="],
@@ -578,6 +590,10 @@
 
     "cookie-es": ["cookie-es@1.2.2", "", {}, "sha512-+W7VmiVINB+ywl1HGXJXmrqkOhpKrIiVZV6tQuV54ZyQC7MMuBt81Vc336GMLoHBq5hV/F9eXgt5Mnx0Rha5Fg=="],
 
+    "core-js": ["core-js@3.46.0", "", {}, "sha512-vDMm9B0xnqqZ8uSBpZ8sNtRtOdmfShrvT6h2TuQGLs0Is+cR0DYbj/KWP6ALVNbWPpqA/qPLoOuppJN07humpA=="],
+
+    "css-line-break": ["css-line-break@2.1.0", "", { "dependencies": { "utrie": "^1.0.2" } }, "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w=="],
+
     "cssstyle": ["cssstyle@4.6.0", "", { "dependencies": { "@asamuzakjp/css-color": "^3.2.0", "rrweb-cssom": "^0.8.0" } }, "sha512-2z+rWdzbbSZv6/rhtvzvqeZQHrBaqgogqt85sqFNbabZOuFbCVFb8kPeEtZjiKkbrm395irpNKiYeFeLiQnFPg=="],
 
     "csstype": ["csstype@3.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],
@@ -628,6 +644,8 @@
 
     "dom-accessibility-api": ["dom-accessibility-api@0.5.16", "", {}, "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg=="],
 
+    "dompurify": ["dompurify@3.3.0", "", { "optionalDependencies": { "@types/trusted-types": "^2.0.7" } }, "sha512-r+f6MYR1gGN1eJv0TVQbhA7if/U7P87cdPl3HN5rikqaBSBxLiCb/b9O+2eG0cxz0ghyU+mU1QkbsOwERMYlWQ=="],
+
     "electron-to-chromium": ["electron-to-chromium@1.5.204", "", {}, "sha512-s9VbBXWxfDrl67PlO4avwh0/GU2vcwx8Fph3wlR8LJl7ySGYId59EFE17VWVcuC3sLWNPENm6Z/uGqKbkPCcXA=="],
 
     "enhanced-resolve": ["enhanced-resolve@5.18.3", "", { "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.2.0" } }, "sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww=="],
@@ -654,8 +672,12 @@
 
     "extend": ["extend@3.0.2", "", {}, "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="],
 
+    "fast-png": ["fast-png@6.4.0", "", { "dependencies": { "@types/pako": "^2.0.3", "iobuffer": "^5.3.2", "pako": "^2.1.0" } }, "sha512-kAqZq1TlgBjZcLr5mcN6NP5Rv4V2f22z00c3g8vRrwkcqjerx7BEhPbOnWCPqaHUl2XWQBJQvOT/FQhdMT7X/Q=="],
+
     "fdir": ["fdir@6.5.0", "", { "peerDependencies": { "picomatch": "^3 || ^4" }, "optionalPeers": ["picomatch"] }, "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg=="],
 
+    "fflate": ["fflate@0.8.2", "", {}, "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A=="],
+
     "fill-range": ["fill-range@7.1.1", "", { "dependencies": { "to-regex-range": "^5.0.1" } }, "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg=="],
 
     "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
@@ -682,6 +704,8 @@
 
     "html-url-attributes": ["html-url-attributes@3.0.1", "", {}, "sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ=="],
 
+    "html2canvas": ["html2canvas@1.4.1", "", { "dependencies": { "css-line-break": "^2.1.0", "text-segmentation": "^1.0.3" } }, "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA=="],
+
     "http-proxy-agent": ["http-proxy-agent@7.0.2", "", { "dependencies": { "agent-base": "^7.1.0", "debug": "^4.3.4" } }, "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig=="],
 
     "https-proxy-agent": ["https-proxy-agent@7.0.6", "", { "dependencies": { "agent-base": "^7.1.2", "debug": "4" } }, "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw=="],
@@ -694,6 +718,8 @@
 
     "internmap": ["internmap@2.0.3", "", {}, "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg=="],
 
+    "iobuffer": ["iobuffer@5.4.0", "", {}, "sha512-DRebOWuqDvxunfkNJAlc3IzWIPD5xVxwUNbHr7xKB8E6aLJxIPfNX3CoMJghcFjpv6RWQsrcJbghtEwSPoJqMA=="],
+
     "is-alphabetical": ["is-alphabetical@2.0.1", "", {}, "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ=="],
 
     "is-alphanumerical": ["is-alphanumerical@2.0.1", "", { "dependencies": { "is-alphabetical": "^2.0.0", "is-decimal": "^2.0.0" } }, "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw=="],
@@ -726,6 +752,10 @@
 
     "json5": ["json5@2.2.3", "", { "bin": { "json5": "lib/cli.js" } }, "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg=="],
 
+    "jspdf": ["jspdf@3.0.3", "", { "dependencies": { "@babel/runtime": "^7.26.9", "fast-png": "^6.2.0", "fflate": "^0.8.1" }, "optionalDependencies": { "canvg": "^3.0.11", "core-js": "^3.6.0", "dompurify": "^3.2.4", "html2canvas": "^1.0.0-rc.5" } }, "sha512-eURjAyz5iX1H8BOYAfzvdPfIKK53V7mCpBTe7Kb16PaM8JSXEcUQNBQaiWMI8wY5RvNOPj4GccMjTlfwRBd+oQ=="],
+
+    "jspdf-autotable": ["jspdf-autotable@5.0.2", "", { "peerDependencies": { "jspdf": "^2 || ^3" } }, "sha512-YNKeB7qmx3pxOLcNeoqAv3qTS7KuvVwkFe5AduCawpop3NOkBUtqDToxNc225MlNecxT4kP2Zy3z/y/yvGdXUQ=="],
+
     "lightningcss": ["lightningcss@1.30.1", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-darwin-arm64": "1.30.1", "lightningcss-darwin-x64": "1.30.1", "lightningcss-freebsd-x64": "1.30.1", "lightningcss-linux-arm-gnueabihf": "1.30.1", "lightningcss-linux-arm64-gnu": "1.30.1", "lightningcss-linux-arm64-musl": "1.30.1", "lightningcss-linux-x64-gnu": "1.30.1", "lightningcss-linux-x64-musl": "1.30.1", "lightningcss-win32-arm64-msvc": "1.30.1", "lightningcss-win32-x64-msvc": "1.30.1" } }, "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg=="],
 
     "lightningcss-darwin-arm64": ["lightningcss-darwin-arm64@1.30.1", "", { "os": "darwin", "cpu": "arm64" }, "sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ=="],
@@ -836,6 +866,8 @@
 
     "nwsapi": ["nwsapi@2.2.21", "", {}, "sha512-o6nIY3qwiSXl7/LuOU0Dmuctd34Yay0yeuZRLFmDPrrdHpXKFndPj3hM+YEPVHYC5fx2otBx4Ilc/gyYSAUaIA=="],
 
+    "pako": ["pako@2.1.0", "", {}, "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug=="],
+
     "parse-entities": ["parse-entities@4.0.2", "", { "dependencies": { "@types/unist": "^2.0.0", "character-entities-legacy": "^3.0.0", "character-reference-invalid": "^2.0.0", "decode-named-character-reference": "^1.0.0", "is-alphanumerical": "^2.0.0", "is-decimal": "^2.0.0", "is-hexadecimal": "^2.0.0" } }, "sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw=="],
 
     "parse5": ["parse5@7.3.0", "", { "dependencies": { "entities": "^6.0.0" } }, "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw=="],
@@ -844,6 +876,8 @@
 
     "pathval": ["pathval@2.0.1", "", {}, "sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ=="],
 
+    "performance-now": ["performance-now@2.1.0", "", {}, "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow=="],
+
     "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
 
     "picomatch": ["picomatch@4.0.3", "", {}, "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q=="],
@@ -858,6 +892,8 @@
 
     "punycode": ["punycode@2.3.1", "", {}, "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg=="],
 
+    "raf": ["raf@3.4.1", "", { "dependencies": { "performance-now": "^2.1.0" } }, "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA=="],
+
     "react": ["react@19.1.1", "", {}, "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ=="],
 
     "react-dom": ["react-dom@19.1.1", "", { "dependencies": { "scheduler": "^0.26.0" }, "peerDependencies": { "react": "^19.1.1" } }, "sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw=="],
@@ -886,6 +922,8 @@
 
     "redux-thunk": ["redux-thunk@3.1.0", "", { "peerDependencies": { "redux": "^5.0.0" } }, "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw=="],
 
+    "regenerator-runtime": ["regenerator-runtime@0.13.11", "", {}, "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="],
+
     "remark-parse": ["remark-parse@11.0.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "mdast-util-from-markdown": "^2.0.0", "micromark-util-types": "^2.0.0", "unified": "^11.0.0" } }, "sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA=="],
 
     "remark-rehype": ["remark-rehype@11.1.2", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", "mdast-util-to-hast": "^13.0.0", "unified": "^11.0.0", "vfile": "^6.0.0" } }, "sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw=="],
@@ -894,6 +932,8 @@
 
     "resolve-pkg-maps": ["resolve-pkg-maps@1.0.0", "", {}, "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw=="],
 
+    "rgbcolor": ["rgbcolor@1.0.1", "", {}, "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw=="],
+
     "rollup": ["rollup@4.46.3", "", { "dependencies": { "@types/estree": "1.0.8" }, "optionalDependencies": { "@rollup/rollup-android-arm-eabi": "4.46.3", "@rollup/rollup-android-arm64": "4.46.3", "@rollup/rollup-darwin-arm64": "4.46.3", "@rollup/rollup-darwin-x64": "4.46.3", "@rollup/rollup-freebsd-arm64": "4.46.3", "@rollup/rollup-freebsd-x64": "4.46.3", "@rollup/rollup-linux-arm-gnueabihf": "4.46.3", "@rollup/rollup-linux-arm-musleabihf": "4.46.3", "@rollup/rollup-linux-arm64-gnu": "4.46.3", "@rollup/rollup-linux-arm64-musl": "4.46.3", "@rollup/rollup-linux-loongarch64-gnu": "4.46.3", "@rollup/rollup-linux-ppc64-gnu": "4.46.3", "@rollup/rollup-linux-riscv64-gnu": "4.46.3", "@rollup/rollup-linux-riscv64-musl": "4.46.3", "@rollup/rollup-linux-s390x-gnu": "4.46.3", "@rollup/rollup-linux-x64-gnu": "4.46.3", "@rollup/rollup-linux-x64-musl": "4.46.3", "@rollup/rollup-win32-arm64-msvc": "4.46.3", "@rollup/rollup-win32-ia32-msvc": "4.46.3", "@rollup/rollup-win32-x64-msvc": "4.46.3", "fsevents": "~2.3.2" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-RZn2XTjXb8t5g13f5YclGoilU/kwT696DIkY3sywjdZidNSi3+vseaQov7D7BZXVJCPv3pDWUN69C78GGbXsKw=="],
 
     "rrweb-cssom": ["rrweb-cssom@0.8.0", "", {}, "sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw=="],
@@ -924,6 +964,8 @@
 
     "stackback": ["stackback@0.0.2", "", {}, "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw=="],
 
+    "stackblur-canvas": ["stackblur-canvas@2.7.0", "", {}, "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ=="],
+
     "std-env": ["std-env@3.9.0", "", {}, "sha512-UGvjygr6F6tpH7o2qyqR6QYpwraIjKSdtzyBdyytFOHmPZY917kwdwLG0RbOjWOnKmnm3PeHjaoLLMie7kPLQw=="],
 
     "stringify-entities": ["stringify-entities@4.0.4", "", { "dependencies": { "character-entities-html4": "^2.0.0", "character-entities-legacy": "^3.0.0" } }, "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg=="],
@@ -934,6 +976,8 @@
 
     "style-to-object": ["style-to-object@1.0.11", "", { "dependencies": { "inline-style-parser": "0.2.4" } }, "sha512-5A560JmXr7wDyGLK12Nq/EYS38VkGlglVzkis1JEdbGWSnbQIEhZzTJhzURXN5/8WwwFCs/f/VVcmkTppbXLow=="],
 
+    "svg-pathdata": ["svg-pathdata@6.0.3", "", {}, "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw=="],
+
     "symbol-tree": ["symbol-tree@3.2.4", "", {}, "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="],
 
     "tailwind-merge": ["tailwind-merge@3.3.1", "", {}, "sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g=="],
@@ -944,6 +988,8 @@
 
     "tar": ["tar@7.4.3", "", { "dependencies": { "@isaacs/fs-minipass": "^4.0.0", "chownr": "^3.0.0", "minipass": "^7.1.2", "minizlib": "^3.0.1", "mkdirp": "^3.0.1", "yallist": "^5.0.0" } }, "sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw=="],
 
+    "text-segmentation": ["text-segmentation@1.0.3", "", { "dependencies": { "utrie": "^1.0.2" } }, "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw=="],
+
     "tiny-invariant": ["tiny-invariant@1.3.3", "", {}, "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="],
 
     "tiny-warning": ["tiny-warning@1.0.3", "", {}, "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="],
@@ -1006,6 +1052,8 @@
 
     "use-sync-external-store": ["use-sync-external-store@1.5.0", "", { "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A=="],
 
+    "utrie": ["utrie@1.0.2", "", { "dependencies": { "base64-arraybuffer": "^1.0.2" } }, "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw=="],
+
     "vaul": ["vaul@1.1.2", "", { "dependencies": { "@radix-ui/react-dialog": "^1.1.1" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA=="],
 
     "vfile": ["vfile@6.0.3", "", { "dependencies": { "@types/unist": "^3.0.0", "vfile-message": "^4.0.0" } }, "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q=="],

package.json

@@ -34,10 +34,13 @@
     "@tanstack/router-plugin": "^1.121.2",
     "@types/canvas-confetti": "^1.9.0",
     "canvas-confetti": "^1.9.3",
+    "carbone-sdk-js": "^1.2.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "gsap": "^3.13.0",
+    "jspdf": "^3.0.3",
+    "jspdf-autotable": "^5.0.2",
     "lucide-react": "^0.540.0",
     "next-themes": "^0.4.6",
     "react": "^19.0.0",

src/components/ai/AIChatModal.jsx

@@ -0,0 +1,585 @@
+import React, { useEffect, useRef, useState } from "react";
+import { supabase } from "@/auth/supabase";
+import ReactMarkdown from "react-markdown"
+
+/* ---------- UI Mocks (sin cambios) ---------- */
+const Paperclip = (props) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+    viewBox="0 0 24 24" fill="none" stroke="currentColor"
+    strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/>
+  </svg>
+);
+
+const Dialog = ({ open, onOpenChange, children }) =>
+  open ? <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4" onClick={onOpenChange}>{children}</div> : null;
+const DialogContent = ({ className, children }) =>
+  <div className={`bg-white rounded-xl shadow-2xl transform transition-all max-w-6xl w-[95vw] h-[85vh] p-6 flex flex-col ${className}`}
+    onClick={(e) => e.stopPropagation()}>{children}</div>;
+const DialogHeader = ({ children }) => <div className="pb-4 border-b border-gray-200">{children}</div>;
+const DialogTitle = ({ className, children }) => <h2 className={`text-xl font-bold ${className}`}>{children}</h2>;
+const Button = ({ onClick, disabled, className, variant, children }) => (
+  <button onClick={onClick} disabled={disabled}
+    className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors 
+      ${variant === "outline"
+        ? "bg-white border border-gray-300 text-gray-700 hover:bg-gray-50"
+        : "bg-blue-600 text-white hover:bg-blue-700"}
+      ${disabled ? "opacity-50 cursor-not-allowed" : ""} ${className}`}>
+    {children}
+  </button>
+);
+const Card = ({ className, children }) => <div className={`bg-white rounded-2xl shadow-md ${className}`}>{children}</div>;
+const CardContent = ({ className, children }) => <div className={`p-4 ${className}`}>{children}</div>;
+const ScrollArea = ({ className, children }) => <div className={`overflow-y-auto ${className}`}>{children}</div>;
+
+/* ------------- COMPONENT ------------- */
+export default function AIChatModal({ open, onClose, context, onAccept }) {
+  const [vectorStores, setVectorStores] = useState([]);
+  const [vectorFiles, setVectorFiles] = useState([]);
+  const [selectedVectorFile, setSelectedVectorFile] = useState(null);
+
+  const [attachedFiles, setAttachedFiles] = useState([]);
+  const [attachedPreviews, setAttachedPreviews] = useState([]);
+
+  const [messages, setMessages] = useState([]);
+  const [input, setInput] = useState("");
+
+  const [loading, setLoading] = useState(false);
+  const [loadingFiles, setLoadingFiles] = useState(false);
+  const [loadingVectors, setLoadingVectors] = useState(false);
+
+  const [conversationId, setConversationId] = useState(null);
+  const [creatingConversation, setCreatingConversation] = useState(false); // control para esperar
+
+  const messagesEndRef = useRef(null);
+  const scrollToBottom = () => messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  useEffect(scrollToBottom, [messages]);
+
+  const normalizeInvokeResponse = (resp) => {
+  if (!resp) return null;
+
+  // cuando invocas funciones, Supabase siempre regresa:
+  // { data: "...string...", error: null, response: {} }
+  const raw = resp.data;
+
+  if (typeof raw === "string") {
+    try {
+      return JSON.parse(raw);
+    } catch (e) {
+      console.warn("❗ No se pudo parsear resp.data:", raw);
+      return null;
+    }
+  }
+
+  // si ya viene como objeto
+  if (typeof raw === "object" && raw !== null) return raw;
+
+  return null;
+};
+
+
+  // Al abrir: reset o crear conversación
+  useEffect(() => {
+    console.log(context.cont_conversation);
+    console.log(context);
+    
+    if (!open) {
+      // si ya existe una conversación la eliminamos
+      if (conversationId) {
+        deleteConversation(conversationId).catch((e) => console.error(e));
+      }
+      setMessages([]);
+      setInput("");
+      setSelectedVectorFile(null);
+      setAttachedFiles([]);
+      setAttachedPreviews([]);
+      setConversationId(null);
+      return;
+    }
+
+    // inyectar contexto como system message
+    if (context) {
+      setMessages([
+        {
+          role: "system",
+          content: `Contexto académico:\n${context.section || "—"}\n\nTexto original:\n${context.originalText || "—"}`
+        }
+      ]);
+    } else {
+      setMessages(prev => prev); // no hacer nada si no hay contexto
+    }
+
+    // crear conversación y esperar a que termine antes de permitir enviar
+    (async () => {
+      await createConversation();
+      // tras crear podemos también cargar vector stores
+      fetchVectorStores();
+    })();
+
+  }, [open]);
+
+  // --------- CREATE CONVERSATION (robusto) ----------
+  const createConversation = async () => {
+  try {
+    setCreatingConversation(true);
+
+    const { data: { session } } = await supabase.auth.getSession();
+    const token = session?.access_token;
+
+    // llamada
+    const resp = await supabase.functions.invoke("modal-conversation", {
+      headers: { Authorization: `Bearer ${token}` },
+      body: { action: "start" , role:"system", content:context.cont_conversation,   }
+    });
+
+    console.log("createConversation -> raw resp:", resp);
+
+    // resp puede ser { data: "...json string..." } o { data: { ... } }
+    let parsed = null;
+
+    if (typeof resp?.data === "string") {
+      try {
+        parsed = JSON.parse(resp.data);
+      } catch (e) {
+        console.warn("No se pudo parsear resp.data como JSON:", e, resp.data);
+        parsed = null;
+      }
+    } else if (typeof resp?.data === "object" && resp.data !== null) {
+      parsed = resp.data;
+    } else {
+      // fallback: quizá la respuesta viene en resp (sin data)
+      parsed = resp;
+    }
+
+    console.log("createConversation -> parsed payload:", parsed);
+
+    // buscar el id en varios lugares (robusto)
+    const convId =
+      parsed?.conversationId ||
+      parsed?.data?.conversationId ||
+      parsed?.data?.id ||
+      parsed?.id ||
+      parsed?.conversation_id ||
+      parsed?.data?.conversation_id;
+
+    if (!convId) {
+      console.warn("No se encontró conversationId en la respuesta parseada:", parsed);
+      setCreatingConversation(false);
+      return;
+    }
+
+    setConversationId(convId);
+    console.log("🟢 Conversación creada y guardada:", convId);
+
+  } catch (err) {
+    console.error("Error creando conversación:", err);
+  } finally {
+    setCreatingConversation(false);
+  }
+};
+
+
+  // --------- DELETE CONVERSATION (robusto) ----------
+  const deleteConversation = async (convIdParam) => {
+    try {
+      const convIdToUse = convIdParam ?? conversationId;
+      if (!convIdToUse) return;
+      const { data: { session } } = await supabase.auth.getSession();
+      const token = session?.access_token;
+
+      // algunas implementations esperan { action: "end", conversationId }, otras { action: "end", id }
+      const { data, error } = await supabase.functions.invoke("modal-conversation", {
+        headers: { Authorization: `Bearer ${token}` },
+        body: { action: "end", conversationId: convIdToUse }
+      });
+
+      console.log("deleteConversation -> response:", data);
+      setConversationId(null);
+    } catch (err) {
+      console.error("Error eliminando conversación:", err);
+    }
+  };
+
+  // ---------- CONVERT FILE TO BASE64 ----------
+  const fileToBase64 = (file) =>
+    new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onerror = (e) => reject(e);
+      reader.onload = () => resolve(reader.result.split(",")[1]);
+      reader.readAsDataURL(file);
+    });
+
+  // ---------- SEND MESSAGE (usa conversationId) ----------
+  const handleConversation = async ({ text }) => {
+    if (!conversationId) {
+      console.warn("No hay conversación activa todavía. conversationId:", conversationId);
+      // si no hay conv, opcionalmente intentar crear una sin que el usuario note
+      return;
+    }
+
+    try {
+      setLoading(true);
+      const { data: { session } } = await supabase.auth.getSession();
+      const token = session?.access_token;
+
+      let filesInput = [];
+ 
+      if (attachedFiles.length > 0) {
+  for (const file of attachedFiles) {
+    const base64 = await fileToBase64(file);
+    filesInput.push({
+      type: "input_file",
+      filename: file.name,
+      file_data: `data:${file.type};base64,${base64}`
+    });
+  }
+}
+
+      if (selectedVectorFile) {
+        // si el archivo del vector viene sólo con id
+        filesInput.push({
+          type: "input_file",
+          file_id: selectedVectorFile.id
+        });
+      }
+
+      const payload = {
+        action: "message",
+        conversationId,
+        vectorStoreId: selectedVectorFile?.vector_store_id ?? null,
+        fileIds: selectedVectorFile ? [selectedVectorFile.id] : [],
+        input: [
+          {
+            role: "user",
+            content: [
+              { type: "input_text", text },
+              ...filesInput
+            ]
+          }
+        ]
+      };
+      const { data: invokeData, error } = await supabase.functions.invoke(
+        "modal-conversation",
+        {
+          headers: { Authorization: `Bearer ${token}` },
+          body: payload
+        }
+      );
+
+      if (error) throw error;
+
+      console.log("handleConversation -> RAW invokeData:", invokeData);
+
+      const parsed = normalizeInvokeResponse({ data: invokeData });
+      console.log("handleConversation -> PARSED:", parsed);
+
+      // 🔥 EXTRACTOR DEFINITIVO
+      let assistantText = null;
+
+      // 1) directo
+      if (parsed?.data?.output_text) {
+        assistantText = parsed.data.output_text;
+      }
+
+      // 2) buscar el message
+      if (!assistantText && Array.isArray(parsed?.data?.output)) {
+        const msgBlock = parsed.data.output.find(o => o.type === "message");
+        if (msgBlock?.content?.[0]?.text) {
+          assistantText = msgBlock.content[0].text;
+        }
+      }
+
+      // 3) fallback
+      assistantText = assistantText || "Sin respuesta del modelo.";
+
+      setMessages(prev => [
+        ...prev,
+        { role: "assistant", content: cleanAssistantResponse(assistantText) }
+      ]);
+
+
+      setAttachedFiles([]);
+      setAttachedPreviews([]);
+
+
+    } catch (err) {
+      console.error("Error en handleConversation:", err);
+      setMessages(prev => [...prev, { role: "assistant", content: "Ocurrió un error al procesar tu mensaje." }]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // ---------- VECTORES ----------
+  const fetchVectorStores = async () => {
+    try {
+      setLoadingVectors(true);
+      const { data: { session } } = await supabase.auth.getSession();
+      const token = session?.access_token;
+
+      const { data, error } = await supabase.functions.invoke("files-and-vector-stores-api", {
+        headers: { Authorization: `Bearer ${token}` },
+        body: { module: "vectorStores", action: "list" }
+      });
+
+      if (error) throw error;
+      setVectorStores(Array.isArray(data) ? data : (data?.data ?? []));
+    } catch (err) {
+      console.error("Error loading vector stores:", err);
+      setVectorStores([]);
+    } finally {
+      setLoadingVectors(false);
+    }
+  };
+
+  useEffect(() => {
+    if (open) fetchVectorStores();
+  }, [open]);
+
+  const loadFilesForVector = async (vectorStoreId) => {
+    try {
+      setLoadingFiles(true);
+      const { data: { session } } = await supabase.auth.getSession();
+      const token = session?.access_token;
+
+      const { data, error } = await supabase.functions.invoke("files-and-vector-stores-api", {
+        headers: { Authorization: `Bearer ${token}` },
+        body: { module: "vectorStoreFiles", action: "list", params: { vector_store_id: vectorStoreId } }
+      });
+
+      if (error) throw error;
+      setVectorFiles(Array.isArray(data) ? data : (data?.data ?? []));
+    } catch (err) {
+      console.error("Error loading vector files:", err);
+      setVectorFiles([]);
+    } finally {
+      setLoadingFiles(false);
+    }
+  };
+
+  // ---------- UI helpers ----------
+ const handleAttach = (e) => {
+  const files = Array.from(e.target.files);
+  if (!files.length) return;
+
+  setAttachedFiles(prev => [...prev, ...files]);
+  setAttachedPreviews(prev => [...prev, ...files.map(f => f.name)]);
+};
+
+
+  const handleSelectVectorFile = (file) => {
+    setSelectedVectorFile(file);
+  };
+
+  // ---------- Send flow ----------
+  const handleSend = async () => {
+    if (!input.trim() && attachedFiles.length === 0 && !selectedVectorFile) return;
+
+    // esperar si aún se está creando la conversación
+    if (creatingConversation) {
+      console.log("Esperando a que se cree la conversación...");
+      // opcional: podrías mostrar un toast; aquí simplemente retornamos
+      return;
+    }
+
+    if (!conversationId) {
+      console.warn("No hay conversationId — intentaremos crear una ahora.");
+      await createConversation();
+      if (!conversationId) {
+        setMessages(prev => [...prev, { role: "assistant", content: "No se pudo crear la conversación. Intenta de nuevo." }]);
+        return;
+      }
+    }
+
+    const userText = input.trim() || (selectedVectorFile ? `Consultar archivo vector: ${selectedVectorFile.filename || selectedVectorFile.id}` : "");
+    setMessages(prev => [...prev, { role: "user", content: userText }]);
+    setInput("");
+
+    await handleConversation({ text: userText });
+  };
+
+  const handleApply = () => {
+    const last = [...messages].reverse().find(m => m.role === "assistant");
+    if (last && onAccept) {
+      onAccept(last.content);
+      onClose();
+    }
+  };
+    const cleanAssistantResponse = (text) => {
+    if (!text) return text;
+
+    // Frases que quieres eliminar (puedes agregar más)
+    const patterns = [
+      /^claro[, ]*/i,
+      /^por supuesto[, ]*/i,
+      /^aquí tienes[, ]*/i,
+      /^con gusto[, ]*/i,
+      /^hola[, ]*/i,
+      /^perfecto[, ]*/i,
+      /^entendido[, ]*/i,
+      /^muy bien[, ]*/i,
+      /^ok[, ]*/i,
+    ];
+
+    let cleaned = text.trim();
+
+    for (const p of patterns) {
+      cleaned = cleaned.replace(p, "").trim();
+    }
+
+    return cleaned;
+  };
+
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className="max-w-6xl w-[95vw] h-[85vh] p-6 flex flex-col relative">
+         {/* Botón siempre visible */}
+          <button
+            onClick={onClose}
+            className="absolute top-3 right-3 text-gray-400 hover:text-gray-600 transition z-50"
+          >
+            ✕
+          </button>
+        <DialogHeader>
+          <DialogTitle>Asistente Inteligente</DialogTitle>
+        </DialogHeader>
+
+        <div className="flex-1 pt-4 min-h-0">
+          <div className="flex gap-6 h-full min-h-0">
+
+            {/* Left: vectors */}
+            <Card className="w-1/3 min-w-[250px] max-w-sm flex flex-col bg-muted/20 border border-gray-200 rounded-2xl">
+              <CardContent className="flex flex-col flex-1 p-4">
+                <h3 className="font-semibold text-sm mb-3">Vector Stores</h3>
+                <ScrollArea className="flex-1">
+                  {loadingVectors ? (
+                    <p className="text-gray-500 text-sm text-center mt-10">Cargando vector stores...</p>
+                  ) : vectorStores.length === 0 ? (
+                    <p className="text-gray-500 text-sm text-center mt-10">No hay vector stores.</p>
+                  ) : (
+                    <ul className="space-y-2">
+                      {vectorStores.map((vector) => (
+                        <li key={vector.id}
+                          onClick={() => loadFilesForVector(vector.id)}
+                          className="border cursor-pointer hover:bg-blue-50 p-2 rounded-lg bg-white"
+                        >
+                          <strong className="truncate">{vector.name || vector.id}</strong>
+                          <p className="text-xs text-gray-400 truncate">{vector.description || vector.id}</p>
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </ScrollArea>
+
+                <div className="mt-4">
+                  <h4 className="font-semibold text-sm mb-2">Archivos del Vector</h4>
+                  {loadingFiles ? (
+                    <p className="text-sm text-gray-500">Cargando archivos...</p>
+                  ) : selectedVectorFile ? (
+                    <div className="text-sm text-gray-700 mb-2">
+                      Seleccionado: <strong>{selectedVectorFile.filename ?? selectedVectorFile.id}</strong>
+                    </div>
+                  ) : (
+                    <p className="text-sm text-gray-500">Selecciona un archivo del vector</p>
+                  )}
+
+                  <ul className="space-y-2 max-h-40 overflow-auto mt-2">
+                    {vectorFiles.map((file) => (
+                      <li key={file.id}
+                        onClick={() => handleSelectVectorFile(file)}
+                        className={`p-2 rounded-lg cursor-pointer border ${selectedVectorFile?.id === file.id ? "bg-blue-50 border-blue-300" : "bg-white"}`}
+                      >
+                        <div className="text-sm font-medium">{file.filename}</div>
+                        <div className="text-xs text-gray-400">{file.id}</div>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+
+                <div className="mt-4 flex-shrink-0">
+                  <Button variant="outline" className="w-full" onClick={() => alert("Funcionalidad Subir a vector store no implementada aquí")}>Subir archivo (vector)</Button>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Right: Chat */}
+            <Card className="flex-1 flex flex-col min-w-[350px] bg-background border border-gray-200 rounded-2xl">
+              <CardContent className="flex flex-col flex-1 p-4 min-h-0">
+
+                <h3 className="font-semibold text-sm mb-3 flex-shrink-0">Chat con IA</h3>
+
+                <div className="flex-1 flex flex-col min-h-0">
+                  {/* CONTENEDOR SCROLL DE LOS MENSAJES */}
+                  <div className="flex-1 overflow-y-auto min-h-0 border border-gray-200 rounded-lg p-3 space-y-3 bg-gray-50 break-words whitespace-pre-wrap">
+                    {messages.length === 0 ? (
+                    <p className="text-gray-400 text-sm text-center mt-10">Inicia una conversación...</p>
+                  ) : (
+                    messages.map((m, i) => (
+                      <div key={i} className={`break-words whitespace-pre-wrap p-3 rounded-xl shadow-sm max-w-[85%] ${m.role === "user" ? "bg-blue-50 text-blue-800 ml-auto" : m.role === "assistant" ? "bg-white text-gray-800 mr-auto border border-gray-200" : "bg-gray-100 text-gray-700 mr-auto"}`}>
+                        <strong className="font-bold">{m.role === "user" ? "Tú:" : m.role === "assistant" ? "IA:" : "Sistema:"}</strong>{" "}
+                        <ReactMarkdown>{m.content}</ReactMarkdown>
+                        
+                      </div>
+                    ))
+                  )}
+
+                  {loading && (
+                    <div className="flex items-center space-x-2 p-3 bg-white border border-gray-200 rounded-xl mr-auto max-w-fit shadow-sm flex-shrink-0">
+                      <svg className="animate-spin h-4 w-4 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                      </svg>
+                      <span className="text-sm text-gray-600">La IA está respondiendo...</span>
+                    </div>
+                  )}
+
+                  <div ref={messagesEndRef} />
+                </div>
+                </div>
+
+                {attachedPreviews.length > 0 && (
+                  <ul className="text-xs text-gray-600 mt-2">
+                    {attachedPreviews.map((name, i) => (
+                      <li key={i}>📄 {name}</li>
+                    ))}
+                  </ul>
+                )}
+
+                <div className="flex gap-2 mt-4 items-end flex-shrink-0">
+                  <label className="cursor-pointer text-gray-600 hover:text-blue-600 self-center">
+                    <Paperclip className="w-5 h-5" />
+                    <input type="file" accept=".pdf,.txt,.doc,.docx" multiple  className="hidden" onChange={handleAttach} />
+                  </label>
+
+                  <textarea
+                    value={input}
+                    onChange={(e) => setInput(e.target.value)}
+                    placeholder="Escribe tu pregunta..."
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter" && !e.shiftKey) {
+                        e.preventDefault();
+                        handleSend();
+                      }
+                    }}
+                    rows={1}
+                    className="flex-1 resize-none rounded-xl border border-gray-300 p-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 max-h-32 overflow-y-auto bg-white shadow-inner"
+                    style={{ minHeight: "38px" }}
+                  />
+
+                  <Button onClick={handleSend} disabled={loading || creatingConversation || (!input.trim() && attachedFiles.length === 0 && !selectedVectorFile)} className="shadow-md">
+                    {creatingConversation ? "Preparando..." : loading ? "Enviando..." : "Enviar"}
+                  </Button>
+
+                  <Button onClick={handleApply} disabled={!messages.some((m) => m.role === "assistant")} className="shadow-md">
+                    Aplicar mejora
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/asignaturas/EditBibliografíaButton.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef, useState } from "react"
-import { supabase } from "@/auth/supabase"
+import { supabase,useSupabaseAuth } from "@/auth/supabase"
 import { Button } from "../ui/button"
 import {
   Dialog,
@@ -35,11 +35,13 @@ export function EditBibliografiaButton({
   const [open, setOpen] = useState(false)
   const [saving, setSaving] = useState(false)
   const [text, setText] = useState("")
+  const auth = useSupabaseAuth()
 
   const initialTextRef = useRef("")
   const lines = useMemo(() => parseLines(text), [text])
   const dirty = useMemo(() => initialTextRef.current !== text, [text])
 
+  // 🔹 Abre el editor y carga los valores actuales
   function openEditor() {
     const start = (value ?? []).join("\n")
     setText(start)
@@ -47,52 +49,110 @@ export function EditBibliografiaButton({
     setOpen(true)
   }
 
+  // ✅ Función para generar diferencias tipo JSON Patch
+  function generateDiff(oldRefs: string[], newRefs: string[]) {
+    const changes: any[] = []
+
+    // Si son distintos en contenido o longitud
+    if (JSON.stringify(oldRefs) !== JSON.stringify(newRefs)) {
+      changes.push({
+        op: "replace",
+        path: "/bibliografia",
+        from: oldRefs,
+        value: newRefs,
+      })
+    }
+
+    return changes
+  }
+
   async function save() {
-    try {
     setSaving(true)
-      const refs = parseLines(text)
+    try {
+      // 1️⃣ Obtener bibliografía anterior
+      const { data: oldData, error: oldError } = await supabase
+        .from("asignaturas")
+        .select("bibliografia")
+        .eq("id", asignaturaId)
+        .maybeSingle()
+
+      if (oldError) throw oldError
+
+      const oldRefs = oldData?.bibliografia ?? []
+      const newRefs = parseLines(text)
+
+      // 2️⃣ Generar diferencias
+      const diff = generateDiff(oldRefs, newRefs)
+
+      // 3️⃣ Guardar respaldo si hay cambios
+      if (diff.length > 0) {
+        const { error: backupError } = await supabase
+          .from("historico_cambios_asignaturas") // misma tabla de respaldo
+          .insert({
+            id_asignatura: asignaturaId,
+            json_cambios: diff, // jsonb
+            user_id: auth.user?.id,
+            created_at: new Date().toISOString(),
+          })
+
+        if (backupError) throw backupError
+      }
+
+      // 4️⃣ Actualizar bibliografía en asignaturas
       const { data, error } = await supabase
         .from("asignaturas")
-        .update({ bibliografia: refs })
+        .update({ bibliografia: newRefs })
         .eq("id", asignaturaId)
         .select()
         .maybeSingle()
 
       if (error) throw error
 
-      onSaved((data as any)?.bibliografia ?? refs)
+      // 5️⃣ Refrescar estado local
-      initialTextRef.current = refs.join("\n")
+      onSaved((data as any)?.bibliografia ?? newRefs)
-      toast.success(`${refs.length} referencia(s) guardada(s).`)
+      initialTextRef.current = newRefs.join("\n")
+      toast.success(`${newRefs.length} referencia(s) guardada(s).`)
       setOpen(false)
-    } catch (e: any) {
+    } catch (err: any) {
-      toast.error(e?.message ?? "No se pudo guardar")
+      toast.error(err.message ?? "No se pudo guardar la bibliografía")
     } finally {
       setSaving(false)
     }
   }
 
-  // Acciones
+  // 🔧 Acciones extra
   function actionTrim() {
     const next = parseLines(text).map((s) => s.replace(/\s+/g, " ").trim())
     setText(next.join("\n"))
   }
+
   function actionDedupe() {
     const seen = new Set<string>()
     const next: string[] = []
     for (const l of parseLines(text)) {
       const k = l.toLowerCase()
-      if (!seen.has(k)) { seen.add(k); next.push(l) }
+      if (!seen.has(k)) {
+        seen.add(k)
+        next.push(l)
+      }
     }
     setText(next.join("\n"))
   }
+
   function actionSort() {
-    const next = [...parseLines(text)].sort((a, b) => a.localeCompare(b, undefined, { sensitivity: "base" }))
+    const next = [...parseLines(text)].sort((a, b) =>
+      a.localeCompare(b, undefined, { sensitivity: "base" }),
+    )
     setText(next.join("\n"))
   }
+
   async function actionImportClipboard() {
     try {
       const clip = await navigator.clipboard.readText()
-      if (!clip) { toast("Portapapeles vacío"); return }
+      if (!clip) {
+        toast("Portapapeles vacío")
+        return
+      }
       const next = [...parseLines(text), ...parseLines(clip)]
       setText(next.join("\n"))
       toast.success("Texto importado")
@@ -100,6 +160,7 @@ export function EditBibliografiaButton({
       toast.error(e?.message ?? "No se pudo leer el portapapeles")
     }
   }
+
   async function actionExportClipboard() {
     try {
       await navigator.clipboard.writeText(parseLines(text).join("\n"))
@@ -109,7 +170,7 @@ export function EditBibliografiaButton({
     }
   }
 
-  // Atajo guardar
+  // ⌨️ Atajo Ctrl+S
   useEffect(() => {
     function onKey(e: KeyboardEvent) {
       if (!open) return
@@ -120,7 +181,6 @@ export function EditBibliografiaButton({
     }
     window.addEventListener("keydown", onKey)
     return () => window.removeEventListener("keydown", onKey)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open, saving, dirty, text])
 
   return (

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/historico/HistorialCambiosModal.tsx

@@ -0,0 +1,92 @@
+import { useQuery } from "@tanstack/react-query"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { supabase } from "@/auth/supabase"
+import ReactMarkdown from "react-markdown"
+import { useSupabaseAuth } from "@/auth/supabase"
+
+export function HistorialCambiosModal({
+  open,
+  onClose,
+  planId,
+  onRestore, // 🔥 recibiremos una función del padre para restaurar
+}: {
+  open: boolean
+  onClose: () => void
+  planId: string
+  onRestore: (key: string, value: string) => void
+}) {
+  const auth = useSupabaseAuth()
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["historico_cambios", planId, auth.user?.id],
+    queryFn: async () => {
+      const { data, error } = await supabase
+        .from("historico_cambios")
+        .select("id, json_cambios, user_id, created_at")
+        .eq("id_plan_estudios", planId)
+        .eq("user_id", auth.user?.id) // ✅ filtro por usuario actual
+        .order("created_at", { ascending: false })
+
+      if (error) throw error
+      return data
+    },
+    enabled: !!auth.user?.id, // ✅ solo corre si hay usuario autenticado
+  })
+
+    return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className="max-w-3xl">
+        <DialogHeader>
+          <DialogTitle>Histórico de cambios</DialogTitle>
+        </DialogHeader>
+
+        {isLoading && <p className="text-sm text-gray-500">Cargando historial...</p>}
+        {error && <p className="text-red-500 text-sm">Error al cargar: {String(error)}</p>}
+        {!isLoading && !error && (!data || data.length === 0) && (
+          <p className="text-gray-500 text-sm">No hay cambios registrados.</p>
+        )}
+
+        <div className="space-y-4 max-h-[60vh] overflow-y-auto">
+          {data?.map((item) => {
+            const diff = item.json_cambios?.[0]
+            const key = diff?.path?.replace("/", "")
+            return (
+              <div
+                key={item.id}
+                className="rounded-lg border p-3 bg-white/70 dark:bg-neutral-900/50"
+              >
+                <div className="flex justify-between text-xs text-neutral-500 mb-2">
+                  <span>Usuario: {item.user_id || "Desconocido"}</span>
+                  <span>{new Date(item.created_at).toLocaleString()}</span>
+                </div>
+
+                <div className="text-xs text-gray-700 font-mono whitespace-pre-wrap">
+                  <p><strong>Campo:</strong> {key}</p>
+                  <p><strong>Antes:</strong> {diff?.from || "—"}</p>
+                  <p><strong>Después:</strong> {diff?.value || "—"}</p>
+                </div>
+
+                <Button
+                  size="sm"
+                  variant="outline"
+                  className="mt-2"
+                  onClick={() => onRestore(key, diff.from)}
+                >
+                  Restaurar
+                </Button>
+              </div>
+            )
+          })}
+        </div>
+
+        <div className="mt-4 text-right">
+          <Button variant="outline" onClick={onClose}>
+            Cerrar
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+
+}

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/components/planes/CreatePlanDialog.tsx

@@ -1,15 +1,24 @@
-import { useRouter } from "@tanstack/react-router"
+import { useRouter } from "@tanstack/react-router";
-import { useSupabaseAuth } from "@/auth/supabase"
+import { useSupabaseAuth } from "@/auth/supabase";
-import { useState, useEffect, useCallback } from "react"
+import { useState, useEffect, useCallback } from "react";
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
+import {
-import { Label } from "@/components/ui/label"
+  Dialog,
-import { Textarea } from "@/components/ui/textarea"
+  DialogContent,
-import { Input } from "@/components/ui/input"
+  DialogHeader,
-import { CarreraCombobox, FacultadCombobox } from "@/components/users/procedencia-combobox"
+  DialogTitle,
-import { Button } from "@/components/ui/button"
+  DialogFooter,
-import { postAPI } from "@/lib/api"
+} from "@/components/ui/dialog";
-import { supabase } from "@/auth/supabase"
+import { Label } from "@/components/ui/label";
-import { DetailDialog } from "@/components/archivos/DetailDialog"
+import { Textarea } from "@/components/ui/textarea";
+import { Input } from "@/components/ui/input";
+import {
+  CarreraCombobox,
+  FacultadCombobox,
+} from "@/components/users/procedencia-combobox";
+import { Button } from "@/components/ui/button";
+import { postAPI } from "@/lib/api";
+import { supabase } from "@/auth/supabase";
+import { DetailDialog } from "@/components/archivos/DetailDialog";
 import type { RefRow } from "@/types/RefRow";
 
 // ————————————————————————————————————————————————————————————————
@@ -50,42 +59,51 @@ function extIcon(ext: string) {
 // ————————————————————————————————————————————————————————————————
 // Componente principal
 // ————————————————————————————————————————————————————————————————
-export function CreatePlanDialog({ open, onOpenChange }: { open: boolean; onOpenChange: (v: boolean) => void }) {
+export function CreatePlanDialog({
-  const router = useRouter()
+  open,
-  const auth = useSupabaseAuth()
+  onOpenChange,
-  const role = auth.claims?.role
+}: {
+  open: boolean;
+  onOpenChange: (v: boolean) => void;
+}) {
+  const router = useRouter();
+  const auth = useSupabaseAuth();
+  const role = auth.claims?.role;
 
-  const [saving, setSaving] = useState(false)
+  const [saving, setSaving] = useState(false);
-  const [err, setErr] = useState<string | null>(null)
+  const [err, setErr] = useState<string | null>(null);
 
-  const [facultadId, setFacultadId] = useState(auth.claims?.facultad_id ?? "")
+  const [facultadId, setFacultadId] = useState(auth.claims?.facultad_id ?? "");
-  const [carreraId, setCarreraId] = useState(auth.claims?.carrera_id ?? "")
+  const [carreraId, setCarreraId] = useState(auth.claims?.carrera_id ?? "");
-  const [nivel, setNivel] = useState("")
+  const [nivel, setNivel] = useState("");
   const [prompt, setPrompt] = useState(
     "Genera un plan de estudios claro y realista: "
-  )
+  );
 
-  const [dbFiles, setDbFiles] = useState<{
+  const [dbFiles, setDbFiles] = useState<
+    {
       id: string;
       titulo: string;
       s3_file_path: string;
       fecha_subida?: string;
       tags?: string[];
-  }[]>([])
+    }[]
-  const [selectedFiles, setSelectedFiles] = useState<string[]>([])
+  >([]);
-  const [lastSelectedIndex, setLastSelectedIndex] = useState<number | null>(null)
+  const [selectedFiles, setSelectedFiles] = useState<string[]>([]);
-  const [searchTerm, setSearchTerm] = useState("")
+  const [lastSelectedIndex, setLastSelectedIndex] = useState<number | null>(
-  const [currentPage, setCurrentPage] = useState(1)
+    null
-  const itemsPerPage = 10
+  );
-  const debouncedSearchTerm = useDebounce(searchTerm, 300)
+  const [searchTerm, setSearchTerm] = useState("");
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 10;
+  const debouncedSearchTerm = useDebounce(searchTerm, 300);
   const totalPages = Math.ceil(dbFiles.length / itemsPerPage);
 
   const [previewRow, setPreviewRow] = useState<RefRow | null>(null);
 
-  const lockFacultad = role === "secretario_academico" || role === "jefe_carrera"
+  const lockFacultad =
-  const lockCarrera = role === "jefe_carrera"
+    role === "secretario_academico" || role === "jefe_carrera";
-
+  const lockCarrera = role === "jefe_carrera";
-  
 
   useEffect(() => {
     async function fetchDbFiles() {
@@ -94,20 +112,25 @@ export function CreatePlanDialog({ open, onOpenChange }: { open: boolean; onOpen
           .from("documentos")
           .select("documentos_id, titulo_archivo, fecha_subida, tags")
           .ilike("titulo_archivo", `%${debouncedSearchTerm}%`)
-          .range((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage - 1);
+          .range(
+            (currentPage - 1) * itemsPerPage,
+            currentPage * itemsPerPage - 1
+          );
 
         if (error) {
           console.error("Error fetching files from database:", error);
           return;
         }
 
-        setDbFiles((data || []).map((file: any) => ({
+        setDbFiles(
+          (data || []).map((file: any) => ({
             id: file.documentos_id,
             titulo: file.titulo_archivo,
-          s3_file_path: file.titulo_archivo,
+            s3_file_path: `prueba-referencias/documento_${file.documentos_id}.pdf`,
             fecha_subida: file.fecha_subida,
             tags: file.tags || [],
-        })));
+          }))
+        );
       } catch (err) {
         console.error("Unexpected error fetching files:", err);
       }
@@ -116,41 +139,59 @@ export function CreatePlanDialog({ open, onOpenChange }: { open: boolean; onOpen
     if (open) fetchDbFiles();
   }, [open, debouncedSearchTerm, currentPage]);
 
-  const isSelected = useCallback((path: string) => selectedFiles.includes(path), [selectedFiles]);
+  const isSelected = useCallback(
+    (path: string) => selectedFiles.includes(path),
+    [selectedFiles]
+  );
 
-  const toggleSelected = useCallback((path: string) => {
+  const toggleSelected = useCallback((id: string) => {
-    setSelectedFiles(prev => prev.includes(path) ? prev.filter(p => p !== path) : [...prev, path]);
+    setSelectedFiles((prev) =>
+      prev.includes(id) ? prev.filter((p) => p !== id) : [...prev, id]
+    );
   }, []);
 
-  const replaceSelection = useCallback((path: string) => {
+  const replaceSelection = useCallback((id: string) => {
-    setSelectedFiles([path]);
+    setSelectedFiles([id]);
   }, []);
 
-  const rangeSelect = useCallback((start: number, end: number) => {
+  const rangeSelect = useCallback(
+    (start: number, end: number) => {
       const [s, e] = start < end ? [start, end] : [end, start];
-    const paths = dbFiles.slice(s, e + 1).map(f => f.s3_file_path);
+      const ids = dbFiles.slice(s, e + 1).map((f) => f.id);
-    setSelectedFiles(prev => Array.from(new Set([...prev, ...paths])));
+      setSelectedFiles((prev) => Array.from(new Set([...prev, ...ids])));
-  }, [dbFiles]);
+    },
+    [dbFiles]
+  );
 
-  const handleCardClick = useCallback((e: React.MouseEvent, index: number, file: { s3_file_path: string }) => {
+  const handleCardClick = useCallback(
-    const path = file.s3_file_path;
+    (e: React.MouseEvent, index: number, file: { id: string }) => {
+      const id = file.id;
 
       if (e.shiftKey && lastSelectedIndex !== null) {
         rangeSelect(lastSelectedIndex, index);
       } else if (e.metaKey || e.ctrlKey) {
-      toggleSelected(path);
+        toggleSelected(id);
         setLastSelectedIndex(index);
       } else {
-      if (isSelected(path) && selectedFiles.length === 1) {
+        if (isSelected(id) && selectedFiles.length === 1) {
           // si ya es el único seleccionado, des-selecciona
           setSelectedFiles([]);
           setLastSelectedIndex(null);
         } else {
-        replaceSelection(path);
+          replaceSelection(id);
           setLastSelectedIndex(index);
         }
       }
-  }, [isSelected, lastSelectedIndex, rangeSelect, replaceSelection, selectedFiles.length, toggleSelected]);
+    },
+    [
+      isSelected,
+      lastSelectedIndex,
+      rangeSelect,
+      replaceSelection,
+      selectedFiles.length,
+      toggleSelected,
+    ]
+  );
 
   const clearSelection = () => {
     setSelectedFiles([]);
@@ -158,30 +199,51 @@ export function CreatePlanDialog({ open, onOpenChange }: { open: boolean; onOpen
   };
 
   async function crearConIA() {
-    setErr(null)
+    setErr(null);
-    if (!carreraId) { setErr("Selecciona una carrera."); return }
+    if (!carreraId) {
-    setSaving(true)
+      setErr("Selecciona una carrera.");
+      return;
+    }
+    setSaving(true);
     try {
-      const res = await postAPI("/api/generar/plan", {
+
-        carreraId,
+      const {
-        prompt: prompt,
+        data: { session },
+      } = await supabase.auth.getSession();
+      const token = session?.access_token;
+
+      const { data, error } = await supabase.functions.invoke(
+        "crear-plan-estudios",
+        {
+          headers: { Authorization: `Bearer ${token}` },
+          body: {
+            carrera_id: carreraId,
+            prompt_usuario: prompt,
             insert: true,
-        files: selectedFiles,
+            archivos_a_usar: [],
-        uuid: auth.user?.id,
+          },
-      })
+        }
-      const newId = (res as any)?.id || (res as any)?.plan?.id || (res as any)?.data?.id
+      );
+      if (error) throw error;
+
+      const res = data;
+
+      const newId =
+        (res as any)?.id || (res as any)?.plan?.id || (res as any)?.data?.id;
       if (newId) {
-        onOpenChange(false)
+        onOpenChange(false);
-        router.invalidate()
+        router.invalidate();
-        router.navigate({ to: "/plan/$planId", params: { planId: newId } })
+        router.navigate({ to: "/plan/$planId", params: { planId: newId } });
       } else {
-        onOpenChange(false)
+        onOpenChange(false);
-        router.invalidate()
+        router.invalidate();
       }
     } catch (e: any) {
-      setErr(typeof e?.message === "string" ? e.message : "Error al generar el plan.")
+      setErr(
+        typeof e?.message === "string" ? e.message : "Error al generar el plan."
+      );
     } finally {
-      setSaving(false)
+      setSaving(false);
     }
   }
 
@@ -192,7 +254,9 @@ export function CreatePlanDialog({ open, onOpenChange }: { open: boolean; onOpen
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="min-w-[65vw] max-w-4xl max-h-[90vh] overflow-y-auto">
         <DialogHeader>
-          <DialogTitle className="font-mono">Nuevo plan de estudios (IA)</DialogTitle>
+          <DialogTitle className="font-mono">
+            Nuevo plan de estudios (IA)
+          </DialogTitle>
         </DialogHeader>
 
         <div className="grid gap-4 md:grid-cols-2">
@@ -215,7 +279,10 @@ export function CreatePlanDialog({ open, onOpenChange }: { open: boolean; onOpen
             <Label>Facultad</Label>
             <FacultadCombobox
               value={facultadId}
-              onChange={(id) => { setFacultadId(id); setCarreraId("") }}
+              onChange={(id) => {
+                setFacultadId(id);
+                setCarreraId("");
+              }}
               disabled={lockFacultad}
               placeholder="Elige una facultad…"
             />
@@ -228,7 +295,11 @@ export function CreatePlanDialog({ open, onOpenChange }: { open: boolean; onOpen
               value={carreraId}
               onChange={setCarreraId}
               disabled={!facultadId || lockCarrera}
-              placeholder={facultadId ? "Elige una carrera…" : "Selecciona una facultad primero"}
+              placeholder={
+                facultadId
+                  ? "Elige una carrera…"
+                  : "Selecciona una facultad primero"
+              }
             />
           </div>
 
@@ -246,11 +317,19 @@ export function CreatePlanDialog({ open, onOpenChange }: { open: boolean; onOpen
             <div className="text-sm text-neutral-600">
               {selectedFiles.length > 0 ? (
                 <span>
-                  {selectedFiles.length} seleccionado{selectedFiles.length > 1 ? 's' : ''}
+                  {selectedFiles.length} seleccionado
-                  <button className="ml-3 underline hover:no-underline" onClick={clearSelection}>Limpiar</button>
+                  {selectedFiles.length > 1 ? "s" : ""}
+                  <button
+                    className="ml-3 underline hover:no-underline"
+                    onClick={clearSelection}
+                  >
+                    Limpiar
+                  </button>
                 </span>
               ) : (
-                <span>Tip: ⇧ para seleccionar rango, ⌘/Ctrl para múltiples.</span>
+                <span>
+                  Tip: ⇧ para seleccionar rango, ⌘/Ctrl para múltiples.
+                </span>
               )}
             </div>
           </div>
@@ -258,10 +337,13 @@ export function CreatePlanDialog({ open, onOpenChange }: { open: boolean; onOpen
           {/* Grid de archivos con selección tipo file manager */}
           <div className="md:col-span-2 space-y-1">
             <Label>Archivos de referencia (opcional)</Label>
-            <div role="grid" className="grid gap-4 xs:grid-cols-2 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
+            <div
+              role="grid"
+              className="grid gap-4 xs:grid-cols-2 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
+            >
               {dbFiles.map((file, index) => {
                 const ext = fileExt(file.titulo);
-                const selected = isSelected(file.s3_file_path);
+                const selected = isSelected(file.id);
                 console.log(file);
 
                 return (
@@ -285,10 +367,10 @@ export function CreatePlanDialog({ open, onOpenChange }: { open: boolean; onOpen
                         fecha_subida: file.fecha_subida ?? null,
                         tags: file.tags ?? null,
                         instrucciones: "",
-                      })
+                      });
                     }}
                     onKeyDown={(e) => {
-                      if (e.key === 'Enter' || e.key === ' ') {
+                      if (e.key === "Enter" || e.key === " ") {
                         e.preventDefault();
                         handleCardClick(e as any, index, file);
                       }
@@ -296,31 +378,51 @@ export function CreatePlanDialog({ open, onOpenChange }: { open: boolean; onOpen
                     className={[
                       "group relative rounded-2xl border bg-white p-4 text-left shadow-sm transition",
                       "hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500",
-                      selected ? "border-blue-500 ring-2 ring-blue-500 shadow-md" : "border-neutral-200 hover:border-neutral-300",
+                      selected
-                    ].join(' ')}
+                        ? "border-blue-500 ring-2 ring-blue-500 shadow-md"
+                        : "border-neutral-200 hover:border-neutral-300",
+                    ].join(" ")}
                   >
                     {/* Outline animado tipo file manager */}
-                    <span className={[
+                    <span
+                      className={[
                         "pointer-events-none absolute inset-0 rounded-2xl ring-2 ring-blue-500",
                         "opacity-0 group-aria-selected:opacity-100 group-focus:opacity-100 transition-opacity",
-                    ].join(' ')} />
+                      ].join(" ")}
+                    />
 
                     <div className="flex items-start gap-3">
                       <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border bg-neutral-50">
-                        <span className="text-lg" aria-hidden>{extIcon(ext)}</span>
+                        <span className="text-lg" aria-hidden>
+                          {extIcon(ext)}
+                        </span>
                       </div>
                       <div className="min-w-0 flex-1">
-                        <h3 className="font-semibold text-sm md:text-base truncate" title={file.titulo}>{file.titulo}</h3>
+                        <h3
+                          className="font-semibold text-sm md:text-base truncate"
+                          title={file.titulo}
+                        >
+                          {file.titulo}
+                        </h3>
                         {file.fecha_subida ? (
-                          <p className="text-xs text-neutral-600">{new Date(file.fecha_subida).toLocaleDateString()}</p>
+                          <p className="text-xs text-neutral-600">
+                            {new Date(file.fecha_subida).toLocaleDateString()}
+                          </p>
                         ) : (
-                          <p className="text-xs text-neutral-500">Fecha desconocida</p>
+                          <p className="text-xs text-neutral-500">
+                            Fecha desconocida
+                          </p>
                         )}
 
                         {file.tags && file.tags.length > 0 && (
                           <div className="mt-2 flex flex-wrap gap-1.5">
                             {file.tags.map((tag, i) => (
-                              <span key={i} className="text-[10px] px-2 py-0.5 bg-neutral-100 text-neutral-700 rounded-full">#{tag}</span>
+                              <span
+                                key={i}
+                                className="text-[10px] px-2 py-0.5 bg-neutral-100 text-neutral-700 rounded-full"
+                              >
+                                #{tag}
+                              </span>
                             ))}
                           </div>
                         )}
@@ -347,50 +449,69 @@ export function CreatePlanDialog({ open, onOpenChange }: { open: boolean; onOpen
                             fecha_subida: file.fecha_subida ?? null,
                             tags: file.tags ?? null,
                             instrucciones: "",
-                          })
+                          });
                         }}
-                      >Previsualizar</Button>
+                      >
+                        Previsualizar
+                      </Button>
                     </div>
 
                     {/* Footer compacto */}
                     <div className="mt-4 flex items-center justify-between text-xs text-neutral-600">
                       <span className="truncate">{ext.toUpperCase()}</span>
-                      {selected ? <span className="font-medium">Seleccionado</span> : <span className="opacity-60">Click para seleccionar</span>}
+                      {selected ? (
+                        <span className="font-medium">Seleccionado</span>
+                      ) : (
+                        <span className="opacity-60">
+                          Click para seleccionar
+                        </span>
+                      )}
                     </div>
                   </div>
-                )
+                );
               })}
 
               {dbFiles.length === 0 && (
-                <p className="text-sm text-neutral-500">No se encontraron archivos.</p>
+                <p className="text-sm text-neutral-500">
+                  No se encontraron archivos.
+                </p>
               )}
             </div>
 
             {/* Paginación mejorada */}
             {dbFiles.length > itemsPerPage && (
               <div className="mt-4 flex flex-wrap items-center justify-between gap-3">
-                <div className="text-sm text-neutral-700">Página {currentPage} de {totalPages}</div>
+                <div className="text-sm text-neutral-700">
+                  Página {currentPage} de {totalPages}
+                </div>
                 <div className="flex items-center gap-2">
                   <Button
                     variant="outline"
                     size="sm"
                     disabled={currentPage === 1}
                     onClick={() => setCurrentPage((p) => Math.max(p - 1, 1))}
-                  >Anterior</Button>
+                  >
+                    Anterior
+                  </Button>
                   <Input
                     className="h-8 w-16 text-center"
                     value={currentPage}
                     onChange={(e) => {
-                      const v = parseInt(e.target.value || '1', 10);
+                      const v = parseInt(e.target.value || "1", 10);
-                      if (!isNaN(v)) setCurrentPage(Math.min(Math.max(v, 1), totalPages));
+                      if (!isNaN(v))
+                        setCurrentPage(Math.min(Math.max(v, 1), totalPages));
                     }}
                   />
                   <Button
                     variant="outline"
                     size="sm"
                     disabled={currentPage === totalPages}
-                    onClick={() => setCurrentPage((p) => Math.min(p + 1, totalPages))}
+                    onClick={() =>
-                  >Siguiente</Button>
+                      setCurrentPage((p) => Math.min(p + 1, totalPages))
+                    }
+                  >
+                    Siguiente
+                  </Button>
                 </div>
               </div>
             )}
@@ -400,19 +521,26 @@ export function CreatePlanDialog({ open, onOpenChange }: { open: boolean; onOpen
         {err && <div className="text-sm text-red-600">{err}</div>}
 
         <DialogFooter className="flex flex-col-reverse sm:flex-row gap-2">
-          <Button variant="outline" className="w-full sm:w-auto" onClick={() => onOpenChange(false)}>Cancelar</Button>
+          <Button
-          <Button className="w-full sm:w-auto" onClick={crearConIA} disabled={saving}>
+            variant="outline"
+            className="w-full sm:w-auto"
+            onClick={() => onOpenChange(false)}
+          >
+            Cancelar
+          </Button>
+          <Button
+            className="w-full sm:w-auto"
+            onClick={crearConIA}
+            disabled={saving}
+          >
             {saving ? "Generando…" : "Generar y crear"}
           </Button>
         </DialogFooter>
       </DialogContent>
 
       {previewRow && (
-        <DetailDialog
+        <DetailDialog row={previewRow} onClose={() => setPreviewRow(null)} />
-          row={previewRow}
-          onClose={() => setPreviewRow(null)}
-        />
       )}
     </Dialog>
-  )
+  );
 }

src/components/planes/DownloadPlanPDF.tsx

@@ -0,0 +1,145 @@
+import { supabase } from "@/auth/supabase";
+import { Button } from "../ui/button";
+import { Download } from "lucide-react";
+
+export type PlanLike = Record<
+  string,
+  string | number | object | null | undefined
+>;
+
+export function DownloadPlanPDF({ plan }: { plan: Record<string, any> }) {
+  async function fetchPDF() {
+    const planObj = {
+      ...plan,
+      nivel_y_nombre_del_plan_de_estudios: `${plan["nivel"]} en ${plan["nombre"]}`,
+      nivel: undefined,
+      nombre: undefined,
+    };
+    const fileName = `Plan_${planObj.nivel_y_nombre_del_plan_de_estudios || "Desconocido"}.pdf`;
+    // const jsonData = JSON.stringify(planObj);
+
+    const triggerDownload = (blob: Blob, name: string) => {
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.setAttribute("download", name);
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      URL.revokeObjectURL(url);
+    };
+
+    const fetchBinaryFallback = async () => {
+      // Intenta construir la URL del runtime de Functions
+      const anyClient = supabase as any;
+      const baseUrl =
+        anyClient?.functions?.url ||
+        `${(anyClient?.supabaseUrl || "").replace(/\/$/, "")}/functions/v1`;
+      const { data: sess } = await supabase.auth.getSession();
+      const token = sess?.session?.access_token;
+
+      console.log(JSON.stringify(planObj, null, 2));
+      console.log(planObj);
+      
+      
+
+      const resp = await fetch(`${baseUrl}/carbone-io-api`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/pdf",
+          ...(token ? { Authorization: `Bearer ${token}` } : {}),
+        },
+        body: JSON.stringify({
+          action: "downloadReport",
+          templateId: "1302213091201757023",
+          fileName,
+          convertTo: "pdf",
+          data: planObj,
+        }),
+      });
+
+      if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+      const blob = await resp.blob();
+      triggerDownload(blob, fileName);
+    };
+
+    try {
+      // const { data, error } = await supabase.functions.invoke(
+      //   "carbone-io-api",
+      //   {
+      //     method: "POST",
+      //     headers: { Accept: "application/octet-stream" }, // preferir binario
+      //     body: {
+      //       action: "downloadReport",
+      //       templateId: "1302213091201757023",
+      //       fileName,
+      //       convertTo: "pdf",
+      //       data: planObj,
+      //     },
+      //   }
+      // );
+
+      // if (error) throw error;
+
+      // // Si ya viene binario, descargar directo
+      // if (typeof Blob !== "undefined" && data instanceof Blob) {
+      //   triggerDownload(data, fileName);
+      //   return;
+      // }
+      // if (data instanceof ArrayBuffer) {
+      //   triggerDownload(
+      //     new Blob([data], { type: "application/pdf" }),
+      //     fileName
+      //   );
+      //   return;
+      // }
+
+      // // Si vino como string (ej. empieza con %PDF), usa el fallback binario
+      // if (typeof data === "string") {
+      //   await fetchBinaryFallback();
+      //   return;
+      // }
+
+      // // Si vino JSON con base64, decodificar y descargar
+      // if (data && typeof data === "object") {
+      //   const b64 =
+      //     (data as any).file || (data as any).buffer || (data as any).base64;
+      //   if (typeof b64 === "string") {
+      //     const clean = b64.replace(/^data:.*;base64,/, "");
+      //     const binary = atob(clean);
+      //     const bytes = new Uint8Array(binary.length);
+      //     for (let i = 0; i < binary.length; i++)
+      //       bytes[i] = binary.charCodeAt(i);
+      //     triggerDownload(
+      //       new Blob([bytes], { type: "application/pdf" }),
+      //       fileName
+      //     );
+      //     return;
+      //   }
+      // }
+
+      // console.warn("Respuesta no reconocida para descarga de PDF.", {
+      //   type: typeof data,
+      // });
+
+      await fetchBinaryFallback();
+      return;
+    } catch (error) {
+      console.error("Error al obtener PDF:", error);
+    }
+  }
+
+  return (
+    <Button
+      variant="outline"
+      className="flex items-center gap-2"
+      onClick={() => void fetchPDF()}
+    >
+      Descargar PDF
+      <Download className="w-4 h-4" />
+    </Button>
+  );
+}
+
+export default DownloadPlanPDF;

src/components/planes/academic-sections.tsx

@@ -1,13 +1,26 @@
-import * as Icons from "lucide-react"
+import * as Icons from "lucide-react";
-import { useMemo, useState } from "react"
+import { useMemo, useState } from "react";
-import { useSuspenseQuery, useMutation, useQueryClient, queryOptions } from "@tanstack/react-query"
+import {
-import { Button } from "@/components/ui/button"
+  useSuspenseQuery,
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
+  useMutation,
-import { Textarea } from "@/components/ui/textarea"
+  useQueryClient,
-import { supabase } from "@/auth/supabase"
+  queryOptions,
-import { toast } from "sonner"
+} from "@tanstack/react-query";
-import ReactMarkdown from 'react-markdown'
+import { Button } from "@/components/ui/button";
-
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Textarea } from "@/components/ui/textarea";
+import { supabase, useSupabaseAuth } from "@/auth/supabase";
+import { toast } from "sonner";
+import ReactMarkdown from "react-markdown";
+import { HistorialCambiosModal } from "../historico/HistorialCambiosModal";
+// @ts-ignore
+import AIChatModal from "../ai/AIChatModal";
 
 /* =====================================================
    Query keys & fetcher
@@ -15,32 +28,29 @@ import ReactMarkdown from 'react-markdown'
 export const planKeys = {
   root: ["plan"] as const,
   byId: (id: string) => [...planKeys.root, id] as const,
-}
+};
 
 export type PlanTextFields = {
-  objetivo_general?: string | string[] | null
+  objetivo_general?: string | string[] | null;
-  sistema_evaluacion?: string | string[] | null
+  sistema_evaluacion?: string | string[] | null;
-  perfil_ingreso?: string | string[] | null
+  perfil_ingreso?: string | string[] | null;
-  perfil_egreso?: string | string[] | null
+  perfil_egreso?: string | string[] | null;
-  competencias_genericas?: string | string[] | null
+  competencias_genericas?: string | string[] | null;
-  competencias_especificas?: string | string[] | null
+  competencias_especificas?: string | string[] | null;
-  indicadores_desempeno?: string | string[] | null
+  indicadores_desempeno?: string | string[] | null;
-  pertinencia?: string | string[] | null
+  pertinencia?: string | string[] | null;
-  prompt?: string | null
+  prompt?: string | null;
-}
+  historico?: string | null;
+};
 
 async function fetchPlanText(planId: string): Promise<PlanTextFields> {
   const { data, error } = await supabase
     .from("plan_estudios")
-    .select(
+    .select(`*`)
-      `objetivo_general, sistema_evaluacion, perfil_ingreso, perfil_egreso,
-       competencias_genericas, competencias_especificas, indicadores_desempeno,
-       pertinencia, prompt`
-    )
     .eq("id", planId)
-    .single()
+    .single();
-  if (error) throw error
+  if (error) throw error;
-  return (data ?? {}) as PlanTextFields
+  return (data ?? {}) as PlanTextFields;
 }
 
 export const planTextOptions = (planId: string) =>
@@ -48,176 +58,503 @@ export const planTextOptions = (planId: string) =>
     queryKey: planKeys.byId(planId),
     queryFn: () => fetchPlanText(planId),
     staleTime: 60_000,
-  })
+  });
 
 /* =====================================================
    Color helpers
 ===================================================== */
 function hexToRgb(hex?: string | null): [number, number, number] {
-  if (!hex) return [37, 99, 235]
+  if (!hex) return [37, 99, 235];
-  const h = hex.replace("#", "")
+  const h = hex.replace("#", "");
-  const v = h.length === 3 ? h.split("").map((c) => c + c).join("") : h
+  const v =
-  const n = parseInt(v, 16)
+    h.length === 3
-  return [(n >> 16) & 255, (n >> 8) & 255, n & 255]
+      ? h
+          .split("")
+          .map((c) => c + c)
+          .join("")
+      : h;
+  const n = parseInt(v, 16);
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
 }
-const rgba = (rgb: [number, number, number], a: number) => `rgba(${rgb[0]},${rgb[1]},${rgb[2]},${a})`
+const rgba = (rgb: [number, number, number], a: number) =>
+  `rgba(${rgb[0]},${rgb[1]},${rgb[2]},${a})`;
 
 /* =====================================================
    Expandable text
 ===================================================== */
-function ExpandableText({ text, mono = false }: { text?: string | string[] | null; mono?: boolean }) {
+function ExpandableText({
-  const [open, setOpen] = useState(false)
+  text,
+  mono = false,
+}: {
+  text?: string | string[] | null;
+  mono?: boolean;
+}) {
+  const [open, setOpen] = useState(false);
   if (!text || (Array.isArray(text) && text.length === 0)) {
-    return <span className="text-neutral-400">—</span>
+    return <span className="text-neutral-400">—</span>;
   }
-  const content = Array.isArray(text) ? text.join("\n• ") : text
+  const content = Array.isArray(text) ? text.join("\n• ") : text;
-  const rendered = Array.isArray(text) ? `• ${content}` : content
+  const rendered = Array.isArray(text) ? `• ${content}` : content;
   return (
     <div>
       <ReactMarkdown>{rendered}</ReactMarkdown>
       {String(rendered).length > 220 && (
-        <button onClick={() => setOpen((v) => !v)} className="mt-2 text-xs font-medium text-neutral-600 hover:underline">
+        <button
+          onClick={() => setOpen((v) => !v)}
+          className="mt-2 text-xs font-medium text-neutral-600 hover:underline"
+        >
           {open ? "Ver menos" : "Ver más"}
         </button>
       )}
     </div>
-  )
+  );
 }
 
 /* =====================================================
    Section panel
 ===================================================== */
-function SectionPanel({ title, icon: Icon, color, children, id }: { title: string; icon: any; color?: string | null; children: React.ReactNode; id: string }) {
+function SectionPanel({
-  const rgb = hexToRgb(color)
+  title,
+  icon: Icon,
+  color,
+  children,
+  id,
+}: {
+  title: string;
+  icon: any;
+  color?: string | null;
+  children: React.ReactNode;
+  id: string;
+}) {
+  const rgb = hexToRgb(color);
   return (
-    <section id={id} className="relative rounded-3xl border overflow-hidden shadow-sm bg-white/70 dark:bg-neutral-900/60">
+    <section
+      id={id}
+      className="relative rounded-3xl border overflow-hidden shadow-sm bg-white/70 dark:bg-neutral-900/60"
+    >
       <div className="pointer-events-none absolute inset-0 -z-0">
-        <div className="absolute -top-20 -left-20 w-[28rem] h-[28rem] rounded-full blur-3xl" style={{ background: `radial-gradient(circle, ${rgba(rgb, 0.2)}, transparent 60%)` }} />
+        <div
-        <div className="absolute -bottom-24 -right-16 w-[24rem] h-[24rem] rounded-full blur-[60px]" style={{ background: `radial-gradient(circle, ${rgba(rgb, 0.14)}, transparent 60%)` }} />
+          className="absolute -top-20 -left-20 w-[28rem] h-[28rem] rounded-full blur-3xl"
+          style={{
+            background: `radial-gradient(circle, ${rgba(rgb, 0.2)}, transparent 60%)`,
+          }}
+        />
+        <div
+          className="absolute -bottom-24 -right-16 w-[24rem] h-[24rem] rounded-full blur-[60px]"
+          style={{
+            background: `radial-gradient(circle, ${rgba(rgb, 0.14)}, transparent 60%)`,
+          }}
+        />
       </div>
-      <div className="relative z-10 px-4 py-3 flex items-center gap-2 border-b" style={{ background: `linear-gradient(180deg, ${rgba(rgb, 0.1)}, transparent)` }}>
+      <div
-        <span className="inline-flex items-center justify-center rounded-xl border px-2.5 py-2 bg-white/80" style={{ borderColor: rgba(rgb, 0.25) }}>
+        className="relative z-10 px-4 py-3 flex items-center gap-2 border-b"
+        style={{
+          background: `linear-gradient(180deg, ${rgba(rgb, 0.1)}, transparent)`,
+        }}
+      >
+        <span
+          className="inline-flex items-center justify-center rounded-xl border px-2.5 py-2 bg-white/80"
+          style={{ borderColor: rgba(rgb, 0.25) }}
+        >
           <Icon className="w-4 h-4" />
         </span>
         <h3 className="font-semibold">{title}</h3>
       </div>
       <div className="relative z-10 p-5">{children}</div>
     </section>
-  )
+  );
 }
 
 /* =====================================================
    AcademicSections (con React Query)
 ===================================================== */
-export function AcademicSections({ planId, color }: { planId: string; color?: string | null }) {
+export function AcademicSections({
-  const qc = useQueryClient()
+  planId,
-  if(!planId) return <div>Cargando…</div>
+  color,
-  const { data: plan } = useSuspenseQuery(planTextOptions(planId))
+}: {
+  planId: string;
+  color?: string | null;
+}) {
+  const qc = useQueryClient();
+  const auth = useSupabaseAuth();
+  const [openHistorial, setOpenHistorial] = useState(false);
+  const [openModalIa, setopenModalIa] = useState(false);
+  if (!planId) return <div>Cargando…</div>;
+  const { data: plan } = useSuspenseQuery(planTextOptions(planId));
 
-  const [editing, setEditing] = useState<null | { key: keyof PlanTextFields; title: string }>(null)
+  const [editing, setEditing] = useState<null | {
-  const [draft, setDraft] = useState("")
+    key: keyof PlanTextFields;
+    title: string;
+  }>(null);
+  const [draft, setDraft] = useState("");
 
   // --- mutation con actualización optimista ---
   const updateField = useMutation({
-    mutationFn: async ({ key, value }: { key: keyof PlanTextFields; value: string | string[] | null }) => {
+    mutationFn: async ({
-      const payload: Record<string, any> = { [key]: value }
+      key,
-      const { error } = await supabase.from("plan_estudios").update(payload).eq("id", planId)
+      value,
-      if (error) throw error
+    }: {
-      return payload
+      key: keyof PlanTextFields;
+      value: string | string[] | null;
+    }) => {
+      const payload: Record<string, any> = { [key]: value };
+      const { error } = await supabase
+        .from("plan_estudios")
+        .update(payload)
+        .eq("id", planId);
+      if (error) throw error;
+      return payload;
     },
     onMutate: async ({ key, value }) => {
-      await qc.cancelQueries({ queryKey: planKeys.byId(planId) })
+      await qc.cancelQueries({ queryKey: planKeys.byId(planId) });
-      const prev = qc.getQueryData<PlanTextFields>(planKeys.byId(planId))
+      const prev = qc.getQueryData<PlanTextFields>(planKeys.byId(planId));
-      qc.setQueryData<PlanTextFields>(planKeys.byId(planId), (old) => ({ ...(old ?? {}), [key]: value }))
+      qc.setQueryData<PlanTextFields>(planKeys.byId(planId), (old) => ({
-      return { prev }
+        ...(old ?? {}),
+        [key]: value,
+      }));
+      return { prev };
     },
     onError: (e, _vars, ctx) => {
-      if (ctx?.prev) qc.setQueryData(planKeys.byId(planId), ctx.prev)
+      if (ctx?.prev) qc.setQueryData(planKeys.byId(planId), ctx.prev);
-      toast.error((e as any)?.message || "No se pudo guardar 😓")
+      toast.error((e as any)?.message || "No se pudo guardar 😓");
     },
     onSuccess: () => {
-      toast.success("Guardado ✅")
+      toast.success("Guardado ✅");
     },
     onSettled: async () => {
-      await qc.invalidateQueries({ queryKey: planKeys.byId(planId) })
+      await qc.invalidateQueries({ queryKey: planKeys.byId(planId) });
     },
-  })
+  });
 
   const sections = useMemo(
     () => [
-      { id: "sec-obj", title: "Objetivo general", icon: Icons.Target, key: "objetivo_general" as const, mono: false },
+      {
-      { id: "sec-eval", title: "Sistema de evaluación", icon: Icons.CheckCircle2, key: "sistema_evaluacion" as const, mono: false },
+        id: "sec-clave",
-      { id: "sec-ing", title: "Perfil de ingreso", icon: Icons.UserPlus, key: "perfil_ingreso" as const, mono: false },
+        title: "Clave del plan",
-      { id: "sec-egr", title: "Perfil de egreso", icon: Icons.GraduationCap, key: "perfil_egreso" as const, mono: false },
+        icon: Icons.Key,
-      { id: "sec-cg", title: "Competencias genéricas", icon: Icons.Sparkles, key: "competencias_genericas" as const, mono: false },
+        key: "clave_del_plan_de_estudios" as const,
-      { id: "sec-ce", title: "Competencias específicas", icon: Icons.Cog, key: "competencias_especificas" as const, mono: false },
+        mono: true,
-      { id: "sec-ind", title: "Indicadores de desempeño", icon: Icons.LineChart, key: "indicadores_desempeno" as const, mono: false },
+      },
-      { id: "sec-per", title: "Pertinencia", icon: Icons.Lightbulb, key: "pertinencia" as const, mono: false },
+      {
-      { id: "sec-prm", title: "Prompt (origen)", icon: Icons.Code2, key: "prompt" as const, mono: true },
+        id: "sec-area",
+        title: "Área de estudio",
+        icon: Icons.Library,
+        key: "area_de_estudio" as const,
+        mono: false,
+      },
+
+      // --- Estructura Temporal ---
+      {
+        id: "sec-ciclos",
+        title: "Total de ciclos",
+        icon: Icons.CalendarRange,
+        key: "total_de_ciclos_del_plan_de_estudios" as const,
+        mono: false,
+      },
+      {
+        id: "sec-duracion-ciclo",
+        title: "Duración del ciclo (semanas)",
+        icon: Icons.CalendarDays,
+        key: "duracion_del_ciclo_escolar" as const,
+        mono: false,
+      },
+      {
+        id: "sec-carga",
+        title: "Carga horaria semanal",
+        icon: Icons.Clock,
+        key: "carga_horaria_a_la_semana" as const,
+        mono: false,
+      },
+
+      // --- Perfiles y Fines ---
+      {
+        id: "sec-antecedente",
+        title: "Antecedente académico",
+        icon: Icons.BookOpen,
+        key: "antecedente_academico" as const,
+        mono: false,
+      },
+      {
+        id: "sec-ingreso",
+        title: "Perfil de ingreso",
+        icon: Icons.UserPlus,
+        key: "perfil_de_ingreso" as const,
+        mono: false,
+      },
+      {
+        id: "sec-fines",
+        title: "Fines de aprendizaje",
+        icon: Icons.Target,
+        key: "fines_de_aprendizaje_o_formacion" as const,
+        mono: false,
+      },
+      {
+        id: "sec-egreso",
+        title: "Perfil de egreso",
+        icon: Icons.UserCheck,
+        key: "perfil_de_egreso" as const,
+        mono: false,
+      },
+
+      // --- Operatividad y Modelo ---
+      {
+        id: "sec-admin",
+        title: "Administración y operatividad",
+        icon: Icons.Briefcase,
+        key: "administracion_y_operatividad_del_plan_de_estudios" as const,
+        mono: false,
+      },
+      {
+        id: "sec-sustento",
+        title: "Sustento teórico",
+        icon: Icons.Book,
+        key: "sustento_teorico_del_modelo_curricular" as const,
+        mono: false,
+      },
+      {
+        id: "sec-justificacion",
+        title: "Justificación curricular",
+        icon: Icons.MessageSquareText,
+        key: "justificacion_de_la_propuesta_curricular" as const,
+        mono: false,
+      },
+      {
+        id: "sec-evaluacion",
+        title: "Evaluación periódica",
+        icon: Icons.CheckCircle2,
+        key: "propuesta_de_evaluacion_periodica_del_plan_de_estudios" as const,
+        mono: false,
+      },
+
+      // --- Específicos / Opcionales ---
+      {
+        id: "sec-investigacion",
+        title: "Programa de investigación",
+        icon: Icons.Microscope,
+        key: "programa_de_investigacion" as const,
+        mono: false,
+      },
+      {
+        id: "sec-propedeutico",
+        title: "Curso propedéutico",
+        icon: Icons.School,
+        key: "curso_propedeutico" as const,
+        mono: false,
+      },
+
+      // --- Meta / Sistema ---
+      {
+        id: "sec-prm",
+        title: "Prompt (origen)",
+        icon: Icons.Code2,
+        key: "prompt" as const,
+        mono: true,
+      },
+      {
+        id: "sec-hist",
+        title: "Histórico de cambios",
+        icon: Icons.History,
+        key: "historico" as const,
+        mono: false,
+      },
     ],
     []
-  )
+  );
+  const [iaContext, setIaContext] = useState<{
+    key: keyof PlanTextFields;
+    title: string;
+    content: string;
+  } | null>(null);
 
   return (
     <>
       <div className="grid gap-5 md:grid-cols-2">
         {sections.map((s) => {
-          const text = plan[s.key] ?? null
+          const text = String(plan[s.key]) ?? null;
           return (
-            <SectionPanel key={s.id} id={s.id} title={s.title} icon={s.icon} color={color}>
+            <SectionPanel
+              key={s.id}
+              id={s.id}
+              title={s.title}
+              icon={s.icon}
+              color={color}
+            >
+              {s.key === "historico" ? (
+                <>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setOpenHistorial(true)}
+                  >
+                    Ver historial
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setopenModalIa(true)}
+                  >
+                    Promt
+                  </Button>
+                </>
+              ) : (
+                <>
                   <ExpandableText text={text} mono={s.mono} />
                   <div className="mt-4 flex flex-wrap gap-2">
                     <Button
                       variant="outline"
                       size="sm"
-                  disabled={!text || (Array.isArray(text) && text.length === 0)}
+                      disabled={
+                        !text || (Array.isArray(text) && text.length === 0)
+                      }
                       onClick={() => {
-                    const toCopy = Array.isArray(text) ? text.join("\n") : (text ?? "")
+                        const toCopy = Array.isArray(text)
-                    if (toCopy) navigator.clipboard.writeText(toCopy)
+                          ? text.join("\n")
+                          : (text ?? "");
+                        if (toCopy) navigator.clipboard.writeText(toCopy);
                       }}
                     >
                       Copiar
                     </Button>
-                {s.key !== "prompt" && 
+                    {s.key !== "prompt" && (
-                  (<Button
+                      <Button
                         variant="ghost"
                         size="sm"
                         onClick={() => {
-                      const current = Array.isArray(text) ? text.join("\n") : (text ?? "")
+                          const current = Array.isArray(text)
-                      setEditing({ key: s.key, title: s.title })
+                            ? text.join("\n")
-                      setDraft(current)
+                            : (text ?? "");
+                          setEditing({ key: s.key, title: s.title });
+                          setDraft(current);
                         }}
                       >
                         Editar
-                  </Button>)}
+                      </Button>
+                    )}
                   </div>
+                </>
+              )}
             </SectionPanel>
-          )
+          );
         })}
       </div>
 
       {/* Diálogo de edición */}
-      <Dialog open={!!editing} onOpenChange={(o) => { if (!o) setEditing(null) }}>
+      <Dialog
+        open={!!editing}
+        onOpenChange={(o) => {
+          if (!o) setEditing(null);
+        }}
+      >
         <DialogContent className="max-w-2xl">
           <DialogHeader>
-            <DialogTitle className="font-mono" >{editing ? `Editar: ${sections.find((x) => x.key === editing.key)?.title}` : ""}</DialogTitle>
+            <DialogTitle className="font-mono">
+              {editing
+                ? `Editar: ${sections.find((x) => x.key === editing.key)?.title}`
+                : ""}
+            </DialogTitle>
           </DialogHeader>
-          <Textarea value={draft} onChange={(e) => setDraft(e.target.value)} className={`min-h-[260px] ${editing?.key === "prompt" ? "font-mono" : ""}`} placeholder="Escribe aquí…" />
+
+          <Textarea
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+            className={`min-h-[260px] ${editing?.key === "prompt" ? "font-mono" : ""}`}
+            placeholder="Escribe aquí…"
+          />
+
           <DialogFooter>
-            <Button variant="outline" onClick={() => setEditing(null)}>Cancelar</Button>
+            <Button variant="outline" onClick={() => setEditing(null)}>
+              Cancelar
+            </Button>
             <Button
-              onClick={() => {
+              onClick={async () => {
-                if (!editing) return
+                if (!editing) return;
-                updateField.mutate({ key: editing.key, value: draft })
+
-                setEditing(null)
+                // 1️⃣ Obtener el valor anterior (por ejemplo, desde 'plan' o 'section')
+                const oldValue = (plan as any)[editing.key];
+
+                // 2️⃣ Crear un diff tipo JSON Patch
+                const diff = [
+                  {
+                    op: "replace",
+                    path: `/${editing.key}`,
+                    from: oldValue,
+                    value: draft,
+                  },
+                ];
+
+                // 3️⃣ Guardar respaldo antes de actualizar
+                const { error: backupError } = await supabase
+                  .from("historico_cambios")
+                  .insert({
+                    id_plan_estudios: planId, // asegúrate de tener `plan.id` disponible en este contexto
+                    json_cambios: diff,
+                    user_id: auth.user?.id,
+                    created_at: new Date().toISOString(),
+                  });
+
+                if (backupError) {
+                  console.error("Error al guardar respaldo:", backupError);
+                  alert("No se pudo guardar el respaldo de los cambios");
+                  return;
+                }
+
+                // 4️⃣ Ejecutar la mutación original
+                updateField.mutate({ key: editing.key, value: draft });
+
+                // 5️⃣ Cerrar el diálogo
+                setEditing(null);
               }}
               disabled={updateField.isPending}
             >
               {updateField.isPending ? "Guardando…" : "Guardar"}
             </Button>
+            <Button
+              variant="secondary"
+              onClick={() => {
+                if (!editing) return;
+                const current = draft;
+                setIaContext({
+                  key: editing.key,
+                  title: editing.title,
+                  content: current,
+                });
+                setopenModalIa(true);
+                setEditing(null); // 🔹 Cierra el modal de edición
+              }}
+            >
+              Mejorar con IA
+            </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
-    </>
+      <HistorialCambiosModal
-  )
+        open={openHistorial}
+        onClose={() => setOpenHistorial(false)}
+        planId={planId}
+        onRestore={async (key, value) => {
+          updateField.mutate({ key, value });
+        }}
+      />
+
+      <AIChatModal
+        open={openModalIa}
+        onClose={() => setopenModalIa(false)}
+        context={{
+          section: iaContext?.title,
+          fieldKey: iaContext?.key,
+          originalText: iaContext?.content,
+          cont_conversation: `Eres un experto en craer planes de estudios basate en el id del plan ${planId} que se encuentra en la tabla plan_estudios con el mcp para realizar los cambios que se te soliciten Responde únicamente con la información solicitada. 
+No uses frases como “claro”, “por supuesto”, “aquí tienes”, “con gusto”, “hola”, “perfecto”.
+No uses introducciones, despedidas ni texto de relleno. 
+Entrega solo el contenido útil.`,
+        }}
+        onAccept={(newText: string) => {
+          if (iaContext) {
+            updateField.mutate({ key: iaContext.key, value: newText });
+            setIaContext(null);
+          }
+        }}
+      />
+    </>
+  );
 }

src/components/planes/planQueries.ts

@@ -28,13 +28,15 @@ export function planByIdOptions(planId: string) {
       const { data, error } = await supabase
     .from("plan_estudios")
     .select(`
-          id, nombre, nivel, objetivo_general, perfil_ingreso, perfil_egreso, duracion, total_creditos,
+        *,
-          competencias_genericas, competencias_especificas, sistema_evaluacion, indicadores_desempeno,
+        carreras ( 
-          pertinencia, prompt, estado, fecha_creacion,
+            id, 
-          carreras ( id, nombre, facultades:facultades ( id, nombre, color, icon ) )
+            nombre, 
+            facultades ( id, nombre, color, icon ) 
+        )
     `)
     .eq("id", planId)
-        .maybeSingle()
+    .maybeSingle();
       if (error || !data) throw error ?? new Error("Plan no encontrado")
       return data as unknown as PlanFull
     },

src/components/ui/prompt-input.tsx

@@ -0,0 +1,200 @@
+"use client"
+
+import { Textarea } from "@/components/ui/textarea"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { cn } from "@/lib/utils"
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react"
+
+type PromptInputContextType = {
+  isLoading: boolean
+  value: string
+  setValue: (value: string) => void
+  maxHeight: number | string
+  onSubmit?: () => void
+  disabled?: boolean
+  textareaRef: React.RefObject<HTMLTextAreaElement | null>
+}
+
+const PromptInputContext = createContext<PromptInputContextType>({
+  isLoading: false,
+  value: "",
+  setValue: () => {},
+  maxHeight: 240,
+  onSubmit: undefined,
+  disabled: false,
+  textareaRef: React.createRef<HTMLTextAreaElement>(),
+})
+
+function usePromptInput() {
+  const context = useContext(PromptInputContext)
+  if (!context) {
+    throw new Error("usePromptInput must be used within a PromptInput")
+  }
+  return context
+}
+
+type PromptInputProps = {
+  isLoading?: boolean
+  value?: string
+  onValueChange?: (value: string) => void
+  maxHeight?: number | string
+  onSubmit?: () => void
+  children: React.ReactNode
+  className?: string
+}
+
+function PromptInput({
+  className,
+  isLoading = false,
+  maxHeight = 240,
+  value,
+  onValueChange,
+  onSubmit,
+  children,
+}: PromptInputProps) {
+  const [internalValue, setInternalValue] = useState(value || "")
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+
+  const handleChange = (newValue: string) => {
+    setInternalValue(newValue)
+    onValueChange?.(newValue)
+  }
+
+  return (
+    <TooltipProvider>
+      <PromptInputContext.Provider
+        value={{
+          isLoading,
+          value: value ?? internalValue,
+          setValue: onValueChange ?? handleChange,
+          maxHeight,
+          onSubmit,
+          textareaRef,
+        }}
+      >
+        <div
+          className={cn(
+            "border-input bg-background cursor-text rounded-3xl border p-2 shadow-xs",
+            className
+          )}
+          onClick={() => textareaRef.current?.focus()}
+        >
+          {children}
+        </div>
+      </PromptInputContext.Provider>
+    </TooltipProvider>
+  )
+}
+
+export type PromptInputTextareaProps = {
+  disableAutosize?: boolean
+} & React.ComponentProps<typeof Textarea>
+
+function PromptInputTextarea({
+  className,
+  onKeyDown,
+  disableAutosize = false,
+  ...props
+}: PromptInputTextareaProps) {
+  const { value, setValue, maxHeight, onSubmit, disabled, textareaRef } =
+    usePromptInput()
+
+  useEffect(() => {
+    if (disableAutosize) return
+
+    if (!textareaRef.current) return
+
+    if (textareaRef.current.scrollTop === 0) {
+      textareaRef.current.style.height = "auto"
+    }
+
+    textareaRef.current.style.height =
+      typeof maxHeight === "number"
+        ? `${Math.min(textareaRef.current.scrollHeight, maxHeight)}px`
+        : `min(${textareaRef.current.scrollHeight}px, ${maxHeight})`
+  }, [value, maxHeight, disableAutosize])
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault()
+      onSubmit?.()
+    }
+    onKeyDown?.(e)
+  }
+
+  return (
+    <Textarea
+      ref={textareaRef}
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+      onKeyDown={handleKeyDown}
+      className={cn(
+        "text-primary min-h-[44px] w-full resize-none border-none bg-transparent shadow-none outline-none focus-visible:ring-0 focus-visible:ring-offset-0",
+        className
+      )}
+      rows={1}
+      disabled={disabled}
+      {...props}
+    />
+  )
+}
+
+type PromptInputActionsProps = React.HTMLAttributes<HTMLDivElement>
+
+function PromptInputActions({
+  children,
+  className,
+  ...props
+}: PromptInputActionsProps) {
+  return (
+    <div className={cn("flex items-center gap-2", className)} {...props}>
+      {children}
+    </div>
+  )
+}
+
+type PromptInputActionProps = {
+  className?: string
+  tooltip: React.ReactNode
+  children: React.ReactNode
+  side?: "top" | "bottom" | "left" | "right"
+} & React.ComponentProps<typeof Tooltip>
+
+function PromptInputAction({
+  tooltip,
+  children,
+  className,
+  side = "top",
+  ...props
+}: PromptInputActionProps) {
+  const { disabled } = usePromptInput()
+
+  return (
+    <Tooltip {...props}>
+      <TooltipTrigger asChild disabled={disabled} onClick={event => event.stopPropagation()}>
+        {children}
+      </TooltipTrigger>
+      <TooltipContent side={side} className={className}>
+        {tooltip}
+      </TooltipContent>
+    </Tooltip>
+  )
+}
+
+export {
+  PromptInput,
+  PromptInputTextarea,
+  PromptInputActions,
+  PromptInputAction,
+}

src/components/ui/tooltip.tsx

@@ -44,13 +44,13 @@ function TooltipContent({
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
-          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
           className
         )}
         {...props}
       >
         {children}
-        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   )

src/hooks/useSupabaseUpdateWithHistory.ts

@@ -0,0 +1,67 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { supabase } from "@/auth/supabase";
+
+/**
+ * Hook genérico para actualizar una tabla y guardar respaldo en historico_cambios
+ * 
+ * @param tableName Nombre de la tabla a actualizar
+ * @param idKey Campo que se usa para hacer eq (por defecto 'id')
+ */
+export function useSupabaseUpdateWithHistory<T extends Record<string, any>>(
+  tableName: string,
+  idKey: keyof T = "id" as keyof T
+) {
+  const qc = useQueryClient();
+
+  // Generar diferencias tipo JSON Patch
+  function generateDiff(oldData: T, newData: Partial<T>) {
+    const changes: any[] = [];
+    for (const key of Object.keys(newData)) {
+      const oldValue = (oldData as any)[key];
+      const newValue = (newData as any)[key];
+      if (newValue !== undefined && newValue !== oldValue) {
+        changes.push({
+          op: "replace",
+          path: `/${key}`,
+          from: oldValue,
+          value: newValue,
+        });
+      }
+    }
+    return changes;
+  }
+
+  const mutation = useMutation({
+    mutationFn: async ({
+      oldData,
+      newData,
+    }: {
+      oldData: T;
+      newData: Partial<T>;
+    }) => {
+      const diff = generateDiff(oldData, newData);
+
+      if (diff.length > 0) {
+        const { error: backupError } = await supabase
+          .from("historico_cambios")
+          .insert({
+            id_plan_estudios: oldData.id ?? null, // ajusta si es otra tabla
+            tabla_afectada: tableName,
+            json_cambios: diff,
+            created_at: new Date().toISOString(),
+          });
+
+        if (backupError) throw backupError;
+      }
+
+      const { error } = await supabase
+        .from(tableName)
+        .update(newData)
+        .eq(idKey as string, oldData[idKey]);
+
+      if (error) throw error;
+    },
+  });
+
+  return { mutation };
+}

src/main.tsx

@@ -1,3 +1,4 @@
+// dummy test
 import { StrictMode } from 'react'
 import ReactDOM from 'react-dom/client'
 import { RouterProvider, createRouter } from '@tanstack/react-router'

src/routes/_authenticated/asignatura/$asignaturaId.tsx

@@ -3,7 +3,7 @@ import { useQueryClient } from "@tanstack/react-query";
 import { createFileRoute, Link, useRouter } from "@tanstack/react-router"
 import * as Icons from "lucide-react"
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
-import { supabase } from "@/auth/supabase"
+import { supabase, useSupabaseAuth } from "@/auth/supabase"
 import { Button } from "@/components/ui/button"
 import { Badge } from "@/components/ui/badge"
 import { Input } from "@/components/ui/input"
@@ -403,11 +403,32 @@ function EditAsignaturaButton({ asignatura, onUpdate }: {
   const [open, setOpen] = useState(false)
   const [saving, setSaving] = useState(false)
   const [form, setForm] = useState<Partial<Asignatura>>({})
+  const auth = useSupabaseAuth()
 
   const openAndFill = () => { setForm(asignatura); setOpen(true) }
 
+  // ✅ Función que genera las diferencias entre los datos anteriores y los nuevos
+  function generateDiff(oldData: Asignatura, newData: Partial<Asignatura>) {
+    const changes: any[] = []
+    for (const key of Object.keys(newData)) {
+      const oldValue = (oldData as any)[key]
+      const newValue = (newData as any)[key]
+      if (newValue !== undefined && newValue !== oldValue) {
+        changes.push({
+          op: "replace",
+          path: `/${key}`,
+          from: oldValue,
+          value: newValue
+        })
+      }
+    }
+    return changes
+  }
+
   async function save() {
     setSaving(true)
+    try {
+      // 1️⃣ Preparar el payload final
       const payload = {
         nombre: form.nombre ?? asignatura.nombre,
         clave: form.clave ?? asignatura.clave,
@@ -417,15 +438,44 @@ function EditAsignaturaButton({ asignatura, onUpdate }: {
         horas_teoricas: form.horas_teoricas ?? asignatura.horas_teoricas,
         horas_practicas: form.horas_practicas ?? asignatura.horas_practicas,
       }
+
+      // 2️⃣ Detectar cambios
+      const diff = generateDiff(asignatura, payload)
+
+      // 3️⃣ Guardar respaldo si hubo cambios
+      if (diff.length > 0) {
+        const { error: backupError } = await supabase
+          .from("historico_cambios_asignaturas") // 👈 usa el nombre real de tu tabla
+          .insert({
+            id_asignatura: asignatura.id,
+            json_cambios: diff, // jsonb
+            user_id: auth.user?.id,
+            created_at: new Date().toISOString()
+          })
+        if (backupError) throw backupError
+      }
+
+      // 4️⃣ Actualizar el registro principal
       const { data, error } = await supabase
         .from("asignaturas")
         .update(payload)
         .eq("id", asignatura.id)
         .select()
         .maybeSingle()
+
+      if (error) throw error
+
+      // 5️⃣ Actualizar vista local
+      if (data) {
+        onUpdate(data as Asignatura)
+        setOpen(false)
+      }
+    } catch (err: any) {
+      alert(err.message ?? "Error al guardar")
+    } finally {
       setSaving(false)
-    if (!error && data) { onUpdate(data as Asignatura); setOpen(false) }
+    }
-    else alert(error?.message ?? "Error al guardar")
+
   }
 
   return (
@@ -650,6 +700,7 @@ export function EditContenidosButton({
   const [saving, setSaving] = useState(false)
   const [units, setUnits] = useState<UnitDraft[]>([])
   const [initialUnits, setInitialUnits] = useState<UnitDraft[]>([])
+  const auth = useSupabaseAuth() // 👈 para registrar el usuario que edita
 
   // --- Normaliza entrada flexible a estructura estable
   const normalize = useCallback((v: any): UnitDraft[] => {
@@ -685,7 +736,7 @@ export function EditContenidosButton({
     }
   }, [])
 
-  // --- Construye payload consistente { "1": { titulo, subtemas:{ "1": "t1" } } }
+  // --- Construye payload consistente
   const buildPayload = useCallback((us: UnitDraft[]) => {
     const out: Record<string, any> = {}
     us.forEach((u, idx) => {
@@ -702,9 +753,9 @@ export function EditContenidosButton({
     return out
   }, [])
 
-  // --- Limpia UI: recorta espacios, elimina líneas vacías/duplicadas (case-insensitive)
+  // --- Limpia UI
   const cleanUnits = useCallback((us: UnitDraft[]) => {
-    return us.map((u, idx) => {
+    return us.map((u) => {
       const seen = new Set<string>()
       const temas = u.temas
         .map((t) => t.trim())
@@ -715,10 +766,7 @@ export function EditContenidosButton({
           seen.add(key)
           return true
         })
-      return {
+      return { title: (u.title || "").trim(), temas }
-        title: (u.title || "").trim(),
-        temas,
-      }
     })
   }, [])
 
@@ -734,7 +782,7 @@ export function EditContenidosButton({
     [units, initialUnits, cleanUnits],
   )
 
-  // --- Atajos: Guardar con Ctrl/Cmd + Enter
+  // --- Atajos: Ctrl/Cmd + Enter
   useEffect(() => {
     if (!open) return
     const handler = (e: KeyboardEvent) => {
@@ -746,7 +794,6 @@ export function EditContenidosButton({
     }
     window.addEventListener("keydown", handler)
     return () => window.removeEventListener("keydown", handler)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open, units, saving])
 
   // --- Acciones por unidad
@@ -754,6 +801,7 @@ export function EditContenidosButton({
     if (!confirm("¿Eliminar esta unidad?")) return
     setUnits((prev) => prev.filter((_, i) => i !== idx))
   }
+
   const moveUnit = (idx: number, dir: -1 | 1) => {
     setUnits((prev) => {
       const next = [...prev]
@@ -763,6 +811,7 @@ export function EditContenidosButton({
       return next
     })
   }
+
   const duplicateUnit = (idx: number) => {
     setUnits((prev) => {
       const next = [...prev]
@@ -774,24 +823,54 @@ export function EditContenidosButton({
     })
   }
 
+  // ✅ Función para guardar con respaldo histórico
   async function save() {
     setSaving(true)
+    try {
       const cleaned = cleanUnits(units)
       const contenidos = buildPayload(cleaned)
+
+      // 1️⃣ Generar diff entre valor anterior y nuevo
+      const diff = [
+        {
+          op: "replace",
+          path: "/contenidos",
+          from: value,
+          value: contenidos,
+        },
+      ]
+
+      // 2️⃣ Guardar respaldo en tabla de histórico (solo si hay cambios)
+      if (JSON.stringify(value) !== JSON.stringify(contenidos)) {
+        const { error: backupError } = await supabase
+          .from("historico_cambios_asignaturas") // 👈 nombre de tu tabla de respaldo
+          .insert({
+            id_asignatura: asignaturaId,
+            json_cambios: diff,
+            user_id: auth.user?.id,
+            created_at: new Date().toISOString(),
+          })
+        if (backupError) throw backupError
+      }
+
+      // 3️⃣ Actualizar campo contenidos
       const { data, error } = await supabase
         .from("asignaturas")
         .update({ contenidos })
         .eq("id", asignaturaId)
         .select()
         .maybeSingle()
-    setSaving(false)
+
-    if (error) {
+      if (error) throw error
-      alert(error.message || "No se pudo guardar")
+
-      return
-    }
       setInitialUnits(cleaned)
       onSaved((data as any)?.contenidos ?? contenidos)
       setOpen(false)
+    } catch (err: any) {
+      alert(err.message || "Error al guardar contenidos")
+    } finally {
+      setSaving(false)
+    }
   }
 
   const cancel = () => {

src/routes/_authenticated/asignaturas.tsx

@@ -2,7 +2,7 @@ import { createFileRoute, Link, useRouter } from '@tanstack/react-router'
 import { useSuspenseQuery, queryOptions, useQueryClient } from '@tanstack/react-query'
 import { supabase } from '@/auth/supabase'
 import * as Icons from 'lucide-react'
-import { useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue } from '@/components/ui/select'
@@ -10,6 +10,7 @@ import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuIte
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { Label } from '@/components/ui/label'
 import { toast } from 'sonner'
+import { InfoChip } from '@/components/planes/InfoChip'
 
 /* ================== Tipos ================== */
 type FacMini = { id: string; nombre: string; color?: string | null; icon?: string | null }
@@ -79,6 +80,7 @@ async function fetchPlanIdsByScope(search: Pick<SearchState, 'planId' | 'carrera
 async function fetchAsignaturas(search: SearchState): Promise<Asignatura[]> {
   const planIds = await fetchPlanIdsByScope(search)
   if (planIds && planIds.length === 0) return []
+  console.log(AsignaturaCard);
   
   let query = supabase
     .from('asignaturas')
@@ -172,6 +174,30 @@ function RouteComponent() {
 const [facultad, setFacultad] = useState("todas")
 const [carrera, setCarrera] = useState("todas")
 
+/* useEffect(() => {
+  const timeout = setTimeout(() => {
+    router.navigate({
+      to: '/asignaturas',
+      search: { ...search, q },
+      replace: true,
+    })
+  }, 400)
+  return () => clearTimeout(timeout)
+}, [q]) */
+
+
+function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const value = e.target.value
+    setQ(value)
+    router.navigate({
+      to: '/asignaturas',
+      search: {
+        ...search,
+        q: value,
+      },
+      replace: true, // evita recargar o empujar al historial
+    })
+  }
 
 // 🟣 Lista única de facultades
 const facultadesList = useMemo(() => {
@@ -260,6 +286,7 @@ const carrerasList = useMemo(() => {
     const tipoOK = tipo === 'todos' || (a.tipo ?? '—') === tipo
     const carreraOK = carrera === 'todas' || a.plan?.carrera?.id === carrera
     const facultadOK = facultad === 'todas' || a.plan?.carrera?.facultad?.id === facultad
+    const planOK = !search.planId || a.plan?.id === search.planId
 
     const flagOK =
       !flag ||
@@ -267,7 +294,7 @@ const carrerasList = useMemo(() => {
       (flag === 'sinCriterios' && (!a.criterios_evaluacion || !a.criterios_evaluacion.trim())) ||
       (flag === 'sinContenidos' && (!a.contenidos || Object.keys(a.contenidos ?? {}).length === 0))
 
-    return matchesQ && semOK && tipoOK && flagOK && carreraOK && facultadOK
+    return matchesQ && semOK && tipoOK && flagOK && carreraOK && facultadOK && planOK
   })
 }, [q, sem, tipo, flag, carrera, facultad, asignaturas])
 
@@ -289,7 +316,19 @@ const carrerasList = useMemo(() => {
   }, [filtered, groupBy])
 
   // Helpers
-  const clearFilters = () => { setQ(''); setSem('todos'); setTipo('todos'); setCarrera('todas'); setFlag('') }
+  const clearFilters = () => { setQ(''); setSem('todos'); setTipo('todos'); setCarrera('todas'); setFlag('') ; setFacultad('todas')
+    // Actualiza la URL limpiando todos los query params
+  router.navigate({
+    to: '/asignaturas',
+    search: {
+      q: '',
+      planId: '',
+      carreraId: '',
+      facultadId: '',
+      f: ''
+    },
+  })
+  }
 
   // NEW: util para clonar 1 asignatura
   async function cloneOne(src: Asignatura, overrides: {
@@ -324,6 +363,8 @@ const carrerasList = useMemo(() => {
     if (error) throw error
   }
 
+  
+
   // NEW: abrir modal clon individual
   function openClone(a: Asignatura) {
     setCloneTarget(a)
@@ -352,6 +393,8 @@ const carrerasList = useMemo(() => {
     setCart([])
   }
 
+
+
   // NEW: clonado en lote
   async function cloneBulk() {
     if (!bulk.plan_destino_id) { toast.error('Selecciona un plan de destino'); return }
@@ -426,34 +469,43 @@ const carrerasList = useMemo(() => {
           </div>
 
           {/* Filtros */}
-          <div className="grid gap-4 sm:grid-cols-5">
+          <div className="grid gap-4 sm:grid-cols-5 items-end">
+            {/* 🔍 Búsqueda */}
             <div>
               <Label>Búsqueda</Label>
               <Input
                 value={q}
-                onChange={(e) => setQ(e.target.value)}
+                onChange={handleChange}
                 placeholder="Nombre, clave, plan, carrera, facultad…"
               />
             </div>
 
+            {/* 📘 Semestre */}
             <div>
               <Label>Semestre</Label>
               <Select value={sem} onValueChange={setSem}>
-                <SelectTrigger><SelectValue placeholder="Todos" /></SelectTrigger>
+                <SelectTrigger>
+                  <SelectValue placeholder="Todos" />
+                </SelectTrigger>
                 <SelectContent>
                   <SelectItem value="todos">Todos</SelectItem>
-                  {semestres.map(s => <SelectItem key={s} value={s}>Semestre {s}</SelectItem>)}
+                  {semestres.map((s) => (
+                    <SelectItem key={s} value={s}>
+                      Semestre {s}
+                    </SelectItem>
+                  ))}
                 </SelectContent>
               </Select>
             </div>
 
+            {/* 🏛️ Facultad */}
             <div>
               <Label>Facultad</Label>
               <Select
                 value={facultad ?? "todas"}
                 onValueChange={(val) => {
                   setFacultad(val)
-                  setCarrera("todas") // reset de carrera al cambiar facultad
+                  setCarrera("todas")
                 }}
               >
                 <SelectTrigger className="w-[200px]">
@@ -470,8 +522,8 @@ const carrerasList = useMemo(() => {
               </Select>
             </div>
 
-            {facultad && facultad !== "todas" && (
+            {/* 🎓 Carrera */}
-            <div>
+            <div className={!facultad || facultad === "todas" ? "invisible" : ""}>
               <Label>Carrera</Label>
               <Select
                 value={carrera ?? "todas"}
@@ -490,8 +542,35 @@ const carrerasList = useMemo(() => {
                 </SelectContent>
               </Select>
             </div>
-          )}          
+
+            {/* 📜 Plan */}
+            <div className={!carrera || carrera === "todas" ? "invisible" : ""}>
+              <Label>Plan</Label>
+              <Select
+                value={search.planId ?? "todos"}
+                onValueChange={(val) => {
+                  router.navigate({
+                    search: { ...search, planId: val === "todos" ? "" : val },
+                  })
+                }}
+              >
+                <SelectTrigger className="w-[200px]">
+                  <SelectValue placeholder="Filtrar por plan" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="todos">Todos los planes</SelectItem>
+                  {planes
+                    .filter((p) => p.carrera?.id === carrera)
+                    .map((p) => (
+                      <SelectItem key={p.id} value={p.id}>
+                        {p.nombre}
+                      </SelectItem>
+                    ))}
+                </SelectContent>
+              </Select>
             </div>
+          </div>
+
 
 
 
@@ -518,7 +597,7 @@ const carrerasList = useMemo(() => {
               label="Sin contenidos"
               value={salud.sinContenidos}
             />
-            {(q || sem !== 'todos' || tipo !== 'todos' || flag) && (
+            {/*(q || sem !== 'todos' || tipo !== 'todos' || flag || carrera=='todos')*/ true && (
               <Button variant="ghost" className="h-7 px-3" onClick={clearFilters}>
                 Limpiar filtros
               </Button>
@@ -750,9 +829,15 @@ function AsignaturaCard({ a, onClone, onAddToCart }: { a: Asignatura; onClone: (
   const horasP = a.horas_practicas ?? 0
   const meta = tipoMeta(a.tipo)
   const FacIcon = (Icons as any)[a.plan?.carrera?.facultad?.icon ?? 'Building2'] || Icons.Building2
+  console.log(a);
   
   return (
-    <li className="group relative overflow-hidden rounded-2xl border bg-white/75 dark:bg-neutral-900/60 shadow-sm hover:shadow-md transition-all">
+    <li className="group relative overflow-hidden rounded-2xl border bg-white/75 dark:bg-neutral-900/60 shadow-sm hover:shadow-md transition-all"
+    style={{
+    borderColor: a.plan?.carrera?.facultad?.color ?? '#ccc',
+    backgroundColor: `${a.plan?.carrera?.facultad?.color}15`, // 15 = transparencia HEX
+  }}
+    >
       <div className="p-3">
         <div className="flex items-start gap-3">
           <span className="mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-xl border bg-white/80">
@@ -803,14 +888,17 @@ function AsignaturaCard({ a, onClone, onAddToCart }: { a: Asignatura; onClone: (
                   <Icons.ScrollText className="w-3.5 h-3.5" /> <strong>Plan:</strong>{a.plan.nombre}
                 </span>
                 {a.plan.carrera && (
-                  <span className="inline-flex items-center gap-1">
+                  <InfoChip
-                    <Icons.GraduationCap className="w-3.5 h-3.5" /> <strong>Carrera:</strong> {a.plan.carrera.nombre}
+                    icon={<Icons.GraduationCap className="h-3 w-3" />}
-                  </span>
+                    label={a.plan.carrera.nombre}                    
+                  />                  
                 )}
                 {a.plan.carrera?.facultad && (
-                  <span className="inline-flex items-center gap-1">
+                  <InfoChip
-                    <FacIcon className="w-3.5 h-3.5" /> {a.plan.carrera.facultad.nombre}
+                    icon={<Icons.Building2 className="h-3 w-3" />}
-                  </span>
+                    label={a.plan.carrera.facultad.nombre}
+                    tint={a.plan.carrera.facultad.color}                    
+                  />                 
                 )}
               </div>
             )}

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/dashboard.tsx

@@ -49,7 +49,7 @@ async function fetchDashboard(): Promise<LoaderData> {
     supabase
       .from('plan_estudios')
       .select(
-        'id, nombre, fecha_creacion, objetivo_general, perfil_ingreso, perfil_egreso, sistema_evaluacion, total_creditos'
+        '*'
       ),
     supabase
       .from('asignaturas')

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

@@ -20,6 +20,7 @@ import { AuroraButton } from "@/components/effect/aurora-button"
 import { DeletePlanButton } from "@/components/planes/DeletePlan"
 import { AddAsignaturaButton } from "@/components/planes/AddAsignaturaButton"
 import { DescargarPdfButton } from "@/components/planes/GenerarPdfButton"
+import { DownloadPlanPDF } from "@/components/planes/DownloadPlanPDF"
 
 type LoaderData = { plan: PlanFull; asignaturas: AsignaturaLite[] }
 
@@ -49,7 +50,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
 
@@ -102,7 +106,8 @@ function RouteComponent() {
             {/* <div className='flex gap-2'> */}
               <EditPlanButton plan={plan} />
               <AdjustAIButton plan={plan} />
-              <DescargarPdfButton planId={plan.id} opcion="plan" />
+              {/* <DescargarPdfButton planId={plan.id} opcion="plan" /> */}
+              <DownloadPlanPDF plan={plan} />
               <DescargarPdfButton planId={plan.id} opcion="asignaturas" />
               <DeletePlanButton planId={plan.id} />
             {/* </div> */}
@@ -111,8 +116,9 @@ function RouteComponent() {
         <CardContent ref={statsRef}>
           <div className="academics relative z-10 grid gap-3 [grid-template-columns:repeat(auto-fit,minmax(180px,1fr))]">
             <StatCard label="Nivel" value={plan.nivel ?? "—"} Icon={Icons.GraduationCap} accent={facColor} />
-            <StatCard label="Duración" value={plan.duracion ?? "—"} Icon={Icons.Clock} accent={facColor} />
+            <StatCard label="Duración" value={plan.total_de_ciclos_del_plan_de_estudios ?? "—"} Icon={Icons.Clock} accent={facColor} />
-            <StatCard label="Créditos" value={fmt(plan.total_creditos)} Icon={Icons.Coins} accent={facColor} />
+            <StatCard label="Modalidad educativa" value={plan.modalidad_educativa ?? "—"} Icon={Icons.Layers} accent={facColor} />
+            <StatCard label="Diseño curricular" value={plan.diseno_curricular ?? "—"} Icon={Icons.Layout} accent={facColor} />
             <StatCard label="Creado" value={plan.fecha_creacion ? new Date(plan.fecha_creacion).toLocaleDateString() : "—"} Icon={Icons.CalendarDays} accent={facColor} />
           </div>
         </CardContent>
@@ -200,33 +206,77 @@ function StatCard({ label, value = "—", Icon = Icons.Info, accent, className =
 
 /* ===== Editar ===== */
 function EditPlanButton({ plan }: { plan: PlanFull }) {
+  const auth = useSupabaseAuth()
   const [open, setOpen] = useState(false)
   const [form, setForm] = useState<Partial<PlanFull>>({})
   const [saving, setSaving] = useState(false)
   const qc = useQueryClient()
 
+  // Función para comparar valores y generar diffs tipo JSON Patch
+  function generateDiff(oldData: PlanFull, newData: Partial<PlanFull>) {
+    const changes: any[] = []
+    for (const key of Object.keys(newData)) {
+      const oldValue = (oldData as any)[key]
+      const newValue = (newData as any)[key]
+      if (newValue !== undefined && newValue !== oldValue) {
+        changes.push({
+          op: "replace",
+          path: `/${key}`,
+          from: oldValue,
+          value: newValue
+        })
+      }
+    }
+    return changes
+  }
+
   const mutation = useMutation({
     mutationFn: async (payload: Partial<PlanFull>) => {
-      const { error } = await supabase.from('plan_estudios').update({
+      // 1️⃣ Generar las diferencias antes del update
+      const diff = generateDiff(plan, payload)
+
+      // 2️⃣ Guardar respaldo (solo si hay cambios)
+      if (diff.length > 0) {
+        const { error: backupError } = await supabase.from("historico_cambios").insert({
+          id_plan_estudios: plan.id,
+          json_cambios: diff, // jsonb
+          user_id:auth.user?.id,
+          created_at: new Date().toISOString()
+        })
+        if (backupError) throw backupError
+      }
+
+      // 3️⃣ Actualizar el plan principal
+      const { error } = await supabase
+        .from("plan_estudios")
+        .update({
           nombre: payload.nombre ?? plan.nombre,
           nivel: payload.nivel ?? plan.nivel,
           duracion: payload.duracion ?? plan.duracion,
           total_creditos: payload.total_creditos ?? plan.total_creditos,
-      }).eq('id', plan.id)
+        })
+        .eq("id", plan.id)
+
       if (error) throw error
     },
+
     onMutate: async (payload) => {
       await qc.cancelQueries({ queryKey: planKeys.byId(plan.id) })
       const prev = qc.getQueryData<PlanFull>(planKeys.byId(plan.id))
-      qc.setQueryData<PlanFull>(planKeys.byId(plan.id), (old) => old ? { ...old, ...payload } as PlanFull : old as any)
+      qc.setQueryData<PlanFull>(
+        planKeys.byId(plan.id),
+        (old) => (old ? { ...old, ...payload } as PlanFull : old as any)
+      )
       return { prev }
     },
+
     onError: (_e, _vars, ctx) => {
       if (ctx?.prev) qc.setQueryData(planKeys.byId(plan.id), ctx.prev)
     },
+
     onSettled: async () => {
       await qc.invalidateQueries({ queryKey: planKeys.byId(plan.id) })
-    }
+    },
   })
 
   async function save() {

src/styles.css

@@ -138,7 +138,6 @@
   }
 }
 
-
 .animate-aurora {
   background: radial-gradient(at 20% 30%, oklch(27.5% 0.13488 262.73), transparent 50%),
     radial-gradient(at 80% 70%, oklch(0.704 0.191 22.216), transparent 50%),

tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "include": ["**/*.ts", "**/*.tsx"],
+  "include": ["**/*.ts", "**/*.tsx", "src/components/ai/AIChatModal.jsx", "src/components/ai/AIChatModal.js"],
   "compilerOptions": {
     "target": "ES2022",
     "jsx": "react-jsx",