{"id":5401,"date":"2026-08-27T02:42:09","date_gmt":"2026-08-27T02:42:09","guid":{"rendered":"https:\/\/planeacion.narino.gov.co\/observatorio-pot\/?page_id=5401"},"modified":"2026-08-27T02:50:42","modified_gmt":"2026-08-27T02:50:42","slug":"indicadores-pda","status":"publish","type":"page","link":"https:\/\/planeacion.narino.gov.co\/observatorio-pot\/indicadores-pda\/","title":{"rendered":"indicadores-pda"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"5401\" class=\"elementor elementor-5401\" data-elementor-settings=\"{&quot;ha_cmc_init_switcher&quot;:&quot;no&quot;}\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1dfabc5 e-con-full e-flex e-con e-parent\" data-id=\"1dfabc5\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-37778a7 elementor-widget elementor-widget-ha-slider happy-addon ha-slider\" data-id=\"37778a7\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;animation_speed&quot;:2500,&quot;autoplay&quot;:&quot;yes&quot;,&quot;autoplay_speed&quot;:3000,&quot;loop&quot;:&quot;yes&quot;,&quot;slides_transition&quot;:&quot;slide&quot;,&quot;navigation&quot;:&quot;arrow&quot;}\" data-widget_type=\"ha-slider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n\t\t<div class=\"hajs-slick ha-slick ha-slick--slider\">\n\n\t\t\t\n\t\t\t\t<div class=\"ha-slick-slide slick-slide\">\n\t\t\t\t\t<div class=\"ha-slick-item\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"ha-slick-img\" src=\"https:\/\/planeacion.narino.gov.co\/observatorio-pot\/wp-content\/uploads\/2026\/08\/banner_pda_narino_institucional-1.webp\" alt=\"\">\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t\n\t\t<\/div>\n\n\t\t\t\t\t<button type=\"button\" class=\"slick-prev\"><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-chevron-left\" viewBox=\"0 0 320 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z\"><\/path><\/svg><\/button>\n\t\t\n\t\t\t\t\t<button type=\"button\" class=\"slick-next\"><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-chevron-right\" viewBox=\"0 0 320 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z\"><\/path><\/svg><\/button>\n\t\t\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b6a1a23 e-con-full e-flex e-con e-parent\" data-id=\"b6a1a23\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4a0c7e5 elementor-hidden-mobile elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"4a0c7e5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-70e275e ha-has-bg-overlay elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"70e275e\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;slideInUp&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Los indicadores sectoriales de APSB permiten medir y hacer seguimiento a las condiciones y avances de los servicios de acueducto, alcantarillado y aseo. En el marco del PDA, facilitan el seguimiento a las metas y resultados del sector en los municipios vinculados. Estos indicadores permiten identificar brechas, necesidades y oportunidades de mejora. Asimismo, constituyen un insumo para la planeaci\u00f3n y priorizaci\u00f3n de proyectos e inversiones. Su seguimiento contribuye a evaluar la gesti\u00f3n y el cumplimiento de las metas establecidas. De esta manera, apoyan la toma de decisiones y el fortalecimiento del sector en el departamento.<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a869c94 e-con-full e-flex e-con e-parent\" data-id=\"a869c94\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a9f5177 elementor-widget elementor-widget-shortcode\" data-id=\"a9f5177\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">  <section class=\"pdaind\" id=\"obsPdaInd_48998\">\n    <div class=\"pdaind__hero\">\n      <div><small>PLAN DEPARTAMENTAL DE AGUA \u00b7 NARI\u00d1O<\/small>\n        <h2>Indicadores sectoriales PDA<\/h2>\n        <p>Explore la evoluci\u00f3n municipal de agua potable, saneamiento b\u00e1sico, aseo y aprovechamiento.<\/p>\n      <\/div>\n      <div class=\"pdaind__actions\">\n        <button type=\"button\" data-presentation title=\"Modo presentaci\u00f3n\">\u26f6 <span>Presentaci\u00f3n<\/span><\/button>\n        <button type=\"button\" data-export title=\"Exportar datos filtrados\">\u21e9 <span>Exportar CSV<\/span><\/button>\n      <\/div>\n    <\/div>\n    <div class=\"pdaind__toolbar\">\n      <button type=\"button\" class=\"pdaind__filters-close\" data-filters-close aria-label=\"Cerrar filtros\">\u00d7<\/button>\n      <label><span>Indicador<\/span><select data-indicator><\/select><\/label>\n      <label><span>A\u00f1o<\/span><select data-year><\/select><\/label>\n      <label><span>Subregi\u00f3n<\/span><select data-subregion>\n          <option value=\"\">Todas las subregiones<\/option>\n        <\/select><\/label>\n      <label><span>Municipio<\/span><select data-municipality>\n          <option value=\"\">Todos los municipios<\/option>\n        <\/select><\/label>\n      <button type=\"button\" class=\"pdaind__clear\" data-clear>Limpiar filtros<\/button>\n    <\/div>\n    <div class=\"pdaind__chips\" data-chips><\/div>\n    <div class=\"pdaind__kpis\">\n      <article><span>Promedio territorial<\/span><strong data-kpi-average>\u2014<\/strong><small data-kpi-average-note>Municipios con informaci\u00f3n<\/small><\/article>\n      <article><span>Mejor resultado<\/span><strong data-kpi-best>\u2014<\/strong><small data-kpi-best-name>\u2014<\/small><\/article>\n      <article><span>Municipios visibles<\/span><strong data-kpi-count>0<\/strong><small data-kpi-coverage>\u2014<\/small><\/article>\n      <article><span>Variaci\u00f3n anual<\/span><strong data-kpi-change>\u2014<\/strong><small data-kpi-change-note>Frente al a\u00f1o anterior<\/small><\/article>\n    <\/div>\n    <div class=\"pdaind__workspace\">\n      <div class=\"pdaind__mapwrap\">\n        <div class=\"pdaind__loading\" data-loading><i><\/i><span>Cargando informaci\u00f3n territorial\u2026<\/span><\/div>\n        <div class=\"pdaind__map\" data-map><\/div>\n        <button type=\"button\" class=\"pdaind__map-mode\" data-map-mode aria-pressed=\"false\"><span>\u2725<\/span> <b data-map-mode-label>Mover mapa<\/b><\/button>\n        <div class=\"pdaind__legend\"><strong data-legend-title>Indicador<\/strong>\n          <div data-legend><\/div><small>Haga clic en un municipio para consultar su ficha.<\/small>\n        <\/div>\n        <button class=\"pdaind__filters-toggle\" type=\"button\" data-mobile-filters>\u2630 Filtros<\/button>\n      <\/div>\n      <aside class=\"pdaind__detail\" data-detail aria-hidden=\"true\">\n        <button type=\"button\" class=\"pdaind__detail-close\" data-detail-close>\u00d7<\/button>\n        <small>LECTURA TERRITORIAL<\/small>\n        <h3 data-detail-name>Nari\u00f1o<\/h3>\n        <div class=\"pdaind__detail-value\" data-detail-value>Seleccione un municipio<\/div>\n        <p data-detail-text>El mapa presenta los resultados del indicador y a\u00f1o seleccionados.<\/p>\n        <div class=\"pdaind__mini\"><canvas data-trend-chart><\/canvas><\/div>\n        <div class=\"pdaind__detail-grid\" data-detail-grid><\/div>\n      <\/aside>\n      <button type=\"button\" class=\"pdaind__detail-backdrop\" data-detail-backdrop aria-label=\"Cerrar ficha territorial\"><\/button>\n    <\/div>\n    <section class=\"pdaind__analysis\">\n      <div class=\"pdaind__section-head\">\n        <div><small>AN\u00c1LISIS TERRITORIAL<\/small>\n          <h3 data-analysis-title>Panorama departamental<\/h3>\n        <\/div>\n        <p data-analysis-copy><\/p>\n      <\/div>\n      <div class=\"pdaind__charts\">\n        <article>\n          <h4>Ranking municipal<\/h4><canvas data-ranking-chart><\/canvas>\n        <\/article>\n        <article>\n          <h4>Evoluci\u00f3n departamental<\/h4><canvas data-department-chart><\/canvas>\n        <\/article>\n      <\/div>\n    <\/section>\n    <section class=\"pdaind__compare\">\n      <div class=\"pdaind__section-head\">\n        <div><small>COMPARADOR TERRITORIAL<\/small>\n          <h3>Compare dos municipios<\/h3>\n        <\/div>\n        <p>Contraste el indicador seleccionado a trav\u00e9s de los a\u00f1os disponibles.<\/p>\n      <\/div>\n      <div class=\"pdaind__compare-controls\">\n        <select data-compare-a>\n          <option value=\"\">Seleccione municipio A<\/option>\n        <\/select>\n        <span>VS<\/span>\n        <select data-compare-b>\n          <option value=\"\">Seleccione municipio B<\/option>\n        <\/select>\n        <button type=\"button\" data-compare>Comparar<\/button>\n      <\/div>\n      <div class=\"pdaind__compare-result\" data-compare-result hidden><canvas data-compare-chart><\/canvas><\/div>\n    <\/section>\n  <\/section>\n  <style>\n    .pdaind {\n      --green: #079447;\n      --green2: #10a13b;\n      --yellow: #fdd60c;\n      --navy: #08243c;\n      --ink: #10212e;\n      --muted: #687986;\n      --line: #dbe6df;\n      --soft: #f4f8f5;\n      --white: #fff;\n      font-family: inherit;\n      color: var(--ink);\n      max-width: 1600px;\n      margin: auto;\n      position: relative;\n      background: #fff;\n      border-radius: 24px;\n      overflow: hidden;\n      box-shadow: 0 22px 70px rgba(4, 45, 29, .12)\n    }\n\n    .pdaind * {\n      box-sizing: border-box\n    }\n\n    .pdaind button,\n    .pdaind select {\n      font: inherit\n    }\n\n    .pdaind .pdaind__hero {\n      background: linear-gradient(120deg, #157430, #087641 65%, #10a13b);\n      color: #fff;\n      padding: 32px 38px;\n      display: flex;\n      justify-content: space-between;\n      gap: 25px;\n      align-items: center;\n      position: relative;\n      overflow: hidden\n    }\n\n    .pdaind .pdaind__hero:after {\n      content: \"\";\n      position: absolute;\n      width: 280px;\n      height: 280px;\n      border: 55px solid rgba(253, 214, 12, .12);\n      border-radius: 50%;\n      right: -65px;\n      top: -120px\n    }\n\n    .pdaind .pdaind__hero small,\n    .pdaind .pdaind__section-head small,\n    .pdaind .pdaind__detail>small {\n      font-size: 11px;\n      font-weight: 800;\n      letter-spacing: 1.7px;\n      color: var(--yellow)\n    }\n\n    .pdaind h2,\n    .pdaind h3,\n    .pdaind h4,\n    .pdaind p {\n      margin: 0\n    }\n\n    .pdaind .pdaind__hero h2 {\n      font-size: clamp(27px, 3vw, 43px);\n      line-height: 1.05;\n      margin: 7px 0\n    }\n\n    .pdaind .pdaind__hero p {\n      opacity: .82;\n      max-width: 720px\n    }\n\n    .pdaind .pdaind__actions {\n      display: flex;\n      gap: 8px;\n      z-index: 1\n    }\n\n    .pdaind .pdaind__actions button,\n    .pdaind .pdaind__clear,\n    .pdaind .pdaind__compare-controls button {\n      border: 0;\n      border-radius: 11px;\n      padding: 11px 15px;\n      font-weight: 750;\n      cursor: pointer;\n      background: var(--yellow);\n      color: #263014;\n      white-space: nowrap\n    }\n\n    .pdaind .pdaind__actions button:first-child {\n      background: rgba(255, 255, 255, .14);\n      color: #fff;\n      border: 1px solid rgba(255, 255, 255, .25)\n    }\n\n    .pdaind .pdaind__toolbar {\n      padding: 18px 24px;\n      display: grid;\n      grid-template-columns: 2fr .65fr 1fr 1fr auto;\n      gap: 11px;\n      background: #fff;\n      border-bottom: 1px solid var(--line);\n      position: relative;\n      z-index: 10\n    }\n\n    .pdaind label span {\n      display: block;\n      font-size: 10px;\n      text-transform: uppercase;\n      letter-spacing: .7px;\n      color: var(--muted);\n      font-weight: 800;\n      margin: 0 0 4px 3px\n    }\n\n    .pdaind select {\n      width: 100%;\n      height: 43px;\n      border: 1px solid #d8e3dc;\n      border-radius: 10px;\n      background: #fff;\n      padding: 0 34px 0 11px;\n      color: var(--ink);\n      box-shadow: none\n    }\n\n    .pdaind .pdaind__clear {\n      align-self: end;\n      height: 43px;\n      background: #eef5f0;\n      color: var(--green);\n      border: 1px solid #d5e8db\n    }\n\n    .pdaind .pdaind__chips {\n      display: flex;\n      gap: 7px;\n      flex-wrap: wrap;\n      padding: 0 24px;\n      max-height: 0;\n      overflow: hidden;\n      transition: .2s\n    }\n\n    .pdaind .pdaind__chips:not(:empty) {\n      padding-top: 10px;\n      padding-bottom: 10px;\n      max-height: 100px\n    }\n\n    .pdaind .pdaind__chips span {\n      font-size: 12px;\n      padding: 5px 10px;\n      border-radius: 99px;\n      background: #e7f5eb;\n      color: #087439;\n      font-weight: 700\n    }\n\n    .pdaind .pdaind__kpis {\n      display: grid;\n      grid-template-columns: repeat(4, 1fr);\n      gap: 12px;\n      padding: 18px 24px;\n      background: var(--soft)\n    }\n\n    .pdaind .pdaind__kpis article {\n      background: #fff;\n      border: 1px solid #e2ebe5;\n      border-radius: 14px;\n      padding: 16px;\n      box-shadow: 0 6px 18px rgba(6, 51, 33, .05)\n    }\n\n    .pdaind .pdaind__kpis span {\n      font-size: 12px;\n      color: var(--muted);\n      display: block\n    }\n\n    .pdaind .pdaind__kpis strong {\n      font-size: 27px;\n      line-height: 1.15;\n      display: block;\n      color: var(--green);\n      margin: 4px 0\n    }\n\n    .pdaind .pdaind__kpis small {\n      display: block;\n      color: #788a82;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis\n    }\n\n    .pdaind .pdaind__workspace {\n      display: grid;\n      grid-template-columns: minmax(0, 1fr) 330px;\n      min-height: 640px;\n      background: #e8efeb;\n      position: relative;\n      overflow: hidden\n    }\n\n    .pdaind .pdaind__mapwrap {\n      position: relative;\n      min-width: 0\n    }\n\n    .pdaind .pdaind__map {\n      height: 640px;\n      background: #dfe9e3\n    }\n\n    .pdaind .pdaind__map-mode {\n      display: none;\n      position: absolute;\n      right: 12px;\n      top: 76px;\n      z-index: 830;\n      padding: 10px 12px;\n      border: 0;\n      border-radius: 10px;\n      background: rgba(5, 46, 37, .92);\n      color: #fff;\n      font-size: 12px;\n      font-weight: 800;\n      box-shadow: 0 6px 18px rgba(0, 0, 0, .18);\n      cursor: pointer\n    }\n\n    .pdaind.is-map-active .pdaind__map-mode {\n      background: #b83232\n    }\n\n    .pdaind.has-filters {\n      overflow: visible\n    }\n\n    .pdaind .pdaind__filters-close {\n      display: none\n    }\n\n    .pdaind .leaflet-container {\n      font-family: inherit\n    }\n\n    .pdaind .pdaind__loading {\n      position: absolute;\n      inset: 0;\n      z-index: 1100;\n      background: rgba(5, 35, 27, .86);\n      color: #fff;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 12px\n    }\n\n    .pdaind .pdaind__loading[hidden] {\n      display: none\n    }\n\n    .pdaind .pdaind__loading i {\n      width: 28px;\n      height: 28px;\n      border-radius: 50%;\n      border: 3px solid rgba(255, 255, 255, .25);\n      border-top-color: var(--yellow);\n      animation: pdaSpin .8s linear infinite\n    }\n\n    @keyframes pdaSpin {\n      to {\n        transform: rotate(360deg)\n      }\n    }\n\n    .pdaind .pdaind__legend {\n      position: absolute;\n      z-index: 700;\n      left: 18px;\n      bottom: 18px;\n      background: rgba(255, 255, 255, .95);\n      padding: 13px;\n      border-radius: 13px;\n      box-shadow: 0 10px 28px rgba(0, 0, 0, .16);\n      min-width: 220px\n    }\n\n    .pdaind .pdaind__legend strong {\n      display: block;\n      font-size: 12px;\n      margin-bottom: 8px\n    }\n\n    .pdaind .pdaind__legend-row {\n      display: flex;\n      align-items: center;\n      gap: 7px;\n      font-size: 11px;\n      margin: 4px 0\n    }\n\n    .pdaind .pdaind__legend-row i {\n      width: 25px;\n      height: 10px;\n      border-radius: 3px\n    }\n\n    .pdaind .pdaind__legend small {\n      display: block;\n      margin-top: 7px;\n      color: var(--muted);\n      font-size: 10px\n    }\n\n    .pdaind .pdaind__detail {\n      background: #fff;\n      padding: 27px 22px;\n      position: relative;\n      border-left: 1px solid var(--line);\n      overflow: auto\n    }\n\n    .pdaind .pdaind__detail h3 {\n      font-size: 27px;\n      margin: 6px 0 13px\n    }\n\n    .pdaind .pdaind__detail-value {\n      font-size: 30px;\n      font-weight: 850;\n      color: var(--green);\n      line-height: 1.1\n    }\n\n    .pdaind .pdaind__detail p {\n      font-size: 13px;\n      color: var(--muted);\n      margin: 10px 0 17px\n    }\n\n    .pdaind .pdaind__mini {\n      height: 190px\n    }\n\n    .pdaind .pdaind__detail-grid {\n      display: grid;\n      gap: 7px;\n      margin-top: 15px\n    }\n\n    .pdaind .pdaind__detail-grid div {\n      padding: 9px 11px;\n      background: var(--soft);\n      border-radius: 9px;\n      font-size: 12px;\n      display: flex;\n      justify-content: space-between;\n      gap: 8px\n    }\n\n    .pdaind .pdaind__detail-close {\n      display: none;\n      position: absolute;\n      right: 13px;\n      top: 10px;\n      border: 0;\n      background: none;\n      font-size: 26px;\n      cursor: pointer\n    }\n\n    .pdaind .pdaind__detail-backdrop {\n      display: none;\n      position: absolute;\n      inset: 0;\n      z-index: 790;\n      width: 100%;\n      height: 100%;\n      margin: 0;\n      padding: 0;\n      border: 0;\n      border-radius: 0;\n      background: rgba(5, 35, 27, .38);\n      opacity: 0;\n      cursor: pointer;\n      transition: opacity .25s ease;\n      backdrop-filter: blur(1.5px)\n    }\n\n    .pdaind .pdaind__analysis,\n    .pdaind .pdaind__compare {\n      padding: 36px 28px\n    }\n\n    .pdaind .pdaind__compare {\n      background: var(--soft)\n    }\n\n    .pdaind .pdaind__section-head {\n      display: flex;\n      justify-content: space-between;\n      gap: 30px;\n      align-items: end;\n      margin-bottom: 20px\n    }\n\n    .pdaind .pdaind__section-head h3 {\n      font-size: 25px;\n      margin-top: 3px\n    }\n\n    .pdaind .pdaind__section-head p {\n      max-width: 530px;\n      color: var(--muted);\n      font-size: 13px;\n      text-align: right\n    }\n\n    .pdaind .pdaind__charts {\n      display: grid;\n      grid-template-columns: 1.2fr 1fr;\n      gap: 16px\n    }\n\n    .pdaind .pdaind__charts article,\n    .pdaind .pdaind__compare-result {\n      border: 1px solid var(--line);\n      border-radius: 16px;\n      padding: 18px;\n      background: #fff;\n      height: 390px\n    }\n\n    .pdaind .pdaind__charts h4 {\n      font-size: 14px;\n      margin-bottom: 10px\n    }\n\n    .pdaind .pdaind__charts canvas,\n    .pdaind .pdaind__compare-result canvas {\n      max-height: 335px\n    }\n\n    .pdaind .pdaind__compare-controls {\n      display: grid;\n      grid-template-columns: 1fr auto 1fr auto;\n      gap: 10px;\n      align-items: center;\n      max-width: 900px;\n      margin: auto\n    }\n\n    .pdaind .pdaind__compare-controls span {\n      text-align: center;\n      font-weight: 900;\n      color: var(--green)\n    }\n\n    .pdaind .pdaind__compare-result {\n      margin-top: 18px;\n      height: 360px\n    }\n\n    .pdaind .pdaind__filters-toggle {\n      display: none\n    }\n\n    .pdaind.is-presentation .pdaind__hero,\n    .pdaind.is-presentation .pdaind__toolbar,\n    .pdaind.is-presentation .pdaind__chips,\n    .pdaind.is-presentation .pdaind__kpis,\n    .pdaind.is-presentation .pdaind__analysis,\n    .pdaind.is-presentation .pdaind__compare {\n      display: none\n    }\n\n    .pdaind.is-presentation {\n      position: fixed;\n      inset: 0;\n      z-index: 999999;\n      max-width: none;\n      border-radius: 0\n    }\n\n    .pdaind.is-presentation .pdaind__workspace,\n    .pdaind.is-presentation .pdaind__map {\n      height: 100vh;\n      min-height: 100vh\n    }\n\n    \/* TABLETA Y PORT\u00c1TIL COMPACTO: mapa completo + ficha lateral *\/\n    @media(max-width:1099px) {\n      .pdaind .pdaind__toolbar {\n        grid-template-columns: 1fr 1fr\n      }\n\n      .pdaind .pdaind__kpis {\n        grid-template-columns: 1fr 1fr\n      }\n\n      .pdaind .pdaind__workspace {\n        grid-template-columns: 1fr\n      }\n\n      .pdaind .pdaind__detail {\n        position: absolute;\n        right: 14px;\n        top: 14px;\n        bottom: 14px;\n        z-index: 820;\n        width: min(360px, calc(100% - 28px));\n        max-width: 360px;\n        box-shadow: 0 22px 60px rgba(3, 39, 25, .24);\n        transform: translateX(calc(100% + 30px));\n        visibility: hidden;\n        opacity: 0;\n        transition: transform .28s ease, opacity .22s ease, visibility 0s linear .28s;\n        border: 1px solid rgba(7, 148, 71, .14);\n        border-radius: 18px;\n        overscroll-behavior: contain\n      }\n\n      .pdaind .pdaind__detail.is-open {\n        transform: translateX(0);\n        visibility: visible;\n        opacity: 1;\n        transition-delay: 0s\n      }\n\n      .pdaind .pdaind__detail-close {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        position: sticky;\n        top: 0;\n        z-index: 3;\n        float: right;\n        width: 38px;\n        height: 38px;\n        margin: -10px -7px 8px 10px;\n        border-radius: 50%;\n        background: #eef7f1;\n        color: var(--green);\n        box-shadow: 0 3px 12px rgba(0, 0, 0, .10)\n      }\n\n      .pdaind.has-detail .pdaind__detail-backdrop {\n        display: block;\n        opacity: 1\n      }\n\n      .pdaind.has-detail .pdaind__filters-toggle {\n        opacity: 0;\n        visibility: hidden;\n        pointer-events: none\n      }\n\n      .pdaind .pdaind__charts {\n        grid-template-columns: 1fr\n      }\n\n      .pdaind .pdaind__section-head {\n        display: block\n      }\n\n      .pdaind .pdaind__section-head p {\n        text-align: left;\n        margin-top: 8px\n      }\n\n      .pdaind .pdaind__compare-controls {\n        grid-template-columns: 1fr\n      }\n\n      .pdaind .pdaind__compare-controls span {\n        display: none\n      }\n    }\n\n    \/* M\u00d3VIL: ficha territorial inferior, nunca encima de todo el mapa *\/\n    @media(max-width:640px) {\n      .pdaind {\n        border-radius: 0\n      }\n\n      .pdaind .pdaind__hero {\n        padding: 25px 20px;\n        display: block\n      }\n\n      .pdaind .pdaind__actions {\n        margin-top: 15px\n      }\n\n      .pdaind .pdaind__actions span {\n        display: none\n      }\n\n      .pdaind .pdaind__toolbar {\n        display: none;\n        position: fixed;\n        left: 12px;\n        right: 12px;\n        top: max(12px, env(safe-area-inset-top));\n        z-index: 2147483000;\n        grid-template-columns: 1fr;\n        max-height: calc(100dvh - 24px);\n        padding: 54px 16px 18px;\n        overflow-y: auto;\n        border: 1px solid rgba(7, 148, 71, .18);\n        border-radius: 18px;\n        background: #fff;\n        box-shadow: 0 22px 70px rgba(4, 45, 29, .35)\n      }\n\n      .pdaind .pdaind__toolbar.is-open {\n        display: grid\n      }\n\n      .pdaind .pdaind__filters-close {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        position: absolute;\n        right: 12px;\n        top: 10px;\n        width: 36px;\n        height: 36px;\n        margin: 0;\n        padding: 0;\n        border: 0;\n        border-radius: 50%;\n        background: #eef7f1;\n        color: var(--green);\n        font-size: 25px;\n        line-height: 1;\n        cursor: pointer\n      }\n\n      .pdaind .pdaind__filters-toggle {\n        display: block;\n        position: absolute;\n        z-index: 810;\n        right: 12px;\n        top: 12px;\n        border: 0;\n        border-radius: 10px;\n        background: var(--green);\n        color: #fff;\n        padding: 10px 13px;\n        font-weight: 750\n      }\n\n      .pdaind .pdaind__kpis {\n        grid-template-columns: 1fr;\n        padding: 12px;\n        gap: 8px\n      }\n\n      .pdaind .pdaind__kpis article {\n        padding: 12px\n      }\n\n      .pdaind .pdaind__kpis strong {\n        font-size: 22px\n      }\n\n      .pdaind .pdaind__map {\n        height: max(520px, calc(100vh - 170px));\n        max-height: 720px\n      }\n\n      .pdaind .pdaind__map {\n        touch-action: pan-y !important;\n        overscroll-behavior: auto\n      }\n\n      .pdaind.is-map-active .pdaind__map {\n        touch-action: none !important;\n        overscroll-behavior: contain\n      }\n\n      .pdaind .pdaind__map-mode {\n        display: block\n      }\n\n      .pdaind .pdaind__legend {\n        left: 10px;\n        bottom: 10px;\n        min-width: 0;\n        width: min(210px, calc(100% - 82px));\n        max-height: 190px;\n        overflow: auto\n      }\n\n      .pdaind .pdaind__detail {\n        left: 0;\n        right: 0;\n        top: auto;\n        bottom: 0;\n        width: 100%;\n        max-width: none;\n        max-height: 65%;\n        padding: 18px 18px 24px;\n        border-width: 1px 0 0;\n        border-radius: 22px 22px 0 0;\n        transform: translateY(calc(100% + 30px));\n        box-shadow: 0 -18px 55px rgba(3, 39, 25, .28)\n      }\n\n      .pdaind .pdaind__detail:before {\n        content: \"\";\n        display: block;\n        width: 48px;\n        height: 5px;\n        margin: -7px auto 12px;\n        border-radius: 99px;\n        background: #c9d8cf\n      }\n\n      .pdaind .pdaind__detail.is-open {\n        transform: translateY(0)\n      }\n\n      .pdaind .pdaind__detail h3 {\n        font-size: 23px;\n        margin-bottom: 8px\n      }\n\n      .pdaind .pdaind__detail-value {\n        font-size: 26px\n      }\n\n      .pdaind .pdaind__mini {\n        height: 150px\n      }\n\n      .pdaind .pdaind__mini canvas {\n        max-height: 150px !important\n      }\n\n      .pdaind .pdaind__analysis,\n      .pdaind .pdaind__compare {\n        padding: 28px 14px\n      }\n    }\n\n\n    \/* BLINDAJE DE DIMENSIONES \u00b7 evita realimentaci\u00f3n de ResizeObserver\/Chart.js *\/\n    .pdaind .pdaind__mapwrap,\n    .pdaind .pdaind__charts,\n    .pdaind .pdaind__charts article,\n    .pdaind .pdaind__compare-result,\n    .pdaind .pdaind__mini {\n      min-height: 0;\n      min-width: 0;\n    }\n\n    .pdaind .pdaind__charts article {\n      position: relative;\n      overflow: hidden;\n      height: 390px;\n    }\n\n    .pdaind .pdaind__charts canvas,\n    .pdaind .pdaind__compare-result canvas,\n    .pdaind .pdaind__mini canvas {\n      display: block !important;\n      width: 100% !important;\n      max-width: 100% !important;\n      height: 100% !important;\n      max-height: 335px !important;\n    }\n\n    .pdaind .pdaind__mini canvas {\n      max-height: 190px !important;\n    }\n\n  <\/style>\n  <script>\n    document.addEventListener('DOMContentLoaded', async () => {\n      const root = document.getElementById(\"obsPdaInd_48998\");\n      if (!root || typeof L === 'undefined') return;\n      const endpoint = \"https:\\\/\\\/planeacion.narino.gov.co\\\/pda\\\/wp-json\\\/pda-indicadores\\\/v1\\\/geovisor\",\n        geoUrl = \"https:\\\/\\\/planeacion.narino.gov.co\\\/pda\\\/wp-content\\\/uploads\\\/geo\\\/municipios_narino.geojson\",\n        contourUrl = \"https:\\\/\\\/planeacion.narino.gov.co\\\/pda\\\/wp-content\\\/uploads\\\/geo\\\/contorno_narino.geojson\";\n      const $ = s => root.querySelector(s),\n        els = {\n          ind: $('[data-indicator]'),\n          year: $('[data-year]'),\n          sub: $('[data-subregion]'),\n          mun: $('[data-municipality]'),\n          chips: $('[data-chips]'),\n          detail: $('[data-detail]'),\n          detailBackdrop: $('[data-detail-backdrop]'),\n          toolbar: $('.pdaind__toolbar'),\n          filtersToggle: $('[data-mobile-filters]'),\n          map: $('[data-map]'),\n          mapMode: $('[data-map-mode]'),\n          mapModeLabel: $('[data-map-mode-label]'),\n          filtersClose: $('[data-filters-close]')\n        };\n      let raw = [],\n        meta = {},\n        geoLayer = null,\n        byDane = new Map(),\n        charts = {},\n        selected = '';\n      const palette = ['#eef7ef', '#bde5c5', '#70ca87', '#24a958', '#08753b'];\n      const mobileMap = window.matchMedia('(max-width: 640px)').matches;\n      const map = L.map($('[data-map]'), {\n        zoomControl: true,\n        scrollWheelZoom: !mobileMap,\n        dragging: !mobileMap,\n        touchZoom: !mobileMap,\n        doubleClickZoom: !mobileMap,\n        boxZoom: !mobileMap,\n        keyboard: !mobileMap\n      }).setView([1.25, -77.28], 8.3);\n\n      \/*\n       * En escritorio se conserva el zoom con rueda y el desplazamiento\n       * paralelo de la p\u00e1gina. En m\u00f3vil Leaflet inicia bloqueado: el gesto\n       * vertical pertenece de forma nativa a la p\u00e1gina. El usuario puede\n       * activar temporalmente las interacciones con \"Mover mapa\".\n       *\/\n      let wheelFrame = 0;\n      let pendingWheel = 0;\n      const normalizeWheel = event => {\n        const unit = event.deltaMode === 1 ? 16 : (event.deltaMode === 2 ? window.innerHeight : 1);\n        return Math.max(-90, Math.min(90, event.deltaY * unit));\n      };\n      els.map.addEventListener('wheel', event => {\n        if (mobileMap || event.ctrlKey || event.metaKey || root.classList.contains('is-presentation')) return;\n        pendingWheel += normalizeWheel(event);\n        if (wheelFrame) return;\n        wheelFrame = requestAnimationFrame(() => {\n          window.scrollBy(0, pendingWheel);\n          pendingWheel = 0;\n          wheelFrame = 0;\n        });\n      }, {capture: true, passive: true});\n\n      let mapInteractionActive = false;\n      const setMapInteraction = active => {\n        if (!mobileMap) return;\n        mapInteractionActive = Boolean(active);\n        root.classList.toggle('is-map-active', mapInteractionActive);\n        els.mapMode.setAttribute('aria-pressed', mapInteractionActive ? 'true' : 'false');\n        els.mapModeLabel.textContent = mapInteractionActive ? 'Salir del mapa' : 'Mover mapa';\n        if (mapInteractionActive) {\n          map.dragging.enable();\n          map.touchZoom.enable();\n          map.doubleClickZoom.enable();\n          map.boxZoom.enable();\n          map.keyboard.enable();\n        } else {\n          map.dragging.disable();\n          map.touchZoom.disable();\n          map.doubleClickZoom.disable();\n          map.boxZoom.disable();\n          map.keyboard.disable();\n        }\n      };\n      els.mapMode.onclick = event => {\n        event.preventDefault();\n        event.stopPropagation();\n        setMapInteraction(!mapInteractionActive);\n      };\n      L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n        maxZoom: 18,\n        attribution: '&copy; OpenStreetMap'\n      }).addTo(map);\n      map.createPane('pdaContour');\n      map.getPane('pdaContour').style.zIndex = 450;\n      map.getPane('pdaContour').style.pointerEvents = 'none';\n      const esc = v => String(v ?? '').replace(\/[&<>\"']\/g, c => ({\n        '&': '&amp;',\n        '<': '&lt;',\n        '>': '&gt;',\n        '\"': '&quot;',\n        \"'\": '&#039;'\n      } [c]));\n      const dane = p => String(p.COD_DANE ?? p.codigo_dane ?? p.cod_dane ?? p.DANE ?? p.MPIO_CCNCT ?? p.MPIO_CCDGO ?? '').replace(\/\\.0$\/, '').padStart(5, '0');\n      const featureName = p => p.MPIO_CNMBR ?? p.NOMBRE_MPI ?? p.nombre ?? p.municipio ?? p.NOM_MUNICI ?? 'Municipio';\n      const option = (select, value, label) => select.add(new Option(label, String(value)));\n      const rows = () => raw.filter(r => String(r.anio) === els.year.value && (!els.sub.value || r.subregion === els.sub.value) && (!els.mun.value || r.codigo_dane === els.mun.value));\n      const currentMeta = () => meta[els.ind.value] || {};\n      const numeric = r => {\n        const v = r[els.ind.value];\n        return v === null || v === '' || typeof v === 'undefined' ? null : (currentMeta().tipo === 'binario' ? (v === 'SI' ? 1 : 0) : Number(v));\n      };\n      const fmt = (v, m = currentMeta()) => {\n        if (v === null || !Number.isFinite(Number(v))) return 'Sin dato';\n        if (m.tipo === 'binario') return Number(v) >= .5 ? 'S\u00ed' : 'No';\n        if (m.tipo === 'porcentaje') return new Intl.NumberFormat('es-CO', {\n          style: 'percent',\n          maximumFractionDigits: 1\n        }).format(Number(v));\n        if (m.tipo === 'horas') return new Intl.NumberFormat('es-CO', {\n          maximumFractionDigits: 2\n        }).format(Number(v)) + ' h\/d\u00eda';\n        return new Intl.NumberFormat('es-CO', {\n          maximumFractionDigits: 2\n        }).format(Number(v));\n      };\n      const avg = list => {\n        const a = list.map(numeric).filter(Number.isFinite);\n        return a.length ? a.reduce((x, y) => x + y, 0) \/ a.length : null\n      };\n      const quantiles = list => {\n        const a = list.map(numeric).filter(Number.isFinite).sort((x, y) => x - y);\n        if (!a.length) return [];\n        return [0, .2, .4, .6, .8, 1].map(q => a[Math.min(a.length - 1, Math.floor((a.length - 1) * q))]);\n      };\n      const color = (v, q, m = currentMeta()) => {\n        if (v === null) return '#cbd5d1';\n        if (m.tipo === 'binario') return v ? '#079447' : '#e35d4f';\n        let idx = 4;\n        for (let i = 1; i < q.length; i++)\n          if (v <= q[i]) {\n            idx = i - 1;\n            break\n          } if (m.sentido === 'bajo') idx = 4 - idx;\n        return palette[idx];\n      };\n      const destroy = k => {\n        if (charts[k]) {\n          charts[k].destroy();\n          delete charts[k]\n        }\n      };\n      const chart = (key, canvas, config) => {\n        destroy(key);\n        const safeConfig = {\n          ...config,\n          options: {\n            ...(config.options || {}),\n            responsive: true,\n            maintainAspectRatio: false,\n            resizeDelay: 150,\n            animation: false\n          }\n        };\n        charts[key] = new Chart(canvas, safeConfig)\n      };\n\n      const closeFilters = () => {\n        els.toolbar.classList.remove('is-open');\n        root.classList.remove('has-filters');\n      };\n\n      const toggleFilters = () => {\n        const willOpen = !els.toolbar.classList.contains('is-open');\n        closeFilters();\n        if (willOpen) {\n          els.toolbar.classList.add('is-open');\n          root.classList.add('has-filters');\n        }\n      };\n\n      const openDetailPanel = () => {\n        closeFilters();\n        els.detail.classList.add('is-open');\n        root.classList.add('has-detail');\n        els.detail.setAttribute('aria-hidden', 'false');\n      };\n\n      const closeDetailPanel = () => {\n        els.detail.classList.remove('is-open');\n        root.classList.remove('has-detail');\n        els.detail.setAttribute('aria-hidden', 'true');\n      };\n\n      function fillCatalog(response) {\n        Object.entries(response.indicadores).forEach(([k, m]) => {\n          let group = [...els.ind.children].find(o => o.label === m.grupo);\n          if (!group) {\n            group = document.createElement('optgroup');\n            group.label = m.grupo;\n            els.ind.append(group)\n          }\n          group.append(new Option(m.nombre, k))\n        });\n        response.anios.forEach(y => option(els.year, y, y));\n        els.year.value = String(Math.max(...response.anios));\n        response.subregiones.forEach(v => option(els.sub, v, v));\n        Object.entries(response.municipios).forEach(([k, v]) => {\n          option(els.mun, k, v);\n          option($('[data-compare-a]'), k, v);\n          option($('[data-compare-b]'), k, v)\n        });\n      }\n\n      function legend(q) {\n        const m = currentMeta();\n        $('[data-legend-title]').textContent = m.nombre || 'Indicador';\n        const box = $('[data-legend]');\n        if (m.tipo === 'binario') {\n          box.innerHTML = '<div class=\"pdaind__legend-row\"><i style=\"background:#079447\"><\/i>S\u00ed<\/div><div class=\"pdaind__legend-row\"><i style=\"background:#e35d4f\"><\/i>No<\/div><div class=\"pdaind__legend-row\"><i style=\"background:#cbd5d1\"><\/i>Sin dato<\/div>';\n          return\n        }\n        let h = '';\n        for (let i = 0; i < 5; i++) {\n          const real = m.sentido === 'bajo' ? 4 - i : i;\n          h += `<div class=\"pdaind__legend-row\"><i style=\"background:${palette[real]}\"><\/i>${fmt(q[i],m)} \u2013 ${fmt(q[i+1],m)}<\/div>`\n        }\n        box.innerHTML = h + '<div class=\"pdaind__legend-row\"><i style=\"background:#cbd5d1\"><\/i>Sin dato<\/div>';\n      }\n\n      function paint(list) {\n        const q = quantiles(list),\n          mapRows = new Map(list.map(r => [r.codigo_dane, r]));\n        byDane.forEach((layer, code) => {\n          const r = mapRows.get(code),\n            v = r ? numeric(r) : null,\n            hasValue = Boolean(r) && Object.prototype.hasOwnProperty.call(r, els.ind.value) && r[els.ind.value] !== null;\n          layer.setStyle({\n            color: selected === code ? '#fdd60c' : '#526d60',\n            weight: selected === code ? 4 : 1,\n            fillColor: color(v, q),\n            fillOpacity: hasValue ? .83 : .35\n          })\n        });\n        legend(q);\n      }\n\n      function chips() {\n        const items = [currentMeta().nombre, `A\u00f1o ${els.year.value}`];\n        if (els.sub.value) items.push(els.sub.value);\n        if (els.mun.value) items.push(els.mun.options[els.mun.selectedIndex].text);\n        els.chips.innerHTML = items.map(x => `<span>${esc(x)}<\/span>`).join('');\n      }\n\n      function kpis(list) {\n        const m = currentMeta(),\n          valid = list.filter(r => numeric(r) !== null),\n          mean = avg(valid);\n        let best = null;\n        if (valid.length) best = [...valid].sort((a, b) => (m.sentido === 'bajo' ? 1 : -1) * (numeric(a) - numeric(b)))[0];\n        $('[data-kpi-average]').textContent = fmt(mean, m);\n        $('[data-kpi-best]').textContent = best ? fmt(numeric(best), m) : '\u2014';\n        $('[data-kpi-best-name]').textContent = best?.municipio || 'Sin informaci\u00f3n';\n        $('[data-kpi-count]').textContent = new Set(list.map(r => r.codigo_dane)).size;\n        $('[data-kpi-coverage]').textContent = `${valid.length} con informaci\u00f3n`;\n        const prior = raw.filter(r => r.anio === Number(els.year.value) - 1 && (!els.sub.value || r.subregion === els.sub.value) && (!els.mun.value || r.codigo_dane === els.mun.value)),\n          pa = avg(prior);\n        let change = mean !== null && pa !== null ? mean - pa : null;\n        $('[data-kpi-change]').textContent = change === null ? '\u2014' : (change > 0 ? '+' : '') + fmt(change, {\n          ...m,\n          tipo: m.tipo === 'binario' ? 'porcentaje' : m.tipo\n        });\n        $('[data-kpi-change-note]').textContent = pa === null ? 'Sin a\u00f1o anterior' : 'Frente al a\u00f1o anterior';\n      }\n\n      function analytics(list) {\n        const m = currentMeta(),\n          ordered = list.filter(r => numeric(r) !== null).sort((a, b) => (m.sentido === 'bajo' ? 1 : -1) * (numeric(a) - numeric(b))).slice(0, 12);\n        chart('ranking', $('[data-ranking-chart]'), {\n          type: 'bar',\n          data: {\n            labels: ordered.map(r => r.municipio),\n            datasets: [{\n              label: m.nombre,\n              data: ordered.map(numeric),\n              backgroundColor: '#10a13b',\n              borderRadius: 5\n            }]\n          },\n          options: {\n            indexAxis: 'y',\n            responsive: true,\n            maintainAspectRatio: false,\n            plugins: {\n              legend: {\n                display: false\n              },\n              tooltip: {\n                callbacks: {\n                  label: c => fmt(c.raw, m)\n                }\n              }\n            },\n            scales: {\n              x: {\n                ticks: {\n                  callback: v => fmt(v, m)\n                }\n              }\n            }\n          }\n        });\n        const years = [...new Set(raw.map(r => r.anio))].sort(),\n          values = years.map(y => avg(raw.filter(r => r.anio === y && (!els.sub.value || r.subregion === els.sub.value) && (!els.mun.value || r.codigo_dane === els.mun.value))));\n        chart('department', $('[data-department-chart]'), {\n          type: 'line',\n          data: {\n            labels: years,\n            datasets: [{\n              label: m.nombre,\n              data: values,\n              borderColor: '#079447',\n              backgroundColor: 'rgba(16,161,59,.13)',\n              fill: true,\n              tension: .32,\n              pointBackgroundColor: '#fdd60c',\n              pointBorderColor: '#079447',\n              pointRadius: 5\n            }]\n          },\n          options: {\n            responsive: true,\n            maintainAspectRatio: false,\n            plugins: {\n              legend: {\n                display: false\n              },\n              tooltip: {\n                callbacks: {\n                  label: c => fmt(c.raw, m)\n                }\n              }\n            },\n            scales: {\n              y: {\n                ticks: {\n                  callback: v => fmt(v, m)\n                }\n              }\n            }\n          }\n        });\n        $('[data-analysis-title]').textContent = els.mun.value ? els.mun.options[els.mun.selectedIndex].text : els.sub.value || 'Panorama departamental';\n        $('[data-analysis-copy]').textContent = `${m.nombre}. Resultados correspondientes a ${els.year.value}, con lectura ${m.sentido==='bajo'?'inversa: un valor menor representa una mejor condici\u00f3n':'ascendente: un valor mayor representa una mejor condici\u00f3n'}.`;\n      }\n\n      function detail(code) {\n        selected = code;\n        const r = raw.find(x => x.codigo_dane === code && String(x.anio) === els.year.value),\n          m = currentMeta();\n        if (!r) return;\n        $('[data-detail-name]').textContent = r.municipio;\n        $('[data-detail-value]').textContent = fmt(numeric(r), m);\n        $('[data-detail-text]').textContent = `${m.nombre} \u00b7 ${r.subregion} \u00b7 A\u00f1o ${r.anio}`;\n        const years = [...new Set(raw.map(x => x.anio))].sort(),\n          series = years.map(y => {\n            const x = raw.find(z => z.codigo_dane === code && z.anio === y),\n              v = x ? x[els.ind.value] : null;\n            return v === null ? null : (m.tipo === 'binario' ? (v === 'SI' ? 1 : 0) : Number(v))\n          });\n        chart('trend', $('[data-trend-chart]'), {\n          type: 'line',\n          data: {\n            labels: years,\n            datasets: [{\n              data: series,\n              borderColor: '#079447',\n              backgroundColor: '#fdd60c',\n              pointRadius: 5,\n              tension: .3\n            }]\n          },\n          options: {\n            responsive: true,\n            maintainAspectRatio: false,\n            plugins: {\n              legend: {\n                display: false\n              },\n              tooltip: {\n                callbacks: {\n                  label: c => fmt(c.raw, m)\n                }\n              }\n            },\n            scales: {\n              y: {\n                ticks: {\n                  callback: v => fmt(v, m)\n                }\n              }\n            }\n          }\n        });\n        $('[data-detail-grid]').innerHTML = `<div><span>C\u00f3digo DANE<\/span><b>${esc(r.codigo_dane)}<\/b><\/div><div><span>Subregi\u00f3n<\/span><b>${esc(r.subregion)}<\/b><\/div><div><span>A\u00f1o<\/span><b>${r.anio}<\/b><\/div><div><span>Indicador<\/span><b>${esc(m.unidad||m.tipo)}<\/b><\/div>`;\n        openDetailPanel();\n        paint(rows());\n      }\n\n      function apply() {\n        const list = rows();\n        if (els.mun.value) selected = els.mun.value;\n        else selected = '';\n        chips();\n        kpis(list);\n        paint(list);\n        analytics(list);\n        if (selected) detail(selected);\n        else {\n          closeDetailPanel();\n          $('[data-detail-name]').textContent = 'Nari\u00f1o';\n          $('[data-detail-value]').textContent = 'Seleccione un municipio';\n          $('[data-detail-text]').textContent = 'El mapa presenta los resultados del indicador y a\u00f1o seleccionados.';\n          destroy('trend')\n        }\n        if (geoLayer && els.mun.value) {\n          const layer = byDane.get(els.mun.value);\n          if (layer) map.fitBounds(layer.getBounds(), {\n            padding: [70, 70],\n            maxZoom: 11\n          })\n        } else if (geoLayer && els.sub.value) {\n          const layers = rows().map(r => byDane.get(r.codigo_dane)).filter(Boolean);\n          if (layers.length) map.fitBounds(L.featureGroup(layers).getBounds(), {\n            padding: [30, 30]\n          })\n        } else if (geoLayer) map.fitBounds(geoLayer.getBounds(), {\n          padding: [20, 20]\n        });\n      }\n\n      function compare() {\n        const a = $('[data-compare-a]').value,\n          b = $('[data-compare-b]').value;\n        if (!a || !b || a === b) return alert('Seleccione dos municipios diferentes.');\n        const m = currentMeta(),\n          years = [...new Set(raw.map(r => r.anio))].sort(),\n          series = code => years.map(y => {\n            const r = raw.find(x => x.codigo_dane === code && x.anio === y),\n              v = r ? r[els.ind.value] : null;\n            return v === null ? null : (m.tipo === 'binario' ? (v === 'SI' ? 1 : 0) : Number(v))\n          }),\n          name = code => raw.find(r => r.codigo_dane === code)?.municipio || code;\n        const box = $('[data-compare-result]');\n        box.hidden = false;\n        chart('compare', $('[data-compare-chart]'), {\n          type: 'line',\n          data: {\n            labels: years,\n            datasets: [{\n              label: name(a),\n              data: series(a),\n              borderColor: '#079447',\n              backgroundColor: '#079447',\n              tension: .3,\n              pointRadius: 5\n            }, {\n              label: name(b),\n              data: series(b),\n              borderColor: '#d6a900',\n              backgroundColor: '#fdd60c',\n              tension: .3,\n              pointRadius: 5\n            }]\n          },\n          options: {\n            responsive: true,\n            maintainAspectRatio: false,\n            plugins: {\n              tooltip: {\n                callbacks: {\n                  label: c => `${c.dataset.label}: ${fmt(c.raw,m)}`\n                }\n              }\n            },\n            scales: {\n              y: {\n                ticks: {\n                  callback: v => fmt(v, m)\n                }\n              }\n            }\n          }\n        });\n        box.scrollIntoView({\n          behavior: 'smooth',\n          block: 'center'\n        });\n      }\n\n      function exportCsv() {\n        const list = rows(),\n          m = currentMeta(),\n          lines = [\n            ['anio', 'codigo_dane', 'municipio', 'subregion', 'indicador', 'valor', 'unidad'], ...list.map(r => [r.anio, r.codigo_dane, r.municipio, r.subregion, m.nombre, r[els.ind.value] ?? '', m.unidad])\n          ],\n          csv = '\\ufeff' + lines.map(row => row.map(v => '\"' + String(v).replaceAll('\"', '\"\"') + '\"').join(';')).join('\\n'),\n          blob = new Blob([csv], {\n            type: 'text\/csv;charset=utf-8'\n          }),\n          a = document.createElement('a');\n        a.href = URL.createObjectURL(blob);\n        a.download = `indicadores_pda_${els.ind.value}_${els.year.value}.csv`;\n        a.click();\n        URL.revokeObjectURL(a.href);\n      }\n      [els.ind, els.year, els.sub, els.mun].forEach(x => x.addEventListener('change', apply));\n      $('[data-clear]').onclick = () => {\n        els.sub.value = '';\n        els.mun.value = '';\n        apply()\n      };\n      $('[data-detail-close]').onclick = closeDetailPanel;\n      els.detailBackdrop.onclick = closeDetailPanel;\n      $('[data-compare]').onclick = compare;\n      $('[data-export]').onclick = exportCsv;\n      els.filtersToggle.onclick = () => {\n        setMapInteraction(false);\n        closeDetailPanel();\n        toggleFilters();\n      };\n      els.filtersClose.onclick = closeFilters;\n      document.addEventListener('keydown', event => {\n        if (event.key === 'Escape') {\n          closeDetailPanel();\n          closeFilters();\n          setMapInteraction(false);\n        }\n      });\n      $('[data-presentation]').onclick = () => {\n        const entering = !root.classList.contains('is-presentation');\n        closeFilters();\n        closeDetailPanel();\n        root.classList.toggle('is-presentation', entering);\n        setMapInteraction(entering);\n        setTimeout(() => map.invalidateSize(), 250)\n      };\n      try {\n        const [geo, contour, response] = await Promise.all([fetch(geoUrl).then(r => {\n          if (!r.ok) throw Error('No fue posible cargar municipios_narino.geojson');\n          return r.json()\n        }), fetch(contourUrl).then(r => r.ok ? r.json() : null), fetch(endpoint, {\n          credentials: 'same-origin'\n        }).then(async r => {\n          const j = await r.json();\n          if (!r.ok) throw Error(j.message || 'Error en API PDA');\n          return j\n        })]);\n        raw = response.data || [];\n        meta = response.indicadores || {};\n        fillCatalog(response);\n        geoLayer = L.geoJSON(geo, {\n          style: {\n            color: '#526d60',\n            weight: 1,\n            fillColor: '#cbd5d1',\n            fillOpacity: .75\n          },\n          onEachFeature: (f, l) => {\n            const code = dane(f.properties || {});\n            byDane.set(code, l);\n            l.bindTooltip(`<b>${esc(featureName(f.properties||{}))}<\/b>`, {\n              sticky: true,\n              direction: 'top'\n            });\n            l.on('mouseover', () => l.setStyle({\n              weight: 3,\n              color: '#fdd60c'\n            }));\n            l.on('mouseout', () => paint(rows()));\n            l.on('click', () => {\n              els.mun.value = code;\n              apply()\n            })\n          }\n        }).addTo(map);\n        if (contour) L.geoJSON(contour, {\n          pane: 'pdaContour',\n          interactive: false,\n          style: {\n            color: '#fdd60c',\n            weight: 5,\n            fill: false\n          }\n        }).addTo(map);\n        map.fitBounds(geoLayer.getBounds(), {\n          padding: [20, 20]\n        });\n        apply();\n        $('[data-loading]').hidden = true;\n        setTimeout(() => map.invalidateSize(), 300)\n      } catch (e) {\n        console.error('PDA indicadores:', e);\n        $('[data-loading]').innerHTML = `<span>No fue posible cargar el geovisor.<br><small>${esc(e.message)}<\/small><\/span>`;\n      }\n    });\n  <\/script>\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Los indicadores sectoriales de APSB permiten medir y hacer seguimiento a las condiciones y avances de los servicios de acueducto, [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-5401","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/planeacion.narino.gov.co\/observatorio-pot\/wp-json\/wp\/v2\/pages\/5401","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/planeacion.narino.gov.co\/observatorio-pot\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/planeacion.narino.gov.co\/observatorio-pot\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/planeacion.narino.gov.co\/observatorio-pot\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/planeacion.narino.gov.co\/observatorio-pot\/wp-json\/wp\/v2\/comments?post=5401"}],"version-history":[{"count":10,"href":"https:\/\/planeacion.narino.gov.co\/observatorio-pot\/wp-json\/wp\/v2\/pages\/5401\/revisions"}],"predecessor-version":[{"id":5414,"href":"https:\/\/planeacion.narino.gov.co\/observatorio-pot\/wp-json\/wp\/v2\/pages\/5401\/revisions\/5414"}],"wp:attachment":[{"href":"https:\/\/planeacion.narino.gov.co\/observatorio-pot\/wp-json\/wp\/v2\/media?parent=5401"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}