<!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>