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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Resumen de Colaborando</title>
    <!-- Estilos y scripts base de colaborando2.php -->
    <link rel="stylesheet" href="js/jquery-ui.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');

        body,
        input,
        button {
            font-family: 'Ubuntu', sans-serif;
            font-size: 14px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        .draggable {
            cursor: pointer;
        }

        /* --- Estilos para la nueva maqueta --- */
        .main-container {
            display: flex;
            gap: 15px;
            padding: 10px;
        }

        .column {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .column-left {
            flex: 1 1 0px;
            /* 1/5 del ancho */
        }

        .column-depts {
            flex: 1 1 0px;
            /* 1/5 del ancho */
        }

        .column-completed {
            flex: 1 1 0px;
            /* 1/5 del ancho */
        }

        .column-active {
            flex: 2 1 0px;
            /* 2/5 del ancho */
        }

        .card {
            border: 2px solid #ccc;
            border-radius: 5px;
            padding: 5px;
            background-color: #f9f9f9;
        }

        h2 {
            text-align: center;
            margin-top: 0;
            font-size: 1.2em;
            background-color: gray;
            color: white;
            padding: 5px;
            border-radius: 3px;
        }

        /* Estilos para las tablas de resumen */
        .summary-table {
            font-size: 12px;
        }

        .summary-table th,
        .summary-table td {
            border: 1px solid #ddd;
            padding: 4px;
            text-align: center;
        }

        .summary-table th {
            background-color: #e9e9e9;
        }

        /* Estilos para los departamentos en una columna */
        /* Se ajusta el selector para que apunte a los .card dentro de la columna de departamentos,
           restaurando el borde gris y eliminando el padding para que la tabla se ajuste. */
        .column-depts .card {
            padding: 0;
            border: solid 3px gray;
        }

        .departamentos #nombreDeptoCh {
            font-size: 16px;
            font-weight: bold;
        }

        .departamentos td {
            padding: 2px 5px;
        }

        /* Estilos para los proyectos (activos y completados) */
        .project-card {
            border: 2px solid gray;
            font-size: 12px;
            background-color: white;
        }

        .project-card.completado {
            background-color: lightgray;
        }

        .project-header {
            font-weight: bold;
            text-align: center;
            padding: 4px;
            border-bottom: 1px solid gray;
        }

        .project-body {
            padding: 5px;
            text-align: center;
        }

        .project-assets-req,
        .project-assets-asig {
            display: flex;
            justify-content: center;
            gap: 5px;
            margin-top: 5px;
        }

        .project-assets-req span,
        .project-assets-asig span {
            padding: 4px;
            color: white;
            border-radius: 3px;
            min-width: 30px;
            text-align: center;
        }

        .project-footer {
            background-color: silver;
            text-align: center;
            padding: 3px;
            font-size: 11px;
            border-top: 1px solid gray;
        }

        /* Clases de activos (copiadas de colaborando2.php) */
        .actNinguno {
            background-color: white;
            color: black !important;
            border: 1px solid #ccc;
        }

        .actPersonalCalificado {
            background-color: yellow;
            color: black !important;
        }

        .actAnalistas {
            background-color: orange;
            color: black !important;
        }

        .actFlujoDeEfectivo {
            background-color: limegreen;
            color: black !important;
        }

        .actCreditoEInversion {
            background-color: blueviolet;
            color: white !important;
        }

        .actTecnologia {
            background-color: red;
            color: white !important;
        }

        .actTransporteYMaquinaria {
            background-color: blue;
            color: white !important;
        }

        /* Estilo para drag-drop de recuperación */
        .asset-recover {
            cursor: grab;
        }

        .nav-button {
            display: inline-block;
            padding: 6px 10px;
            font-size: 14px;
            font-weight: bold;
            color: #fff !important;
            background-color: #007bff;
            border-radius: 4px;
            text-decoration: none;
            text-align: center;
        }

        .nav-button:hover {
            background-color: #0056b3;
        }

        /* Estilos para que los diálogos/alertas jQuery UI se muestren de color rojo (carmesí) */
        .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>
    <!-- Scripts base -->
    <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="main-container">

        <!-- =================================================================
        COLUMNA 1: RESUMEN GENERAL (IZQUIERDA)
        ================================================================== -->
        <div class="column column-left">
            <div class="card">
                <img id="logo" src="img/logoColaborando-tablero.png">
                <div style="display: flex; justify-content: space-between; align-items: center; padding: 5px 10px;">
                    <div id="nombreSesion" style="font-weight: bold; font-size: 16px; color: #555;"></div>
                    <div style="display: flex; gap: 5px;">
                        <button id="btnFullscreen" onclick="toggleFullscreen()" class="nav-button" style="border: none; cursor: pointer;">Pantalla Completa</button>
                        <a href="colaborando2.php?n=<?php echo htmlspecialchars($_GET['n'] ?? $_GET['nombre'] ?? ''); ?>" class="nav-button">Ir al Tablero</a>
                    </div>
                </div>
            </div>
            <div class="card">
                <table style="width:100%; text-align:center; vertical-align: top;">
                    <tr>
                        <td style="width:40%; padding-top: 20px;">
                            <span id="resumenTrimestre" style="font-size:1.5em; font-weight:bold; color: #007bff;">
                            </span>
                            &nbsp;
                            <span id="resumenQuincena" style="font-size:1.5em; font-weight:bold; color: #007bff;">
                            </span>
                        </td>
                        <td style="width:60%;">
                            <div id="timer"><span id="time" style="font-size:20px;">2:00</span></div>
                            <div class="button-container">
                                <button id="relojStartPauseButton" onclick="relojToggleTimer()">Iniciar</button>
                                <!-- <button onclick="relojPauseTimer()">Pausar</button> -->
                                <button onclick="relojResumeTimer()">Continuar</button>
                            </div>
                            <input type="range" id="timeRange" min="1" max="3" value="1" step="1" oninput="relojUpdateTime()">
                            <div id="rangeValue" style="font-weight: bold;">2 min</div>
                        </td>
                    </tr>
                </table>
                <!-- Hidden elements to keep jsCode.js and other logic working -->
                <div style="display:none;">
                    <div id="trimestre">
                        <table>
                            <tr>
                                <td id="T1">1</td>
                                <td id="T2">2</td>
                                <td id="T3">3</td>
                                <td id="T4">4</td>
                            </tr>
                        </table>
                    </div>
                    <div id="quincena">
                        <table id="tablaQuincena">
                            <tr>
                                <td><button id="bMenos"></button></td>
                                <td><input id="etQuincena" type="text" value="1"></td>
                                <td><button id="bMas"></button></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <div class="card">
                <table id="tablaActivos" class="summary-table">
                    <thead>
                        <tr>
                            <th colspan="2">ACTIVOS</th>
                            <th>Producción</th>
                            <th>Recuperación</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td colspan="2" class="actPersonalCalificado" style="color:black!important;">Personal calificado</td>
                            <td id="activosPersonalCalificado"></td>
                            <td id="recuperacionPersonalCalificado"></td>
                        </tr>
                        <tr>
                            <td colspan="2" class="actAnalistas" style="color:black!important;">Analistas</td>
                            <td id="activosAnalistas"></td>
                            <td id="recuperacionAnalistas"></td>
                        </tr>
                        <tr>
                            <td colspan="2" class="actFlujoDeEfectivo" style="color:black!important;">Flujo de efectivo</td>
                            <td id="activosFlujoDeEfectivo"></td>
                            <td id="recuperacionFlujoDeEfectivo"></td>
                        </tr>
                        <tr>
                            <td colspan="2" class="actCreditoEInversion">Crédito e Inversión</td>
                            <td id="activosCreditoEInversion"></td>
                            <td id="recuperacionCreditoEInversion"></td>
                        </tr>
                        <tr>
                            <td colspan="2" class="actTecnologia">Tecnología</td>
                            <td id="activosTecnologia"></td>
                            <td id="recuperacionTecnologia"></td>
                        </tr>
                        <tr>
                            <td colspan="2" class="actTransporteYMaquinaria">Transporte y Maquinaria</td>
                            <td id="activosTransporteYMaquinaria"></td>
                            <td id="recuperacionTransporteYMaquinaria"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="card">
                <h2>PROGRESIÓN</h2>
                <!-- Aquí se podría agregar una librería de gráficos para la gráfica -->
                <div id="grafico-progresion" style="height: 100px; background-color: #f0f0f0; border: 1px solid #ccc;"></div>
                <table class="summary-table" style="margin-top: 10px;">
                    <thead>
                        <tr>
                            <th></th>
                            <th>T1</th>
                            <th>T2</th>
                            <th>T3</th>
                            <th>T4</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Ingreso</td>
                            <td id="ingresoT1">$0</td>
                            <td id="ingresoT2">$0</td>
                            <td id="ingresoT3">$0</td>
                            <td id="ingresoT4">$0</td>
                        </tr>
                        <tr>
                            <td>Acumulado</td>
                            <td id="acumuladoT1">$0</td>
                            <td id="acumuladoT2">$0</td>
                            <td id="acumuladoT3">$0</td>
                            <td id="acumuladoT4">$0</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="card">
                <h2>PROYECTOS</h2>
                <table id="resumen-proyectos" class="summary-table">
                    <!-- Contenido se llenará con JS -->
                </table>
            </div>
            <div class="card">
                <h2>INCIDENCIAS</h2>
                <table id="resumen-incidencias" class="summary-table">
                    <!-- Contenido se llenará con JS -->
                </table>
            </div>
            <div class="card">
                <h2>CONTABILIZACIÓN DE ACTIVOS</h2>
                <table id="tablaConteoActivos" class="summary-table">
                    <thead>
                        <tr>
                            <th>Activo</th>
                            <th>Producidos</th>
                            <th>Recuperados</th>
                            <th>Perdidos</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="actPersonalCalificado" style="color:black!important; font-weight: bold; text-align: left;">Personal calificado</td>
                            <td id="conteoProducidosPersonalCalificado">0</td>
                            <td id="conteoRecuperadosPersonalCalificado">0</td>
                            <td id="conteoPerdidosPersonalCalificado">0</td>
                        </tr>
                        <tr>
                            <td class="actAnalistas" style="color:black!important; font-weight: bold; text-align: left;">Analistas</td>
                            <td id="conteoProducidosAnalistas">0</td>
                            <td id="conteoRecuperadosAnalistas">0</td>
                            <td id="conteoPerdidosAnalistas">0</td>
                        </tr>
                        <tr>
                            <td class="actFlujoDeEfectivo" style="color:black!important; font-weight: bold; text-align: left;">Flujo de efectivo</td>
                            <td id="conteoProducidosFlujoDeEfectivo">0</td>
                            <td id="conteoRecuperadosFlujoDeEfectivo">0</td>
                            <td id="conteoPerdidosFlujoDeEfectivo">0</td>
                        </tr>
                        <tr>
                            <td class="actCreditoEInversion" style="font-weight: bold; text-align: left;">Crédito e Inversión</td>
                            <td id="conteoProducidosCreditoEInversion">0</td>
                            <td id="conteoRecuperadosCreditoEInversion">0</td>
                            <td id="conteoPerdidosCreditoEInversion">0</td>
                        </tr>
                        <tr>
                            <td class="actTecnologia" style="font-weight: bold; text-align: left;">Tecnología</td>
                            <td id="conteoProducidosTecnologia">0</td>
                            <td id="conteoRecuperadosTecnologia">0</td>
                            <td id="conteoPerdidosTecnologia">0</td>
                        </tr>
                        <tr>
                            <td class="actTransporteYMaquinaria" style="font-weight: bold; text-align: left;">Transporte y Maquinaria</td>
                            <td id="conteoProducidosTransporteYMaquinaria">0</td>
                            <td id="conteoRecuperadosTransporteYMaquinaria">0</td>
                            <td id="conteoPerdidosTransporteYMaquinaria">0</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- =================================================================
        COLUMNA 2: DEPARTAMENTOS
        ================================================================== -->
        <div class="column column-depts">
            <h2>DEPARTAMENTOS</h2>

            <!-- MarketingYVentas -->
            <div class="card">
                <table style="width:100%;" class="departamentos droppableRecursos droppable-asset-recovery" id="MarketingYVentas">
                    <tr style="border-bottom: 1px solid gray; height: 35px;">
                        <td style="width: 70%;"><span id="nombreDeptoCh">MARKETING Y VENTAS</span></td>
                        <td style="text-align:right;" colspan="2">
                            <span style="border:1px solid black;padding:5px;" class="actPersonalCalificado draggable activo-item" id="activoCh1">0</span>
                            <span style="border:1px solid black;padding:5px;" class="actFlujoDeEfectivo draggable activo-item" id="activoCh2">0</span>
                        </td>
                    </tr>
                    <tr style="vertical-align:middle;">
                        <td colspan=3>
                            <table>
                                <tr>
                                    <td style="text-align:center;">
                                        <img src="img/tiempoCH.png" style="width: 30px; height: 30px; vertical-align: middle;">
                                        <div style="vertical-align:middle; display:inline-block; font-weight:bold; font-size:16px;" id="tiempoCh" class="draggable recurso-item">0</div>
                                    </td>
                                    <td style="text-align:center;">
                                        <img src="img/personalCH.png" style="width: 30px; height: 30px; vertical-align: middle;">
                                        <div style="vertical-align:middle; display:inline-block; font-weight:bold; font-size:16px;" id="personalCh" class="draggable recurso-item">0</div>
                                    </td>
                                    <td style="text-align:center;">
                                        <img src="img/capitalCH.png" style="width: 30px; height: 30px; vertical-align: middle;">
                                        <div style="vertical-align:middle; display:inline-block; font-weight:bold; font-size:16px;" id="capitalCh" class="draggable recurso-item">0</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="text-align:center; font-size:11px; color:#c9302c; font-weight:bold; height:15px; padding: 0;" class="beneficioTiempoCh"></td>
                                    <td style="text-align:center; font-size:11px; color:#c9302c; font-weight:bold; height:15px; padding: 0;" class="beneficioPersonalCh"></td>
                                    <td style="text-align:center; font-size:11px; color:#c9302c; font-weight:bold; height:15px; padding: 0;" class="beneficioCapitalCh"></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <!-- Fila de Habilidad Especial -->
                    <tr class="fila-habilidad-especial" style="display: none; background-color: #f0f0f0; border-top: 1px solid gray;">
                        <td colspan="3" style="text-align: center; font-size: 16px; padding: 4px; font-weight: bold; color: #444;">
                            HE: <span class="texto-habilidad-especial"></span>
                        </td>
                    </tr>
                </table>
            </div>

            <!-- Finanzas -->
            <div class="card">
                <table style="width:100%;" class="departamentos droppableRecursos droppable-asset-recovery" id="Finanzas">
                    <tr style="border-bottom: 1px solid gray; height: 35px;">
                        <td style="width: 70%;"><span id="nombreDeptoCh">FINANZAS</span></td>
                        <td style="text-align:right;" colspan="2">
                            <span style="border:1px solid black;padding:5px;" class="actFlujoDeEfectivo draggable activo-item" id="activoCh1">0</span>
                            <span style="border:1px solid black;padding:5px;" class="actCreditoEInversion draggable activo-item" id="activoCh2">0</span>
                        </td>
                    </tr>
                    <tr style="vertical-align:middle;">
                        <td colspan=3>
                            <table>
                                <tr>
                                    <td style="text-align:center;">
                                        <img src="img/tiempoCH.png" style="width: 30px; height: 30px; vertical-align: middle;">
                                        <div style="vertical-align:middle; display:inline-block; font-weight:bold; font-size:16px;" id="tiempoCh" class="draggable recurso-item">0</div>
                                    </td>
                                    <td style="text-align:center;">
                                        <img src="img/personalCH.png" style="width: 30px; height: 30px; vertical-align: middle;">
                                        <div style="vertical-align:middle; display:inline-block; font-weight:bold; font-size:16px;" id="personalCh" class="draggable recurso-item">0</div>
                                    </td>
                                    <td style="text-align:center;">
                                        <img src="img/capitalCH.png" style="width: 30px; height: 30px; vertical-align: middle;">
                                        <div style="vertical-align:middle; display:inline-block; font-weight:bold; font-size:16px;" id="capitalCh" class="draggable recurso-item">0</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="text-align:center; font-size:11px; color:#c9302c; font-weight:bold; height:15px; padding: 0;" class="beneficioTiempoCh"></td>
                                    <td style="text-align:center; font-size:11px; color:#c9302c; font-weight:bold; height:15px; padding: 0;" class="beneficioPersonalCh"></td>
                                    <td style="text-align:center; font-size:11px; color:#c9302c; font-weight:bold; height:15px; padding: 0;" class="beneficioCapitalCh"></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <!-- Fila de Habilidad Especial -->
                    <tr class="fila-habilidad-especial" style="display: none; background-color: #f0f0f0; border-top: 1px solid gray;">
                        <td colspan="3" style="text-align: center; font-size: 16px; padding: 4px; font-weight: bold; color: #444;">
                            HE: <span class="texto-habilidad-especial"></span>
                        </td>
                    </tr>
                </table>
            </div>

            <!-- InvestigacionYDesarrollo -->
            <div class="card">
                <table style="width:100%;" class="departamentos droppableRecursos droppable-asset-recovery" id="InvestigacionYDesarrollo">
                    <tr style="border-bottom: 1px solid gray; height: 35px;">
                        <td style="width: 70%;"><span id="nombreDeptoCh">INVESTIGACIÓN Y DESARROLLO</span></td>
                        <td style="text-align:right;" colspan="2">
                            <span style="border:1px solid black;padding:5px;" class="actCreditoEInversion draggable activo-item" id="activoCh1">0</span>
                            <span style="border:1px solid black;padding:5px;" class="actTecnologia draggable activo-item" id="activoCh2">0</span>
                        </td>
                    </tr>
                    <tr style="vertical-align:middle;">
                        <td colspan=3>
                            <table>
                                <tr>
                                    <td style="text-align:center;">
                                        <img src="img/tiempoCH.png" style="width: 30px; height: 30px; vertical-align: middle;">
                                        <div style="vertical-align:middle; display:inline-block; font-weight:bold; font-size:16px;" id="tiempoCh" class="draggable recurso-item">0</div>
                                    </td>
                                    <td style="text-align:center;">
                                        <img src="img/personalCH.png" style="width: 30px; height: 30px; vertical-align: middle;">
                                        <div style="vertical-align:middle; display:inline-block; font-weight:bold; font-size:16px;" id="personalCh" class="draggable recurso-item">0</div>
                                    </td>
                                    <td style="text-align:center;">
                                        <img src="img/capitalCH.png" style="width: 30px; height: 30px; vertical-align: middle;">
                                        <div style="vertical-align:middle; display:inline-block; font-weight:bold; font-size:16px;" id="capitalCh" class="draggable recurso-item">0</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="text-align:center; font-size:11px; color:#c9302c; font-weight:bold; height:15px; padding: 0;" class="beneficioTiempoCh"></td>
                                    <td style="text-align:center; font-size:11px; color:#c9302c; font-weight:bold; height:15px; padding: 0;" class="beneficioPersonalCh"></td>
                                    <td style="text-align:center; font-size:11px; color:#c9302c; font-weight:bold; height:15px; padding: 0;" class="beneficioCapitalCh"></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <!-- Fila de Habilidad Especial -->
                    <tr class="fila-habilidad-especial" style="display: none; background-color: #f0f0f0; border-top: 1px solid gray;">
                        <td colspan="3" style="text-align: center; font-size: 16px; padding: 4px; font-weight: bold; color: #444;">
                            HE: <span class="texto-habilidad-especial"></span>
                        </td>
                    </tr>
                </table>
            </div>

            <!-- LogisticaYSistemas -->
            <div class="card">
                <table style="width:100%;" class="departamentos droppableRecursos droppable-asset-recovery" id="LogisticaYSistemas">
                    <tr style="border-bottom: 1px solid gray; height: 35px;">
                        <td style="width: 70%;"><span id="nombreDeptoCh">LOGÍSTICA Y SISTEMAS</span></td>
                        <td style="text-align:right;" colspan="2">
                            <span style="border:1px solid black;padding:5px;" class="actTecnologia draggable activo-item" id="activoCh1">0</span>
                            <span style="border:1px solid black;padding:5px;" class="actTransporteYMaquinaria draggable activo-item" id="activoCh2">0</span>
                        </td>
                    </tr>
                    <tr style="vertical-align:middle;">
                        <td colspan=3>
                            <table>
                                <tr>
                                    <td style="text-align:center;">
                                        <img src="img/tiempoCH.png" style="width: 30px; height: 30px; vertical-align: middle;">
                                        <div style="vertical-align:middle; display:inline-block; font-weight:bold; font-size:16px;" id="tiempoCh" class="draggable recurso-item">0</div>
                                    </td>
                                    <td style="text-align:center;">
                                        <img src="img/personalCH.png" style="width: 30px; height: 30px; vertical-align: middle;">
                                        <div style="vertical-align:middle; display:inline-block; font-weight:bold; font-size:16px;" id="personalCh" class="draggable recurso-item">0</div>
                                    </td>
                                    <td style="text-align:center;">
                                        <img src="img/capitalCH.png" style="width: 30px; height: 30px; vertical-align: middle;">
                                        <div style="vertical-align:middle; display:inline-block; font-weight:bold; font-size:16px;" id="capitalCh" class="draggable recurso-item">0</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="text-align:center; font-size:11px; color:#c9302c; font-weight:bold; height:15px; padding: 0;" class="beneficioTiempoCh"></td>
                                    <td style="text-align:center; font-size:11px; color:#c9302c; font-weight:bold; height:15px; padding: 0;" class="beneficioPersonalCh"></td>
                                    <td style="text-align:center; font-size:11px; color:#c9302c; font-weight:bold; height:15px; padding: 0;" class="beneficioCapitalCh"></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <!-- Fila de Habilidad Especial -->
                    <tr class="fila-habilidad-especial" style="display: none; background-color: #f0f0f0; border-top: 1px solid gray;">
                        <td colspan="3" style="text-align: center; font-size: 16px; padding: 4px; font-weight: bold; color: #444;">
                            HE: <span class="texto-habilidad-especial"></span>
                        </td>
                    </tr>
                </table>
            </div>

            <!-- Operaciones -->
            <div class="card">
                <table style="width:100%;" class="departamentos droppableRecursos droppable-asset-recovery" id="Operaciones">
                    <tr style="border-bottom: 1px solid gray; height: 35px;">
                        <td style="width: 70%;"><span id="nombreDeptoCh">OPERACIONES</span></td>
                        <td style="text-align:right;" colspan="2">
                            <span style="border:1px solid black;padding:5px;" class="actTransporteYMaquinaria draggable activo-item" id="activoCh1">0</span>
                            <span style="border:1px solid black;padding:5px;" class="actAnalistas draggable activo-item" id="activoCh2">0</span>
                        </td>
                    </tr>
                    <tr style="vertical-align:middle;">
                        <td colspan=3>
                            <table>
                                <tr>
                                    <td style="text-align:center;">
                                        <img src="img/tiempoCH.png" style="width: 30px; height: 30px; vertical-align: middle;">
                                        <div style="vertical-align:middle; display:inline-block; font-weight:bold; font-size:16px;" id="tiempoCh" class="draggable recurso-item">0</div>
                                    </td>
                                    <td style="text-align:center;">
                                        <img src="img/personalCH.png" style="width: 30px; height: 30px; vertical-align: middle;">
                                        <div style="vertical-align:middle; display:inline-block; font-weight:bold; font-size:16px;" id="personalCh" class="draggable recurso-item">0</div>
                                    </td>
                                    <td style="text-align:center;">
                                        <img src="img/capitalCH.png" style="width: 30px; height: 30px; vertical-align: middle;">
                                        <div style="vertical-align:middle; display:inline-block; font-weight:bold; font-size:16px;" id="capitalCh" class="draggable recurso-item">0</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="text-align:center; font-size:11px; color:#c9302c; font-weight:bold; height:15px; padding: 0;" class="beneficioTiempoCh"></td>
                                    <td style="text-align:center; font-size:11px; color:#c9302c; font-weight:bold; height:15px; padding: 0;" class="beneficioPersonalCh"></td>
                                    <td style="text-align:center; font-size:11px; color:#c9302c; font-weight:bold; height:15px; padding: 0;" class="beneficioCapitalCh"></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <!-- Fila de Habilidad Especial -->
                    <tr class="fila-habilidad-especial" style="display: none; background-color: #f0f0f0; border-top: 1px solid gray;">
                        <td colspan="3" style="text-align: center; font-size: 16px; padding: 4px; font-weight: bold; color: #444;">
                            HE: <span class="texto-habilidad-especial"></span>
                        </td>
                    </tr>
                </table>
            </div>

            <!-- RecursosHumanos -->
            <div class="card">
                <table style="width:100%;" class="departamentos droppableRecursos droppable-asset-recovery" id="RecursosHumanos">
                    <tr style="border-bottom: 1px solid gray; height: 35px;">
                        <td style="width: 70%;"><span id="nombreDeptoCh">RECURSOS HUMANOS</span></td>
                        <td style="text-align:right;" colspan="2">
                            <span style="border:1px solid black;padding:5px;" class="actPersonalCalificado draggable activo-item" id="activoCh1">0</span>
                            <span style="border:1px solid black;padding:5px;" class="actAnalistas draggable activo-item" id="activoCh2">0</span>
                        </td>
                    </tr>
                    <tr style="vertical-align:middle;">
                        <td colspan=3>
                            <table>
                                <tr>
                                    <td style="text-align:center;">
                                        <img src="img/tiempoCH.png" style="width: 30px; height: 30px; vertical-align: middle;">
                                        <div style="vertical-align:middle; display:inline-block; font-weight:bold; font-size:16px;" id="tiempoCh" class="draggable recurso-item">0</div>
                                    </td>
                                    <td style="text-align:center;">
                                        <img src="img/personalCH.png" style="width: 30px; height: 30px; vertical-align: middle;">
                                        <div style="vertical-align:middle; display:inline-block; font-weight:bold; font-size:16px;" id="personalCh" class="draggable recurso-item">0</div>
                                    </td>
                                    <td style="text-align:center;">
                                        <img src="img/capitalCH.png" style="width: 30px; height: 30px; vertical-align: middle;">
                                        <div style="vertical-align:middle; display:inline-block; font-weight:bold; font-size:16px;" id="capitalCh" class="draggable recurso-item">0</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="text-align:center; font-size:11px; color:#c9302c; font-weight:bold; height:15px; padding: 0;" class="beneficioTiempoCh"></td>
                                    <td style="text-align:center; font-size:11px; color:#c9302c; font-weight:bold; height:15px; padding: 0;" class="beneficioPersonalCh"></td>
                                    <td style="text-align:center; font-size:11px; color:#c9302c; font-weight:bold; height:15px; padding: 0;" class="beneficioCapitalCh"></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <!-- Fila de Habilidad Especial -->
                    <tr class="fila-habilidad-especial" style="display: none; background-color: #f0f0f0; border-top: 1px solid gray;">
                        <td colspan="3" style="text-align: center; font-size: 16px; padding: 4px; font-weight: bold; color: #444;">
                            HE: <span class="texto-habilidad-especial"></span>
                        </td>
                    </tr>
                </table>
            </div>

            <!-- BOTON DE HABILIDAD ESPECIAL -->
            <div class="card" style="padding: 5px; margin-top: 10px;">
                <button id="resumenAccionHabilidadEspecial" class="nav-button" style="width: 100%;">
                    Utilizar Habilidad Especial
                </button>
            </div>
        </div>

        <!-- =================================================================
        COLUMNA 3: PROYECTOS TERMINADOS
        ================================================================== -->
        <div class="column column-completed">
            <h2>PROYECTOS TERMINADOS (T)</h2>
            <div id="completed-projects-container">
                <!-- Los proyectos completados del trimestre se insertan aquí por JS -->
            </div>
        </div>

        <!-- =================================================================
        COLUMNA 4: PROYECTOS ACTIVOS
        ================================================================== -->
        <div class="column column-active">
            <h2>PROYECTOS ACTIVOS</h2>
            <div id="active-projects-container" style="display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start;">
                <!-- Los proyectos activos se insertan aquí por JS -->
            </div>
        </div>

    </div>

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

    <script>
        // Sobreescribimos 'continuamos' para añadir la lógica de esta pantalla
        const originalContinuamos = continuamos;
        continuamos = function() {
            originalContinuamos();
            actualizarResumenUI();
        };

        // YA NO SE NECESITA la función local `llenaDepartamentoGde` porque ahora usamos la de jsCode.js

        function formatCurrency(value) {
            return new Intl.NumberFormat('es-MX', {
                style: 'currency',
                currency: 'MXN',
                minimumFractionDigits: 0,
                maximumFractionDigits: 0,
            }).format(value);
        }

        /**
         * Actualiza la UI de una tarjeta de departamento en la pantalla de resumen.
         * Usa IDs porque ahora la estructura es como en colaborando2.php
         */
        function actualizarTarjetaDepto(deptoId) {
            const deptoArr = arreglosDeptos['arr' + deptoId];
            const deptoCard = $('#' + deptoId);

            if (!deptoArr || !deptoCard.length) return;

            // Actualizar recursos (con selector flexible para soportar el deptoActual con IDs renombrados)
            const tiempoElem = deptoCard.find('#tiempoCh').length ? deptoCard.find('#tiempoCh') : deptoCard.find('#recursoDispTiempoGde');
            const personalElem = deptoCard.find('#personalCh').length ? deptoCard.find('#personalCh') : deptoCard.find('#recursoDispPersonalGde');
            const capitalElem = deptoCard.find('#capitalCh').length ? deptoCard.find('#capitalCh') : deptoCard.find('#recursoDispCapitalGde');

            tiempoElem.text(findArrayValue(deptoArr, 'recursoTiempo'));
            personalElem.text(findArrayValue(deptoArr, 'recursoPersonal'));
            capitalElem.text(findArrayValue(deptoArr, 'recursoCapital'));

            // Actualizar activos
            deptoCard.find('#activoCh1').text(findArrayValue(deptoArr, 'activo1'));
            deptoCard.find('#activoCh2').text(findArrayValue(deptoArr, 'activo2'));

            // Actualizar beneficios de habilidades acreditadas (-1 T, -1 P, -1 C)
            const habTiempo = findArrayValue(deptoArr, 'habilidadTiempo');
            const habPersonal = findArrayValue(deptoArr, 'habilidadPersonal');
            const habCapital = findArrayValue(deptoArr, 'habilidadCapital');

            let txtTiempo = '';
            let txtPersonal = '';
            let txtCapital = '';

            if (habTiempo && habTiempo !== 0) {
                const ben = findArrayValue(arreglosCapacitaciones[habTiempo], 'beneficio');
                txtTiempo = `${ben} T`;
            }
            if (habPersonal && habPersonal !== 0) {
                const ben = findArrayValue(arreglosCapacitaciones[habPersonal], 'beneficio');
                txtPersonal = `${ben} P`;
            }
            if (habCapital && habCapital !== 0) {
                const ben = findArrayValue(arreglosCapacitaciones[habCapital], 'beneficio');
                txtCapital = `${ben} C`;
            }

            deptoCard.find('.beneficioTiempoCh').text(txtTiempo);
            deptoCard.find('.beneficioPersonalCh').text(txtPersonal);
            deptoCard.find('.beneficioCapitalCh').text(txtCapital);

            // Mostrar/Ocultar Habilidad Especial si ya se acreditó
            const accionEspecial = findArrayValue(deptoArr, 'accionEspecialQuincenal');
            const rowHE = deptoCard.find('.fila-habilidad-especial');
            if (accionEspecial && accionEspecial !== '') {
                rowHE.find('.texto-habilidad-especial').text(accionEspecial);
                rowHE.show();
            } else {
                rowHE.hide();
            }
        }

        function actualizarResumenUI() {
            console.log("Actualizando UI de Resumen...");

            const quincena = parseInt($('#etQuincena').val()) || 1;
            const trimestreActual = Math.floor((quincena - 1) / 6) + 1;

            $('#resumenTrimestre').text(`T${trimestreActual}`);
            $('#resumenQuincena').text(`Q${quincena}`);

            // --- 1. Actualizar Progresión ---
            $('#ingresoT1').text(formatCurrency(arregloGeneral.trimestre1 || 0));
            $('#ingresoT2').text(formatCurrency(arregloGeneral.trimestre2 || 0));
            $('#ingresoT3').text(formatCurrency(arregloGeneral.trimestre3 || 0));
            $('#ingresoT4').text(formatCurrency(arregloGeneral.trimestre4 || 0));

            let acumulado = 0;
            acumulado += (arregloGeneral.trimestre1 || 0);
            $('#acumuladoT1').text(formatCurrency(acumulado));
            acumulado += (arregloGeneral.trimestre2 || 0);
            $('#acumuladoT2').text(formatCurrency(acumulado));
            acumulado += (arregloGeneral.trimestre3 || 0);
            $('#acumuladoT3').text(formatCurrency(acumulado));
            acumulado += (arregloGeneral.trimestre4 || 0);
            $('#acumuladoT4').text(formatCurrency(acumulado));

            // --- 2. Contar y mostrar resumen de Proyectos e Incidencias ---
            let conteoProyectos = {
                1: {
                    concretados: 0
                },
                2: {
                    concretados: 0
                },
                3: {
                    concretados: 0
                },
                4: {
                    concretados: 0
                }
            };
            let conteoIncidencias = {
                1: {
                    resueltos: 0
                },
                2: {
                    resueltos: 0
                },
                3: {
                    resueltos: 0
                },
                4: {
                    resueltos: 0
                }
            };
            let proyectosEnProceso = 0;
            let incidenciasEnProceso = 0;

            proyectos.forEach(p => {
                const esIncidencia = p.dificultad === 'Incidencia';
                const trimestreCompletado = p.trimestreCompletado;

                if (p.estatus === 'Completado') {
                    if (esIncidencia) {
                        if (!conteoIncidencias[trimestreCompletado]) conteoIncidencias[trimestreCompletado] = {
                            resueltos: 0
                        };
                        conteoIncidencias[trimestreCompletado].resueltos++;
                    } else {
                        if (!conteoProyectos[trimestreCompletado]) conteoProyectos[trimestreCompletado] = {
                            concretados: 0
                        };
                        conteoProyectos[trimestreCompletado].concretados++;
                    }
                } else if (p.estatus === 'En proceso') {
                    if (esIncidencia) {
                        incidenciasEnProceso++;
                    } else {
                        proyectosEnProceso++;
                    }
                }
            });

            // --- 2.5 Contabilización de Activos (Producidos, Recuperados y Perdidos) ---
            const statsActivos = {
                PersonalCalificado: {
                    producidos: 0,
                    recuperados: 0,
                    perdidos: 0
                },
                Analistas: {
                    producidos: 0,
                    recuperados: 0,
                    perdidos: 0
                },
                FlujoDeEfectivo: {
                    producidos: 0,
                    recuperados: 0,
                    perdidos: 0
                },
                CreditoEInversion: {
                    producidos: 0,
                    recuperados: 0,
                    perdidos: 0
                },
                Tecnologia: {
                    producidos: 0,
                    recuperados: 0,
                    perdidos: 0
                },
                TransporteYMaquinaria: {
                    producidos: 0,
                    recuperados: 0,
                    perdidos: 0
                }
            };

            const mapaColoresActivos = {
                amarillo: 'PersonalCalificado',
                naranjas: 'Analistas',
                verdes: 'FlujoDeEfectivo',
                azules: 'TransporteYMaquinaria',
                rojos: 'Tecnologia',
                morados: 'CreditoEInversion'
            };
            const listaColores = ['amarillo', 'naranjas', 'verdes', 'azules', 'rojos', 'morados'];

            proyectos.forEach(p => {
                if (p.estatus === 'Completado') {
                    const coloresConValores = listaColores
                        .filter(color => p[color] !== null && p[color] > 0)
                        .map(color => ({
                            color,
                            valor: p[color]
                        }));

                    coloresConValores.forEach((item, idx) => {
                        const tipoActivo = mapaColoresActivos[item.color];
                        const reqOriginal = item.valor;
                        const asignadoActual = parseInt(p['activoAsignado' + (idx + 1)]) || 0;

                        // Producidos
                        statsActivos[tipoActivo].producidos += reqOriginal;

                        // Recuperados
                        const recuperados = reqOriginal - asignadoActual;
                        statsActivos[tipoActivo].recuperados += (recuperados > 0 ? recuperados : 0);

                        // Perdidos (sólo si pertenece a un trimestre anterior)
                        if (p.trimestreCompletado < trimestreActual) {
                            statsActivos[tipoActivo].perdidos += asignadoActual;
                        }
                    });
                }
            });

            // Inyectar datos en la tabla HTML (con prefijo conteo)
            const tiposActivos = ['PersonalCalificado', 'Analistas', 'FlujoDeEfectivo', 'CreditoEInversion', 'Tecnologia', 'TransporteYMaquinaria'];
            tiposActivos.forEach(tipo => {
                $(`#conteoProducidos${tipo}`).text(statsActivos[tipo].producidos);
                $(`#conteoRecuperados${tipo}`).text(statsActivos[tipo].recuperados);
                $(`#conteoPerdidos${tipo}`).text(statsActivos[tipo].perdidos);
            });

            $('#resumen-proyectos').html(`
                <thead><tr><th></th><th>T1</th><th>T2</th><th>T3</th><th>T4</th></tr></thead>
                <tbody>
                    <tr><td>En Proceso</td><td colspan="4">${proyectosEnProceso}</td></tr>
                    <tr><td>Concretados</td><td>${conteoProyectos[1].concretados}</td><td>${conteoProyectos[2].concretados}</td><td>${conteoProyectos[3].concretados}</td><td>${conteoProyectos[4].concretados}</td></tr>
                </tbody>
            `);
            $('#resumen-incidencias').html(`
                <thead><tr><th></th><th>T1</th><th>T2</th><th>T3</th><th>T4</th></tr></thead>
                <tbody>
                    <tr><td>En Proceso</td><td colspan="4">${incidenciasEnProceso}</td></tr>
                    <tr><td>Resueltos</td><td>${conteoIncidencias[1].resueltos}</td><td>${conteoIncidencias[2].resueltos}</td><td>${conteoIncidencias[3].resueltos}</td><td>${conteoIncidencias[4].resueltos}</td></tr>
                </tbody>
            `);

            // --- 3. Llenar columnas de proyectos ---
            const completedContainer = $('#completed-projects-container');
            const activeContainer = $('#active-projects-container');
            completedContainer.empty();
            activeContainer.empty();

            $('.column-completed h2').text(`PROYECTOS TERMINADOS (T${trimestreActual})`);

            proyectos.forEach(p => {
                if (p.estatus === 'Completado' && p.trimestreCompletado === trimestreActual) {
                    completedContainer.append(crearTarjetaProyecto(p, true));
                } else if (p.estatus === 'En proceso') {
                    // Solo se muestra en el resumen si no ha pagado mantenimiento en este trimestre
                    console.log("[ResumenUI] Proyecto:", p.nombreProyecto, "estatus:", p.estatus, "mantoPagadoEnTrimestre:", p.mantenimientoPagadoEnTrimestre, "trimestreActual:", trimestreActual);
                    if (p.mantenimientoPagadoEnTrimestre !== trimestreActual) {
                        activeContainer.append(crearTarjetaProyecto(p, false));
                    }
                }
            });

            // --- 4. Actualizar todas las tarjetas de departamento con los datos cargados ---
            const deptoIds = ["MarketingYVentas", "Finanzas", "InvestigacionYDesarrollo", "LogisticaYSistemas", "Operaciones", "RecursosHumanos"];
            deptoIds.forEach(deptoId => {
                actualizarTarjetaDepto(deptoId);
            });

            // --- 5. Inicializar todas las interacciones de Drag & Drop ---
            inicializarInteraccionesDragDrop();

            // --- 6. Seleccionar el primer departamento para activar la vista
            // La función original en jsCode.js ya se encarga de esto al final de `continuamos()`
        }

        function crearTarjetaProyecto(proyecto, esCompletado) {
            const colores = ['amarillo', 'naranjas', 'verdes', 'azules', 'rojos', 'morados'];
            let activosReqHtml = '';
            let activosAsigHtml = '';

            const coloresConValores = colores
                .filter(color => proyecto[color] !== null && proyecto[color] > 0)
                .map(color => ({
                    color,
                    valor: proyecto[color]
                }));

            let laClase = '';
            for (let i = 0; i < 3; i++) {
                if (i < coloresConValores.length) {
                    const activo = coloresConValores[i];
                    const claseActivo = 'act' + getClassNameFromColor(activo.color);
                    activosReqHtml += `<span class="${claseActivo}">${activo.valor}</span>`;

                    const draggableClass = esCompletado ? 'asset-recover' : '';
                    const assetId = `asset-${proyecto.id}-${i}`;
                    activosAsigHtml += `<span id="${assetId}" class="${claseActivo} ${draggableClass}" data-asset-type="${getClassNameFromColor(activo.color)}">${proyecto['activoAsignado' + (i + 1)]}</span>`;
                } else {
                    activosReqHtml += `<span class="actNinguno"></span>`;
                    activosAsigHtml += `<span class="actNinguno"></span>`;
                }
            }

            const completadoClass = esCompletado ? 'completado' : '';

            const quincena = parseInt($('#etQuincena').val()) || 1;
            const esFinTrimestre = (quincena % 6 === 0);

            let actionButtonsHtml = '';
            if (!esCompletado && esFinTrimestre) {
                const showPay = proyecto.mantenimiento !== 'N/A';
                const buttonManto = showPay ?
                    `<button class="nav-button btn-pagar-mantenimiento" data-id="${proyecto.id}" style="background-color: #28a745; border: none; font-size: 11px; padding: 5px 8px; cursor: pointer; flex: 1;">Pagar Manto</button>` : '';

                const penalizacionFormateada = formatCurrency(proyecto.penalizacion || 0);
                const buttonDesechar = `<button class="nav-button btn-desechar-proyecto" data-id="${proyecto.id}" style="background-color: #dc3545; border: none; font-size: 11px; padding: 5px 8px; cursor: pointer; flex: 1;">Desechar (${penalizacionFormateada})</button>`;

                actionButtonsHtml = `
                    <div class="project-actions" style="display: flex; gap: 8px; margin-top: 10px; width: 100%;">
                        ${buttonManto}
                        ${buttonDesechar}
                    </div>
                `;
            }

            let infoAdicionalHtml = '';
            if (!esCompletado) {
                const penalizacionFormateada = formatCurrency(proyecto.penalizacion || 0);
                const potencialVal = proyecto.potencial || 'N/A';
                infoAdicionalHtml = `
                    <div class="project-info-adicional" style="font-size: 1.2em; color: #444; margin-top: 8px; border-top: 1px dashed #ccc; padding-top: 5px; text-align: left; display: flex; justify-content: space-between;">
                        <span><b>Potencial:</b> ${potencialVal}</span>
                        <span><b>Penalización:</b> ${penalizacionFormateada}</span>
                    </div>
                `;
            }

            return `
                <div class="project-card ${completadoClass}" style="flex-basis: 48%; display: flex; flex-direction: column; justify-content: space-between; min-height: 180px; box-sizing: border-box; padding: 10px;">
                    <div>
                        <div class="project-header" style="font-weight: bold; margin-bottom: 5px; text-align: center; border-bottom: 1px solid gray; padding-bottom: 4px;">${proyecto.nombreProyecto.toUpperCase()}</div>
                        <div class="project-body" style="padding: 5px; text-align: center;">
                            <i style="font-size: 0.9em; color: #555;">${proyecto.descripcion}</i>
                            <div class="project-assets-req" style="margin-top: 5px; display: flex; justify-content: center; gap: 2px;">${activosReqHtml}</div>
                            <div class="project-assets-asig" style="margin-top: 5px; display: flex; justify-content: center; gap: 2px;">${activosAsigHtml}</div>
                            ${infoAdicionalHtml}
                        </div>
                    </div>
                    <div>
                        <div class="project-footer" style="font-size: 0.9em; margin-top: 8px; font-weight: bold; border-top: 1px solid #ddd; padding-top: 5px; text-align: center;">MANTENIMIENTO: ${proyecto.mantenimiento}</div>
                        ${actionButtonsHtml}
                    </div>
                </div>
            `;
        }

        function getClassNameFromColor(color) {
            switch (color) {
                case 'amarillo':
                    return 'PersonalCalificado';
                case 'naranjas':
                    return 'Analistas';
                case 'verdes':
                    return 'FlujoDeEfectivo';
                case 'azules':
                    return 'TransporteYMaquinaria';
                case 'rojos':
                    return 'Tecnologia';
                case 'morados':
                    return 'CreditoEInversion';
                default:
                    return 'Ninguno';
            }
        }

        function inicializarInteraccionesDragDrop() {
            console.log("[RESUMEN] Inicializando interacciones de Drag & Drop...");

            // 1. DRAGGABLE: Hacemos arrastrables los activos de proyectos terminados.
            $('.asset-recover').draggable({
                revert: "invalid",
                helper: "clone",
                start: function(event, ui) {
                    if (parseInt($(this).text()) === 0) {
                        return false;
                    }
                    ui.helper.css('z-index', 100);
                }
            });

            // La lógica DRAGGABLE para los recursos del departamento activo ya está en jsCode.js.

            // 2. DROPPABLE: Se crea UN SOLO manejador para las tablas de departamento,
            // que acepta tanto recursos como activos, evitando que una inicialización
            // sobrescriba a la otra.
            $('.departamentos.droppableRecursos').droppable({
                accept: ".recurso-item, .asset-recover", // Acepta ambos tipos de elementos.
                drop: function(event, ui) {
                    console.log(`[DROP EVENT] -> Elemento soltado en: ${this.id}. Elemento arrastrado:`, ui.draggable[0]);

                    // LÓGICA PARA RECURSOS (adaptada de jsCode.js)
                    if (ui.draggable.hasClass('recurso-item')) {
                        console.log("[DROP EVENT] -> Es un 'recurso-item'. Ejecutando lógica de intercambio.");

                        var droppedText = ui.draggable.text();
                        var originalValue = parseInt(droppedText) || 0;

                        // <<<< LÍNEA CLAVE: Regresa el elemento a su posición original >>>>
                        ui.draggable.css({
                            top: originalPosition.top,
                            left: originalPosition.left
                        });

                        if (originalValue === 0) {
                            console.log("[DROP EVENT] -> Recurso de origen tiene 0. Cancelando.");
                            return;
                        }

                        var newValue = originalValue - 1;
                        var audio = new Audio('./Microwave_bell.wav');
                        audio.play();

                        // Actualiza el texto del elemento original que se está arrastrando
                        ui.draggable.text(newValue);

                        // Determina qué tipo de recurso es y actualiza los arreglos y la UI
                        if (ui.draggable.attr("id") == 'recursoDispTiempoGde') {
                            $('#' + this.id + ' #tiempoCh').text(parseInt($('#' + this.id + ' #tiempoCh').text()) + 1);
                            setArrayValue(arreglosDeptos['arr' + this.id], 'recursoTiempo', parseInt($('#' + this.id + ' #tiempoCh').text()));
                            setArrayValue(arreglosDeptos['arr' + deptoActual], 'recursoTiempo', newValue);
                            $('#' + deptoActual + ' #tiempoCh').text(newValue);
                        } else if (ui.draggable.attr("id") == 'recursoDispPersonalGde') {
                            $('#' + this.id + ' #personalCh').text(parseInt($('#' + this.id + ' #personalCh').text()) + 1);
                            setArrayValue(arreglosDeptos['arr' + this.id], 'recursoPersonal', parseInt($('#' + this.id + ' #personalCh').text()));
                            setArrayValue(arreglosDeptos['arr' + deptoActual], 'recursoPersonal', newValue);
                            $('#' + deptoActual + ' #personalCh').text(newValue);
                        } else if (ui.draggable.attr("id") == 'recursoDispCapitalGde') {
                            $('#' + this.id + ' #capitalCh').text(parseInt($('#' + this.id + ' #capitalCh').text()) + 1);
                            setArrayValue(arreglosDeptos['arr' + this.id], 'recursoCapital', parseInt($('#' + this.id + ' #capitalCh').text()));
                            setArrayValue(arreglosDeptos['arr' + deptoActual], 'recursoCapital', newValue);
                            $('#' + deptoActual + ' #capitalCh').text(newValue);
                        }

                    }
                    // LÓGICA PARA ACTIVOS (la que ya estaba en resumen.php)
                    else if (ui.draggable.hasClass('asset-recover')) {
                        console.log("[DROP EVENT] -> Es un 'asset-recover'. Ejecutando lógica de recuperación.");

                        const deptoId = $(this).attr('id');
                        const assetType = ui.draggable.data('asset-type');
                        const assetElementId = ui.draggable.attr('id');

                        const costoRecuperacion = arreglosActivos['arr' + assetType];
                        const costoT = findArrayValue(costoRecuperacion, 'recuperacionTiempo');
                        const costoP = findArrayValue(costoRecuperacion, 'recuperacionPersonal');
                        const costoC = findArrayValue(costoRecuperacion, 'recuperacionCapital');

                        const deptoArr = arreglosDeptos['arr' + deptoId];
                        const recT = findArrayValue(deptoArr, 'recursoTiempo');
                        const recP = findArrayValue(deptoArr, 'recursoPersonal');
                        const recC = findArrayValue(deptoArr, 'recursoCapital');

                        if (recT >= costoT && recP >= costoP && recC >= costoC) {
                            setArrayValue(deptoArr, 'recursoTiempo', recT - costoT);
                            setArrayValue(deptoArr, 'recursoPersonal', recP - costoP);
                            setArrayValue(deptoArr, 'recursoCapital', recC - costoC);

                            let activoSlot = '';
                            if (findArrayValue(deptoArr, 'activo1Tipo') === assetType) activoSlot = 'activo1';
                            else if (findArrayValue(deptoArr, 'activo2Tipo') === assetType) activoSlot = 'activo2';

                            if (activoSlot) {
                                const valorActualActivo = findArrayValue(deptoArr, activoSlot);
                                setArrayValue(deptoArr, activoSlot, valorActualActivo + 1);

                                const assetElement = $(`#${assetElementId}`);
                                const currentCount = parseInt(assetElement.text());
                                assetElement.text(currentCount - 1);

                                const assetIdParts = assetElementId.split('-');
                                const projectId = parseInt(assetIdParts[1]);
                                const assetIndex = parseInt(assetIdParts[2]);

                                const projectToUpdate = proyectos.find(p => p.id === projectId);
                                if (projectToUpdate) {
                                    const assetSlotName = `activoAsignado${assetIndex + 1}`;
                                    if (projectToUpdate[assetSlotName] > 0) {
                                        projectToUpdate[assetSlotName]--;
                                    }
                                }
                                actualizarTarjetaDepto(deptoId);
                                var audio = new Audio('./Microwave_bell.wav');
                                audio.play();
                            } else {
                                alert(`El departamento ${deptoId} no puede almacenar activos de tipo ${assetType}.`);
                                setArrayValue(deptoArr, 'recursoTiempo', recT);
                                setArrayValue(deptoArr, 'recursoPersonal', recP);
                                setArrayValue(deptoArr, 'recursoCapital', recC);
                            }
                        } else {
                            alert("Recursos insuficientes en el departamento para recuperar este activo.");
                        }
                    }
                },
                over: function(event, ui) {
                    // Lógica combinada para el 'over'
                    if (ui.draggable.hasClass('recurso-item') && $(this).attr('id') !== deptoActual) {
                        $(this).parent().css('background-color', '#e9f5e9'); // Pinta el div.card
                    } else if (ui.draggable.hasClass('asset-recover')) {
                        $(this).parent().css('background-color', '#e9f5e9'); // Pinta el div.card
                    }
                },
                out: function(event, ui) {
                    $(this).parent().css('background-color', ''); // Limpia el color del div.card
                }
            });
        }


        // Listener para los botones de quincena para actualizar la UI
        $('#bMas, #bMenos').on('click', function() {
            setTimeout(actualizarResumenUI, 100);
        });

        $('#resumenAccionHabilidadEspecial').click(function() {
            if (typeof deptoActual === 'undefined' || !deptoActual) {
                alert('Primero selecciona un departamento haciendo clic en él.');
                return;
            }

            let elArreglo = arreglosDeptos['arr' + deptoActual];
            let accionQuincenal = findArrayValue(elArreglo, 'accionEspecialQuincenal');

            if (!accionQuincenal || accionQuincenal === '') {
                alert('El departamento seleccionado no tiene una habilidad especial disponible (requiere comprar sus 3 habilidades).');
                return;
            }

            if (deptoActual === 'Finanzas') {
                window.alert(
                    'La habilidad especial de Finanzas (Tener 1 recurso extra) ya está activa y se aplica automáticamente al generar recursos aleatorios.'
                );
                return;
            }

            let lastUsed = parseInt(findArrayValue(elArreglo, 'accionEspecialLastUsed')) || 0;
            let periodicidad = parseInt(findArrayValue(elArreglo, 'accionEspecialPeriodicidad')) || 2;
            let quincenaActual = parseInt($('#etQuincena').val()) || 1;

            let puedeUsar = false;
            if (lastUsed === 0) {
                puedeUsar = true;
            } else if (quincenaActual >= lastUsed + periodicidad) {
                puedeUsar = true;
            }

            if (puedeUsar) {
                let proximoUso = quincenaActual + periodicidad;
                let nombreDepto = findArrayValue(elArreglo, 'nombre').toLowerCase().replace(/(?:^|\s)\S/g, function(a) {
                    return a.toUpperCase();
                });
                let textoConfirmacion =
                    '¿Quieres utilizar la acción especial del departamento "' +
                    nombreDepto +
                    '"?<br><br>' +
                    'Acción: <b>' +
                    accionQuincenal +
                    '</b><br><br>' +
                    '<small><i>Periodicidad: Cada ' +
                    periodicidad +
                    ' quincenas.</i><br>' +
                    '<i>Si la usas ahora, podrás usarla de nuevo en la quincena <b>' +
                    proximoUso +
                    '</b>.</i></small>';

                confirm(textoConfirmacion, function(result) {
                    if (result) {
                        console.log('Se activa la accion especial: ' + accionQuincenal);

                        if (accionQuincenal === 'Generar un activo sin costo') {
                            let tipoActivo1 = findArrayValue(elArreglo, 'activo1Tipo');
                            let tipoActivo2 = findArrayValue(elArreglo, 'activo2Tipo');

                            $('<div>¿Qué activo deseas generar sin costo?</div>').dialog({
                                modal: true,
                                title: 'Generar Activo',
                                width: 450,
                                open: function() {
                                    var $btnset = $(this).closest('.ui-dialog').find('.ui-dialog-buttonset');
                                    $btnset.css({
                                        display: 'flex',
                                        'flex-wrap': 'wrap',
                                        'justify-content': 'center',
                                        width: '100%',
                                        float: 'none',
                                    });
                                    $btnset.find('button:contains("Cancelar")').before('<div style="flex-basis: 100%; height: 15px;"></div>');

                                    var coloresMapa = {
                                        PersonalCalificado: 'yellow',
                                        Analistas: 'orange',
                                        FlujoDeEfectivo: 'green',
                                        TransporteYMaquinaria: 'blue',
                                        Tecnologia: 'red',
                                        CreditoEInversion: 'purple',
                                    };

                                    $btnset.find('.act' + tipoActivo1).css({
                                        width: 'auto',
                                        padding: '10px 20px',
                                        background: coloresMapa[tipoActivo1] || '',
                                        color: tipoActivo1 === 'PersonalCalificado' || tipoActivo1 === 'FlujoDeEfectivo' ? 'black' : 'white',
                                    });
                                    $btnset.find('.act' + tipoActivo2).css({
                                        width: 'auto',
                                        padding: '10px 20px',
                                        background: coloresMapa[tipoActivo2] || '',
                                        color: tipoActivo2 === 'PersonalCalificado' || tipoActivo2 === 'FlujoDeEfectivo' ? 'black' : 'white',
                                    });
                                },
                                buttons: [{
                                    text: tipoActivo1,
                                    class: 'act' + tipoActivo1,
                                    click: function() {
                                        $(this).dialog('close');
                                        generarActivo(1);
                                    },
                                }, {
                                    text: tipoActivo2,
                                    class: 'act' + tipoActivo2,
                                    click: function() {
                                        $(this).dialog('close');
                                        generarActivo(2);
                                    },
                                }, {
                                    text: 'Cancelar',
                                    click: function() {
                                        $(this).dialog('close');
                                    },
                                }, ],
                            });

                            function generarActivo(num) {
                                setArrayValue(elArreglo, 'accionEspecialLastUsed', quincenaActual);
                                let activoKey = 'activo' + num;
                                let valorActual = parseInt(findArrayValue(elArreglo, activoKey)) || 0;
                                let nuevoValor = valorActual + 1;
                                setArrayValue(elArreglo, activoKey, nuevoValor);
                                actualizarTarjetaDepto(deptoActual); // Actualiza la tarjeta del depto en la UI de resumen
                                var audio = new Audio('./Microwave_bell.wav');
                                audio.play();
                                window.alert('¡Activo generado con éxito!');
                                if (typeof guardaSesion === 'function') {
                                    guardaSesion();
                                }
                            }
                        } else if (accionQuincenal === 'Descartar un proyecto (se va al limbo con todo y activos)') {
                            const proyectosEnProceso = proyectos.filter(p => p.estatus === 'En proceso');
                            if (proyectosEnProceso.length === 0) {
                                alert('No hay proyectos en proceso para descartar.');
                                return;
                            }

                            let dialogContent = $('<div><p>Selecciona el proyecto a descartar:</p></div>');
                            let projectList = $('<form>');
                            proyectosEnProceso.forEach((p) => {
                                projectList.append(
                                    `<div style="display: flex; align-items: flex-start; margin: 8px 0; text-align: left;">
                                        <input type="radio" id="proj-discard-${p.id}" name="proyectoADescartar" value="${p.id}" style="margin-top: 2px; flex-shrink: 0;">
                                        <label for="proj-discard-${p.id}" style="margin-left: 8px; cursor: pointer;">
                                            ${p.nombreProyecto} <span style="color: #555; font-size: 0.9em;">(${p.departamento})</span>
                                        </label>
                                    </div>`
                                );
                            });
                            dialogContent.append(projectList);

                            dialogContent.dialog({
                                modal: true,
                                title: 'Descartar Proyecto',
                                width: 450,
                                buttons: {
                                    Descartar: function() {
                                        const selectedProjectId = $('input[name="proyectoADescartar"]:checked').val();
                                        if (!selectedProjectId) {
                                            alert('Por favor, selecciona un proyecto.');
                                            return;
                                        }
                                        const proyectoADescartar = proyectos.find(p => p.id == selectedProjectId);
                                        if (proyectoADescartar) {
                                            proyectoADescartar.estatus = 'descartado';
                                            setArrayValue(elArreglo, 'accionEspecialLastUsed', quincenaActual);
                                            actualizarResumenUI(); // <--- Cambio clave: refresca la UI de resumen
                                            var audio = new Audio('./Microwave_bell.wav');
                                            audio.play();
                                            alert('¡Proyecto descartado con éxito!');
                                            if (typeof guardaSesion === 'function') {
                                                guardaSesion();
                                            }
                                        }
                                        $(this).dialog('close');
                                    },
                                    Cancelar: function() {
                                        $(this).dialog('close');
                                    },
                                },
                                close: function() {
                                    $(this).dialog('destroy').remove();
                                },
                            });
                        } else if (accionQuincenal === 'Ordenar los próximos 5 proyectos') {
                            alert('Esta habilidad especial solo se puede utilizar desde el tablero de juego.');
                            return;
                        } else {
                            // Para las demás habilidades que solo muestran un mensaje
                            setArrayValue(elArreglo, 'accionEspecialLastUsed', quincenaActual);
                            window.alert(`¡Acción especial '${accionQuincenal}' activada!`);
                            if (typeof guardaSesion === 'function') {
                                guardaSesion();
                            }
                        }
                    }
                }, 450);
            } else {
                let quincenasRestantes = lastUsed + periodicidad - quincenaActual;
                window.alert('Aún no puedes usar la habilidad especial. Debes esperar ' + quincenasRestantes + ' quincena(s) más.');
            }
        });

        function parseMantenimiento(mantenimientoStr) {
            let t = 0,
                p = 0,
                c = 0;
            if (mantenimientoStr && mantenimientoStr !== 'N/A') {
                const matchesT = mantenimientoStr.match(/(\d+)T/i);
                const matchesP = mantenimientoStr.match(/(\d+)P/i);
                const matchesC = mantenimientoStr.match(/(\d+)C/i);
                if (matchesT) t = parseInt(matchesT[1]);
                if (matchesP) p = parseInt(matchesP[1]);
                if (matchesC) c = parseInt(matchesC[1]);
            }
            return {
                t,
                p,
                c
            };
        }

        function pagarMantenimientoProyecto(projectId) {
            console.log("[PagarManto] Iniciando pago para proyecto ID:", projectId);
            if (typeof deptoActual === 'undefined' || !deptoActual) {
                alert('Por favor, selecciona primero un departamento haciendo clic en él.');
                return;
            }

            const proyecto = proyectos.find(p => p.id == projectId);
            if (!proyecto) {
                alert('No se encontró el proyecto.');
                console.error("[PagarManto] Proyecto no encontrado con ID:", projectId);
                return;
            }
            console.log("[PagarManto] Proyecto encontrado:", proyecto.nombreProyecto);

            // Parse maintenance cost
            const cost = parseMantenimiento(proyecto.mantenimiento);
            console.log("[PagarManto] Costo parsed:", cost);

            // Get department resources
            const deptoArr = arreglosDeptos['arr' + deptoActual];
            const recT = parseInt(findArrayValue(deptoArr, 'recursoTiempo')) || 0;
            const recP = parseInt(findArrayValue(deptoArr, 'recursoPersonal')) || 0;
            const recC = parseInt(findArrayValue(deptoArr, 'recursoCapital')) || 0;
            console.log("[PagarManto] Recursos depto actual:", {
                recT,
                recP,
                recC
            });

            // Verificar si LogisticaYSistemas tiene comprada y disponible su habilidad especial
            let logisticaHabilidadEspecialDisponible = false;
            let elArregloLogistica = null;
            const quincena = parseInt($('#etQuincena').val()) || 1;
            const trimestreActual = Math.floor((quincena - 1) / 6) + 1;

            if (typeof deptoActual !== 'undefined' && deptoActual === 'LogisticaYSistemas') {
                elArregloLogistica = arreglosDeptos['arrLogisticaYSistemas'];
                if (elArregloLogistica) {
                    const accionQuincenal = findArrayValue(elArregloLogistica, 'accionEspecialQuincenal');
                    if (accionQuincenal && accionQuincenal !== '') {
                        const lastUsed = parseInt(findArrayValue(elArregloLogistica, 'accionEspecialLastUsed')) || 0;
                        const periodicidad = parseInt(findArrayValue(elArregloLogistica, 'accionEspecialPeriodicidad')) || 2;
                        if (lastUsed === 0 || quincena >= lastUsed + periodicidad) {
                            logisticaHabilidadEspecialDisponible = true;
                        }
                    }
                }
            }

            const deptoNombre = findArrayValue(deptoArr, 'nombre');

            if (logisticaHabilidadEspecialDisponible) {
                const dialogMsg = `El departamento de Logística y Sistemas tiene disponible la Habilidad Especial para omitir un mantenimiento sin costo.<br><br>` +
                    `¿Deseas usar la Habilidad Especial para omitir el mantenimiento del proyecto "${proyecto.nombreProyecto}" <b>sin gastar recursos</b>,<br>` +
                    `o prefieres realizar un pago normal gastando recursos (${proyecto.mantenimiento})?`;

                $('<div></div>')
                    .html(dialogMsg)
                    .dialog({
                        modal: true,
                        title: 'Pagar Mantenimiento - Logística y Sistemas',
                        width: 480,
                        buttons: {
                            "Usar Habilidad (Sin costo)": function() {
                                $(this).dialog('close');
                                // Mark project maintenance as paid in the current trimester
                                proyecto.mantenimientoPagadoEnTrimestre = trimestreActual;

                                // Update skill cooldown
                                setArrayValue(elArregloLogistica, 'accionEspecialLastUsed', quincena);

                                // Save and update UI
                                actualizarResumenUI();
                                actualizarTarjetaDepto('LogisticaYSistemas'); // Refresca la tarjeta en la UI

                                var audio = new Audio('./Microwave_bell.wav');
                                audio.play();

                                alert(`Se ha omitido el mantenimiento del proyecto "${proyecto.nombreProyecto}" sin costo utilizando la Habilidad Especial de Logística y Sistemas.`);

                                if (typeof guardarDatosEnServidor === 'function') {
                                    guardarDatosEnServidor();
                                }
                            },
                            "Pagar Normal (Con costo)": function() {
                                $(this).dialog('close');
                                ejecutarPagoNormal(proyecto, cost, deptoArr, recT, recP, recC, deptoNombre, trimestreActual, quincena);
                            },
                            "Cancelar": function() {
                                $(this).dialog('close');
                            }
                        }
                    });
            } else {
                ejecutarPagoNormal(proyecto, cost, deptoArr, recT, recP, recC, deptoNombre, trimestreActual, quincena);
            }
        }

        function ejecutarPagoNormal(proyecto, cost, deptoArr, recT, recP, recC, deptoNombre, trimestreActual, quincena) {
            if (recT < cost.t || recP < cost.p || recC < cost.c) {
                alert(`El departamento seleccionado (${deptoNombre}) NO tiene suficientes recursos para pagar el mantenimiento del proyecto "${proyecto.nombreProyecto}".\n` +
                    `Costo requerido: Tiempo: ${cost.t}, Personal: ${cost.p}, Capital: ${cost.c}\n` +
                    `Recursos actuales: Tiempo: ${recT}, Personal: ${recP}, Capital: ${recC}`);
                return;
            }

            const confirmMessage = `¿Estás seguro de que deseas pagar el mantenimiento de <b>${proyecto.mantenimiento}</b> para el proyecto "${proyecto.nombreProyecto}" desde el departamento <b>${deptoNombre}</b>?`;

            confirm(confirmMessage, function(confirmed) {
                if (confirmed) {
                    // Deduct resources
                    setArrayValue(deptoArr, 'recursoTiempo', recT - cost.t);
                    setArrayValue(deptoArr, 'recursoPersonal', recP - cost.p);
                    setArrayValue(deptoArr, 'recursoCapital', recC - cost.c);

                    // Mark project maintenance as paid in the current trimester
                    proyecto.mantenimientoPagadoEnTrimestre = trimestreActual;
                    console.log("[PagarManto] Asignado mantenimientoPagadoEnTrimestre a:", trimestreActual);

                    // Save and update UI
                    actualizarTarjetaDepto(deptoActual);
                    console.log("[PagarManto] Tarjeta departamento actualizada.");

                    actualizarResumenUI();
                    console.log("[PagarManto] UI de resumen actualizada.");

                    var audio = new Audio('./Microwave_bell.wav');
                    audio.play();

                    alert(`Mantenimiento pagado con éxito para el proyecto "${proyecto.nombreProyecto}" desde el departamento ${deptoNombre}. El proyecto continuará en proceso en el siguiente trimestre.`);

                    if (typeof guardarDatosEnServidor === 'function') {
                        console.log("[PagarManto] Guardando sesión en el servidor...");
                        guardarDatosEnServidor();
                    }
                }
            }, 450);
        }

        function desecharProyecto(projectId) {
            const proyecto = proyectos.find(p => p.id == projectId);
            if (!proyecto) {
                alert('No se encontró el proyecto.');
                return;
            }

            const penalizacionVal = parseInt(proyecto.penalizacion) || 0;
            const penalizacionFormateada = formatCurrency(penalizacionVal);

            const quincena = parseInt($('#etQuincena').val()) || 1;
            const trimestreActual = Math.floor((quincena - 1) / 6) + 1;

            // Verificar si Operaciones tiene comprada y disponible su habilidad especial
            let operacionesHabilidadEspecialDisponible = false;
            let elArregloOperaciones = null;
            if (typeof deptoActual !== 'undefined' && deptoActual === 'Operaciones') {
                elArregloOperaciones = arreglosDeptos['arrOperaciones'];
                if (elArregloOperaciones) {
                    const accionQuincenal = findArrayValue(elArregloOperaciones, 'accionEspecialQuincenal');
                    if (accionQuincenal && accionQuincenal !== '') {
                        const lastUsed = parseInt(findArrayValue(elArregloOperaciones, 'accionEspecialLastUsed')) || 0;
                        const periodicidad = parseInt(findArrayValue(elArregloOperaciones, 'accionEspecialPeriodicidad')) || 2;
                        if (lastUsed === 0 || quincena >= lastUsed + periodicidad) {
                            operacionesHabilidadEspecialDisponible = true;
                        }
                    }
                }
            }

            if (operacionesHabilidadEspecialDisponible) {
                const dialogMsg = `El departamento de Operaciones tiene disponible la Habilidad Especial para descartar un proyecto sin costo.<br><br>` +
                    `¿Deseas usar la Habilidad Especial para desechar el proyecto "${proyecto.nombreProyecto}" <b>sin pagar la penalización</b>,<br>` +
                    `o prefieres realizar un desecho normal pagando la penalización de <b>${penalizacionFormateada}</b>?`;

                $('<div></div>')
                    .html(dialogMsg)
                    .dialog({
                        modal: true,
                        title: 'Desechar Proyecto - Operaciones',
                        width: 480,
                        buttons: {
                            "Usar Habilidad (Sin costo)": function() {
                                $(this).dialog('close');
                                // Mark project as discarded
                                proyecto.estatus = 'descartado';

                                // Update skill cooldown
                                setArrayValue(elArregloOperaciones, 'accionEspecialLastUsed', quincena);

                                // Save and update UI
                                actualizarResumenUI();
                                actualizarTarjetaDepto('Operaciones'); // Refresca la tarjeta del depto en la UI

                                var audio = new Audio('./Microwave_bell.wav');
                                audio.play();

                                alert(`El proyecto "${proyecto.nombreProyecto}" ha sido desechado sin costo utilizando la Habilidad Especial de Operaciones.`);

                                if (typeof guardarDatosEnServidor === 'function') {
                                    guardarDatosEnServidor();
                                }
                            },
                            "Desechar Normal (Con costo)": function() {
                                $(this).dialog('close');
                                ejecutarDesechoNormal(proyecto, penalizacionVal, penalizacionFormateada, trimestreActual);
                            },
                            "Cancelar": function() {
                                $(this).dialog('close');
                            }
                        }
                    });
            } else {
                ejecutarDesechoNormal(proyecto, penalizacionVal, penalizacionFormateada, trimestreActual);
            }
        }

        function ejecutarDesechoNormal(proyecto, penalizacionVal, penalizacionFormateada, trimestreActual) {
            // Validar que el acumulado general acumulado hasta el trimestre actual sea suficiente
            let acumuladoDisponible = 0;
            for (let t = 1; t <= trimestreActual; t++) {
                acumuladoDisponible += (arregloGeneral['trimestre' + t] || 0);
            }

            if (acumuladoDisponible < penalizacionVal) {
                alert(`No puedes desechar el proyecto "${proyecto.nombreProyecto}" porque no hay acumulado general suficiente.\n` +
                    `Penalización requerida: ${penalizacionFormateada}\n` +
                    `Acumulado general disponible: ${formatCurrency(acumuladoDisponible)}`);
                return;
            }

            const confirmMessage = `¿Estás seguro de que deseas desechar el proyecto "${proyecto.nombreProyecto}"?<br>` +
                `Se aplicará una penalización de <b>${penalizacionFormateada}</b> del acumulado general.`;

            confirm(confirmMessage, function(confirmed) {
                if (confirmed) {
                    // Subtract from current trimester's earnings
                    const trimestreKey = 'trimestre' + trimestreActual;
                    if (typeof arregloGeneral[trimestreKey] === 'undefined') {
                        arregloGeneral[trimestreKey] = 0;
                    }
                    arregloGeneral[trimestreKey] -= penalizacionVal;

                    // Mark project as discarded
                    proyecto.estatus = 'descartado';

                    // Save and update UI
                    actualizarResumenUI();

                    var audio = new Audio('./Microwave_bell.wav');
                    audio.play();

                    alert(`El proyecto "${proyecto.nombreProyecto}" ha sido desechado. Se aplicó una penalización de ${penalizacionFormateada}.`);

                    if (typeof guardarDatosEnServidor === 'function') {
                        guardarDatosEnServidor();
                    }
                }
            }, 450);
        }

        // Delegación de eventos para los botones de pagar y desechar
        $(document).on('click', '.btn-pagar-mantenimiento', function() {
            const id = $(this).data('id');
            pagarMantenimientoProyecto(id);
        });

        $(document).on('click', '.btn-desechar-proyecto', function() {
            const id = $(this).data('id');
            desecharProyecto(id);
        });

        // El listener para el click en .departamentos ya está en jsCode.js y funcionará ahora
    </script>



</body>

</html>