Mapa y Calculadora de Correlatividades<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \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=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n \n <style>\n @keyframes bounce-in-y {\n 0% { transform: translateY(-50px); opacity: 0; }\n 60% { transform: translateY(10px); opacity: 1; }\n 80% { transform: translateY(-5px); }\n 100% { transform: translateY(0); }\n }\n @keyframes bounce-out-y {\n 0% { transform: translateY(0); opacity: 1; }\n 20% { transform: translateY(10px); }\n 100% { transform: translateY(-50px); opacity: 0; }\n }\n .animate-bounce-in-y {\n animation: bounce-in-y 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;\n }\n .animate-bounce-out-y {\n animation: bounce-out-y 0.3s ease-in both;\n }\n .transition-transform-layout {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 0.3s;\n }\n body {\n font-family: 'Inter', sans-serif;\n background-color: #f3f4f6;\n }\n .badge {\n display: inline-flex;\n align-items: center;\n padding: 0.25rem 0.5rem;\n border-radius: 9999px;\n font-size: 0.75rem;\n line-height: 1rem;\n font-weight: 500;\n border: 1px solid transparent;\n }\n .badge-outline {\n background-color: #f9fafb;\n border-color: #e5e7eb;\n color: #6b7280;\n }\n .lucide {\n display: inline-block;\n }\n .radio-group-item {\n display: none;\n }\n .radio-group-label {\n cursor: pointer;\n }\n input[type=\"radio\"]:checked + .radio-group-label {\n background-color: #dbeafe; \/* bg-blue-50 *\/\n border-color: #3b82f6; \/* border-blue-500 *\/\n color: #1e40af; \/* text-blue-700 *\/\n }\n .radio-group-label:hover {\n background-color: #f3f4f6; \/* bg-gray-100 *\/\n }\n <\/style>\n<\/head>\n<body class=\"p-6 lg:p-10\">\n\n \n <div id=\"cascadaApp\" class=\"w-full space-y-6\">\n\n <div class=\"bg-white p-6 rounded-xl border border-gray-200 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800\">Mapa de Correlatividades: \u00bfQu\u00e9 Me Falta?<\/h2>\n <p class=\"mt-2 text-sm text-gray-600 max-w-3xl\">\n Con \u00bfQu\u00e9 Me Falta? pod\u00e9s ver al instante qu\u00e9 materias te faltan para cursar o rendir. Seleccion\u00e1s la materia en un mapa interactivo y el sistema te muestra sus correlativas previas y posteriores. As\u00ed sab\u00e9s exactamente qu\u00e9 te habilita a seguir avanzando.\n <\/p>\n <\/div>\n\n <div class=\"bg-white p-4 rounded-xl border-2 border-blue-500 shadow-lg\">\n <div class=\"flex flex-col sm:flex-row items-center justify-between gap-4\">\n <p class=\"text-sm text-gray-800 font-medium max-w-2xl text-center sm:text-left\">\n Ya sab\u00e9s qu\u00e9 te falta, \u00bfquer\u00e9s saber si pod\u00e9s cursar en tu estado actual? Usa el sistema contextual de \u00bfPuedo Cursar? para saber si pod\u00e9s cursar o no.\n <\/p>\n <button id=\"calculatorBtn\" class=\"flex-shrink-0 w-full sm:w-auto px-5 py-2.5 rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition-colors duration-200 text-sm font-semibold flex items-center justify-center gap-2 shadow-md hover:shadow-lg focus:ring-4 focus:ring-blue-300\">\n <span>Ir a \u00bfPuedo Cursar?<\/span>\n <svg class=\"h-4 w-4\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"16\" height=\"20\" x=\"4\" y=\"2\" rx=\"2\"\/><path d=\"M8 6h8\"\/><path d=\"M8 10h8\"\/><path d=\"M8 14h.01\"\/><path d=\"M8 18h.01\"\/><path d=\"M12 14h.01\"\/><path d=\"M12 18h.01\"\/><path d=\"M16 14h.01\"\/><path d=\"M16 18h.01\"\/><\/svg>\n <\/button>\n <\/div>\n <\/div>\n\n <div class=\"bg-white p-6 rounded-xl border border-gray-200 shadow-sm\">\n <div class=\"flex items-start gap-4\">\n <svg class=\"h-6 w-6 flex-shrink-0 text-gray-400\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"><\/path><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"><\/path><\/svg>\n <div>\n <h3 class=\"text-lg font-semibold text-gray-800\">R\u00e9gimen de Correlatividades Vigente<\/h3>\n <p class=\"mt-2 text-sm text-gray-600\">\n Este sistema est\u00e1 basado en el r\u00e9gimen de correlatividades actual para la carrera de <strong>Profesorado de Educaci\u00f3n Secundaria en Ciencia Pol\u00edtica<\/strong> que se cursa en el <strong>Profesorado Superior de Ciencias Sociales<\/strong>.\n <\/p>\n <p class=\"mt-2 text-xs text-gray-500\">\n RESOLUCI\u00d3N N\u00b0 4800 C.G.E | Expte. Grabado N\u00b0 (1787562).- | Provincia de Entre R\u00edos – CONSEJO GENERAL DE EDUCACI\u00d3N.\n <\/p>\n <p class=\"mt-3 text-sm text-gray-600\">\n Si quer\u00e9s acceder directamente al documento oficial, pod\u00e9s hacerlo con el bot\u00f3n de descarga que encontrar\u00e1s justo al final del men\u00fa de opciones.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"bg-white p-4 rounded-xl border border-gray-200 shadow-sm\">\n <div class=\"flex flex-col lg:flex-row gap-4 items-start lg:items-center justify-between\">\n \n <div class=\"flex-1 flex items-center gap-4\">\n <div class=\"relative flex-1 max-w-md\">\n <svg class=\"absolute left-3 top-1\/2 transform -translate-y-1\/2 text-gray-400 h-4 w-4\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"><\/circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"><\/line><\/svg>\n <input type=\"text\" id=\"searchInput\" placeholder=\"Buscar materia...\" class=\"pl-10 w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 transition-colors duration-200 p-2 text-sm\">\n <\/div>\n <\/div>\n\n \n <div class=\"flex flex-wrap gap-4 items-center\">\n <div class=\"flex items-center space-x-2\">\n <svg class=\"h-4 w-4 text-gray-500\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3\"><\/polygon><\/svg>\n <select id=\"filterTipo\" class=\"rounded-md border border-gray-300 px-3 py-1 text-sm\">\n <option value=\"todos\">Todos los tipos<\/option>\n <option value=\"Formaci\u00f3n General\">Formaci\u00f3n General<\/option>\n <option value=\"Formaci\u00f3n Espec\u00edfica\">Formaci\u00f3n Espec\u00edfica<\/option>\n <option value=\"Pr\u00e1ctica Profesional\">Pr\u00e1ctica Profesional<\/option>\n <\/select>\n <\/div>\n\n <div class=\"flex items-center space-x-2\">\n <select id=\"filterYear\" class=\"rounded-md border border-gray-300 px-3 py-1 text-sm\">\n <option value=\"\">Todos los a\u00f1os<\/option>\n <option value=\"1\">1\u00b0 A\u00f1o<\/option>\n <option value=\"2\">2\u00b0 A\u00f1o<\/option>\n <option value=\"3\">3\u00b0 A\u00f1o<\/option>\n <option value=\"4\">4\u00b0 A\u00f1o<\/option>\n <\/select>\n <\/div>\n\n <div class=\"flex items-center space-x-2\">\n <input type=\"checkbox\" id=\"compactModeSwitch\" class=\"h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500\">\n <label for=\"compactModeSwitch\" class=\"text-sm text-gray-700\">Compacto<\/label>\n <\/div>\n <\/div>\n\n \n <div class=\"flex items-center space-x-2\">\n <button id=\"zoomOutBtn\" class=\"p-2 rounded-md border border-gray-300 bg-gray-50 hover:bg-gray-100 transition-colors duration-200\">\n <svg class=\"h-4 w-4\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"><\/circle><line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\"><\/line><\/svg>\n <\/button>\n <span id=\"zoomLevel\" class=\"text-sm text-gray-600 min-w-[60px] text-center\">100%<\/span>\n <button id=\"zoomInBtn\" class=\"p-2 rounded-md border border-gray-300 bg-gray-50 hover:bg-gray-100 transition-colors duration-200\">\n <svg class=\"h-4 w-4\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"><\/circle><line x1=\"11\" y1=\"8\" x2=\"11\" y2=\"14\"><\/line><line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\"><\/line><\/svg>\n <\/button>\n <button id=\"resetBtn\" class=\"p-2 rounded-md border border-gray-300 bg-gray-50 hover:bg-gray-100 transition-colors duration-200\">\n <svg class=\"h-4 w-4\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8\"><\/path><path d=\"M3 3v5h5\"><\/path><path d=\"M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16\"><\/path><path d=\"M21 21v-5h-5\"><\/path><\/svg>\n <\/button>\n <button id=\"downloadBtn\" class=\"p-2 rounded-md border border-gray-300 bg-gray-50 hover:bg-gray-100 transition-colors duration-200\">\n <svg class=\"h-4 w-4\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"><\/path><polyline points=\"7 10 12 15 17 10\"><\/polyline><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"><\/line><\/svg>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden\">\n <div id=\"visualizationContainer\" class=\"overflow-auto\" style=\"height: 70vh;\">\n <div id=\"visualizationContent\" class=\"p-6 transition-transform duration-200\" style=\"transform-origin: top left;\">\n <div id=\"mainGrid\" class=\"grid grid-cols-1 lg:grid-cols-4 gap-8\">\n \n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"detailPanel\" class=\"bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden hidden\">\n <div class=\"p-6\">\n <div class=\"flex items-start justify-between mb-4\">\n <div>\n <h3 id=\"detailPanelTitle\" class=\"text-xl font-bold text-gray-800\"><\/h3>\n <div id=\"detailPanelBadges\" class=\"flex items-center space-x-2 mt-2\"><\/div>\n <\/div>\n <button id=\"closeDetailPanelBtn\" class=\"p-2 rounded-md hover:bg-gray-100 transition-colors duration-200\">\n <svg class=\"h-4 w-4 text-gray-600\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"><\/line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"><\/line><\/svg>\n <\/button>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n <div>\n <h4 class=\"font-semibold text-gray-800 mb-3\">Correlativas Requeridas<\/h4>\n <div id=\"correlativesList\" class=\"space-y-2\"><\/div>\n <\/div>\n <div>\n <h4 class=\"font-semibold text-gray-800 mb-3\">Materias que Habilita<\/h4>\n <div id=\"dependentsList\" class=\"space-y-2\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white p-4 rounded-xl border border-gray-200 shadow-sm\">\n <h4 class=\"font-semibold text-gray-800 mb-3\">Leyenda<\/h4>\n <div class=\"grid gap-8 md:grid-cols-3\">\n \n <div class=\"space-y-3\">\n <div>\n <div class=\"text-sm font-semibold text-black\">Tipos de Formaci\u00f3n<\/div>\n <p class=\"text-sm text-gray-600\">\n Agrupan las materias seg\u00fan su orientaci\u00f3n dentro del plan de estudios.\n <\/p>\n <\/div>\n <ul class=\"grid gap-3\">\n <li class=\"flex items-center gap-3\">\n <span class=\"inline-flex items-center rounded-full border bg-blue-50 border-blue-200 text-blue-700 text-xs font-medium px-2.5 py-1\">\n Formaci\u00f3n General\n <\/span>\n <span class=\"text-sm text-gray-600\">\n Contenidos transversales y comunes.\n <\/span>\n <\/li>\n <li class=\"flex items-center gap-3\">\n <span class=\"inline-flex items-center rounded-full border bg-emerald-50 border-emerald-200 text-emerald-700 text-xs font-medium px-2.5 py-1\">\n Formaci\u00f3n Espec\u00edfica\n <\/span>\n <span class=\"text-sm text-gray-600\">\n Contenidos propios de la especialidad.\n <\/span>\n <\/li>\n <li class=\"flex items-center gap-3\">\n <span class=\"inline-flex items-center rounded-full border bg-violet-50 border-violet-200 text-violet-700 text-xs font-medium px-2.5 py-1\">\n Pr\u00e1ctica Profesional\n <\/span>\n <span class=\"text-sm text-gray-600\">\n Pr\u00e1ctica y vinculaci\u00f3n profesional.\n <\/span>\n <\/li>\n <\/ul>\n <\/div>\n\n \n <div class=\"space-y-3\">\n <div>\n <div class=\"text-sm font-semibold text-black\">Formatos Curriculares<\/div>\n <p class=\"text-sm text-gray-600\">Indican el tipo de espacio y modalidad de cursada.<\/p>\n <\/div>\n <ul class=\"grid gap-3\">\n <li class=\"flex items-center gap-3\">\n <span class=\"inline-flex w-fit items-center rounded-full border bg-blue-50 border-blue-200 text-blue-700 text-xs font-medium px-2.5 py-1\">\n Asignatura\n <\/span>\n <span class=\"text-sm text-gray-600\">Materia regular con contenidos te\u00f3rico\u2011pr\u00e1cticos.<\/span>\n <\/li>\n <li class=\"flex items-center gap-3\">\n <span class=\"inline-flex w-fit items-center rounded-full border bg-emerald-50 border-emerald-200 text-emerald-700 text-xs font-medium px-2.5 py-1\">\n Seminario\n <\/span>\n <span class=\"text-sm text-gray-600\">Espacio breve y focalizado en un tema espec\u00edfico.<\/span>\n <\/li>\n <li class=\"flex items-center gap-3\">\n <span class=\"inline-flex w-fit items-center rounded-full border bg-violet-50 border-violet-200 text-violet-700 text-xs font-medium px-2.5 py-1\">\n Seminario\u2011Taller\n <\/span>\n <span class=\"text-sm text-gray-600\">Combina seminario y taller con \u00e9nfasis aplicado.<\/span>\n <\/li>\n <li class=\"flex items-center gap-3\">\n <span class=\"inline-flex w-fit items-center rounded-full border bg-orange-50 border-orange-200 text-orange-700 text-xs font-medium px-2.5 py-1\">\n Taller\n <\/span>\n <span class=\"text-sm text-gray-600\">Espacio pr\u00e1ctico orientado a producci\u00f3n y proyectos.<\/span>\n <\/li>\n <li class=\"flex items-center gap-3\">\n <span class=\"inline-flex w-fit items-center rounded-full border bg-gray-100 border-gray-300 text-gray-700 text-xs font-medium px-2.5 py-1\">\n Variable\n <\/span>\n <span class=\"text-sm text-gray-600\">Formato definido por la instituci\u00f3n (UDI).<\/span>\n <\/li>\n <\/ul>\n <\/div>\n\n \n <div class=\"space-y-3\">\n <div>\n <div class=\"text-sm font-semibold text-black\">Otros Elementos<\/div>\n <p class=\"text-sm text-gray-600\">\n Abreviaciones y clasificaciones especiales que aparecen en las materias.\n <\/p>\n <\/div>\n <ul class=\"grid gap-3\">\n <li class=\"flex items-center gap-3\">\n <span class=\"inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-amber-800 bg-amber-50 border-amber-300\">\n ABC\n <\/span>\n <span class=\"text-sm text-gray-600\">Ej.: abreviaci\u00f3n del nombre de la materia.<\/span>\n <\/li>\n <li class=\"flex items-center gap-3\">\n <span class=\"inline-flex w-fit items-center rounded-full border bg-blue-50 border-blue-200 text-blue-700 text-xs font-medium px-2.5 py-1\">\n Especial\n <\/span>\n <span class=\"text-sm text-gray-600\">Requisitos especiales como UC completas por a\u00f1o.<\/span>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"calculatorApp\" class=\"w-full space-y-6 hidden\">\n \n <div class=\"bg-white p-6 rounded-xl border border-gray-200 shadow-sm\">\n <div class=\"flex flex-col sm:flex-row items-start justify-between gap-4\">\n <div>\n <h2 class=\"text-2xl font-bold text-gray-800\">\u00bfPuedo Cursar?<\/h2>\n <p class=\"mt-2 text-sm text-gray-600 max-w-2xl\">\n Ya sab\u00e9s qu\u00e9 te falta\u2026 ahora, \u00bfPodes Cursar? \u00a1No m\u00e1s dudas sobre tu cursada! Con Puedo Cursar? descubr\u00eds en segundos si pod\u00e9s avanzar en tu carrera. Un par de clics y sabr\u00e1s exactamente qu\u00e9 camino seguir para llegar a tu meta acad\u00e9mica.\n <\/p>\n <\/div>\n <button id=\"backToCascadaBtn\" class=\"flex-shrink-0 ml-auto px-4 py-2 rounded-md border border-gray-300 bg-gray-50 hover:bg-gray-100 transition-colors duration-200 text-sm\">Volver al Mapa<\/button>\n <\/div>\n <\/div>\n \n <div class=\"bg-white p-6 rounded-xl border border-gray-200 shadow-sm\">\n <div class=\"grid gap-6\">\n \n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-6\">\n <div class=\"bg-gray-50 border border-gray-200 rounded-lg p-4 flex items-start gap-3\">\n <div class=\"bg-blue-100 text-blue-600 rounded-full h-8 w-8 flex-shrink-0 flex items-center justify-center font-bold text-lg\">1<\/div>\n <div>\n <h4 class=\"font-semibold text-gray-800\">Seleccion\u00e1 el A\u00f1o<\/h4>\n <p class=\"text-sm text-gray-600 mt-1\">Eleg\u00ed el a\u00f1o de la materia que quer\u00e9s saber si pod\u00e9s cursar.<\/p>\n <\/div>\n <\/div>\n <div class=\"bg-gray-50 border border-gray-200 rounded-lg p-4 flex items-start gap-3\">\n <div class=\"bg-blue-100 text-blue-600 rounded-full h-8 w-8 flex-shrink-0 flex items-center justify-center font-bold text-lg\">2<\/div>\n <div>\n <h4 class=\"font-semibold text-gray-800\">Seleccion\u00e1 la Materia<\/h4>\n <p class=\"text-sm text-gray-600 mt-1\">Ahora, eleg\u00ed la materia espec\u00edfica que te interesa.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"grid gap-4 sm:grid-cols-2\">\n <div class=\"grid gap-2\">\n <label for=\"evalYearSelector\" class=\"block text-sm font-semibold text-gray-700\">A\u00f1o:<\/label>\n <select id=\"evalYearSelector\" class=\"rounded-md border border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 p-2 text-sm\">\n <option value=\"2\" selected>2\u00b0 A\u00f1o<\/option>\n <option value=\"3\">3\u00b0 A\u00f1o<\/option>\n <option value=\"4\">4\u00b0 A\u00f1o<\/option>\n <\/select>\n <\/div>\n <div class=\"grid gap-2 min-w-0\">\n <label for=\"materiaSelector\" class=\"block text-sm font-semibold text-gray-700\">Materia:<\/label>\n <select id=\"materiaSelector\" class=\"w-full rounded-md border border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 p-2 text-sm\">\n <option value=\"\">— Elige una materia —<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n \n <div id=\"evaluationContainer\" class=\"hidden\">\n <hr class=\"border-t border-gray-200\">\n <div id=\"correlativesSection\" class=\"grid gap-4\">\n \n <\/div>\n <div id=\"evaluationPanel\" class=\"hidden mt-6\">\n \n <\/div>\n <\/div>\n\n <div id=\"initialMessage\" class=\"rounded-xl border border-gray-200 p-4 text-center text-gray-500\">\n Selecciona un a\u00f1o y una materia para ver tus opciones de cursada.\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n\n \/\/ --- Gesti\u00f3n de vistas ---\n const showCalculator = () => {\n document.getElementById('cascadaApp').classList.add('hidden');\n document.getElementById('calculatorApp').classList.remove('hidden');\n \n \/\/ Resetear y preparar la calculadora\n document.getElementById('evalYearSelector').value = \"2\"; \/\/ Se inicia en 2do a\u00f1o\n document.getElementById('materiaSelector').value = \"\";\n document.getElementById('evaluationContainer').classList.add('hidden');\n document.getElementById('initialMessage').classList.remove('hidden');\n \n populateMateriaSelector(2);\n };\n\n const showCascada = () => {\n document.getElementById('cascadaApp').classList.remove('hidden');\n document.getElementById('calculatorApp').classList.add('hidden');\n selectedMateriaId = null;\n render();\n };\n \n \/\/ --- Definici\u00f3n de datos del plan de estudios ---\n const materias = [\n \/\/ 1er A\u00f1o\n { id: \"pedagogia\", codigo: \"PED\", nombre: \"Pedagog\u00eda\", a\u00f1o: 1, tipo: \"Formaci\u00f3n General\", formato: \"Asignatura\", horas: \"3 hs\", correlativas: [], correlativasDetalladas: [] },\n { id: \"corporeidad_juegos_y_lenguajes_artisticos\", codigo: \"CJA\", nombre: \"Corporeidad, juegos y lenguajes art\u00edsticos\", a\u00f1o: 1, tipo: \"Formaci\u00f3n General\", formato: \"Taller\", horas: \"3 hs\", correlativas: [], correlativasDetalladas: [] },\n { id: \"didactica_general\", codigo: \"DG\", nombre: \"Did\u00e1ctica general\", a\u00f1o: 1, tipo: \"Formaci\u00f3n General\", formato: \"Asignatura\", horas: \"3 hs\", correlativas: [], correlativasDetalladas: [] },\n { id: \"oralidad_lectura_escritura_y_tic\", codigo: \"OLT\", nombre: \"Oralidad, lectura, escritura y TIC\", a\u00f1o: 1, tipo: \"Formaci\u00f3n General\", formato: \"Taller\", horas: \"3 hs\", correlativas: [], correlativasDetalladas: [] },\n { id: \"procesos_historicos_modernos\", codigo: \"PHM\", nombre: \"Procesos Hist\u00f3ricos Modernos\", a\u00f1o: 1, tipo: \"Formaci\u00f3n Espec\u00edfica\", formato: \"Asignatura\", horas: \"3 hs\", correlativas: [], correlativasDetalladas: [] },\n { id: \"problematica_de_la_ciencia_politica_i\", codigo: \"PCP1\", nombre: \"Problem\u00e1tica de la Ciencia Pol\u00edtica I\", a\u00f1o: 1, tipo: \"Formaci\u00f3n Espec\u00edfica\", formato: \"Asignatura\", horas: \"4 hs\", correlativas: [], correlativasDetalladas: [] },\n { id: \"economia\", codigo: \"ECO\", nombre: \"Econom\u00eda\", a\u00f1o: 1, tipo: \"Formaci\u00f3n Espec\u00edfica\", formato: \"Asignatura\", horas: \"3 hs\", correlativas: [], correlativasDetalladas: [] },\n { id: \"antropologia_social\", codigo: \"AS\", nombre: \"Antropolog\u00eda Social\", a\u00f1o: 1, tipo: \"Formaci\u00f3n Espec\u00edfica\", formato: \"Asignatura\", horas: \"3 hs\", correlativas: [], correlativasDetalladas: [] },\n { id: \"derecho_constitucional\", codigo: \"DC\", nombre: \"Derecho Constitucional\", a\u00f1o: 1, tipo: \"Formaci\u00f3n Espec\u00edfica\", formato: \"Asignatura\", horas: \"3 hs\", correlativas: [], correlativasDetalladas: [] },\n { id: \"practica_profesional_docente_i\", codigo: \"PD1\", nombre: \"Pr\u00e1ctica Profesional Docente I\", a\u00f1o: 1, tipo: \"Pr\u00e1ctica Profesional\", formato: \"Seminario-Taller\", horas: \"4 hs\", correlativas: [], correlativasDetalladas: [] },\n\n \/\/ 2do A\u00f1o\n { id: \"psicologia_de_la_educacion\", codigo: \"PE\", nombre: \"Psicolog\u00eda de la educaci\u00f3n\", a\u00f1o: 2, tipo: \"Formaci\u00f3n General\", formato: \"Asignatura\", horas: \"3 hs\", correlativas: [\"pedagogia\", \"didactica_general\"], correlativasDetalladas: [{id: \"pedagogia\", type: \"R\"}, {id: \"didactica_general\", type: \"R\"}] },\n { id: \"historia_social_politica_argentina_y_latinoamericana\", codigo: \"HSL\", nombre: \"Historia social, pol\u00edtica argentina y latinoamericana\", a\u00f1o: 2, tipo: \"Formaci\u00f3n General\", formato: \"Asignatura\", horas: \"3 hs\", correlativas: [\"procesos_historicos_modernos\"], correlativasDetalladas: [{id: \"procesos_historicos_modernos\", type: \"R\"}] },\n { id: \"filosofia\", codigo: \"FIL\", nombre: \"Filosof\u00eda\", a\u00f1o: 2, tipo: \"Formaci\u00f3n General\", formato: \"Asignatura\", horas: \"3 hs\", correlativas: [\"pedagogia\"], correlativasDetalladas: [{id: \"pedagogia\", type: \"R\"}] },\n { id: \"didactica_de_las_ciencias_sociales\", codigo: \"DCS\", nombre: \"Did\u00e1ctica de las Ciencias Sociales\", a\u00f1o: 2, tipo: \"Formaci\u00f3n Espec\u00edfica\", formato: \"Taller\", horas: \"3 hs\", correlativas: [\"didactica_general\"], correlativasDetalladas: [{id: \"didactica_general\", type: \"A\"}] },\n { id: \"economia_politica\", codigo: \"EP\", nombre: \"Econom\u00eda Pol\u00edtica\", a\u00f1o: 2, tipo: \"Formaci\u00f3n Espec\u00edfica\", formato: \"Asignatura\", horas: \"3 hs\", correlativas: [\"economia\"], correlativasDetalladas: [{id: \"economia\", type: \"R\"}] },\n { id: \"sujeto_de_la_educacion_secundaria\", codigo: \"SE\", nombre: \"Sujeto de la Educaci\u00f3n Secundaria\", a\u00f1o: 2, tipo: \"Formaci\u00f3n Espec\u00edfica\", formato: \"Taller\", horas: \"3 hs\", correlativas: [\"pedagogia\", \"didactica_general\"], correlativasDetalladas: [{id: \"pedagogia\", type: \"R\"}, {id: \"didactica_general\", type: \"R\"}] },\n { id: \"derecho_privado\", codigo: \"DP\", nombre: \"Derecho Privado\", a\u00f1o: 2, tipo: \"Formaci\u00f3n Espec\u00edfica\", formato: \"Asignatura\", horas: \"3 hs\", correlativas: [\"derecho_constitucional\"], correlativasDetalladas: [{id: \"derecho_constitucional\", type: \"R\"}] },\n { id: \"teoria_politica_i\", codigo: \"TP1\", nombre: \"Teor\u00eda Pol\u00edtica I\", a\u00f1o: 2, tipo: \"Formaci\u00f3n Espec\u00edfica\", formato: \"Asignatura\", horas: \"4 hs\", correlativas: [\"problematica_de_la_ciencia_politica_i\"], correlativasDetalladas: [{id: \"problematica_de_la_ciencia_politica_i\", type: \"R\"}] },\n { id: \"problematica_de_la_ciencia_politica_ii\", codigo: \"PCP2\", nombre: \"Problem\u00e1tica de la Ciencia Pol\u00edtica II\", a\u00f1o: 2, tipo: \"Formaci\u00f3n Espec\u00edfica\", formato: \"Asignatura\", horas: \"3 hs\", correlativas: [\"problematica_de_la_ciencia_politica_i\"], correlativasDetalladas: [{id: \"problematica_de_la_ciencia_politica_i\", type: \"A\"}] },\n { id: \"practica_profesional_docente_ii\", codigo: \"PD2\", nombre: \"Pr\u00e1ctica Profesional Docente II\", a\u00f1o: 2, tipo: \"Pr\u00e1ctica Profesional\", formato: \"Seminario-Taller\", horas: \"4 hs\", correlativas: [\"practica_profesional_docente_i\"], correlativasDetalladas: [{id: \"practica_profesional_docente_i\", type: \"A\"}] },\n\n \/\/ 3er A\u00f1o\n { id: \"derechos_humanos_etica_y_ciudadania\", codigo: \"DHU\", nombre: \"Derechos humanos: \u00e9tica y ciudadan\u00eda\", a\u00f1o: 3, tipo: \"Formaci\u00f3n General\", formato: \"Asignatura\", horas: \"4 hs\", correlativas: [\"derecho_constitucional\", \"historia_social_politica_argentina_y_latinoamericana\"], correlativasDetalladas: [{id: \"derecho_constitucional\", type: \"R\"}, {id: \"historia_social_politica_argentina_y_latinoamericana\", type: \"R\"}] },\n { id: \"sociologia_de_la_educacion\", codigo: \"SOE\", nombre: \"Sociolog\u00eda de la educaci\u00f3n\", a\u00f1o: 3, tipo: \"Formaci\u00f3n General\", formato: \"Asignatura\", horas: \"3 hs\", correlativas: [\"pedagogia\", \"filosofia\"], correlativasDetalladas: [{id: \"pedagogia\", type: \"R\"}, {id: \"filosofia\", type: \"R\"}] },\n { id: \"historia_de_la_educacion_argentina\", codigo: \"HEA\", nombre: \"Historia de la educaci\u00f3n argentina\", a\u00f1o: 3, tipo: \"Formaci\u00f3n General\", formato: \"Asignatura\", horas: \"3 hs\", correlativas: [\"historia_social_politica_argentina_y_latinoamericana\"], correlativasDetalladas: [{id: \"historia_social_politica_argentina_y_latinoamericana\", type: \"R\"}] },\n { id: \"procesos_historicos_contemporaneos\", codigo: \"PHC\", nombre: \"Procesos Hist\u00f3ricos Contempor\u00e1neos\", a\u00f1o: 3, tipo: \"Formaci\u00f3n Espec\u00edfica\", formato: \"Asignatura\", horas: \"3 hs\", correlativas: [\"procesos_historicos_modernos\"], correlativasDetalladas: [{id: \"procesos_historicos_modernos\", type: \"A\"}] },\n { id: \"derecho_administrativo\", codigo: \"DA\", nombre: \"Derecho Administrativo\", a\u00f1o: 3, tipo: \"Formaci\u00f3n Espec\u00edfica\", formato: \"Asignatura\", horas: \"3 hs\", correlativas: [\"derecho_privado\", \"derecho_constitucional\"], correlativasDetalladas: [{id: \"derecho_privado\", type: \"R\"}, {id: \"derecho_constitucional\", type: \"R\"}] },\n { id: \"teoria_politica_ii\", codigo: \"TP2\", nombre: \"Teor\u00eda Pol\u00edtica II\", a\u00f1o: 3, tipo: \"Formaci\u00f3n Espec\u00edfica\", formato: \"Asignatura\", horas: \"4 hs\", correlativas: [\"teoria_politica_i\", \"problematica_de_la_ciencia_politica_ii\", \"filosofia\"], correlativasDetalladas: [{id: \"teoria_politica_i\", type: \"A\"}, {id: \"problematica_de_la_ciencia_politica_ii\", type: \"R\"}, {id: \"filosofia\", type: \"R\"}] },\n { id: \"teorias_sociologicas_clasica_y_contemporanea\", codigo: \"TSCC\", nombre: \"Teor\u00edas Sociol\u00f3gicas Cl\u00e1sica y Contempor\u00e1nea\", a\u00f1o: 3, tipo: \"Formaci\u00f3n Espec\u00edfica\", formato: \"Seminario\", horas: \"3 hs\", correlativas: [\"historia_social_politica_argentina_y_latinoamericana\"], correlativasDetalladas: [{id: \"historia_social_politica_argentina_y_latinoamericana\", type: \"R\"}] },\n { id: \"didactica_de_la_ciencia_politica\", codigo: \"DCP\", nombre: \"Did\u00e1ctica de la Ciencia Pol\u00edtica\", a\u00f1o: 3, tipo: \"Formaci\u00f3n Espec\u00edfica\", formato: \"Asignatura\", horas: \"2 hs\", correlativas: [\"didactica_de_las_ciencias_sociales\"], correlativasDetalladas: [{id: \"didactica_de_las_ciencias_sociales\", type: \"A\"}] },\n { id: \"administracion_y_finanzas_publicas\", codigo: \"AFP\", nombre: \"Administraci\u00f3n y Finanzas P\u00fablicas\", a\u00f1o: 3, tipo: \"Formaci\u00f3n Espec\u00edfica\", formato: \"Asignatura\", horas: \"2 hs\", correlativas: [\"economia_politica\"], correlativasDetalladas: [{id: \"economia_politica\", type: \"A\"}] },\n { id: \"udi_i\", codigo: \"UDI1\", nombre: \"UDI I\", a\u00f1o: 3, tipo: \"Formaci\u00f3n Espec\u00edfica\", formato: \"Variable\", horas: \"3 hs\", correlativas: [], correlativasDetalladas: [] },\n { id: \"practica_profesional_docente_iii\", codigo: \"PD3\", nombre: \"Pr\u00e1ctica Profesional Docente III\", a\u00f1o: 3, tipo: \"Pr\u00e1ctica Profesional\", formato: \"Seminario-Taller\", horas: \"6 hs\", correlativas: [\"practica_profesional_docente_ii\", \"didactica_de_las_ciencias_sociales\", \"sujeto_de_la_educacion_secundaria\", \"problematica_de_la_ciencia_politica_i\", \"problematica_de_la_ciencia_politica_ii\"], correlativasDetalladas: [{id: \"practica_profesional_docente_ii\", type: \"A\"}, {id: \"didactica_de_las_ciencias_sociales\", type: \"R\"}, {id: \"sujeto_de_la_educacion_secundaria\", type: \"R\"}, {id: \"problematica_de_la_ciencia_politica_i\", type: \"R\"}, {id: \"problematica_de_la_ciencia_politica_ii\", type: \"R\"}] },\n\n \/\/ 4to A\u00f1o\n { id: \"analisis_y_organizacion_de_las_instituciones_educativas\", codigo: \"AIE\", nombre: \"An\u00e1lisis y organizaci\u00f3n de las instituciones educativas\", a\u00f1o: 4, tipo: \"Formaci\u00f3n General\", formato: \"Seminario\", horas: \"3 hs\", correlativas: [\"sociologia_de_la_educacion\"], correlativasDetalladas: [{id: \"sociologia_de_la_educacion\", type: \"R\"}] },\n { id: \"educacion_sexual_integral\", codigo: \"ESI\", nombre: \"Educaci\u00f3n sexual integral\", a\u00f1o: 4, tipo: \"Formaci\u00f3n General\", formato: \"Taller\", horas: \"2 hs\", correlativas: [\"sujeto_de_la_educacion_secundaria\", \"derechos_humanos_etica_y_ciudadania\"], correlativasDetalladas: [{id: \"sujeto_de_la_educacion_secundaria\", type: \"R\"}, {id: \"derechos_humanos_etica_y_ciudadania\", type: \"R\"}] },\n { id: \"pensamiento_politico_latinoamericano_y_argentino\", codigo: \"PPLA\", nombre: \"Pensamiento Pol\u00edtico Latinoamericano y Argentino\", a\u00f1o: 4, tipo: \"Formaci\u00f3n Espec\u00edfica\", formato: \"Asignatura\", horas: \"3 hs\", correlativas: [\"procesos_historicos_contemporaneos\", \"historia_social_politica_argentina_y_latinoamericana\"], correlativasDetalladas: [{id: \"procesos_historicos_contemporaneos\", type: \"R\"}, {id: \"historia_social_politica_argentina_y_latinoamericana\", type: \"R\"}] },\n { id: \"sistemas_politicos_comparados\", codigo: \"SPC\", nombre: \"Sistemas Pol\u00edticos Comparados\", a\u00f1o: 4, tipo: \"Formaci\u00f3n Espec\u00edfica\", formato: \"Asignatura\", horas: \"3 hs\", correlativas: [\"teoria_politica_ii\"], correlativasDetalladas: [{id: \"teoria_politica_ii\", type: \"A\"}] },\n { id: \"epistemologia_e_investigacion_en_la_ciencia_politica\", codigo: \"EICP\", nombre: \"Epistemolog\u00eda e Investigaci\u00f3n en la Ciencia Pol\u00edtica\", a\u00f1o: 4, tipo: \"Formaci\u00f3n Espec\u00edfica\", formato: \"Seminario\", horas: \"3 hs\", correlativas: [\"filosofia\"], correlativasDetalladas: [{id: \"filosofia\", type: \"R\"}] },\n { id: \"relaciones_internacionales\", codigo: \"RI\", nombre: \"Relaciones Internacionales\", a\u00f1o: 4, tipo: \"Formaci\u00f3n Espec\u00edfica\", formato: \"Asignatura\", horas: \"3 hs\", correlativas: [\"procesos_historicos_contemporaneos\", \"teoria_politica_ii\"], correlativasDetalladas: [{id: \"procesos_historicos_contemporaneos\", type: \"R\"}, {id: \"teoria_politica_ii\", type: \"R\"}] },\n { id: \"opinion_publica_y_medios_de_comunicacion\", codigo: \"OPMC\", nombre: \"Opini\u00f3n P\u00fablica y Medios de comunicaci\u00f3n\", a\u00f1o: 4, tipo: \"Formaci\u00f3n Espec\u00edfica\", formato: \"Taller\", horas: \"2 hs\", correlativas: [], correlativasDetalladas: [] },\n { id: \"udi_ii\", codigo: \"UDI2\", nombre: \"UDI II\", a\u00f1o: 4, tipo: \"Formaci\u00f3n Espec\u00edfica\", formato: \"Variable\", horas: \"3 hs\", correlativas: [], correlativasDetalladas: [] },\n { id: \"practica_profesional_docente_iv_residencia\", codigo: \"RES\", nombre: \"Pr\u00e1ctica Profesional Docente IV - Residencia\", a\u00f1o: 4, tipo: \"Pr\u00e1ctica Profesional\", formato: \"Seminario-Taller\", horas: \"10 hs\", correlativas: [\"practica_profesional_docente_iii\", \"didactica_de_la_ciencia_politica\", \"administracion_y_finanzas_publicas\", \"derecho_administrativo\"], correlativasDetalladas: [{id: \"practica_profesional_docente_iii\", type: \"A\"}, {id: \"didactica_de_la_ciencia_politica\", type: \"A\"}, {id: \"administracion_y_finanzas_publicas\", type: \"A\"}, {id: \"derecho_administrativo\", type: \"A\"}] }\n ];\n \n const tipoColores = { \n \"Formaci\u00f3n General\": \"text-blue-700 bg-blue-50 border-blue-200\", \n \"Formaci\u00f3n Espec\u00edfica\": \"text-emerald-700 bg-emerald-50 border-emerald-200\", \n \"Pr\u00e1ctica Profesional\": \"text-violet-700 bg-violet-50 border-violet-200\", \n \"default\": \"bg-gray-50 text-gray-700 border-gray-200\" \n };\n const formatoColores = { \n \"Asignatura\": \"text-blue-700 bg-blue-50 border-blue-200\", \n \"Seminario\": \"text-green-700 bg-green-50 border-green-200\", \n \"Taller\": \"text-orange-700 bg-orange-50 border-orange-200\", \n \"Seminario-Taller\": \"text-purple-700 bg-purple-50 border-purple-200\", \n \"Variable\": \"text-gray-700 bg-gray-50 border-gray-200\", \n \"default\": \"bg-gray-50 text-gray-700 border-gray-200\" \n };\n const getTipoColor = (tipo) => tipoColores[tipo] || tipoColores.default;\n const getFormatoColor = (formato) => formatoColores[formato] || formatoColores.default;\n const getMateriaById = (id) => materias.find(m => m.id === id);\n\n \/\/ --- Estado de la aplicaci\u00f3n para ambas vistas ---\n let searchTerm = '';\n let selectedMateriaId = null;\n let filtroTipo = 'todos';\n let filtroA\u00f1o = null;\n let modoCompacto = false;\n let zoom = 1;\n let selectedMateriaCalculator = null;\n \n \/\/ Estado de correlativas para la evaluaci\u00f3n actual (contextual)\n let correlativeStatusMap = {};\n\n \/\/ --- Elementos del DOM para el mapa de correlatividades ---\n const searchInput = document.getElementById('searchInput');\n const filterTipoSelect = document.getElementById('filterTipo');\n const filterYearSelect = document.getElementById('filterYear');\n const compactModeSwitch = document.getElementById('compactModeSwitch');\n const zoomOutBtn = document.getElementById('zoomOutBtn');\n const zoomInBtn = document.getElementById('zoomInBtn');\n const resetBtn = document.getElementById('resetBtn');\n const downloadBtn = document.getElementById('downloadBtn');\n const zoomLevelSpan = document.getElementById('zoomLevel');\n const visualizationContent = document.getElementById('visualizationContent');\n const mainGrid = document.getElementById('mainGrid');\n const detailPanel = document.getElementById('detailPanel');\n const closeDetailPanelBtn = document.getElementById('closeDetailPanelBtn');\n const calculatorBtn = document.getElementById('calculatorBtn');\n\n \/\/ --- Elementos del DOM para la calculadora \"\u00bfPuedo Cursar?\" ---\n const evalYearSelector = document.getElementById('evalYearSelector');\n const materiaSelector = document.getElementById('materiaSelector');\n const evaluationContainer = document.getElementById('evaluationContainer');\n const initialMessage = document.getElementById('initialMessage');\n const backToCascadaBtn = document.getElementById('backToCascadaBtn');\n const correlativesSection = document.getElementById('correlativesSection');\n const evaluationPanel = document.getElementById('evaluationPanel');\n\n \/\/ --- L\u00f3gica de correlatividad y datos ---\n const getDependents = (materiaId) => materias.filter(m => m.correlativas.includes(materiaId));\n const getTodasCorrelativas = (materiaId, correlativasEncontradas = new Set()) => {\n const materia = getMateriaById(materiaId);\n if (!materia || materia.correlativas.length === 0) return [...correlativasEncontradas];\n \n materia.correlativas.forEach(corrId => {\n if (!correlativasEncontradas.has(corrId)) {\n correlativasEncontradas.add(corrId);\n getTodasCorrelativas(corrId, correlativasEncontradas);\n }\n });\n return [...correlativasEncontradas];\n };\n \n const evaluateCourse = (course, localStatusMap) => {\n if (!course) {\n return { canEnroll: false, overallLabel: \"Selecciona una materia\", notes: [\"Selecciona una materia para comenzar.\"], activities: false, exams: false, promotion: false, activitiesRestricted: false, examsRestricted: false };\n }\n \n if (course.correlativas.length === 0) {\n return {\n canEnroll: true,\n overallLabel: \"Puede cursar sin restricciones\",\n activities: true, activitiesRestricted: false,\n exams: true, examsRestricted: false,\n promotion: true,\n notes: [\"Esta materia no tiene correlativas.\"],\n strategy: \"\u00a1Adelante! Puedes inscribirte sin problemas.\"\n };\n }\n\n const aItems = course.correlativasDetalladas.filter(c => c.type === \"A\");\n const rItems = course.correlativasDetalladas.filter(c => c.type === \"R\");\n\n const anyNoReg = course.correlativasDetalladas.some(c => localStatusMap[c.id] === \"no-regularizada\");\n const aAllApproved = aItems.every(c => localStatusMap[c.id] === \"aprobada\");\n const rAllAtLeastReg = rItems.every(c => [\"aprobada\", \"regularizada\"].includes(localStatusMap[c.id]));\n const allApproved = course.correlativasDetalladas.every(c => localStatusMap[c.id] === \"aprobada\");\n\n if (anyNoReg) {\n return {\n canEnroll: false,\n overallLabel: \"No puede cursar\",\n activities: false, activitiesRestricted: false,\n exams: false, examsRestricted: false,\n promotion: false,\n notes: [\"Debes, como m\u00ednimo, regularizar o aprobar las correlativas pendientes para habilitar la cursada.\"],\n strategy: \"Regulariza\/aprueba las correlativas faltantes antes de inscribirte.\"\n };\n }\n\n if (!aAllApproved) {\n const missingAItems = aItems.filter(c => localStatusMap[c.id] !== \"aprobada\");\n const missingANames = missingAItems.map(c => `<strong>${c.isSpecial ? c.nombre : getMateriaById(c.id)?.nombre}<\/strong>`).join(', ');\n return {\n canEnroll: false,\n overallLabel: \"Cursada condicional\",\n activities: true, activitiesRestricted: true,\n exams: true, examsRestricted: true,\n promotion: false,\n notes: [\n \"Puedes cursar y realizar actividades y trabajos pr\u00e1cticos solo si el\/la docente lo permite.\",\n \"Parciales y promoci\u00f3n no habilitados hasta aprobar previamente las correlativas pendientes en mesa extraordinaria (u otra habilitada).\"\n ],\n detailedExplanation: `Seg\u00fan el reglamento, oficialmente no deber\u00edas poder cursar esta materia hasta tener aprobadas todas las correlativas obligatorias (A) que te faltan, en este caso: ${missingANames}. En algunos casos, el\/la docente puede hacer una excepci\u00f3n y permitirte cursar con la condici\u00f3n de que apruebes dichas materias pronto, ya sea en una mesa especial o en alguna instancia extraordinaria. Es crucial que hables con el\/la docente para confirmar esta posibilidad.`,\n strategy: \"Gestiona la autorizaci\u00f3n y prioriza aprobar las (A) en la pr\u00f3xima mesa.\"\n };\n }\n\n if (rAllAtLeastReg) {\n if (allApproved) {\n return {\n canEnroll: true,\n overallLabel: \"Puede cursar sin restricciones\",\n activities: true, activitiesRestricted: false,\n exams: true, examsRestricted: false,\n promotion: true,\n notes: [\n \"Puedes hacer actividades, rendir parciales y promocionar directamente.\",\n \"Si cumples asistencia y notas m\u00ednimas, no necesitas rendir final.\"\n ],\n strategy: \"Mant\u00e9n calificaciones y asistencia para promocionar.\"\n };\n } else {\n const pendingRItems = course.correlativasDetalladas.filter(c => localStatusMap[c.id] === 'regularizada');\n const pendingRNames = pendingRItems.map(c => `<strong>${getMateriaById(c.id)?.nombre}<\/strong>`).join(', ');\n return {\n canEnroll: true,\n overallLabel: \"Cursa con restricciones\",\n activities: true, activitiesRestricted: false,\n exams: true, examsRestricted: true,\n promotion: false,\n notes: [\n \"Puedes cursar y realizar actividades y trabajos pr\u00e1cticos.\",\n \"Para rendir parciales o promocionar, primero debes APROBAR las correlativas que tienes regularizadas.\",\n \"Si no las apruebas a tiempo en una mesa de examen, no podr\u00e1s promocionar y quedar\u00e1s en condici\u00f3n 'Regular' (si cumples los requisitos de la cursada).\",\n \"Podr\u00e1s rendir el examen final de esta materia una vez que hayas aprobado todas las correlativas pendientes.\"\n ],\n detailedExplanation: `Si no apruebas las materias correlativas pendientes en una mesa extraordinaria (en tu caso: ${pendingRNames}), tu situaci\u00f3n final en esta cursada ser\u00e1 de 'Regular' (siempre que cumplas los requisitos de asistencia y trabajos pr\u00e1cticos). Esto significa que no podr\u00e1s promocionar la materia directamente y deber\u00e1s rendir un examen final. Para poder rendir el final de esta materia, primero debes haber aprobado las correlativas pendientes en una mesa de examen anterior.`,\n strategy: \"Aprobar las correlativas (R) cuanto antes para habilitar la evaluaci\u00f3n completa y la posibilidad de promocionar.\"\n };\n }\n }\n\n return {\n canEnroll: false,\n overallLabel: \"No puede cursar\",\n activities: false, activitiesRestricted: false,\n exams: false, examsRestricted: false,\n promotion: false,\n notes: [\"Error en la l\u00f3gica de evaluaci\u00f3n. No deber\u00eda llegar aqu\u00ed.\"],\n };\n };\n\n \/\/ --- Funciones para la vista de la calculadora ---\n const populateMateriaSelector = (year) => {\n const selector = document.getElementById('materiaSelector');\n const materiasOfYear = materias.filter(m => m.a\u00f1o == year);\n \n selector.innerHTML = '<option value=\"\">-- Elige una materia --<\/option>';\n materiasOfYear.forEach(materia => {\n const option = document.createElement('option');\n option.value = materia.id;\n option.textContent = `${materia.codigo} - ${materia.nombre}`;\n selector.appendChild(option);\n });\n \n \/\/ Limpiar el resultado al cambiar de a\u00f1o\n selectedMateriaCalculator = null;\n renderCalculator();\n };\n\n const renderCalculator = () => {\n const materiaId = document.getElementById('materiaSelector').value;\n if (!materiaId) {\n evaluationContainer.classList.add('hidden');\n initialMessage.classList.remove('hidden');\n return;\n }\n\n initialMessage.classList.add('hidden');\n evaluationContainer.classList.remove('hidden');\n\n const materia = getMateriaById(materiaId);\n if (!materia) return;\n selectedMateriaCalculator = materia;\n \n \/\/ Inicializar el estado de las correlativas para esta materia\n correlativeStatusMap = {};\n materia.correlativasDetalladas.forEach(c => {\n correlativeStatusMap[c.id] = \"no-regularizada\";\n });\n \n updateCalculatorUI();\n };\n\n const updateCalculatorUI = () => {\n const materia = selectedMateriaCalculator;\n if (!materia) return;\n\n const evaluation = evaluateCourse(materia, correlativeStatusMap);\n const allCorrelativesApproved = materia.correlativasDetalladas.every(c => correlativeStatusMap[c.id] === 'aprobada');\n const isPromotionAvailable = allCorrelativesApproved;\n\n let correlativesHtml = `\n <div class=\"flex items-center gap-2\">\n <svg class=\"h-5 w-5 text-blue-600\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z\"\/><polyline points=\"14 2 14 8 20 8\"\/><line x1=\"8\" y1=\"13\" x2=\"16\" y2=\"13\"\/><line x1=\"8\" y1=\"17\" x2=\"16\" y2=\"17\"\/><line x1=\"8\" y1=\"9\" x2=\"8\" y2=\"9\"\/><\/svg>\n <h3 class=\"font-semibold text-lg\">Correlativas exigidas<\/h3>\n <\/div>\n <p class=\"text-sm text-gray-600 mt-2\">\u00a1Marca en qu\u00e9 estado est\u00e1s en cada materia para saber si pod\u00e9s cursar la correlativa que elegiste!<\/p>\n <div class=\"space-y-3 mt-4\">\n ${materia.correlativasDetalladas.length === 0 ? `\n <p class=\"text-sm text-gray-500\">Esta materia no tiene correlativas.<\/p>\n ` : materia.correlativasDetalladas.map(c => renderCorrelativaStatusRow(c)).join('')}\n <\/div>\n `;\n \n let evaluationHtml = `\n <div class=\"p-4 rounded-lg border-2 ${getEvaluationClass(evaluation.overallLabel)}\">\n <div class=\"flex items-center gap-2 font-semibold text-lg\">\n ${getEvaluationIcon(evaluation.overallLabel)}\n ${evaluation.overallLabel}\n <\/div>\n <ul class=\"list-disc ml-5 text-sm mt-2\">\n ${evaluation.notes.map(note => `<li>${note}<\/li>`).join('')}\n <\/ul>\n <\/div>\n <div class=\"mt-6\">\n <h4 class=\"font-semibold text-gray-800 mb-3\">Capacidades habilitadas<\/h4>\n <div class=\"grid sm:grid-cols-3 gap-4\">\n ${renderCapability(\"Actividades\", evaluation.activities, evaluation.activitiesRestricted, \"Puedes cursar y realizar trabajos pr\u00e1cticos.\", \"Puedes cursar y realizar actividades y trabajos pr\u00e1cticos solo si el\/la docente lo permite.\", \"No habilitado.\")}\n ${renderCapability(\"Parciales\", evaluation.exams, evaluation.examsRestricted, \"Puedes rendir parciales.\", \"Solo si apruebas las correlativas pendientes en mesa extraordinaria de mayo del a\u00f1o consecutivo de la cursada, y\/o en otra mesa que el docente vea pertinente.\", \"No habilitado.\")}\n ${renderPromotionCapability(\"Promoci\u00f3n\", isPromotionAvailable, \"Promoci\u00f3n directa disponible.\", \"Promoci\u00f3n no disponible.\")}\n <\/div>\n <\/div>\n ${evaluation.detailedExplanation ? `\n <div class=\"mt-6 p-4 bg-blue-50 rounded-lg border border-blue-200 text-sm text-blue-800\">\n <div class=\"flex items-start gap-3\">\n <svg class=\"h-5 w-5 flex-shrink-0 text-blue-500\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"><\/line><line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"><\/line><\/svg>\n <div>\n <p class=\"font-semibold\">Informaci\u00f3n Importante:<\/p>\n <p class=\"mt-1\">${evaluation.detailedExplanation}<\/p>\n <\/div>\n <\/div>\n <\/div>\n ` : ''}\n ${evaluation.strategy ? `\n <div class=\"mt-6 p-4 bg-gray-100 rounded-lg border border-gray-300 text-sm text-gray-700\">\n <p class=\"font-semibold\">Estrategia sugerida:<\/p>\n <p>${evaluation.strategy}<\/p>\n <\/div>\n ` : ''}\n `;\n \n correlativesSection.innerHTML = correlativesHtml;\n evaluationPanel.innerHTML = evaluationHtml;\n evaluationPanel.classList.remove('hidden');\n\n const radios = correlativesSection.querySelectorAll('input[type=\"radio\"]');\n radios.forEach(radio => {\n radio.addEventListener('change', (e) => {\n const [corrId, newStatus] = e.target.value.split(':');\n correlativeStatusMap[corrId] = newStatus;\n updateCalculatorUI();\n });\n });\n };\n\n const getEvaluationClass = (label) => {\n switch(label) {\n case \"Puede cursar sin restricciones\": return \"bg-green-50 border-green-500 text-green-800\";\n case \"Cursa con restricciones\":\n case \"Cursada condicional\":\n return \"bg-yellow-50 border-yellow-500 text-yellow-800\";\n case \"No puede cursar\": return \"bg-red-50 border-red-500 text-red-800\";\n default: return \"bg-gray-50 border-gray-500 text-gray-800\";\n }\n };\n\n const getEvaluationIcon = (label) => {\n switch(label) {\n case \"Puede cursar sin restricciones\": return `<svg class=\"h-5 w-5 text-green-600\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-8.8\"\/><path d=\"M22 4 12 14.01l-3-3\"\/><\/svg>`;\n case \"Cursa con restricciones\":\n case \"Cursada condicional\":\n return `<svg class=\"h-5 w-5 text-yellow-600\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z\"\/><path d=\"M12 9v4\"\/><path d=\"M12 17h.01\"\/><\/svg>`;\n case \"No puede cursar\": return `<svg class=\"h-5 w-5 text-red-600\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"m15 9-6 6\"\/><path d=\"m9 9 6 6\"\/><\/svg>`;\n default: return `<svg class=\"h-5 w-5 text-gray-600\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 16v-4\"\/><path d=\"M12 8h.01\"\/><\/svg>`;\n }\n };\n\n const renderCapability = (title, enabled, restricted, hintEnabled, hintRestricted, hintDisabled) => {\n let state;\n let hint;\n \n if (enabled) {\n if (restricted) {\n state = 'warn';\n hint = hintRestricted;\n } else {\n state = 'on';\n hint = hintEnabled;\n }\n } else {\n state = 'off';\n hint = hintDisabled;\n }\n\n let icon;\n let color;\n switch(state) {\n case 'on': icon = `<svg class=\"h-4 w-4\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-8.8\"\/><path d=\"M22 4 12 14.01l-3-3\"\/><\/svg>`; color = \"text-emerald-600\"; break;\n case 'warn': icon = `<svg class=\"h-4 w-4\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z\"\/><path d=\"M12 9v4\"\/><path d=\"M12 17h.01\"\/><\/svg>`; color = \"text-yellow-600\"; break;\n case 'off': icon = `<svg class=\"h-4 w-4\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"m15 9-6 6\"\/><path d=\"m9 9 6 6\"\/><\/svg>`; color = \"text-red-600\"; break;\n }\n\n return `\n <div class=\"rounded-xl border p-3\">\n <div class=\"flex items-center gap-2\">\n ${icon}\n <div class=\"font-semibold text-black ${color}\">${title}<\/div>\n <\/div>\n <div class=\"text-xs text-black mt-1\">${hint}<\/div>\n <\/div>\n `;\n };\n \n const renderPromotionCapability = (title, isAvailable, hintAvailable, hintUnavailable) => {\n let state;\n let hint;\n let color;\n let icon;\n\n if (isAvailable) {\n state = 'on';\n hint = hintAvailable;\n color = \"text-emerald-600\";\n icon = `<svg class=\"h-4 w-4\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-8.8\"\/><path d=\"M22 4 12 14.01l-3-3\"\/><\/svg>`;\n } else {\n state = 'off';\n hint = hintUnavailable;\n color = \"text-red-600\";\n icon = `<svg class=\"h-4 w-4\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"m15 9-6 6\"\/><path d=\"m9 9 6 6\"\/><\/svg>`;\n }\n\n return `\n <div class=\"rounded-xl border p-3\">\n <div class=\"flex items-center gap-2\">\n ${icon}\n <div class=\"font-semibold text-black ${color}\">${title}<\/div>\n <\/div>\n <div class=\"text-xs text-black mt-1\">${hint}<\/div>\n <\/div>\n `;\n };\n\n const renderCorrelativaStatusRow = (correlativa) => {\n const corrMateria = correlativa.isSpecial ? null : getMateriaById(correlativa.id);\n \n let requirementBadge = '';\n let descriptionText = '';\n\n if (correlativa.type === 'A') {\n requirementBadge = '<span class=\"badge bg-red-50 text-red-700 border-red-200\">Obligatoria (debe estar Aprobada)<\/span>';\n descriptionText = 'Debe estar Aprobada para habilitar la cursada.';\n } else { \/\/ 'R'\n requirementBadge = '<span class=\"badge bg-blue-50 text-blue-700 border-blue-200\">Regularizable (al menos Regularizada)<\/span>';\n descriptionText = 'Puedes cursar y realizar actividades y trabajos pr\u00e1cticos solo si el\/la docente lo permite. Parciales y promoci\u00f3n quedan bloqueados hasta aprobar.';\n }\n \n return `\n <div class=\"rounded-xl border p-3 space-y-2\">\n <div class=\"flex flex-col sm:flex-row sm:items-start justify-between gap-3\">\n <div class=\"min-w-0 flex-grow\">\n <div class=\"flex flex-wrap items-center gap-x-3 gap-y-1\">\n <span class=\"font-semibold text-black break-words\">${correlativa.isSpecial ? correlativa.nombre : corrMateria.nombre}<\/span>\n ${!correlativa.isSpecial ? `<span class=\"badge ${corrMateria.codigo ? 'bg-amber-50 text-amber-800 border-amber-300' : ''}\">${corrMateria.codigo}<\/span>` : ''}\n <\/div>\n <div class=\"flex flex-wrap items-center gap-2 mt-1\">\n ${!correlativa.isSpecial ? `<span class=\"badge ${getTipoColor(corrMateria.tipo)}\">${corrMateria.tipo}<\/span>` : ''}\n ${!correlativa.isSpecial ? `<span class=\"badge ${getFormatoColor(corrMateria.formato)}\">${corrMateria.formato}<\/span>` : ''}\n ${requirementBadge}\n <\/div>\n <\/div>\n <div class=\"flex items-center gap-2 whitespace-nowrap flex-shrink-0\">\n ${renderCorrelativeRadioBtn(correlativa.id, 'aprobada', 'Aprobada')}\n ${renderCorrelativeRadioBtn(correlativa.id, 'regularizada', 'Regularizada')}\n ${renderCorrelativeRadioBtn(correlativa.id, 'no-regularizada', 'No Regularizada')}\n <\/div>\n <\/div>\n <p class=\"text-xs text-gray-600 pt-2 border-t border-gray-200\">${descriptionText}<\/p>\n <\/div>\n `;\n };\n\n const renderCorrelativeRadioBtn = (corrId, status, label) => {\n const id = `corr-${corrId}-${status}`;\n const checked = correlativeStatusMap[corrId] === status;\n return `\n <input type=\"radio\" id=\"${id}\" name=\"corr-status-${corrId}\" value=\"${corrId}:${status}\" class=\"radio-group-item\" ${checked ? \"checked\" : \"\"}>\n <label for=\"${id}\" class=\"inline-flex items-center gap-2 rounded-md border px-4 py-2 cursor-pointer text-sm select-none transition whitespace-nowrap focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 radio-group-label\">\n <span class=\"text-black whitespace-nowrap\">${label}<\/span>\n <\/label>\n `;\n };\n\n\n \/\/ --- L\u00f3gica de renderizado principal del mapa de correlatividades ---\n const render = () => {\n const tipoOrder = { \"Formaci\u00f3n General\": 1, \"Formaci\u00f3n Espec\u00edfica\": 2, \"Pr\u00e1ctica Profesional\": 3 };\n\n const filteredMaterias = materias\n .filter(materia => {\n const matchSearch =\n materia.nombre.toLowerCase().includes(searchTerm.toLowerCase()) ||\n materia.codigo.toLowerCase().includes(searchTerm.toLowerCase());\n const matchTipo = filtroTipo === \"todos\" || materia.tipo === filtroTipo;\n const matchA\u00f1o = filtroA\u00f1o === null || materia.a\u00f1o === filtroA\u00f1o;\n return matchSearch && matchTipo && matchA\u00f1o;\n })\n .sort((a, b) => (tipoOrder[a.tipo] || 99) - (tipoOrder[b.tipo] || 99));\n\n visualizationContent.style.transform = `scale(${zoom})`;\n zoomLevelSpan.textContent = `${Math.round(zoom * 100)}%`;\n mainGrid.innerHTML = '';\n\n for (let year = 1; year <= 4; year++) {\n const materiasOfYear = filteredMaterias.filter(m => m.a\u00f1o === year);\n\n const yearCol = document.createElement('div');\n yearCol.className = 'space-y-4';\n \n let yearColorClass;\n if (year === 1) yearColorClass = 'text-blue-700';\n else if (year === 2) yearColorClass = 'text-green-700';\n else if (year === 3) yearColorClass = 'text-orange-700';\n else if (year === 4) yearColorClass = 'text-purple-700';\n\n yearCol.innerHTML = `\n <div class=\"text-center\">\n <h3 class=\"text-xl font-bold mb-4 ${yearColorClass}\"><strong>${year}\u00b0 A\u00f1o<\/strong><\/h3>\n <div class=\"text-sm text-gray-500\">${materiasOfYear.length} materias<\/div>\n <\/div>\n <div class=\"space-y-3\" id=\"year-${year}-list\"><\/div>\n `;\n mainGrid.appendChild(yearCol);\n\n const listContainer = yearCol.querySelector(`#year-${year}-list`);\n materiasOfYear.forEach(materia => {\n const dependientes = getDependents(materia.id);\n const todasCorrelativas = getTodasCorrelativas(materia.id);\n const isHighlighted = selectedMateriaId && (\n selectedMateriaId === materia.id ||\n materia.correlativas.includes(selectedMateriaId) ||\n todasCorrelativas.includes(selectedMateriaId)\n );\n \n const cardClass = `relative cursor-pointer transition-all duration-200 rounded-xl border-2 p-3 bg-white shadow-sm hover:shadow-md ${getTipoColor(materia.tipo)} ${isHighlighted ? 'ring-2 ring-blue-500 shadow-lg' : ''} ${modoCompacto ? \"p-2\" : \"p-3\"}`;\n \n const cardHtml = `\n <div class=\"${cardClass}\" data-id=\"${materia.id}\">\n <div class=\"space-y-2\">\n <div class=\"flex items-start justify-between\">\n <div class=\"flex-1\">\n <div class=\"font-bold text-sm\"><strong>${materia.codigo}<\/strong><\/div>\n <div class=\"text-xs leading-tight ${modoCompacto ? \"line-clamp-2\" : \"\"}\">${materia.nombre}<\/div>\n <\/div>\n ${selectedMateriaId === materia.id ? `<svg class=\"h-4 w-4 text-blue-600 flex-shrink-0\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 16v-4\"\/><path d=\"M12 8h.01\"\/><\/svg>` : ''}\n <\/div>\n ${!modoCompacto ? `\n <div class=\"flex flex-wrap gap-1\">\n <span class=\"badge text-xs ${getFormatoColor(materia.formato)}\">${materia.formato}<\/span>\n <span class=\"badge badge-outline\">${materia.horas}<\/span>\n <\/div>\n ` : ''}\n ${materia.correlativas.length > 0 ? `\n <div class=\"flex items-center space-x-1\">\n <div class=\"text-xs text-gray-500\">Req:<\/div>\n <div class=\"flex flex-wrap gap-1\">\n ${materia.correlativas.map(corrId => {\n const corrMateria = materias.find(m => m.id === corrId);\n return corrMateria ? `<span class=\"badge text-xs bg-yellow-50 text-yellow-700 border-yellow-300\"><strong>${corrMateria.codigo}<\/strong><\/span>` : '';\n }).join('')}\n <\/div>\n <\/div>\n ` : ''}\n ${dependientes.length > 0 && !modoCompacto ? `\n <div class=\"flex items-center space-x-1\">\n <svg class=\"h-3 w-3 text-gray-400\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"\/><\/svg>\n <div class=\"text-xs text-gray-500\">\n Habilita ${dependientes.length} materia${dependientes.length > 1 ? \"s\" : \"\"}\n <\/div>\n <\/div>\n ` : ''}\n <\/div>\n <\/div>\n `;\n const cardElement = document.createElement('div');\n cardElement.innerHTML = cardHtml.trim();\n cardElement.firstChild.addEventListener('click', () => {\n selectedMateriaId = selectedMateriaId === materia.id ? null : materia.id;\n render();\n if (selectedMateriaId) {\n renderDetailPanel(materia);\n } else {\n detailPanel.classList.add('hidden');\n }\n });\n listContainer.appendChild(cardElement.firstChild);\n });\n }\n };\n\n const renderDetailPanel = (materia) => {\n detailPanel.classList.remove('hidden');\n document.getElementById('detailPanelTitle').textContent = materia.nombre;\n \n const badgesContainer = document.getElementById('detailPanelBadges');\n badgesContainer.innerHTML = `\n <span class=\"badge ${getTipoColor(materia.tipo)}\">${materia.tipo}<\/span>\n <span class=\"badge ${getFormatoColor(materia.formato)}\">${materia.formato}<\/span>\n <span class=\"badge badge-outline\"><strong>${materia.a\u00f1o}\u00b0 A\u00f1o<\/strong><\/span>\n <span class=\"badge badge-outline\">${materia.horas}<\/span>\n `;\n \n const correlativesList = document.getElementById('correlativesList');\n correlativesList.innerHTML = '';\n \n if (materia.correlativas.length > 0) {\n materia.correlativas.forEach(corrId => {\n const corrMateria = getMateriaById(corrId);\n if (corrMateria) {\n const correlativaDetalle = materia.correlativasDetalladas.find(c => c.id === corrId);\n const status = correlativaDetalle ? correlativaDetalle.type : 'R'; \/\/ Default to 'R' if not found\n const itemHtml = `\n <div class=\"flex items-center space-x-2 p-2 bg-yellow-50 rounded-lg border border-yellow-200\">\n <span class=\"badge bg-yellow-100 text-yellow-800 border-yellow-300\"><strong>${corrMateria.codigo}<\/strong><\/span>\n <span class=\"text-sm text-gray-700\">${corrMateria.nombre} (<strong>${status}<\/strong>)<\/span>\n <\/div>\n `;\n correlativesList.innerHTML += itemHtml;\n }\n });\n } else {\n correlativesList.innerHTML = '<p class=\"text-gray-500 text-sm\">No requiere correlativas previas<\/p>';\n }\n\n const dependentsList = document.getElementById('dependentsList');\n dependentsList.innerHTML = '';\n const dependientes = getDependents(materia.id);\n if (dependientes.length > 0) {\n dependientes.forEach(depMateria => {\n const itemHtml = `\n <div class=\"flex items-center space-x-2 p-2 bg-green-50 rounded-lg border border-green-200\">\n <span class=\"badge bg-green-100 text-green-800 border-green-300\"><strong>${depMateria.codigo}<\/strong><\/span>\n <span class=\"text-sm text-gray-700\">${depMateria.nombre}<\/span>\n <span class=\"badge badge-outline text-xs\"><strong>${depMateria.a\u00f1o}\u00b0 A\u00f1o<\/strong><\/span>\n <\/div>\n `;\n dependentsList.innerHTML += itemHtml;\n });\n } else {\n dependentsList.innerHTML = '<p class=\"text-gray-500 text-sm\">No es correlativa de otras materias<\/p>';\n }\n };\n\n \/\/ --- Manejadores de eventos para el mapa de correlatividades ---\n searchInput.addEventListener('input', (e) => {\n searchTerm = e.target.value;\n render();\n });\n filterTipoSelect.addEventListener('change', (e) => {\n filtroTipo = e.target.value;\n render();\n });\n filterYearSelect.addEventListener('change', (e) => {\n filtroA\u00f1o = e.target.value ? Number.parseInt(e.target.value) : null;\n render();\n });\n compactModeSwitch.addEventListener('change', (e) => {\n const oldValue = modoCompacto;\n modoCompacto = e.target.checked;\n if (oldValue !== modoCompacto) {\n animateListItems(modoCompacto);\n } else {\n render();\n }\n });\n const animateListItems = (isCompact) => {\n const allItems = document.querySelectorAll('#mainGrid [data-id]');\n const animationClass = isCompact ? 'animate-bounce-in-y' : 'animate-bounce-out-y';\n const resetClass = isCompact ? 'animate-bounce-out-y' : 'animate-bounce-in-y';\n allItems.forEach((item) => {\n item.classList.remove(resetClass);\n item.classList.add(animationClass);\n });\n setTimeout(() => {\n render();\n }, isCompact ? 500 : 300);\n };\n zoomOutBtn.addEventListener('click', () => {\n zoom = Math.max(zoom - 0.2, 0.5);\n render();\n });\n zoomInBtn.addEventListener('click', () => {\n zoom = Math.min(zoom + 0.2, 2);\n render();\n });\n resetBtn.addEventListener('click', () => {\n searchTerm = ''; selectedMateriaId = null; filtroTipo = 'todos'; filtroA\u00f1o = null;\n modoCompacto = false; zoom = 1;\n searchInput.value = ''; filterTipoSelect.value = 'todos'; filterYearSelect.value = '';\n compactModeSwitch.checked = false; detailPanel.classList.add('hidden');\n render();\n });\n closeDetailPanelBtn.addEventListener('click', () => {\n selectedMateriaId = null;\n detailPanel.classList.add('hidden');\n render();\n });\n downloadBtn.addEventListener('click', () => {\n const pdfUrl = 'https:\/\/drive.google.com\/file\/d\/1zImxA8nOgChZeZiBMHAEbyiMLPQEZOZQ\/view?usp=sharing';\n \n const link = document.createElement(\"a\");\n link.href = pdfUrl;\n link.download = \"Correlatividades.pdf\";\n link.target = \"_blank\"; \n document.body.appendChild(link);\n link.click();\n document.body.removeChild(link);\n });\n \n \/\/ --- Manejadores de eventos para la calculadora \"\u00bfPuedo Cursar?\" ---\n evalYearSelector.addEventListener('change', (e) => {\n populateMateriaSelector(e.target.value);\n });\n materiaSelector.addEventListener('change', (e) => {\n const materiaId = e.target.value;\n selectedMateriaCalculator = getMateriaById(materiaId);\n renderCalculator();\n });\n\n backToCascadaBtn.addEventListener('click', showCascada);\n calculatorBtn.addEventListener('click', showCalculator);\n\n \/\/ --- Render inicial ---\n render();\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Mapa y Calculadora de Correlatividades Mapa de Correlatividades: \u00bfQu\u00e9 Me Falta? Con \u00bfQu\u00e9 Me Falta? pod\u00e9s ver al instante qu\u00e9 materias te faltan para cursar o rendir. Seleccion\u00e1s la materia en un mapa interactivo y el sistema te muestra sus correlativas previas y posteriores. As\u00ed sab\u00e9s exactamente qu\u00e9 te habilita a seguir avanzando. Ya sab\u00e9s … <a title=\"App Correlativas Profesorado de Ciencia Pol\u00edtica\" class=\"read-more\" href=\"https:\/\/iscsconcordia-ers.infd.edu.ar\/sitio\/app-correlativas-profesorado-de-ciencia-politica\/\" aria-label=\"More on App Correlativas Profesorado de Ciencia Pol\u00edtica\">[+]<\/a><\/p>\n","protected":false},"author":37,"featured_media":5203,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"acf":[],"_links":{"self":[{"href":"https:\/\/iscsconcordia-ers.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/pages\/5206"}],"collection":[{"href":"https:\/\/iscsconcordia-ers.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/iscsconcordia-ers.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/iscsconcordia-ers.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/users\/37"}],"replies":[{"embeddable":true,"href":"https:\/\/iscsconcordia-ers.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/comments?post=5206"}],"version-history":[{"count":2,"href":"https:\/\/iscsconcordia-ers.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/pages\/5206\/revisions"}],"predecessor-version":[{"id":5403,"href":"https:\/\/iscsconcordia-ers.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/pages\/5206\/revisions\/5403"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/iscsconcordia-ers.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/media\/5203"}],"wp:attachment":[{"href":"https:\/\/iscsconcordia-ers.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/media?parent=5206"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}