N\u00facleo \u2014 Gesti\u00f3n Presupuestal<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n :root{\r\n --ink:#132029; --ink-soft:#3d4d55;\r\n --paper:#F4F2EC; --paper-raised:#FFFFFF; --line:#DDD8CB;\r\n --navy:#12303D; --navy-soft:#1C3E4E;\r\n --gold:#C98A3B; --gold-soft:#E8C899;\r\n --green:#3A7D57; --green-bg:#E4EEE6;\r\n --amber:#B8862F; --amber-bg:#F2E9D6;\r\n --red:#B4432B; --red-bg:#F3E1DB;\r\n --radius:14px;\r\n --shadow: 0 1px 2px rgba(19,32,41,0.06), 0 8px 24px -12px rgba(19,32,41,0.18);\r\n }\r\n *{box-sizing:border-box;}\r\n html,body{margin:0;padding:0;}\r\n body{background:var(--paper); color:var(--ink); font-family:'IBM Plex Sans', sans-serif; -webkit-font-smoothing:antialiased;}\r\n .app{display:grid; grid-template-columns:260px 1fr; min-height:100vh;}\r\n\r\n .sidebar{background:var(--navy); color:#EDEBE2; padding:28px 20px 20px; display:flex; flex-direction:column; gap:28px;}\r\n .brand{display:flex; align-items:center; gap:10px;}\r\n .brand-mark{width:34px;height:34px;border-radius:50%; background:radial-gradient(circle at 35% 30%, var(--gold-soft), var(--gold) 60%); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.25); flex-shrink:0;}\r\n .brand-name{font-family:'Fraunces', serif; font-weight:600; font-size:1.25rem;}\r\n .brand-sub{font-size:0.7rem; color:#9FB2BC; letter-spacing:0.06em; text-transform:uppercase; margin-top:-22px; margin-left:44px;}\r\n nav{display:flex;flex-direction:column;gap:2px;margin-top:6px;}\r\n .nav-item{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; font-size:0.87rem; color:#C7D3D8; text-decoration:none; cursor:pointer; transition:background 0.15s ease, color 0.15s ease;}\r\n .nav-item .num{font-family:'IBM Plex Mono', monospace; font-size:0.72rem; color:#7C929B; width:16px;}\r\n .nav-item:hover{background:rgba(255,255,255,0.06); color:#fff;}\r\n .nav-item.active{background:var(--navy-soft); color:#fff; box-shadow: inset 3px 0 0 var(--gold);}\r\n .nav-item.active .num{color:var(--gold);}\r\n .sidebar-footer{margin-top:auto; font-size:0.72rem; color:#7C929B; padding-top:16px; border-top:1px solid rgba(255,255,255,0.1);}\r\n\r\n main{padding:32px 40px 60px; max-width:1220px;}\r\n .topbar{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:26px; flex-wrap:wrap; gap:16px;}\r\n .eyebrow{font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold); margin-bottom:6px;}\r\n h1{font-family:'Fraunces', serif; font-weight:600; font-size:2rem; margin:0; color:var(--navy);}\r\n .subtitle{color:var(--ink-soft); font-size:0.95rem; margin-top:6px;}\r\n .user-chip{display:flex; align-items:center; gap:10px; background:var(--paper-raised); border:1px solid var(--line); border-radius:999px; padding:6px 14px 6px 6px; box-shadow:var(--shadow);}\r\n .user-avatar{width:30px;height:30px;border-radius:50%; background:var(--navy); color:#EDEBE2; display:flex;align-items:center;justify-content:center; font-size:0.75rem;font-weight:600; font-family:'IBM Plex Mono',monospace;}\r\n .user-chip .name{font-size:0.82rem;font-weight:500;}\r\n .user-chip .role{font-size:0.72rem;color:var(--ink-soft);}\r\n\r\n .query-panel{background:var(--navy); border-radius:var(--radius); padding:26px 30px; margin-bottom:24px; box-shadow:var(--shadow);}\r\n .query-label{font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--gold-soft); margin-bottom:10px;}\r\n .query-row{display:flex; gap:10px; align-items:center;}\r\n .query-input-wrap{flex:1; display:flex; align-items:center; gap:10px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15); border-radius:10px; padding:12px 16px;}\r\n .query-input-wrap svg{color:#9FB2BC; flex-shrink:0;}\r\n .query-input-wrap input{border:none; outline:none; background:transparent; color:#fff; font-size:0.95rem; font-family:'IBM Plex Sans', sans-serif; width:100%;}\r\n .query-input-wrap input::placeholder{color:#7C929B;}\r\n .query-hint{font-size:0.76rem; color:#8FA3AC; margin-top:8px;}\r\n .query-hint b{color:var(--gold-soft); font-weight:500;}\r\n .query-result{margin-top:18px; padding-top:18px; border-top:1px solid rgba(255,255,255,0.12); display:none;}\r\n .query-result.show{display:block;}\r\n .query-result-title{font-family:'Fraunces', serif; font-size:1.15rem; color:#fff; font-weight:600; margin-bottom:4px;}\r\n .query-result-code{font-family:'IBM Plex Mono', monospace; font-size:0.78rem; color:var(--gold-soft); margin-bottom:16px;}\r\n .query-cards{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}\r\n .query-card{background:rgba(255,255,255,0.06); border-radius:10px; padding:14px 16px;}\r\n .query-card .k{font-size:0.68rem; text-transform:uppercase; letter-spacing:0.04em; color:#9FB2BC; margin-bottom:4px;}\r\n .query-card .v{font-family:'IBM Plex Mono', monospace; font-size:1.1rem; color:#fff; font-weight:500;}\r\n .query-card .v.gold{color:var(--gold-soft);}\r\n .query-units{margin-top:14px; font-size:0.78rem; color:#B7C4CA;}\r\n .query-units b{color:#fff; font-weight:500;}\r\n .no-match{color:#B7C4CA; font-size:0.85rem;}\r\n\r\n .summary-strip{background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); padding:22px 26px; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:24px; box-shadow:var(--shadow);}\r\n .summary-item .label{font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-soft); margin-bottom:6px;}\r\n .summary-item .value{font-family:'Fraunces', serif; font-size:1.5rem; font-weight:600; color:var(--navy);}\r\n .summary-item .value.gold{color:var(--gold);}\r\n .summary-item .sub{font-size:0.74rem; color:var(--ink-soft); margin-top:4px;}\r\n\r\n .toolbar{display:flex; gap:12px; align-items:center; margin-bottom:16px; flex-wrap:wrap;}\r\n .search-box{flex:1; min-width:240px; display:flex; align-items:center; gap:8px; background:var(--paper-raised); border:1px solid var(--line); border-radius:10px; padding:10px 14px;}\r\n .search-box input{border:none; outline:none; background:transparent; font-family:'IBM Plex Sans', sans-serif; font-size:0.88rem; color:var(--ink); width:100%;}\r\n .search-box svg{flex-shrink:0; color:var(--ink-soft);}\r\n .filter-chip{font-size:0.8rem; padding:9px 14px; border-radius:10px; border:1px solid var(--line); background:var(--paper-raised); color:var(--ink-soft); cursor:pointer; user-select:none; transition:border-color 0.15s ease, color 0.15s ease;}\r\n .filter-chip.active{border-color:var(--navy); color:var(--navy); font-weight:600; background:var(--gold-soft);}\r\n\r\n .panel{background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;}\r\n table{width:100%; border-collapse:collapse;}\r\n thead th{text-align:left; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft); padding:13px 14px; border-bottom:1px solid var(--line); background:#FAF9F5;}\r\n tbody tr.data-row{border-bottom:1px solid var(--line); cursor:pointer; transition:background 0.12s ease;}\r\n tbody tr.data-row:hover{background:#FAF8F2;}\r\n tbody td{padding:13px 14px; font-size:0.83rem; vertical-align:top;}\r\n .code{font-family:'IBM Plex Mono',monospace; font-size:0.74rem; color:var(--gold); font-weight:500;}\r\n .desc-cell .name{font-weight:500; font-size:0.85rem;}\r\n .desc-cell .chain{font-size:0.72rem; color:var(--ink-soft); margin-top:3px; line-height:1.5;}\r\n .amount{font-family:'IBM Plex Mono',monospace; font-size:0.82rem;}\r\n .pct-cell{display:flex; align-items:center; gap:8px;}\r\n .pct-track{width:52px; height:6px; border-radius:999px; background:var(--line); overflow:hidden;}\r\n .pct-fill{height:100%; border-radius:999px;}\r\n .status-pill{display:inline-flex; align-items:center; gap:6px; font-size:0.72rem; font-weight:600; padding:4px 10px; border-radius:999px; white-space:nowrap;}\r\n .status-pill.green{background:var(--green-bg); color:var(--green);}\r\n .status-pill.amber{background:var(--amber-bg); color:var(--amber);}\r\n .status-pill.red{background:var(--red-bg); color:var(--red);}\r\n .status-pill .dot{width:6px;height:6px;border-radius:50%; background:currentColor;}\r\n .unit-cell .gerencia{font-weight:500; font-size:0.83rem;}\r\n .unit-cell .cargo{font-size:0.72rem; color:var(--ink-soft); margin-top:2px;}\r\n\r\n .detail-row td{padding:0; border-bottom:1px solid var(--line);}\r\n .detail-inner{padding:18px 24px; background:#FAF9F5; display:none; grid-template-columns:repeat(4,1fr); gap:18px;}\r\n .detail-inner.open{display:grid;}\r\n .detail-block .k{font-size:0.68rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft); margin-bottom:4px;}\r\n .detail-block .v{font-size:0.85rem; font-weight:500;}\r\n .detail-block .v.mono{font-family:'IBM Plex Mono',monospace;}\r\n\r\n .no-results{padding:40px; text-align:center; color:var(--ink-soft); font-size:0.9rem; display:none;}\r\n .demo-note{margin-top:20px; font-size:0.78rem; color:var(--ink-soft); text-align:center; padding:14px; border:1px dashed var(--line); border-radius:10px; background:rgba(201,138,59,0.05);}\r\n\r\n @media (max-width:980px){\r\n .app{grid-template-columns:1fr;}\r\n .sidebar{display:none;}\r\n .summary-strip{grid-template-columns:repeat(2,1fr);}\r\n .query-cards{grid-template-columns:repeat(2,1fr);}\r\n thead{display:none;}\r\n table, tbody, tr, td{display:block; width:100%;}\r\n tbody tr.data-row{padding:12px 16px; border-bottom:1px solid var(--line);}\r\n tbody td{padding:4px 0;}\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"app\">\r\n\r\n <aside class=\"sidebar\">\r\n <div>\r\n <div class=\"brand\"><div class=\"brand-mark\"><\/div><div class=\"brand-name\">N\u00facleo<\/div><\/div>\r\n <div class=\"brand-sub\">Gesti\u00f3n Digital<\/div>\r\n <\/div>\r\n <nav>\r\n <a class=\"nav-item\"><span class=\"num\">01<\/span> Tablero General<\/a>\r\n <a class=\"nav-item\"><span class=\"num\">02<\/span> Atenci\u00f3n Ciudadana<\/a>\r\n <a class=\"nav-item\"><span class=\"num\">03<\/span> Asistente Interno (IA)<\/a>\r\n <a class=\"nav-item\"><span class=\"num\">04<\/span> Gesti\u00f3n por Resultados<\/a>\r\n <a class=\"nav-item active\"><span class=\"num\">05<\/span> Planeamiento y Presupuesto<\/a>\r\n <a class=\"nav-item\"><span class=\"num\">06<\/span> Auditor\u00eda y Control<\/a>\r\n <a class=\"nav-item\"><span class=\"num\">07<\/span> Informes y Rendici\u00f3n<\/a>\r\n <a class=\"nav-item\"><span class=\"num\">08<\/span> Configuraci\u00f3n<\/a>\r\n <a class=\"nav-item\"><span class=\"num\">09<\/span> Ayuda y Soporte<\/a>\r\n <\/nav>\r\n <div class=\"sidebar-footer\">Municipalidad Distrital de Ejemplo<br>Sesi\u00f3n de demostraci\u00f3n<\/div>\r\n <\/aside>\r\n\r\n <main>\r\n <div class=\"topbar\">\r\n <div>\r\n <div class=\"eyebrow\">Planeamiento y Presupuesto<\/div>\r\n <h1>Gesti\u00f3n Presupuestal<\/h1>\r\n <div class=\"subtitle\">Estructurado sobre el Clasificador Presupuestario del MEF, el ROF y el MOF de la instituci\u00f3n<\/div>\r\n <\/div>\r\n <div class=\"user-chip\">\r\n <div class=\"user-avatar\">DM<\/div>\r\n <div><div class=\"name\">Demo Municipal<\/div><div class=\"role\">Gerente Municipal<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <section class=\"query-panel\">\r\n <div class=\"query-label\">Consulta por partida presupuestal<\/div>\r\n <div class=\"query-row\">\r\n <div class=\"query-input-wrap\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"7\"\/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/><\/svg>\r\n <input id=\"queryInput\" type=\"text\" placeholder=\"Ej: mantenimiento de veh\u00edculos, limpieza p\u00fablica, alimentaci\u00f3n escolar...\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"query-hint\">Prueba con <b>\"mantenimiento de veh\u00edculos\"<\/b> \u2014 el sistema suma autom\u00e1ticamente todas las gerencias que ejecutan gasto en esa espec\u00edfica del MEF.<\/div>\r\n <div class=\"query-result\" id=\"queryResult\"><\/div>\r\n <\/section>\r\n\r\n <section class=\"summary-strip\">\r\n <div class=\"summary-item\"><div class=\"label\">PIM total (institucional)<\/div><div class=\"value\">S\/ 4,820,000<\/div><div class=\"sub\">Presupuesto Institucional Modificado<\/div><\/div>\r\n <div class=\"summary-item\"><div class=\"label\">Ejecutado<\/div><div class=\"value gold\">S\/ 2,795,600<\/div><div class=\"sub\">Al corte de hoy<\/div><\/div>\r\n <div class=\"summary-item\"><div class=\"label\">Saldo disponible<\/div><div class=\"value\">S\/ 2,024,400<\/div><div class=\"sub\">42.0% pendiente<\/div><\/div>\r\n <div class=\"summary-item\"><div class=\"label\">% de ejecuci\u00f3n<\/div><div class=\"value gold\">58.0%<\/div><div class=\"sub\">Meta trimestral: 65%<\/div><\/div>\r\n <\/section>\r\n\r\n <div class=\"toolbar\">\r\n <div class=\"search-box\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"7\"\/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/><\/svg>\r\n <input id=\"tableSearch\" type=\"text\" placeholder=\"Filtrar la tabla por espec\u00edfica, gerencia o descripci\u00f3n...\">\r\n <\/div>\r\n <div class=\"filter-chip active\" data-filter=\"todos\">Todos<\/div>\r\n <div class=\"filter-chip\" data-filter=\"red\">Cr\u00edticos<\/div>\r\n <div class=\"filter-chip\" data-filter=\"amber\">En riesgo<\/div>\r\n <div class=\"filter-chip\" data-filter=\"green\">Al d\u00eda<\/div>\r\n <\/div>\r\n\r\n <div class=\"panel\">\r\n <table>\r\n <thead>\r\n <tr>\r\n <th>Espec\u00edfica MEF<\/th>\r\n <th>Cadena funcional<\/th>\r\n <th>Unidad ejecutora (ROF)<\/th>\r\n <th>PIM<\/th>\r\n <th>Ejecutado<\/th>\r\n <th>Avance<\/th>\r\n <th>Estado<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"tableBody\"><\/tbody>\r\n <\/table>\r\n <div class=\"no-results\" id=\"noResults\">No se encontraron partidas que coincidan con tu b\u00fasqueda.<\/div>\r\n <\/div>\r\n\r\n <div class=\"demo-note\">\r\n Prototipo de demostraci\u00f3n \u2014 los c\u00f3digos de espec\u00edfica corresponden a la estructura real del Clasificador Presupuestario del MEF; los montos y unidades ejecutoras son datos de ejemplo. Cada instituci\u00f3n debe validar sus propias cadenas con su Pliego y Unidad Ejecutora en el SIAF.\r\n <\/div>\r\n <\/main>\r\n<\/div>\r\n\r\n<script>\r\nconst data = [\r\n {specCode:\"2.3.2 4.1 3\", specName:\"Mantenimiento y reparaci\u00f3n de veh\u00edculos\", funcion:\"Transporte\", programa:\"V\u00edas Vecinales\", producto:\"Mantenimiento de flota vehicular\", fuente:\"Recursos Directamente Recaudados\", unit:\"Gerencia de Servicios P\u00fablicos\", cargo:\"Gerente de Servicios P\u00fablicos (MOF, cargo 4.2.1)\", assigned:180000, executed:132400, status:\"amber\", updated:\"19 ago 2026\"},\r\n {specCode:\"2.3.2 4.1 3\", specName:\"Mantenimiento y reparaci\u00f3n de veh\u00edculos\", funcion:\"Orden P\u00fablico y Seguridad\", programa:\"Seguridad Ciudadana\", producto:\"Operatividad de unidades de serenazgo\", fuente:\"Recursos Ordinarios\", unit:\"Gerencia de Seguridad Ciudadana\", cargo:\"Sub Gerente de Serenazgo (MOF, cargo 5.1.3)\", assigned:96000, executed:41200, status:\"red\", updated:\"16 ago 2026\"},\r\n {specCode:\"2.3.2 4.1 1\", specName:\"Mantenimiento de edificaciones y estructuras\", funcion:\"Educaci\u00f3n\", programa:\"Infraestructura Educativa\", producto:\"Mantenimiento de locales municipales\", fuente:\"Recursos Ordinarios\", unit:\"Gerencia de Infraestructura\", cargo:\"Gerente de Infraestructura (MOF, cargo 3.1.1)\", assigned:265000, executed:98000, status:\"red\", updated:\"16 ago 2026\"},\r\n {specCode:\"2.3.2 4.1 2\", specName:\"Mantenimiento de carreteras, caminos y puentes\", funcion:\"Transporte\", programa:\"V\u00edas Vecinales\", producto:\"Conservaci\u00f3n de v\u00edas locales\", fuente:\"Fondo de Compensaci\u00f3n Municipal\", unit:\"Gerencia de Obras\", cargo:\"Gerente de Obras P\u00fablicas (MOF, cargo 3.2.1)\", assigned:820000, executed:690800, status:\"green\", updated:\"18 ago 2026\"},\r\n {specCode:\"2.3.1 5.1 2\", specName:\"Materiales y \u00fatiles de limpieza\", funcion:\"Saneamiento\", programa:\"Gesti\u00f3n Integral de Residuos\", producto:\"Limpieza p\u00fablica y recojo de residuos\", fuente:\"Recursos Directamente Recaudados\", unit:\"Gerencia de Servicios P\u00fablicos\", cargo:\"Gerente de Servicios P\u00fablicos (MOF, cargo 4.2.1)\", assigned:690000, executed:641700, status:\"green\", updated:\"18 ago 2026\"},\r\n {specCode:\"2.3.2 8.1 1\", specName:\"Contrataci\u00f3n de personal bajo Contrato Administrativo de Servicios (CAS)\", funcion:\"Planeamiento, Gesti\u00f3n y Reserva de Contingencia\", programa:\"Fortalecimiento Institucional\", producto:\"Gesti\u00f3n de recursos humanos\", fuente:\"Recursos Ordinarios\", unit:\"Gerencia de Recursos Humanos\", cargo:\"Gerente de RR.HH. (MOF, cargo 2.1.1)\", assigned:1120000, executed:812400, status:\"amber\", updated:\"19 ago 2026\"},\r\n {specCode:\"2.3.1 8.1 1\", specName:\"Alimentos y bebidas para programas sociales\", funcion:\"Protecci\u00f3n Social\", programa:\"Programa de Complementaci\u00f3n Alimentaria\", producto:\"Atenci\u00f3n a comedores y escolares\", fuente:\"Recursos Ordinarios\", unit:\"Gerencia de Desarrollo Social\", cargo:\"Gerente de Desarrollo Social (MOF, cargo 4.1.1)\", assigned:410000, executed:398000, status:\"green\", updated:\"19 ago 2026\"},\r\n {specCode:\"2.3.2 2.4 4\", specName:\"Servicios de consultor\u00eda en salud preventiva\", funcion:\"Salud\", programa:\"Salud Colectiva\", producto:\"Campa\u00f1as de salud preventiva\", fuente:\"Recursos Directamente Recaudados\", unit:\"Gerencia de Salud Municipal\", cargo:\"Gerente de Salud (MOF, cargo 4.3.1)\", assigned:180000, executed:61200, status:\"red\", updated:\"15 ago 2026\"},\r\n {specCode:\"2.6.3 2.3 1\", specName:\"Adquisici\u00f3n de hardware \u2014 modernizaci\u00f3n digital\", funcion:\"Planeamiento, Gesti\u00f3n y Reserva de Contingencia\", programa:\"Modernizaci\u00f3n de la Gesti\u00f3n P\u00fablica\", producto:\"Mesa de partes digital\", fuente:\"Recursos Directamente Recaudados\", unit:\"Gerencia de Tecnolog\u00edas de la Informaci\u00f3n\", cargo:\"Gerente de TI (MOF, cargo 2.3.1)\", assigned:95000, executed:52800, status:\"amber\", updated:\"19 ago 2026\"}\r\n];\r\n\r\nfunction fmt(n){ return \"S\/ \" + n.toLocaleString(\"es-PE\"); }\r\nfunction pct(a,b){ return Math.round((a\/b)*100); }\r\nfunction statusLabel(s){ return s===\"green\" ? \"Al d\u00eda\" : s===\"amber\" ? \"En riesgo\" : \"Cr\u00edtico\"; }\r\nfunction statusColor(s){ return s===\"green\" ? \"#3A7D57\" : s===\"amber\" ? \"#B8862F\" : \"#B4432B\"; }\r\n\r\nconst tbody = document.getElementById(\"tableBody\");\r\nconst noResults = document.getElementById(\"noResults\");\r\n\r\nfunction render(rows){\r\n tbody.innerHTML = \"\";\r\n if(rows.length === 0){ noResults.style.display = \"block\"; return; }\r\n noResults.style.display = \"none\";\r\n\r\n rows.forEach((row, i) => {\r\n const p = pct(row.executed, row.assigned);\r\n const tr = document.createElement(\"tr\");\r\n tr.className = \"data-row\";\r\n tr.innerHTML = `\r\n <td class=\"desc-cell\">\r\n <span class=\"code\">${row.specCode}<\/span>\r\n <div class=\"name\" style=\"margin-top:4px;\">${row.specName}<\/div>\r\n <\/td>\r\n <td class=\"desc-cell\">\r\n <div class=\"name\">${row.funcion}<\/div>\r\n <div class=\"chain\">${row.programa} \u2192 ${row.producto}<\/div>\r\n <\/td>\r\n <td class=\"unit-cell\">\r\n <div class=\"gerencia\">${row.unit}<\/div>\r\n <div class=\"cargo\">${row.fuente}<\/div>\r\n <\/td>\r\n <td class=\"amount\">${fmt(row.assigned)}<\/td>\r\n <td class=\"amount\">${fmt(row.executed)}<\/td>\r\n <td><div class=\"pct-cell\"><div class=\"pct-track\"><div class=\"pct-fill\" style=\"width:${p}%; background:${statusColor(row.status)};\"><\/div><\/div><span style=\"font-family:'IBM Plex Mono',monospace; font-size:0.76rem;\">${p}%<\/span><\/div><\/td>\r\n <td><span class=\"status-pill ${row.status}\"><span class=\"dot\"><\/span>${statusLabel(row.status)}<\/span><\/td>\r\n `;\r\n const detailTr = document.createElement(\"tr\");\r\n detailTr.className = \"detail-row\";\r\n detailTr.innerHTML = `\r\n <td colspan=\"7\">\r\n <div class=\"detail-inner\" id=\"detail-${i}\">\r\n <div class=\"detail-block\"><div class=\"k\">Responsable (MOF)<\/div><div class=\"v\">${row.cargo}<\/div><\/div>\r\n <div class=\"detail-block\"><div class=\"k\">Fuente de financiamiento<\/div><div class=\"v\">${row.fuente}<\/div><\/div>\r\n <div class=\"detail-block\"><div class=\"k\">\u00daltima actualizaci\u00f3n<\/div><div class=\"v\">${row.updated}<\/div><\/div>\r\n <div class=\"detail-block\"><div class=\"k\">Saldo disponible<\/div><div class=\"v mono\">${fmt(row.assigned - row.executed)}<\/div><\/div>\r\n <\/div>\r\n <\/td>\r\n `;\r\n tr.addEventListener(\"click\", () => {\r\n document.getElementById(`detail-${i}`).classList.toggle(\"open\");\r\n });\r\n tbody.appendChild(tr);\r\n tbody.appendChild(detailTr);\r\n });\r\n}\r\n\r\nlet activeFilter = \"todos\";\r\nfunction applyTableFilters(){\r\n const q = document.getElementById(\"tableSearch\").value.trim().toLowerCase();\r\n const filtered = data.filter(row => {\r\n const matchesFilter = activeFilter === \"todos\" || row.status === activeFilter;\r\n const haystack = (row.specCode + \" \" + row.specName + \" \" + row.unit + \" \" + row.funcion).toLowerCase();\r\n return matchesFilter && haystack.includes(q);\r\n });\r\n render(filtered);\r\n}\r\n\r\ndocument.getElementById(\"tableSearch\").addEventListener(\"input\", applyTableFilters);\r\ndocument.querySelectorAll(\".filter-chip\").forEach(chip => {\r\n chip.addEventListener(\"click\", () => {\r\n document.querySelectorAll(\".filter-chip\").forEach(c => c.classList.remove(\"active\"));\r\n chip.classList.add(\"active\");\r\n activeFilter = chip.dataset.filter;\r\n applyTableFilters();\r\n });\r\n});\r\n\r\nconst queryInput = document.getElementById(\"queryInput\");\r\nconst queryResult = document.getElementById(\"queryResult\");\r\n\r\nqueryInput.addEventListener(\"input\", () => {\r\n const q = queryInput.value.trim().toLowerCase();\r\n if(q.length < 3){ queryResult.classList.remove(\"show\"); return; }\r\n\r\n const matches = data.filter(row => row.specName.toLowerCase().includes(q));\r\n if(matches.length === 0){\r\n queryResult.classList.add(\"show\");\r\n queryResult.innerHTML = `<div class=\"no-match\">Sin resultados para \"${queryInput.value}\". Intenta con otro t\u00e9rmino, como \"mantenimiento\", \"limpieza\" o \"alimentaci\u00f3n\".<\/div>`;\r\n return;\r\n }\r\n\r\n const totalAssigned = matches.reduce((s,r) => s + r.assigned, 0);\r\n const totalExecuted = matches.reduce((s,r) => s + r.executed, 0);\r\n const totalBalance = totalAssigned - totalExecuted;\r\n const totalPct = Math.round((totalExecuted\/totalAssigned)*100);\r\n const unitsList = [...new Set(matches.map(r => r.unit))];\r\n\r\n queryResult.classList.add(\"show\");\r\n queryResult.innerHTML = `\r\n <div class=\"query-result-title\">${matches[0].specName}<\/div>\r\n <div class=\"query-result-code\">Espec\u00edfica MEF ${matches[0].specCode} \u2014 agregado de ${matches.length} unidad(es) ejecutora(s)<\/div>\r\n <div class=\"query-cards\">\r\n <div class=\"query-card\"><div class=\"k\">PIM total<\/div><div class=\"v\">${fmt(totalAssigned)}<\/div><\/div>\r\n <div class=\"query-card\"><div class=\"k\">Ejecutado<\/div><div class=\"v gold\">${fmt(totalExecuted)}<\/div><\/div>\r\n <div class=\"query-card\"><div class=\"k\">Saldo disponible<\/div><div class=\"v\">${fmt(totalBalance)}<\/div><\/div>\r\n <div class=\"query-card\"><div class=\"k\">% de avance<\/div><div class=\"v gold\">${totalPct}%<\/div><\/div>\r\n <\/div>\r\n <div class=\"query-units\"><b>Gerencias involucradas:<\/b> ${unitsList.join(\", \")}<\/div>\r\n `;\r\n});\r\n\r\nrender(data);\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>N\u00facleo \u2014 Gesti\u00f3n Presupuestal N\u00facleo Gesti\u00f3n Digital 01 Tablero General 02 Atenci\u00f3n Ciudadana 03 Asistente Interno (IA) 04 Gesti\u00f3n por Resultados 05 Planeamiento y Presupuesto 06 Auditor\u00eda y Control 07 Informes y Rendici\u00f3n 08 Configuraci\u00f3n 09 Ayuda y Soporte Municipalidad Distrital de EjemploSesi\u00f3n de demostraci\u00f3n Planeamiento y Presupuesto Gesti\u00f3n Presupuestal Estructurado sobre el Clasificador Presupuestario […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":638,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-857","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/miespaciodigital.net\/auditoria\/wp-json\/wp\/v2\/pages\/857","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/miespaciodigital.net\/auditoria\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/miespaciodigital.net\/auditoria\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/miespaciodigital.net\/auditoria\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/miespaciodigital.net\/auditoria\/wp-json\/wp\/v2\/comments?post=857"}],"version-history":[{"count":5,"href":"https:\/\/miespaciodigital.net\/auditoria\/wp-json\/wp\/v2\/pages\/857\/revisions"}],"predecessor-version":[{"id":872,"href":"https:\/\/miespaciodigital.net\/auditoria\/wp-json\/wp\/v2\/pages\/857\/revisions\/872"}],"up":[{"embeddable":true,"href":"https:\/\/miespaciodigital.net\/auditoria\/wp-json\/wp\/v2\/pages\/638"}],"wp:attachment":[{"href":"https:\/\/miespaciodigital.net\/auditoria\/wp-json\/wp\/v2\/media?parent=857"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n \t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\n\r\nN\u00facleo \u2014 Gesti\u00f3n Presupuestal<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n :root{\r\n --ink:#132029; --ink-soft:#3d4d55;\r\n --paper:#F4F2EC; --paper-raised:#FFFFFF; --line:#DDD8CB;\r\n --navy:#12303D; --navy-soft:#1C3E4E;\r\n --gold:#C98A3B; --gold-soft:#E8C899;\r\n --green:#3A7D57; --green-bg:#E4EEE6;\r\n --amber:#B8862F; --amber-bg:#F2E9D6;\r\n --red:#B4432B; --red-bg:#F3E1DB;\r\n --radius:14px;\r\n --shadow: 0 1px 2px rgba(19,32,41,0.06), 0 8px 24px -12px rgba(19,32,41,0.18);\r\n }\r\n *{box-sizing:border-box;}\r\n html,body{margin:0;padding:0;}\r\n body{background:var(--paper); color:var(--ink); font-family:'IBM Plex Sans', sans-serif; -webkit-font-smoothing:antialiased;}\r\n .app{display:grid; grid-template-columns:260px 1fr; min-height:100vh;}\r\n\r\n .sidebar{background:var(--navy); color:#EDEBE2; padding:28px 20px 20px; display:flex; flex-direction:column; gap:28px;}\r\n .brand{display:flex; align-items:center; gap:10px;}\r\n .brand-mark{width:34px;height:34px;border-radius:50%; background:radial-gradient(circle at 35% 30%, var(--gold-soft), var(--gold) 60%); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.25); flex-shrink:0;}\r\n .brand-name{font-family:'Fraunces', serif; font-weight:600; font-size:1.25rem;}\r\n .brand-sub{font-size:0.7rem; color:#9FB2BC; letter-spacing:0.06em; text-transform:uppercase; margin-top:-22px; margin-left:44px;}\r\n nav{display:flex;flex-direction:column;gap:2px;margin-top:6px;}\r\n .nav-item{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; font-size:0.87rem; color:#C7D3D8; text-decoration:none; cursor:pointer; transition:background 0.15s ease, color 0.15s ease;}\r\n .nav-item .num{font-family:'IBM Plex Mono', monospace; font-size:0.72rem; color:#7C929B; width:16px;}\r\n .nav-item:hover{background:rgba(255,255,255,0.06); color:#fff;}\r\n .nav-item.active{background:var(--navy-soft); color:#fff; box-shadow: inset 3px 0 0 var(--gold);}\r\n .nav-item.active .num{color:var(--gold);}\r\n .sidebar-footer{margin-top:auto; font-size:0.72rem; color:#7C929B; padding-top:16px; border-top:1px solid rgba(255,255,255,0.1);}\r\n\r\n main{padding:32px 40px 60px; max-width:1220px;}\r\n .topbar{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:26px; flex-wrap:wrap; gap:16px;}\r\n .eyebrow{font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold); margin-bottom:6px;}\r\n h1{font-family:'Fraunces', serif; font-weight:600; font-size:2rem; margin:0; color:var(--navy);}\r\n .subtitle{color:var(--ink-soft); font-size:0.95rem; margin-top:6px;}\r\n .user-chip{display:flex; align-items:center; gap:10px; background:var(--paper-raised); border:1px solid var(--line); border-radius:999px; padding:6px 14px 6px 6px; box-shadow:var(--shadow);}\r\n .user-avatar{width:30px;height:30px;border-radius:50%; background:var(--navy); color:#EDEBE2; display:flex;align-items:center;justify-content:center; font-size:0.75rem;font-weight:600; font-family:'IBM Plex Mono',monospace;}\r\n .user-chip .name{font-size:0.82rem;font-weight:500;}\r\n .user-chip .role{font-size:0.72rem;color:var(--ink-soft);}\r\n\r\n .query-panel{background:var(--navy); border-radius:var(--radius); padding:26px 30px; margin-bottom:24px; box-shadow:var(--shadow);}\r\n .query-label{font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--gold-soft); margin-bottom:10px;}\r\n .query-row{display:flex; gap:10px; align-items:center;}\r\n .query-input-wrap{flex:1; display:flex; align-items:center; gap:10px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15); border-radius:10px; padding:12px 16px;}\r\n .query-input-wrap svg{color:#9FB2BC; flex-shrink:0;}\r\n .query-input-wrap input{border:none; outline:none; background:transparent; color:#fff; font-size:0.95rem; font-family:'IBM Plex Sans', sans-serif; width:100%;}\r\n .query-input-wrap input::placeholder{color:#7C929B;}\r\n .query-hint{font-size:0.76rem; color:#8FA3AC; margin-top:8px;}\r\n .query-hint b{color:var(--gold-soft); font-weight:500;}\r\n .query-result{margin-top:18px; padding-top:18px; border-top:1px solid rgba(255,255,255,0.12); display:none;}\r\n .query-result.show{display:block;}\r\n .query-result-title{font-family:'Fraunces', serif; font-size:1.15rem; color:#fff; font-weight:600; margin-bottom:4px;}\r\n .query-result-code{font-family:'IBM Plex Mono', monospace; font-size:0.78rem; color:var(--gold-soft); margin-bottom:16px;}\r\n .query-cards{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}\r\n .query-card{background:rgba(255,255,255,0.06); border-radius:10px; padding:14px 16px;}\r\n .query-card .k{font-size:0.68rem; text-transform:uppercase; letter-spacing:0.04em; color:#9FB2BC; margin-bottom:4px;}\r\n .query-card .v{font-family:'IBM Plex Mono', monospace; font-size:1.1rem; color:#fff; font-weight:500;}\r\n .query-card .v.gold{color:var(--gold-soft);}\r\n .query-units{margin-top:14px; font-size:0.78rem; color:#B7C4CA;}\r\n .query-units b{color:#fff; font-weight:500;}\r\n .no-match{color:#B7C4CA; font-size:0.85rem;}\r\n\r\n .summary-strip{background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); padding:22px 26px; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:24px; box-shadow:var(--shadow);}\r\n .summary-item .label{font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-soft); margin-bottom:6px;}\r\n .summary-item .value{font-family:'Fraunces', serif; font-size:1.5rem; font-weight:600; color:var(--navy);}\r\n .summary-item .value.gold{color:var(--gold);}\r\n .summary-item .sub{font-size:0.74rem; color:var(--ink-soft); margin-top:4px;}\r\n\r\n .toolbar{display:flex; gap:12px; align-items:center; margin-bottom:16px; flex-wrap:wrap;}\r\n .search-box{flex:1; min-width:240px; display:flex; align-items:center; gap:8px; background:var(--paper-raised); border:1px solid var(--line); border-radius:10px; padding:10px 14px;}\r\n .search-box input{border:none; outline:none; background:transparent; font-family:'IBM Plex Sans', sans-serif; font-size:0.88rem; color:var(--ink); width:100%;}\r\n .search-box svg{flex-shrink:0; color:var(--ink-soft);}\r\n .filter-chip{font-size:0.8rem; padding:9px 14px; border-radius:10px; border:1px solid var(--line); background:var(--paper-raised); color:var(--ink-soft); cursor:pointer; user-select:none; transition:border-color 0.15s ease, color 0.15s ease;}\r\n .filter-chip.active{border-color:var(--navy); color:var(--navy); font-weight:600; background:var(--gold-soft);}\r\n\r\n .panel{background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;}\r\n table{width:100%; border-collapse:collapse;}\r\n thead th{text-align:left; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft); padding:13px 14px; border-bottom:1px solid var(--line); background:#FAF9F5;}\r\n tbody tr.data-row{border-bottom:1px solid var(--line); cursor:pointer; transition:background 0.12s ease;}\r\n tbody tr.data-row:hover{background:#FAF8F2;}\r\n tbody td{padding:13px 14px; font-size:0.83rem; vertical-align:top;}\r\n .code{font-family:'IBM Plex Mono',monospace; font-size:0.74rem; color:var(--gold); font-weight:500;}\r\n .desc-cell .name{font-weight:500; font-size:0.85rem;}\r\n .desc-cell .chain{font-size:0.72rem; color:var(--ink-soft); margin-top:3px; line-height:1.5;}\r\n .amount{font-family:'IBM Plex Mono',monospace; font-size:0.82rem;}\r\n .pct-cell{display:flex; align-items:center; gap:8px;}\r\n .pct-track{width:52px; height:6px; border-radius:999px; background:var(--line); overflow:hidden;}\r\n .pct-fill{height:100%; border-radius:999px;}\r\n .status-pill{display:inline-flex; align-items:center; gap:6px; font-size:0.72rem; font-weight:600; padding:4px 10px; border-radius:999px; white-space:nowrap;}\r\n .status-pill.green{background:var(--green-bg); color:var(--green);}\r\n .status-pill.amber{background:var(--amber-bg); color:var(--amber);}\r\n .status-pill.red{background:var(--red-bg); color:var(--red);}\r\n .status-pill .dot{width:6px;height:6px;border-radius:50%; background:currentColor;}\r\n .unit-cell .gerencia{font-weight:500; font-size:0.83rem;}\r\n .unit-cell .cargo{font-size:0.72rem; color:var(--ink-soft); margin-top:2px;}\r\n\r\n .detail-row td{padding:0; border-bottom:1px solid var(--line);}\r\n .detail-inner{padding:18px 24px; background:#FAF9F5; display:none; grid-template-columns:repeat(4,1fr); gap:18px;}\r\n .detail-inner.open{display:grid;}\r\n .detail-block .k{font-size:0.68rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft); margin-bottom:4px;}\r\n .detail-block .v{font-size:0.85rem; font-weight:500;}\r\n .detail-block .v.mono{font-family:'IBM Plex Mono',monospace;}\r\n\r\n .no-results{padding:40px; text-align:center; color:var(--ink-soft); font-size:0.9rem; display:none;}\r\n .demo-note{margin-top:20px; font-size:0.78rem; color:var(--ink-soft); text-align:center; padding:14px; border:1px dashed var(--line); border-radius:10px; background:rgba(201,138,59,0.05);}\r\n\r\n @media (max-width:980px){\r\n .app{grid-template-columns:1fr;}\r\n .sidebar{display:none;}\r\n .summary-strip{grid-template-columns:repeat(2,1fr);}\r\n .query-cards{grid-template-columns:repeat(2,1fr);}\r\n thead{display:none;}\r\n table, tbody, tr, td{display:block; width:100%;}\r\n tbody tr.data-row{padding:12px 16px; border-bottom:1px solid var(--line);}\r\n tbody td{padding:4px 0;}\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"app\">\r\n\r\n <aside class=\"sidebar\">\r\n <div>\r\n <div class=\"brand\"><div class=\"brand-mark\"><\/div><div class=\"brand-name\">N\u00facleo<\/div><\/div>\r\n <div class=\"brand-sub\">Gesti\u00f3n Digital<\/div>\r\n <\/div>\r\n <nav>\r\n <a class=\"nav-item\"><span class=\"num\">01<\/span> Tablero General<\/a>\r\n <a class=\"nav-item\"><span class=\"num\">02<\/span> Atenci\u00f3n Ciudadana<\/a>\r\n <a class=\"nav-item\"><span class=\"num\">03<\/span> Asistente Interno (IA)<\/a>\r\n <a class=\"nav-item\"><span class=\"num\">04<\/span> Gesti\u00f3n por Resultados<\/a>\r\n <a class=\"nav-item active\"><span class=\"num\">05<\/span> Planeamiento y Presupuesto<\/a>\r\n <a class=\"nav-item\"><span class=\"num\">06<\/span> Auditor\u00eda y Control<\/a>\r\n <a class=\"nav-item\"><span class=\"num\">07<\/span> Informes y Rendici\u00f3n<\/a>\r\n <a class=\"nav-item\"><span class=\"num\">08<\/span> Configuraci\u00f3n<\/a>\r\n <a class=\"nav-item\"><span class=\"num\">09<\/span> Ayuda y Soporte<\/a>\r\n <\/nav>\r\n <div class=\"sidebar-footer\">Municipalidad Distrital de Ejemplo<br>Sesi\u00f3n de demostraci\u00f3n<\/div>\r\n <\/aside>\r\n\r\n <main>\r\n <div class=\"topbar\">\r\n <div>\r\n <div class=\"eyebrow\">Planeamiento y Presupuesto<\/div>\r\n <h1>Gesti\u00f3n Presupuestal<\/h1>\r\n <div class=\"subtitle\">Estructurado sobre el Clasificador Presupuestario del MEF, el ROF y el MOF de la instituci\u00f3n<\/div>\r\n <\/div>\r\n <div class=\"user-chip\">\r\n <div class=\"user-avatar\">DM<\/div>\r\n <div><div class=\"name\">Demo Municipal<\/div><div class=\"role\">Gerente Municipal<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <section class=\"query-panel\">\r\n <div class=\"query-label\">Consulta por partida presupuestal<\/div>\r\n <div class=\"query-row\">\r\n <div class=\"query-input-wrap\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"7\"\/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/><\/svg>\r\n <input id=\"queryInput\" type=\"text\" placeholder=\"Ej: mantenimiento de veh\u00edculos, limpieza p\u00fablica, alimentaci\u00f3n escolar...\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"query-hint\">Prueba con <b>\"mantenimiento de veh\u00edculos\"<\/b> \u2014 el sistema suma autom\u00e1ticamente todas las gerencias que ejecutan gasto en esa espec\u00edfica del MEF.<\/div>\r\n <div class=\"query-result\" id=\"queryResult\"><\/div>\r\n <\/section>\r\n\r\n <section class=\"summary-strip\">\r\n <div class=\"summary-item\"><div class=\"label\">PIM total (institucional)<\/div><div class=\"value\">S\/ 4,820,000<\/div><div class=\"sub\">Presupuesto Institucional Modificado<\/div><\/div>\r\n <div class=\"summary-item\"><div class=\"label\">Ejecutado<\/div><div class=\"value gold\">S\/ 2,795,600<\/div><div class=\"sub\">Al corte de hoy<\/div><\/div>\r\n <div class=\"summary-item\"><div class=\"label\">Saldo disponible<\/div><div class=\"value\">S\/ 2,024,400<\/div><div class=\"sub\">42.0% pendiente<\/div><\/div>\r\n <div class=\"summary-item\"><div class=\"label\">% de ejecuci\u00f3n<\/div><div class=\"value gold\">58.0%<\/div><div class=\"sub\">Meta trimestral: 65%<\/div><\/div>\r\n <\/section>\r\n\r\n <div class=\"toolbar\">\r\n <div class=\"search-box\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"7\"\/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/><\/svg>\r\n <input id=\"tableSearch\" type=\"text\" placeholder=\"Filtrar la tabla por espec\u00edfica, gerencia o descripci\u00f3n...\">\r\n <\/div>\r\n <div class=\"filter-chip active\" data-filter=\"todos\">Todos<\/div>\r\n <div class=\"filter-chip\" data-filter=\"red\">Cr\u00edticos<\/div>\r\n <div class=\"filter-chip\" data-filter=\"amber\">En riesgo<\/div>\r\n <div class=\"filter-chip\" data-filter=\"green\">Al d\u00eda<\/div>\r\n <\/div>\r\n\r\n <div class=\"panel\">\r\n <table>\r\n <thead>\r\n <tr>\r\n <th>Espec\u00edfica MEF<\/th>\r\n <th>Cadena funcional<\/th>\r\n <th>Unidad ejecutora (ROF)<\/th>\r\n <th>PIM<\/th>\r\n <th>Ejecutado<\/th>\r\n <th>Avance<\/th>\r\n <th>Estado<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"tableBody\"><\/tbody>\r\n <\/table>\r\n <div class=\"no-results\" id=\"noResults\">No se encontraron partidas que coincidan con tu b\u00fasqueda.<\/div>\r\n <\/div>\r\n\r\n <div class=\"demo-note\">\r\n Prototipo de demostraci\u00f3n \u2014 los c\u00f3digos de espec\u00edfica corresponden a la estructura real del Clasificador Presupuestario del MEF; los montos y unidades ejecutoras son datos de ejemplo. Cada instituci\u00f3n debe validar sus propias cadenas con su Pliego y Unidad Ejecutora en el SIAF.\r\n <\/div>\r\n <\/main>\r\n<\/div>\r\n\r\n<script>\r\nconst data = [\r\n {specCode:\"2.3.2 4.1 3\", specName:\"Mantenimiento y reparaci\u00f3n de veh\u00edculos\", funcion:\"Transporte\", programa:\"V\u00edas Vecinales\", producto:\"Mantenimiento de flota vehicular\", fuente:\"Recursos Directamente Recaudados\", unit:\"Gerencia de Servicios P\u00fablicos\", cargo:\"Gerente de Servicios P\u00fablicos (MOF, cargo 4.2.1)\", assigned:180000, executed:132400, status:\"amber\", updated:\"19 ago 2026\"},\r\n {specCode:\"2.3.2 4.1 3\", specName:\"Mantenimiento y reparaci\u00f3n de veh\u00edculos\", funcion:\"Orden P\u00fablico y Seguridad\", programa:\"Seguridad Ciudadana\", producto:\"Operatividad de unidades de serenazgo\", fuente:\"Recursos Ordinarios\", unit:\"Gerencia de Seguridad Ciudadana\", cargo:\"Sub Gerente de Serenazgo (MOF, cargo 5.1.3)\", assigned:96000, executed:41200, status:\"red\", updated:\"16 ago 2026\"},\r\n {specCode:\"2.3.2 4.1 1\", specName:\"Mantenimiento de edificaciones y estructuras\", funcion:\"Educaci\u00f3n\", programa:\"Infraestructura Educativa\", producto:\"Mantenimiento de locales municipales\", fuente:\"Recursos Ordinarios\", unit:\"Gerencia de Infraestructura\", cargo:\"Gerente de Infraestructura (MOF, cargo 3.1.1)\", assigned:265000, executed:98000, status:\"red\", updated:\"16 ago 2026\"},\r\n {specCode:\"2.3.2 4.1 2\", specName:\"Mantenimiento de carreteras, caminos y puentes\", funcion:\"Transporte\", programa:\"V\u00edas Vecinales\", producto:\"Conservaci\u00f3n de v\u00edas locales\", fuente:\"Fondo de Compensaci\u00f3n Municipal\", unit:\"Gerencia de Obras\", cargo:\"Gerente de Obras P\u00fablicas (MOF, cargo 3.2.1)\", assigned:820000, executed:690800, status:\"green\", updated:\"18 ago 2026\"},\r\n {specCode:\"2.3.1 5.1 2\", specName:\"Materiales y \u00fatiles de limpieza\", funcion:\"Saneamiento\", programa:\"Gesti\u00f3n Integral de Residuos\", producto:\"Limpieza p\u00fablica y recojo de residuos\", fuente:\"Recursos Directamente Recaudados\", unit:\"Gerencia de Servicios P\u00fablicos\", cargo:\"Gerente de Servicios P\u00fablicos (MOF, cargo 4.2.1)\", assigned:690000, executed:641700, status:\"green\", updated:\"18 ago 2026\"},\r\n {specCode:\"2.3.2 8.1 1\", specName:\"Contrataci\u00f3n de personal bajo Contrato Administrativo de Servicios (CAS)\", funcion:\"Planeamiento, Gesti\u00f3n y Reserva de Contingencia\", programa:\"Fortalecimiento Institucional\", producto:\"Gesti\u00f3n de recursos humanos\", fuente:\"Recursos Ordinarios\", unit:\"Gerencia de Recursos Humanos\", cargo:\"Gerente de RR.HH. (MOF, cargo 2.1.1)\", assigned:1120000, executed:812400, status:\"amber\", updated:\"19 ago 2026\"},\r\n {specCode:\"2.3.1 8.1 1\", specName:\"Alimentos y bebidas para programas sociales\", funcion:\"Protecci\u00f3n Social\", programa:\"Programa de Complementaci\u00f3n Alimentaria\", producto:\"Atenci\u00f3n a comedores y escolares\", fuente:\"Recursos Ordinarios\", unit:\"Gerencia de Desarrollo Social\", cargo:\"Gerente de Desarrollo Social (MOF, cargo 4.1.1)\", assigned:410000, executed:398000, status:\"green\", updated:\"19 ago 2026\"},\r\n {specCode:\"2.3.2 2.4 4\", specName:\"Servicios de consultor\u00eda en salud preventiva\", funcion:\"Salud\", programa:\"Salud Colectiva\", producto:\"Campa\u00f1as de salud preventiva\", fuente:\"Recursos Directamente Recaudados\", unit:\"Gerencia de Salud Municipal\", cargo:\"Gerente de Salud (MOF, cargo 4.3.1)\", assigned:180000, executed:61200, status:\"red\", updated:\"15 ago 2026\"},\r\n {specCode:\"2.6.3 2.3 1\", specName:\"Adquisici\u00f3n de hardware \u2014 modernizaci\u00f3n digital\", funcion:\"Planeamiento, Gesti\u00f3n y Reserva de Contingencia\", programa:\"Modernizaci\u00f3n de la Gesti\u00f3n P\u00fablica\", producto:\"Mesa de partes digital\", fuente:\"Recursos Directamente Recaudados\", unit:\"Gerencia de Tecnolog\u00edas de la Informaci\u00f3n\", cargo:\"Gerente de TI (MOF, cargo 2.3.1)\", assigned:95000, executed:52800, status:\"amber\", updated:\"19 ago 2026\"}\r\n];\r\n\r\nfunction fmt(n){ return \"S\/ \" + n.toLocaleString(\"es-PE\"); }\r\nfunction pct(a,b){ return Math.round((a\/b)*100); }\r\nfunction statusLabel(s){ return s===\"green\" ? \"Al d\u00eda\" : s===\"amber\" ? \"En riesgo\" : \"Cr\u00edtico\"; }\r\nfunction statusColor(s){ return s===\"green\" ? \"#3A7D57\" : s===\"amber\" ? \"#B8862F\" : \"#B4432B\"; }\r\n\r\nconst tbody = document.getElementById(\"tableBody\");\r\nconst noResults = document.getElementById(\"noResults\");\r\n\r\nfunction render(rows){\r\n tbody.innerHTML = \"\";\r\n if(rows.length === 0){ noResults.style.display = \"block\"; return; }\r\n noResults.style.display = \"none\";\r\n\r\n rows.forEach((row, i) => {\r\n const p = pct(row.executed, row.assigned);\r\n const tr = document.createElement(\"tr\");\r\n tr.className = \"data-row\";\r\n tr.innerHTML = `\r\n <td class=\"desc-cell\">\r\n <span class=\"code\">${row.specCode}<\/span>\r\n <div class=\"name\" style=\"margin-top:4px;\">${row.specName}<\/div>\r\n <\/td>\r\n <td class=\"desc-cell\">\r\n <div class=\"name\">${row.funcion}<\/div>\r\n <div class=\"chain\">${row.programa} \u2192 ${row.producto}<\/div>\r\n <\/td>\r\n <td class=\"unit-cell\">\r\n <div class=\"gerencia\">${row.unit}<\/div>\r\n <div class=\"cargo\">${row.fuente}<\/div>\r\n <\/td>\r\n <td class=\"amount\">${fmt(row.assigned)}<\/td>\r\n <td class=\"amount\">${fmt(row.executed)}<\/td>\r\n <td><div class=\"pct-cell\"><div class=\"pct-track\"><div class=\"pct-fill\" style=\"width:${p}%; background:${statusColor(row.status)};\"><\/div><\/div><span style=\"font-family:'IBM Plex Mono',monospace; font-size:0.76rem;\">${p}%<\/span><\/div><\/td>\r\n <td><span class=\"status-pill ${row.status}\"><span class=\"dot\"><\/span>${statusLabel(row.status)}<\/span><\/td>\r\n `;\r\n const detailTr = document.createElement(\"tr\");\r\n detailTr.className = \"detail-row\";\r\n detailTr.innerHTML = `\r\n <td colspan=\"7\">\r\n <div class=\"detail-inner\" id=\"detail-${i}\">\r\n <div class=\"detail-block\"><div class=\"k\">Responsable (MOF)<\/div><div class=\"v\">${row.cargo}<\/div><\/div>\r\n <div class=\"detail-block\"><div class=\"k\">Fuente de financiamiento<\/div><div class=\"v\">${row.fuente}<\/div><\/div>\r\n <div class=\"detail-block\"><div class=\"k\">\u00daltima actualizaci\u00f3n<\/div><div class=\"v\">${row.updated}<\/div><\/div>\r\n <div class=\"detail-block\"><div class=\"k\">Saldo disponible<\/div><div class=\"v mono\">${fmt(row.assigned - row.executed)}<\/div><\/div>\r\n <\/div>\r\n <\/td>\r\n `;\r\n tr.addEventListener(\"click\", () => {\r\n document.getElementById(`detail-${i}`).classList.toggle(\"open\");\r\n });\r\n tbody.appendChild(tr);\r\n tbody.appendChild(detailTr);\r\n });\r\n}\r\n\r\nlet activeFilter = \"todos\";\r\nfunction applyTableFilters(){\r\n const q = document.getElementById(\"tableSearch\").value.trim().toLowerCase();\r\n const filtered = data.filter(row => {\r\n const matchesFilter = activeFilter === \"todos\" || row.status === activeFilter;\r\n const haystack = (row.specCode + \" \" + row.specName + \" \" + row.unit + \" \" + row.funcion).toLowerCase();\r\n return matchesFilter && haystack.includes(q);\r\n });\r\n render(filtered);\r\n}\r\n\r\ndocument.getElementById(\"tableSearch\").addEventListener(\"input\", applyTableFilters);\r\ndocument.querySelectorAll(\".filter-chip\").forEach(chip => {\r\n chip.addEventListener(\"click\", () => {\r\n document.querySelectorAll(\".filter-chip\").forEach(c => c.classList.remove(\"active\"));\r\n chip.classList.add(\"active\");\r\n activeFilter = chip.dataset.filter;\r\n applyTableFilters();\r\n });\r\n});\r\n\r\nconst queryInput = document.getElementById(\"queryInput\");\r\nconst queryResult = document.getElementById(\"queryResult\");\r\n\r\nqueryInput.addEventListener(\"input\", () => {\r\n const q = queryInput.value.trim().toLowerCase();\r\n if(q.length < 3){ queryResult.classList.remove(\"show\"); return; }\r\n\r\n const matches = data.filter(row => row.specName.toLowerCase().includes(q));\r\n if(matches.length === 0){\r\n queryResult.classList.add(\"show\");\r\n queryResult.innerHTML = `<div class=\"no-match\">Sin resultados para \"${queryInput.value}\". Intenta con otro t\u00e9rmino, como \"mantenimiento\", \"limpieza\" o \"alimentaci\u00f3n\".<\/div>`;\r\n return;\r\n }\r\n\r\n const totalAssigned = matches.reduce((s,r) => s + r.assigned, 0);\r\n const totalExecuted = matches.reduce((s,r) => s + r.executed, 0);\r\n const totalBalance = totalAssigned - totalExecuted;\r\n const totalPct = Math.round((totalExecuted\/totalAssigned)*100);\r\n const unitsList = [...new Set(matches.map(r => r.unit))];\r\n\r\n queryResult.classList.add(\"show\");\r\n queryResult.innerHTML = `\r\n <div class=\"query-result-title\">${matches[0].specName}<\/div>\r\n <div class=\"query-result-code\">Espec\u00edfica MEF ${matches[0].specCode} \u2014 agregado de ${matches.length} unidad(es) ejecutora(s)<\/div>\r\n <div class=\"query-cards\">\r\n <div class=\"query-card\"><div class=\"k\">PIM total<\/div><div class=\"v\">${fmt(totalAssigned)}<\/div><\/div>\r\n <div class=\"query-card\"><div class=\"k\">Ejecutado<\/div><div class=\"v gold\">${fmt(totalExecuted)}<\/div><\/div>\r\n <div class=\"query-card\"><div class=\"k\">Saldo disponible<\/div><div class=\"v\">${fmt(totalBalance)}<\/div><\/div>\r\n <div class=\"query-card\"><div class=\"k\">% de avance<\/div><div class=\"v gold\">${totalPct}%<\/div><\/div>\r\n <\/div>\r\n <div class=\"query-units\"><b>Gerencias involucradas:<\/b> ${unitsList.join(\", \")}<\/div>\r\n `;\r\n});\r\n\r\nrender(data);\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>N\u00facleo \u2014 Gesti\u00f3n Presupuestal N\u00facleo Gesti\u00f3n Digital 01 Tablero General 02 Atenci\u00f3n Ciudadana 03 Asistente Interno (IA) 04 Gesti\u00f3n por Resultados 05 Planeamiento y Presupuesto 06 Auditor\u00eda y Control 07 Informes y Rendici\u00f3n 08 Configuraci\u00f3n 09 Ayuda y Soporte Municipalidad Distrital de EjemploSesi\u00f3n de demostraci\u00f3n Planeamiento y Presupuesto Gesti\u00f3n Presupuestal Estructurado sobre el Clasificador Presupuestario […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":638,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-857","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/miespaciodigital.net\/auditoria\/wp-json\/wp\/v2\/pages\/857","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/miespaciodigital.net\/auditoria\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/miespaciodigital.net\/auditoria\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/miespaciodigital.net\/auditoria\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/miespaciodigital.net\/auditoria\/wp-json\/wp\/v2\/comments?post=857"}],"version-history":[{"count":5,"href":"https:\/\/miespaciodigital.net\/auditoria\/wp-json\/wp\/v2\/pages\/857\/revisions"}],"predecessor-version":[{"id":872,"href":"https:\/\/miespaciodigital.net\/auditoria\/wp-json\/wp\/v2\/pages\/857\/revisions\/872"}],"up":[{"embeddable":true,"href":"https:\/\/miespaciodigital.net\/auditoria\/wp-json\/wp\/v2\/pages\/638"}],"wp:attachment":[{"href":"https:\/\/miespaciodigital.net\/auditoria\/wp-json\/wp\/v2\/media?parent=857"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}