<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Co.Laborando — Tablero de Sesión</title>
    <!-- Fuentes modernas desde Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="js/jquery-ui.min.css">
    <link rel="stylesheet" href="estilos3.css?v=<?php echo filemtime('estilos3.css'); ?>">

    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script src="colaborando_arreglos.js?v=<?php echo filemtime('colaborando_arreglos.js'); ?>"></script>
    <script src="manejoDeSesiones.js?v=<?php echo filemtime('manejoDeSesiones.js'); ?>"></script>
</head>

<body>

<div class="canvas">
    <div class="layout">

        <!-- =================================================================
        COLUMNA 1: RAIL DE CONTROL E INFORMACIÓN GLOBAL
        ================================================================== -->
        <div class="rail">
            <!-- LOGO Y SESIÓN -->
            <div class="rail-block rail-logo">
                <img id="logo" src="img/logoColaborando-tablero.png" alt="Co.Laborando">
                <div id="nombreSesion" class="rail-session"></div>
            </div>

            <!-- BOTONES NAVEGACIÓN -->
            <div class="rail-block">
                <div class="rail-btns">
                    <button id="btnFullscreen" onclick="toggleFullscreen()" class="btn btn-block">Pantalla Completa</button>
                    <a href="resumen3.php?n=<?php echo htmlspecialchars($_GET['n'] ?? $_GET['nombre'] ?? ''); ?>" class="btn btn-block">Ir al Resumen</a>
                </div>
            </div>

            <!-- TRIMESTRE Y QUINCENA -->
            <div class="rail-block">
                <div id="trimestreQuincenaComparativo" class="tq-row">
                    <div>
                        <div class="rail-lbl">Trimestre</div>
                        <div id="trimestre" class="trimestre-tabs">
                            <div id="T1" class="trimestre-tab">1</div>
                            <div id="T2" class="trimestre-tab">2</div>
                            <div id="T3" class="trimestre-tab">3</div>
                            <div id="T4" class="trimestre-tab">4</div>
                        </div>
                    </div>
                    <div>
                        <div class="rail-lbl">Quincena</div>
                        <div id="quincena" class="quincena-stepper">
                            <button id="bMenos" class="step-btn">−</button>
                            <input id="etQuincena" type="text" class="quincena-value" value="1" readonly>
                            <button id="bMas" class="step-btn">+</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- TEMPORIZADOR / RELOJ -->
            <div class="rail-block">
                <div class="rail-lbl">Tiempo Restante</div>
                <div id="timer">
                    <div class="timer-face"><span id="time">02:00</span></div>
                    <div style="display:flex; gap:5px; margin-top:6px;">
                        <button id="relojStartPauseButton" onclick="relojToggleTimer()" class="btn btn-primary btn-block">Iniciar</button>
                        <button onclick="relojResumeTimer()" class="btn" style="width: auto; padding: 5px 8px;" title="Continuar temporizador">Continuar</button>
                    </div>
                    <input type="range" id="timeRange" min="1" max="3" value="1" step="1" oninput="relojUpdateTime()" style="width:100%; margin-top:4px;">
                </div>
            </div>

            <!-- COMPARATIVO -->
            <div class="rail-block">
                <div style="display:flex; justify-content:space-between; align-items:center;">
                    <span class="rail-lbl">Comparativo</span>
                    <span id="comparativo" style="font-family:var(--font-mono); font-weight:700; font-size:16px; color:var(--gold);">1</span>
                </div>
            </div>

            <!-- GENERACIÓN DE RECURSOS -->
            <div class="rail-block">
                <div class="rail-lbl" style="margin-bottom:4px;">Recursos Generados</div>
                <div class="resgen-block">
                    <div class="resgen-buttons">
                        <button id="RGR">Generar Recursos</button>
                        <button id="asignarRecursos">Asignar >></button>
                    </div>
                    <table style="height:35px; width:100%; margin:0 auto; text-align:center;">
                        <tr>
                            <td style="width:25%;"><span id="recRand1"></span></td>
                            <td style="width:25%;"><span id="recRand2"></span></td>
                            <td style="width:25%;"><span id="recRand3"></span></td>
                            <td style="width:25%;"><span id="recRand4"></span></td>
                        </tr>
                    </table>
                </div>
            </div>

            <!-- CAPACITACIONES Y ACCIONES EN 2 RENGLONES COMPACTOS -->
            <div class="rail-block">
                <!-- Renglon 1: Etiquetas (Capacitaciones a la izquierda, Acciones a la derecha) -->
                <div style="display:grid; grid-template-columns: 1fr 30%; align-items:center; margin-bottom:4px;">
                    <div style="display:flex; align-items:center; gap:5px;">
                        <input type="checkbox" name="habilidadesAcreditadas" id="habilidadesAcreditadas">
                        <label for="habilidadesAcreditadas" class="rail-lbl" style="cursor:pointer; text-transform:none;">Capacitaciones</label>
                    </div>
                    <span class="rail-lbl" style="text-align:center;">Acciones</span>
                </div>

                <!-- Renglon 2: Contenido (#haNombre a la izquierda, botones #bAccion1 y #bAccion2 a la derecha) -->
                <div style="display:grid; grid-template-columns: 1fr 30%; gap:8px; align-items:center;">
                    <table id="tablaHabilidadesAcreditadas" actual="" style="height:32px; width:100%; text-align:center; font-size:10px; background:var(--panel-2); border-radius:6px; border:1px solid var(--border-soft); box-sizing:border-box;">
                        <tr>
                            <td><span id="haNombre" style="font-size: 9px;font-weight:bold; display:block; line-height:1.1;"></span></td>
                        </tr>
                        <tr>
                            <td><span id="haCosto" style="display:block; font-size:9.5px; color:var(--text-dim); line-height:1.1;"></span></td>
                        </tr>
                    </table>
                    
                    <div style="display:flex; gap:4px; align-items:center; width:100%;">
                        <button id="bAccion1" onclick="toggleColor(this)" style="flex:1;">1</button>
                        <button id="bAccion2" onclick="toggleColor(this)" style="flex:1;">2</button>
                    </div>
                </div>
            </div>

            <!-- ACCIONES POSIBLES -->
            <div class="rail-block">
                <div class="rail-lbl" style="margin-bottom:4px;">Acciones Posibles</div>
                <table id="tablaAccionesPosibles" style="width:100%; border:1px solid var(--border); font-size:14.5px; border-radius:6px; background:var(--panel-2);padding:8px">
                    <tr><td>1.-</td><td>Generar recursos</td></tr>
                    <tr><td>2.-</td><td>Generar activos</td></tr>
                    <tr><td>3.-</td><td>Intercambiar recursos</td></tr>
                    <tr><td>4.-</td><td><span id="accionGestionarProyecto">Gestionar nuevo proyecto</span></td></tr>
                    <tr><td>5.-</td><td>Convocar junta</td></tr>
                    <tr><td>6.-</td><td><span id="accionComprarCapacitacion">Abrir/Cambiar/Comprar habilidad</span></td></tr>
                    <tr><td>7.-</td><td>Colocar activos recuperados</td></tr>
                    <tr><td>8.-</td><td><span id="accionHabilidadEspecial">Habilidad especial</span></td></tr>
                </table>
            </div>

            <!-- TABLA DE ACTIVOS (PRODUCCIÓN / RECUPERACIÓN) -->
            <div class="rail-block">
                <div class="rail-lbl" style="margin-bottom:4px;">Tabla de Activos</div>
                <table id="tablaActivos" class="activos">
                    <thead>
                        <tr>
                            <th colspan="2" style="width: 33%;font-size:11px; font-weight:bold; background-color:var(--panel-1);">ACTIVOS</th>
                            <th style="font-size:11px; font-weight:bold; background-color:var(--panel-1);">Prod.</th>
                            <th style="font-size:11px; font-weight:bold; background-color:var(--panel-1);">Recup.</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td colspan="2" class="actPersonalCalificado">Personal calificado</td>
                            <td id="activosPersonalCalificado">1T+2P+2C</td>
                            <td id="recuperacionPersonalCalificado">1P+1C</td>
                        </tr>
                        <tr>
                            <td colspan="2" class="actAnalistas">Analistas</td>
                            <td id="activosAnalistas">1T+2P+2C</td>
                            <td id="recuperacionAnalistas">1P+1C</td>
                        </tr>
                        <tr>
                            <td colspan="2" class="actFlujoDeEfectivo">Flujo de efectivo</td>
                            <td id="activosFlujoDeEfectivo">1T+2P+2C</td>
                            <td id="recuperacionFlujoDeEfectivo">1P+1C</td>
                        </tr>
                        <tr>
                            <td colspan="2" class="actCreditoEInversion">Crédito e Inversión</td>
                            <td id="activosCreditoEInversiono">1T+2P+2C</td>
                            <td id="recuperacionCreditoEInversion">1P+1C</td>
                        </tr>
                        <tr>
                            <td colspan="2" class="actTecnologia">Tecnología</td>
                            <td id="activosTecnologia">1T+2P+2C</td>
                            <td id="recuperacionTecnologia">1P+1C</td>
                        </tr>
                        <tr>
                            <td colspan="2" class="actTransporteYMaquinaria">Transporte y Maquinaria</td>
                            <td id="activosTransporteYMaquinaria">1T+2P+2C</td>
                            <td id="recuperacionTransporteYMaquinaria">1P+1C</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- CONTADORES FINALES -->
            <div class="rail-block">
                <table style="width:100%; text-align:center; font-size:11px; border:1px solid var(--border); border-radius:6px; background:var(--panel);">
                    <tr>
                        <td style="background:gray; color:white; padding:3px; font-weight:bold; width:50%;">Proyectos<br>Terminados</td>
                        <td style="background:gray; color:white; padding:3px; font-weight:bold; width:50%;">Incidencias<br>Solventadas</td>
                    </tr>
                    <tr>
                        <td id="proyectosTerminados" style="background:limegreen; color:white; font-weight:bold; font-size:18px; padding:6px;">0</td>
                        <td id="incidenciasTerminadas" style="background:orange; color:white; font-weight:bold; font-size:18px; padding:6px;">0</td>
                    </tr>
                </table>
            </div>
        </div>

        <!-- =================================================================
        COLUMNA 2: DEPARTAMENTOS
        ================================================================== -->
        <div class="col-departamentos">
            <!-- CONTENEDOR DEPARTAMENTO GRANDE (OCULTO EN DOM) -->
            <div id="renglonSuperior" class="card-depto-gde" style="display:none;">
                <div style="font-weight:700; font-size:12px; color:var(--text-faint); letter-spacing:.08em; text-transform:uppercase; text-align:center; margin-bottom:6px;">Departamento a Cargo</div>
                
                <table class="renglonSup" style="width:100%;">
                    <tr>
                        <td colspan="8" id="nombreDeptoGde" style="text-align:center; font-size:16px; font-weight:700; height:36px;">RECURSOS HUMANOS<span id="deptoNombresGde"></span></td>
                        <td style="width:30px; text-align:center;">
                            <div id="activoGde1" class="draggable activo-item" style="border:1px solid black; padding:4px; text-align:center;">1</div>
                        </td>
                        <td style="width:30px; text-align:center;">
                            <div id="activoGde2" class="draggable activo-item" style="border:1px solid black; padding:4px; text-align:center;">2</div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="6" id="deptoNombresGdeXX" style="display:none;"></td>
                        <td colspan="4" rowspan="8" id="imagenDepto" style="text-align:center; vertical-align:top; padding-top:6px;">
                            <img id="imagenDeptoGde" src="img/depto-recursos.png" style="width:170px; height:auto; object-fit:contain;"><br>
                            <span id="nuevoNombreDeptoGde" style="font-weight:bold; font-size:14px;"></span>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="6" style="text-align:center; background-color:gray; color:white; height:22px; font-size:12px; font-weight:bold;">Recursos Disponibles</td>
                    </tr>
                    <tr>
                        <td colspan="6" id="recursosDisponiblesGde" style="height:60px; text-align:center; vertical-align:middle;">
                            <table style="margin:0 auto; width:90%; font-family:var(--font-mono); font-weight:bold; font-size:16px;">
                                <tr>
                                    <td style="width:33%; text-align:center;">
                                        <img src="img/tiempoNegro.png" height="36px" style="vertical-align:middle;">
                                        <span id="recursoDispTiempoGde" class="draggable recurso-item" style="vertical-align:middle; background:#14181F; color:var(--timer-accent); padding:2px 8px; border-radius:4px;">2</span>
                                    </td>
                                    <td style="width:33%; text-align:center;">
                                        <img src="img/personalNegro.png" height="36px" style="vertical-align:middle;">
                                        <span id="recursoDispPersonalGde" class="draggable recurso-item" style="vertical-align:middle; background:#14181F; color:var(--timer-accent); padding:2px 8px; border-radius:4px;">2</span>
                                    </td>
                                    <td style="width:33%; text-align:center;">
                                        <img src="img/capitalNegro.png" height="36px" style="vertical-align:middle;">
                                        <span id="recursoDispCapitalGde" class="draggable recurso-item" style="vertical-align:middle; background:#14181F; color:var(--timer-accent); padding:2px 8px; border-radius:4px;">2</span>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="6" style="text-align:center; background-color:gray; color:white; height:22px; font-size:12px; font-weight:bold;">Habilidades Acreditadas</td>
                    </tr>
                    <tr>
                        <td colspan="6" style="text-align:center; height:24px; font-size:11px;" id="habilidadesAcreditadasGde1"></td>
                    </tr>
                    <tr>
                        <td colspan="6" style="text-align:center; height:24px; font-size:11px;" id="habilidadesAcreditadasGde2"></td>
                    </tr>
                    <tr>
                        <td colspan="6" style="text-align:center; height:24px; font-size:11px;" id="habilidadesAcreditadasGde3"></td>
                    </tr>
                    <tr>
                        <td colspan="10" style="text-align:center; background-color:gray; color:white; height:20px; font-size:11px; font-weight:bold; margin-top:4px;">Habilidad Especial / Quincenal</td>
                    </tr>
                    <tr>
                        <td colspan="10" id="accionEspecialGde" style="text-align:center; background-color:silver; color:black; height:32px; font-size:11px; line-height:1.2; vertical-align:middle;">.</td>
                    </tr>
                </table>
            </div>

            <!-- GRID DE 6 DEPARTAMENTOS CHICOS -->
            <div id="renglonDeptos" class="dept-grid">
                
                <!-- MARKETING Y VENTAS -->
                <div class="dept-card-sm departamentos droppableRecursos" id="MarketingYVentas">
                    <!-- Fila 1: Avatar e Info -->
                    <div class="dept-header-row">
                        <div class="dept-avatar-box">
                            <img id="imagenDeptoGde" src="img/depto-marketing.png" alt="Marketing y Ventas">
                        </div>
                        <div class="dept-info-box">
                            <span id="nombreDeptoCh" class="dept-title">Marketing y Ventas</span>
                            <span id="deptoNombresCh" class="personasDepto dept-members">Hugo, Paco y Luis</span>
                        </div>
                    </div>

                    <!-- Fila 2: Recursos y Activos (Renglón Completo - Flex) -->
                    <div class="dept-resources-assets-row">
                        <div class="dept-res-chip">
                            <img src="img/tiempoCH.png">
                            <div id="tiempoCh" class="draggable recurso-item val-tiempo">2</div>
                        </div>
                        <div class="dept-res-chip">
                            <img src="img/personalCH.png">
                            <div id="personalCh" class="draggable recurso-item val-personal">3</div>
                        </div>
                        <div class="dept-res-chip">
                            <img src="img/capitalCH.png">
                            <div id="capitalCh" class="draggable recurso-item val-capital">1</div>
                        </div>
                        <span id="activoCh1" class="actPersonalCalificado draggable activo-item">1</span>
                        <span id="activoCh2" class="actFlujoDeEfectivo draggable activo-item">2</span>
                    </div>

                    <!-- Fila 3: Habilidad Especial (Renglón Completo) -->
                    <div class="dept-habilidad-row">
                        <span class="dept-habilidad-lbl">Habilidad:</span> <span id="accionEspecialGde">.</span>
                    </div>

                    <!-- Fila 4: Habilidades Acreditadas (Renglón Completo) -->
                    <div class="dept-habilidades-acreditadas-list">
                        <div id="habilidadesAcreditadasCh1" class="dept-hab-item"></div>
                        <div id="habilidadesAcreditadasCh2" class="dept-hab-item"></div>
                        <div id="habilidadesAcreditadasCh3" class="dept-hab-item"></div>
                    </div>
                </div>

                <!-- FINANZAS -->
                <div class="dept-card-sm departamentos droppableRecursos" id="Finanzas">
                    <!-- Fila 1: Avatar e Info -->
                    <div class="dept-header-row">
                        <div class="dept-avatar-box">
                            <img id="imagenDeptoGde" src="img/depto-finanzas.png" alt="Finanzas">
                        </div>
                        <div class="dept-info-box">
                            <span id="nombreDeptoCh" class="dept-title">Finanzas</span>
                            <span id="deptoNombresCh" class="personasDepto dept-members">Donald, Mimi y Tribilín</span>
                        </div>
                    </div>

                    <!-- Fila 2: Recursos y Activos (Renglón Completo - Flex) -->
                    <div class="dept-resources-assets-row">
                        <div class="dept-res-chip">
                            <img src="img/tiempoCH.png">
                            <div id="tiempoCh" class="draggable recurso-item val-tiempo">2</div>
                        </div>
                        <div class="dept-res-chip">
                            <img src="img/personalCH.png">
                            <div id="personalCh" class="draggable recurso-item val-personal">3</div>
                        </div>
                        <div class="dept-res-chip">
                            <img src="img/capitalCH.png">
                            <div id="capitalCh" class="draggable recurso-item val-capital">1</div>
                        </div>
                        <span id="activoCh1" class="actFlujoDeEfectivo draggable activo-item">1</span>
                        <span id="activoCh2" class="actCreditoEInversion draggable activo-item">2</span>
                    </div>

                    <!-- Fila 3: Habilidad Especial (Renglón Completo) -->
                    <div class="dept-habilidad-row">
                        <span class="dept-habilidad-lbl">Habilidad:</span> <span id="accionEspecialGde">.</span>
                    </div>

                    <!-- Fila 4: Habilidades Acreditadas (Renglón Completo) -->
                    <div class="dept-habilidades-acreditadas-list">
                        <div id="habilidadesAcreditadasCh1" class="dept-hab-item"></div>
                        <div id="habilidadesAcreditadasCh2" class="dept-hab-item"></div>
                        <div id="habilidadesAcreditadasCh3" class="dept-hab-item"></div>
                    </div>
                </div>

                <!-- INVESTIGACIÓN Y DESARROLLO -->
                <div class="dept-card-sm departamentos droppableRecursos" id="InvestigacionYDesarrollo">
                    <!-- Fila 1: Avatar e Info -->
                    <div class="dept-header-row">
                        <div class="dept-avatar-box">
                            <img id="imagenDeptoGde" src="img/depto-investigacion.png" alt="Investigación y Desarrollo">
                        </div>
                        <div class="dept-info-box">
                            <span id="nombreDeptoCh" class="dept-title">Investigación y Desarrollo</span>
                            <span id="deptoNombresCh" class="personasDepto dept-members">Hugo, Paco y Luis</span>
                        </div>
                    </div>

                    <!-- Fila 2: Recursos y Activos (Renglón Completo - Flex) -->
                    <div class="dept-resources-assets-row">
                        <div class="dept-res-chip">
                            <img src="img/tiempoCH.png">
                            <div id="tiempoCh" class="draggable recurso-item val-tiempo">2</div>
                        </div>
                        <div class="dept-res-chip">
                            <img src="img/personalCH.png">
                            <div id="personalCh" class="draggable recurso-item val-personal">3</div>
                        </div>
                        <div class="dept-res-chip">
                            <img src="img/capitalCH.png">
                            <div id="capitalCh" class="draggable recurso-item val-capital">1</div>
                        </div>
                        <span id="activoCh1" class="actCreditoEInversion draggable activo-item">1</span>
                        <span id="activoCh2" class="actTecnologia draggable activo-item">2</span>
                    </div>

                    <!-- Fila 3: Habilidad Especial (Renglón Completo) -->
                    <div class="dept-habilidad-row">
                        <span class="dept-habilidad-lbl">Habilidad:</span> <span id="accionEspecialGde">.</span>
                    </div>

                    <!-- Fila 4: Habilidades Acreditadas (Renglón Completo) -->
                    <div class="dept-habilidades-acreditadas-list">
                        <div id="habilidadesAcreditadasCh1" class="dept-hab-item"></div>
                        <div id="habilidadesAcreditadasCh2" class="dept-hab-item"></div>
                        <div id="habilidadesAcreditadasCh3" class="dept-hab-item"></div>
                    </div>
                </div>

                <!-- LOGÍSTICA Y SISTEMAS -->
                <div class="dept-card-sm departamentos droppableRecursos" id="LogisticaYSistemas">
                    <!-- Fila 1: Avatar e Info -->
                    <div class="dept-header-row">
                        <div class="dept-avatar-box">
                            <img id="imagenDeptoGde" src="img/depto-logistica.png" alt="Logística y Sistemas">
                        </div>
                        <div class="dept-info-box">
                            <span id="nombreDeptoCh" class="dept-title">Logística y Sistemas</span>
                            <span id="deptoNombresCh" class="personasDepto dept-members">Hugo, Paco y Luis</span>
                        </div>
                    </div>

                    <!-- Fila 2: Recursos y Activos (Renglón Completo - Flex) -->
                    <div class="dept-resources-assets-row">
                        <div class="dept-res-chip">
                            <img src="img/tiempoCH.png">
                            <div id="tiempoCh" class="draggable recurso-item val-tiempo">2</div>
                        </div>
                        <div class="dept-res-chip">
                            <img src="img/personalCH.png">
                            <div id="personalCh" class="draggable recurso-item val-personal">3</div>
                        </div>
                        <div class="dept-res-chip">
                            <img src="img/capitalCH.png">
                            <div id="capitalCh" class="draggable recurso-item val-capital">1</div>
                        </div>
                        <span id="activoCh1" class="actTecnologia draggable activo-item">1</span>
                        <span id="activoCh2" class="actTransporteYMaquinaria draggable activo-item">2</span>
                    </div>

                    <!-- Fila 3: Habilidad Especial (Renglón Completo) -->
                    <div class="dept-habilidad-row">
                        <span class="dept-habilidad-lbl">Habilidad:</span> <span id="accionEspecialGde">.</span>
                    </div>

                    <!-- Fila 4: Habilidades Acreditadas (Renglón Completo) -->
                    <div class="dept-habilidades-acreditadas-list">
                        <div id="habilidadesAcreditadasCh1" class="dept-hab-item"></div>
                        <div id="habilidadesAcreditadasCh2" class="dept-hab-item"></div>
                        <div id="habilidadesAcreditadasCh3" class="dept-hab-item"></div>
                    </div>
                </div>

                <!-- OPERACIONES -->
                <div class="dept-card-sm departamentos droppableRecursos" id="Operaciones">
                    <!-- Fila 1: Avatar e Info -->
                    <div class="dept-header-row">
                        <div class="dept-avatar-box">
                            <img id="imagenDeptoGde" src="img/depto-operaciones.png" alt="Operaciones">
                        </div>
                        <div class="dept-info-box">
                            <span id="nombreDeptoCh" class="dept-title">Operaciones</span>
                            <span id="deptoNombresCh" class="personasDepto dept-members">Hugo, Paco y Luis</span>
                        </div>
                    </div>

                    <!-- Fila 2: Recursos y Activos (Renglón Completo - Flex) -->
                    <div class="dept-resources-assets-row">
                        <div class="dept-res-chip">
                            <img src="img/tiempoCH.png">
                            <div id="tiempoCh" class="draggable recurso-item val-tiempo">2</div>
                        </div>
                        <div class="dept-res-chip">
                            <img src="img/personalCH.png">
                            <div id="personalCh" class="draggable recurso-item val-personal">3</div>
                        </div>
                        <div class="dept-res-chip">
                            <img src="img/capitalCH.png">
                            <div id="capitalCh" class="draggable recurso-item val-capital">1</div>
                        </div>
                        <span id="activoCh1" class="actTransporteYMaquinaria draggable activo-item">1</span>
                        <span id="activoCh2" class="actAnalistas draggable activo-item">2</span>
                    </div>

                    <!-- Fila 3: Habilidad Especial (Renglón Completo) -->
                    <div class="dept-habilidad-row">
                        <span class="dept-habilidad-lbl">Habilidad:</span> <span id="accionEspecialGde">.</span>
                    </div>

                    <!-- Fila 4: Habilidades Acreditadas (Renglón Completo) -->
                    <div class="dept-habilidades-acreditadas-list">
                        <div id="habilidadesAcreditadasCh1" class="dept-hab-item"></div>
                        <div id="habilidadesAcreditadasCh2" class="dept-hab-item"></div>
                        <div id="habilidadesAcreditadasCh3" class="dept-hab-item"></div>
                    </div>
                </div>

                <!-- RECURSOS HUMANOS -->
                <div class="dept-card-sm departamentos droppableRecursos" id="RecursosHumanos">
                    <!-- Fila 1: Avatar e Info -->
                    <div class="dept-header-row">
                        <div class="dept-avatar-box">
                            <img id="imagenDeptoGde" src="img/depto-recursos.png" alt="Recursos Humanos">
                        </div>
                        <div class="dept-info-box">
                            <span id="nombreDeptoCh" class="dept-title">Recursos Humanos</span>
                            <span id="deptoNombresCh" class="personasDepto dept-members">Hugo, Paco y Luis</span>
                        </div>
                    </div>

                    <!-- Fila 2: Recursos y Activos (Renglón Completo - Flex) -->
                    <div class="dept-resources-assets-row">
                        <div class="dept-res-chip">
                            <img src="img/tiempoCH.png">
                            <div id="tiempoCh" class="draggable recurso-item val-tiempo">2</div>
                        </div>
                        <div class="dept-res-chip">
                            <img src="img/personalCH.png">
                            <div id="personalCh" class="draggable recurso-item val-personal">3</div>
                        </div>
                        <div class="dept-res-chip">
                            <img src="img/capitalCH.png">
                            <div id="capitalCh" class="draggable recurso-item val-capital">1</div>
                        </div>
                        <span id="activoCh1" class="actPersonalCalificado draggable activo-item">1</span>
                        <span id="activoCh2" class="actAnalistas draggable activo-item">2</span>
                    </div>

                    <!-- Fila 3: Habilidad Especial (Renglón Completo) -->
                    <div class="dept-habilidad-row">
                        <span class="dept-habilidad-lbl">Habilidad:</span> <span id="accionEspecialGde">.</span>
                    </div>

                    <!-- Fila 4: Habilidades Acreditadas (Renglón Completo) -->
                    <div class="dept-habilidades-acreditadas-list">
                        <div id="habilidadesAcreditadasCh1" class="dept-hab-item"></div>
                        <div id="habilidadesAcreditadasCh2" class="dept-hab-item"></div>
                        <div id="habilidadesAcreditadasCh3" class="dept-hab-item"></div>
                    </div>
                </div>

            </div>
        </div>

        <!-- =================================================================
        COLUMNA 3: PROYECTOS (DESTACADO Y SECUNDARIOS)
        ================================================================== -->
        <div class="col-proyectos">
            
            <!-- PROYECTO EN TURNO (GRANDE) -->
            <div id="TablaProyectoGde" num="0" class="proj-featured">
                <div class="featured-flag">PROYECTO EN TURNO</div>

                <div class="pf-grid">
                    <div class="pf-text">
                        <div id="nombreProyectoGde" class="pf-title-block">
                            INDICADORES ROI<br><span>FINANZAS</span>
                        </div>
                        <div id="descripcionProyectoGde" class="pf-desc">Establecer Indicadores de ROI en tiendas físicas</div>
                    </div>
                    <div class="pf-image-box">
                        <img id="imagenProyectoGde" src="img/grafica.jpg" alt="Proyecto">
                    </div>
                </div>

                <div class="pf-money">
                    <span id="puntosGanados" class="potencial">Potencial<br>8,000 - 25,000 USD</span>
                    <span id="puntosPerdidos" class="penal">Penalización<br>10,000</span>
                </div>

                <!-- CONTENEDOR DE ACTIVOS (#activosProyectoGde) REQUERIDO POR JSCODE.JS PARA DROPPABLE -->
                <div id="activosProyectoGde" class="droppableActivos">
                    <div class="pf-assets-row">
                        <div class="pf-asset-box">
                            <span id="activoReqProyectoNom1" num="1" class="pf-asset-lbl actAnalistas">Analistas</span>
                            <span id="activoReqProyectoCantX1" class="pf-asset-val">1</span>
                        </div>
                        <div class="pf-asset-box">
                            <span id="activoReqProyectoNom2" num="2" class="pf-asset-lbl actPersonalCalificado">Personal Calificado</span>
                            <span id="activoReqProyectoCantX2" class="pf-asset-val">2</span>
                        </div>
                        <div class="pf-asset-box">
                            <span id="activoReqProyectoNom3" num="3" class="pf-asset-lbl actTransporteYMaquinaria">Transporte y Maq.</span>
                            <span id="activoReqProyectoCantX3" class="pf-asset-val">2</span>
                        </div>
                    </div>

                    <div class="pf-foot">
                        <span id="mantoGde" class="manto">MANTENIMIENTO 1T + 1P + 1C</span>
                        <span class="status-badge">EN PROGRESO</span>
                    </div>

                    <!-- RENGLÓN DE ACTIVOS PAGADOS / ASIGNADOS -->
                    <div class="pf-paid-row">
                        <div class="pf-paid-box">
                            <span id="activoReqProyectoCant1" class="actAnalistas">0</span>
                        </div>
                        <div class="pf-paid-box">
                            <span id="activoReqProyectoCant2" class="actPersonalCalificado">0</span>
                        </div>
                        <div class="pf-paid-box">
                            <span id="activoReqProyectoCant3" class="actTransporteYMaquinaria">0</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- PROYECTOS SECUNDARIOS (PROYECTOS CHICOS 1 AL 6) -->
            <div style="font-weight:700; font-size:12px; color:var(--text-faint); letter-spacing:.08em; text-transform:uppercase; margin-top:4px;">Proyectos Activos</div>
            
            <div id="renglonProyectos2" class="proj-grid-sm">
                
                <!-- PROYECTO 1 -->
                <div class="proj-card-sm">
                    <div class="proyectos droppableActivos pm-card" id="proyecto_1">
                        <div class="proyectoEncabezado pm-header">
                            <div id="proyectoDepto" class="pm-dept">OPERACIONES</div>
                            <div id="proyectoNombre" class="pm-title">PROCESO SANITIZACIÓN</div>
                            <div id="puntos" class="pm-puntos">+1</div>
                        </div>

                        <div id="proyectoDescripcion" class="pm-desc">Establecer proceso extra de sanitización.</div>

                        <!-- Activos Requeridos Compactos -->
                        <div class="pm-assets-row">
                            <span id="activoReq1" class="actFlujoDeEfectivo">3</span>
                            <span id="activoReq2" class="actTransporteYMaquinaria">2</span>
                            <span id="activoReq3" class="actTecnologia">1</span>
                        </div>

                        <!-- Mantenimiento -->
                        <div id="recursosManto" class="pm-manto">MTTO: 2C+2P+1T</div>

                        <!-- Activos Pagados / Asignados -->
                        <div class="pm-paid-row">
                            <span id="activoAsignado1" class="actFlujoDeEfectivo">1</span>
                            <span id="activoAsignado2" class="actTransporteYMaquinaria">0</span>
                            <span id="activoAsignado3" class="actTecnologia">2</span>
                        </div>
                    </div>
                </div>

                <!-- PROYECTO 2 -->
                <div class="proj-card-sm">
                    <div class="proyectos droppableActivos pm-card" id="proyecto_2">
                        <div class="proyectoEncabezado pm-header">
                            <div id="proyectoDepto" class="pm-dept"> </div>
                            <div id="proyectoNombre" class="pm-title"> </div>
                            <div id="puntos" class="pm-puntos"> </div>
                        </div>

                        <div id="proyectoDescripcion" class="pm-desc"> </div>

                        <div class="pm-assets-row">
                            <span id="activoReq1"> </span>
                            <span id="activoReq2"> </span>
                            <span id="activoReq3"> </span>
                        </div>

                        <div id="recursosManto" class="pm-manto"> </div>

                        <div class="pm-paid-row">
                            <span id="activoAsignado1"> </span>
                            <span id="activoAsignado2"> </span>
                            <span id="activoAsignado3"> </span>
                        </div>
                    </div>
                </div>

                <!-- PROYECTO 3 -->
                <div class="proj-card-sm">
                    <div class="proyectos droppableActivos pm-card" id="proyecto_3">
                        <div class="proyectoEncabezado pm-header">
                            <div id="proyectoDepto" class="pm-dept"> </div>
                            <div id="proyectoNombre" class="pm-title"> </div>
                            <div id="puntos" class="pm-puntos"> </div>
                        </div>

                        <div id="proyectoDescripcion" class="pm-desc"> </div>

                        <div class="pm-assets-row">
                            <span id="activoReq1"> </span>
                            <span id="activoReq2"> </span>
                            <span id="activoReq3"> </span>
                        </div>

                        <div id="recursosManto" class="pm-manto"> </div>

                        <div class="pm-paid-row">
                            <span id="activoAsignado1"> </span>
                            <span id="activoAsignado2"> </span>
                            <span id="activoAsignado3"> </span>
                        </div>
                    </div>
                </div>

                <!-- PROYECTO 4 -->
                <div class="proj-card-sm">
                    <div class="proyectos droppableActivos pm-card" id="proyecto_4">
                        <div class="proyectoEncabezado pm-header">
                            <div id="proyectoDepto" class="pm-dept"> </div>
                            <div id="proyectoNombre" class="pm-title"> </div>
                            <div id="puntos" class="pm-puntos"> </div>
                        </div>

                        <div id="proyectoDescripcion" class="pm-desc"> </div>

                        <div class="pm-assets-row">
                            <span id="activoReq1"> </span>
                            <span id="activoReq2"> </span>
                            <span id="activoReq3"> </span>
                        </div>

                        <div id="recursosManto" class="pm-manto"> </div>

                        <div class="pm-paid-row">
                            <span id="activoAsignado1"> </span>
                            <span id="activoAsignado2"> </span>
                            <span id="activoAsignado3"> </span>
                        </div>
                    </div>
                </div>

                <!-- PROYECTO 5 -->
                <div class="proj-card-sm">
                    <div class="proyectos droppableActivos pm-card" id="proyecto_5">
                        <div class="proyectoEncabezado pm-header">
                            <div id="proyectoDepto" class="pm-dept"> </div>
                            <div id="proyectoNombre" class="pm-title"> </div>
                            <div id="puntos" class="pm-puntos"> </div>
                        </div>

                        <div id="proyectoDescripcion" class="pm-desc"> </div>

                        <div class="pm-assets-row">
                            <span id="activoReq1"> </span>
                            <span id="activoReq2"> </span>
                            <span id="activoReq3"> </span>
                        </div>

                        <div id="recursosManto" class="pm-manto"> </div>

                        <div class="pm-paid-row">
                            <span id="activoAsignado1"> </span>
                            <span id="activoAsignado2"> </span>
                            <span id="activoAsignado3"> </span>
                        </div>
                    </div>
                </div>

                <!-- PROYECTO 6 -->
                <div class="proj-card-sm">
                    <div class="proyectos droppableActivos pm-card" id="proyecto_6">
                        <div class="proyectoEncabezado pm-header">
                            <div id="proyectoDepto" class="pm-dept"> </div>
                            <div id="proyectoNombre" class="pm-title"> </div>
                            <div id="puntos" class="pm-puntos"> </div>
                        </div>

                        <div id="proyectoDescripcion" class="pm-desc"> </div>

                        <div class="pm-assets-row">
                            <span id="activoReq1"> </span>
                            <span id="activoReq2"> </span>
                            <span id="activoReq3"> </span>
                        </div>

                        <div id="recursosManto" class="pm-manto"> </div>

                        <div class="pm-paid-row">
                            <span id="activoAsignado1"> </span>
                            <span id="activoAsignado2"> </span>
                            <span id="activoAsignado3"> </span>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>
</div>

<!-- DIÁLOGOS MODALES Y SCRIPTS DE MOTOR DE JUEGO -->
<div id="quitarProyectoCompleto" style="display:none;">
    <div id="quitarProyectoCompletoTexto" style="font-size:14px;">¿Está seguro que desea quitar el proyecto completado?</div>
    <div id="quitarProyectoCompletoBotones" style="text-align:center;"></div>
</div>

<script src="jsCode.js?v=<?php echo filemtime('jsCode.js'); ?>"></script>

</body>
</html>