Update script.js

Con estas modificaciones, hemos implementado las mejoras solicitadas en el archivo style.css para dar estilo a las celdas editables y en el archivo script.js para hacer todas las celdas de la tabla editables, dar formato de tiempo a la columna de tiempo y agregar una suma total al final de la tabla que se actualiza dinámicamente cuando se modifican los tiempos.

script.js

@@ -25,3 +25,48 @@ botonExportarPDF.addEventListener("click", () => {
   // Mostrar el botón nuevamente después de la impresión
   botonExportarPDF.style.display = "block";
 });
+// Asegurémonos de que el DOM esté completamente cargado antes de ejecutar el código
+document.addEventListener("DOMContentLoaded", function() {
+  // Obtener todas las celdas editables
+  const celdasEditables = document.querySelectorAll("td[contenteditable='true']");
+
+  // Iterar sobre las celdas editables y agregar el atributo 'data-time' para identificar la columna de tiempo
+  celdasEditables.forEach(function(celda) {
+    celda.setAttribute("data-time", "true");
+  });
+
+  // Función para calcular la suma total del tiempo
+  function calcularSumaTotal() {
+    let sumaTotal = 0;
+
+    // Obtener todas las celdas de tiempo y sumar sus valores
+    const celdasTiempo = document.querySelectorAll("td[data-time='true']");
+    celdasTiempo.forEach(function(celda) {
+      const tiempo = parseInt(celda.textContent);
+      if (!isNaN(tiempo)) {
+        sumaTotal += tiempo;
+      }
+    });
+
+    // Mostrar la suma total en una nueva fila al final de la tabla
+    const tablaActividades = document.querySelector(".tabla-actividades tbody");
+    const filaSumaTotal = document.createElement("tr");
+    filaSumaTotal.id = "fila-suma-total";
+    filaSumaTotal.innerHTML = `
+      <td colspan="4">Suma Total:</td>
+      <td>${sumaTotal}</td>
+    `;
+    tablaActividades.appendChild(filaSumaTotal);
+  }
+
+  // Calcular la suma total al cargar la página
+  calcularSumaTotal();
+
+  // Escuchar cambios en las celdas de tiempo y recalcular la suma total
+  document.addEventListener("input", function(event) {
+    const elemento = event.target;
+    if (elemento.tagName === "TD" && elemento.getAttribute("data-time")) {
+      calcularSumaTotal();
+    }
+  });
+});