genración del pdf de plan de estudios ya funciona

los planes de estudios ya tienen la estructura de la plantilla de la sep. Ya se visualizan con esa estructura y se pueden crear planes con dicha estructura
wip
2025-12-04 14:01:09 -06:00 · 2025-11-28 02:55:04 -06:00 · 2025-11-27 19:41:44 -06:00 · 2025-11-27 15:05:17 -06:00 · 2025-11-27 15:04:47 -06:00 · 2025-11-25 15:21:32 -06:00
24 changed files with 8112 additions and 364 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -4,6 +4,7 @@ dist
 dist-ssr
 *.local
 count.txt
-.env
+.env*
 .nitro
 .tanstack
+.cta.json
--- a/bun.lock
+++ b/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=="],
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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",
@@ -63,4 +66,4 @@
    "vitest": "^3.0.5",
    "web-vitals": "^4.2.4"
  }
-}
+}
--- a/src/components/ai/AIChatModal.jsx
+++ b/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>
+  );
+}
--- a/src/components/asignaturas/EditBibliografíaButton.tsx
+++ b/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() {
+    setSaving(true)
    try {
-      setSaving(true)
-      const refs = parseLines(text)
+      // 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)
-      initialTextRef.current = refs.join("\n")
-      toast.success(`${refs.length} referencia(s) guardada(s).`)
+      // 5️⃣ Refrescar estado local
+      onSaved((data as any)?.bibliografia ?? newRefs)
+      initialTextRef.current = newRefs.join("\n")
+      toast.success(`${newRefs.length} referencia(s) guardada(s).`)
      setOpen(false)
-    } catch (e: any) {
-      toast.error(e?.message ?? "No se pudo guardar")
+    } catch (err: any) {
+      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 (
--- a/src/components/carreras/DeleteCarreras.tsx
+++ b/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>
--- a/src/components/historico/HistorialCambiosModal.tsx
+++ b/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>
+  )
+
+}
--- a/src/components/planes/AddAsignaturaButton.tsx
+++ b/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) })
--- a/src/components/planes/CreatePlanDialog.tsx
+++ b/src/components/planes/CreatePlanDialog.tsx
@@ -1,15 +1,24 @@
-import { useRouter } from "@tanstack/react-router"
-import { useSupabaseAuth } from "@/auth/supabase"
-import { useState, useEffect, useCallback } from "react"
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
-import { Label } from "@/components/ui/label"
-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 { useRouter } from "@tanstack/react-router";
+import { useSupabaseAuth } from "@/auth/supabase";
+import { useState, useEffect, useCallback } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+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 }) {
-  const router = useRouter()
-  const auth = useSupabaseAuth()
-  const role = auth.claims?.role
+export function CreatePlanDialog({
+  open,
+  onOpenChange,
+}: {
+  open: boolean;
+  onOpenChange: (v: boolean) => void;
+}) {
+  const router = useRouter();
+  const auth = useSupabaseAuth();
+  const role = auth.claims?.role;

-  const [saving, setSaving] = useState(false)
-  const [err, setErr] = useState<string | null>(null)
+  const [saving, setSaving] = useState(false);
+  const [err, setErr] = useState<string | null>(null);

-  const [facultadId, setFacultadId] = useState(auth.claims?.facultad_id ?? "")
-  const [carreraId, setCarreraId] = useState(auth.claims?.carrera_id ?? "")
-  const [nivel, setNivel] = useState("")
+  const [facultadId, setFacultadId] = useState(auth.claims?.facultad_id ?? "");
+  const [carreraId, setCarreraId] = useState(auth.claims?.carrera_id ?? "");
+  const [nivel, setNivel] = useState("");
  const [prompt, setPrompt] = useState(
    "Genera un plan de estudios claro y realista: "
-  )
+  );

-  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 [searchTerm, setSearchTerm] = useState("")
-  const [currentPage, setCurrentPage] = useState(1)
-  const itemsPerPage = 10
-  const debouncedSearchTerm = useDebounce(searchTerm, 300)
+  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 [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 lockCarrera = role === "jefe_carrera"
-
-  
+  const lockFacultad =
+    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) => ({
-          id: file.documentos_id,
-          titulo: file.titulo_archivo,
-          s3_file_path: file.titulo_archivo,
-          fecha_subida: file.fecha_subida,
-          tags: file.tags || [],
-        })));
+        setDbFiles(
+          (data || []).map((file: any) => ({
+            id: file.documentos_id,
+            titulo: 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) => {
-    setSelectedFiles(prev => prev.includes(path) ? prev.filter(p => p !== path) : [...prev, path]);
+  const toggleSelected = useCallback((id: string) => {
+    setSelectedFiles((prev) =>
+      prev.includes(id) ? prev.filter((p) => p !== id) : [...prev, id]
+    );
  }, []);

-  const replaceSelection = useCallback((path: string) => {
-    setSelectedFiles([path]);
+  const replaceSelection = useCallback((id: string) => {
+    setSelectedFiles([id]);
  }, []);

-  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);
-    setSelectedFiles(prev => Array.from(new Set([...prev, ...paths])));
-  }, [dbFiles]);
+  const rangeSelect = useCallback(
+    (start: number, end: number) => {
+      const [s, e] = start < end ? [start, end] : [end, start];
+      const ids = dbFiles.slice(s, e + 1).map((f) => f.id);
+      setSelectedFiles((prev) => Array.from(new Set([...prev, ...ids])));
+    },
+    [dbFiles]
+  );

-  const handleCardClick = useCallback((e: React.MouseEvent, index: number, file: { s3_file_path: string }) => {
-    const path = file.s3_file_path;
+  const handleCardClick = useCallback(
+    (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);
-      setLastSelectedIndex(index);
-    } else {
-      if (isSelected(path) && selectedFiles.length === 1) {
-        // si ya es el único seleccionado, des-selecciona
-        setSelectedFiles([]);
-        setLastSelectedIndex(null);
-      } else {
-        replaceSelection(path);
+      if (e.shiftKey && lastSelectedIndex !== null) {
+        rangeSelect(lastSelectedIndex, index);
+      } else if (e.metaKey || e.ctrlKey) {
+        toggleSelected(id);
        setLastSelectedIndex(index);
+      } else {
+        if (isSelected(id) && selectedFiles.length === 1) {
+          // si ya es el único seleccionado, des-selecciona
+          setSelectedFiles([]);
+          setLastSelectedIndex(null);
+        } else {
+          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)
-    if (!carreraId) { setErr("Selecciona una carrera."); return }
-    setSaving(true)
+    setErr(null);
+    if (!carreraId) {
+      setErr("Selecciona una carrera.");
+      return;
+    }
+    setSaving(true);
    try {
-      const res = await postAPI("/api/generar/plan", {
-        carreraId,
-        prompt: prompt,
-        insert: true,
-        files: selectedFiles,
-        uuid: auth.user?.id,
-      })
-      const newId = (res as any)?.id || (res as any)?.plan?.id || (res as any)?.data?.id
+
+      const {
+        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,
+            archivos_a_usar: [],
+          },
+        }
+      );
+      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)
-        router.invalidate()
-        router.navigate({ to: "/plan/$planId", params: { planId: newId } })
+        onOpenChange(false);
+        router.invalidate();
+        router.navigate({ to: "/plan/$planId", params: { planId: newId } });
      } else {
-        onOpenChange(false)
-        router.invalidate()
+        onOpenChange(false);
+        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' : ''}
-                  <button className="ml-3 underline hover:no-underline" onClick={clearSelection}>Limpiar</button>
+                  {selectedFiles.length} seleccionado
+                  {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,12 +337,15 @@ 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 (
                  <div
                    key={file.id}
@@ -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",
-                    ].join(' ')}
+                      selected
+                        ? "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={[
-                      "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(' ')} />
+                    <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(" ")}
+                    />

                    <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);
-                      if (!isNaN(v)) setCurrentPage(Math.min(Math.max(v, 1), totalPages));
+                      const v = parseInt(e.target.value || "1", 10);
+                      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))}
-                  >Siguiente</Button>
+                    onClick={() =>
+                      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 className="w-full sm:w-auto" onClick={crearConIA} disabled={saving}>
+          <Button
+            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
-          row={previewRow}
-          onClose={() => setPreviewRow(null)}
-        />
+        <DetailDialog row={previewRow} onClose={() => setPreviewRow(null)} />
      )}
    </Dialog>
-  )
+  );
 }
--- a/src/components/planes/DownloadPlanPDF.tsx
+++ b/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;
--- a/src/components/planes/academic-sections.tsx
+++ b/src/components/planes/academic-sections.tsx
@@ -1,13 +1,26 @@
-import * as Icons from "lucide-react"
-import { useMemo, useState } from "react"
-import { useSuspenseQuery, useMutation, useQueryClient, queryOptions } from "@tanstack/react-query"
-import { Button } from "@/components/ui/button"
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
-import { Textarea } from "@/components/ui/textarea"
-import { supabase } from "@/auth/supabase"
-import { toast } from "sonner"
-import ReactMarkdown from 'react-markdown'
-
+import * as Icons from "lucide-react";
+import { useMemo, useState } from "react";
+import {
+  useSuspenseQuery,
+  useMutation,
+  useQueryClient,
+  queryOptions,
+} from "@tanstack/react-query";
+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
-  sistema_evaluacion?: string | string[] | null
-  perfil_ingreso?: string | string[] | null
-  perfil_egreso?: string | string[] | null
-  competencias_genericas?: string | string[] | null
-  competencias_especificas?: string | string[] | null
-  indicadores_desempeno?: string | string[] | null
-  pertinencia?: string | string[] | null
-  prompt?: string | null
-}
+  objetivo_general?: string | string[] | null;
+  sistema_evaluacion?: string | string[] | null;
+  perfil_ingreso?: string | string[] | null;
+  perfil_egreso?: string | string[] | null;
+  competencias_genericas?: string | string[] | null;
+  competencias_especificas?: string | string[] | null;
+  indicadores_desempeno?: string | string[] | null;
+  pertinencia?: string | string[] | null;
+  prompt?: string | null;
+  historico?: string | null;
+};

 async function fetchPlanText(planId: string): Promise<PlanTextFields> {
  const { data, error } = await supabase
    .from("plan_estudios")
-    .select(
-      `objetivo_general, sistema_evaluacion, perfil_ingreso, perfil_egreso,
-       competencias_genericas, competencias_especificas, indicadores_desempeno,
-       pertinencia, prompt`
-    )
+    .select(`*`)
    .eq("id", planId)
-    .single()
-  if (error) throw error
-  return (data ?? {}) as PlanTextFields
+    .single();
+  if (error) throw error;
+  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]
-  const h = hex.replace("#", "")
-  const v = h.length === 3 ? h.split("").map((c) => c + c).join("") : h
-  const n = parseInt(v, 16)
-  return [(n >> 16) & 255, (n >> 8) & 255, n & 255]
+  if (!hex) return [37, 99, 235];
+  const h = hex.replace("#", "");
+  const v =
+    h.length === 3
+      ? 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 }) {
-  const [open, setOpen] = useState(false)
+function ExpandableText({
+  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 rendered = Array.isArray(text) ? `• ${content}` : content
+  const content = Array.isArray(text) ? text.join("\n• ") : text;
+  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 }) {
-  const rgb = hexToRgb(color)
+function SectionPanel({
+  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 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
+          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)` }}>
-        <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) }}>
+      <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)`,
+        }}
+      >
+        <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 }) {
-  const qc = useQueryClient()
-  if(!planId) return <div>Cargando…</div>
-  const { data: plan } = useSuspenseQuery(planTextOptions(planId))
+export function AcademicSections({
+  planId,
+  color,
+}: {
+  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 [draft, setDraft] = useState("")
+  const [editing, setEditing] = useState<null | {
+    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 }) => {
-      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
+    mutationFn: async ({
+      key,
+      value,
+    }: {
+      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) })
-      const prev = qc.getQueryData<PlanTextFields>(planKeys.byId(planId))
-      qc.setQueryData<PlanTextFields>(planKeys.byId(planId), (old) => ({ ...(old ?? {}), [key]: value }))
-      return { prev }
+      await qc.cancelQueries({ queryKey: planKeys.byId(planId) });
+      const prev = qc.getQueryData<PlanTextFields>(planKeys.byId(planId));
+      qc.setQueryData<PlanTextFields>(planKeys.byId(planId), (old) => ({
+        ...(old ?? {}),
+        [key]: value,
+      }));
+      return { prev };
    },
    onError: (e, _vars, ctx) => {
-      if (ctx?.prev) qc.setQueryData(planKeys.byId(planId), ctx.prev)
-      toast.error((e as any)?.message || "No se pudo guardar 😓")
+      if (ctx?.prev) qc.setQueryData(planKeys.byId(planId), ctx.prev);
+      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-ing", title: "Perfil de ingreso", icon: Icons.UserPlus, key: "perfil_ingreso" as const, mono: false },
-      { id: "sec-egr", title: "Perfil de egreso", icon: Icons.GraduationCap, key: "perfil_egreso" as const, mono: false },
-      { id: "sec-cg", title: "Competencias genéricas", icon: Icons.Sparkles, key: "competencias_genericas" as const, mono: false },
-      { id: "sec-ce", title: "Competencias específicas", icon: Icons.Cog, key: "competencias_especificas" as const, mono: false },
-      { 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-clave",
+        title: "Clave del plan",
+        icon: Icons.Key,
+        key: "clave_del_plan_de_estudios" 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}>
-              <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)}
-                  onClick={() => {
-                    const toCopy = Array.isArray(text) ? text.join("\n") : (text ?? "")
-                    if (toCopy) navigator.clipboard.writeText(toCopy)
-                  }}
-                >
-                  Copiar
-                </Button>
-                {s.key !== "prompt" && 
-                  (<Button
-                    variant="ghost"
+            <SectionPanel
+              key={s.id}
+              id={s.id}
+              title={s.title}
+              icon={s.icon}
+              color={color}
+            >
+              {s.key === "historico" ? (
+                <>
+                  <Button
+                    variant="outline"
                    size="sm"
-                    onClick={() => {
-                      const current = Array.isArray(text) ? text.join("\n") : (text ?? "")
-                      setEditing({ key: s.key, title: s.title })
-                      setDraft(current)
-                    }}
+                    onClick={() => setOpenHistorial(true)}
                  >
-                    Editar
-                  </Button>)}
-              </div>
+                    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)
+                      }
+                      onClick={() => {
+                        const toCopy = Array.isArray(text)
+                          ? text.join("\n")
+                          : (text ?? "");
+                        if (toCopy) navigator.clipboard.writeText(toCopy);
+                      }}
+                    >
+                      Copiar
+                    </Button>
+                    {s.key !== "prompt" && (
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => {
+                          const current = Array.isArray(text)
+                            ? text.join("\n")
+                            : (text ?? "");
+                          setEditing({ key: s.key, title: s.title });
+                          setDraft(current);
+                        }}
+                      >
+                        Editar
+                      </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={() => {
-                if (!editing) return
-                updateField.mutate({ key: editing.key, value: draft })
-                setEditing(null)
+              onClick={async () => {
+                if (!editing) return;
+
+                // 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);
+          }
+        }}
+      />
    </>
-  )
+  );
 }
--- a/src/components/planes/planQueries.ts
+++ b/src/components/planes/planQueries.ts
@@ -26,15 +26,17 @@ export function planByIdOptions(planId: string) {
    queryKey: planKeys.byId(planId),
    queryFn: async (): Promise<PlanFull> => {
      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,
-          pertinencia, prompt, estado, fecha_creacion,
-          carreras ( id, nombre, facultades:facultades ( id, nombre, color, icon ) )
-        `)
-        .eq("id", planId)
-        .maybeSingle()
+    .from("plan_estudios")
+    .select(`
+        *,
+        carreras ( 
+            id, 
+            nombre, 
+            facultades ( id, nombre, color, icon ) 
+        )
+    `)
+    .eq("id", planId)
+    .maybeSingle();
      if (error || !data) throw error ?? new Error("Plan no encontrado")
      return data as unknown as PlanFull
    },
--- a/src/components/ui/prompt-input.tsx
+++ b/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,
+}
--- a/src/components/ui/tooltip.tsx
+++ b/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>
  )
--- a/src/hooks/useSupabaseUpdateWithHistory.ts
+++ b/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 };
+}
--- a/src/main.tsx
+++ b/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'
--- a/src/routes/_authenticated/asignatura/$asignaturaId.tsx
+++ b/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,29 +403,79 @@ 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)
-    const payload = {
-      nombre: form.nombre ?? asignatura.nombre,
-      clave: form.clave ?? asignatura.clave,
-      tipo: form.tipo ?? asignatura.tipo,
-      semestre: form.semestre ?? asignatura.semestre,
-      creditos: form.creditos ?? asignatura.creditos,
-      horas_teoricas: form.horas_teoricas ?? asignatura.horas_teoricas,
-      horas_practicas: form.horas_practicas ?? asignatura.horas_practicas,
+    try {
+      // 1️⃣ Preparar el payload final
+      const payload = {
+        nombre: form.nombre ?? asignatura.nombre,
+        clave: form.clave ?? asignatura.clave,
+        tipo: form.tipo ?? asignatura.tipo,
+        semestre: form.semestre ?? asignatura.semestre,
+        creditos: form.creditos ?? asignatura.creditos,
+        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)
    }
-    const { data, error } = await supabase
-      .from("asignaturas")
-      .update(payload)
-      .eq("id", asignatura.id)
-      .select()
-      .maybeSingle()
-    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 {
-        title: (u.title || "").trim(),
-        temas,
-      }
+      return { 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,15 +801,17 @@ 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]
      const j = idx + dir
      if (j < 0 || j >= next.length) return prev
-        ;[next[idx], next[j]] = [next[j], next[idx]]
+      ;[next[idx], next[j]] = [next[j], next[idx]]
      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)
-    const cleaned = cleanUnits(units)
-    const contenidos = buildPayload(cleaned)
-    const { data, error } = await supabase
-      .from("asignaturas")
-      .update({ contenidos })
-      .eq("id", asignaturaId)
-      .select()
-      .maybeSingle()
-    setSaving(false)
-    if (error) {
-      alert(error.message || "No se pudo guardar")
-      return
+    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()
+
+      if (error) throw error
+
+      setInitialUnits(cleaned)
+      onSaved((data as any)?.contenidos ?? contenidos)
+      setOpen(false)
+    } catch (err: any) {
+      alert(err.message || "Error al guardar contenidos")
+    } finally {
+      setSaving(false)
    }
-    setInitialUnits(cleaned)
-    onSaved((data as any)?.contenidos ?? contenidos)
-    setOpen(false)
  }

  const cancel = () => {
--- a/src/routes/_authenticated/asignaturas.tsx
+++ b/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,7 +80,8 @@ 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')
    .select(`
@@ -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" && (
-            <div>
+            {/* 🎓 Carrera */}
+            <div className={!facultad || facultad === "todas" ? "invisible" : ""}>
              <Label>Carrera</Label>
              <Select
                value={carrera ?? "todas"}
@@ -490,11 +542,38 @@ 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>



+
          {/* Chips de salud */}
          <div className="flex flex-wrap items-center gap-2">
            <HealthChip
@@ -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">
-                    <Icons.GraduationCap className="w-3.5 h-3.5" /> <strong>Carrera:</strong> {a.plan.carrera.nombre}
-                  </span>
+                  <InfoChip
+                    icon={<Icons.GraduationCap className="h-3 w-3" />}
+                    label={a.plan.carrera.nombre}                    
+                  />                  
                )}
                {a.plan.carrera?.facultad && (
-                  <span className="inline-flex items-center gap-1">
-                    <FacIcon className="w-3.5 h-3.5" /> {a.plan.carrera.facultad.nombre}
-                  </span>
+                  <InfoChip
+                    icon={<Icons.Building2 className="h-3 w-3" />}
+                    label={a.plan.carrera.facultad.nombre}
+                    tint={a.plan.carrera.facultad.color}                    
+                  />                 
                )}
              </div>
            )}
--- a/src/routes/_authenticated/carreras.tsx
+++ b/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}
--- a/src/routes/_authenticated/dashboard.tsx
+++ b/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')
--- a/src/routes/_authenticated/plan/$planId.tsx
+++ b/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="Créditos" value={fmt(plan.total_creditos)} Icon={Icons.Coins} accent={facColor} />
+            <StatCard label="Duración" value={plan.total_de_ciclos_del_plan_de_estudios ?? "—"} Icon={Icons.Clock} 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({
-        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)
+      // 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)
+
      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() {
--- a/src/styles.css
+++ b/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%),
--- a/tsconfig.json
+++ b/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",
Author	SHA1	Message	Date
Guillermo Arrieta Medina	1475a65938	genración del pdf de plan de estudios ya funciona	2025-12-04 14:01:09 -06:00
Guillermo Arrieta Medina	9a1d8279a1	los planes de estudios ya tienen la estructura de la plantilla de la sep. Ya se visualizan con esa estructura y se pueden crear planes con dicha estructura	2025-11-28 02:55:04 -06:00
Guillermo Arrieta Medina	0456a1063d	wip	2025-11-27 19:41:44 -06:00
Guillermo Arrieta Medina	a41136a224	Merge branch 'main' of https://github.lci.ulsa.mx/AlexRG/Acad-IA	2025-11-27 15:05:17 -06:00
Guillermo Arrieta Medina	102c21927e	gitingore modificado	2025-11-27 15:04:47 -06:00
Roberto.silva	566e23ad34	Se quitan respuestas del asistente y se agrega boton de cerrar modal	2025-11-25 15:21:32 -06:00
Roberto.silva	872c495d30	Se agrega modelo de respuestas y conversaciones archivos multiples y contexto de id plan de estudios	2025-11-25 11:34:00 -06:00
Roberto.silva	7951f9d8c5	Merge branch 'main' of https://github.lci.ulsa.mx/AlexRG/Acad-IA	2025-11-24 16:17:53 -06:00
Roberto.silva	4894543c57	Se agrega funcionalidades de crear conversacion, archivos y vectores ademas de MCP	2025-11-24 16:17:49 -06:00
Guillermo Arrieta Medina	efe7faa65f	Cambios de Roberto	2025-11-21 17:05:16 -06:00
Roberto.silva	c9d66ce2e5	Merge branch 'main' of https://github.lci.ulsa.mx/AlexRG/Acad-IA	2025-11-18 15:17:15 -06:00
Roberto.silva	f7a29ad510	Version estable conversacion normal	2025-11-18 15:17:11 -06:00
Alejandro Rosales	e7a47f56f8	Merge pull request '[#67 ] dummy' (!2 ) from task/67-dummy into main Reviewed-on: #2	2025-11-13 21:32:48 +00:00
Alejandro Rosales	214d17cf98	[#67 ] dummy https://proyectos.apps.lci.ulsa.mx/work_packages/67	2025-11-13 15:22:28 -06:00
Roberto.silva	8c890d76e0	Se agrega titulo a pdf	2025-11-13 10:23:04 -06:00
Roberto.silva	7105b286bf	Se agrega componente de ia y pdf	2025-11-13 10:02:26 -06:00
Roberto.silva	0e884f20c5	Se agrega funcionalidad de historico de cambios	2025-11-07 07:23:02 -06:00
Roberto.silva	8bb8399ec5	Merge branch 'feature/PdfAndHistorico'	2025-11-05 15:20:52 -06:00
Roberto.silva	9462e25a20	Se crea funcionalidad de exportar pdf desde front y generar historial de version de cambios se agrego una libreri jspdf	2025-11-05 15:19:38 -06:00
Roberto.silva	daac6f3f6d	Se agregan filtros de plan de estudios, carrera y se limpian filtros	2025-10-30 14:50:48 -06:00
Guillermo Arrieta Medina	6d264a8214	Merge branch 'master' of https://github.lci.ulsa.mx/AlexRG/Acad-IA	2025-10-30 14:38:56 -06:00
Guillermo Arrieta Medina	4cf93ff1f4	La pantalla se volvía negra al abrir el dialogo de eliminar carrera La razón es que se rendereaba un dialogo de borrado por carrera, pero al abrir uno se abrian los demás también	2025-10-30 07:47:37 -06:00
Roberto.silva	d25b8b0441	Se corrigen bugs sobre crear carreras, filtrado y que aparezcan las materias cuando se crean	2025-10-30 07:46:40 -06:00
Guillermo Arrieta Medina	6e2b3d72f1	Se envían correctamente los ids de los archivos de referencia para su procesamiento en el backend	2025-10-27 17:14:50 -06:00
Guillermo Arrieta Medina	0c5c3f935b	comm	2025-10-27 15:45:16 -06:00
Guillermo Arrieta Medina	8da08b6bf1	La pantalla se volvía negra al abrir el dialogo de eliminar carrera La razón es que se rendereaba un dialogo de borrado por carrera, pero al abrir uno se abrian los demás también	2025-10-24 13:01:33 -06:00
Roberto.silva	1fe8f2b6a8	Se corrigen bugs sobre crear carreras, filtrado y que aparezcan las materias cuando se crean	2025-10-24 12:36:39 -06:00