mirror of
https://github.com/cheveguerra/Colaborando.git
synced 2026-08-19 00:46:37 +00:00
cheveguerra
eefb7aaea3
Implementacion de colaborando3.php basada en propuesta-diseno.html manteniendo jsCode.js 100% intacto. Redisenos responsive de proyectos y departamentos, alineacion de activos requeridos/pagados e inmunidad de estilos CSS tras la carga de sesion.
2211 lines
88 KiB
PHP
2211 lines
88 KiB
PHP
<!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">
|
||
|
||
<style>
|
||
:root {
|
||
--bg: #F2F3F6;
|
||
--panel: #FFFFFF;
|
||
--panel-2: #EFF1F5;
|
||
--border: #DEE1E8;
|
||
--border-soft: #E8EAEF;
|
||
--text: #171B24;
|
||
--text-dim: #545C70;
|
||
--text-faint: #8890A3;
|
||
--gold: #B9860E;
|
||
--sky: #0E86A8;
|
||
--violet: #8A38C4;
|
||
--timer-accent: #5FD8EE;
|
||
--red: #C6432B;
|
||
--green-ok: #2F9E5B;
|
||
--a-personal: #C79A16;
|
||
--a-analistas: #C97324;
|
||
--a-flujo: #2F9E5B;
|
||
--a-credito: #2F6FE0;
|
||
--a-tecnologia: #C6432B;
|
||
--a-transporte: #1F3B73;
|
||
--radius: 10px;
|
||
--font-display: 'Space Grotesk', sans-serif;
|
||
--font-mono: 'JetBrains Mono', monospace;
|
||
--font-body: 'Ubuntu', sans-serif;
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
body {
|
||
background: radial-gradient(1200px 700px at 15% -10%, #FFFFFF 0%, var(--bg) 55%);
|
||
color: var(--text);
|
||
font-family: var(--font-body);
|
||
padding: 16px;
|
||
min-width: 1100px;
|
||
}
|
||
|
||
.canvas {
|
||
width: 100%;
|
||
max-width: 1680px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.layout {
|
||
display: grid;
|
||
grid-template-columns: 260px 1fr 350px;
|
||
gap: 14px;
|
||
align-items: start;
|
||
}
|
||
|
||
/* ============ COLUMNA IZQUIERDA (RAIL DE CONTROL) ============ */
|
||
.rail {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 11px;
|
||
background: var(--panel);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
padding: 12px;
|
||
box-shadow: 0 1px 4px rgba(23,27,36,.06);
|
||
}
|
||
|
||
.rail-block {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
|
||
.rail-block + .rail-block {
|
||
border-top: 1px solid var(--border-soft);
|
||
padding-top: 10px;
|
||
}
|
||
|
||
.rail-logo {
|
||
text-align: center;
|
||
padding: 4px 0;
|
||
}
|
||
|
||
.rail-logo img {
|
||
height: 26px;
|
||
max-height: 28px;
|
||
width: auto;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.rail-session {
|
||
font-family: var(--font-mono);
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
color: var(--text-dim);
|
||
text-transform: uppercase;
|
||
letter-spacing: .08em;
|
||
margin-top: 4px;
|
||
text-align: center;
|
||
}
|
||
|
||
.rail-lbl {
|
||
font-family: var(--font-mono);
|
||
font-size: 10px;
|
||
letter-spacing: .08em;
|
||
color: var(--text-faint);
|
||
text-transform: uppercase;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.rail-btns {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
}
|
||
|
||
.btn {
|
||
font-family: var(--font-display);
|
||
font-weight: 600;
|
||
font-size: 11px;
|
||
padding: 6px 10px;
|
||
border-radius: 6px;
|
||
border: 1px solid var(--border);
|
||
background: var(--panel-2);
|
||
color: var(--text);
|
||
white-space: nowrap;
|
||
text-align: center;
|
||
display: block;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.btn:hover {
|
||
background: var(--border-soft);
|
||
color: var(--text);
|
||
}
|
||
|
||
.btn-primary {
|
||
background: var(--gold);
|
||
color: #FFFDF6;
|
||
border-color: var(--gold);
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background: #a2750a;
|
||
border-color: #a2750a;
|
||
color: #FFFDF6;
|
||
}
|
||
|
||
.tq-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 6px;
|
||
}
|
||
|
||
.trimestre-tabs {
|
||
display: flex;
|
||
gap: 3px;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.trimestre-tab {
|
||
width: 22px;
|
||
height: 22px;
|
||
border-radius: 5px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-family: var(--font-mono);
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
border: 1px solid var(--border);
|
||
color: var(--text-dim);
|
||
background: var(--panel-2);
|
||
cursor: default;
|
||
}
|
||
|
||
.trimestre-tab[style*="068bc3"],
|
||
.trimestre-tab[style*="6, 139, 195"] {
|
||
background-color: var(--gold) !important;
|
||
border-color: var(--gold) !important;
|
||
color: #FFFDF6 !important;
|
||
}
|
||
|
||
.quincena-stepper {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.step-btn {
|
||
width: 22px;
|
||
height: 22px;
|
||
border-radius: 5px;
|
||
border: 1px solid var(--border);
|
||
background: var(--panel-2);
|
||
color: var(--text);
|
||
font-family: var(--font-mono);
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.step-btn:hover {
|
||
background: var(--border);
|
||
}
|
||
|
||
.quincena-value {
|
||
font-family: var(--font-mono);
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
width: 22px;
|
||
text-align: center;
|
||
border: none;
|
||
background: transparent;
|
||
color: var(--text);
|
||
outline: none;
|
||
}
|
||
|
||
.timer-face {
|
||
font-family: var(--font-mono);
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
letter-spacing: .03em;
|
||
background: #ffffffff;
|
||
border: 1px solid var(--border);
|
||
border-radius: 6px;
|
||
padding: 6px 0;
|
||
color: var(--gold);
|
||
text-align: center;
|
||
}
|
||
|
||
.timer-sub {
|
||
font-family: var(--font-mono);
|
||
font-size: 9.5px;
|
||
color: var(--text-faint);
|
||
text-align: center;
|
||
margin-top: 3px;
|
||
}
|
||
|
||
#timeRange {
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
accent-color: var(--gold);
|
||
height: 4px;
|
||
border-radius: 2px;
|
||
background: var(--border);
|
||
outline: none;
|
||
margin-top: 6px;
|
||
}
|
||
|
||
#timeRange::-webkit-slider-thumb {
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
width: 14px;
|
||
height: 14px;
|
||
border-radius: 50%;
|
||
background: var(--gold);
|
||
cursor: pointer;
|
||
border: none;
|
||
}
|
||
|
||
#timeRange::-moz-range-thumb {
|
||
width: 14px;
|
||
height: 14px;
|
||
border-radius: 50%;
|
||
background: var(--gold);
|
||
cursor: pointer;
|
||
border: none;
|
||
}
|
||
|
||
.resgen-block {
|
||
background: var(--panel-2);
|
||
border: 1px solid var(--border-soft);
|
||
border-radius: 8px;
|
||
padding: 8px;
|
||
text-align: center;
|
||
}
|
||
|
||
.resgen-buttons {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 6px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
#RGR, #asignarRecursos {
|
||
background: var(--gold) !important;
|
||
color: #FFFDF6 !important;
|
||
border: 1px solid var(--gold) !important;
|
||
font-family: var(--font-display) !important;
|
||
font-weight: 600 !important;
|
||
font-size: 11px !important;
|
||
padding: 5px 10px !important;
|
||
border-radius: 6px !important;
|
||
cursor: pointer !important;
|
||
transition: all 0.15s ease !important;
|
||
box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
|
||
text-shadow: none !important;
|
||
}
|
||
|
||
#RGR:hover, #asignarRecursos:hover:not(.ui-state-disabled) {
|
||
background: #a2750a !important;
|
||
border-color: #a2750a !important;
|
||
color: #FFFDF6 !important;
|
||
}
|
||
|
||
#asignarRecursos.ui-state-disabled, #asignarRecursos:disabled {
|
||
background: var(--border) !important;
|
||
border-color: var(--border) !important;
|
||
color: var(--text-faint) !important;
|
||
opacity: 0.55 !important;
|
||
cursor: not-allowed !important;
|
||
}
|
||
|
||
/* Sobrescritura del estado activo de jQuery UI (.ui-state-active) a Dorado var(--gold) */
|
||
.ui-state-active,
|
||
.ui-widget-content .ui-state-active,
|
||
.ui-widget-header .ui-state-active,
|
||
a.ui-button:active,
|
||
.ui-button:active,
|
||
.ui-button.ui-state-active:hover,
|
||
label[for="habilidadesAcreditadas"].ui-state-active,
|
||
label[for="habilidadesAcreditadas"]:active,
|
||
label[for="habilidadesAcreditadas"]:focus {
|
||
border: 1px solid var(--gold) !important;
|
||
background: var(--gold) !important;
|
||
background-color: var(--gold) !important;
|
||
color: #FFFDF6 !important;
|
||
}
|
||
|
||
/* Checkbox y label de Capacitaciones */
|
||
#habilidadesAcreditadas {
|
||
accent-color: var(--gold);
|
||
cursor: pointer;
|
||
width: 14px;
|
||
height: 14px;
|
||
}
|
||
|
||
#habilidadesAcreditadas:checked + label,
|
||
label[for="habilidadesAcreditadas"].ui-checkboxradio-checked,
|
||
label[for="habilidadesAcreditadas"].ui-state-active {
|
||
color: #FFFDF6 !important;
|
||
font-weight: 700 !important;
|
||
background: var(--gold) !important;
|
||
background-color: var(--gold) !important;
|
||
border: 1px solid var(--gold) !important;
|
||
border-radius: 4px;
|
||
padding: 2px 6px;
|
||
}
|
||
|
||
/* Botones de Acciones Quincenales (#bAccion1, #bAccion2) */
|
||
#bAccion1, #bAccion2 {
|
||
font-family: var(--font-mono) !important;
|
||
font-weight: 700 !important;
|
||
font-size: 12px !important;
|
||
padding: 6px 16px !important;
|
||
border-radius: 6px !important;
|
||
border: 1px solid var(--border) !important;
|
||
background: var(--panel-2) !important;
|
||
color: var(--text) !important;
|
||
cursor: pointer !important;
|
||
transition: all 0.15s ease !important;
|
||
min-width: 44px !important;
|
||
text-align: center !important;
|
||
box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
|
||
}
|
||
|
||
#bAccion1:hover, #bAccion2:hover {
|
||
border-color: var(--gold) !important;
|
||
background: var(--panel) !important;
|
||
}
|
||
|
||
/* Sobrescritura del color azul inyectado por JS a dorado */
|
||
#bAccion1[style*="068bc3"], #bAccion1[style*="6, 139, 195"],
|
||
#bAccion2[style*="068bc3"], #bAccion2[style*="6, 139, 195"] {
|
||
background-color: var(--gold) !important;
|
||
border-color: var(--gold) !important;
|
||
color: #FFFDF6 !important;
|
||
box-shadow: 0 2px 5px rgba(185,134,14,0.3) !important;
|
||
}
|
||
|
||
#recRand1, #recRand2, #recRand3, #recRand4 {
|
||
display: none;
|
||
}
|
||
|
||
#recRand1:has(img),
|
||
#recRand2:has(img),
|
||
#recRand3:has(img),
|
||
#recRand4:has(img) {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: var(--panel);
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
padding: 4px 6px;
|
||
box-shadow: 0 1px 3px rgba(23,27,36,.06);
|
||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||
min-width: 38px;
|
||
min-height: 38px;
|
||
}
|
||
|
||
#recRand1:has(img):hover,
|
||
#recRand2:has(img):hover,
|
||
#recRand3:has(img):hover,
|
||
#recRand4:has(img):hover {
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 2px 5px rgba(0,0,0,.1);
|
||
}
|
||
|
||
/* Reemplazo visual automático de imágenes de recursos por íconos SVG vectoriales modernos */
|
||
#recRand1 img[src*="tiempo"],
|
||
#recRand2 img[src*="tiempo"],
|
||
#recRand3 img[src*="tiempo"],
|
||
#recRand4 img[src*="tiempo"] {
|
||
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="%23B9860E" stroke-width="2.2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.2 3.2" stroke-linecap="round" stroke-linejoin="round"/></svg>') !important;
|
||
width: 28px !important;
|
||
height: 28px !important;
|
||
}
|
||
|
||
#recRand1 img[src*="personal"],
|
||
#recRand2 img[src*="personal"],
|
||
#recRand3 img[src*="personal"],
|
||
#recRand4 img[src*="personal"] {
|
||
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="%230E86A8" stroke-width="2.2"><circle cx="12" cy="7.5" r="3.6" fill="%230E86A8"/><path d="M4.5 20c.7-4.6 4-7 7.5-7s6.8 2.4 7.5 7" stroke-linecap="round"/></svg>') !important;
|
||
width: 28px !important;
|
||
height: 28px !important;
|
||
}
|
||
|
||
#recRand1 img[src*="capital"],
|
||
#recRand2 img[src*="capital"],
|
||
#recRand3 img[src*="capital"],
|
||
#recRand4 img[src*="capital"] {
|
||
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="%238A38C4" stroke-width="2.2"><circle cx="12" cy="12" r="9"/><text x="12" y="15.5" text-anchor="middle" font-size="11" font-family="Arial, sans-serif" font-weight="700" fill="%238A38C4">$</text></svg>') !important;
|
||
width: 28px !important;
|
||
height: 28px !important;
|
||
}
|
||
|
||
.departamentos img[src*="tiempo"] {
|
||
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="%23B9860E" stroke-width="2.2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.2 3.2" stroke-linecap="round" stroke-linejoin="round"/></svg>') !important;
|
||
width: 22px !important;
|
||
height: 22px !important;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.departamentos img[src*="personal"] {
|
||
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="%230E86A8" stroke-width="2.2"><circle cx="12" cy="7.5" r="3.6" fill="%230E86A8"/><path d="M4.5 20c.7-4.6 4-7 7.5-7s6.8 2.4 7.5 7" stroke-linecap="round"/></svg>') !important;
|
||
width: 22px !important;
|
||
height: 22px !important;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.departamentos img[src*="capital"] {
|
||
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="%238A38C4" stroke-width="2.2"><circle cx="12" cy="12" r="9"/><text x="12" y="15.5" text-anchor="middle" font-size="11" font-family="Arial, sans-serif" font-weight="700" fill="%238A38C4">$</text></svg>') !important;
|
||
width: 22px !important;
|
||
height: 22px !important;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
table.activos {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 11px;
|
||
background: var(--panel);
|
||
border: 1px solid var(--border);
|
||
border-radius: 6px;
|
||
}
|
||
|
||
table.activos th {
|
||
background: #e9e9e9;
|
||
padding: 4px;
|
||
font-size: 11px;
|
||
text-align: center;
|
||
}
|
||
|
||
table.activos td {
|
||
padding: 4px;
|
||
border-top: 1px solid var(--border-soft);
|
||
text-align: center;
|
||
}
|
||
|
||
/* Variables de Colores de Activos según la propuesta de diseño */
|
||
:root {
|
||
--a-personal: #C79A16;
|
||
--a-analistas: #C97324;
|
||
--a-flujo: #2F9E5B;
|
||
--a-credito: #2F6FE0;
|
||
--a-tecnologia: #C6432B;
|
||
--a-transporte: #1F3B73;
|
||
}
|
||
|
||
/* Clases de colores de activos */
|
||
.actNinguno { background-color: #FFFFFF; color: var(--text) !important; }
|
||
|
||
.actPersonalCalificado {
|
||
background-color: var(--a-personal) !important;
|
||
color: #FFFFFF !important;
|
||
font-weight: 600;
|
||
}
|
||
.actAnalistas {
|
||
background-color: var(--a-analistas) !important;
|
||
color: #FFFFFF !important;
|
||
font-weight: 600;
|
||
}
|
||
.actFlujoDeEfectivo {
|
||
background-color: var(--a-flujo) !important;
|
||
color: #FFFFFF !important;
|
||
font-weight: 600;
|
||
}
|
||
.actCreditoEInversion {
|
||
background-color: var(--a-credito) !important;
|
||
color: #FFFFFF !important;
|
||
font-weight: 600;
|
||
}
|
||
.actTecnologia {
|
||
background-color: var(--a-tecnologia) !important;
|
||
color: #FFFFFF !important;
|
||
font-weight: 600;
|
||
}
|
||
.actTransporteYMaquinaria {
|
||
background-color: var(--a-transporte) !important;
|
||
color: #FFFFFF !important;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* Estilo pill/chip para los activos en tarjetas de departamento chicos */
|
||
.activo-item {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 14px !important;
|
||
padding: 0 10px !important;
|
||
height: 28px !important;
|
||
font-size: 9px !important;
|
||
font-weight: 700 !important;
|
||
cursor: pointer;
|
||
line-height: 1.2;
|
||
white-space: nowrap;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.activo-item.actPersonalCalificado {
|
||
border: 1.5px solid var(--a-personal) !important;
|
||
background: #FFFDF4 !important;
|
||
color: var(--a-personal) !important;
|
||
}
|
||
.activo-item.actPersonalCalificado::before {
|
||
content: "Pers. ×";
|
||
margin-right: 1px;
|
||
}
|
||
|
||
.activo-item.actAnalistas {
|
||
border: 1.5px solid var(--a-analistas) !important;
|
||
background: #FFF9F3 !important;
|
||
color: var(--a-analistas) !important;
|
||
}
|
||
.activo-item.actAnalistas::before {
|
||
content: "Anali. ×";
|
||
margin-right: 1px;
|
||
}
|
||
|
||
.activo-item.actFlujoDeEfectivo {
|
||
border: 1.5px solid var(--a-flujo) !important;
|
||
background: #F3FAF5 !important;
|
||
color: var(--a-flujo) !important;
|
||
}
|
||
.activo-item.actFlujoDeEfectivo::before {
|
||
content: "Flujo ×";
|
||
margin-right: 1px;
|
||
}
|
||
|
||
.activo-item.actCreditoEInversion {
|
||
border: 1.5px solid var(--a-credito) !important;
|
||
background: #F3F7FE !important;
|
||
color: var(--a-credito) !important;
|
||
}
|
||
.activo-item.actCreditoEInversion::before {
|
||
content: "Créd. ×";
|
||
margin-right: 1px;
|
||
}
|
||
|
||
.activo-item.actTecnologia {
|
||
border: 1.5px solid var(--a-tecnologia) !important;
|
||
background: #FDF4F2 !important;
|
||
color: var(--a-tecnologia) !important;
|
||
}
|
||
.activo-item.actTecnologia::before {
|
||
content: "Tecno. ×";
|
||
margin-right: 1px;
|
||
}
|
||
|
||
.activo-item.actTransporteYMaquinaria {
|
||
border: 1.5px solid var(--a-transporte) !important;
|
||
background: #F3F5FA !important;
|
||
color: var(--a-transporte) !important;
|
||
}
|
||
.activo-item.actTransporteYMaquinaria::before {
|
||
content: "Transp. ×";
|
||
margin-right: 1px;
|
||
}
|
||
|
||
.ui-draggable-dragging {
|
||
z-index: 999999 !important;
|
||
}
|
||
|
||
.draggable, .proyectoEncabezado, #activoReqProyectoNom1, #activoReqProyectoNom2, #activoReqProyectoNom3, .departamentos, #accionGestionarProyecto, #accionComprarCapacitacion, #accionHabilidadEspecial {
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* ============ PROYECTO DESTACADO / EN TURNO (GRANDE) ============ */
|
||
.proj-featured {
|
||
background: var(--panel-2);
|
||
border: 1.5px solid var(--gold);
|
||
border-radius: 10px;
|
||
padding: 14px 12px 10px 12px;
|
||
position: relative;
|
||
z-index: 1;
|
||
box-shadow: 0 0 18px -8px rgba(185,134,14,.4);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.featured-flag {
|
||
position: absolute;
|
||
top: -9px;
|
||
left: 14px;
|
||
background: var(--gold);
|
||
color: #FFFDF6;
|
||
font-family: var(--font-mono);
|
||
font-size: 8.5px;
|
||
font-weight: 700;
|
||
letter-spacing: .06em;
|
||
padding: 2px 9px;
|
||
border-radius: 4px;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.pf-grid {
|
||
display: grid;
|
||
grid-template-columns: 1.2fr 0.8fr;
|
||
gap: 10px;
|
||
align-items: center;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.pf-text {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.pf-title-block {
|
||
font-family: var(--font-body);
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
line-height: 1.2;
|
||
color: var(--text);
|
||
display: flex;
|
||
flex-direction: column-reverse;
|
||
}
|
||
|
||
.pf-title-block span {
|
||
font-family: var(--font-mono);
|
||
font-size: 9px;
|
||
letter-spacing: .08em;
|
||
color: var(--text-faint);
|
||
text-transform: uppercase;
|
||
font-weight: 700;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.pf-desc {
|
||
font-size: 10.5px;
|
||
color: var(--text-dim);
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.pf-image-box {
|
||
width: 100%;
|
||
height: 95px;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
background: #ffffff;
|
||
border: 1px solid var(--border-soft);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 2px;
|
||
}
|
||
|
||
.pf-image-box img {
|
||
max-width: 100%;
|
||
max-height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.pf-money {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-family: var(--font-mono);
|
||
font-size: 10.5px;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.pf-money .potencial {
|
||
color: var(--green-ok) !important;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.pf-money .penal {
|
||
color: var(--red) !important;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.pf-assets-row {
|
||
display: flex;
|
||
gap: 6px;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.pf-asset-box {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 4px 2px;
|
||
border-radius: 8px;
|
||
border: 1.5px solid var(--border);
|
||
background: var(--panel);
|
||
text-align: center;
|
||
transition: all 0.15s ease;
|
||
}
|
||
|
||
#activoReqProyectoNom1, #activoReqProyectoNom2, #activoReqProyectoNom3 {
|
||
display: block !important;
|
||
font-size: 9px !important;
|
||
color: transparent !important; /* Oculta la cadena larga original de jsCode.js */
|
||
background: transparent !important;
|
||
background-color: transparent !important;
|
||
border: none !important;
|
||
box-shadow: none !important;
|
||
padding: 0 !important;
|
||
margin: 0 !important;
|
||
line-height: 1.2;
|
||
width: 100%;
|
||
text-align: center;
|
||
position: relative;
|
||
height: 14px;
|
||
}
|
||
|
||
#activoReqProyectoNom1::before,
|
||
#activoReqProyectoNom2::before,
|
||
#activoReqProyectoNom3::before {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-family: var(--font-mono);
|
||
font-size: 9px;
|
||
font-weight: 700;
|
||
letter-spacing: .04em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
#activoReqProyectoNom1.actPersonalCalificado::before,
|
||
#activoReqProyectoNom2.actPersonalCalificado::before,
|
||
#activoReqProyectoNom3.actPersonalCalificado::before {
|
||
content: "PERS. CAL.";
|
||
color: var(--a-personal) !important;
|
||
}
|
||
#activoReqProyectoNom1.actAnalistas::before,
|
||
#activoReqProyectoNom2.actAnalistas::before,
|
||
#activoReqProyectoNom3.actAnalistas::before {
|
||
content: "ANALISTAS";
|
||
color: var(--a-analistas) !important;
|
||
}
|
||
#activoReqProyectoNom1.actFlujoDeEfectivo::before,
|
||
#activoReqProyectoNom2.actFlujoDeEfectivo::before,
|
||
#activoReqProyectoNom3.actFlujoDeEfectivo::before {
|
||
content: "FLUJO EFVO.";
|
||
color: var(--a-flujo) !important;
|
||
}
|
||
#activoReqProyectoNom1.actCreditoEInversion::before,
|
||
#activoReqProyectoNom2.actCreditoEInversion::before,
|
||
#activoReqProyectoNom3.actCreditoEInversion::before {
|
||
content: "CRÉD. E INV.";
|
||
color: var(--a-credito) !important;
|
||
}
|
||
#activoReqProyectoNom1.actTecnologia::before,
|
||
#activoReqProyectoNom2.actTecnologia::before,
|
||
#activoReqProyectoNom3.actTecnologia::before {
|
||
content: "TECNOLOGÍA";
|
||
color: var(--a-tecnologia) !important;
|
||
}
|
||
#activoReqProyectoNom1.actTransporteYMaquinaria::before,
|
||
#activoReqProyectoNom2.actTransporteYMaquinaria::before,
|
||
#activoReqProyectoNom3.actTransporteYMaquinaria::before {
|
||
content: "TRANSP./MAQ.";
|
||
color: var(--a-transporte) !important;
|
||
}
|
||
|
||
.pf-asset-val {
|
||
font-family: var(--font-mono);
|
||
font-size: 14px;
|
||
font-weight: 800;
|
||
line-height: 1.1;
|
||
margin-top: 2px;
|
||
color: var(--text);
|
||
}
|
||
|
||
/* Estilos de bordes y fondos claros de los asset boxes según el tipo de activo */
|
||
.pf-asset-box:has(.actPersonalCalificado) {
|
||
border: 1.5px solid var(--a-personal) !important;
|
||
background: #FFFDF4 !important;
|
||
}
|
||
.pf-asset-box:has(.actAnalistas) {
|
||
border: 1.5px solid var(--a-analistas) !important;
|
||
background: #FFF9F3 !important;
|
||
}
|
||
.pf-asset-box:has(.actFlujoDeEfectivo) {
|
||
border: 1.5px solid var(--a-flujo) !important;
|
||
background: #F3FAF5 !important;
|
||
}
|
||
.pf-asset-box:has(.actCreditoEInversion) {
|
||
border: 1.5px solid var(--a-credito) !important;
|
||
background: #F3F7FE !important;
|
||
}
|
||
.pf-asset-box:has(.actTecnologia) {
|
||
border: 1.5px solid var(--a-tecnologia) !important;
|
||
background: #FDF4F2 !important;
|
||
}
|
||
.pf-asset-box:has(.actTransporteYMaquinaria) {
|
||
border: 1.5px solid var(--a-transporte) !important;
|
||
background: #F3F5FA !important;
|
||
}
|
||
|
||
/* Fila de Activos Pagados / Asignados (#activosProyectoGde) */
|
||
.pf-paid-row {
|
||
display: flex;
|
||
gap: 6px;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.pf-paid-box {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 3px 6px;
|
||
border-radius: 6px;
|
||
border: 1.5px solid var(--border-soft);
|
||
background: var(--panel-2);
|
||
font-family: var(--font-mono);
|
||
text-align: center;
|
||
}
|
||
|
||
#activoReqProyectoCant1,
|
||
#activoReqProyectoCant2,
|
||
#activoReqProyectoCant3 {
|
||
font-family: var(--font-mono) !important;
|
||
font-size: 14px !important;
|
||
font-weight: 800 !important;
|
||
line-height: 1.1 !important;
|
||
background: transparent !important;
|
||
background-color: transparent !important;
|
||
border: none !important;
|
||
box-shadow: none !important;
|
||
padding: 0 !important;
|
||
margin: 0 !important;
|
||
}
|
||
|
||
#activoReqProyectoCant1.actPersonalCalificado,
|
||
#activoReqProyectoCant2.actPersonalCalificado,
|
||
#activoReqProyectoCant3.actPersonalCalificado {
|
||
color: var(--a-personal) !important;
|
||
}
|
||
#activoReqProyectoCant1.actAnalistas,
|
||
#activoReqProyectoCant2.actAnalistas,
|
||
#activoReqProyectoCant3.actAnalistas {
|
||
color: var(--a-analistas) !important;
|
||
}
|
||
#activoReqProyectoCant1.actFlujoDeEfectivo,
|
||
#activoReqProyectoCant2.actFlujoDeEfectivo,
|
||
#activoReqProyectoCant3.actFlujoDeEfectivo {
|
||
color: var(--a-flujo) !important;
|
||
}
|
||
#activoReqProyectoCant1.actCreditoEInversion,
|
||
#activoReqProyectoCant2.actCreditoEInversion,
|
||
#activoReqProyectoCant3.actCreditoEInversion {
|
||
color: var(--a-credito) !important;
|
||
}
|
||
#activoReqProyectoCant1.actTecnologia,
|
||
#activoReqProyectoCant2.actTecnologia,
|
||
#activoReqProyectoCant3.actTecnologia {
|
||
color: var(--a-tecnologia) !important;
|
||
}
|
||
#activoReqProyectoCant1.actTransporteYMaquinaria,
|
||
#activoReqProyectoCant2.actTransporteYMaquinaria,
|
||
#activoReqProyectoCant3.actTransporteYMaquinaria {
|
||
color: var(--a-transporte) !important;
|
||
}
|
||
|
||
.pf-foot {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 9.5px;
|
||
color: var(--text-faint);
|
||
border-top: 1px solid var(--border-soft);
|
||
padding-top: 6px;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.manto {
|
||
font-family: var(--font-mono);
|
||
font-weight: 600;
|
||
color: var(--text-dim);
|
||
background: transparent !important;
|
||
}
|
||
|
||
.status-badge {
|
||
font-family: var(--font-mono);
|
||
font-size: 8px;
|
||
font-weight: 700;
|
||
padding: 2px 7px;
|
||
border-radius: 9px;
|
||
background: var(--panel);
|
||
border: 1px solid var(--border);
|
||
color: var(--text-dim);
|
||
}
|
||
|
||
/* ============ PROYECTOS SECUNDARIOS / ACTIVOS (PROYECTOS CHICOS 1 AL 6) ============ */
|
||
.proj-grid-sm {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 10px;
|
||
margin-top: 6px;
|
||
}
|
||
|
||
.proj-card-sm {
|
||
width: 100%;
|
||
min-width: 0;
|
||
}
|
||
|
||
.pm-card {
|
||
background: var(--panel-2);
|
||
border: 1.5px solid var(--border);
|
||
border-radius: 8px;
|
||
padding: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
box-shadow: 0 1px 3px rgba(0,0,0,.04);
|
||
transition: all 0.15s ease;
|
||
position: relative;
|
||
cursor: pointer;
|
||
min-height: 125px;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.pm-card:hover {
|
||
border-color: #A0AABF;
|
||
box-shadow: 0 3px 8px rgba(0,0,0,.08);
|
||
}
|
||
|
||
.pm-header {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
width: 100%;
|
||
}
|
||
|
||
.pm-dept {
|
||
font-family: var(--font-mono);
|
||
font-size: 8px;
|
||
font-weight: 700;
|
||
letter-spacing: .06em;
|
||
color: var(--text-faint);
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.pm-title {
|
||
font-family: var(--font-body);
|
||
font-size: 11.5px;
|
||
font-weight: 700;
|
||
color: var(--text);
|
||
line-height: 1.25;
|
||
width: 100%;
|
||
word-wrap: break-word;
|
||
overflow-wrap: break-word;
|
||
}
|
||
|
||
.pm-puntos {
|
||
font-family: var(--font-mono);
|
||
font-size: 8.5px;
|
||
font-weight: 700;
|
||
color: var(--green-ok);
|
||
line-height: 1.2;
|
||
word-wrap: break-word;
|
||
overflow-wrap: break-word;
|
||
margin-top: 1px;
|
||
}
|
||
|
||
.pm-desc {
|
||
font-size: 9.5px;
|
||
color: var(--text-dim);
|
||
line-height: 1.35;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* Activos Requeridos Compactos en Proyectos Chicos (Inmunes a jsCode.js class wipes) */
|
||
.pm-assets-row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 4px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.pm-card #activoReq1,
|
||
.pm-card #activoReq2,
|
||
.pm-card #activoReq3 {
|
||
display: inline-flex !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
border-radius: 12px !important;
|
||
padding: 2px 7px !important;
|
||
font-family: var(--font-mono) !important;
|
||
font-size: 9px !important;
|
||
font-weight: 700 !important;
|
||
line-height: 1.2 !important;
|
||
white-space: nowrap !important;
|
||
margin: 1px !important;
|
||
}
|
||
|
||
.pm-card #activoReq1.actPersonalCalificado,
|
||
.pm-card #activoReq2.actPersonalCalificado,
|
||
.pm-card #activoReq3.actPersonalCalificado {
|
||
border: 1.5px solid var(--a-personal) !important;
|
||
background: #FFFDF4 !important;
|
||
color: var(--a-personal) !important;
|
||
}
|
||
.pm-card #activoReq1.actPersonalCalificado::before,
|
||
.pm-card #activoReq2.actPersonalCalificado::before,
|
||
.pm-card #activoReq3.actPersonalCalificado::before {
|
||
content: "● ";
|
||
}
|
||
|
||
.pm-card #activoReq1.actAnalistas,
|
||
.pm-card #activoReq2.actAnalistas,
|
||
.pm-card #activoReq3.actAnalistas {
|
||
border: 1.5px solid var(--a-analistas) !important;
|
||
background: #FFF9F3 !important;
|
||
color: var(--a-analistas) !important;
|
||
}
|
||
.pm-card #activoReq1.actAnalistas::before,
|
||
.pm-card #activoReq2.actAnalistas::before,
|
||
.pm-card #activoReq3.actAnalistas::before {
|
||
content: "● ";
|
||
}
|
||
|
||
.pm-card #activoReq1.actFlujoDeEfectivo,
|
||
.pm-card #activoReq2.actFlujoDeEfectivo,
|
||
.pm-card #activoReq3.actFlujoDeEfectivo {
|
||
border: 1.5px solid var(--a-flujo) !important;
|
||
background: #F3FAF5 !important;
|
||
color: var(--a-flujo) !important;
|
||
}
|
||
.pm-card #activoReq1.actFlujoDeEfectivo::before,
|
||
.pm-card #activoReq2.actFlujoDeEfectivo::before,
|
||
.pm-card #activoReq3.actFlujoDeEfectivo::before {
|
||
content: "● ";
|
||
}
|
||
|
||
.pm-card #activoReq1.actCreditoEInversion,
|
||
.pm-card #activoReq2.actCreditoEInversion,
|
||
.pm-card #activoReq3.actCreditoEInversion {
|
||
border: 1.5px solid var(--a-credito) !important;
|
||
background: #F3F7FE !important;
|
||
color: var(--a-credito) !important;
|
||
}
|
||
.pm-card #activoReq1.actCreditoEInversion::before,
|
||
.pm-card #activoReq2.actCreditoEInversion::before,
|
||
.pm-card #activoReq3.actCreditoEInversion::before {
|
||
content: "● ";
|
||
}
|
||
|
||
.pm-card #activoReq1.actTecnologia,
|
||
.pm-card #activoReq2.actTecnologia,
|
||
.pm-card #activoReq3.actTecnologia {
|
||
border: 1.5px solid var(--a-tecnologia) !important;
|
||
background: #FDF4F2 !important;
|
||
color: var(--a-tecnologia) !important;
|
||
}
|
||
.pm-card #activoReq1.actTecnologia::before,
|
||
.pm-card #activoReq2.actTecnologia::before,
|
||
.pm-card #activoReq3.actTecnologia::before {
|
||
content: "● ";
|
||
}
|
||
|
||
.pm-card #activoReq1.actTransporteYMaquinaria,
|
||
.pm-card #activoReq2.actTransporteYMaquinaria,
|
||
.pm-card #activoReq3.actTransporteYMaquinaria {
|
||
border: 1.5px solid var(--a-transporte) !important;
|
||
background: #F3F5FA !important;
|
||
color: var(--a-transporte) !important;
|
||
}
|
||
.pm-card #activoReq1.actTransporteYMaquinaria::before,
|
||
.pm-card #activoReq2.actTransporteYMaquinaria::before,
|
||
.pm-card #activoReq3.actTransporteYMaquinaria::before {
|
||
content: "● ";
|
||
}
|
||
|
||
.pm-card #activoReq1.actNinguno,
|
||
.pm-card #activoReq2.actNinguno,
|
||
.pm-card #activoReq3.actNinguno,
|
||
.pm-card #activoReq1:empty,
|
||
.pm-card #activoReq2:empty,
|
||
.pm-card #activoReq3:empty {
|
||
display: none !important;
|
||
}
|
||
|
||
/* Mantenimiento en Proyectos Chicos */
|
||
.pm-manto {
|
||
font-family: var(--font-mono);
|
||
font-size: 8.5px;
|
||
font-weight: 700;
|
||
color: var(--text-faint);
|
||
letter-spacing: .04em;
|
||
text-transform: uppercase;
|
||
margin-top: 2px;
|
||
background: transparent !important;
|
||
text-align: center;
|
||
}
|
||
|
||
/* Activos Pagados / Asignados en Proyectos Chicos (Inmunes a jsCode.js class wipes) */
|
||
.pm-paid-row {
|
||
display: flex;
|
||
gap: 4px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.pm-card #activoAsignado1,
|
||
.pm-card #activoAsignado2,
|
||
.pm-card #activoAsignado3 {
|
||
font-family: var(--font-mono) !important;
|
||
font-size: 10px !important;
|
||
font-weight: 800 !important;
|
||
line-height: 1 !important;
|
||
background: transparent !important;
|
||
background-color: transparent !important;
|
||
border: 1px solid #b7b7b7 !important;
|
||
border-radius: 4px !important;
|
||
padding: 2px 7px !important;
|
||
text-align: center !important;
|
||
display: inline-block !important;
|
||
margin: 1px !important;
|
||
}
|
||
|
||
.pm-card #activoAsignado1.actPersonalCalificado,
|
||
.pm-card #activoAsignado2.actPersonalCalificado,
|
||
.pm-card #activoAsignado3.actPersonalCalificado {
|
||
color: var(--a-personal) !important;
|
||
}
|
||
.pm-card #activoAsignado1.actAnalistas,
|
||
.pm-card #activoAsignado2.actAnalistas,
|
||
.pm-card #activoAsignado3.actAnalistas {
|
||
color: var(--a-analistas) !important;
|
||
}
|
||
.pm-card #activoAsignado1.actFlujoDeEfectivo,
|
||
.pm-card #activoAsignado2.actFlujoDeEfectivo,
|
||
.pm-card #activoAsignado3.actFlujoDeEfectivo {
|
||
color: var(--a-flujo) !important;
|
||
}
|
||
.pm-card #activoAsignado1.actCreditoEInversion,
|
||
.pm-card #activoAsignado2.actCreditoEInversion,
|
||
.pm-card #activoAsignado3.actCreditoEInversion {
|
||
color: var(--a-credito) !important;
|
||
}
|
||
.pm-card #activoAsignado1.actTecnologia,
|
||
.pm-card #activoAsignado2.actTecnologia,
|
||
.pm-card #activoAsignado3.actTecnologia {
|
||
color: var(--a-tecnologia) !important;
|
||
}
|
||
.pm-card #activoAsignado1.actTransporteYMaquinaria,
|
||
.pm-card #activoAsignado2.actTransporteYMaquinaria,
|
||
.pm-card #activoAsignado3.actTransporteYMaquinaria {
|
||
color: var(--a-transporte) !important;
|
||
}
|
||
|
||
/* ============ COLUMNA CENTRAL (DEPARTAMENTOS) ============ */
|
||
.col-departamentos {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
.card-depto-gde {
|
||
background: var(--panel);
|
||
border: 2px solid var(--gold);
|
||
border-radius: var(--radius);
|
||
padding: 12px;
|
||
box-shadow: 0 2px 8px rgba(185,134,14,.15);
|
||
}
|
||
|
||
.dept-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 10px;
|
||
}
|
||
|
||
.dept-card-sm {
|
||
background: var(--panel);
|
||
border: 1.5px solid var(--border);
|
||
border-radius: var(--radius);
|
||
padding: 12px;
|
||
box-shadow: 0 1px 3px rgba(23,27,36,.05);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
||
}
|
||
|
||
.dept-card-sm:hover {
|
||
border-color: #A0AABF;
|
||
box-shadow: 0 3px 8px rgba(0,0,0,.08);
|
||
}
|
||
|
||
.dept-header-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.dept-avatar-box {
|
||
width: 65px;
|
||
height: 65px;
|
||
border-radius: 10px;
|
||
background: var(--panel-2);
|
||
border: 1px solid var(--border-soft);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.dept-avatar-box img {
|
||
height: 56px;
|
||
width: auto;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.dept-info-box {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
gap: 1px;
|
||
}
|
||
|
||
.dept-title {
|
||
font-family: var(--font-display);
|
||
font-size: 14.5px;
|
||
font-weight: 700;
|
||
color: var(--text);
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.dept-members {
|
||
font-family: var(--font-body);
|
||
font-size: 10.5px;
|
||
color: var(--text-dim);
|
||
}
|
||
|
||
.dept-habilidad-row {
|
||
width: 100%;
|
||
border: 1px dashed #C3C9D6;
|
||
border-radius: 8px;
|
||
background: var(--panel-2);
|
||
padding: 6px 10px;
|
||
font-size: 11px;
|
||
color: var(--text-dim);
|
||
line-height: 1.3;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.dept-habilidad-lbl {
|
||
font-weight: 700;
|
||
color: var(--text);
|
||
}
|
||
|
||
.dept-resources-assets-row {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.dept-res-chip {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
background: var(--panel-2);
|
||
border: 1px solid var(--border-soft);
|
||
border-radius: 6px;
|
||
padding: 3px 8px;
|
||
height: 28px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.val-tiempo {
|
||
color: #C79A16 !important;
|
||
font-family: var(--font-mono);
|
||
font-weight: 700;
|
||
font-size: 10px;
|
||
}
|
||
|
||
.val-personal {
|
||
color: #0E86A8 !important;
|
||
font-family: var(--font-mono);
|
||
font-weight: 700;
|
||
font-size: 10px;
|
||
}
|
||
|
||
.val-capital {
|
||
color: #8A38C4 !important;
|
||
font-family: var(--font-mono);
|
||
font-weight: 700;
|
||
font-size: 10px;
|
||
}
|
||
|
||
.dept-habilidades-acreditadas-list {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 3px;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.dept-hab-item {
|
||
min-height: 16px;
|
||
color: var(--text);
|
||
font-size: 11px;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
/* ============ COLUMNA DERECHA (PROYECTOS) ============ */
|
||
.col-proyectos {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
.card-proj-gde {
|
||
background: var(--panel);
|
||
border: 2px solid #007bff;
|
||
border-radius: var(--radius);
|
||
padding: 12px;
|
||
box-shadow: 0 2px 8px rgba(0,123,255,.15);
|
||
}
|
||
|
||
.proj-grid-sm {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 10px;
|
||
}
|
||
|
||
.proj-card-sm {
|
||
background: var(--panel);
|
||
border: 1.5px solid var(--border);
|
||
border-radius: var(--radius);
|
||
padding: 8px;
|
||
box-shadow: 0 1px 3px rgba(0,0,0,.04);
|
||
}
|
||
|
||
/* jQuery UI Alert Titlebar crimson theme */
|
||
.ui-dialog-titlebar {
|
||
background-color: crimson;
|
||
color: white;
|
||
}
|
||
.ui-widget.ui-widget-content {
|
||
border-color: crimson;
|
||
border-width: 5px;
|
||
}
|
||
.ui-dialog .ui-dialog-content {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
}
|
||
.ui-dialog .ui-dialog-buttonpane button {
|
||
font-size: 17px;
|
||
}
|
||
</style>
|
||
|
||
<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="resumen.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 class="timer-sub" id="rangeValue">turno de 2 min</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 -->
|
||
<div class="rail-block">
|
||
<div style="display:flex; align-items:center; gap:6px; margin-bottom:4px;">
|
||
<input type="checkbox" name="habilidadesAcreditadas" id="habilidadesAcreditadas">
|
||
<label for="habilidadesAcreditadas" class="rail-lbl" style="cursor:pointer; text-transform:none; font-size:11px;">Capacitaciones</label>
|
||
</div>
|
||
<table id="tablaHabilidadesAcreditadas" actual="" style="height:35px; width:100%; text-align:center; font-size:11px; background:var(--panel-2); border-radius:6px; border:1px solid var(--border-soft);">
|
||
<tr>
|
||
<td><span id="haNombre" style="font-weight:bold;"></span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><span id="haCosto"></span></td>
|
||
</tr>
|
||
</table>
|
||
|
||
<div class="rail-lbl" style="margin-top:8px; margin-bottom:4px;">Acciones Quincenales</div>
|
||
<div style="display:flex; gap:8px; justify-content:center;">
|
||
<button id="bAccion1" onclick="toggleColor(this)">1</button>
|
||
<button id="bAccion2" onclick="toggleColor(this)">2</button>
|
||
</div>
|
||
</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">ACTIVOS</th>
|
||
<th>Prod.</th>
|
||
<th>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>
|
||
|
||
<!-- 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:10.5px; border-radius:6px; background:var(--panel-2);">
|
||
<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>
|
||
|
||
<!-- 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> |