EdukI\u0394 - Visor de Inteligencias Artificiales<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdfmake\/0.2.7\/pdfmake.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdfmake\/0.2.7\/vfs_fonts.js\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto+Mono:wght@400;500;700&family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n <style>\n \/* Estilos Base *\/\n body { font-family: 'Inter', sans-serif; background-color: #f0f4f8; margin: 0; padding: 0; overflow-x: hidden; }\n \n \/* --- Estilos App Original (Explorador) --- *\/\n .info-card { background-color: white; border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 \/ 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; }\n .info-card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px -3px rgb(0 0 0 \/ 0.1); }\n select { background-image: url('data:image\/svg+xml;charset=UTF-8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 20 20\"><path stroke=\"%236b7280\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"m6 8 4 4 4-4\"\/><\/svg>'); background-position: right 0.5rem center; background-repeat: no-repeat; background-size: 1.5em 1.5em; padding-right: 2.5rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; }\n .infographic-container { position: absolute; left: -9999px; width: 900px; background-color: #ffffff; color: #1f2937; box-sizing: border-box; overflow: hidden; }\n .radio-label { transition: all 0.2s ease-in-out; }\n input[type=\"radio\"]:checked + .radio-label { background-color: #4f46e5; color: white; border-color: #4f46e5; }\n details > summary { list-style: none; }\n details > summary::-webkit-details-marker { display: none; }\n details summary .arrow { transition: transform 0.2s; }\n details[open] summary .arrow { transform: rotate(90deg); }\n\n \/* --- Estilos Tabla Peri\u00f3dica Integrada --- *\/\n \n \/* Contenedor de la Vista Tabla (Aislado para controlar el fondo) *\/\n #view-periodic {\n background-color: #111827; \/* Fondo oscuro FORZADO *\/\n min-height: 100vh;\n width: 100%;\n color: white;\n box-sizing: border-box;\n padding-bottom: 40px;\n }\n\n \/* Wrapper del Scroll Horizontal *\/\n .periodic-scroll-container {\n width: 100%;\n overflow-x: auto; \/* Habilita scroll lateral *\/\n -webkit-overflow-scrolling: touch; \/* Suavidad en iOS *\/\n padding: 20px;\n box-sizing: border-box;\n \/* Ocultar scrollbar fea pero permitir scroll *\/\n scrollbar-width: thin;\n scrollbar-color: #374151 #111827;\n }\n\n \/* Grid Maestro Fijo *\/\n .periodic-table { \n display: grid; \n grid-template-columns: repeat(18, 1fr); \n grid-template-rows: repeat(5, 130px); \n gap: 8px; \n \/* ANCHO M\u00cdNIMO FORZADO: Evita que se aplaste en m\u00f3vil *\/\n min-width: 1100px; \n max-width: 1600px; \n margin: 0 auto; \n position: relative;\n }\n \n \/* Elementos *\/\n .element { \n aspect-ratio: 1 \/ 1; \n background: rgba(255, 255, 255, 0.05); \n border: 1px solid rgba(255, 255, 255, 0.1); \n border-radius: 6px; \n padding: 8px; \n display: flex; \n flex-direction: column; \n justify-content: space-between; \n cursor: pointer; \n transition: all 0.2s ease; \n position: relative;\n min-width: 0; \n }\n \/* Active-mobile para el primer toque en pantallas t\u00e1ctiles *\/\n .element:hover, .element.active-mobile { \n transform: scale(1.15); \n z-index: 50; \n box-shadow: 0 0 20px rgba(255,255,255,0.2); \n border-color: rgba(255,255,255,0.5); \n }\n .element-number { font-family: 'Roboto Mono', monospace; font-size: 0.7rem; opacity: 0.6; }\n .element-symbol { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 1.8rem; text-align: center; text-shadow: 0 2px 4px rgba(0,0,0,0.3); align-self: center; flex-grow: 1; display: flex; align-items: center; }\n .element-name { font-size: 0.65rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px;}\n\n \/* Panel Central (Hueco) *\/\n .central-panel {\n grid-column: 3 \/ span 10; \n grid-row: 2 \/ span 2; \n background: rgba(31, 41, 55, 0.5);\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 12px;\n padding: 24px;\n display: flex;\n gap: 30px;\n align-items: center;\n backdrop-filter: blur(5px);\n opacity: 0; \n transition: opacity 0.2s;\n pointer-events: none; \n height: 100%; \n overflow: hidden; \n }\n .central-panel.active { opacity: 1; pointer-events: auto; }\n \n .big-symbol-card {\n width: 160px;\n height: 160px;\n background: #1f2937;\n border-radius: 8px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n box-shadow: 0 10px 30px rgba(0,0,0,0.3);\n border: 2px solid transparent; \n flex-shrink: 0;\n }\n .big-symbol-text { font-size: 5rem; font-weight: 900; line-height: 1; }\n .big-symbol-number { font-family: 'Roboto Mono'; font-size: 0.9rem; align-self: flex-start; padding: 10px 0 0 15px; width: 100%; opacity: 0.7; }\n .big-symbol-name { font-size: 0.8rem; text-transform: uppercase; margin-top: 5px; font-weight: 700; letter-spacing: 0.1em; color: #d1d5db; text-align: center; padding: 0 5px; }\n\n .panel-details { flex-grow: 1; text-align: left; display: flex; flex-direction: column; justify-content: center; height: 100%; }\n .panel-title { font-size: 2.5rem; font-weight: 700; margin-bottom: 0.5rem; line-height: 1.1; color: #e5e7eb; }\n .panel-category-tag { display: inline-block; padding: 4px 12px; border-radius: 99px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; margin-bottom: 0.5rem; background: rgba(255,255,255,0.1); width: fit-content; }\n \n .panel-description { font-size: 1rem; color: #d1d5db; line-height: 1.5; margin-bottom: 1rem; max-height: 100px; overflow-y: auto; padding-right: 10px; }\n .panel-description::-webkit-scrollbar { width: 4px; }\n .panel-description::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); }\n .panel-description::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; }\n\n .panel-meta { font-family: 'Roboto Mono'; font-size: 0.8rem; color: #9ca3af; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 10px; margin-top: auto; }\n\n \/* Leyenda *\/\n .table-legend {\n grid-column: 3 \/ span 10; \n grid-row: 1 \/ span 1;\n display: flex;\n flex-wrap: wrap;\n align-content: center;\n justify-content: center;\n gap: 10px;\n padding: 10px;\n }\n .legend-pill { font-size: 0.7rem; display: flex; align-items: center; color: #9ca3af; background: rgba(255,255,255,0.05); padding: 4px 8px; border-radius: 4px; }\n .legend-dot { width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }\n\n \/* Scroll Hint Animado para M\u00f3vil *\/\n .scroll-hint {\n display: none;\n text-align: center;\n color: #60a5fa; \/* Azul claro para destacar *\/\n font-size: 0.9rem;\n font-weight: 600;\n margin-bottom: 15px;\n animation: pulse 2s infinite;\n padding: 10px;\n background: rgba(255,255,255,0.05);\n border-radius: 8px;\n border: 1px dashed rgba(255,255,255,0.2);\n }\n @media (max-width: 1024px) {\n .scroll-hint { display: block; }\n }\n @keyframes pulse {\n 0%, 100% { opacity: 0.6; transform: translateX(0); }\n 50% { opacity: 1; transform: translateX(5px); }\n }\n\n \/* Colores Categor\u00edas *\/\n .bg-video { background-color: rgba(139, 92, 246, 0.2); border-color: rgba(139, 92, 246, 0.5); color: #ddd6fe; }\n .bg-imagen { background-color: rgba(236, 72, 153, 0.2); border-color: rgba(236, 72, 153, 0.5); color: #fbcfe8; }\n .bg-texto { background-color: rgba(59, 130, 246, 0.2); border-color: rgba(59, 130, 246, 0.5); color: #bfdbfe; }\n .bg-codigo { background-color: rgba(16, 185, 129, 0.2); border-color: rgba(16, 185, 129, 0.5); color: #a7f3d0; }\n .bg-audio { background-color: rgba(245, 158, 11, 0.2); border-color: rgba(245, 158, 11, 0.5); color: #fde68a; }\n .bg-investigacion { background-color: rgba(14, 165, 233, 0.2); border-color: rgba(14, 165, 233, 0.5); color: #bae6fd; }\n .bg-productividad { background-color: rgba(234, 179, 8, 0.2); border-color: rgba(234, 179, 8, 0.5); color: #fef08a; }\n .bg-presentacion { background-color: rgba(239, 68, 68, 0.2); border-color: rgba(239, 68, 68, 0.5); color: #fecaca; }\n .bg-desarrollo { background-color: rgba(99, 102, 241, 0.2); border-color: rgba(99, 102, 241, 0.5); color: #c7d2fe; }\n .bg-datos { background-color: rgba(107, 114, 128, 0.2); border-color: rgba(107, 114, 128, 0.5); color: #e5e7eb; }\n \n \/* Navegaci\u00f3n Tabs *\/\n .nav-tabs { display: flex; justify-content: center; margin-bottom: 2rem; background: #fff; width: fit-content; margin: 0 auto 2rem auto; padding: 0.5rem; border-radius: 9999px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); flex-wrap: wrap; gap: 5px;}\n .nav-tab { padding: 0.5rem 1.5rem; border-radius: 9999px; cursor: pointer; font-weight: 600; color: #4b5563; transition: all 0.2s; white-space: nowrap; }\n .nav-tab.active { background-color: #4f46e5; color: white; shadow: 0 2px 4px rgba(0,0,0,0.1); }\n \n \/* Estilo espec\u00edfico para Navbar cuando se ve la tabla oscura *\/\n .dark-mode-nav { background: #1f2937; border: 1px solid #374151; }\n .dark-mode-nav .nav-tab { color: #9ca3af; }\n .dark-mode-nav .nav-tab.active { background-color: #6366f1; color: white; }\n <\/style>\n<\/head>\n<body class=\"text-gray-800\">\n\n <div class=\"container mx-auto p-4 sm:p-6 md:p-8 max-w-full\">\n \n \n <div id=\"main-nav\" class=\"nav-tabs\">\n <div id=\"tab-explorer\" class=\"nav-tab active\">Explorador de Fichas<\/div>\n <div id=\"tab-periodic\" class=\"nav-tab\">Tabla Peri\u00f3dica<\/div>\n <\/div>\n\n \n <main id=\"view-explorer\">\n \n <div class=\"mb-8 info-card p-6 text-gray-700 max-w-4xl mx-auto\">\n <p class=\"text-center mb-6\">Esta herramienta est\u00e1 dise\u00f1ada para ayudarte a descubrir y entender las IAs m\u00e1s relevantes del momento de una forma f\u00e1cil e intuitiva. A continuaci\u00f3n, te explicamos c\u00f3mo funciona:<\/p>\n <div class=\"space-y-2\">\n <details class=\"border-b border-gray-200 py-2\">\n <summary class=\"font-semibold text-lg text-purple-600 cursor-pointer flex justify-between items-center\">1. Hiperpar\u00e1metros Comunes en IA <span class=\"arrow transition-transform duration-200\">\u25b6<\/span><\/summary>\n <p class=\"mt-2 text-sm text-gray-600 pl-4\">En la parte superior, encontrar\u00e1s una secci\u00f3n fija que explica de manera sencilla qu\u00e9 son los <strong>hiperpar\u00e1metros<\/strong> m\u00e1s comunes.<\/p>\n <\/details>\n <details class=\"border-b border-gray-200 py-2\">\n <summary class=\"font-semibold text-lg text-purple-600 cursor-pointer flex justify-between items-center\">2. Dos Modos de B\u00fasqueda <span class=\"arrow transition-transform duration-200\">\u25b6<\/span><\/summary>\n <div class=\"mt-2 text-sm text-gray-600 pl-4\"><p>Tienes dos maneras de explorar la lista de IAs:<\/p><ul class=\"list-disc list-inside mt-2 ml-4 space-y-1\"><li><strong>Seleccionar por IA:<\/strong> Este es el modo por defecto.<\/li><li><strong>Seleccionar por Prop\u00f3sito:<\/strong> Filtra las IAs por su funci\u00f3n principal.<\/li><\/ul><\/div>\n <\/details>\n <details class=\"border-b border-gray-200 py-2\">\n <summary class=\"font-semibold text-lg text-purple-600 cursor-pointer flex justify-between items-center\">3. Visualizaci\u00f3n de la Informaci\u00f3n <span class=\"arrow transition-transform duration-200\">\u25b6<\/span><\/summary>\n <p class=\"mt-2 text-sm text-gray-600 pl-4\">Cuando seleccionas una IA, aparecer\u00e1n tres tarjetas con informaci\u00f3n detallada.<\/p>\n <\/details>\n <details class=\"py-2\">\n <summary class=\"font-semibold text-lg text-purple-600 cursor-pointer flex justify-between items-center\">4. Opciones de Descarga en PDF <span class=\"arrow transition-transform duration-200\">\u25b6<\/span><\/summary>\n <div class=\"mt-2 text-sm text-gray-600 pl-4\"><p><strong>Infograf\u00eda:<\/strong> Resumen visual atractivo. <strong>Lista Completa:<\/strong> Tabla comparativa de todas las IAs.<\/p><\/div>\n <\/details>\n <\/div>\n <\/div>\n\n \n <div class=\"mb-8 info-card p-6 max-w-4xl mx-auto\">\n <h2 class=\"text-2xl font-semibold text-center text-purple-600 mb-4\">Hiperpar\u00e1metros Comunes en IA<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-4 text-sm text-gray-700\">\n <div><p><strong>Tasa de Aprendizaje:<\/strong> Rapidez con la que el modelo aprende.<\/p><\/div>\n <div><p><strong>Temperatura:<\/strong> Controla la creatividad\/aleatoriedad.<\/p><\/div>\n <div><p><strong>Tama\u00f1o del Lote:<\/strong> Ejemplos procesados a la vez.<\/p><\/div>\n <div><p><strong>Top-K \/ Top-P:<\/strong> Filtros de coherencia en la generaci\u00f3n.<\/p><\/div>\n <div><p><strong>N\u00famero de \u00c9pocas:<\/strong> Ciclos completos de entrenamiento.<\/p><\/div>\n <div><p><strong>Capas y Neuronas:<\/strong> Complejidad del \"cerebro\" digital.<\/p><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"mb-6 flex justify-center items-center space-x-4\">\n <input type=\"radio\" id=\"mode-ai\" name=\"selection-mode\" value=\"ai\" checked class=\"hidden\">\n <label for=\"mode-ai\" class=\"radio-label cursor-pointer px-4 py-2 border border-gray-300 rounded-lg\">Por IA<\/label>\n <input type=\"radio\" id=\"mode-purpose\" name=\"selection-mode\" value=\"purpose\" class=\"hidden\">\n <label for=\"mode-purpose\" class=\"radio-label cursor-pointer px-4 py-2 border border-gray-300 rounded-lg\">Por Prop\u00f3sito<\/label>\n <\/div>\n\n \n <div id=\"selectors-container\" class=\"mb-8 max-w-md mx-auto space-y-4\">\n <div id=\"purpose-selector-container\" class=\"hidden\">\n <label for=\"purpose-selector\" class=\"block text-center text-md text-gray-600 mb-2\">Elige un prop\u00f3sito<\/label>\n <select id=\"purpose-selector\" class=\"w-full p-3 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition\"><option value=\"\">-- Selecciona un prop\u00f3sito --<\/option><\/select>\n <\/div>\n <div id=\"ai-selector-container\">\n <label for=\"ai-selector\" class=\"block text-center text-md text-gray-600 mb-2\">Selecciona una IA de la lista<\/label>\n <select id=\"ai-selector\" class=\"w-full p-3 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition\"><option value=\"\">-- Selecciona una IA --<\/option><\/select>\n <\/div>\n <\/div>\n\n \n <div class=\"text-center mb-8\">\n <p class=\"text-center text-md text-gray-600 mb-2\">O descarga el listado completo<\/p>\n <button id=\"download-table-btn\" class=\"bg-gray-600 hover:bg-gray-700 text-white font-bold py-3 px-6 rounded-lg shadow-md transition-transform transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2\">\n <svg class=\"inline-block w-5 h-5 mr-2\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\"><\/path><\/svg>\n Descargar Lista Completa de IAs\n <\/button>\n <\/div>\n\n \n <div id=\"ai-info-wrapper\" class=\"max-w-4xl mx-auto\">\n <div id=\"ai-info-container\" class=\"grid grid-cols-1 md:grid-cols-2 gap-6 hidden\">\n <div id=\"purpose-card\" class=\"info-card p-6 flex flex-col justify-between\">\n <div><h2 class=\"text-2xl font-semibold text-blue-600 mb-4\">Prop\u00f3sito<\/h2><div id=\"purpose-content\" class=\"space-y-3 text-gray-700\"><\/div><\/div>\n <div id=\"purpose-link-container\" class=\"mt-4\"><\/div>\n <\/div>\n <div id=\"tech-card\" class=\"info-card p-6\">\n <h2 class=\"text-2xl font-semibold text-green-600 mb-4\">Aspectos T\u00e9cnicos<\/h2><div id=\"tech-content\" class=\"space-y-3 text-gray-700\"><\/div>\n <\/div>\n <\/div>\n <div id=\"hyperparameters-container\" class=\"mt-6 hidden\">\n <div class=\"info-card p-6\"><h2 class=\"text-2xl font-semibold text-center text-orange-600 mb-4\">Hiperpar\u00e1metros Espec\u00edficos<\/h2><div id=\"hyperparameters-content\" class=\"text-sm text-gray-700\"><\/div><\/div>\n <\/div>\n <\/div>\n \n <div id=\"download-section\" class=\"text-center mt-8 hidden\">\n <button id=\"download-btn\" class=\"bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-lg shadow-md transition-transform transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2\">\n <svg class=\"inline-block w-5 h-5 mr-2\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\"><\/path><\/svg>\n Descargar Infograf\u00eda en PDF\n <\/button>\n <\/div>\n <div id=\"initial-message\" class=\"text-center text-gray-500 py-10\">\n <svg class=\"mx-auto h-12 w-12 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" \/><\/svg>\n <p class=\"mt-4 text-lg\">La informaci\u00f3n sobre la IA seleccionada aparecer\u00e1 aqu\u00ed.<\/p>\n <\/div>\n <\/main>\n\n \n <div id=\"view-periodic\" class=\"periodic-table-wrapper\">\n <div class=\"text-center mb-6\">\n <h1 class=\"text-3xl md:text-4xl font-bold tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500 mb-2\">Tabla Peri\u00f3dica de la IA<\/h1>\n <p class=\"text-gray-400 text-sm\">Exploraci\u00f3n visual del ecosistema IA<\/p>\n <\/div>\n \n \n <div class=\"scroll-hint\">\n \u2194 Desliza horizontalmente para ver la tabla completa\n <\/div>\n\n <div class=\"periodic-scroll-container\">\n <div class=\"periodic-table\" id=\"periodic-table\">\n \n <div class=\"table-legend\" id=\"table-legend\"><\/div>\n\n \n <div id=\"central-panel\" class=\"central-panel\">\n <div id=\"big-symbol-card\" class=\"big-symbol-card\">\n <div id=\"big-number\" class=\"big-symbol-number\">00<\/div>\n <div id=\"big-symbol\" class=\"big-symbol-text\">Ai<\/div>\n <div id=\"big-name\" class=\"big-symbol-name\">Nombre<\/div>\n <\/div>\n <div class=\"panel-details\">\n <span id=\"panel-category\" class=\"panel-category-tag\">Categor\u00eda<\/span>\n <h2 id=\"panel-title\" class=\"panel-title\">Selecciona una IA<\/h2>\n <div id=\"panel-desc\" class=\"panel-description\">Pasa el rat\u00f3n (o toca) sobre los elementos para ver su composici\u00f3n y propiedades.<\/div>\n <div class=\"panel-meta\" id=\"panel-tech\">Creador: -<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"infographic-generator\" class=\"infographic-container\">\n <div id=\"info-header\" style=\"padding: 2.5rem; border-radius: 0 0 2rem 2rem; margin-bottom: 2rem; color: white;\">\n <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n <div><span id=\"info-category-pill\" style=\"background: rgba(255,255,255,0.2); padding: 0.5rem 1rem; border-radius: 9999px; font-size: 0.9rem; font-weight: 600;\">Categor\u00eda<\/span><h1 id=\"infographic-title\" style=\"font-size: 3.5rem; font-weight: 800; margin-top: 0.5rem;\">Nombre IA<\/h1><\/div>\n <div id=\"info-category-icon\" style=\"width: 80px; height: 80px; opacity: 0.9;\"><\/div>\n <\/div>\n <\/div>\n <div style=\"padding: 0 2.5rem 2.5rem 2.5rem;\">\n <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem;\">\n <div style=\"background: #f9fafb; padding: 1.5rem; border-radius: 1rem;\"><h2 style=\"font-size: 1.5rem; font-weight: 700;\">Prop\u00f3sito<\/h2><div id=\"infographic-purpose\" style=\"font-size: 0.95rem;\"><\/div><\/div>\n <div style=\"background: #f9fafb; padding: 1.5rem; border-radius: 1rem;\"><h2 style=\"font-size: 1.5rem; font-weight: 700;\">T\u00e9cnica<\/h2><div id=\"infographic-tech\" style=\"font-size: 0.95rem;\"><\/div><\/div>\n <\/div>\n <div style=\"background: #fff; border: 2px solid #f3f4f6; border-radius: 1rem; padding: 1.5rem;\"><div id=\"infographic-hyperparameters\" style=\"font-size: 0.9rem; text-align: center;\"><\/div><\/div>\n <div style=\"display: flex; justify-content: space-between; margin-top: 1.5rem;\"><div id=\"infographic-link\"><\/div><p style=\"font-weight: 800;\">EdukI\u0394<\/p><\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ --- BASE DE DATOS COMPARTIDA ---\n const aiData = {\n 'adobe-firefly': { name: 'Adobe Firefly', url: 'https:\/\/firefly.adobe.com\/', category: ['imagen'], purpose: [\"Generaci\u00f3n segura.\", \"Adobe CC.\"], technical: [\"Adobe Stock.\", \"Relleno Gen.\"], creator: \"Adobe\" },\n 'base44': { name: 'Base44', url: 'https:\/\/base44.com\/', category: ['desarrollo'], purpose: [\"Agentes aut\u00f3nomos.\", \"Automatizaci\u00f3n.\"], technical: [\"Orquestaci\u00f3n LLM.\", \"Conectores.\"], creator: \"Base44\" },\n 'beautiful-ai': { name: 'Beautiful.ai', url: 'https:\/\/www.beautiful.ai\/', category: ['presentacion', 'productividad'], purpose: [\"Creador de presentaciones automatizado que prioriza el dise\u00f1o inteligente.\", \"Su objetivo es que el usuario se centre en el contenido mientras la IA ajusta el dise\u00f1o en tiempo real.\", \"Ideal para crear diapositivas profesionales sin ser dise\u00f1ador.\"], technical: [\"Tecnolog\u00eda 'Smart Slide' para layout din\u00e1mico.\", \"DesignerBot para generaci\u00f3n de contenido.\", \"Exportaci\u00f3n a PowerPoint.\"], creator: \"Beautiful.ai\", hyperparameters: false },\n 'beeble-ai': { name: 'Beeble', url: 'https:\/\/beeble.ai\/', category: ['video'], purpose: [\"Video-to-VFX.\", \"Estilos anime\/ciberpunk.\"], technical: [\"Video-a-Video.\", \"Coherencia.\"], creator: \"Beeble.ai\" },\n 'chat-z': { name: 'Chat.Z', url: 'https:\/\/chat.z.ai\/', category: ['texto'], purpose: [\"Razonamiento y c\u00f3digo.\", \"Presentaciones.\"], technical: [\"GLM-4.5.\", \"Entorno virtual.\"], creator: \"Z.ai\" },\n 'claude-3': { name: 'Claude 3', url: 'https:\/\/claude.ai', category: ['texto'], purpose: [\"An\u00e1lisis doc largos.\", \"Seguridad.\"], technical: [\"Contexto 1M.\", \"IA Constitucional.\"], creator: \"Anthropic\" },\n 'deepseek': { name: 'Deepseek', url: 'https:\/\/chat.deepseek.com\/', category: ['codigo'], purpose: [\"Matem\u00e1ticas y c\u00f3digo.\", \"Open Source.\"], technical: [\"Coder\/Math.\", \"Pesos abiertos.\"], creator: \"DeepseekAI\" },\n 'elevenlabs': { name: 'ElevenLabs', url: 'https:\/\/elevenlabs.io\/', category: ['audio'], purpose: [\"L\u00edder en s\u00edntesis de voz y clonaci\u00f3n de voz realista.\", \"Doblaje y audiolibros.\"], technical: [\"Deep Learning TTS.\", \"Clonaci\u00f3n.\"], creator: \"ElevenLabs\" },\n 'elicit': { name: 'Elicit', url: 'https:\/\/elicit.com\/', category: ['investigacion'], purpose: [\"Revisi\u00f3n literatura.\", \"Resume papers.\"], technical: [\"B\u00fasqueda sem\u00e1ntica.\", \"Extracci\u00f3n.\"], creator: \"Ought\" },\n 'fliki': { name: 'Fliki', url: 'https:\/\/app.fliki.ai\/', category: ['video'], purpose: [\"Texto a video redes.\", \"Voces sint\u00e9ticas.\"], technical: [\"Librer\u00eda stock.\", \"TTS.\"], creator: \"Fliki AI\" },\n 'gamma': { name: 'Gamma', url: 'https:\/\/gamma.app\/', category: ['presentacion'], purpose: [\"Presentaciones desde texto.\", \"Dise\u00f1o auto.\"], technical: [\"Dise\u00f1o IA.\", \"Embeds.\"], creator: \"Gamma App\" },\n 'gemini': { name: 'Gemini', url: 'https:\/\/gemini.google.com\/', category: ['texto'], purpose: [\"Multimodal nativa.\", \"Ecosistema Google.\"], technical: [\"Nano, Pro, Ultra.\", \"TPUs.\"], creator: \"Google\" },\n 'genspark': { name: 'Genspark', url: 'https:\/\/www.genspark.ai\/', category: ['investigacion'], purpose: [\"Buscador res\u00famenes.\", \"Sparkpages.\"], technical: [\"\u00cdndice propio.\", \"Multimodal.\"], creator: \"Genspark\" },\n 'google-mixboard': { name: 'Mixboard', url: 'https:\/\/labs.google.com\/mixboard\/', category: ['productividad'], purpose: [\"Moodboards visuales.\", \"Brainstorming.\"], technical: [\"Nano Banana.\", \"Edici\u00f3n natural.\"], creator: \"Google Labs\" },\n 'grok': { name: 'Grok', url: 'https:\/\/grok.com\/', category: ['texto'], purpose: [\"Acceso real X.\", \"Sin censura.\"], technical: [\"Grok-1 Open.\", \"Feed Twitter.\"], creator: \"xAI\" },\n 'gpt-5': { name: 'GPT-5', url: 'https:\/\/openai.com\/gpt-5', category: ['texto'], purpose: [\"Modelo futuro.\", \"Razonamiento.\"], technical: [\"Transformer.\", \"RLHF.\"], creator: \"OpenAI\" },\n 'heygen': { name: 'HeyGen', url: 'https:\/\/app.heygen.com\/', category: ['video'], purpose: [\"Avatares realistas.\", \"Lip-sync.\"], technical: [\"Video Gen.\", \"Image Gen.\"], creator: \"HeyGen\" },\n 'higgsfield': { name: 'Higgsfield', url: 'https:\/\/www.higgsfield.ai\/', category: ['video'], purpose: [\"Personajes consistentes.\", \"Creadores.\"], technical: [\"Difusi\u00f3n video.\", \"Identidad.\"], creator: \"Higgsfield AI\" },\n 'infinitetalk': { name: 'Infinite Talk', url: 'https:\/\/www.infinitetalk.net\/', category: ['texto'], purpose: [\"Personajes IA.\", \"Conversaci\u00f3n.\"], technical: [\"Memoria larga.\", \"Personalidad.\"], creator: \"Infinite Talk\" },\n 'kling-ai': { name: 'Kling AI', url: 'https:\/\/klingai.com\/global\/', category: ['video'], purpose: [\"Video larga duraci\u00f3n.\", \"F\u00edsica.\"], technical: [\"2 min 1080p.\", \"Atenci\u00f3n 3D.\"], creator: \"Kuaishou\" },\n 'krea': { name: 'Krea', url: 'https:\/\/www.krea.ai\/', category: ['imagen'], purpose: [\"Generaci\u00f3n real-time.\", \"Upscaling.\"], technical: [\"Baja latencia.\", \"Lienzo.\"], creator: \"Krea AI\" },\n 'lovable': { name: 'Lovable', url: 'https:\/\/lovable.dev\/', category: ['desarrollo'], purpose: [\"Tests webs auto.\", \"Playwright.\"], technical: [\"Auto-reparaci\u00f3n.\", \"C\u00f3digo test.\"], creator: \"Lovable\" },\n 'manus': { name: 'Manus', url: 'https:\/\/manus.im\/app', category: ['datos'], purpose: [\"Etiquetado datos.\", \"Visi\u00f3n.\"], technical: [\"Auto-label.\", \"Human-loop.\"], creator: \"Manus AI\" },\n 'Meta-AI': { name: 'Meta AI', url: 'https:\/\/meta.ai\/', category: ['texto'], purpose: [\"Asistente abierto basado en Llama 3.\", \"Integrado en redes de Meta.\"], technical: [\"Llama 3 Open Weights.\", \"Eficiente.\"], creator: \"Meta\" },\n 'midjourney': { name: 'Midjourney', url: 'https:\/\/www.midjourney.com\/', category: ['imagen'], purpose: [\"Arte est\u00e9tico.\", \"Discord.\"], technical: [\"Difusi\u00f3n propia.\", \"Estilo \u00fanico.\"], creator: \"Midjourney\" },\n 'mistral': { name: 'Mistral', url: 'https:\/\/mistral.ai\/', category: ['texto'], purpose: [\"Eficiencia europea.\", \"Open Source.\"], technical: [\"Mixtral MoE.\", \"Pesos.\"], creator: \"Mistral AI\" },\n 'napkin': { name: 'Napkin', url: 'https:\/\/app.napkin.ai\/', category: ['productividad'], purpose: [\"Notas visuales.\", \"Storytelling.\"], technical: [\"NLP contexto.\", \"Generaci\u00f3n de diagramas.\"], creator: \"Napkin\" },\n 'notebooklm': { name: 'NotebookLM', url: 'https:\/\/notebooklm.google.com\/', category: ['investigacion'], purpose: [\"Estudio documentos.\", \"Podcasts.\"], technical: [\"Gemini Pro.\", \"Grounded.\"], creator: \"Google\" },\n 'perplexity': { name: 'Perplexity', url: 'https:\/\/www.perplexity.ai\/', category: ['investigacion'], purpose: [\"Buscador citas.\", \"Res\u00famenes.\"], technical: [\"Multi-modelo.\", \"Tiempo real.\"], creator: \"Perplexity\" },\n 'qwen': { name: 'Qwen', url: 'https:\/\/qwen.aliyun.com\/', category: ['texto'], purpose: [\"LLM potente.\", \"Chino\/Ingl\u00e9s.\"], technical: [\"Transformer.\", \"Open Source.\"], creator: \"Alibaba Cloud\" },\n 'reve': { name: 'Reve', url: 'https:\/\/app.reve.com\/', category: ['imagen'], purpose: [\"Edici\u00f3n creativa.\", \"Personajes.\"], technical: [\"Magic Edit.\", \"Face Lock.\"], creator: \"Reve\" },\n 'skywork': { name: 'Skywork', url: 'https:\/\/skywork.ai\/', category: ['texto'], purpose: [\"LLM Chino\/Ingles.\", \"Rendimiento.\"], technical: [\"Entrenamiento.\", \"Eficiente.\"], creator: \"Skywork AI\" },\n 'sora': { name: 'Sora', url: 'https:\/\/openai.com\/sora', category: ['video'], purpose: [\"Simulaci\u00f3n f\u00edsica.\", \"Realismo.\"], technical: [\"Diffusion Trans.\", \"Coherencia.\"], creator: \"OpenAI\" },\n 'surfer-ai': { name: 'Surfer AI', url: 'https:\/\/surferseo.com\/ai\/', category: ['texto'], purpose: [\"Redacci\u00f3n SEO.\", \"Rankear.\"], technical: [\"An\u00e1lisis SERPs.\", \"NLP.\"], creator: \"SurferSEO\" },\n 'veo-3': { name: 'Veo', url: 'https:\/\/deepmind.google\/technologies\/veo\/', category: ['video'], purpose: [\"Video cine 1080p.\", \"Documental.\"], technical: [\"Trans. latente.\", \"Sem\u00e1ntica.\"], creator: \"Google DeepMind\" },\n 'wan': { name: 'Wan', url: 'https:\/\/wan.video\/', category: ['video'], purpose: [\"Cineastas.\", \"Realismo.\"], technical: [\"Difusi\u00f3n.\", \"Coherencia.\"], creator: \"Wan AI\" }\n };\n\n document.addEventListener('DOMContentLoaded', () => {\n \/\/ TABS\n const tabExplorer = document.getElementById('tab-explorer');\n const tabPeriodic = document.getElementById('tab-periodic');\n const viewExplorer = document.getElementById('view-explorer');\n const viewPeriodic = document.getElementById('view-periodic');\n const body = document.body;\n const mainNav = document.getElementById('main-nav');\n\n tabExplorer.addEventListener('click', () => {\n viewExplorer.style.display = 'block'; viewPeriodic.style.display = 'none';\n tabExplorer.classList.add('active'); tabPeriodic.classList.remove('active');\n \/\/ Quitar clases oscuras de body\/nav\n mainNav.classList.remove('dark-mode-nav');\n });\n\n tabPeriodic.addEventListener('click', () => {\n viewExplorer.style.display = 'none'; viewPeriodic.style.display = 'block';\n tabExplorer.classList.remove('active'); tabPeriodic.classList.add('active');\n \/\/ A\u00f1adir clases oscuras a nav (body ya no hace falta, el contenedor view-periodic es oscuro)\n mainNav.classList.add('dark-mode-nav');\n renderPeriodicTable();\n });\n\n \/\/ --- L\u00d3GICA EXPLORADOR ---\n const aiSelector = document.getElementById('ai-selector');\n const purposeSelector = document.getElementById('purpose-selector');\n const modeRadios = document.querySelectorAll('input[name=\"selection-mode\"]');\n const aiSelectorContainer = document.getElementById('ai-selector-container');\n const purposeSelectorContainer = document.getElementById('purpose-selector-container');\n const infoContainer = document.getElementById('ai-info-container');\n const hyperparametersContainer = document.getElementById('hyperparameters-container');\n const hyperparametersContent = document.getElementById('hyperparameters-content');\n const initialMessage = document.getElementById('initial-message');\n const purposeContent = document.getElementById('purpose-content');\n const techContent = document.getElementById('tech-content');\n const purposeLinkContainer = document.getElementById('purpose-link-container');\n const downloadSection = document.getElementById('download-section');\n \n const categoriesMap = { \n 'video': 'Creaci\u00f3n de Videos', 'imagen': 'Creaci\u00f3n de Im\u00e1genes', 'texto': 'Creaci\u00f3n de Textos', 'audio': 'Creaci\u00f3n de Audio y Voz', \n 'investigacion': 'Investigaci\u00f3n y An\u00e1lisis', 'codigo': 'Programaci\u00f3n y C\u00f3digo', 'presentacion': 'Creaci\u00f3n de Presentaciones', \n 'datos': 'Anotaci\u00f3n de Datos', 'desarrollo': 'Herramientas de Desarrollo', 'productividad': 'Productividad y Notas' \n };\n\n function populateSelectors() {\n aiSelector.innerHTML = '<option value=\"\">-- Selecciona una IA --<\/option>';\n const entries = Object.entries(aiData).map(([key, val]) => ({key, ...val}));\n entries.sort((a, b) => a.name.localeCompare(b.name));\n entries.forEach(ai => {\n const opt = document.createElement('option'); \n opt.value = ai.key; opt.textContent = ai.name; \n aiSelector.appendChild(opt);\n });\n }\n\n function populatePurposeSelector() {\n const sortedCats = Object.entries(categoriesMap).sort(([,a], [,b]) => a.localeCompare(b));\n sortedCats.forEach(([key, val]) => {\n const opt = document.createElement('option'); opt.value = key; opt.textContent = val;\n purposeSelector.appendChild(opt);\n });\n }\n \n function resetInfo() {\n infoContainer.classList.add('hidden');\n hyperparametersContainer.classList.add('hidden');\n downloadSection.classList.add('hidden');\n initialMessage.classList.remove('hidden');\n }\n\n function displayAiInfo(key) {\n if(key && aiData[key]) {\n const data = aiData[key];\n purposeContent.innerHTML = `<ul class=\"list-disc list-inside space-y-2\">${data.purpose.map(item => `<li>${item}<\/li>`).join('')}<\/ul>`;\n techContent.innerHTML = `<ul class=\"list-disc list-inside space-y-2\">${data.technical.map(item => `<li>${item}<\/li>`).join('')}<\/ul>`;\n if (data.url) {\n purposeLinkContainer.innerHTML = `<a href=\"${data.url}\" target=\"_blank\" class=\"inline-block bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded-full hover:bg-blue-200 transition\">Visitar Web \u2192<\/a>`;\n } else { purposeLinkContainer.innerHTML = ''; }\n hyperparametersContent.innerHTML = data.hyperparameters ? `<p>${data.hyperparameters}<\/p>` : `<p class=\"text-gray-500 italic\">Informaci\u00f3n no disponible.<\/p>`;\n \n updateHiddenInfographic(data); \n infoContainer.classList.remove('hidden');\n hyperparametersContainer.classList.remove('hidden');\n downloadSection.classList.remove('hidden');\n initialMessage.classList.add('hidden');\n } else { resetInfo(); }\n }\n\n modeRadios.forEach(radio => {\n radio.addEventListener('change', (e) => {\n if(e.target.value === 'ai') {\n purposeSelectorContainer.classList.add('hidden');\n aiSelectorContainer.classList.remove('hidden');\n populateSelectors();\n } else {\n purposeSelectorContainer.classList.remove('hidden');\n aiSelectorContainer.classList.add('hidden');\n }\n aiSelector.value = \"\"; purposeSelector.value = \"\";\n resetInfo();\n });\n });\n\n purposeSelector.addEventListener('change', (e) => {\n const selectedCat = e.target.value;\n aiSelector.innerHTML = '<option value=\"\">-- Selecciona una IA --<\/option>';\n const entries = Object.entries(aiData).map(([key, val]) => ({key, ...val}));\n if (selectedCat) {\n const filtered = entries.filter(ai => ai.category.includes(selectedCat));\n filtered.sort((a,b) => a.name.localeCompare(b.name));\n filtered.forEach(ai => {\n const opt = document.createElement('option'); opt.value = ai.key; opt.textContent = ai.name; aiSelector.appendChild(opt);\n });\n aiSelectorContainer.classList.remove('hidden');\n } else { aiSelectorContainer.classList.add('hidden'); }\n resetInfo();\n });\n\n aiSelector.addEventListener('change', (e) => displayAiInfo(e.target.value));\n\n \/\/ --- L\u00d3GICA PDF ---\n const downloadBtn = document.getElementById('download-btn');\n const downloadTableBtn = document.getElementById('download-table-btn');\n const infographicGenerator = document.getElementById('infographic-generator');\n\n function updateHiddenInfographic(data) {\n const infoHeader = document.getElementById('info-header');\n const infoCategoryPill = document.getElementById('info-category-pill');\n const infoCategoryIcon = document.getElementById('info-category-icon');\n const infographicTitle = document.getElementById('infographic-title');\n const infographicPurpose = document.getElementById('infographic-purpose');\n const infographicTech = document.getElementById('infographic-tech');\n const infographicHyperparameters = document.getElementById('infographic-hyperparameters');\n const infographicLink = document.getElementById('infographic-link');\n\n const style = getCategoryStyle(data.category[0]);\n infoHeader.style.background = style.bg;\n infoCategoryPill.textContent = categoriesMap[data.category[0]] || 'IA';\n infoCategoryIcon.innerHTML = style.icon;\n infographicTitle.textContent = data.name;\n infographicPurpose.innerHTML = `<ul style=\"list-style-position: inside; padding-left: 0.5rem; display: flex; flex-direction: column; gap: 0.75rem;\">${data.purpose.map(item => `<li>${item}<\/li>`).join('')}<\/ul>`;\n infographicTech.innerHTML = `<ul style=\"list-style-position: inside; padding-left: 0.5rem; display: flex; flex-direction: column; gap: 0.75rem;\">${data.technical.map(item => `<li>${item}<\/li>`).join('')}<\/ul>`;\n infographicHyperparameters.innerHTML = data.hyperparameters ? `<p>${data.hyperparameters}<\/p>` : '';\n infographicLink.innerHTML = data.url ? `<p>Web: ${data.url}<\/p>` : '';\n }\n\n downloadBtn.addEventListener('click', () => {\n const { jsPDF } = window.jspdf;\n const selectedKey = aiSelector.value;\n if (!selectedKey) return;\n downloadBtn.textContent = 'Generando...';\n html2canvas(infographicGenerator, { scale: 2 }).then(canvas => {\n const imgData = canvas.toDataURL('image\/png');\n const pdf = new jsPDF({ orientation: 'portrait', unit: 'px', format: [canvas.width, canvas.height] });\n pdf.addImage(imgData, 'PNG', 0, 0, pdf.internal.pageSize.getWidth(), pdf.internal.pageSize.getHeight());\n pdf.save(`${aiData[selectedKey].name}-infografia.pdf`);\n downloadBtn.textContent = 'Descargar Infograf\u00eda en PDF';\n });\n });\n\n downloadTableBtn.addEventListener('click', () => {\n const sorted = Object.values(aiData).sort((a,b) => a.name.localeCompare(b.name));\n const body = [[{text: 'Nombre', style: 'tableHeader'}, {text: 'Prop\u00f3sito', style: 'tableHeader'}]];\n sorted.forEach(ai => {\n const cleanPurpose = ai.purpose.join(' ').replace(\/<[^>]*>\/g, '');\n const nameCell = { stack: [{text: ai.name, bold: true}], margin: [0,2,0,2] };\n if(ai.url) nameCell.stack.push({text: ai.url, color:'blue', decoration:'underline', fontSize:9});\n body.push([nameCell, cleanPurpose]);\n });\n const dd = {\n content: [ { text: `Lista de IAs (${sorted.length})`, style: 'header' }, { style: 'tableExample', table: { widths: [150, '*'], body: body } } ],\n styles: { header: { fontSize: 18, bold: true, margin: [0, 0, 0, 10] }, tableHeader: { bold: true, fontSize: 13, color: 'black' }, tableExample: { margin: [0, 5, 0, 15] } }\n };\n pdfMake.createPdf(dd).download('lista_completa_ias.pdf');\n });\n\n populatePurposeSelector(); populateSelectors();\n\n \/\/ --- L\u00d3GICA TABLA PERI\u00d3DICA ---\n const tableContainer = document.getElementById('periodic-table');\n const legendContainer = document.getElementById('table-legend');\n const centralPanel = document.getElementById('central-panel');\n const bigSymbol = document.getElementById('big-symbol');\n const bigNumber = document.getElementById('big-number');\n const bigName = document.getElementById('big-name');\n const bigCard = document.getElementById('big-symbol-card');\n const panelTitle = document.getElementById('panel-title');\n const panelCat = document.getElementById('panel-category');\n const panelDesc = document.getElementById('panel-desc');\n const panelTech = document.getElementById('panel-tech');\n \n const catColors = { 'texto': {c:'#3b82f6', l:'bg-texto'}, 'imagen': {c:'#ec4899', l:'bg-imagen'}, 'video': {c:'#8b5cf6', l:'bg-video'}, 'audio': {c:'#f59e0b', l:'bg-audio'}, 'codigo': {c:'#10b981', l:'bg-codigo'}, 'investigacion': {c:'#0ea5e9', l:'bg-investigacion'}, 'productividad': {c:'#eab308', l:'bg-productividad'}, 'presentacion': {c:'#ef4444', l:'bg-presentacion'}, 'desarrollo': {c:'#6366f1', l:'bg-desarrollo'}, 'datos': {c:'#6b7280', l:'bg-datos'} };\n\n function getCategoryStyle(cat) {\n const styles = {\n 'video': { bg: 'linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%)', icon: '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"white\" stroke-width=\"1.5\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 10.5l4.72-4.72a.75.75 0 011.28.53v11.38a.75.75 0 01-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25h-9A2.25 2.25 0 002.25 7.5v9a2.25 2.25 0 002.25 2.25z\" \/><\/svg>' },\n 'imagen': { bg: 'linear-gradient(135deg, #db2777 0%, #f43f5e 100%)', icon: '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"white\" stroke-width=\"1.5\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z\" \/><\/svg>' },\n 'texto': { bg: 'linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%)', icon: '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"white\" stroke-width=\"1.5\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M7.5 8.25h9m-9 3.75h9m-9 3.75h9m-9 3.75h9m1.5-15H5.25a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 005.25 22.5h13.5A2.25 2.25 0 0021 20.25V7.5m-3-3.75l3 3.75\" \/><\/svg>' },\n 'codigo': { bg: 'linear-gradient(135deg, #059669 0%, #10b981 100%)', icon: '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"white\" stroke-width=\"1.5\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5\" \/><\/svg>' },\n 'audio': { bg: 'linear-gradient(135deg, #d97706 0%, #f59e0b 100%)', icon: '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"white\" stroke-width=\"1.5\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M19.114 5.636a9 9 0 010 12.728M16.463 8.288a5.25 5.25 0 010 7.424M6.75 8.25l4.72-4.72a.75.75 0 011.28.53v15.88a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75z\" \/><\/svg>' },\n 'default': { bg: 'linear-gradient(135deg, #4b5563 0%, #6b7280 100%)', icon: '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"white\" stroke-width=\"1.5\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z\" \/><\/svg>' }\n };\n return styles[cat] || styles['default'];\n }\n\n function getSymbol(name) {\n if (name.includes('Chat.Z')) return 'Cz'; if (name.includes('ChatGPT')) return 'Gpt';\n const c = name.replace(\/[^a-zA-Z]\/g, ''); return c.substring(0,1).toUpperCase() + (c.length>1?c.substring(1,2).toLowerCase():'');\n }\n\n function renderPeriodicTable() {\n tableContainer.innerHTML = ''; \n tableContainer.appendChild(legendContainer); \n tableContainer.appendChild(centralPanel); \n\n legendContainer.innerHTML = '';\n Object.entries(catColors).forEach(([key, val]) => {\n const item = document.createElement('div'); item.className = 'legend-pill';\n item.innerHTML = `<div class=\"legend-dot\" style=\"background-color: ${val.c}\"><\/div>${key}`;\n legendContainer.appendChild(item);\n });\n\n const positions = [\n [1,1],[1,18],\n [2,1],[2,2],[2,13],[2,14],[2,15],[2,16],[2,17],[2,18],\n [3,1],[3,2],[3,13],[3,14],[3,15],[3,16],[3,17],[3,18],\n [4,1],[4,2],[4,3],[4,4],[4,5],[4,6],[4,7],[4,8],[4,9],[4,10],[4,11],[4,12],[4,13],[4,14],[4,15],[4,16],[4,17],[4,18],\n [5,1],[5,2],[5,3],[5,4],[5,5],[5,6],[5,7],[5,8],[5,9]\n ];\n\n const sorted = Object.values(aiData).sort((a,b) => {\n if(a.category[0] < b.category[0]) return -1; if(a.category[0] > b.category[0]) return 1;\n return a.name.localeCompare(b.name);\n });\n\n sorted.forEach((ai, idx) => {\n let r, c;\n if (idx < positions.length) { [r,c] = positions[idx]; }\n else {\n const extra = idx - positions.length; const startR = 5; const inRow = 9;\n const total = inRow + extra;\n r = startR + Math.floor(total\/18); c = 1 + (total%18);\n }\n\n const cat = ai.category[0];\n const styleClass = catColors[cat]?.l || 'bg-datos';\n const symbol = getSymbol(ai.name);\n \n const el = document.createElement('div');\n el.className = `element ${styleClass}`;\n el.style.gridRowStart = r; el.style.gridColumnStart = c;\n el.innerHTML = `<div class=\"element-number\">${idx+1}<\/div><div class=\"element-symbol\">${symbol}<\/div><div class=\"element-name\">${ai.name}<\/div>`;\n \n \/\/ EVENTOS T\u00c1CTILES Y DE RAT\u00d3N\n const activate = () => {\n document.querySelectorAll('.element.active-mobile').forEach(e => e.classList.remove('active-mobile'));\n el.classList.add('active-mobile');\n showInPanel(ai, symbol, idx+1, catColors[cat].c);\n };\n\n el.addEventListener('mouseenter', activate);\n el.addEventListener('click', (e) => {\n if (window.innerWidth < 1024) { \/\/ Comportamiento m\u00f3vil\n if (el.classList.contains('active-mobile')) {\n window.open(ai.url, '_blank');\n } else {\n activate();\n }\n } else {\n window.open(ai.url, '_blank');\n }\n });\n \n tableContainer.appendChild(el);\n });\n }\n\n function showInPanel(ai, symbol, num, color) {\n centralPanel.classList.add('active');\n bigSymbol.textContent = symbol; bigSymbol.style.color = color;\n bigNumber.textContent = num; bigName.textContent = ai.name;\n bigCard.style.borderColor = color;\n \n panelTitle.textContent = ai.name;\n panelCat.textContent = categoriesMap[ai.category[0]] || ai.category[0]; panelCat.style.color = color;\n \n const purpose = Array.isArray(ai.purpose) ? ai.purpose.join(' ') : ai.purpose;\n panelDesc.textContent = purpose.replace(\/<[^>]*>\/g, '');\n panelTech.textContent = `Creador: ${ai.creator} | Tech: ${ai.technical[0].replace(\/<[^>]*>\/g, '')}`;\n }\n });\n <\/script>\n<\/body>\n<\/html><\/div><\/div><\/div><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Utiliza nuestro explorador de inteligencias artificiales para mantenerte al d\u00eda. \u00a1Actualizamos constantemente esta fant\u00e1stica lista!<\/p>","protected":false},"author":1,"featured_media":2378,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"portfolio_category":[52],"portfolio_skills":[],"portfolio_tags":[],"class_list":["post-2267","avada_portfolio","type-avada_portfolio","status-publish","format-standard","has-post-thumbnail","hentry","portfolio_category-ia"],"acf":[],"_links":{"self":[{"href":"https:\/\/edukia.org\/en\/wp-json\/wp\/v2\/avada_portfolio\/2267","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/edukia.org\/en\/wp-json\/wp\/v2\/avada_portfolio"}],"about":[{"href":"https:\/\/edukia.org\/en\/wp-json\/wp\/v2\/types\/avada_portfolio"}],"author":[{"embeddable":true,"href":"https:\/\/edukia.org\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/edukia.org\/en\/wp-json\/wp\/v2\/comments?post=2267"}],"version-history":[{"count":29,"href":"https:\/\/edukia.org\/en\/wp-json\/wp\/v2\/avada_portfolio\/2267\/revisions"}],"predecessor-version":[{"id":2865,"href":"https:\/\/edukia.org\/en\/wp-json\/wp\/v2\/avada_portfolio\/2267\/revisions\/2865"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/edukia.org\/en\/wp-json\/wp\/v2\/media\/2378"}],"wp:attachment":[{"href":"https:\/\/edukia.org\/en\/wp-json\/wp\/v2\/media?parent=2267"}],"wp:term":[{"taxonomy":"portfolio_category","embeddable":true,"href":"https:\/\/edukia.org\/en\/wp-json\/wp\/v2\/portfolio_category?post=2267"},{"taxonomy":"portfolio_skills","embeddable":true,"href":"https:\/\/edukia.org\/en\/wp-json\/wp\/v2\/portfolio_skills?post=2267"},{"taxonomy":"portfolio_tags","embeddable":true,"href":"https:\/\/edukia.org\/en\/wp-json\/wp\/v2\/portfolio_tags?post=2267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}