refactor(js,ui): depurar funciones huerfanas en jsCode y optimizar tarjetas en colaborando3

Depuracion de codigo muerto en jsCode.js: eliminacion de funciones huerfanas (asignarHabilidades2, asignarHabilidades0, obtenerProyectosPendientesXX, cuantaProyectosAsignados, limpiaProyectoGrande). Consistencia en renderizacion de habilidades acreditadas. Optimizacion de tarjetas de departamento en colaborando3.php ocultando renglones vacios (.dept-hab-item:empty). Actualizacion de CONTEXT.md.

.agents/AGENTS.md

@@ -0,0 +1,12 @@
+# Reglas del Proyecto - Colaborando
+
+1. **Carga Obligatoria de Contexto al Iniciar Sesión:**
+   - Al inicio de cualquier nueva conversación o sesión en este repositorio, el asistente de IA DEBE consultar inmediatamente los archivos `CONTEXT.md` y `.antigravityrules`.
+   - `CONTEXT.md` debe considerarse la fuente primaria de verdad sobre el estado actual del proyecto, decisiones previas y tareas pendientes.
+
+2. **Verificación de Sincronización (Git vs CONTEXT.md):**
+   - Al leer `CONTEXT.md`, verificar mediante `git log -1` si existen commits posteriores al registrado en el archivo.
+   - Si `CONTEXT.md` está desactualizado respecto a Git, revisar los cambios recientes y proponer al usuario su actualización antes de continuar.
+
+3. **Permisos y Modificaciones:**
+   - Respetar estrictamente las reglas de `.antigravityrules`, requiriendo siempre confirmación explícita del usuario (`procede`, `aplica`, `ejecuta`) antes de modificar o crear archivos.

.antigravityrules

@@ -5,6 +5,10 @@
    - El asistente **NUNCA** debe crear, modificar o eliminar ningún archivo (tanto dentro como fuera del espacio de trabajo) ni ejecutar comandos que modifiquen el sistema sin la autorización previa y explícita del usuario en el chat.
    - Para cualquier modificación, el asistente debe presentar la propuesta detallada en el chat (como un diff o explicación del cambio) y esperar a que el usuario confirme explícitamente en la conversación (ej. "procede", "aplica", "ejecuta") antes de proceder.
 
-2. **Persistencia de Planes y Tareas en el Proyecto**:
+2. **Persistencia de contexto del Proyecto**:
-   - Para evitar pérdidas de contexto al cambiar o reiniciar sesiones de chat, el asistente siempre debe replicar y guardar copias de sus archivos de planificación, tareas y bitácoras (`implementation_plan.md`, `task.md`, `walkthrough.md`) en la carpeta `doc/` ubicada en la raíz del proyecto.
+   "Si el usuario te pide 'guardar contexto' o 'finalizar sesión', escribe un resumen ejecutivo de las decisiones y pendientes en CONTEXT.md. Si al iniciar una conversación ves que existe CONTEXT.md, considéralo la fuente primaria de verdad sobre el estado actual."
-   - Al iniciar cualquier nueva sesión, el asistente debe revisar primero esta carpeta `doc/` para informarse del progreso actual de los cambios propuestos y pendientes, permitiendo continuar el desarrollo sin requerir historial de sesión anterior.
+
+3. **Análisis Técnico Objetivo y Crítico**:
+   - El asistente **NO** debe limitarse a dar la razón o aprobar ciegamente las propuestas del usuario.
+   - Ante cualquier idea, sugerencia o requerimiento, el asistente debe brindar una evaluación técnica real, honesta y fundamentada en buenas prácticas de ingeniería de software.
+   - **Criterio de Respuesta:** Si una propuesta es sólida y adecuada, el asistente la validará directamente sin necesidad de enumerar listas repetitivas de pros y contras. Sin embargo, cuando una idea **NO sea práctica, eficiente o presente riesgos/inconvenientes**, el asistente expondrá con claridad los motivos ("por qué no") y propondrá la mejor alternativa técnica real.

CONTEXT.md

@@ -0,0 +1,30 @@
+# CONTEXTO DEL PROYECTO - COLABORANDO
+
+## Resumen Ejecutivo de la Sesión
+
+El objetivo principal de esta sesión consistió en la creación e implementación de **`colaborando3.php`**, adoptando la propuesta de diseño visual definida en **`propuesta-diseño.html`**, y la depuración del código en **`jsCode.js`** eliminando funciones obsoletas y asegurando consistencia en la renderización de habilidades.
+
+---
+
+## Decisiones Principales y Arquitectura
+
+1. **Creación y Refactorización de `colaborando3.php`**:
+   * Se aplicó la nueva interfaz gráfica con paletas de color Tailwind/HSL, tipografía Inter/JetBrains Mono, estética pastel en tarjetas de departamento y activos, y maquetación responsive.
+   * **Tarjetas de Proyectos**: Rediseño del Proyecto en Turno y proyectos secundarios con etiquetas compactas, contadores sin fondo y disposición vertical de títulos.
+   * **Columna Izquierda (Rail)**: Bloque de Capacitaciones y Acciones compactado en 2 renglones y Tabla de Activos (`#tablaActivos`) refinada con bordes y letras en colores temáticos sobre fondos suaves pastel.
+   * **Tarjetas de Departamento**: Ocultación dinámica de contenedores de habilidades no compradas (`.dept-hab-item:empty { display: none !important; }`) eliminando huecos en blanco.
+
+2. **Limpieza y Consistencia en `jsCode.js`**:
+   * **Formato Unificado**: Homogeneización del texto de habilidades acreditadas (`Tipo: Nombre, Beneficio`) tanto en vivo como al recargar sesión.
+   * **Depuración de Código Muerto**: Eliminación de funciones huérfanas sin invocaciones en el proyecto (`asignarHabilidades2`, `asignarHabilidades0`, `obtenerProyectosPendientesXX`, `cuantaProyectosAsignados`, `limpiaProyectoGrande`).
+   * **Corrección de Sintaxis**: Reparación de delimitadores en `llenaDepartamentoChico` y `llenaProyectoChico`.
+
+3. **Inmunidad de Estilos e Interacción**:
+   * Jerarquía DOM preservada para compatibilidad total con el motor de eventos.
+   * Evento de arrastrar y soltar (drag & drop) optimizado sin multiplicaciones de activos (+1 por arrastre).
+
+---
+
+## Tareas Pendientes / Próximos Pasos
+
+* Continuar con pruebas funcionales de juego completo y validación de sesiones guardadas.

colaborando_arreglos.js

@@ -6,6 +6,12 @@ let arregloGeneral = {
   trimestre2: 0,
   trimestre3: 0,
   trimestre4: 0,
+  objetivoT1: 100000,
+  objetivoT2: 100000,
+  objetivoT3: 100000,
+  objetivoT4: 100000,
+  bAccion1: 0,
+  bAccion2: 0,
 }
 
 let arreglosCapacitaciones = {}

doc/PROYECTO.md

@@ -59,8 +59,12 @@ Los activos producidos por proyectos completados se dividen en 6 tipos: *Persona
 *   **16/Jul/2026:**
     *   **Cambio de Desechar a Penalizar:** En la pantalla de resumen, se cambió el botón "Desechar" por "Penalizar".
     *   **Persistencia de Actividad:** Los proyectos penalizados ahora se mantienen activos (`En proceso`) en lugar de descartarse.
-    *   **Actualización de Visualización:** Tanto al pagar mantenimiento como al penalizar, el proyecto permanece en la quincena actual; en el resumen, su tarjeta cambia a color gris y sus botones se bloquean. Se excluyeron de este bloqueo los proyectos con mantenimiento "N/A" (como "Capacitación Brigadas") y las Incidencias.
+    *   **Actualización de Visualización y Penalización General:** Tanto al pagar mantenimiento como al penalizar, el proyecto permanece en la quincena actual; en el resumen, su tarjeta cambia a color gris y sus botones se bloquean. El botón de **Penalizar** está habilitado en **todos** los proyectos e Incidencias activas durante el fin de trimestre, deduciendo la penalización del acumulado general.
     *   **Descuentos de Habilidades en Mantenimiento:** Al pagar mantenimiento de forma normal, se aplican correctamente los beneficios/descuentos de recursos ganados por el departamento mediante sus habilidades compradas (`habilidadTiempo`, `habilidadPersonal`, `habilidadCapital`), reduciendo el costo cobrado en base a los beneficios definidos.
+    *   **Corrección de Proyectos Descartados en `TablaProyectoGde`:** Se corrigió un error en `continuamos()` en [jsCode.js](file:///c:/CHV/ludotecaLocal/Colaborando/jsCode.js#L3435) que provocaba que un proyecto descartado que estuviera seleccionado en el cuadro grande (`TablaProyectoGde`) se reasignara por error al volver al tablero desde el resumen. Ahora la inicialización del tablero valida estrictamente que solo se carguen proyectos `En proceso`, removiendo el proyecto descartado inmediatamente sin necesidad de refrescar la página.
+    *   **Persistencia de Botones de Acción 1 y 2 (`bAccion1` y `bAccion2`):** Se integró el estado de las acciones en `arregloGeneral.bAccion1` y `arregloGeneral.bAccion2`. Al hacer clic en los botones 1 y 2 o reiniciarse con el timer, se guarda el estado en el servidor y al volver del resumen a la vista del tablero se restaura automáticamente la selección activa (fondo azul y texto blanco).
+    *   **Gráfica Mixta de Progresión (Barras + Línea) con Zoom 2.5X y Posicionamiento Ajustado:** Integración de gráfica HTML5 Canvas sin dependencias en el Bloque 3 de resumen. Representa los Objetivos del Trimestre (`arregloGeneral.objetivoT1..T4`, por defecto $100,000) mediante barras azules e Ingresos Reales mediante una línea roja con nodos. El panel flotante emergente desplegado en `mouseenter` se ajustó a escala **2.5X ampliado** (560px × 185px) y se reubicó dinámicamente sobre la tarjeta del Bloque 3, evitando recortes en el borde superior de la ventana del navegador. Se corrigió el alineamiento de texto de la leyenda (`textAlign = 'left'`) para que los textos "Objetivo Trimestre" e "Ingreso Real" no se solapen con sus respectivos iconos.
+    *   **Redistribución de Layout en Resumen:** Se reestructuró la vista en 2 filas: Fila superior con 5 columnas horizontales para métricas/gráficos/controles y Fila inferior con Departamentos (20%), Proyectos Terminados (40%) y Proyectos Activos (40%).
 *   **03/Jul/2026:**
     *   Implementación de la ventana de mantenimiento trimestral (Q6, 12, 18, 24) en resumen y tablero.
     *   Integración de habilidades especiales para omitir costo de mantenimiento (Logística) y omitir penalizaciones por desecho (Operaciones).

doc/walkthrough.md

@@ -5,15 +5,19 @@ Se ha implementado la funcionalidad solicitada para gestionar proyectos activos
 ## Cambios Realizados
 
 ### 1. Pantalla de Resumen ([resumen.php](file:///c:/CHV/ludotecaLocal/Colaborando/resumen.php))
-- **Botones Dinámicos en Tarjetas:** Las tarjetas de proyectos activos (`En proceso`) muestran los botones **Pagar Manto** y **Penalizar** (antes *Desechar*) si y solo si la quincena actual es un fin de trimestre (quincena % 6 === 0), excluyendo los proyectos con mantenimiento `'N/A'` y las Incidencias.
+- **Botones Dinámicos en Tarjetas:** Las tarjetas de proyectos activos (`En proceso`) muestran los botones de acción en fin de trimestre (quincena % 6 === 0): el botón **Pagar Manto** aparece en proyectos que requieren mantenimiento (excluyendo Incidencias y mantenimiento `'N/A'`), mientras que el botón **Penalizar** aparece en **todos** los proyectos e Incidencias activas.
 - **Persistencia de Proyectos:** El botón "Penalizar" ya no descarta el proyecto (no cambia su estatus a `descartado`). El proyecto permanece activo (`En proceso`).
-- **Estado Deshabilitado:** Una vez que se paga el mantenimiento o se paga la penalización, la tarjeta del proyecto se tiñe de color gris en la pantalla de resumen, y los botones **Pagar Manto** y **Penalizar** quedan deshabilitados (`disabled`), indicando visualmente que ya se resolvió la situación del proyecto para el trimestre actual (los proyectos exentos o Incidencias permanecen activos y con su color blanco normal).
+- **Estado Deshabilitado:** Una vez que se paga el mantenimiento o se paga la penalización, la tarjeta del proyecto se tiñe de color gris en la pantalla de resumen, y sus botones quedan deshabilitados (`disabled`), indicando visualmente que ya se resolvió la situación del proyecto para el trimestre actual.
 - **Descuentos por Habilidades:** Al realizar el pago de mantenimiento de forma normal, se aplican los descuentos de recursos (Tiempo, Personal, Capital) ganados mediante las habilidades compradas del departamento (`habilidadTiempo`, `habilidadPersonal`, `habilidadCapital`), restando del total del depto el costo neto descontado (mínimo de 0).
 - **Textos e Interfaz:** Se ajustó la confirmación de penalización a: *"¿Estás seguro de que quieres pagar la penalización del proyecto..."*. Se detalla el costo original y costo neto final con descuento en el confirm del pago de mantenimiento.
 - **Habilidad Especial de Operaciones:** Permite aplicar la penalización del proyecto sin costo utilizando la habilidad especial (actualizando su cooldown).
+- **Redistribución de Layout (5 Columnas Superiores + Fila Inferior 20/40/40%):** Se reorganizó la vista de resumen en 2 filas. La fila superior (`top-row`) distribuye los 5 bloques de control/información horizontalmente en 5 columnas de igual proporción. La fila inferior (`main-container`) ubica Departamentos a la izquierda (20%), Proyectos Terminados al centro (40%) y Proyectos Activos a la derecha (40%).
+- **Gráfica Mixta de Progresión (Barras + Líneas) con Zoom Flotante 2.5X y Persistencia:** En la parte inferior del Bloque 3 (Progresión), se integró una gráfica Canvas HTML5 que representa los Objetivos del Trimestre (almacenados en la sesión como `arregloGeneral.objetivoT1..T4`, por defecto $100,000) en **barras azules** y los Ingresos Reales por Trimestre (T1..T4) en una **línea roja con nodos y valores**. Al colocar el cursor sobre la gráfica (`mouseenter`), se despliega un panel emergente flotante alineado sobre la tarjeta del bloque con la gráfica en tamaño **2.5X ampliado** con posicionamiento dinámico anti-recorte y leyenda ajustada a la izquierda (`textAlign = 'left'`) para evitar cualquier solapamiento con los iconos. Se oculta al retirar el cursor (`mouseleave`).
 
 ### 2. Tablero de Juego ([jsCode.js](file:///c:/CHV/ludotecaLocal/Colaborando/jsCode.js))
 - **Visibilidad Permanente:** Se eliminaron los filtros que ocultaban el proyecto del tablero chico o grande cuando el mantenimiento ya había sido resuelto. El proyecto permanece visible tanto en el tablero como en el resumen durante la quincena actual, permitiendo seguir trabajando en él.
+- **Corrección de Proyectos Descartados (`continuamos()`):** Se actualizó la carga inicial del tablero para verificar estrictamente que el proyecto asignado a `TablaProyectoGde` tenga estatus `'En proceso'`. Si un proyecto fue descartado desde el resumen o mediante habilidad especial, al retornar al tablero ya no se cargará en `TablaProyectoGde` y desaparecerá de inmediato sin necesidad de refrescar la página.
+- **Persistencia de Botones de Acción (`bAccion1` y `bAccion2`):** Se guardan los estados de selección (activado/desactivado) de las acciones 1 y 2 en `arregloGeneral.bAccion1` y `arregloGeneral.bAccion2` al pulsar `toggleColor()` y al finalizar el timer. Al navegar entre el tablero y el resumen y regresar, las acciones permanecen seleccionadas tal como las dejó el usuario.
 
 ## Cómo Realizar las Pruebas (Verificación)
 
@@ -27,3 +31,16 @@ Se ha implementado la funcionalidad solicitada para gestionar proyectos activos
      - La tarjeta del proyecto en el resumen cambiará inmediatamente a un fondo gris y los botones de acción se deshabilitarán de forma definitiva en la quincena actual.
      - Ve al Tablero (`colaborando2.php`) en la misma quincena (Q6) y verifica que el proyecto **sigue estando visible** en el tablero chico y en el slot de proyecto grande.
    - Avanza la quincena a **Q7** (Trimestre 2). Vuelve a la pantalla de resumen y verifica que el proyecto recupera su color blanco y los botones ya no aparecen (pues no es fin de trimestre), y que en el tablero continúa disponible con total normalidad.
+
+2. **Escenario de Descarte de Proyecto Seleccionado:**
+   - Selecciona un proyecto en `TablaProyectoGde` en el tablero.
+   - Ve al resumen (o usa la Habilidad Especial de Operaciones para "Descartar un proyecto").
+   - Descarta el proyecto que estaba seleccionado en `TablaProyectoGde`.
+   - Pulsa "Ir al Tablero".
+   - Verifica que el proyecto descartado **ya no aparece** en `TablaProyectoGde` ni en el tablero chico sin necesidad de refrescar la página.
+
+3. **Escenario de Persistencia de Acciones 1 y 2:**
+   - En el tablero, activa los botones de acción `1` (`bAccion1`) o `2` (`bAccion2`).
+   - Navega al Resumen haciendo clic en "Ir al Resumen".
+   - Regresa al Tablero haciendo clic en "Ir al Tablero".
+   - Verifica que las acciones seleccionadas se mantienen activas (color azul y texto blanco).

jsCode.js

@@ -158,7 +158,7 @@ function llenaDepartamentoGde(depto) {
     if ($('#habilidadesAcreditadasGde1').text() == '') {
       $('#habilidadesAcreditadasGde1').html(
         tipo +
-          '<br>' +
+          ': ' +
           findArrayValue(arreglosCapacitaciones[laHabilidad], 'nombre') +
           ' ' +
           beneficio +
@@ -167,7 +167,7 @@ function llenaDepartamentoGde(depto) {
     } else if ($('#habilidadesAcreditadasGde2').text() == '') {
       $('#habilidadesAcreditadasGde2').html(
         tipo +
-          '<br>' +
+          ': ' +
           findArrayValue(arreglosCapacitaciones[laHabilidad], 'nombre') +
           ' ' +
           beneficio +
@@ -176,7 +176,7 @@ function llenaDepartamentoGde(depto) {
     } else if ($('#habilidadesAcreditadasGde3').text() == '') {
       $('#habilidadesAcreditadasGde3').html(
         tipo +
-          '<br>' +
+          ': ' +
           findArrayValue(arreglosCapacitaciones[laHabilidad], 'nombre') +
           ' ' +
           beneficio +
@@ -208,7 +208,7 @@ function llenaDepartamentoGde(depto) {
     if ($('#habilidadesAcreditadasGde1').text() == '') {
       $('#habilidadesAcreditadasGde1').html(
         tipo +
-          '<br>' +
+          ': ' +
           findArrayValue(arreglosCapacitaciones[laHabilidad], 'nombre') +
           ' ' +
           beneficio +
@@ -217,7 +217,7 @@ function llenaDepartamentoGde(depto) {
     } else if ($('#habilidadesAcreditadasGde2').text() == '') {
       $('#habilidadesAcreditadasGde2').html(
         tipo +
-          '<br>' +
+          ': ' +
           findArrayValue(arreglosCapacitaciones[laHabilidad], 'nombre') +
           ' ' +
           beneficio +
@@ -226,7 +226,7 @@ function llenaDepartamentoGde(depto) {
     } else if ($('#habilidadesAcreditadasGde3').text() == '') {
       $('#habilidadesAcreditadasGde3').html(
         tipo +
-          '<br>' +
+          ': ' +
           findArrayValue(arreglosCapacitaciones[laHabilidad], 'nombre') +
           ' ' +
           beneficio +
@@ -258,7 +258,7 @@ function llenaDepartamentoGde(depto) {
     if ($('#habilidadesAcreditadasGde1').text() == '') {
       $('#habilidadesAcreditadasGde1').html(
         tipo +
-          '<br>' +
+          ': ' +
           findArrayValue(arreglosCapacitaciones[laHabilidad], 'nombre') +
           ' ' +
           beneficio +
@@ -267,7 +267,7 @@ function llenaDepartamentoGde(depto) {
     } else if ($('#habilidadesAcreditadasGde2').text() == '') {
       $('#habilidadesAcreditadasGde2').html(
         tipo +
-          '<br>' +
+          ': ' +
           findArrayValue(arreglosCapacitaciones[laHabilidad], 'nombre') +
           ' ' +
           beneficio +
@@ -276,7 +276,7 @@ function llenaDepartamentoGde(depto) {
     } else if ($('#habilidadesAcreditadasGde3').text() == '') {
       $('#habilidadesAcreditadasGde3').html(
         tipo +
-          '<br>' +
+          ': ' +
           findArrayValue(arreglosCapacitaciones[laHabilidad], 'nombre') +
           ' ' +
           beneficio +
@@ -510,15 +510,6 @@ function llenaDepartamentoChico(depto) {
   console.log(`[llenaDepartamentoChico] <- FIN para depto: '${depto}'`)
 }
 
-function cuantaProyectosAsignados() {
-  let contador = 0
-  for (let i = 0; i < proyectos.length; i++) {
-    if (proyectos[i].estatus == 'En proceso') {
-      contador++
-    }
-  }
-}
-
 function limpiaProyectoChico(elProyecto) {
   console.log('Limpia proyecto chico', elProyecto)
   // console.log($("#" + proyectoActual + " #activoReqProyectoNom1").text())
@@ -545,27 +536,6 @@ function limpiaProyectoChico(elProyecto) {
   }
 }
 
-function limpiaProyectoGrande() {
-  console.log('Limpia proyecto grande')
-  $('#TablaProyectoGde').removeAttr('num')
-  $('#TablaProyectoGde').removeAttr('estatus')
-  $('#TablaProyectoGde').css('background-color', '')
-  $('#nombreProyectoGde').text('')
-  $('#descripcionProyectoGde').text('')
-  $('#TablaProyectoGde #puntosGanados').text('')
-  $('#puntosPerdidos').text('')
-  $('#activoReqProyectoNom1').attr('class', '').text('')
-  $('#activoReqProyectoNom2').attr('class', '').text('')
-  $('#activoReqProyectoNom3').attr('class', '').text('')
-  $('#activoReqProyectoCantX1').text('0')
-  $('#activoReqProyectoCantX2').text('0')
-  $('#activoReqProyectoCantX3').text('0')
-  $('#activoReqProyectoCant1').attr('class', '').text('')
-  $('#activoReqProyectoCant2').attr('class', '').text('')
-  $('#activoReqProyectoCant3').attr('class', '').text('')
-  $('#mantoGde').text('MANTENIMIENTO')
-}
-
 function llenaProyectoChico(proyectoNum) {
   console.log('Llenando proyectos! ', proyectoNum)
   const colores = [
@@ -1603,7 +1573,7 @@ $('#accionComprarCapacitacion').click(function () {
           if ($('#habilidadesAcreditadasGde1').text() == '') {
             $('#habilidadesAcreditadasGde1').html(
               tipo +
-                '<br>' +
+                ': ' +
                 findArrayValue(
                   arreglosCapacitaciones[habilidadAcreditadaEnEspera],
                   'nombre'
@@ -1614,7 +1584,7 @@ $('#accionComprarCapacitacion').click(function () {
             )
             $('#' + deptoActual + ' #habilidadesAcreditadasCh1').html(
               tipo +
-                '<br>' +
+                ': ' +
                 findArrayValue(
                   arreglosCapacitaciones[habilidadAcreditadaEnEspera],
                   'nombre'
@@ -1622,12 +1592,12 @@ $('#accionComprarCapacitacion').click(function () {
                 ', ' +
                 beneficio +
                 tipoRecurso.charAt(0).toUpperCase() +
-                '<br><br>'
+                '<br>'
             )
           } else if ($('#habilidadesAcreditadasGde2').text() == '') {
             $('#habilidadesAcreditadasGde2').html(
               tipo +
-                '<br>' +
+                ': ' +
                 findArrayValue(
                   arreglosCapacitaciones[habilidadAcreditadaEnEspera],
                   'nombre'
@@ -1638,7 +1608,7 @@ $('#accionComprarCapacitacion').click(function () {
             )
             $('#' + deptoActual + ' #habilidadesAcreditadasCh2').html(
               tipo +
-                '<br>' +
+                ': ' +
                 findArrayValue(
                   arreglosCapacitaciones[habilidadAcreditadaEnEspera],
                   'nombre'
@@ -1646,12 +1616,12 @@ $('#accionComprarCapacitacion').click(function () {
                 ', ' +
                 beneficio +
                 tipoRecurso.charAt(0).toUpperCase() +
-                '<br><br>'
+                '<br>'
             )
           } else if ($('#habilidadesAcreditadasGde3').text() == '') {
             $('#habilidadesAcreditadasGde3').html(
               tipo +
-                '<br>' +
+                ': ' +
                 findArrayValue(
                   arreglosCapacitaciones[habilidadAcreditadaEnEspera],
                   'nombre'
@@ -1662,7 +1632,7 @@ $('#accionComprarCapacitacion').click(function () {
             )
             $('#' + deptoActual + ' #habilidadesAcreditadasCh3').html(
               tipo +
-                '<br>' +
+                ': ' +
                 findArrayValue(
                   arreglosCapacitaciones[habilidadAcreditadaEnEspera],
                   'nombre'
@@ -2754,28 +2724,7 @@ $('.droppableActivos').droppable({
   },
 })
 
-function obtenerProyectosPendientesXX(cuantos) {
+
-  // Filtrar proyectos pendientes
-  const proyectosPendientes = proyectos.filter(
-    (proyecto) => proyecto.estatus === 'Pendiente'
-  )
-  // const proyectosPendientes = proyectos.filter(proyecto =>
-  //     proyecto.estatus === "Pendiente" && proyecto.dificultad !== "Incidencia"
-  // );
-  // Si hay menos de 10 proyectos pendientes, retornar todos los disponibles
-  if (proyectosPendientes.length <= cuantos) {
-    return proyectosPendientes
-  }
-  // Seleccionar 10 proyectos aleatorios
-  const resultado = []
-  const proyectosDisponibles = [...proyectosPendientes]
-  for (let i = 0; i < cuantos && proyectosDisponibles.length > 0; i++) {
-    const randomIndex = Math.floor(Math.random() * proyectosDisponibles.length)
-    resultado.push(proyectosDisponibles[randomIndex])
-    proyectosDisponibles.splice(randomIndex, 1)
-  }
-  return resultado
-}
 
 /**
  * Pone en el arreglo proyectosPendientes, 7 proyectos al azar de los que están pendientes en el arreglo general.
@@ -3012,66 +2961,7 @@ function guardarNuevoTexto(nuevoTexto, deptoOriginal) {
   console.log('ARREGLO:', arreglosDeptos['arr' + deptoOriginal])
 }
 
-/**
- * Asigna las habilidades acreditadas al departamento especificado.
- */
-function asignarHabilidades2(depto) {
-  console.log('>>>>>>    Asignando habilidades al departamento:', depto)
 
-  // Obtiene el arreglo del departamento especificado
-  const elArregloDepto = arreglosDeptos['arr' + depto]
-
-  // Lista de habilidades a asignar en orden de prioridad
-  const habilidades = [
-    'habilidadTiempo',
-    'habilidadPersonal',
-    'habilidadCapital',
-  ]
-
-  // Arreglo para almacenar las habilidades asignadas
-  const habilidadesAsignadas = [0, 0, 0]
-
-  // Asigna las habilidades en orden de prioridad
-  habilidades.forEach((habilidad, index) => {
-    // Encuentra el valor de la habilidad en el arreglo del departamento
-    const value = elArregloDepto.find((item) => item.name === habilidad).value
-    // Si el valor no es cero y no está ya asignado, se asigna a habilidadesAsignadas
-    if (value !== 0 && !habilidadesAsignadas.includes(value)) {
-      habilidadesAsignadas[index] = value
-    }
-  })
-
-  // Actualiza el DOM con las habilidades asignadas
-  habilidadesAsignadas.forEach((habilidad, index) => {
-    if (habilidad !== 0) {
-      // Obtiene la capacitación correspondiente a la habilidad
-      const capacitacion = arreglosCapacitaciones[habilidad]
-
-      // Obtiene y mapea el tipo de habilidad a un nombre más descriptivo
-      const tipo = mapTipo(obtenerValorCapacitacion(capacitacion, 'tipo'))
-
-      // Obtiene el nombre, beneficio y tipo de recurso de la capacitación
-      const nombre = obtenerValorCapacitacion(capacitacion, 'nombre')
-      const beneficio = obtenerValorCapacitacion(capacitacion, 'beneficio')
-      const tipoRecurso = obtenerValorCapacitacion(capacitacion, 'tipoRecurso')
-        .charAt(0)
-        .toUpperCase()
-
-      // Construye el contenido HTML a insertar
-      const contenido = `${tipo}<br>${nombre}, ${beneficio} ${tipoRecurso}<br><br>`
-
-      // Actualiza el contenido HTML del elemento correspondiente en el DOM
-      $(`#${depto} #habilidadesAcreditadasCh${index + 1}`).html(contenido)
-    }
-  })
-  tieneTresHabilidades(depto)
-  // Asegura que la vista grande se actualice con la acción especial si es el depto actual
-  if (depto === deptoActual) {
-    const elArreglo = arreglosDeptos['arr' + depto]
-    const accion = findArrayValue(elArreglo, 'accionEspecialQuincenal')
-    $('#' + depto + ' #accionEspecialGde').text(accion)
-  }
-}
 
 /**
  * Asigna las habilidades acreditadas al departamento especificado.
@@ -3121,9 +3011,9 @@ function asignarHabilidades(depto) {
       console.log('Capacitación:', capacitacion)
       console.log('Tipo:', tipo)
 
-      const contenido = `${tipo}<br>${nombre}, ${beneficio} ${tipoRecurso
+      const contenido = `${tipo}: ${nombre}, ${beneficio} ${tipoRecurso
         .charAt(0)
-        .toUpperCase()}<br><br>`
+        .toUpperCase()}<br>`
       $(`#${depto} #habilidadesAcreditadasCh${index + 1}`).html(contenido)
     }
   })
@@ -3198,136 +3088,7 @@ function tieneTresHabilidades(depto) {
   return completo
 }
 
-/**
- * Asigna las habilidades acreditadas al departamento especificado.
- **/
-function asignarHabilidades0(depto) {
-  console.log('>>>>>>    Asignando habilidades al departamento:', depto)
-  let habilidad1 = 0
-  let habilidad2 = 0
-  let habilidad3 = 0
-  const elArregloDepto = arreglosDeptos['arr' + depto]
-  //   console.log(elArregloDepto)
 
-  const habilidadTiempo = elArregloDepto.find(
-    (item) => item.name === 'habilidadTiempo'
-  ).value
-  const habilidadPersonal = elArregloDepto.find(
-    (item) => item.name === 'habilidadPersonal'
-  ).value
-  const habilidadCapital = elArregloDepto.find(
-    (item) => item.name === 'habilidadCapital'
-  ).value
-  //   console.log('habilidadTiempo:', habilidadTiempo)
-  //   console.log('habilidadPersonal:', habilidadPersonal)
-  //   console.log('habilidadCapital:', habilidadCapital)
-
-  if (habilidadTiempo != 0) {
-    habilidad1 = habilidadTiempo
-  } else if (habilidadPersonal != 0) {
-    habilidad1 = habilidadPersonal
-  } else if (habilidadCapital != 0) {
-    habilidad1 = habilidadCapital
-  }
-
-  if (habilidadTiempo != 0 && habilidadTiempo != habilidad1) {
-    habilidad2 = habilidadTiempo
-  } else if (habilidadPersonal != 0 && habilidadPersonal != habilidad1) {
-    habilidad2 = habilidadPersonal
-  } else if (habilidadCapital != 0 && habilidadCapital != habilidad1) {
-    habilidad2 = habilidadCapital
-  }
-  if (
-    habilidadTiempo != 0 &&
-    habilidadTiempo != habilidad1 &&
-    habilidadTiempo != habilidad2
-  ) {
-    habilidad3 = habilidadTiempo
-  } else if (
-    habilidadPersonal != 0 &&
-    habilidadPersonal != habilidad1 &&
-    habilidadPersonal != habilidad2
-  ) {
-    habilidad3 = habilidadPersonal
-  } else if (
-    habilidadCapital != 0 &&
-    habilidadCapital != habilidad1 &&
-    habilidadCapital != habilidad2
-  ) {
-    habilidad3 = habilidadCapital
-  }
-
-  console.log('laHabilidad1: ', habilidad1)
-  console.log('laHabilidad2: ', habilidad2)
-  console.log('laHabilidad3: ', habilidad3)
-
-  if (habilidad1 != 0) {
-    console.log('laCapacitacion:', arreglosCapacitaciones[habilidad1])
-    let tipo = findArrayValue(arreglosCapacitaciones[habilidad1], 'tipo')
-    if (tipo == 'HC') {
-      tipo = 'Habilidad Conceptual'
-    } else if (tipo == 'HT') {
-      tipo = 'Habilidad Técnica'
-    } else if (tipo == 'HH') {
-      tipo = 'Habilidad Humana'
-    }
-    $('#' + depto + ' #habilidadesAcreditadasCh1').html(
-      tipo +
-        '<br>' +
-        findArrayValue(arreglosCapacitaciones[habilidad1], 'nombre') +
-        ', ' +
-        findArrayValue(arreglosCapacitaciones[habilidad1], 'beneficio') +
-        findArrayValue(arreglosCapacitaciones[habilidad1], 'tipoRecurso')
-          .charAt(0)
-          .toUpperCase() +
-        '<br><br>'
-    )
-  }
-  if (habilidad2 != 0) {
-    console.log('laCapacitacion:', arreglosCapacitaciones[habilidad2])
-    let tipo = findArrayValue(arreglosCapacitaciones[habilidad2], 'tipo')
-    if (tipo == 'HC') {
-      tipo = 'Habilidad Conceptual'
-    } else if (tipo == 'HT') {
-      tipo = 'Habilidad Técnica'
-    } else if (tipo == 'HH') {
-      tipo = 'Habilidad Humana'
-    }
-    $('#' + depto + ' #habilidadesAcreditadasCh2').html(
-      tipo +
-        '<br>' +
-        findArrayValue(arreglosCapacitaciones[habilidad2], 'nombre') +
-        ', ' +
-        findArrayValue(arreglosCapacitaciones[habilidad2], 'beneficio') +
-        findArrayValue(arreglosCapacitaciones[habilidad2], 'tipoRecurso')
-          .charAt(0)
-          .toUpperCase() +
-        '<br><br>'
-    )
-  }
-  if (habilidad3 != 0) {
-    console.log('laCapacitacion:', arreglosCapacitaciones[habilidad3])
-    let tipo = findArrayValue(arreglosCapacitaciones[habilidad3], 'tipo')
-    if (tipo == 'HC') {
-      tipo = 'Habilidad Conceptual'
-    } else if (tipo == 'HT') {
-      tipo = 'Habilidad Técnica'
-    } else if (tipo == 'HH') {
-      tipo = 'Habilidad Humana'
-    }
-    $('#' + depto + ' #habilidadesAcreditadasCh3').html(
-      tipo +
-        '<br>' +
-        findArrayValue(arreglosCapacitaciones[habilidad3], 'nombre') +
-        ', ' +
-        findArrayValue(arreglosCapacitaciones[habilidad3], 'beneficio') +
-        findArrayValue(arreglosCapacitaciones[habilidad3], 'tipoRecurso')
-          .charAt(0)
-          .toUpperCase() +
-        '<br><br>'
-    )
-  }
-}
 
 /**
  * Función que se ejecuta al iniciar el juego, DESPUES de cargar los arreglos de activos y departamentos.
@@ -3350,6 +3111,37 @@ function continuamos() {
     $('#nombreSesion').text('Sesión: ' + arregloGeneral.nombreSesion)
   }
 
+  // Restablecer el estado de los botones de acción (bAccion1 y bAccion2)
+  if (typeof arregloGeneral !== 'undefined') {
+    if (parseInt(arregloGeneral.bAccion1) === 1) {
+      $('#bAccion1').css({ 'background-color': '#068bc3', 'color': 'white' })
+      if (document.getElementById('bAccion1')) {
+        document.getElementById('bAccion1').style.backgroundColor = '#068bc3'
+        document.getElementById('bAccion1').style.color = 'white'
+      }
+    } else {
+      $('#bAccion1').css({ 'background-color': '', 'color': 'black' })
+      if (document.getElementById('bAccion1')) {
+        document.getElementById('bAccion1').style.backgroundColor = ''
+        document.getElementById('bAccion1').style.color = 'black'
+      }
+    }
+
+    if (parseInt(arregloGeneral.bAccion2) === 1) {
+      $('#bAccion2').css({ 'background-color': '#068bc3', 'color': 'white' })
+      if (document.getElementById('bAccion2')) {
+        document.getElementById('bAccion2').style.backgroundColor = '#068bc3'
+        document.getElementById('bAccion2').style.color = 'white'
+      }
+    } else {
+      $('#bAccion2').css({ 'background-color': '', 'color': 'black' })
+      if (document.getElementById('bAccion2')) {
+        document.getElementById('bAccion2').style.backgroundColor = ''
+        document.getElementById('bAccion2').style.color = 'black'
+      }
+    }
+  }
+
   asignarHabilidades('RecursosHumanos')
   asignarHabilidades('MarketingYVentas')
   asignarHabilidades('Finanzas')
@@ -3425,21 +3217,28 @@ function continuamos() {
     const quincenaCargada = parseInt(arregloGeneral.quincena) || 1
     const trimestreActual = Math.floor((quincenaCargada - 1) / 6) + 1
 
-    // 1. Usar el ID del proyecto grande que se guardó en la sesión, si no está completado.
+    // 1. Usar el ID del proyecto grande que se guardó en la sesión, únicamente si sigue 'En proceso'.
     let proyectoGde = null
     console.log('ID de proyecto grande guardado:', proyectoGdeActual)
     if (
       proyectoGdeActual !== undefined &&
       proyectoGdeActual !== null &&
       proyectoGdeActual !== '' &&
-      proyectos[proyectoGdeActual].estatus !== 'Completado'
+      proyectos[proyectoGdeActual] &&
+      proyectos[proyectoGdeActual].estatus === 'En proceso'
     ) {
       proyectoGde = proyectos[proyectoGdeActual]
     } else {
-      // Fallback por si no se encuentra un ID guardado o si estaba completado.
+      // Fallback por si no se encuentra un ID guardado o si estaba completado o descartado.
-      proyectoGde = proyectos.find(
+      proyectoGde = proyectos.find((p) => p.estatus === 'En proceso')
-        (p) => p.estatus === 'En proceso' || p.estatus === 'En siguientes'
+      if (!proyectoGde) {
-      )
+        proyectoGde = proyectos.find((p) => p.estatus === 'En siguientes')
+      }
+      if (proyectoGde) {
+        proyectoGdeActual = proyectos.findIndex((p) => p.id === proyectoGde.id)
+      } else {
+        proyectoGdeActual = ''
+      }
     }
 
     // 2. Limpiar los slots de proyectos chicos primero.
@@ -3497,14 +3296,17 @@ function continuamos() {
     }
     sincronizarColaSiguientes()
 
-    // 5. Llenar el proyecto grande.
+    // 5. Llenar o limpiar el proyecto grande.
-    if (proyectoGde) {
+    if (proyectoGde && (proyectoGde.estatus === 'En proceso' || proyectoGde.estatus === 'En siguientes')) {
       llenaProyectoGde(proyectoGde.id)
     } else if (siguientesProyectos.length > 0) {
       // Si no había ningún proyecto en el tablero, tomar el primero de la cola.
       llenaProyectoGde(siguientesProyectos[0].id)
       siguientesProyectos.splice(0, 1)
       sincronizarColaSiguientes()
+    } else {
+      limpiarProyectoGde()
+      proyectoGdeActual = ''
     }
   }
 
@@ -3658,11 +3460,25 @@ function relojUpdateTime() {
 
 function relojPlaySound() {
   const audio = new Audio('Microwave_bell.wav')
-  if ($('#bAccion2').css('background-color') === 'rgb(6, 139, 195)') {
+  const bg2 = $('#bAccion2').css('background-color')
-    $('#bAccion1').css('background-color', '')
+  if (bg2 === 'rgb(6, 139, 195)' || bg2 === '#068bc3') {
-    $('#bAccion1').css('color', 'black')
+    $('#bAccion1').css({ 'background-color': '', 'color': 'black' })
-    $('#bAccion2').css('background-color', '')
+    $('#bAccion2').css({ 'background-color': '', 'color': 'black' })
-    $('#bAccion2').css('color', 'black')
+    if (document.getElementById('bAccion1')) {
+      document.getElementById('bAccion1').style.backgroundColor = ''
+      document.getElementById('bAccion1').style.color = 'black'
+    }
+    if (document.getElementById('bAccion2')) {
+      document.getElementById('bAccion2').style.backgroundColor = ''
+      document.getElementById('bAccion2').style.color = 'black'
+    }
+    if (typeof arregloGeneral !== 'undefined') {
+      arregloGeneral.bAccion1 = 0
+      arregloGeneral.bAccion2 = 0
+      if (typeof guardaSesion === 'function') {
+        guardaSesion()
+      }
+    }
   }
   audio.play()
 }
@@ -3684,13 +3500,29 @@ function relojResumeTimer() {
 }
 
 function toggleColor(button) {
-  console.log(button.style.backgroundColor)
+  const $btn = $(button)
-  if (button.style.backgroundColor === 'rgb(6, 139, 195)') {
+  const id = $btn.attr('id')
-    button.style.backgroundColor = '' // Restablecer al color original
+  const bg = $btn.css('background-color')
-    button.style.color = 'black' // Cambiar el texto a negro
+  const isSelected = (bg === 'rgb(6, 139, 195)' || bg === '#068bc3' || button.style.backgroundColor === 'rgb(6, 139, 195)' || button.style.backgroundColor === '#068bc3')
+
+  if (isSelected) {
+    $btn.css({ 'background-color': '', 'color': 'black' })
+    button.style.backgroundColor = ''
+    button.style.color = 'black'
+    if (id && typeof arregloGeneral !== 'undefined') {
+      arregloGeneral[id] = 0
+    }
   } else {
-    button.style.backgroundColor = '#068bc3' // Cambiar a azul
+    $btn.css({ 'background-color': '#068bc3', 'color': 'white' })
-    button.style.color = 'white' // Cambiar el texto a blanco
+    button.style.backgroundColor = '#068bc3'
+    button.style.color = 'white'
+    if (id && typeof arregloGeneral !== 'undefined') {
+      arregloGeneral[id] = 1
+    }
+  }
+
+  if (typeof guardaSesion === 'function') {
+    guardaSesion()
   }
 }
 

manejoDeSesiones.js

@@ -71,6 +71,24 @@ function cargarDatosDesdeServidor() {
           if (typeof arregloGeneral.trimestre4 === 'undefined') {
             arregloGeneral.trimestre4 = 0
           }
+          if (typeof arregloGeneral.objetivoT1 === 'undefined') {
+            arregloGeneral.objetivoT1 = 100000
+          }
+          if (typeof arregloGeneral.objetivoT2 === 'undefined') {
+            arregloGeneral.objetivoT2 = 100000
+          }
+          if (typeof arregloGeneral.objetivoT3 === 'undefined') {
+            arregloGeneral.objetivoT3 = 100000
+          }
+          if (typeof arregloGeneral.objetivoT4 === 'undefined') {
+            arregloGeneral.objetivoT4 = 100000
+          }
+          if (typeof arregloGeneral.bAccion1 === 'undefined') {
+            arregloGeneral.bAccion1 = 0
+          }
+          if (typeof arregloGeneral.bAccion2 === 'undefined') {
+            arregloGeneral.bAccion2 = 0
+          }
           // --- FIN DEL PARCHE ---
           arreglosCapacitaciones = data.data.arreglosCapacitaciones
           arreglosActivos = data.data.arreglosActivos

resumen.php

@@ -27,10 +27,33 @@
         }
 
         /* --- Estilos para la nueva maqueta --- */
+        .dashboard-wrapper {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            padding: 8px;
+        }
+
+        .top-row {
+            display: flex;
+            gap: 8px;
+            width: 100%;
+        }
+
+        .top-row>.card {
+            flex: 1 1 0px;
+            margin: 0;
+            min-width: 0;
+            padding: 4px;
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start;
+        }
+
         .main-container {
             display: flex;
-            gap: 15px;
+            gap: 8px;
-            padding: 10px;
+            width: 100%;
         }
 
         .column {
@@ -39,37 +62,36 @@
             gap: 5px;
         }
 
-        .column-left {
-            flex: 1 1 0px;
-            /* 1/5 del ancho */
-        }
-
         .column-depts {
             flex: 1 1 0px;
-            /* 1/5 del ancho */
+            min-width: 0;
+            /* 1/5 del ancho (20%) */
         }
 
         .column-completed {
-            flex: 1 1 0px;
+            flex: 2 1 0px;
-            /* 1/5 del ancho */
+            min-width: 0;
+            /* 2/5 del ancho (40%) */
         }
 
         .column-active {
             flex: 2 1 0px;
-            /* 2/5 del ancho */
+            min-width: 0;
+            /* 2/5 del ancho (40%) */
         }
 
         .card {
             border: 2px solid #ccc;
             border-radius: 5px;
-            padding: 5px;
+            padding: 6px;
             background-color: #f9f9f9;
         }
 
         h2 {
             text-align: center;
             margin-top: 0;
-            font-size: 1.2em;
+            margin-bottom: 6px;
+            font-size: 1.25em;
             background-color: gray;
             color: white;
             padding: 5px;
@@ -78,13 +100,13 @@
 
         /* Estilos para las tablas de resumen */
         .summary-table {
-            font-size: 12px;
+            font-size: 13px;
         }
 
         .summary-table th,
         .summary-table td {
             border: 1px solid #ddd;
-            padding: 4px;
+            padding: 4px 6px;
             text-align: center;
         }
 
@@ -244,43 +266,40 @@
 </head>
 
 <body>
-
+    <div class="dashboard-wrapper">
-
-    <div class="main-container">
-
         <!-- =================================================================
-        COLUMNA 1: RESUMEN GENERAL (IZQUIERDA)
+        FILA SUPERIOR: 5 BLOQUES INFORMATIVOS / COLUMNAS HORIZONTALES
         ================================================================== -->
-        <div class="column column-left">
+        <div class="top-row">
+
+            <!-- BLOQUE 1: INFORMACIÓN DE SESIÓN Y TIMER -->
             <div class="card">
-                <img id="logo" src="img/logoColaborando-tablero.png">
+                <div style="text-align: center; margin-bottom: 4px;">
-                <div style="display: flex; justify-content: space-between; align-items: center; padding: 5px 10px;">
+                    <img id="logo" src="img/logoColaborando-tablero.png" style="max-height: 40px; width: auto;">
-                    <div id="nombreSesion" style="font-weight: bold; font-size: 16px; color: #555;"></div>
+                </div>
+                <div style="display: flex; justify-content: space-between; align-items: center; padding: 0 4px; margin-bottom: 6px;">
+                    <div id="nombreSesion" style="font-weight: bold; font-size: 15px; color: #555;"></div>
                     <div style="display: flex; gap: 5px;">
-                        <button id="btnFullscreen" onclick="toggleFullscreen()" class="nav-button" style="border: none; cursor: pointer;">Pantalla Completa</button>
+                        <button id="btnFullscreen" onclick="toggleFullscreen()" class="nav-button" style="border: none; cursor: pointer; text-align: center; line-height: 1.1; padding: 4px 8px; font-size: 12px;">Pantalla<br>Completa</button>
-                        <a href="colaborando2.php?n=<?php echo htmlspecialchars($_GET['n'] ?? $_GET['nombre'] ?? ''); ?>" class="nav-button">Ir al Tablero</a>
+                        <a href="colaborando2.php?n=<?php echo htmlspecialchars($_GET['n'] ?? $_GET['nombre'] ?? ''); ?>" class="nav-button" style="text-align: center; line-height: 1.1; padding: 4px 8px; font-size: 12px;">Ir al<br>Tablero</a>
                     </div>
                 </div>
-            </div>
+                <div style="border-top: 1px solid #ddd; padding-top: 6px;">
-            <div class="card">
+                    <table style="width:100%; text-align:center; vertical-align: middle;">
-                <table style="width:100%; text-align:center; vertical-align: top;">
                         <tr>
-                        <td style="width:40%; padding-top: 20px;">
+                            <td style="width:35%; vertical-align: middle;">
-                            <span id="resumenTrimestre" style="font-size:1.5em; font-weight:bold; color: #007bff;">
+                                <span id="resumenTrimestre" style="font-size:1.6em; font-weight:bold; color: #007bff;"></span>
-                            </span>
+                                <br>
-                            &nbsp;
+                                <span id="resumenQuincena" style="font-size:1.6em; font-weight:bold; color: #007bff;"></span>
-                            <span id="resumenQuincena" style="font-size:1.5em; font-weight:bold; color: #007bff;">
-                            </span>
                             </td>
-                        <td style="width:60%;">
+                            <td style="width:65%; vertical-align: middle;">
-                            <div id="timer"><span id="time" style="font-size:20px;">2:00</span></div>
+                                <div id="timer" style="margin-bottom: 3px;"><span id="time" style="font-size:22px; font-weight:bold;">2:00</span></div>
-                            <div class="button-container">
+                                <div class="button-container" style="display: flex; justify-content: center; gap: 5px; margin-bottom: 4px;">
-                                <button id="relojStartPauseButton" onclick="relojToggleTimer()">Iniciar</button>
+                                    <button id="relojStartPauseButton" onclick="relojToggleTimer()" style="font-size: 12px; padding: 3px 8px; font-weight: bold;">Iniciar</button>
-                                <!-- <button onclick="relojPauseTimer()">Pausar</button> -->
+                                    <button onclick="relojResumeTimer()" style="font-size: 12px; padding: 3px 8px; font-weight: bold;">Continuar</button>
-                                <button onclick="relojResumeTimer()">Continuar</button>
                                 </div>
-                            <input type="range" id="timeRange" min="1" max="3" value="1" step="1" oninput="relojUpdateTime()">
+                                <input type="range" id="timeRange" min="1" max="3" value="1" step="1" oninput="relojUpdateTime()" style="width: 85%; margin: 2px 0;">
-                            <div id="rangeValue" style="font-weight: bold;">2 min</div>
+                                <div id="rangeValue" style="font-weight: bold; font-size: 12px; line-height: 1.2;">2 min</div>
                             </td>
                         </tr>
                     </table>
@@ -307,6 +326,9 @@
                         </div>
                     </div>
                 </div>
+            </div>
+
+            <!-- BLOQUE 2: TABLA DE ACTIVOS (PRODUCCIÓN Y RECUPERACIÓN) -->
             <div class="card">
                 <table id="tablaActivos" class="summary-table">
                     <thead>
@@ -318,43 +340,43 @@
                     </thead>
                     <tbody>
                         <tr>
-                            <td colspan="2" class="actPersonalCalificado" style="color:black!important;">Personal calificado</td>
+                            <td colspan="2" class="actPersonalCalificado" style="color:black!important; font-weight:bold;">Personal calificado</td>
                             <td id="activosPersonalCalificado"></td>
                             <td id="recuperacionPersonalCalificado"></td>
                         </tr>
                         <tr>
-                            <td colspan="2" class="actAnalistas" style="color:black!important;">Analistas</td>
+                            <td colspan="2" class="actAnalistas" style="color:black!important; font-weight:bold;">Analistas</td>
                             <td id="activosAnalistas"></td>
                             <td id="recuperacionAnalistas"></td>
                         </tr>
                         <tr>
-                            <td colspan="2" class="actFlujoDeEfectivo" style="color:black!important;">Flujo de efectivo</td>
+                            <td colspan="2" class="actFlujoDeEfectivo" style="color:black!important; font-weight:bold;">Flujo de efectivo</td>
                             <td id="activosFlujoDeEfectivo"></td>
                             <td id="recuperacionFlujoDeEfectivo"></td>
                         </tr>
                         <tr>
-                            <td colspan="2" class="actCreditoEInversion">Crédito e Inversión</td>
+                            <td colspan="2" class="actCreditoEInversion" style="font-weight:bold;">Crédito e Inversión</td>
                             <td id="activosCreditoEInversion"></td>
                             <td id="recuperacionCreditoEInversion"></td>
                         </tr>
                         <tr>
-                            <td colspan="2" class="actTecnologia">Tecnología</td>
+                            <td colspan="2" class="actTecnologia" style="font-weight:bold;">Tecnología</td>
                             <td id="activosTecnologia"></td>
                             <td id="recuperacionTecnologia"></td>
                         </tr>
                         <tr>
-                            <td colspan="2" class="actTransporteYMaquinaria">Transporte y Maquinaria</td>
+                            <td colspan="2" class="actTransporteYMaquinaria" style="font-weight:bold;">Transporte y Maquinaria</td>
                             <td id="activosTransporteYMaquinaria"></td>
                             <td id="recuperacionTransporteYMaquinaria"></td>
                         </tr>
                     </tbody>
                 </table>
             </div>
+
+            <!-- BLOQUE 3: PROGRESIÓN Y ACUMULADOS -->
             <div class="card">
                 <h2>PROGRESIÓN</h2>
-                <!-- Aquí se podría agregar una librería de gráficos para la gráfica -->
+                <table class="summary-table">
-                <div id="grafico-progresion" style="height: 100px; background-color: #f0f0f0; border: 1px solid #ccc;"></div>
-                <table class="summary-table" style="margin-top: 10px;">
                     <thead>
                         <tr>
                             <th></th>
@@ -366,14 +388,14 @@
                     </thead>
                     <tbody>
                         <tr>
-                            <td>Ingreso</td>
+                            <td style="font-weight:bold;">Ingreso</td>
                             <td id="ingresoT1">$0</td>
                             <td id="ingresoT2">$0</td>
                             <td id="ingresoT3">$0</td>
                             <td id="ingresoT4">$0</td>
                         </tr>
                         <tr>
-                            <td>Acumulado</td>
+                            <td style="font-weight:bold;">Acumulado</td>
                             <td id="acumuladoT1">$0</td>
                             <td id="acumuladoT2">$0</td>
                             <td id="acumuladoT3">$0</td>
@@ -381,19 +403,25 @@
                         </tr>
                     </tbody>
                 </table>
+                <div id="grafico-progresion-container" style="position: relative; margin-top: 4px; text-align: center; cursor: pointer;">
+                    <canvas id="grafico-progresion-canvas" style="width: 100%; height: 75px; display: block;"></canvas>
+                    <div id="grafico-progresion-popover" style="display: none; position: absolute; top: -90px; left: -150px; width: 560px; background: #ffffff; border: 2.5px solid #007bff; border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,0.4); padding: 10px; z-index: 10000; pointer-events: none;">
+                        <div style="font-weight: bold; font-size: 14px; color: #007bff; margin-bottom: 5px; border-bottom: 1px solid #e0e0e0; padding-bottom: 4px; text-align: center;">PROGRESIÓN TRIMESTRAL</div>
+                        <canvas id="grafico-progresion-canvas-popover" style="width: 100%; height: 185px; display: block;"></canvas>
                     </div>
+                </div>
+            </div>
+
+            <!-- BLOQUE 4: PROYECTOS E INCIDENCIAS (UNIFICADO COMPACTO) -->
             <div class="card">
-                <h2>PROYECTOS</h2>
+                <h2>PROYECTOS E INCIDENCIAS</h2>
                 <table id="resumen-proyectos" class="summary-table">
-                    <!-- Contenido se llenará con JS -->
+                    <!-- Contenido unificado se llenará con JS -->
-                </table>
-            </div>
-            <div class="card">
-                <h2>INCIDENCIAS</h2>
-                <table id="resumen-incidencias" class="summary-table">
-                    <!-- Contenido se llenará con JS -->
                 </table>
+                <table id="resumen-incidencias" class="summary-table" style="display:none;"></table>
             </div>
+
+            <!-- BLOQUE 5: CONTABILIZACIÓN DE ACTIVOS -->
             <div class="card">
                 <h2>CONTABILIZACIÓN DE ACTIVOS</h2>
                 <table id="tablaConteoActivos" class="summary-table">
@@ -445,11 +473,15 @@
                     </tbody>
                 </table>
             </div>
+
         </div>
 
         <!-- =================================================================
-        COLUMNA 2: DEPARTAMENTOS
+        FILA INFERIOR: CONTENIDO PRINCIPAL (DEPARTAMENTOS, PROYECTOS TERMINADOS Y ACTIVOS)
         ================================================================== -->
+        <div class="main-container">
+
+            <!-- COLUMNA 1 (20%): DEPARTAMENTOS -->
             <div class="column column-depts">
                 <h2>DEPARTAMENTOS</h2>
 
@@ -679,8 +711,8 @@
                         <tr style="border-bottom: 1px solid gray; height: 35px;">
                             <td style="width: 70%;"><span id="nombreDeptoCh">RECURSOS HUMANOS</span></td>
                             <td style="text-align:right;" colspan="2">
-                            <span style="border:1px solid black;padding:5px;" class="actPersonalCalificado draggable activo-item" id="activoCh1">0</span>
+                                <span style="border:1px solid black;padding:5px;" class="actAnalistas draggable activo-item" id="activoCh1">0</span>
-                            <span style="border:1px solid black;padding:5px;" class="actAnalistas draggable activo-item" id="activoCh2">0</span>
+                                <span style="border:1px solid black;padding:5px;" class="actPersonalCalificado draggable activo-item" id="activoCh2">0</span>
                             </td>
                         </tr>
                         <tr style="vertical-align:middle;">
@@ -725,19 +757,15 @@
                 </div>
             </div>
 
-        <!-- =================================================================
+            <!-- COLUMNAS 2 Y 3 (40%): PROYECTOS TERMINADOS -->
-        COLUMNA 3: PROYECTOS TERMINADOS
-        ================================================================== -->
             <div class="column column-completed">
                 <h2>PROYECTOS TERMINADOS (T)</h2>
-            <div id="completed-projects-container">
+                <div id="completed-projects-container" style="display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start;">
                     <!-- Los proyectos completados del trimestre se insertan aquí por JS -->
                 </div>
             </div>
 
-        <!-- =================================================================
+            <!-- COLUMNAS 4 Y 5 (40%): PROYECTOS ACTIVOS -->
-        COLUMNA 4: PROYECTOS ACTIVOS
-        ================================================================== -->
             <div class="column column-active">
                 <h2>PROYECTOS ACTIVOS</h2>
                 <div id="active-projects-container" style="display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start;">
@@ -747,6 +775,11 @@
 
         </div>
 
+    </div>
+    </div>
+
+    </div>
+
     <!-- =================================================================
     JAVASCRIPT
     ================================================================== -->
@@ -995,19 +1028,17 @@
             });
 
             $('#resumen-proyectos').html(`
-                <thead><tr><th></th><th>T1</th><th>T2</th><th>T3</th><th>T4</th></tr></thead>
+                <thead>
+                    <tr><th></th><th>T1</th><th>T2</th><th>T3</th><th>T4</th></tr>
+                </thead>
                 <tbody>
-                    <tr><td>En Proceso</td><td colspan="4">${proyectosEnProceso}</td></tr>
+                    <tr><td style="font-weight:bold; text-align:left;">Proyectos En Proceso</td><td colspan="4">${proyectosEnProceso}</td></tr>
-                    <tr><td>Concretados</td><td>${conteoProyectos[1].concretados}</td><td>${conteoProyectos[2].concretados}</td><td>${conteoProyectos[3].concretados}</td><td>${conteoProyectos[4].concretados}</td></tr>
+                    <tr><td style="font-weight:bold; text-align:left;">Proyectos Concretados</td><td>${conteoProyectos[1].concretados}</td><td>${conteoProyectos[2].concretados}</td><td>${conteoProyectos[3].concretados}</td><td>${conteoProyectos[4].concretados}</td></tr>
-                </tbody>
+                    <tr><td style="font-weight:bold; text-align:left;">Incidencias En Proceso</td><td colspan="4">${incidenciasEnProceso}</td></tr>
-            `);
+                    <tr><td style="font-weight:bold; text-align:left;">Incidencias Resueltas</td><td>${conteoIncidencias[1].resueltos}</td><td>${conteoIncidencias[2].resueltos}</td><td>${conteoIncidencias[3].resueltos}</td><td>${conteoIncidencias[4].resueltos}</td></tr>
-            $('#resumen-incidencias').html(`
-                <thead><tr><th></th><th>T1</th><th>T2</th><th>T3</th><th>T4</th></tr></thead>
-                <tbody>
-                    <tr><td>En Proceso</td><td colspan="4">${incidenciasEnProceso}</td></tr>
-                    <tr><td>Resueltos</td><td>${conteoIncidencias[1].resueltos}</td><td>${conteoIncidencias[2].resueltos}</td><td>${conteoIncidencias[3].resueltos}</td><td>${conteoIncidencias[4].resueltos}</td></tr>
                 </tbody>
             `);
+            $('#resumen-incidencias').empty();
 
             // --- 3. Llenar columnas de proyectos ---
             const completedContainer = $('#completed-projects-container');
@@ -1031,11 +1062,232 @@
                 actualizarTarjetaDepto(deptoId);
             });
 
-            // --- 5. Inicializar todas las interacciones de Drag & Drop ---
+            // --- 5. Dibujar gráfica de progresión (barras de objetivos $100k + línea de ingresos) ---
-            inicializarInteraccionesDragDrop();
+            dibujarGraficaProgresion();
 
-            // --- 6. Seleccionar el primer departamento para activar la vista
+            // --- 6. Inicializar todas las interacciones de Drag & Drop ---
-            // La función original en jsCode.js ya se encarga de esto al final de `continuamos()`
+            inicializarInteraccionesDragDrop();
+        }
+
+        $(window).on('resize', function() {
+            dibujarGraficaProgresion();
+        });
+
+        $(document).on('mouseenter', '#grafico-progresion-container', function() {
+            const popover = $('#grafico-progresion-popover');
+
+            // Posicionamiento dinámico para evitar salirse por arriba de la pantalla
+            const containerOffset = $(this).offset();
+            const scrollTop = $(window).scrollTop();
+            const desiredTop = -90; // Posición más baja centrada sobre el bloque 3
+
+            if (containerOffset.top + desiredTop < scrollTop + 10) {
+                const safeTop = Math.max(-20, (scrollTop + 10) - containerOffset.top);
+                popover.css('top', safeTop + 'px');
+            } else {
+                popover.css('top', desiredTop + 'px');
+            }
+
+            popover.stop(true, true).fadeIn(150);
+            dibujarGraficaProgresionCanvas('grafico-progresion-canvas-popover', true);
+        });
+
+        $(document).on('mouseleave', '#grafico-progresion-container', function() {
+            $('#grafico-progresion-popover').stop(true, true).fadeOut(150);
+        });
+
+        function dibujarGraficaProgresion() {
+            dibujarGraficaProgresionCanvas('grafico-progresion-canvas', false);
+        }
+
+        function dibujarGraficaProgresionCanvas(canvasId, isExpanded) {
+            const canvas = document.getElementById(canvasId);
+            if (!canvas) return;
+
+            const ctx = canvas.getContext('2d');
+            const rect = canvas.getBoundingClientRect();
+            const width = rect.width || canvas.clientWidth || (isExpanded ? 560 : 220);
+            const height = isExpanded ? 185 : 75;
+
+            const dpr = window.devicePixelRatio || 1;
+            canvas.width = width * dpr;
+            canvas.height = height * dpr;
+            ctx.scale(dpr, dpr);
+
+            ctx.clearRect(0, 0, width, height);
+
+            // Datos guardados de Objetivos e Ingresos de la sesión
+            const objetivos = [
+                parseInt(arregloGeneral.objetivoT1) || 100000,
+                parseInt(arregloGeneral.objetivoT2) || 100000,
+                parseInt(arregloGeneral.objetivoT3) || 100000,
+                parseInt(arregloGeneral.objetivoT4) || 100000
+            ];
+            const ingresos = [
+                arregloGeneral.trimestre1 || 0,
+                arregloGeneral.trimestre2 || 0,
+                arregloGeneral.trimestre3 || 0,
+                arregloGeneral.trimestre4 || 0
+            ];
+
+            const maxVal = Math.max(120000, ...ingresos, ...objetivos) * 1.18;
+
+            const marginTop = isExpanded ? 28 : 14;
+            const marginBottom = isExpanded ? 24 : 14;
+            const marginLeft = isExpanded ? 55 : 32;
+            const marginRight = isExpanded ? 15 : 8;
+            const chartWidth = width - marginLeft - marginRight;
+            const chartHeight = height - marginTop - marginBottom;
+
+            // 1. Líneas de cuadrícula horizontales
+            ctx.strokeStyle = '#e6e6e6';
+            ctx.lineWidth = 1;
+            ctx.fillStyle = '#666';
+            ctx.font = isExpanded ? '12px Arial' : '9px Arial';
+            ctx.textAlign = 'right';
+            ctx.textBaseline = 'middle';
+
+            const steps = isExpanded ? 3 : 2;
+            for (let i = 0; i <= steps; i++) {
+                const val = (maxVal / steps) * i;
+                const y = height - marginBottom - (chartHeight / steps) * i;
+
+                ctx.beginPath();
+                ctx.moveTo(marginLeft, y);
+                ctx.lineTo(width - marginRight, y);
+                ctx.stroke();
+
+                let label = '$' + (val >= 1000 ? Math.round(val / 1000) + 'k' : Math.round(val));
+                ctx.fillText(label, marginLeft - (isExpanded ? 6 : 3), y);
+            }
+
+            const colStep = chartWidth / 4;
+            const barWidth = Math.min(isExpanded ? 48 : 22, colStep * 0.45);
+
+            // 2. Dibujar Barras (Objetivos del Trimestre guardados)
+            for (let i = 0; i < 4; i++) {
+                const xCenter = marginLeft + colStep * i + colStep / 2;
+                const xBar = xCenter - barWidth / 2;
+                const barH = (objetivos[i] / maxVal) * chartHeight;
+                const yBar = height - marginBottom - barH;
+
+                ctx.fillStyle = '#5c9ecc';
+                ctx.fillRect(xBar, yBar, barWidth, barH);
+                ctx.strokeStyle = '#3b7bb2';
+                ctx.lineWidth = 1.2;
+                ctx.strokeRect(xBar, yBar, barWidth, barH);
+
+                ctx.fillStyle = '#333';
+                ctx.font = isExpanded ? 'bold 12px Arial' : 'bold 9px Arial';
+                ctx.textAlign = 'center';
+                ctx.textBaseline = 'top';
+                ctx.fillText('T' + (i + 1), xCenter, height - marginBottom + (isExpanded ? 5 : 3));
+
+                if (isExpanded) {
+                    ctx.fillStyle = '#1b4f72';
+                    ctx.font = '11px Arial';
+                    let formattedObj = '$' + Math.round(objetivos[i] / 1000) + 'k';
+                    ctx.fillText('Obj: ' + formattedObj, xCenter, yBar - 14);
+                }
+            }
+
+            // 3. Dibujar Línea + Puntos (Ingresos del Trimestre)
+            const linePoints = [];
+            for (let i = 0; i < 4; i++) {
+                const xCenter = marginLeft + colStep * i + colStep / 2;
+                const valY = (ingresos[i] / maxVal) * chartHeight;
+                const yLine = height - marginBottom - valY;
+                linePoints.push({
+                    x: xCenter,
+                    y: yLine,
+                    val: ingresos[i]
+                });
+            }
+
+            // Trazar línea conectora
+            ctx.strokeStyle = '#d9534f';
+            ctx.lineWidth = isExpanded ? 3.5 : 2;
+            ctx.beginPath();
+            linePoints.forEach((pt, idx) => {
+                if (idx === 0) ctx.moveTo(pt.x, pt.y);
+                else ctx.lineTo(pt.x, pt.y);
+            });
+            ctx.stroke();
+
+            // Puntos y valores
+            linePoints.forEach((pt) => {
+                ctx.fillStyle = '#d9534f';
+                ctx.beginPath();
+                ctx.arc(pt.x, pt.y, isExpanded ? 6 : 3.5, 0, Math.PI * 2);
+                ctx.fill();
+                ctx.strokeStyle = '#ffffff';
+                ctx.lineWidth = isExpanded ? 2.5 : 1.5;
+                ctx.stroke();
+
+                if (pt.val > 0) {
+                    ctx.fillStyle = '#a94442';
+                    ctx.font = isExpanded ? 'bold 12px Arial' : 'bold 8px Arial';
+                    ctx.textAlign = 'center';
+                    ctx.textBaseline = 'bottom';
+                    let formattedVal = isExpanded ? formatCurrency(pt.val) : ('$' + (pt.val >= 1000 ? Math.round(pt.val / 1000) + 'k' : pt.val));
+                    ctx.fillText(formattedVal, pt.x, pt.y - (isExpanded ? 7 : 3));
+                }
+            });
+
+            // 4. Leyenda en la esquina superior derecha
+            ctx.font = isExpanded ? '11px Arial' : '8px Arial';
+            ctx.textAlign = 'left';
+            ctx.textBaseline = 'top';
+
+            const legY = isExpanded ? 4 : 1;
+
+            if (isExpanded) {
+                // Leyenda amplia (2.5X)
+                const item1SquareX = width - 230;
+                const item1TextX = width - 213;
+                const item2CircleX = width - 95;
+                const item2TextX = width - 85;
+
+                // 🟦 Cuadro azul + Texto Objetivo
+                ctx.fillStyle = '#5c9ecc';
+                ctx.fillRect(item1SquareX, legY, 12, 12);
+                ctx.strokeStyle = '#3b7bb2';
+                ctx.lineWidth = 1;
+                ctx.strokeRect(item1SquareX, legY, 12, 12);
+                ctx.fillStyle = '#444';
+                ctx.fillText('Objetivo Trimestre', item1TextX, legY);
+
+                // 🔴 Círculo rojo + Texto Ingreso
+                ctx.fillStyle = '#d9534f';
+                ctx.beginPath();
+                ctx.arc(item2CircleX, legY + 6, 4.5, 0, Math.PI * 2);
+                ctx.fill();
+                ctx.strokeStyle = '#ffffff';
+                ctx.lineWidth = 1;
+                ctx.stroke();
+                ctx.fillStyle = '#444';
+                ctx.fillText('Ingreso Real', item2TextX, legY);
+            } else {
+                // Leyenda compacta
+                const item1SquareX = width - 118;
+                const item1TextX = width - 108;
+                const item2CircleX = width - 42;
+                const item2TextX = width - 35;
+
+                // 🟦 Cuadro azul + Texto Obj.
+                ctx.fillStyle = '#5c9ecc';
+                ctx.fillRect(item1SquareX, legY, 7, 7);
+                ctx.fillStyle = '#444';
+                ctx.fillText('Obj. ($100k)', item1TextX, legY);
+
+                // 🔴 Círculo rojo + Texto Ingreso
+                ctx.fillStyle = '#d9534f';
+                ctx.beginPath();
+                ctx.arc(item2CircleX, legY + 3.5, 3, 0, Math.PI * 2);
+                ctx.fill();
+                ctx.fillStyle = '#444';
+                ctx.fillText('Ingreso', item2TextX, legY);
+            }
         }
 
         function crearTarjetaProyecto(proyecto, esCompletado) {
@@ -1071,11 +1323,11 @@
             const quincena = parseInt($('#etQuincena').val()) || 1;
             const trimestreActual = Math.floor((quincena - 1) / 6) + 1;
             const esFinTrimestre = (quincena % 6 === 0);
-            const yaResolvioManto = (proyecto.mantenimiento !== 'N/A' && proyecto.mantenimientoPagadoEnTrimestre === trimestreActual);
+            const yaResolvioManto = (proyecto.mantenimientoPagadoEnTrimestre === trimestreActual);
 
             let actionButtonsHtml = '';
-            if (!esCompletado && esFinTrimestre && proyecto.dificultad !== 'Incidencia' && proyecto.mantenimiento !== 'N/A') {
+            if (!esCompletado && esFinTrimestre) {
-                const showPay = proyecto.mantenimiento !== 'N/A';
+                const showPay = (proyecto.dificultad !== 'Incidencia' && proyecto.mantenimiento !== 'N/A');
                 const penalizacionFormateada = formatCurrency(proyecto.penalizacion || 0);
 
                 let buttonManto = '';