Colaborando/CONTEXT.md

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, asegurando al 100% que el motor de lógica y eventos del juego (jsCode.js) permanezca intacto y sin ninguna modificación.

---

Decisiones Principales y Arquitectura

1. Creación de colaborando3.php basada en propuesta-diseño.html:

   • 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.
   • Se rediseñó el Proyecto en Turno (Grande) y los Proyectos Activos Secundarios (#proyecto_1 a #proyecto_6) para presentar etiquetas compactas de activos, contadores de activos pagados sin fondo sólido y bloques de mantenimiento integrados.
   • Se centraron horizontalmente las píldoras de activos requeridos, contadores pagados y texto de mantenimiento en los proyectos secundarios.

2. Ajustes en la Columna Izquierda (Rail):

   • Capacitaciones y Acciones: Se compactó el bloque en 2 renglones (Renglón 1: Checkbox Capacitaciones + Etiqueta Acciones; Renglón 2: #tablaHabilidadesAcreditadas con #haNombre y #haCosto + botones de acción #bAccion1 y #bAccion2 con dimensiones reducidas).
   • Tabla de Activos (#tablaActivos): Se estilizó la primera columna de nombres de activos con fondos suaves pastel, bordes 1.5px solid y texto en el color característico de cada activo (Dorado, Naranja, Verde, Azul, Rojo, Azul Marino).

3. Garantía de Compatibilidad Total con jsCode.js:

   • Sin Cambios en JS: jsCode.js se mantiene 100% idéntico a la versión del repositorio.
   • Jerarquía DOM Preservada: Se adaptó el HTML/CSS de colaborando3.php para mantener intactos los IDs y selectores requeridos por jsCode.js (#TablaProyectoGde, #activosProyectoGde, #activoReqProyectoNom1..3, #activoReqProyectoCant1..3, #tablaHabilidadesAcreditadas, #haNombre, #haCosto, #bAccion1, #bAccion2, #tablaActivos, etc.).
   • Inmunidad de Estilos: Se configuraron selectores CSS específicos por ID para que las tarjetas conserven su formato compacto y colores de activo incluso cuando jsCode.js limpia o inyecta clases dinámicamente (llenaProyectoGde, llenaProyectoChico2).

4. Interacción y Drag & Drop:

   • Se ajustó el z-index de los elementos arrastrados (.ui-draggable-dragging) para flotar por encima de la interfaz.
   • Se eliminaron clases duplicadas (droppableActivos) en contenedores anidados para asegurar que cada evento de arrastrar y soltar se ejecute una sola vez (+1 activo).

---

Tareas Pendientes / Próximos Pasos

• Realizar pruebas de juego completas en colaborando3.php para validar la rotación de turnos, la eliminación/completado de proyectos mediante el modal #quitarProyectoCompleto y el cálculo de recursos quincenales.