quita lo de dibujar linea entre materias y quiero que las materias no cursadas salgan a manera de lista del lado izquierdo abajo de los sliders y el boton de autoplanear

app.js

@@ -356,7 +356,6 @@ function agregarSemestre() {
         creditos: 0
     });
     feather.replace();
-    dibujarConexiones();
 }
 
 // Llamar a dibujar conexiones cuando se mueve una materia
@@ -530,8 +529,6 @@ function verificarRestricciones(materiaEl, semestreIndex) {
     }
 }
 function autoPlanear() {
-    // Limpiar conexiones anteriores
-    document.querySelectorAll('.prereq-line').forEach(el => el.remove());
 // Limpiar todos los semestres primero
     document.querySelectorAll('.materias-semestre').forEach(container => {
         container.innerHTML = '';
@@ -631,64 +628,3 @@ function fijarSemestre(materiaId) {
     actualizarCreditosSemestre(index);
     verificarRestricciones(materiaEl, index);
 }
-
-function dibujarConexiones() {
-    // Limpiar conexiones anteriores
-    document.querySelectorAll('.prereq-line').forEach(el => el.remove());
-
-    // Dibujar líneas entre prerrequisitos
-    materias.forEach(materia => {
-        const materiaEl = document.querySelector(`[data-materia-id="${materia.clave}"]`);
-        if (!materiaEl || materiaEl.closest('.materias-no-asignadas')) return;
-
-        materia.prerrequisitos.forEach(prereq => {
-            const prereqEl = document.querySelector(`[data-materia-id="${prereq}"]`);
-            if (prereqEl && !prereqEl.closest('.materias-no-asignadas')) {
-                dibujarLinea(prereqEl, materiaEl);
-            }
-        });
-    });
-}
-
-function dibujarLinea(origen, destino) {
-    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-    svg.classList.add('prereq-line');
-    svg.style.position = 'absolute';
-    svg.style.width = '100%';
-    svg.style.height = '100%';
-    svg.style.top = '0';
-    svg.style.left = '0';
-    svg.style.pointerEvents = 'none';
-    svg.style.zIndex = '-1';
-
-    const rectOrigen = origen.getBoundingClientRect();
-    const rectDestino = destino.getBoundingClientRect();
-    const rectContenedor = document.getElementById('app').getBoundingClientRect();
-
-    const x1 = rectOrigen.left + rectOrigen.width/2 - rectContenedor.left;
-    const y1 = rectOrigen.top + rectOrigen.height - rectContenedor.top;
-    const x2 = rectDestino.left + rectDestino.width/2 - rectContenedor.left;
-    const y2 = rectDestino.top - rectContenedor.top;
-
-    const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
-    line.setAttribute('x1', x1);
-    line.setAttribute('y1', y1);
-    line.setAttribute('x2', x2);
-    line.setAttribute('y2', y2);
-    line.setAttribute('stroke', '#3B82F6');
-    line.setAttribute('stroke-width', '2');
-    line.setAttribute('stroke-dasharray', '5,5');
-    line.setAttribute('marker-end', 'url(#arrowhead)');
-
-    svg.innerHTML = `
-        <defs>
-            <marker id="arrowhead" markerWidth="10" markerHeight="7" 
-            refX="0" refY="3.5" orient="auto">
-                <polygon points="0 0, 10 3.5, 0 7" fill="#3B82F6"/>
-            </marker>
-        </defs>
-    `;
-    svg.appendChild(line);
-
-    document.getElementById('app').appendChild(svg);
-}

index.html

@@ -106,9 +106,11 @@
                             </div>
                         </div>
                         <button id="autoPlanBtn" class="mt-4 w-full bg-primary-500 hover:bg-primary-600 text-white font-medium py-2 px-4 rounded-md transition-colors">Auto-planear</button>
-                    </div>
 
-                    <!-- Panel derecho -->
+                        <h2 class="text-lg font-semibold text-primary-500 mt-6 mb-3">Materias pendientes</h2>
+                        <div class="materias-no-asignadas space-y-2 max-h-96 overflow-y-auto"></div>
+                    </div>
+<!-- Panel derecho -->
                     <div class="md:w-2/3 lg:w-3/4">
                         <div id="semestresContainer" class="space-y-4">
                             <!-- Semestres se generarán aquí -->

style.css

@@ -52,17 +52,17 @@ body {
     opacity: 0.5;
     background: #c8ebfb;
 }
-
-/* Estilo para las líneas de prerrequisitos */
-.prereq-line {
-    pointer-events: none;
+.materias-no-asignadas {
+    border: 1px solid #e5e7eb;
+    border-radius: 0.5rem;
+    padding: 0.5rem;
+    background-color: #f9fafb;
 }
 
-.materia-card {
-    position: relative;
-    z-index: 1;
+.materias-no-asignadas .materia-card {
+    background-color: white;
+    margin-bottom: 0.5rem;
 }
-
 /* Estilo para el botón de anclar */
 button[onclick^="fijarSemestre"] {
     cursor: pointer;