N\u00facleo \u2014 Estructura Org\u00e1nica (ROF)<\/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 .nav-sub{margin-left:26px; display:flex; flex-direction:column; gap:1px;}\r\n .nav-sub .nav-item{font-size:0.8rem; padding:7px 12px; color:#9FB2BC;}\r\n .nav-sub .nav-item.active{color:#fff;}\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:1260px;}\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 .base-legal-strip{\r\n display:flex; align-items:center; gap:10px; background:var(--paper-raised); border:1px solid var(--line);\r\n border-radius:10px; padding:10px 16px; font-size:0.8rem; color:var(--ink-soft); margin-bottom:24px;\r\n }\r\n .base-legal-strip b{color:var(--navy); font-weight:600;}\r\n .base-legal-strip .tag{\r\n font-family:'IBM Plex Mono',monospace; font-size:0.7rem; background:var(--gold-soft); color:var(--navy);\r\n padding:2px 8px; border-radius:999px; margin-left:auto;\r\n }\r\n\r\n .layout{display:grid; grid-template-columns:340px 1fr; gap:20px; align-items:start; margin-bottom:24px;}\r\n\r\n \/* ORG TREE *\/\r\n .panel{background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);}\r\n .tree-panel{padding:18px;}\r\n .tree-panel h3{font-family:'Fraunces', serif; font-size:0.98rem; margin:0 0 12px; color:var(--navy); font-weight:600; padding:0 4px;}\r\n .tree-root > .tree-node{margin-bottom:2px;}\r\n .tree-node{}\r\n .tree-row{\r\n display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; cursor:pointer;\r\n font-size:0.84rem; transition:background 0.12s ease;\r\n }\r\n .tree-row:hover{background:#FAF8F2;}\r\n .tree-row.selected{background:var(--gold-soft); font-weight:600;}\r\n .tree-toggle{width:14px; color:var(--ink-soft); font-size:0.7rem; flex-shrink:0;}\r\n .tree-children{margin-left:22px; border-left:1px dashed var(--line); padding-left:10px;}\r\n .tree-badge{\r\n margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:0.66rem; color:var(--ink-soft);\r\n background:#F0EEE6; padding:1px 6px; border-radius:999px;\r\n }\r\n\r\n \/* DETAIL *\/\r\n .detail-panel{padding:24px;}\r\n .detail-header{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:18px; flex-wrap:wrap;}\r\n .detail-title{font-family:'Fraunces', serif; font-size:1.3rem; font-weight:600; color:var(--navy);}\r\n .detail-cargo{font-size:0.84rem; color:var(--ink-soft); margin-top:4px;}\r\n .btn{\r\n font-family:'IBM Plex Sans', sans-serif; font-size:0.82rem; font-weight:600; padding:10px 16px;\r\n border-radius:9px; border:1px solid var(--navy); background:var(--navy); color:#fff; cursor:pointer;\r\n transition:opacity 0.15s ease; white-space:nowrap;\r\n }\r\n .btn:hover{opacity:0.88;}\r\n .btn.secondary{background:transparent; color:var(--navy);}\r\n .btn.gold{background:var(--gold); border-color:var(--gold);}\r\n\r\n .meta-row{display:flex; gap:28px; margin-bottom:18px; flex-wrap:wrap;}\r\n .meta-block .k{font-size:0.68rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft); margin-bottom:4px;}\r\n .meta-block .v{font-size:0.86rem; font-weight:500;}\r\n .meta-block .v.mono{font-family:'IBM Plex Mono',monospace;}\r\n\r\n .funciones-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}\r\n .funciones-list li{\r\n display:flex; gap:10px; align-items:flex-start; font-size:0.85rem; padding:10px 12px;\r\n background:#FAF9F5; border-radius:8px; border:1px solid var(--line);\r\n }\r\n .funciones-list li .n{font-family:'IBM Plex Mono',monospace; font-size:0.72rem; color:var(--gold); flex-shrink:0;}\r\n\r\n \/* PROPOSAL FORM *\/\r\n .form-panel{padding:24px; margin-bottom:24px; display:none;}\r\n .form-panel.open{display:block;}\r\n .form-panel h3{font-family:'Fraunces', serif; font-size:1.1rem; color:var(--navy); margin:0 0 4px;}\r\n .form-panel .form-sub{font-size:0.82rem; color:var(--ink-soft); margin-bottom:18px;}\r\n .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}\r\n .form-field{display:flex; flex-direction:column; gap:6px;}\r\n .form-field.full{grid-column:1 \/ -1;}\r\n .form-field label{font-size:0.74rem; font-weight:600; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.03em;}\r\n .form-field select, .form-field input, .form-field textarea{\r\n border:1px solid var(--line); border-radius:8px; padding:10px 12px; font-family:'IBM Plex Sans', sans-serif;\r\n font-size:0.86rem; color:var(--ink); background:var(--paper-raised);\r\n }\r\n .form-field textarea{resize:vertical; min-height:80px;}\r\n .form-actions{display:flex; gap:10px; justify-content:flex-end;}\r\n\r\n \/* GENERATED DOCUMENT *\/\r\n .doc-panel{padding:0; margin-bottom:24px; display:none; overflow:hidden;}\r\n .doc-panel.open{display:block;}\r\n .doc-header{background:var(--navy); color:#fff; padding:16px 24px; display:flex; justify-content:space-between; align-items:center;}\r\n .doc-header .t{font-family:'Fraunces', serif; font-weight:600; font-size:1rem;}\r\n .doc-header .status-pill{background:var(--gold); color:var(--navy); font-size:0.7rem; font-weight:700; padding:4px 10px; border-radius:999px;}\r\n .doc-body{padding:26px 30px; font-family:'IBM Plex Mono', monospace; font-size:0.82rem; line-height:1.9; color:var(--ink);}\r\n .doc-body .doc-line b{color:var(--navy);}\r\n .doc-body .doc-divider{border:none; border-top:1px dashed var(--line); margin:16px 0;}\r\n .doc-footer{padding:16px 24px; background:#FAF9F5; border-top:1px solid var(--line); font-size:0.78rem; color:var(--ink-soft);}\r\n\r\n \/* HISTORY *\/\r\n .history-panel{padding:0; overflow:hidden;}\r\n .history-panel h3{font-family:'Fraunces', serif; font-size:1.05rem; color:var(--navy); margin:0; padding:20px 24px 0;}\r\n table{width:100%; border-collapse:collapse; margin-top:14px;}\r\n thead th{text-align:left; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft); padding:12px 24px; border-bottom:1px solid var(--line); background:#FAF9F5;}\r\n tbody td{padding:13px 24px; font-size:0.83rem; border-bottom:1px solid var(--line);}\r\n tbody tr:last-child td{border-bottom:none;}\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;}\r\n .status-pill.pending{background:var(--amber-bg); color:var(--amber);}\r\n .status-pill.approved{background:var(--green-bg); color:var(--green);}\r\n .hist-code{font-family:'IBM Plex Mono',monospace; font-size:0.76rem; color:var(--gold);}\r\n\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 .layout{grid-template-columns:1fr;}\r\n .form-grid{grid-template-columns:1fr;}\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\"><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 active\"><span class=\"num\">08<\/span> Configuraci\u00f3n<\/a>\r\n <div class=\"nav-sub\">\r\n <a class=\"nav-item active\">Estructura Org\u00e1nica (ROF)<\/a>\r\n <a class=\"nav-item\">Usuarios y Accesos<\/a>\r\n <a class=\"nav-item\">Par\u00e1metros del Sistema<\/a>\r\n <\/div>\r\n <a class=\"nav-item\"><span class=\"num\">09<\/span> Ayuda y Soporte<\/a>\r\n <\/nav>\r\n <div class=\"sidebar-footer\">Organismo de Gobierno 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\">Configuraci\u00f3n \u2014 Estructura Org\u00e1nica<\/div>\r\n <h1>Reglamento de Organizaci\u00f3n y Funciones<\/h1>\r\n <div class=\"subtitle\">Consulta la estructura vigente y genera propuestas de modificaci\u00f3n al ROF<\/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 institucional<\/div><div class=\"role\">Gerente General<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"base-legal-strip\">\r\n Estructura vigente aprobada por <b>Norma Institucional N.\u00ba 018-2024-OGE<\/b> \u00b7 \u00daltima modificaci\u00f3n: 12 mar 2025\r\n <span class=\"tag\">VIGENTE<\/span>\r\n <\/div>\r\n\r\n <div class=\"layout\">\r\n <div class=\"panel tree-panel\">\r\n <h3>Organigrama institucional<\/h3>\r\n <div class=\"tree-root\" id=\"treeRoot\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"panel detail-panel\" id=\"detailPanel\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"panel form-panel\" id=\"formPanel\">\r\n <h3>Proponer modificaci\u00f3n al ROF<\/h3>\r\n <div class=\"form-sub\">Esta propuesta no modifica la estructura vigente directamente \u2014 genera el proyecto de documento que debe pasar por informe legal y aprobaci\u00f3n del Concejo Institucional.<\/div>\r\n <div class=\"form-grid\">\r\n <div class=\"form-field\">\r\n <label>Tipo de modificaci\u00f3n<\/label>\r\n <select id=\"tipoModificacion\">\r\n <option value=\"crear\">Crear nueva unidad org\u00e1nica<\/option>\r\n <option value=\"funcion\">A\u00f1adir o modificar funci\u00f3n<\/option>\r\n <option value=\"fusionar\">Fusionar unidades org\u00e1nicas<\/option>\r\n <option value=\"eliminar\">Eliminar unidad org\u00e1nica<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-field\">\r\n <label>Unidad org\u00e1nica afectada<\/label>\r\n <input type=\"text\" id=\"unidadAfectada\" placeholder=\"Ej: Gerencia de Servicios P\u00fablicos\">\r\n <\/div>\r\n <div class=\"form-field full\">\r\n <label>Justificaci\u00f3n t\u00e9cnica<\/label>\r\n <textarea id=\"justificacion\" placeholder=\"Explica por qu\u00e9 se necesita este cambio (carga operativa, duplicidad de funciones, nueva competencia asignada, etc.)\"><\/textarea>\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-actions\">\r\n <button class=\"btn secondary\" onclick=\"closeForm()\">Cancelar<\/button>\r\n <button class=\"btn gold\" onclick=\"generarPropuesta()\">Generar proyecto de modificaci\u00f3n<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"panel doc-panel\" id=\"docPanel\"><\/div>\r\n\r\n <div class=\"panel history-panel\">\r\n <h3>Historial de modificaciones<\/h3>\r\n <table>\r\n <thead>\r\n <tr><th>Fecha<\/th><th>Tipo<\/th><th>Unidad afectada<\/th><th>Base legal<\/th><th>Estado<\/th><\/tr>\r\n <\/thead>\r\n <tbody id=\"historyBody\"><\/tbody>\r\n <\/table>\r\n <\/div>\r\n\r\n <div class=\"demo-note\">\r\n Prototipo de demostraci\u00f3n \u2014 la estructura org\u00e1nica y el historial son datos de ejemplo. El documento generado es un proyecto de referencia; toda modificaci\u00f3n real requiere informe legal y aprobaci\u00f3n del Concejo Institucional.\r\n <\/div>\r\n <\/main>\r\n<\/div>\r\n\r\n<script>\r\nconst orgData = {\r\n name: \"Gerencia General\", cargo: \"Gerente General\", base: \"RN 018-2024-OGE\",\r\n funciones: [\r\n \"Dirigir y supervisar la gesti\u00f3n administrativa y operativa de el organismo de gobierno.\",\r\n \"Coordinar la ejecuci\u00f3n de los planes, programas y proyectos institucionales.\",\r\n \"Representar a la entidad ante otras instituciones p\u00fablicas y privadas, por delegaci\u00f3n de la Alcald\u00eda.\"\r\n ],\r\n children: [\r\n {\r\n name: \"Gerencia de Administraci\u00f3n y Finanzas\", cargo: \"Gerente de Administraci\u00f3n y Finanzas\", base: \"RN 018-2024-OGE\",\r\n funciones: [\r\n \"Administrar los recursos econ\u00f3micos y financieros de la instituci\u00f3n.\",\r\n \"Supervisar los procesos de contabilidad, tesorer\u00eda y log\u00edstica.\"\r\n ],\r\n children: [\r\n { name: \"Sub Gerencia de Recursos Humanos\", cargo: \"Sub Gerente de RR.HH.\", base: \"RN 018-2024-OGE\", funciones: [\"Gestionar los procesos de contrataci\u00f3n, planillas y bienestar del personal.\", \"Administrar el legajo del personal y el control de asistencia.\"], children: [] },\r\n { name: \"Sub Gerencia de Contabilidad\", cargo: \"Sub Gerente de Contabilidad\", base: \"RN 018-2024-OGE\", funciones: [\"Elaborar los estados financieros de la entidad.\", \"Supervisar el registro contable de las operaciones institucionales.\"], children: [] }\r\n ]\r\n },\r\n {\r\n name: \"Gerencia de Infraestructura y Desarrollo Urbano\", cargo: \"Gerente de Infraestructura\", base: \"RN 018-2024-OGE\",\r\n funciones: [\r\n \"Planificar y ejecutar obras p\u00fablicas de infraestructura vial y urbana.\",\r\n \"Supervisar el cumplimiento del plan de desarrollo urbano.\"\r\n ],\r\n children: [\r\n { name: \"Sub Gerencia de Obras P\u00fablicas\", cargo: \"Sub Gerente de Obras\", base: \"RN 018-2024-OGE\", funciones: [\"Ejecutar y supervisar los proyectos de inversi\u00f3n p\u00fablica en infraestructura.\"], children: [] },\r\n { name: \"Sub Gerencia de Catastro\", cargo: \"Sub Gerente de Catastro\", base: \"RN 018-2024-OGE\", funciones: [\"Mantener actualizado el registro catastral del distrito.\"], children: [] }\r\n ]\r\n },\r\n {\r\n name: \"Gerencia de Servicios P\u00fablicos\", cargo: \"Gerente de Servicios P\u00fablicos\", base: \"RN 018-2024-OGE\",\r\n funciones: [\"Administrar los servicios de limpieza p\u00fablica, parques y jardines.\", \"Gestionar el mantenimiento de la flota vehicular institucional.\"],\r\n children: []\r\n },\r\n {\r\n name: \"Gerencia de Desarrollo Social\", cargo: \"Gerente de Desarrollo Social\", base: \"RN 018-2024-OGE\",\r\n funciones: [\"Ejecutar los programas sociales y de complementaci\u00f3n alimentaria.\", \"Coordinar con instituciones educativas y de salud del distrito.\"],\r\n children: []\r\n },\r\n {\r\n name: \"Gerencia de Seguridad Ciudadana\", cargo: \"Gerente de Seguridad Ciudadana\", base: \"RN 018-2024-OGE\",\r\n funciones: [\"Dirigir el servicio de serenazgo institucional.\", \"Coordinar con la Polic\u00eda Nacional acciones de prevenci\u00f3n.\"],\r\n children: []\r\n },\r\n {\r\n name: \"Gerencia de Planeamiento y Presupuesto\", cargo: \"Gerente de Planeamiento y Presupuesto\", base: \"RN 018-2024-OGE\",\r\n funciones: [\"Formular y evaluar el Plan Operativo Institucional y el presupuesto anual.\", \"Monitorear el cumplimiento de metas institucionales.\"],\r\n children: []\r\n },\r\n {\r\n name: \"Gerencia de Tecnolog\u00edas de la Informaci\u00f3n\", cargo: \"Gerente de TI\", base: \"RN 018-2024-OGE\",\r\n funciones: [\"Administrar los sistemas de informaci\u00f3n institucionales.\", \"Supervisar los procesos de modernizaci\u00f3n digital de la entidad.\"],\r\n children: []\r\n }\r\n ]\r\n};\r\n\r\nlet selectedNode = orgData;\r\n\r\nfunction countFunciones(node){\r\n let c = node.funciones.length;\r\n node.children.forEach(ch => c += countFunciones(ch));\r\n return c;\r\n}\r\n\r\nfunction renderTree(node, container, isRoot){\r\n const wrap = document.createElement(\"div\");\r\n wrap.className = \"tree-node\";\r\n\r\n const row = document.createElement(\"div\");\r\n row.className = \"tree-row\";\r\n if(node === selectedNode) row.classList.add(\"selected\");\r\n\r\n const hasChildren = node.children && node.children.length > 0;\r\n row.innerHTML = `\r\n <span class=\"tree-toggle\">${hasChildren ? \"\u25be\" : \"\u00b7\"}<\/span>\r\n <span>${node.name}<\/span>\r\n <span class=\"tree-badge\">${node.funciones.length} func.<\/span>\r\n `;\r\n row.addEventListener(\"click\", (e) => {\r\n e.stopPropagation();\r\n selectedNode = node;\r\n renderAll();\r\n });\r\n wrap.appendChild(row);\r\n\r\n if(hasChildren){\r\n const childrenWrap = document.createElement(\"div\");\r\n childrenWrap.className = \"tree-children\";\r\n node.children.forEach(ch => renderTree(ch, childrenWrap, false));\r\n wrap.appendChild(childrenWrap);\r\n }\r\n\r\n container.appendChild(wrap);\r\n}\r\n\r\nfunction renderDetail(){\r\n const panel = document.getElementById(\"detailPanel\");\r\n panel.innerHTML = `\r\n <div class=\"detail-header\">\r\n <div>\r\n <div class=\"detail-title\">${selectedNode.name}<\/div>\r\n <div class=\"detail-cargo\">${selectedNode.cargo}<\/div>\r\n <\/div>\r\n <button class=\"btn gold\" onclick=\"openForm()\">+ Proponer modificaci\u00f3n<\/button>\r\n <\/div>\r\n <div class=\"meta-row\">\r\n <div class=\"meta-block\"><div class=\"k\">Base legal<\/div><div class=\"v mono\">${selectedNode.base}<\/div><\/div>\r\n <div class=\"meta-block\"><div class=\"k\">Unidades subordinadas<\/div><div class=\"v\">${selectedNode.children.length}<\/div><\/div>\r\n <div class=\"meta-block\"><div class=\"k\">Funciones asignadas (MOF)<\/div><div class=\"v\">${selectedNode.funciones.length}<\/div><\/div>\r\n <\/div>\r\n <ul class=\"funciones-list\">\r\n ${selectedNode.funciones.map((f,i) => `<li><span class=\"n\">${String(i+1).padStart(2,'0')}<\/span><span>${f}<\/span><\/li>`).join(\"\")}\r\n <\/ul>\r\n `;\r\n}\r\n\r\nfunction renderAll(){\r\n const treeRoot = document.getElementById(\"treeRoot\");\r\n treeRoot.innerHTML = \"\";\r\n renderTree(orgData, treeRoot, true);\r\n renderDetail();\r\n}\r\n\r\nfunction openForm(){\r\n document.getElementById(\"unidadAfectada\").value = selectedNode.name;\r\n document.getElementById(\"formPanel\").classList.add(\"open\");\r\n document.getElementById(\"docPanel\").classList.remove(\"open\");\r\n document.getElementById(\"formPanel\").scrollIntoView({behavior:\"smooth\", block:\"center\"});\r\n}\r\nfunction closeForm(){\r\n document.getElementById(\"formPanel\").classList.remove(\"open\");\r\n}\r\n\r\nlet historyData = [\r\n {fecha:\"12 mar 2025\", tipo:\"Modificaci\u00f3n de funci\u00f3n\", unidad:\"Gerencia de Tecnolog\u00edas de la Informaci\u00f3n\", base:\"RN 018-2024-OGE\", estado:\"approved\"},\r\n {fecha:\"03 nov 2024\", tipo:\"Creaci\u00f3n de unidad\", unidad:\"Sub Gerencia de Catastro\", base:\"RN 014-2024-OGE\", estado:\"approved\"}\r\n];\r\n\r\nfunction renderHistory(){\r\n const body = document.getElementById(\"historyBody\");\r\n body.innerHTML = historyData.map(h => `\r\n <tr>\r\n <td>${h.fecha}<\/td>\r\n <td>${h.tipo}<\/td>\r\n <td>${h.unidad}<\/td>\r\n <td class=\"hist-code\">${h.base}<\/td>\r\n <td><span class=\"status-pill ${h.estado}\">${h.estado === \"approved\" ? \"Aprobado\" : \"Pendiente de aprobaci\u00f3n\"}<\/span><\/td>\r\n <\/tr>\r\n `).join(\"\");\r\n}\r\n\r\nconst tipoLabels = {\r\n crear: \"Creaci\u00f3n de nueva unidad org\u00e1nica\",\r\n funcion: \"Modificaci\u00f3n de funci\u00f3n\",\r\n fusionar: \"Fusi\u00f3n de unidades org\u00e1nicas\",\r\n eliminar: \"Eliminaci\u00f3n de unidad org\u00e1nica\"\r\n};\r\n\r\nfunction generarPropuesta(){\r\n const tipo = document.getElementById(\"tipoModificacion\").value;\r\n const unidad = document.getElementById(\"unidadAfectada\").value.trim() || selectedNode.name;\r\n const justificacion = document.getElementById(\"justificacion\").value.trim() || \"Pendiente de justificaci\u00f3n t\u00e9cnica detallada.\";\r\n const today = new Date();\r\n const fechaStr = today.toLocaleDateString(\"es-PE\", {day:\"2-digit\", month:\"long\", year:\"numeric\"});\r\n const draftCode = \"PROY-ROF-\" + String(historyData.length + 19).padStart(3,'0') + \"-2026\";\r\n\r\n const docPanel = document.getElementById(\"docPanel\");\r\n docPanel.innerHTML = `\r\n <div class=\"doc-header\">\r\n <div class=\"t\">Proyecto de Modificaci\u00f3n al ROF<\/div>\r\n <div class=\"status-pill\">Pendiente de informe legal<\/div>\r\n <\/div>\r\n <div class=\"doc-body\">\r\n <div class=\"doc-line\"><b>C\u00f3digo de proyecto:<\/b> ${draftCode}<\/div>\r\n <div class=\"doc-line\"><b>Fecha de generaci\u00f3n:<\/b> ${fechaStr}<\/div>\r\n <div class=\"doc-line\"><b>Tipo de modificaci\u00f3n:<\/b> ${tipoLabels[tipo]}<\/div>\r\n <div class=\"doc-line\"><b>Unidad org\u00e1nica afectada:<\/b> ${unidad}<\/div>\r\n <hr class=\"doc-divider\">\r\n <div class=\"doc-line\"><b>Justificaci\u00f3n t\u00e9cnica:<\/b><\/div>\r\n <div class=\"doc-line\">${justificacion}<\/div>\r\n <hr class=\"doc-divider\">\r\n <div class=\"doc-line\"><b>Siguiente paso en el proceso:<\/b><\/div>\r\n <div class=\"doc-line\">1. Revisi\u00f3n t\u00e9cnica por Planeamiento y Presupuesto<\/div>\r\n <div class=\"doc-line\">2. Informe legal de la Gerencia de Asesor\u00eda Jur\u00eddica<\/div>\r\n <div class=\"doc-line\">3. Dictamen y aprobaci\u00f3n por el Concejo Institucional<\/div>\r\n <div class=\"doc-line\">4. Publicaci\u00f3n de la Norma Institucional correspondiente<\/div>\r\n <\/div>\r\n <div class=\"doc-footer\">\r\n Este documento es un proyecto generado autom\u00e1ticamente a partir de la propuesta registrada. No tiene validez legal hasta ser aprobado por el Concejo Institucional y publicado como Ordenanza.\r\n <\/div>\r\n `;\r\n docPanel.classList.add(\"open\");\r\n closeForm();\r\n document.getElementById(\"justificacion\").value = \"\";\r\n\r\n historyData.unshift({\r\n fecha: fechaStr, tipo: tipoLabels[tipo], unidad: unidad, base: draftCode + \" (proyecto)\", estado: \"pending\"\r\n });\r\n renderHistory();\r\n\r\n docPanel.scrollIntoView({behavior:\"smooth\", block:\"center\"});\r\n}\r\n\r\nrenderAll();\r\nrenderHistory();\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 Estructura Org\u00e1nica (ROF) 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 Estructura Org\u00e1nica (ROF) Usuarios y Accesos Par\u00e1metros del Sistema 09 Ayuda y Soporte Organismo de Gobierno de EjemploSesi\u00f3n de […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":638,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-1035","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/miespaciodigital.net\/auditoria\/wp-json\/wp\/v2\/pages\/1035","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=1035"}],"version-history":[{"count":4,"href":"https:\/\/miespaciodigital.net\/auditoria\/wp-json\/wp\/v2\/pages\/1035\/revisions"}],"predecessor-version":[{"id":1040,"href":"https:\/\/miespaciodigital.net\/auditoria\/wp-json\/wp\/v2\/pages\/1035\/revisions\/1040"}],"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=1035"}],"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 Estructura Org\u00e1nica (ROF)<\/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 .nav-sub{margin-left:26px; display:flex; flex-direction:column; gap:1px;}\r\n .nav-sub .nav-item{font-size:0.8rem; padding:7px 12px; color:#9FB2BC;}\r\n .nav-sub .nav-item.active{color:#fff;}\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:1260px;}\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 .base-legal-strip{\r\n display:flex; align-items:center; gap:10px; background:var(--paper-raised); border:1px solid var(--line);\r\n border-radius:10px; padding:10px 16px; font-size:0.8rem; color:var(--ink-soft); margin-bottom:24px;\r\n }\r\n .base-legal-strip b{color:var(--navy); font-weight:600;}\r\n .base-legal-strip .tag{\r\n font-family:'IBM Plex Mono',monospace; font-size:0.7rem; background:var(--gold-soft); color:var(--navy);\r\n padding:2px 8px; border-radius:999px; margin-left:auto;\r\n }\r\n\r\n .layout{display:grid; grid-template-columns:340px 1fr; gap:20px; align-items:start; margin-bottom:24px;}\r\n\r\n \/* ORG TREE *\/\r\n .panel{background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);}\r\n .tree-panel{padding:18px;}\r\n .tree-panel h3{font-family:'Fraunces', serif; font-size:0.98rem; margin:0 0 12px; color:var(--navy); font-weight:600; padding:0 4px;}\r\n .tree-root > .tree-node{margin-bottom:2px;}\r\n .tree-node{}\r\n .tree-row{\r\n display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; cursor:pointer;\r\n font-size:0.84rem; transition:background 0.12s ease;\r\n }\r\n .tree-row:hover{background:#FAF8F2;}\r\n .tree-row.selected{background:var(--gold-soft); font-weight:600;}\r\n .tree-toggle{width:14px; color:var(--ink-soft); font-size:0.7rem; flex-shrink:0;}\r\n .tree-children{margin-left:22px; border-left:1px dashed var(--line); padding-left:10px;}\r\n .tree-badge{\r\n margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:0.66rem; color:var(--ink-soft);\r\n background:#F0EEE6; padding:1px 6px; border-radius:999px;\r\n }\r\n\r\n \/* DETAIL *\/\r\n .detail-panel{padding:24px;}\r\n .detail-header{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:18px; flex-wrap:wrap;}\r\n .detail-title{font-family:'Fraunces', serif; font-size:1.3rem; font-weight:600; color:var(--navy);}\r\n .detail-cargo{font-size:0.84rem; color:var(--ink-soft); margin-top:4px;}\r\n .btn{\r\n font-family:'IBM Plex Sans', sans-serif; font-size:0.82rem; font-weight:600; padding:10px 16px;\r\n border-radius:9px; border:1px solid var(--navy); background:var(--navy); color:#fff; cursor:pointer;\r\n transition:opacity 0.15s ease; white-space:nowrap;\r\n }\r\n .btn:hover{opacity:0.88;}\r\n .btn.secondary{background:transparent; color:var(--navy);}\r\n .btn.gold{background:var(--gold); border-color:var(--gold);}\r\n\r\n .meta-row{display:flex; gap:28px; margin-bottom:18px; flex-wrap:wrap;}\r\n .meta-block .k{font-size:0.68rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft); margin-bottom:4px;}\r\n .meta-block .v{font-size:0.86rem; font-weight:500;}\r\n .meta-block .v.mono{font-family:'IBM Plex Mono',monospace;}\r\n\r\n .funciones-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}\r\n .funciones-list li{\r\n display:flex; gap:10px; align-items:flex-start; font-size:0.85rem; padding:10px 12px;\r\n background:#FAF9F5; border-radius:8px; border:1px solid var(--line);\r\n }\r\n .funciones-list li .n{font-family:'IBM Plex Mono',monospace; font-size:0.72rem; color:var(--gold); flex-shrink:0;}\r\n\r\n \/* PROPOSAL FORM *\/\r\n .form-panel{padding:24px; margin-bottom:24px; display:none;}\r\n .form-panel.open{display:block;}\r\n .form-panel h3{font-family:'Fraunces', serif; font-size:1.1rem; color:var(--navy); margin:0 0 4px;}\r\n .form-panel .form-sub{font-size:0.82rem; color:var(--ink-soft); margin-bottom:18px;}\r\n .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}\r\n .form-field{display:flex; flex-direction:column; gap:6px;}\r\n .form-field.full{grid-column:1 \/ -1;}\r\n .form-field label{font-size:0.74rem; font-weight:600; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.03em;}\r\n .form-field select, .form-field input, .form-field textarea{\r\n border:1px solid var(--line); border-radius:8px; padding:10px 12px; font-family:'IBM Plex Sans', sans-serif;\r\n font-size:0.86rem; color:var(--ink); background:var(--paper-raised);\r\n }\r\n .form-field textarea{resize:vertical; min-height:80px;}\r\n .form-actions{display:flex; gap:10px; justify-content:flex-end;}\r\n\r\n \/* GENERATED DOCUMENT *\/\r\n .doc-panel{padding:0; margin-bottom:24px; display:none; overflow:hidden;}\r\n .doc-panel.open{display:block;}\r\n .doc-header{background:var(--navy); color:#fff; padding:16px 24px; display:flex; justify-content:space-between; align-items:center;}\r\n .doc-header .t{font-family:'Fraunces', serif; font-weight:600; font-size:1rem;}\r\n .doc-header .status-pill{background:var(--gold); color:var(--navy); font-size:0.7rem; font-weight:700; padding:4px 10px; border-radius:999px;}\r\n .doc-body{padding:26px 30px; font-family:'IBM Plex Mono', monospace; font-size:0.82rem; line-height:1.9; color:var(--ink);}\r\n .doc-body .doc-line b{color:var(--navy);}\r\n .doc-body .doc-divider{border:none; border-top:1px dashed var(--line); margin:16px 0;}\r\n .doc-footer{padding:16px 24px; background:#FAF9F5; border-top:1px solid var(--line); font-size:0.78rem; color:var(--ink-soft);}\r\n\r\n \/* HISTORY *\/\r\n .history-panel{padding:0; overflow:hidden;}\r\n .history-panel h3{font-family:'Fraunces', serif; font-size:1.05rem; color:var(--navy); margin:0; padding:20px 24px 0;}\r\n table{width:100%; border-collapse:collapse; margin-top:14px;}\r\n thead th{text-align:left; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft); padding:12px 24px; border-bottom:1px solid var(--line); background:#FAF9F5;}\r\n tbody td{padding:13px 24px; font-size:0.83rem; border-bottom:1px solid var(--line);}\r\n tbody tr:last-child td{border-bottom:none;}\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;}\r\n .status-pill.pending{background:var(--amber-bg); color:var(--amber);}\r\n .status-pill.approved{background:var(--green-bg); color:var(--green);}\r\n .hist-code{font-family:'IBM Plex Mono',monospace; font-size:0.76rem; color:var(--gold);}\r\n\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 .layout{grid-template-columns:1fr;}\r\n .form-grid{grid-template-columns:1fr;}\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\"><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 active\"><span class=\"num\">08<\/span> Configuraci\u00f3n<\/a>\r\n <div class=\"nav-sub\">\r\n <a class=\"nav-item active\">Estructura Org\u00e1nica (ROF)<\/a>\r\n <a class=\"nav-item\">Usuarios y Accesos<\/a>\r\n <a class=\"nav-item\">Par\u00e1metros del Sistema<\/a>\r\n <\/div>\r\n <a class=\"nav-item\"><span class=\"num\">09<\/span> Ayuda y Soporte<\/a>\r\n <\/nav>\r\n <div class=\"sidebar-footer\">Organismo de Gobierno 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\">Configuraci\u00f3n \u2014 Estructura Org\u00e1nica<\/div>\r\n <h1>Reglamento de Organizaci\u00f3n y Funciones<\/h1>\r\n <div class=\"subtitle\">Consulta la estructura vigente y genera propuestas de modificaci\u00f3n al ROF<\/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 institucional<\/div><div class=\"role\">Gerente General<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"base-legal-strip\">\r\n Estructura vigente aprobada por <b>Norma Institucional N.\u00ba 018-2024-OGE<\/b> \u00b7 \u00daltima modificaci\u00f3n: 12 mar 2025\r\n <span class=\"tag\">VIGENTE<\/span>\r\n <\/div>\r\n\r\n <div class=\"layout\">\r\n <div class=\"panel tree-panel\">\r\n <h3>Organigrama institucional<\/h3>\r\n <div class=\"tree-root\" id=\"treeRoot\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"panel detail-panel\" id=\"detailPanel\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"panel form-panel\" id=\"formPanel\">\r\n <h3>Proponer modificaci\u00f3n al ROF<\/h3>\r\n <div class=\"form-sub\">Esta propuesta no modifica la estructura vigente directamente \u2014 genera el proyecto de documento que debe pasar por informe legal y aprobaci\u00f3n del Concejo Institucional.<\/div>\r\n <div class=\"form-grid\">\r\n <div class=\"form-field\">\r\n <label>Tipo de modificaci\u00f3n<\/label>\r\n <select id=\"tipoModificacion\">\r\n <option value=\"crear\">Crear nueva unidad org\u00e1nica<\/option>\r\n <option value=\"funcion\">A\u00f1adir o modificar funci\u00f3n<\/option>\r\n <option value=\"fusionar\">Fusionar unidades org\u00e1nicas<\/option>\r\n <option value=\"eliminar\">Eliminar unidad org\u00e1nica<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-field\">\r\n <label>Unidad org\u00e1nica afectada<\/label>\r\n <input type=\"text\" id=\"unidadAfectada\" placeholder=\"Ej: Gerencia de Servicios P\u00fablicos\">\r\n <\/div>\r\n <div class=\"form-field full\">\r\n <label>Justificaci\u00f3n t\u00e9cnica<\/label>\r\n <textarea id=\"justificacion\" placeholder=\"Explica por qu\u00e9 se necesita este cambio (carga operativa, duplicidad de funciones, nueva competencia asignada, etc.)\"><\/textarea>\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-actions\">\r\n <button class=\"btn secondary\" onclick=\"closeForm()\">Cancelar<\/button>\r\n <button class=\"btn gold\" onclick=\"generarPropuesta()\">Generar proyecto de modificaci\u00f3n<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"panel doc-panel\" id=\"docPanel\"><\/div>\r\n\r\n <div class=\"panel history-panel\">\r\n <h3>Historial de modificaciones<\/h3>\r\n <table>\r\n <thead>\r\n <tr><th>Fecha<\/th><th>Tipo<\/th><th>Unidad afectada<\/th><th>Base legal<\/th><th>Estado<\/th><\/tr>\r\n <\/thead>\r\n <tbody id=\"historyBody\"><\/tbody>\r\n <\/table>\r\n <\/div>\r\n\r\n <div class=\"demo-note\">\r\n Prototipo de demostraci\u00f3n \u2014 la estructura org\u00e1nica y el historial son datos de ejemplo. El documento generado es un proyecto de referencia; toda modificaci\u00f3n real requiere informe legal y aprobaci\u00f3n del Concejo Institucional.\r\n <\/div>\r\n <\/main>\r\n<\/div>\r\n\r\n<script>\r\nconst orgData = {\r\n name: \"Gerencia General\", cargo: \"Gerente General\", base: \"RN 018-2024-OGE\",\r\n funciones: [\r\n \"Dirigir y supervisar la gesti\u00f3n administrativa y operativa de el organismo de gobierno.\",\r\n \"Coordinar la ejecuci\u00f3n de los planes, programas y proyectos institucionales.\",\r\n \"Representar a la entidad ante otras instituciones p\u00fablicas y privadas, por delegaci\u00f3n de la Alcald\u00eda.\"\r\n ],\r\n children: [\r\n {\r\n name: \"Gerencia de Administraci\u00f3n y Finanzas\", cargo: \"Gerente de Administraci\u00f3n y Finanzas\", base: \"RN 018-2024-OGE\",\r\n funciones: [\r\n \"Administrar los recursos econ\u00f3micos y financieros de la instituci\u00f3n.\",\r\n \"Supervisar los procesos de contabilidad, tesorer\u00eda y log\u00edstica.\"\r\n ],\r\n children: [\r\n { name: \"Sub Gerencia de Recursos Humanos\", cargo: \"Sub Gerente de RR.HH.\", base: \"RN 018-2024-OGE\", funciones: [\"Gestionar los procesos de contrataci\u00f3n, planillas y bienestar del personal.\", \"Administrar el legajo del personal y el control de asistencia.\"], children: [] },\r\n { name: \"Sub Gerencia de Contabilidad\", cargo: \"Sub Gerente de Contabilidad\", base: \"RN 018-2024-OGE\", funciones: [\"Elaborar los estados financieros de la entidad.\", \"Supervisar el registro contable de las operaciones institucionales.\"], children: [] }\r\n ]\r\n },\r\n {\r\n name: \"Gerencia de Infraestructura y Desarrollo Urbano\", cargo: \"Gerente de Infraestructura\", base: \"RN 018-2024-OGE\",\r\n funciones: [\r\n \"Planificar y ejecutar obras p\u00fablicas de infraestructura vial y urbana.\",\r\n \"Supervisar el cumplimiento del plan de desarrollo urbano.\"\r\n ],\r\n children: [\r\n { name: \"Sub Gerencia de Obras P\u00fablicas\", cargo: \"Sub Gerente de Obras\", base: \"RN 018-2024-OGE\", funciones: [\"Ejecutar y supervisar los proyectos de inversi\u00f3n p\u00fablica en infraestructura.\"], children: [] },\r\n { name: \"Sub Gerencia de Catastro\", cargo: \"Sub Gerente de Catastro\", base: \"RN 018-2024-OGE\", funciones: [\"Mantener actualizado el registro catastral del distrito.\"], children: [] }\r\n ]\r\n },\r\n {\r\n name: \"Gerencia de Servicios P\u00fablicos\", cargo: \"Gerente de Servicios P\u00fablicos\", base: \"RN 018-2024-OGE\",\r\n funciones: [\"Administrar los servicios de limpieza p\u00fablica, parques y jardines.\", \"Gestionar el mantenimiento de la flota vehicular institucional.\"],\r\n children: []\r\n },\r\n {\r\n name: \"Gerencia de Desarrollo Social\", cargo: \"Gerente de Desarrollo Social\", base: \"RN 018-2024-OGE\",\r\n funciones: [\"Ejecutar los programas sociales y de complementaci\u00f3n alimentaria.\", \"Coordinar con instituciones educativas y de salud del distrito.\"],\r\n children: []\r\n },\r\n {\r\n name: \"Gerencia de Seguridad Ciudadana\", cargo: \"Gerente de Seguridad Ciudadana\", base: \"RN 018-2024-OGE\",\r\n funciones: [\"Dirigir el servicio de serenazgo institucional.\", \"Coordinar con la Polic\u00eda Nacional acciones de prevenci\u00f3n.\"],\r\n children: []\r\n },\r\n {\r\n name: \"Gerencia de Planeamiento y Presupuesto\", cargo: \"Gerente de Planeamiento y Presupuesto\", base: \"RN 018-2024-OGE\",\r\n funciones: [\"Formular y evaluar el Plan Operativo Institucional y el presupuesto anual.\", \"Monitorear el cumplimiento de metas institucionales.\"],\r\n children: []\r\n },\r\n {\r\n name: \"Gerencia de Tecnolog\u00edas de la Informaci\u00f3n\", cargo: \"Gerente de TI\", base: \"RN 018-2024-OGE\",\r\n funciones: [\"Administrar los sistemas de informaci\u00f3n institucionales.\", \"Supervisar los procesos de modernizaci\u00f3n digital de la entidad.\"],\r\n children: []\r\n }\r\n ]\r\n};\r\n\r\nlet selectedNode = orgData;\r\n\r\nfunction countFunciones(node){\r\n let c = node.funciones.length;\r\n node.children.forEach(ch => c += countFunciones(ch));\r\n return c;\r\n}\r\n\r\nfunction renderTree(node, container, isRoot){\r\n const wrap = document.createElement(\"div\");\r\n wrap.className = \"tree-node\";\r\n\r\n const row = document.createElement(\"div\");\r\n row.className = \"tree-row\";\r\n if(node === selectedNode) row.classList.add(\"selected\");\r\n\r\n const hasChildren = node.children && node.children.length > 0;\r\n row.innerHTML = `\r\n <span class=\"tree-toggle\">${hasChildren ? \"\u25be\" : \"\u00b7\"}<\/span>\r\n <span>${node.name}<\/span>\r\n <span class=\"tree-badge\">${node.funciones.length} func.<\/span>\r\n `;\r\n row.addEventListener(\"click\", (e) => {\r\n e.stopPropagation();\r\n selectedNode = node;\r\n renderAll();\r\n });\r\n wrap.appendChild(row);\r\n\r\n if(hasChildren){\r\n const childrenWrap = document.createElement(\"div\");\r\n childrenWrap.className = \"tree-children\";\r\n node.children.forEach(ch => renderTree(ch, childrenWrap, false));\r\n wrap.appendChild(childrenWrap);\r\n }\r\n\r\n container.appendChild(wrap);\r\n}\r\n\r\nfunction renderDetail(){\r\n const panel = document.getElementById(\"detailPanel\");\r\n panel.innerHTML = `\r\n <div class=\"detail-header\">\r\n <div>\r\n <div class=\"detail-title\">${selectedNode.name}<\/div>\r\n <div class=\"detail-cargo\">${selectedNode.cargo}<\/div>\r\n <\/div>\r\n <button class=\"btn gold\" onclick=\"openForm()\">+ Proponer modificaci\u00f3n<\/button>\r\n <\/div>\r\n <div class=\"meta-row\">\r\n <div class=\"meta-block\"><div class=\"k\">Base legal<\/div><div class=\"v mono\">${selectedNode.base}<\/div><\/div>\r\n <div class=\"meta-block\"><div class=\"k\">Unidades subordinadas<\/div><div class=\"v\">${selectedNode.children.length}<\/div><\/div>\r\n <div class=\"meta-block\"><div class=\"k\">Funciones asignadas (MOF)<\/div><div class=\"v\">${selectedNode.funciones.length}<\/div><\/div>\r\n <\/div>\r\n <ul class=\"funciones-list\">\r\n ${selectedNode.funciones.map((f,i) => `<li><span class=\"n\">${String(i+1).padStart(2,'0')}<\/span><span>${f}<\/span><\/li>`).join(\"\")}\r\n <\/ul>\r\n `;\r\n}\r\n\r\nfunction renderAll(){\r\n const treeRoot = document.getElementById(\"treeRoot\");\r\n treeRoot.innerHTML = \"\";\r\n renderTree(orgData, treeRoot, true);\r\n renderDetail();\r\n}\r\n\r\nfunction openForm(){\r\n document.getElementById(\"unidadAfectada\").value = selectedNode.name;\r\n document.getElementById(\"formPanel\").classList.add(\"open\");\r\n document.getElementById(\"docPanel\").classList.remove(\"open\");\r\n document.getElementById(\"formPanel\").scrollIntoView({behavior:\"smooth\", block:\"center\"});\r\n}\r\nfunction closeForm(){\r\n document.getElementById(\"formPanel\").classList.remove(\"open\");\r\n}\r\n\r\nlet historyData = [\r\n {fecha:\"12 mar 2025\", tipo:\"Modificaci\u00f3n de funci\u00f3n\", unidad:\"Gerencia de Tecnolog\u00edas de la Informaci\u00f3n\", base:\"RN 018-2024-OGE\", estado:\"approved\"},\r\n {fecha:\"03 nov 2024\", tipo:\"Creaci\u00f3n de unidad\", unidad:\"Sub Gerencia de Catastro\", base:\"RN 014-2024-OGE\", estado:\"approved\"}\r\n];\r\n\r\nfunction renderHistory(){\r\n const body = document.getElementById(\"historyBody\");\r\n body.innerHTML = historyData.map(h => `\r\n <tr>\r\n <td>${h.fecha}<\/td>\r\n <td>${h.tipo}<\/td>\r\n <td>${h.unidad}<\/td>\r\n <td class=\"hist-code\">${h.base}<\/td>\r\n <td><span class=\"status-pill ${h.estado}\">${h.estado === \"approved\" ? \"Aprobado\" : \"Pendiente de aprobaci\u00f3n\"}<\/span><\/td>\r\n <\/tr>\r\n `).join(\"\");\r\n}\r\n\r\nconst tipoLabels = {\r\n crear: \"Creaci\u00f3n de nueva unidad org\u00e1nica\",\r\n funcion: \"Modificaci\u00f3n de funci\u00f3n\",\r\n fusionar: \"Fusi\u00f3n de unidades org\u00e1nicas\",\r\n eliminar: \"Eliminaci\u00f3n de unidad org\u00e1nica\"\r\n};\r\n\r\nfunction generarPropuesta(){\r\n const tipo = document.getElementById(\"tipoModificacion\").value;\r\n const unidad = document.getElementById(\"unidadAfectada\").value.trim() || selectedNode.name;\r\n const justificacion = document.getElementById(\"justificacion\").value.trim() || \"Pendiente de justificaci\u00f3n t\u00e9cnica detallada.\";\r\n const today = new Date();\r\n const fechaStr = today.toLocaleDateString(\"es-PE\", {day:\"2-digit\", month:\"long\", year:\"numeric\"});\r\n const draftCode = \"PROY-ROF-\" + String(historyData.length + 19).padStart(3,'0') + \"-2026\";\r\n\r\n const docPanel = document.getElementById(\"docPanel\");\r\n docPanel.innerHTML = `\r\n <div class=\"doc-header\">\r\n <div class=\"t\">Proyecto de Modificaci\u00f3n al ROF<\/div>\r\n <div class=\"status-pill\">Pendiente de informe legal<\/div>\r\n <\/div>\r\n <div class=\"doc-body\">\r\n <div class=\"doc-line\"><b>C\u00f3digo de proyecto:<\/b> ${draftCode}<\/div>\r\n <div class=\"doc-line\"><b>Fecha de generaci\u00f3n:<\/b> ${fechaStr}<\/div>\r\n <div class=\"doc-line\"><b>Tipo de modificaci\u00f3n:<\/b> ${tipoLabels[tipo]}<\/div>\r\n <div class=\"doc-line\"><b>Unidad org\u00e1nica afectada:<\/b> ${unidad}<\/div>\r\n <hr class=\"doc-divider\">\r\n <div class=\"doc-line\"><b>Justificaci\u00f3n t\u00e9cnica:<\/b><\/div>\r\n <div class=\"doc-line\">${justificacion}<\/div>\r\n <hr class=\"doc-divider\">\r\n <div class=\"doc-line\"><b>Siguiente paso en el proceso:<\/b><\/div>\r\n <div class=\"doc-line\">1. Revisi\u00f3n t\u00e9cnica por Planeamiento y Presupuesto<\/div>\r\n <div class=\"doc-line\">2. Informe legal de la Gerencia de Asesor\u00eda Jur\u00eddica<\/div>\r\n <div class=\"doc-line\">3. Dictamen y aprobaci\u00f3n por el Concejo Institucional<\/div>\r\n <div class=\"doc-line\">4. Publicaci\u00f3n de la Norma Institucional correspondiente<\/div>\r\n <\/div>\r\n <div class=\"doc-footer\">\r\n Este documento es un proyecto generado autom\u00e1ticamente a partir de la propuesta registrada. No tiene validez legal hasta ser aprobado por el Concejo Institucional y publicado como Ordenanza.\r\n <\/div>\r\n `;\r\n docPanel.classList.add(\"open\");\r\n closeForm();\r\n document.getElementById(\"justificacion\").value = \"\";\r\n\r\n historyData.unshift({\r\n fecha: fechaStr, tipo: tipoLabels[tipo], unidad: unidad, base: draftCode + \" (proyecto)\", estado: \"pending\"\r\n });\r\n renderHistory();\r\n\r\n docPanel.scrollIntoView({behavior:\"smooth\", block:\"center\"});\r\n}\r\n\r\nrenderAll();\r\nrenderHistory();\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 Estructura Org\u00e1nica (ROF) 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 Estructura Org\u00e1nica (ROF) Usuarios y Accesos Par\u00e1metros del Sistema 09 Ayuda y Soporte Organismo de Gobierno de EjemploSesi\u00f3n de […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":638,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-1035","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/miespaciodigital.net\/auditoria\/wp-json\/wp\/v2\/pages\/1035","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=1035"}],"version-history":[{"count":4,"href":"https:\/\/miespaciodigital.net\/auditoria\/wp-json\/wp\/v2\/pages\/1035\/revisions"}],"predecessor-version":[{"id":1040,"href":"https:\/\/miespaciodigital.net\/auditoria\/wp-json\/wp\/v2\/pages\/1035\/revisions\/1040"}],"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=1035"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}