N\u00facleo \u2014 Actividades y Tareas<\/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: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 .summary-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px;}\r\n .kpi-card{background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow); position:relative; overflow:hidden;}\r\n .kpi-card::before{content:\"\"; position:absolute; top:0; left:0; right:0; height:3px;}\r\n .kpi-card.navy::before{background:var(--navy);}\r\n .kpi-card.amber::before{background:var(--amber);}\r\n .kpi-card.red::before{background:var(--red);}\r\n .kpi-card.green::before{background:var(--green);}\r\n .kpi-label{font-size:0.74rem; color:var(--ink-soft); margin-bottom:6px;}\r\n .kpi-value{font-family:'Fraunces', serif; font-size:1.8rem; font-weight:600; color:var(--navy);}\r\n .kpi-card.amber .kpi-value{color:var(--amber);}\r\n .kpi-card.red .kpi-value{color:var(--red);}\r\n .kpi-card.green .kpi-value{color:var(--green);}\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:220px; 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 select.gerencia-filter{\r\n border:1px solid var(--line); border-radius:10px; padding:10px 14px; font-family:'IBM Plex Sans', sans-serif;\r\n font-size:0.85rem; color:var(--ink); background:var(--paper-raised); cursor:pointer;\r\n }\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 .btn-new{\r\n margin-left:auto; font-family:'IBM Plex Sans', sans-serif; font-size:0.85rem; font-weight:600; padding:10px 18px;\r\n border-radius:10px; border:none; background:var(--navy); color:#fff; cursor:pointer;\r\n }\r\n\r\n \/* BOARD *\/\r\n .board{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}\r\n .board-col{background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; min-height:200px;}\r\n .board-col h3{font-family:'Fraunces', serif; font-size:0.95rem; margin:0 0 4px; color:var(--navy); display:flex; align-items:center; gap:8px; font-weight:600;}\r\n .board-col .col-count{font-family:'IBM Plex Mono',monospace; font-size:0.72rem; color:var(--ink-soft); font-weight:400;}\r\n .col-line{height:3px; border-radius:999px; margin-bottom:14px;}\r\n .col-line.pendiente{background:var(--line);}\r\n .col-line.proceso{background:var(--amber);}\r\n .col-line.completado{background:var(--green);}\r\n\r\n .task-card{\r\n background:#FAF9F5; border:1px solid var(--line); border-radius:10px; padding:14px; margin-bottom:10px;\r\n cursor:pointer; transition:border-color 0.12s ease;\r\n }\r\n .task-card:hover{border-color:var(--gold);}\r\n .task-card .code{font-family:'IBM Plex Mono',monospace; font-size:0.68rem; color:var(--gold); margin-bottom:6px; display:block;}\r\n .task-card .title{font-size:0.85rem; font-weight:500; margin-bottom:8px; line-height:1.4;}\r\n .task-card .meta-line{display:flex; justify-content:space-between; align-items:center; gap:8px;}\r\n .task-card .gerencia-tag{font-size:0.7rem; color:var(--ink-soft); background:#EFEDE4; padding:3px 8px; border-radius:999px;}\r\n .task-card .priority{font-size:0.68rem; font-weight:600; padding:3px 8px; border-radius:999px;}\r\n .priority.alta{background:var(--red-bg); color:var(--red);}\r\n .priority.media{background:var(--amber-bg); color:var(--amber);}\r\n .priority.baja{background:var(--green-bg); color:var(--green);}\r\n .task-card .due{font-size:0.7rem; color:var(--ink-soft); margin-top:8px; display:flex; align-items:center; gap:5px;}\r\n .task-card .due.overdue{color:var(--red); font-weight:600;}\r\n\r\n .empty-col{font-size:0.8rem; color:var(--ink-soft); text-align:center; padding:24px 8px;}\r\n\r\n \/* NEW TASK FORM *\/\r\n .form-panel{background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px; margin-bottom:22px; 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 16px;}\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-actions{display:flex; gap:10px; justify-content:flex-end;}\r\n .btn{font-family:'IBM Plex Sans', sans-serif; font-size:0.82rem; font-weight:600; padding:10px 16px; border-radius:9px; border:1px solid var(--navy); background:var(--navy); color:#fff; cursor:pointer;}\r\n .btn.secondary{background:transparent; color:var(--navy);}\r\n\r\n .demo-note{margin-top:22px; 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 .board{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 active\"><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\"><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\">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\">Gesti\u00f3n por Resultados<\/div>\r\n <h1>Actividades y Tareas<\/h1>\r\n <div class=\"subtitle\">Cada tarea se asigna a una unidad org\u00e1nica real del ROF y a su responsable del MOF<\/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=\"summary-strip\">\r\n <div class=\"kpi-card navy\"><div class=\"kpi-label\">Tareas activas<\/div><div class=\"kpi-value\" id=\"kpiTotal\">\u2014<\/div><\/div>\r\n <div class=\"kpi-card red\"><div class=\"kpi-label\">Vencidas<\/div><div class=\"kpi-value\" id=\"kpiOverdue\">\u2014<\/div><\/div>\r\n <div class=\"kpi-card amber\"><div class=\"kpi-label\">Prioridad alta<\/div><div class=\"kpi-value\" id=\"kpiHigh\">\u2014<\/div><\/div>\r\n <div class=\"kpi-card green\"><div class=\"kpi-label\">Completadas esta semana<\/div><div class=\"kpi-value\" id=\"kpiDone\">\u2014<\/div><\/div>\r\n <\/div>\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=\"taskSearch\" type=\"text\" placeholder=\"Buscar tarea por t\u00edtulo o c\u00f3digo...\">\r\n <\/div>\r\n <select class=\"gerencia-filter\" id=\"gerenciaFilter\">\r\n <option value=\"todas\">Todas las gerencias<\/option>\r\n <\/select>\r\n <div class=\"filter-chip active\" data-priority=\"todas\">Todas<\/div>\r\n <div class=\"filter-chip\" data-priority=\"alta\">Alta prioridad<\/div>\r\n <button class=\"btn-new\" onclick=\"toggleForm()\">+ Nueva tarea<\/button>\r\n <\/div>\r\n\r\n <div class=\"form-panel\" id=\"formPanel\">\r\n <h3>Nueva actividad o tarea<\/h3>\r\n <div class=\"form-grid\">\r\n <div class=\"form-field full\">\r\n <label>T\u00edtulo de la tarea<\/label>\r\n <input type=\"text\" id=\"fTitle\" placeholder=\"Ej: Elaborar informe trimestral de ejecuci\u00f3n\">\r\n <\/div>\r\n <div class=\"form-field\">\r\n <label>Unidad org\u00e1nica responsable<\/label>\r\n <select id=\"fGerencia\"><\/select>\r\n <\/div>\r\n <div class=\"form-field\">\r\n <label>Prioridad<\/label>\r\n <select id=\"fPriority\">\r\n <option value=\"alta\">Alta<\/option>\r\n <option value=\"media\" selected>Media<\/option>\r\n <option value=\"baja\">Baja<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-field\">\r\n <label>Fecha l\u00edmite<\/label>\r\n <input type=\"date\" id=\"fDue\">\r\n <\/div>\r\n <div class=\"form-field\">\r\n <label>Estado inicial<\/label>\r\n <select id=\"fStatus\">\r\n <option value=\"pendiente\" selected>Pendiente<\/option>\r\n <option value=\"proceso\">En proceso<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-actions\">\r\n <button class=\"btn secondary\" onclick=\"toggleForm()\">Cancelar<\/button>\r\n <button class=\"btn\" onclick=\"addTask()\">Crear tarea<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"board\">\r\n <div class=\"board-col\">\r\n <h3>Pendiente <span class=\"col-count\" id=\"countPendiente\"><\/span><\/h3>\r\n <div class=\"col-line pendiente\"><\/div>\r\n <div id=\"colPendiente\"><\/div>\r\n <\/div>\r\n <div class=\"board-col\">\r\n <h3>En proceso <span class=\"col-count\" id=\"countProceso\"><\/span><\/h3>\r\n <div class=\"col-line proceso\"><\/div>\r\n <div id=\"colProceso\"><\/div>\r\n <\/div>\r\n <div class=\"board-col\">\r\n <h3>Completado <span class=\"col-count\" id=\"countCompletado\"><\/span><\/h3>\r\n <div class=\"col-line completado\"><\/div>\r\n <div id=\"colCompletado\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"demo-note\">\r\n Prototipo de demostraci\u00f3n \u2014 haz clic en \"Nueva tarea\" para crear una, o en cualquier tarjeta para avanzarla de estado. Los datos son de ejemplo.\r\n <\/div>\r\n <\/main>\r\n<\/div>\r\n\r\n<script>\r\nconst gerencias = [\r\n \"Gerencia de Administraci\u00f3n y Finanzas\",\r\n \"Gerencia de Infraestructura y Desarrollo Urbano\",\r\n \"Gerencia de Servicios P\u00fablicos\",\r\n \"Gerencia de Desarrollo Social\",\r\n \"Gerencia de Seguridad Ciudadana\",\r\n \"Gerencia de Planeamiento y Presupuesto\",\r\n \"Gerencia de Tecnolog\u00edas de la Informaci\u00f3n\"\r\n];\r\n\r\nlet tasks = [\r\n {code:\"TAR-0231\", title:\"Elaborar informe trimestral de ejecuci\u00f3n presupuestal\", gerencia:\"Gerencia de Planeamiento y Presupuesto\", priority:\"alta\", due:\"2026-08-21\", status:\"pendiente\"},\r\n {code:\"TAR-0232\", title:\"Reparar unidad de serenazgo con c\u00f3digo VH-014\", gerencia:\"Gerencia de Seguridad Ciudadana\", priority:\"alta\", due:\"2026-08-16\", status:\"pendiente\"},\r\n {code:\"TAR-0233\", title:\"Actualizar el padr\u00f3n catastral del sector norte\", gerencia:\"Gerencia de Infraestructura y Desarrollo Urbano\", priority:\"media\", due:\"2026-08-28\", status:\"pendiente\"},\r\n {code:\"TAR-0234\", title:\"Publicar convocatoria CAS para asistente administrativo\", gerencia:\"Gerencia de Administraci\u00f3n y Finanzas\", priority:\"media\", due:\"2026-08-25\", status:\"proceso\"},\r\n {code:\"TAR-0235\", title:\"Instalar mesa de partes digital en atenci\u00f3n al ciudadano\", gerencia:\"Gerencia de Tecnolog\u00edas de la Informaci\u00f3n\", priority:\"alta\", due:\"2026-08-19\", status:\"proceso\"},\r\n {code:\"TAR-0236\", title:\"Coordinar campa\u00f1a de vacunaci\u00f3n con centro de salud local\", gerencia:\"Gerencia de Desarrollo Social\", priority:\"baja\", due:\"2026-09-02\", status:\"proceso\"},\r\n {code:\"TAR-0237\", title:\"Cerrar liquidaci\u00f3n de obra de pavimentaci\u00f3n Jr. Los \u00c1lamos\", gerencia:\"Gerencia de Infraestructura y Desarrollo Urbano\", priority:\"alta\", due:\"2026-08-10\", status:\"completado\"},\r\n {code:\"TAR-0238\", title:\"Entregar reporte mensual de limpieza p\u00fablica\", gerencia:\"Gerencia de Servicios P\u00fablicos\", priority:\"baja\", due:\"2026-08-14\", status:\"completado\"},\r\n {code:\"TAR-0239\", title:\"Validar planilla de personal CAS del mes\", gerencia:\"Gerencia de Administraci\u00f3n y Finanzas\", priority:\"media\", due:\"2026-08-15\", status:\"completado\"}\r\n];\r\n\r\nconst gFilter = document.getElementById(\"gerenciaFilter\");\r\ngerencias.forEach(g => {\r\n const opt = document.createElement(\"option\");\r\n opt.value = g; opt.textContent = g;\r\n gFilter.appendChild(opt);\r\n});\r\nconst fGerenciaSelect = document.getElementById(\"fGerencia\");\r\ngerencias.forEach(g => {\r\n const opt = document.createElement(\"option\");\r\n opt.value = g; opt.textContent = g;\r\n fGerenciaSelect.appendChild(opt);\r\n});\r\n\r\nfunction isOverdue(dueStr, status){\r\n if(status === \"completado\") return false;\r\n const due = new Date(dueStr + \"T23:59:59\");\r\n const today = new Date(\"2026-08-19T00:00:00\");\r\n return due < today;\r\n}\r\n\r\nfunction shortDate(dueStr){\r\n const d = new Date(dueStr + \"T00:00:00\");\r\n return d.toLocaleDateString(\"es-PE\", {day:\"2-digit\", month:\"short\"});\r\n}\r\n\r\nfunction abbrGerencia(g){\r\n return g.replace(\"Gerencia de \", \"\").replace(\"Gerencia de Administraci\u00f3n y Finanzas\", \"Adm. y Finanzas\");\r\n}\r\n\r\nlet activeGerencia = \"todas\";\r\nlet activePriority = \"todas\";\r\n\r\nfunction getFiltered(){\r\n const q = document.getElementById(\"taskSearch\").value.trim().toLowerCase();\r\n return tasks.filter(t => {\r\n const matchesG = activeGerencia === \"todas\" || t.gerencia === activeGerencia;\r\n const matchesP = activePriority === \"todas\" || t.priority === activePriority;\r\n const matchesQ = t.title.toLowerCase().includes(q) || t.code.toLowerCase().includes(q);\r\n return matchesG && matchesP && matchesQ;\r\n });\r\n}\r\n\r\nfunction renderCard(t){\r\n const overdue = isOverdue(t.due, t.status);\r\n return `\r\n <div class=\"task-card\" onclick=\"advanceTask('${t.code}')\">\r\n <span class=\"code\">${t.code}<\/span>\r\n <div class=\"title\">${t.title}<\/div>\r\n <div class=\"meta-line\">\r\n <span class=\"gerencia-tag\">${abbrGerencia(t.gerencia)}<\/span>\r\n <span class=\"priority ${t.priority}\">${t.priority === \"alta\" ? \"Alta\" : t.priority === \"media\" ? \"Media\" : \"Baja\"}<\/span>\r\n <\/div>\r\n <div class=\"due ${overdue ? 'overdue' : ''}\">${overdue ? \"Venci\u00f3\" : \"Vence\"} ${shortDate(t.due)}<\/div>\r\n <\/div>\r\n `;\r\n}\r\n\r\nfunction renderBoard(){\r\n const filtered = getFiltered();\r\n const pendiente = filtered.filter(t => t.status === \"pendiente\");\r\n const proceso = filtered.filter(t => t.status === \"proceso\");\r\n const completado = filtered.filter(t => t.status === \"completado\");\r\n\r\n document.getElementById(\"colPendiente\").innerHTML = pendiente.length ? pendiente.map(renderCard).join(\"\") : `<div class=\"empty-col\">Sin tareas pendientes<\/div>`;\r\n document.getElementById(\"colProceso\").innerHTML = proceso.length ? proceso.map(renderCard).join(\"\") : `<div class=\"empty-col\">Sin tareas en proceso<\/div>`;\r\n document.getElementById(\"colCompletado\").innerHTML = completado.length ? completado.map(renderCard).join(\"\") : `<div class=\"empty-col\">Sin tareas completadas<\/div>`;\r\n\r\n document.getElementById(\"countPendiente\").textContent = pendiente.length;\r\n document.getElementById(\"countProceso\").textContent = proceso.length;\r\n document.getElementById(\"countCompletado\").textContent = completado.length;\r\n\r\n const active = tasks.filter(t => t.status !== \"completado\");\r\n document.getElementById(\"kpiTotal\").textContent = active.length;\r\n document.getElementById(\"kpiOverdue\").textContent = tasks.filter(t => isOverdue(t.due, t.status)).length;\r\n document.getElementById(\"kpiHigh\").textContent = active.filter(t => t.priority === \"alta\").length;\r\n document.getElementById(\"kpiDone\").textContent = tasks.filter(t => t.status === \"completado\").length;\r\n}\r\n\r\nfunction advanceTask(code){\r\n const t = tasks.find(x => x.code === code);\r\n if(!t) return;\r\n if(t.status === \"pendiente\") t.status = \"proceso\";\r\n else if(t.status === \"proceso\") t.status = \"completado\";\r\n else t.status = \"pendiente\";\r\n renderBoard();\r\n}\r\n\r\ndocument.getElementById(\"taskSearch\").addEventListener(\"input\", renderBoard);\r\ngFilter.addEventListener(\"change\", () => { activeGerencia = gFilter.value; renderBoard(); });\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 activePriority = chip.dataset.priority;\r\n renderBoard();\r\n });\r\n});\r\n\r\nfunction toggleForm(){\r\n document.getElementById(\"formPanel\").classList.toggle(\"open\");\r\n}\r\n\r\nlet taskCounter = 240;\r\nfunction addTask(){\r\n const title = document.getElementById(\"fTitle\").value.trim();\r\n if(!title){ alert(\"Escribe un t\u00edtulo para la tarea.\"); return; }\r\n const due = document.getElementById(\"fDue\").value || \"2026-08-30\";\r\n tasks.push({\r\n code: \"TAR-0\" + (taskCounter++),\r\n title: title,\r\n gerencia: fGerenciaSelect.value,\r\n priority: document.getElementById(\"fPriority\").value,\r\n due: due,\r\n status: document.getElementById(\"fStatus\").value\r\n });\r\n document.getElementById(\"fTitle\").value = \"\";\r\n toggleForm();\r\n renderBoard();\r\n}\r\n\r\nrenderBoard();\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 Actividades y Tareas 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 Organismo de Gobierno de EjemploSesi\u00f3n de demostraci\u00f3n Gesti\u00f3n por Resultados Actividades y Tareas Cada tarea […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":661,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-1107","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/miespaciodigital.net\/auditoria\/wp-json\/wp\/v2\/pages\/1107","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=1107"}],"version-history":[{"count":4,"href":"https:\/\/miespaciodigital.net\/auditoria\/wp-json\/wp\/v2\/pages\/1107\/revisions"}],"predecessor-version":[{"id":1112,"href":"https:\/\/miespaciodigital.net\/auditoria\/wp-json\/wp\/v2\/pages\/1107\/revisions\/1112"}],"up":[{"embeddable":true,"href":"https:\/\/miespaciodigital.net\/auditoria\/wp-json\/wp\/v2\/pages\/661"}],"wp:attachment":[{"href":"https:\/\/miespaciodigital.net\/auditoria\/wp-json\/wp\/v2\/media?parent=1107"}],"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 Actividades y Tareas<\/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: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 .summary-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px;}\r\n .kpi-card{background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow); position:relative; overflow:hidden;}\r\n .kpi-card::before{content:\"\"; position:absolute; top:0; left:0; right:0; height:3px;}\r\n .kpi-card.navy::before{background:var(--navy);}\r\n .kpi-card.amber::before{background:var(--amber);}\r\n .kpi-card.red::before{background:var(--red);}\r\n .kpi-card.green::before{background:var(--green);}\r\n .kpi-label{font-size:0.74rem; color:var(--ink-soft); margin-bottom:6px;}\r\n .kpi-value{font-family:'Fraunces', serif; font-size:1.8rem; font-weight:600; color:var(--navy);}\r\n .kpi-card.amber .kpi-value{color:var(--amber);}\r\n .kpi-card.red .kpi-value{color:var(--red);}\r\n .kpi-card.green .kpi-value{color:var(--green);}\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:220px; 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 select.gerencia-filter{\r\n border:1px solid var(--line); border-radius:10px; padding:10px 14px; font-family:'IBM Plex Sans', sans-serif;\r\n font-size:0.85rem; color:var(--ink); background:var(--paper-raised); cursor:pointer;\r\n }\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 .btn-new{\r\n margin-left:auto; font-family:'IBM Plex Sans', sans-serif; font-size:0.85rem; font-weight:600; padding:10px 18px;\r\n border-radius:10px; border:none; background:var(--navy); color:#fff; cursor:pointer;\r\n }\r\n\r\n \/* BOARD *\/\r\n .board{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}\r\n .board-col{background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; min-height:200px;}\r\n .board-col h3{font-family:'Fraunces', serif; font-size:0.95rem; margin:0 0 4px; color:var(--navy); display:flex; align-items:center; gap:8px; font-weight:600;}\r\n .board-col .col-count{font-family:'IBM Plex Mono',monospace; font-size:0.72rem; color:var(--ink-soft); font-weight:400;}\r\n .col-line{height:3px; border-radius:999px; margin-bottom:14px;}\r\n .col-line.pendiente{background:var(--line);}\r\n .col-line.proceso{background:var(--amber);}\r\n .col-line.completado{background:var(--green);}\r\n\r\n .task-card{\r\n background:#FAF9F5; border:1px solid var(--line); border-radius:10px; padding:14px; margin-bottom:10px;\r\n cursor:pointer; transition:border-color 0.12s ease;\r\n }\r\n .task-card:hover{border-color:var(--gold);}\r\n .task-card .code{font-family:'IBM Plex Mono',monospace; font-size:0.68rem; color:var(--gold); margin-bottom:6px; display:block;}\r\n .task-card .title{font-size:0.85rem; font-weight:500; margin-bottom:8px; line-height:1.4;}\r\n .task-card .meta-line{display:flex; justify-content:space-between; align-items:center; gap:8px;}\r\n .task-card .gerencia-tag{font-size:0.7rem; color:var(--ink-soft); background:#EFEDE4; padding:3px 8px; border-radius:999px;}\r\n .task-card .priority{font-size:0.68rem; font-weight:600; padding:3px 8px; border-radius:999px;}\r\n .priority.alta{background:var(--red-bg); color:var(--red);}\r\n .priority.media{background:var(--amber-bg); color:var(--amber);}\r\n .priority.baja{background:var(--green-bg); color:var(--green);}\r\n .task-card .due{font-size:0.7rem; color:var(--ink-soft); margin-top:8px; display:flex; align-items:center; gap:5px;}\r\n .task-card .due.overdue{color:var(--red); font-weight:600;}\r\n\r\n .empty-col{font-size:0.8rem; color:var(--ink-soft); text-align:center; padding:24px 8px;}\r\n\r\n \/* NEW TASK FORM *\/\r\n .form-panel{background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px; margin-bottom:22px; 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 16px;}\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-actions{display:flex; gap:10px; justify-content:flex-end;}\r\n .btn{font-family:'IBM Plex Sans', sans-serif; font-size:0.82rem; font-weight:600; padding:10px 16px; border-radius:9px; border:1px solid var(--navy); background:var(--navy); color:#fff; cursor:pointer;}\r\n .btn.secondary{background:transparent; color:var(--navy);}\r\n\r\n .demo-note{margin-top:22px; 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 .board{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 active\"><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\"><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\">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\">Gesti\u00f3n por Resultados<\/div>\r\n <h1>Actividades y Tareas<\/h1>\r\n <div class=\"subtitle\">Cada tarea se asigna a una unidad org\u00e1nica real del ROF y a su responsable del MOF<\/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=\"summary-strip\">\r\n <div class=\"kpi-card navy\"><div class=\"kpi-label\">Tareas activas<\/div><div class=\"kpi-value\" id=\"kpiTotal\">\u2014<\/div><\/div>\r\n <div class=\"kpi-card red\"><div class=\"kpi-label\">Vencidas<\/div><div class=\"kpi-value\" id=\"kpiOverdue\">\u2014<\/div><\/div>\r\n <div class=\"kpi-card amber\"><div class=\"kpi-label\">Prioridad alta<\/div><div class=\"kpi-value\" id=\"kpiHigh\">\u2014<\/div><\/div>\r\n <div class=\"kpi-card green\"><div class=\"kpi-label\">Completadas esta semana<\/div><div class=\"kpi-value\" id=\"kpiDone\">\u2014<\/div><\/div>\r\n <\/div>\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=\"taskSearch\" type=\"text\" placeholder=\"Buscar tarea por t\u00edtulo o c\u00f3digo...\">\r\n <\/div>\r\n <select class=\"gerencia-filter\" id=\"gerenciaFilter\">\r\n <option value=\"todas\">Todas las gerencias<\/option>\r\n <\/select>\r\n <div class=\"filter-chip active\" data-priority=\"todas\">Todas<\/div>\r\n <div class=\"filter-chip\" data-priority=\"alta\">Alta prioridad<\/div>\r\n <button class=\"btn-new\" onclick=\"toggleForm()\">+ Nueva tarea<\/button>\r\n <\/div>\r\n\r\n <div class=\"form-panel\" id=\"formPanel\">\r\n <h3>Nueva actividad o tarea<\/h3>\r\n <div class=\"form-grid\">\r\n <div class=\"form-field full\">\r\n <label>T\u00edtulo de la tarea<\/label>\r\n <input type=\"text\" id=\"fTitle\" placeholder=\"Ej: Elaborar informe trimestral de ejecuci\u00f3n\">\r\n <\/div>\r\n <div class=\"form-field\">\r\n <label>Unidad org\u00e1nica responsable<\/label>\r\n <select id=\"fGerencia\"><\/select>\r\n <\/div>\r\n <div class=\"form-field\">\r\n <label>Prioridad<\/label>\r\n <select id=\"fPriority\">\r\n <option value=\"alta\">Alta<\/option>\r\n <option value=\"media\" selected>Media<\/option>\r\n <option value=\"baja\">Baja<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-field\">\r\n <label>Fecha l\u00edmite<\/label>\r\n <input type=\"date\" id=\"fDue\">\r\n <\/div>\r\n <div class=\"form-field\">\r\n <label>Estado inicial<\/label>\r\n <select id=\"fStatus\">\r\n <option value=\"pendiente\" selected>Pendiente<\/option>\r\n <option value=\"proceso\">En proceso<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-actions\">\r\n <button class=\"btn secondary\" onclick=\"toggleForm()\">Cancelar<\/button>\r\n <button class=\"btn\" onclick=\"addTask()\">Crear tarea<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"board\">\r\n <div class=\"board-col\">\r\n <h3>Pendiente <span class=\"col-count\" id=\"countPendiente\"><\/span><\/h3>\r\n <div class=\"col-line pendiente\"><\/div>\r\n <div id=\"colPendiente\"><\/div>\r\n <\/div>\r\n <div class=\"board-col\">\r\n <h3>En proceso <span class=\"col-count\" id=\"countProceso\"><\/span><\/h3>\r\n <div class=\"col-line proceso\"><\/div>\r\n <div id=\"colProceso\"><\/div>\r\n <\/div>\r\n <div class=\"board-col\">\r\n <h3>Completado <span class=\"col-count\" id=\"countCompletado\"><\/span><\/h3>\r\n <div class=\"col-line completado\"><\/div>\r\n <div id=\"colCompletado\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"demo-note\">\r\n Prototipo de demostraci\u00f3n \u2014 haz clic en \"Nueva tarea\" para crear una, o en cualquier tarjeta para avanzarla de estado. Los datos son de ejemplo.\r\n <\/div>\r\n <\/main>\r\n<\/div>\r\n\r\n<script>\r\nconst gerencias = [\r\n \"Gerencia de Administraci\u00f3n y Finanzas\",\r\n \"Gerencia de Infraestructura y Desarrollo Urbano\",\r\n \"Gerencia de Servicios P\u00fablicos\",\r\n \"Gerencia de Desarrollo Social\",\r\n \"Gerencia de Seguridad Ciudadana\",\r\n \"Gerencia de Planeamiento y Presupuesto\",\r\n \"Gerencia de Tecnolog\u00edas de la Informaci\u00f3n\"\r\n];\r\n\r\nlet tasks = [\r\n {code:\"TAR-0231\", title:\"Elaborar informe trimestral de ejecuci\u00f3n presupuestal\", gerencia:\"Gerencia de Planeamiento y Presupuesto\", priority:\"alta\", due:\"2026-08-21\", status:\"pendiente\"},\r\n {code:\"TAR-0232\", title:\"Reparar unidad de serenazgo con c\u00f3digo VH-014\", gerencia:\"Gerencia de Seguridad Ciudadana\", priority:\"alta\", due:\"2026-08-16\", status:\"pendiente\"},\r\n {code:\"TAR-0233\", title:\"Actualizar el padr\u00f3n catastral del sector norte\", gerencia:\"Gerencia de Infraestructura y Desarrollo Urbano\", priority:\"media\", due:\"2026-08-28\", status:\"pendiente\"},\r\n {code:\"TAR-0234\", title:\"Publicar convocatoria CAS para asistente administrativo\", gerencia:\"Gerencia de Administraci\u00f3n y Finanzas\", priority:\"media\", due:\"2026-08-25\", status:\"proceso\"},\r\n {code:\"TAR-0235\", title:\"Instalar mesa de partes digital en atenci\u00f3n al ciudadano\", gerencia:\"Gerencia de Tecnolog\u00edas de la Informaci\u00f3n\", priority:\"alta\", due:\"2026-08-19\", status:\"proceso\"},\r\n {code:\"TAR-0236\", title:\"Coordinar campa\u00f1a de vacunaci\u00f3n con centro de salud local\", gerencia:\"Gerencia de Desarrollo Social\", priority:\"baja\", due:\"2026-09-02\", status:\"proceso\"},\r\n {code:\"TAR-0237\", title:\"Cerrar liquidaci\u00f3n de obra de pavimentaci\u00f3n Jr. Los \u00c1lamos\", gerencia:\"Gerencia de Infraestructura y Desarrollo Urbano\", priority:\"alta\", due:\"2026-08-10\", status:\"completado\"},\r\n {code:\"TAR-0238\", title:\"Entregar reporte mensual de limpieza p\u00fablica\", gerencia:\"Gerencia de Servicios P\u00fablicos\", priority:\"baja\", due:\"2026-08-14\", status:\"completado\"},\r\n {code:\"TAR-0239\", title:\"Validar planilla de personal CAS del mes\", gerencia:\"Gerencia de Administraci\u00f3n y Finanzas\", priority:\"media\", due:\"2026-08-15\", status:\"completado\"}\r\n];\r\n\r\nconst gFilter = document.getElementById(\"gerenciaFilter\");\r\ngerencias.forEach(g => {\r\n const opt = document.createElement(\"option\");\r\n opt.value = g; opt.textContent = g;\r\n gFilter.appendChild(opt);\r\n});\r\nconst fGerenciaSelect = document.getElementById(\"fGerencia\");\r\ngerencias.forEach(g => {\r\n const opt = document.createElement(\"option\");\r\n opt.value = g; opt.textContent = g;\r\n fGerenciaSelect.appendChild(opt);\r\n});\r\n\r\nfunction isOverdue(dueStr, status){\r\n if(status === \"completado\") return false;\r\n const due = new Date(dueStr + \"T23:59:59\");\r\n const today = new Date(\"2026-08-19T00:00:00\");\r\n return due < today;\r\n}\r\n\r\nfunction shortDate(dueStr){\r\n const d = new Date(dueStr + \"T00:00:00\");\r\n return d.toLocaleDateString(\"es-PE\", {day:\"2-digit\", month:\"short\"});\r\n}\r\n\r\nfunction abbrGerencia(g){\r\n return g.replace(\"Gerencia de \", \"\").replace(\"Gerencia de Administraci\u00f3n y Finanzas\", \"Adm. y Finanzas\");\r\n}\r\n\r\nlet activeGerencia = \"todas\";\r\nlet activePriority = \"todas\";\r\n\r\nfunction getFiltered(){\r\n const q = document.getElementById(\"taskSearch\").value.trim().toLowerCase();\r\n return tasks.filter(t => {\r\n const matchesG = activeGerencia === \"todas\" || t.gerencia === activeGerencia;\r\n const matchesP = activePriority === \"todas\" || t.priority === activePriority;\r\n const matchesQ = t.title.toLowerCase().includes(q) || t.code.toLowerCase().includes(q);\r\n return matchesG && matchesP && matchesQ;\r\n });\r\n}\r\n\r\nfunction renderCard(t){\r\n const overdue = isOverdue(t.due, t.status);\r\n return `\r\n <div class=\"task-card\" onclick=\"advanceTask('${t.code}')\">\r\n <span class=\"code\">${t.code}<\/span>\r\n <div class=\"title\">${t.title}<\/div>\r\n <div class=\"meta-line\">\r\n <span class=\"gerencia-tag\">${abbrGerencia(t.gerencia)}<\/span>\r\n <span class=\"priority ${t.priority}\">${t.priority === \"alta\" ? \"Alta\" : t.priority === \"media\" ? \"Media\" : \"Baja\"}<\/span>\r\n <\/div>\r\n <div class=\"due ${overdue ? 'overdue' : ''}\">${overdue ? \"Venci\u00f3\" : \"Vence\"} ${shortDate(t.due)}<\/div>\r\n <\/div>\r\n `;\r\n}\r\n\r\nfunction renderBoard(){\r\n const filtered = getFiltered();\r\n const pendiente = filtered.filter(t => t.status === \"pendiente\");\r\n const proceso = filtered.filter(t => t.status === \"proceso\");\r\n const completado = filtered.filter(t => t.status === \"completado\");\r\n\r\n document.getElementById(\"colPendiente\").innerHTML = pendiente.length ? pendiente.map(renderCard).join(\"\") : `<div class=\"empty-col\">Sin tareas pendientes<\/div>`;\r\n document.getElementById(\"colProceso\").innerHTML = proceso.length ? proceso.map(renderCard).join(\"\") : `<div class=\"empty-col\">Sin tareas en proceso<\/div>`;\r\n document.getElementById(\"colCompletado\").innerHTML = completado.length ? completado.map(renderCard).join(\"\") : `<div class=\"empty-col\">Sin tareas completadas<\/div>`;\r\n\r\n document.getElementById(\"countPendiente\").textContent = pendiente.length;\r\n document.getElementById(\"countProceso\").textContent = proceso.length;\r\n document.getElementById(\"countCompletado\").textContent = completado.length;\r\n\r\n const active = tasks.filter(t => t.status !== \"completado\");\r\n document.getElementById(\"kpiTotal\").textContent = active.length;\r\n document.getElementById(\"kpiOverdue\").textContent = tasks.filter(t => isOverdue(t.due, t.status)).length;\r\n document.getElementById(\"kpiHigh\").textContent = active.filter(t => t.priority === \"alta\").length;\r\n document.getElementById(\"kpiDone\").textContent = tasks.filter(t => t.status === \"completado\").length;\r\n}\r\n\r\nfunction advanceTask(code){\r\n const t = tasks.find(x => x.code === code);\r\n if(!t) return;\r\n if(t.status === \"pendiente\") t.status = \"proceso\";\r\n else if(t.status === \"proceso\") t.status = \"completado\";\r\n else t.status = \"pendiente\";\r\n renderBoard();\r\n}\r\n\r\ndocument.getElementById(\"taskSearch\").addEventListener(\"input\", renderBoard);\r\ngFilter.addEventListener(\"change\", () => { activeGerencia = gFilter.value; renderBoard(); });\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 activePriority = chip.dataset.priority;\r\n renderBoard();\r\n });\r\n});\r\n\r\nfunction toggleForm(){\r\n document.getElementById(\"formPanel\").classList.toggle(\"open\");\r\n}\r\n\r\nlet taskCounter = 240;\r\nfunction addTask(){\r\n const title = document.getElementById(\"fTitle\").value.trim();\r\n if(!title){ alert(\"Escribe un t\u00edtulo para la tarea.\"); return; }\r\n const due = document.getElementById(\"fDue\").value || \"2026-08-30\";\r\n tasks.push({\r\n code: \"TAR-0\" + (taskCounter++),\r\n title: title,\r\n gerencia: fGerenciaSelect.value,\r\n priority: document.getElementById(\"fPriority\").value,\r\n due: due,\r\n status: document.getElementById(\"fStatus\").value\r\n });\r\n document.getElementById(\"fTitle\").value = \"\";\r\n toggleForm();\r\n renderBoard();\r\n}\r\n\r\nrenderBoard();\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 Actividades y Tareas 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 Organismo de Gobierno de EjemploSesi\u00f3n de demostraci\u00f3n Gesti\u00f3n por Resultados Actividades y Tareas Cada tarea […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":661,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-1107","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/miespaciodigital.net\/auditoria\/wp-json\/wp\/v2\/pages\/1107","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=1107"}],"version-history":[{"count":4,"href":"https:\/\/miespaciodigital.net\/auditoria\/wp-json\/wp\/v2\/pages\/1107\/revisions"}],"predecessor-version":[{"id":1112,"href":"https:\/\/miespaciodigital.net\/auditoria\/wp-json\/wp\/v2\/pages\/1107\/revisions\/1112"}],"up":[{"embeddable":true,"href":"https:\/\/miespaciodigital.net\/auditoria\/wp-json\/wp\/v2\/pages\/661"}],"wp:attachment":[{"href":"https:\/\/miespaciodigital.net\/auditoria\/wp-json\/wp\/v2\/media?parent=1107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}