cheveguerra/Colaborando
1
0
Fork 0
mirror of https://github.com/cheveguerra/Colaborando.git synced 2026-08-18 16:36:39 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
main
Colaborando/colaborando3.php
T
cheveguerra 77c86122f0 style(ui): refactorizar layout en porcentajes y ajustar escala tipografica 
- Ajustar la cuadricula del tablero (.layout) a proporciones en porcentaje (18% 1fr 30%).
- Disponer botones de navegacion (.rail-btns) horizontalmente en un solo renglon.
- Reordenar el bloque de Acciones Posibles por encima de la Tabla de Activos en el Rail.
- Ajustar proporciones de Capacitaciones y Acciones a 70%/30% con botones flexibles.
- Ampliar escala tipografica en titulos, descripciones, tarjetas de departamentos y proyectos.
- Aumentar tamano del avatar de departamentos a 130px.
- Actualizar CONTEXT.md con la arquitectura y decisiones de la sesion.
2026-08-12 21:59:01 -06:00

798 lines
44 KiB
PHP
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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>
Reference in New Issue View Git Blame Copy Permalink