{"id":23261,"date":"2026-08-31T11:11:08","date_gmt":"2026-08-31T10:11:08","guid":{"rendered":"https:\/\/odslab.cm-mafra.pt\/?page_id=23261"},"modified":"2026-09-15T15:16:00","modified_gmt":"2026-09-15T14:16:00","slug":"iniciativas-sustentabilidade","status":"publish","type":"page","link":"https:\/\/odslab.cm-mafra.pt\/iniciativas-sustentabilidade\/","title":{"rendered":"Pipeline Municipal"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"23261\" class=\"elementor elementor-23261\">\n\t\t\t\t<div class=\"elementor-element elementor-element-24bb1a5 e-con-full e-flex e-con e-parent\" data-id=\"24bb1a5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-961ec67 elementor-widget elementor-widget-html\" data-id=\"961ec67\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n\/* =========================================================\r\n   DASHBOARD INTERACTIVO\r\n   ========================================================= *\/\r\n\r\n.dashboard {\r\n    --green: #209b35;\r\n    --green-dark: #08751c;\r\n    --orange: #ff4b00;\r\n    --blue: #1428d8;\r\n    --text: #25313b;\r\n    --muted: #66727d;\r\n    --light: #eef1f2;\r\n\r\n    width: 100%;\r\n    max-width: 1200px;\r\n    margin: auto;\r\n    padding: 18px;\r\n\r\n    font-family: Arial, Helvetica, sans-serif;\r\n    color: var(--text);\r\n}\r\n\r\n.dashboard * {\r\n    box-sizing: border-box;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TOP STATS\r\n   ========================================================= *\/\r\n\r\n.dashboard-stats {\r\n    display: grid;\r\n    grid-template-columns: repeat(4, 1fr);\r\n    gap: 16px;\r\n    margin-bottom: 18px;\r\n}\r\n\r\n.stat-card {\r\n    min-height: 105px;\r\n    padding: 15px 18px;\r\n\r\n    background: white;\r\n    border: 1px solid #e2e5e7;\r\n    border-radius: 16px;\r\n\r\n    box-shadow:\r\n        0 5px 15px rgba(0,0,0,.08);\r\n\r\n    transition: transform .25s ease,\r\n                box-shadow .25s ease;\r\n}\r\n\r\n.stat-card:hover {\r\n    transform: translateY(-3px);\r\n\r\n    box-shadow:\r\n        0 12px 25px rgba(0,0,0,.12);\r\n}\r\n\r\n.stat-top {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n\r\n    font-size: 16px;\r\n}\r\n\r\n.stat-icon {\r\n    width: 42px;\r\n    height: 42px;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    border-radius: 12px;\r\n\r\n    font-size: 22px;\r\n    font-weight: bold;\r\n}\r\n\r\n.icon-green {\r\n    color: var(--green);\r\n    background: #eaf7ec;\r\n}\r\n\r\n.icon-darkgreen {\r\n    color: white;\r\n    background: #207b42;\r\n    border-radius: 50%;\r\n}\r\n\r\n.icon-orange {\r\n    color: white;\r\n    background: var(--orange);\r\n    border-radius: 50%;\r\n}\r\n\r\n.stat-value {\r\n    margin-top: 8px;\r\n    padding-left: 52px;\r\n\r\n    font-size: 24px;\r\n    font-weight: 800;\r\n}\r\n\r\n.stat-value.green {\r\n    color: var(--green-dark);\r\n}\r\n\r\n.stat-value.orange {\r\n    color: var(--orange);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MAIN GRID\r\n   ========================================================= *\/\r\n\r\n.dashboard-grid {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: 18px;\r\n}\r\n\r\n.card {\r\n    background: white;\r\n\r\n    border: 1px solid #e1e4e6;\r\n    border-radius: 16px;\r\n\r\n    box-shadow:\r\n        0 5px 15px rgba(0,0,0,.08);\r\n\r\n    overflow: hidden;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ODS CARD\r\n   ========================================================= *\/\r\n\r\n.ods-card {\r\n    min-height: 590px;\r\n}\r\n\r\n.card-header {\r\n    padding: 20px 24px 10px;\r\n}\r\n\r\n.card-title {\r\n    margin: 0;\r\n\r\n    font-size: 18px;\r\n    font-weight: 800;\r\n}\r\n\r\n.card-subtitle {\r\n    color: var(--muted);\r\n\r\n    font-size: 14px;\r\n    line-height: 1.6;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ODS CONTENT\r\n   ========================================================= *\/\r\n\r\n.ods-content {\r\n    display: grid;\r\n    grid-template-columns: 1fr 260px;\r\n    gap: 15px;\r\n\r\n    padding: 8px 24px 24px;\r\n}\r\n\r\n.ods-item {\r\n    margin-bottom: 18px;\r\n}\r\n\r\n.ods-name {\r\n    font-size: 15px;\r\n    font-weight: 700;\r\n    line-height: 1.45;\r\n}\r\n\r\n.ods-number {\r\n    margin-top: 4px;\r\n    padding-left: 25px;\r\n\r\n    font-size: 15px;\r\n    font-weight: 700;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TOGGLE\r\n   ========================================================= *\/\r\n\r\n.chart-area {\r\n    position: relative;\r\n}\r\n\r\n.chart-toggle {\r\n    position: relative;\r\n\r\n    width: 100%;\r\n    height: 42px;\r\n\r\n    display: flex;\r\n\r\n    background: #edf0ef;\r\n    border-radius: 7px;\r\n\r\n    padding: 3px;\r\n\r\n    cursor: pointer;\r\n\r\n    user-select: none;\r\n}\r\n\r\n.chart-toggle-slider {\r\n    position: absolute;\r\n\r\n    top: 3px;\r\n    left: 3px;\r\n\r\n    width: calc(50% - 3px);\r\n    height: 36px;\r\n\r\n    border-radius: 5px;\r\n\r\n    background: var(--green);\r\n\r\n    transition: transform .35s cubic-bezier(.4,0,.2,1);\r\n}\r\n\r\n.chart-toggle.investment .chart-toggle-slider {\r\n    transform: translateX(100%);\r\n}\r\n\r\n.chart-toggle span {\r\n    position: relative;\r\n    z-index: 2;\r\n\r\n    width: 50%;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    color: #39433e;\r\n\r\n    font-size: 13px;\r\n    font-weight: 600;\r\n\r\n    transition: color .3s;\r\n}\r\n\r\n.chart-toggle:not(.investment) .toggle-initiatives,\r\n.chart-toggle.investment .toggle-investment {\r\n    color: white;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CHART\r\n   ========================================================= *\/\r\n\r\n.chart-heading {\r\n    margin-top: 30px;\r\n\r\n    text-align: center;\r\n\r\n    font-size: 18px;\r\n    font-weight: 800;\r\n}\r\n\r\n.chart-wrapper {\r\n    position: relative;\r\n\r\n    width: 220px;\r\n    height: 250px;\r\n\r\n    margin: 10px auto 0;\r\n}\r\n\r\n.chart-svg {\r\n    position: absolute;\r\n\r\n    top: 20px;\r\n    left: 50%;\r\n\r\n    width: 205px;\r\n    height: 205px;\r\n\r\n    transform: translateX(-50%);\r\n\r\n    overflow: visible;\r\n\r\n    transition:\r\n        opacity .35s ease,\r\n        transform .4s ease;\r\n}\r\n\r\n.chart-svg.hidden {\r\n    opacity: 0;\r\n    transform:\r\n        translateX(-50%)\r\n        scale(.82);\r\n    pointer-events: none;\r\n}\r\n\r\n.chart-svg.visible {\r\n    opacity: 1;\r\n    transform:\r\n        translateX(-50%)\r\n        scale(1);\r\n}\r\n\r\n.donut-segment {\r\n    cursor: pointer;\r\n\r\n    transform-origin: 50% 50%;\r\n\r\n    transition:\r\n        opacity .2s ease,\r\n        transform .2s ease,\r\n        stroke-width .2s ease;\r\n}\r\n\r\n.donut-segment:hover {\r\n    opacity: .78;\r\n    stroke-width: 32px;\r\n}\r\n\r\n.donut-segment.selected {\r\n    stroke-width: 35px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CENTRO DO GR\u00c1FICO\r\n   ========================================================= *\/\r\n\r\n.chart-center {\r\n    position: absolute;\r\n\r\n    top: 70px;\r\n    left: 50%;\r\n\r\n    width: 110px;\r\n    height: 110px;\r\n\r\n    transform: translateX(-50%);\r\n\r\n    display: flex;\r\n    flex-direction: column;\r\n\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    pointer-events: none;\r\n\r\n    background: white;\r\n    border-radius: 50%;\r\n\r\n    box-shadow:\r\n        0 3px 15px rgba(0,0,0,.08);\r\n}\r\n\r\n.center-label {\r\n    color: var(--muted);\r\n    font-size: 12px;\r\n}\r\n\r\n.center-value {\r\n    margin-top: 4px;\r\n\r\n    font-size: 17px;\r\n    font-weight: 800;\r\n\r\n    line-height: 1.2;\r\n    text-align: center;\r\n    white-space: nowrap;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TOOLTIP\r\n   ========================================================= *\/\r\n\r\n.chart-tooltip {\r\n    position: fixed;\r\n    z-index: 99999;\r\n\r\n    display: none;\r\n\r\n    min-width: 145px;\r\n\r\n    padding: 10px 12px;\r\n\r\n    color: white;\r\n\r\n    background: rgba(28,35,40,.96);\r\n\r\n    border-radius: 9px;\r\n\r\n    box-shadow:\r\n        0 8px 25px rgba(0,0,0,.2);\r\n\r\n    font-size: 13px;\r\n\r\n    pointer-events: none;\r\n}\r\n\r\n.tooltip-title {\r\n    font-weight: 800;\r\n    margin-bottom: 4px;\r\n}\r\n\r\n.tooltip-value {\r\n    opacity: .9;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   RIGHT COLUMN\r\n   ========================================================= *\/\r\n\r\n.right-column {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 18px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CTA\r\n   ========================================================= *\/\r\n\r\n.cta-card {\r\n    min-height: 140px;\r\n\r\n    padding: 20px;\r\n\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: space-between;\r\n}\r\n\r\n.cta-title {\r\n    margin: 0;\r\n\r\n    font-size: 16px;\r\n    font-weight: 800;\r\n}\r\n\r\n.cta-text {\r\n    margin: 6px 0 16px;\r\n\r\n    color: var(--muted);\r\n    font-size: 14px;\r\n}\r\n\r\n.cta-button {\r\n    align-self: center;\r\n\r\n    padding: 11px 26px;\r\n\r\n    border: 0;\r\n    border-radius: 5px;\r\n\r\n    color: white;\r\n    background: var(--green);\r\n\r\n    font-weight: 600;\r\n\r\n    cursor: pointer;\r\n\r\n    transition: .2s;\r\n}\r\n\r\n.cta-button:hover {\r\n    background: var(--green-dark);\r\n    transform: translateY(-2px);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   INVESTMENTS\r\n   ========================================================= *\/\r\n\r\n.investments-card {\r\n    max-height: 292px;\r\n\r\n    padding: 20px 18px;\r\n\r\n    overflow-y: auto;\r\n}\r\n\r\n.investments-card::-webkit-scrollbar {\r\n    width: 6px;\r\n}\r\n\r\n.investments-card::-webkit-scrollbar-thumb {\r\n    background: #c9ced1;\r\n    border-radius: 10px;\r\n}\r\n\r\n.investment {\r\n    margin-bottom: 18px;\r\n\r\n    cursor: pointer;\r\n}\r\n\r\n.investment:last-child {\r\n    margin-bottom: 0;\r\n}\r\n\r\n.investment-header {\r\n    display: flex;\r\n    justify-content: space-between;\r\n\r\n    gap: 15px;\r\n\r\n    margin-bottom: 5px;\r\n\r\n    font-size: 14px;\r\n}\r\n\r\n.investment-name {\r\n    color: #53606a;\r\n}\r\n\r\n.investment-value {\r\n    white-space: nowrap;\r\n    color: #53606a;\r\n}\r\n\r\n.progress {\r\n    height: 14px;\r\n\r\n    overflow: hidden;\r\n\r\n    background: #ebedef;\r\n\r\n    border-radius: 20px;\r\n}\r\n\r\n.progress-bar {\r\n    height: 100%;\r\n\r\n    background: var(--green);\r\n\r\n    border-radius: 20px;\r\n\r\n    transition:\r\n        width .7s ease,\r\n        filter .2s ease;\r\n}\r\n\r\n.investment:hover .progress-bar {\r\n    filter: brightness(.9);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FINANCING\r\n   ========================================================= *\/\r\n\r\n.funding-card {\r\n    padding: 13px 10px 15px;\r\n}\r\n\r\n.funding-bar {\r\n    display: flex;\r\n\r\n    height: 19px;\r\n\r\n    overflow: hidden;\r\n\r\n    margin-bottom: 17px;\r\n\r\n    border-radius: 20px;\r\n\r\n    cursor: pointer;\r\n}\r\n\r\n.funding-segment {\r\n    height: 100%;\r\n\r\n    transition:\r\n        filter .2s ease,\r\n        transform .2s ease;\r\n}\r\n\r\n.funding-segment:hover {\r\n    filter: brightness(.85);\r\n}\r\n\r\n.funding-private {\r\n    width: 2%;\r\n    background: #ff7600;\r\n}\r\n\r\n.funding-none {\r\n    width: 16%;\r\n    background: #777;\r\n}\r\n\r\n.funding-public-private {\r\n    width: 5%;\r\n    background: #159b27;\r\n}\r\n\r\n.funding-public {\r\n    width: 78%;\r\n    background: #1428d8;\r\n}\r\n\r\n.funding-item {\r\n    margin: 7px 0;\r\n\r\n    font-size: 14px;\r\n\r\n    cursor: pointer;\r\n}\r\n\r\n.funding-item:hover {\r\n    color: var(--green-dark);\r\n}\r\n\r\n.funding-item strong {\r\n    font-weight: 800;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n   ========================================================= *\/\r\n\r\n@media(max-width:900px) {\r\n\r\n    .dashboard-stats {\r\n        grid-template-columns: repeat(2,1fr);\r\n    }\r\n\r\n    .dashboard-grid {\r\n        grid-template-columns: 1fr;\r\n    }\r\n\r\n    .ods-card {\r\n        min-height: auto;\r\n    }\r\n}\r\n\r\n\r\n@media(max-width:600px) {\r\n\r\n    .dashboard {\r\n        padding: 8px;\r\n    }\r\n\r\n    .dashboard-stats {\r\n        grid-template-columns: 1fr;\r\n        gap: 12px;\r\n    }\r\n\r\n    .ods-content {\r\n        grid-template-columns: 1fr;\r\n    }\r\n\r\n    .chart-area {\r\n        margin-top: 10px;\r\n    }\r\n\r\n    .investment-header {\r\n        flex-direction: column;\r\n        gap: 2px;\r\n    }\r\n\r\n}\r\n<\/style>\r\n\r\n\r\n<!-- =========================================================\r\n     HTML\r\n     ========================================================= -->\r\n\r\n<div class=\"dashboard\">\r\n\r\n    <!-- STATS -->\r\n\r\n    <div class=\"dashboard-stats\">\r\n\r\n        <div class=\"stat-card\">\r\n            <div class=\"stat-top\">\r\n                <div class=\"stat-icon icon-green\">\u2726<\/div>\r\n                <span>Total Iniciativas<\/span>\r\n            <\/div>\r\n            <div class=\"stat-value\">1 548<\/div>\r\n        <\/div>\r\n\r\n        <div class=\"stat-card\">\r\n            <div class=\"stat-top\">\r\n                <div class=\"stat-icon icon-green\">\u25a4<\/div>\r\n                <span>Total Investimento<\/span>\r\n            <\/div>\r\n            <div class=\"stat-value\">4 011,4 M\u20ac<\/div>\r\n        <\/div>\r\n\r\n        <div class=\"stat-card\">\r\n            <div class=\"stat-top\">\r\n                <div class=\"stat-icon icon-darkgreen\">\u2713<\/div>\r\n                <span>\u00cdndice ODS<\/span>\r\n            <\/div>\r\n            <div class=\"stat-value green\">97%<\/div>\r\n        <\/div>\r\n\r\n        <div class=\"stat-card\">\r\n            <div class=\"stat-top\">\r\n                <div class=\"stat-icon icon-orange\">!<\/div>\r\n                <span>Estado da execu\u00e7\u00e3o<\/span>\r\n            <\/div>\r\n            <div class=\"stat-value orange\">75%<\/div>\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <div class=\"dashboard-grid\">\r\n\r\n\r\n        <!-- =================================================\r\n             ODS\r\n             ================================================= -->\r\n\r\n        <div class=\"card ods-card\">\r\n\r\n            <div class=\"card-header\">\r\n                <h2 class=\"card-title\">\r\n                    Distribui\u00e7\u00e3o por ODS\r\n                <\/h2>\r\n            <\/div>\r\n\r\n\r\n            <div class=\"ods-content\">\r\n\r\n                <div class=\"ods-list\">\r\n\r\n                    <p class=\"card-subtitle\">\r\n                        Distribui\u00e7\u00e3o das iniciativas e do investimento\r\n                        pelos 17 Objetivos de Desenvolvimento Sustent\u00e1vel.\r\n                    <\/p>\r\n\r\n\r\n                    <div class=\"ods-item\">\r\n                        <div class=\"ods-name\">\r\n                            1 \u2014 Tornar cidades inclusivas e sustent\u00e1veis\r\n                        <\/div>\r\n                        <div class=\"ods-number\">\r\n                            \u2022 370 iniciativas\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n\r\n                    <div class=\"ods-item\">\r\n                        <div class=\"ods-name\">\r\n                            2 \u2014 Reduzir a desigualdade\r\n                        <\/div>\r\n                        <div class=\"ods-number\">\r\n                            \u2022 169 iniciativas\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n\r\n                    <div class=\"ods-item\">\r\n                        <div class=\"ods-name\">\r\n                            3 \u2014 Educa\u00e7\u00e3o de qualidade\r\n                        <\/div>\r\n                        <div class=\"ods-number\">\r\n                            \u2022 145 iniciativas\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n\r\n                    <div class=\"ods-item\">\r\n                        <div class=\"ods-name\">\r\n                            4 \u2014 Construir infraestruturas resilientes\r\n                        <\/div>\r\n                        <div class=\"ods-number\">\r\n                            \u2022 133 iniciativas\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n\r\n                    <div class=\"ods-item\">\r\n                        <div class=\"ods-name\">\r\n                            5 \u2014 Combater a mudan\u00e7a clim\u00e1tica\r\n                        <\/div>\r\n                        <div class=\"ods-number\">\r\n                            \u2022 96 iniciativas\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n                <!-- GR\u00c1FICOS -->\r\n\r\n                <div class=\"chart-area\">\r\n\r\n\r\n                    <!-- BOT\u00c3O -->\r\n\r\n                    <div\r\n                        class=\"chart-toggle\"\r\n                        id=\"chartToggle\"\r\n                        role=\"button\"\r\n                        tabindex=\"0\"\r\n                    >\r\n\r\n                        <div class=\"chart-toggle-slider\"><\/div>\r\n\r\n                        <span class=\"toggle-initiatives\">\r\n                            Iniciativas\r\n                        <\/span>\r\n\r\n                        <span class=\"toggle-investment\">\r\n                            Investimento\r\n                        <\/span>\r\n\r\n                    <\/div>\r\n\r\n\r\n                    <div class=\"chart-heading\" id=\"chartHeading\">\r\n                        Iniciativas\r\n                    <\/div>\r\n\r\n\r\n                    <div class=\"chart-wrapper\">\r\n\r\n\r\n                        <!-- GR\u00c1FICO INICIATIVAS -->\r\n\r\n                        <svg\r\n                            id=\"initiativeChart\"\r\n                            class=\"chart-svg visible\"\r\n                            viewBox=\"0 0 200 200\"\r\n                        >\r\n                            <g id=\"initiativeSegments\"><\/g>\r\n                        <\/svg>\r\n\r\n\r\n                        <!-- GR\u00c1FICO INVESTIMENTO -->\r\n\r\n                        <svg\r\n                            id=\"investmentChart\"\r\n                            class=\"chart-svg hidden\"\r\n                            viewBox=\"0 0 200 200\"\r\n                        >\r\n                            <g id=\"investmentSegments\"><\/g>\r\n                        <\/svg>\r\n\r\n\r\n                        <div class=\"chart-center\">\r\n\r\n                            <div\r\n                                class=\"center-label\"\r\n                                id=\"centerLabel\"\r\n                            >\r\n                                Total\r\n                            <\/div>\r\n\r\n                            <div\r\n                                class=\"center-value\"\r\n                                id=\"centerValue\"\r\n                            >\r\n                                1 548\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- =================================================\r\n             DIREITA\r\n             ================================================= -->\r\n\r\n        <div class=\"right-column\">\r\n\r\n\r\n            <!-- CTA -->\r\n\r\n            <div class=\"card cta-card\">\r\n\r\n                <div>\r\n\r\n                    <h2 class=\"cta-title\">\r\n                        Grandes conquistas come\u00e7am com uma ideia!\r\n                    <\/h2>\r\n\r\n                    <p class=\"cta-text\">\r\n                        D\u00ea o primeiro passo ao propor um projeto.\r\n                    <\/p>\r\n\r\n                <\/div>\r\n\r\n               <button\r\n    class=\"cta-button\"\r\n    onclick=\"window.location.href='https:\/\/odslab.cm-mafra.pt\/criar-iniciativa\/'\"\r\n>\r\n    Criar Projeto\r\n<\/button>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- INVESTIMENTOS -->\r\n\r\n            <div class=\"card investments-card\">\r\n\r\n    <div class=\"investment\">\r\n        <div class=\"investment-header\">\r\n            <span class=\"investment-name\">Infraestruturas<\/span>\r\n            <span class=\"investment-value\">696 092 500,00 \u20ac<\/span>\r\n        <\/div>\r\n        <div class=\"progress\">\r\n            <div class=\"progress-bar\" style=\"width:100%\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"investment\">\r\n        <div class=\"investment-header\">\r\n            <span class=\"investment-name\">Produ\u00e7\u00e3o Local e Turismo<\/span>\r\n            <span class=\"investment-value\">283 978 784,00 \u20ac<\/span>\r\n        <\/div>\r\n        <div class=\"progress\">\r\n            <div class=\"progress-bar\" style=\"width:41%\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"investment\">\r\n        <div class=\"investment-header\">\r\n            <span class=\"investment-name\">Sa\u00fade<\/span>\r\n            <span class=\"investment-value\">124 479 816,83 \u20ac<\/span>\r\n        <\/div>\r\n        <div class=\"progress\">\r\n            <div class=\"progress-bar\" style=\"width:18%\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"investment\">\r\n        <div class=\"investment-header\">\r\n            <span class=\"investment-name\">Educa\u00e7\u00e3o<\/span>\r\n            <span class=\"investment-value\">114 462 122,85 \u20ac<\/span>\r\n        <\/div>\r\n        <div class=\"progress\">\r\n            <div class=\"progress-bar\" style=\"width:16.5%\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"investment\">\r\n        <div class=\"investment-header\">\r\n            <span class=\"investment-name\">\u00c1gua e Saneamento<\/span>\r\n            <span class=\"investment-value\">65 555 500,00 \u20ac<\/span>\r\n        <\/div>\r\n        <div class=\"progress\">\r\n            <div class=\"progress-bar\" style=\"width:9.4%\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"investment\">\r\n        <div class=\"investment-header\">\r\n            <span class=\"investment-name\">Cultura<\/span>\r\n            <span class=\"investment-value\">56 384 869,03 \u20ac<\/span>\r\n        <\/div>\r\n        <div class=\"progress\">\r\n            <div class=\"progress-bar\" style=\"width:8.1%\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"investment\">\r\n        <div class=\"investment-header\">\r\n            <span class=\"investment-name\">Desporto<\/span>\r\n            <span class=\"investment-value\">32 922 610,63 \u20ac<\/span>\r\n        <\/div>\r\n        <div class=\"progress\">\r\n            <div class=\"progress-bar\" style=\"width:4.7%\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"investment\">\r\n        <div class=\"investment-header\">\r\n            <span class=\"investment-name\">Comunica\u00e7\u00f5es, G\u00e1s, Energia e Ilumina\u00e7\u00e3o<\/span>\r\n            <span class=\"investment-value\">28 184 858,07 \u20ac<\/span>\r\n        <\/div>\r\n        <div class=\"progress\">\r\n            <div class=\"progress-bar\" style=\"width:4.1%\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"investment\">\r\n        <div class=\"investment-header\">\r\n            <span class=\"investment-name\">\u00c1guas Pluviais e Linhas de \u00c1gua<\/span>\r\n            <span class=\"investment-value\">27 454 790,00 \u20ac<\/span>\r\n        <\/div>\r\n        <div class=\"progress\">\r\n            <div class=\"progress-bar\" style=\"width:3.9%\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"investment\">\r\n        <div class=\"investment-header\">\r\n            <span class=\"investment-name\">Cidadania e A\u00e7\u00e3o Social<\/span>\r\n            <span class=\"investment-value\">24 120 000,00 \u20ac<\/span>\r\n        <\/div>\r\n        <div class=\"progress\">\r\n            <div class=\"progress-bar\" style=\"width:3.5%\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"investment\">\r\n        <div class=\"investment-header\">\r\n            <span class=\"investment-name\">Altera\u00e7\u00f5es Clim\u00e1ticas<\/span>\r\n            <span class=\"investment-value\">23 713 840,00 \u20ac<\/span>\r\n        <\/div>\r\n        <div class=\"progress\">\r\n            <div class=\"progress-bar\" style=\"width:3.4%\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"investment\">\r\n        <div class=\"investment-header\">\r\n            <span class=\"investment-name\">Agricultura e Florestas<\/span>\r\n            <span class=\"investment-value\">23 407 000,00 \u20ac<\/span>\r\n        <\/div>\r\n        <div class=\"progress\">\r\n            <div class=\"progress-bar\" style=\"width:3.4%\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"investment\">\r\n        <div class=\"investment-header\">\r\n            <span class=\"investment-name\">Mobilidade, Transportes e Tr\u00e2nsito<\/span>\r\n            <span class=\"investment-value\">18 271 293,11 \u20ac<\/span>\r\n        <\/div>\r\n        <div class=\"progress\">\r\n            <div class=\"progress-bar\" style=\"width:2.6%\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"investment\">\r\n        <div class=\"investment-header\">\r\n            <span class=\"investment-name\">Desenvolvimento Econ\u00f3mico<\/span>\r\n            <span class=\"investment-value\">18 142 000,00 \u20ac<\/span>\r\n        <\/div>\r\n        <div class=\"progress\">\r\n            <div class=\"progress-bar\" style=\"width:2.6%\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"investment\">\r\n        <div class=\"investment-header\">\r\n            <span class=\"investment-name\">Jardins, Parques e Espa\u00e7os Verdes<\/span>\r\n            <span class=\"investment-value\">14 778 657,00 \u20ac<\/span>\r\n        <\/div>\r\n        <div class=\"progress\">\r\n            <div class=\"progress-bar\" style=\"width:2.1%\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"investment\">\r\n        <div class=\"investment-header\">\r\n            <span class=\"investment-name\">Mar, Praias e Orla Costeira<\/span>\r\n            <span class=\"investment-value\">12 457 956,39 \u20ac<\/span>\r\n        <\/div>\r\n        <div class=\"progress\">\r\n            <div class=\"progress-bar\" style=\"width:1.8%\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"investment\">\r\n        <div class=\"investment-header\">\r\n            <span class=\"investment-name\">Inova\u00e7\u00e3o, Smart Cities e Informa\u00e7\u00e3o geogr\u00e1fica<\/span>\r\n            <span class=\"investment-value\">9 702 450,00 \u20ac<\/span>\r\n        <\/div>\r\n        <div class=\"progress\">\r\n            <div class=\"progress-bar\" style=\"width:1.4%\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"investment\">\r\n        <div class=\"investment-header\">\r\n            <span class=\"investment-name\">Gest\u00e3o de Frota<\/span>\r\n            <span class=\"investment-value\">5 870 000,00 \u20ac<\/span>\r\n        <\/div>\r\n        <div class=\"progress\">\r\n            <div class=\"progress-bar\" style=\"width:0.8%\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"investment\">\r\n        <div class=\"investment-header\">\r\n            <span class=\"investment-name\">Res\u00edduos<\/span>\r\n            <span class=\"investment-value\">4 582 575,00 \u20ac<\/span>\r\n        <\/div>\r\n        <div class=\"progress\">\r\n            <div class=\"progress-bar\" style=\"width:0.7%\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"investment\">\r\n        <div class=\"investment-header\">\r\n            <span class=\"investment-name\">Seguran\u00e7a<\/span>\r\n            <span class=\"investment-value\">2 015 000,00 \u20ac<\/span>\r\n        <\/div>\r\n        <div class=\"progress\">\r\n            <div class=\"progress-bar\" style=\"width:0.3%\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"investment\">\r\n        <div class=\"investment-header\">\r\n            <span class=\"investment-name\">Emprego<\/span>\r\n            <span class=\"investment-value\">1 980 000,00 \u20ac<\/span>\r\n        <\/div>\r\n        <div class=\"progress\">\r\n            <div class=\"progress-bar\" style=\"width:0.3%\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"investment\">\r\n        <div class=\"investment-header\">\r\n            <span class=\"investment-name\">Cemit\u00e9rios<\/span>\r\n            <span class=\"investment-value\">1 500 000,00 \u20ac<\/span>\r\n        <\/div>\r\n        <div class=\"progress\">\r\n            <div class=\"progress-bar\" style=\"width:0.2%\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"investment\">\r\n        <div class=\"investment-header\">\r\n            <span class=\"investment-name\">Educa\u00e7\u00e3o Ambiental<\/span>\r\n            <span class=\"investment-value\">1 500 000,00 \u20ac<\/span>\r\n        <\/div>\r\n        <div class=\"progress\">\r\n            <div class=\"progress-bar\" style=\"width:0.2%\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"investment\">\r\n        <div class=\"investment-header\">\r\n            <span class=\"investment-name\">Comunica\u00e7\u00e3o e Rela\u00e7\u00f5es Institucionais<\/span>\r\n            <span class=\"investment-value\">828 900,00 \u20ac<\/span>\r\n        <\/div>\r\n        <div class=\"progress\">\r\n            <div class=\"progress-bar\" style=\"width:0.1%\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"investment\">\r\n        <div class=\"investment-header\">\r\n            <span class=\"investment-name\">Juventude<\/span>\r\n            <span class=\"investment-value\">377 378,06 \u20ac<\/span>\r\n        <\/div>\r\n        <div class=\"progress\">\r\n            <div class=\"progress-bar\" style=\"width:0.05%\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"investment\">\r\n        <div class=\"investment-header\">\r\n            <span class=\"investment-name\">Mercados e Feiras<\/span>\r\n            <span class=\"investment-value\">300 000,06 \u20ac<\/span>\r\n        <\/div>\r\n        <div class=\"progress\">\r\n            <div class=\"progress-bar\" style=\"width:0.04%\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"investment\">\r\n        <div class=\"investment-header\">\r\n            <span class=\"investment-name\">Prote\u00e7\u00e3o Civil<\/span>\r\n            <span class=\"investment-value\">0,00 \u20ac<\/span>\r\n        <\/div>\r\n        <div class=\"progress\">\r\n            <div class=\"progress-bar\" style=\"width:0%\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- FINANCIAMENTO -->\r\n\r\n            <div class=\"card funding-card\">\r\n\r\n                <div class=\"funding-bar\">\r\n\r\n                    <div\r\n                        class=\"funding-segment funding-private\"\r\n                        data-name=\"Privado\"\r\n                        data-value=\"9\"\r\n                    ><\/div>\r\n\r\n                    <div\r\n                        class=\"funding-segment funding-none\"\r\n                        data-name=\"Sem Financiamento\"\r\n                        data-value=\"90\"\r\n                    ><\/div>\r\n\r\n                    <div\r\n                        class=\"funding-segment funding-public-private\"\r\n                        data-name=\"P\u00fablico-privado\"\r\n                        data-value=\"26\"\r\n                    ><\/div>\r\n\r\n                    <div\r\n                        class=\"funding-segment funding-public\"\r\n                        data-name=\"P\u00fablico\"\r\n                        data-value=\"450\"\r\n                    ><\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n                <div class=\"funding-item\"\r\n                     data-name=\"Privado\"\r\n                     data-value=\"9 (2%)\">\r\n                    Privado:\r\n                    <strong>9 (2%)<\/strong>\r\n                <\/div>\r\n\r\n                <div class=\"funding-item\"\r\n                     data-name=\"Sem Financiamento\"\r\n                     data-value=\"90 (16%)\">\r\n                    Sem Financiamento:\r\n                    <strong>90 (16%)<\/strong>\r\n                <\/div>\r\n\r\n                <div class=\"funding-item\"\r\n                     data-name=\"P\u00fablico-privado\"\r\n                     data-value=\"26 (5%)\">\r\n                    P\u00fablico-privado:\r\n                    <strong>26 (5%)<\/strong>\r\n                <\/div>\r\n\r\n                <div class=\"funding-item\"\r\n                     data-name=\"P\u00fablico\"\r\n                     data-value=\"450 (78%)\">\r\n                    P\u00fablico:\r\n                    <strong>450 (78%)<\/strong>\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<!-- TOOLTIP -->\r\n\r\n<div id=\"chartTooltip\" class=\"chart-tooltip\"><\/div>\r\n\r\n\r\n<script>\r\n(function () {\r\n\r\n    \/* =====================================================\r\n       DADOS\r\n       ===================================================== *\/\r\n\r\n    const initiatives = [\r\n        52, 9, 88, 145, 35, 35, 31,\r\n        85, 133, 169, 370, 59, 96,\r\n        23, 58, 90, 70\r\n    ];\r\n\r\n    const investments = [\r\n        169.6, 35.2, 181.8, 200.4,\r\n        9.7, 94.7, 43.4, 645.2,\r\n        1050.2, 233.7, 559.7, 404.7,\r\n        153, 34.7, 58.6, 72.6, 64.2\r\n    ];\r\n\r\n\r\n    const colours = [\r\n        \"#ef4050\",\r\n        \"#d52f43\",\r\n        \"#ff7925\",\r\n        \"#dd2166\",\r\n        \"#ffad3f\",\r\n        \"#c09b4a\",\r\n        \"#63b64d\",\r\n        \"#268db7\",\r\n        \"#1f74a7\",\r\n        \"#287f9e\",\r\n        \"#2b83a9\",\r\n        \"#2da34c\",\r\n        \"#e94752\",\r\n        \"#d73746\",\r\n        \"#f47726\",\r\n        \"#8a54a7\",\r\n        \"#1f8b58\"\r\n    ];\r\n\r\n\r\n    const svgSize = 100;\r\n    const radius = 70;\r\n    const strokeWidth = 40;\r\n\r\n    const circumference = 2 * Math.PI * radius;\r\n\r\n\r\n    \/* =====================================================\r\n       TOTAL\r\n       ===================================================== *\/\r\n\r\n    const initiativeTotal =\r\n        initiatives.reduce((a,b) => a+b, 0);\r\n\r\n    const investmentTotal =\r\n        investments.reduce((a,b) => a+b, 0);\r\n\r\n\r\n    \/* =====================================================\r\n       SVG HELPERS\r\n       ===================================================== *\/\r\n\r\n    function polar(cx, cy, r, angle) {\r\n\r\n        const radians =\r\n            (angle - 90) * Math.PI \/ 180;\r\n\r\n        return {\r\n            x: cx + r * Math.cos(radians),\r\n            y: cy + r * Math.sin(radians)\r\n        };\r\n\r\n    }\r\n\r\n\r\n    function createSegments(\r\n        containerId,\r\n        values,\r\n        type\r\n    ) {\r\n\r\n        const container =\r\n            document.getElementById(containerId);\r\n\r\n        if (!container) return;\r\n\r\n        const total =\r\n            values.reduce((a,b) => a+b, 0);\r\n\r\n        let accumulated = 0;\r\n\r\n        values.forEach((value,index) => {\r\n\r\n            const percentage = value \/ total;\r\n\r\n            const dash =\r\n                percentage * circumference;\r\n\r\n            const gap = 1.5;\r\n\r\n            const offset =\r\n                -(accumulated * circumference);\r\n\r\n            const circle =\r\n                document.createElementNS(\r\n                    \"http:\/\/www.w3.org\/2000\/svg\",\r\n                    \"circle\"\r\n                );\r\n\r\n            circle.setAttribute(\"cx\",\"100\");\r\n            circle.setAttribute(\"cy\",\"100\");\r\n            circle.setAttribute(\"r\",radius);\r\n\r\n            circle.setAttribute(\r\n                \"fill\",\r\n                \"none\"\r\n            );\r\n\r\n            circle.setAttribute(\r\n                \"stroke\",\r\n                colours[index]\r\n            );\r\n\r\n            circle.setAttribute(\r\n                \"stroke-width\",\r\n                strokeWidth\r\n            );\r\n\r\n            circle.setAttribute(\r\n                \"stroke-dasharray\",\r\n                `${Math.max(0,dash-gap)} ${circumference}`\r\n            );\r\n\r\n            circle.setAttribute(\r\n                \"stroke-dashoffset\",\r\n                offset\r\n            );\r\n\r\n            circle.setAttribute(\r\n                \"class\",\r\n                \"donut-segment\"\r\n            );\r\n\r\n            circle.dataset.sdg =\r\n                `SDG ${index + 1}`;\r\n\r\n            circle.dataset.value =\r\n                value;\r\n\r\n            circle.dataset.type =\r\n                type;\r\n\r\n            container.appendChild(circle);\r\n\r\n            accumulated += percentage;\r\n\r\n        });\r\n\r\n    }\r\n\r\n\r\n    createSegments(\r\n        \"initiativeSegments\",\r\n        initiatives,\r\n        \"initiative\"\r\n    );\r\n\r\n    createSegments(\r\n        \"investmentSegments\",\r\n        investments,\r\n        \"investment\"\r\n    );\r\n\r\n\r\n    \/* =====================================================\r\n       TOOLTIP\r\n       ===================================================== *\/\r\n\r\n    const tooltip =\r\n        document.getElementById(\"chartTooltip\");\r\n\r\n\r\n    function showTooltip(event, element) {\r\n\r\n        const sdg =\r\n            element.dataset.sdg;\r\n\r\n        const value =\r\n            Number(element.dataset.value);\r\n\r\n        const type =\r\n            element.dataset.type;\r\n\r\n        const data =\r\n            type === \"initiative\"\r\n            ? initiatives\r\n            : investments;\r\n\r\n        const total =\r\n            data.reduce((a,b) => a+b,0);\r\n\r\n        const percentage =\r\n            (value \/ total) * 100;\r\n\r\n\r\n        const formattedValue =\r\n            type === \"initiative\"\r\n            ? value.toLocaleString(\r\n                \"pt-PT\"\r\n              ) + \" iniciativas\"\r\n            : value.toLocaleString(\r\n                \"pt-PT\",\r\n                {\r\n                    minimumFractionDigits:1,\r\n                    maximumFractionDigits:1\r\n                }\r\n              ) + \" M\u20ac\";\r\n\r\n\r\n        tooltip.innerHTML = `\r\n            <div class=\"tooltip-title\">\r\n                ${sdg}\r\n            <\/div>\r\n\r\n            <div class=\"tooltip-value\">\r\n                ${formattedValue}\r\n            <\/div>\r\n\r\n            <div class=\"tooltip-value\">\r\n                ${percentage.toFixed(1)}%\r\n            <\/div>\r\n        `;\r\n\r\n\r\n        tooltip.style.display = \"block\";\r\n\r\n        positionTooltip(event);\r\n\r\n    }\r\n\r\n\r\n    function positionTooltip(event) {\r\n\r\n        let x = event.clientX + 14;\r\n        let y = event.clientY + 14;\r\n\r\n        const width =\r\n            tooltip.offsetWidth;\r\n\r\n        const height =\r\n            tooltip.offsetHeight;\r\n\r\n\r\n        if (\r\n            x + width >\r\n            window.innerWidth - 10\r\n        ) {\r\n            x =\r\n                event.clientX -\r\n                width -\r\n                14;\r\n        }\r\n\r\n\r\n        if (\r\n            y + height >\r\n            window.innerHeight - 10\r\n        ) {\r\n            y =\r\n                event.clientY -\r\n                height -\r\n                14;\r\n        }\r\n\r\n\r\n        tooltip.style.left =\r\n            x + \"px\";\r\n\r\n        tooltip.style.top =\r\n            y + \"px\";\r\n\r\n    }\r\n\r\n\r\n    function hideTooltip() {\r\n        tooltip.style.display = \"none\";\r\n    }\r\n\r\n\r\n    document\r\n        .querySelectorAll(\".donut-segment\")\r\n        .forEach(segment => {\r\n\r\n            segment.addEventListener(\r\n                \"mouseenter\",\r\n                event => {\r\n\r\n                    showTooltip(\r\n                        event,\r\n                        segment\r\n                    );\r\n\r\n                }\r\n            );\r\n\r\n\r\n            segment.addEventListener(\r\n                \"mousemove\",\r\n                event => {\r\n\r\n                    positionTooltip(event);\r\n\r\n                }\r\n            );\r\n\r\n\r\n            segment.addEventListener(\r\n                \"mouseleave\",\r\n                hideTooltip\r\n            );\r\n\r\n\r\n            segment.addEventListener(\r\n                \"click\",\r\n                () => {\r\n\r\n                    document\r\n                        .querySelectorAll(\r\n                            `.chart-svg.visible .donut-segment`\r\n                        )\r\n                        .forEach(item => {\r\n\r\n                            item.classList.remove(\r\n                                \"selected\"\r\n                            );\r\n\r\n                        });\r\n\r\n\r\n                    segment.classList.add(\r\n                        \"selected\"\r\n                    );\r\n\r\n                }\r\n            );\r\n\r\n        });\r\n\r\n\r\n    \/* =====================================================\r\n       TOGGLE\r\n       ===================================================== *\/\r\n\r\n    const toggle =\r\n        document.getElementById(\r\n            \"chartToggle\"\r\n        );\r\n\r\n    const initiativeChart =\r\n        document.getElementById(\r\n            \"initiativeChart\"\r\n        );\r\n\r\n    const investmentChart =\r\n        document.getElementById(\r\n            \"investmentChart\"\r\n        );\r\n\r\n    const heading =\r\n        document.getElementById(\r\n            \"chartHeading\"\r\n        );\r\n\r\n    const centerValue =\r\n        document.getElementById(\r\n            \"centerValue\"\r\n        );\r\n\r\n\r\n    function showInitiatives() {\r\n\r\n        toggle.classList.remove(\r\n            \"investment\"\r\n        );\r\n\r\n        initiativeChart.classList.remove(\r\n            \"hidden\"\r\n        );\r\n\r\n        initiativeChart.classList.add(\r\n            \"visible\"\r\n        );\r\n\r\n        investmentChart.classList.remove(\r\n            \"visible\"\r\n        );\r\n\r\n        investmentChart.classList.add(\r\n            \"hidden\"\r\n        );\r\n\r\n        heading.textContent =\r\n            \"Iniciativas\";\r\n\r\n        centerValue.textContent =\r\n            initiativeTotal.toLocaleString(\r\n                \"pt-PT\"\r\n            );\r\n\r\n    }\r\n\r\n\r\n    function showInvestment() {\r\n\r\n        toggle.classList.add(\r\n            \"investment\"\r\n        );\r\n\r\n        initiativeChart.classList.remove(\r\n            \"visible\"\r\n        );\r\n\r\n        initiativeChart.classList.add(\r\n            \"hidden\"\r\n        );\r\n\r\n        investmentChart.classList.remove(\r\n            \"hidden\"\r\n        );\r\n\r\n        investmentChart.classList.add(\r\n            \"visible\"\r\n        );\r\n\r\n        heading.textContent =\r\n            \"Investimento\";\r\n\r\n        centerValue.textContent =\r\n            investmentTotal.toLocaleString(\r\n                \"pt-PT\",\r\n                {\r\n                    minimumFractionDigits:1,\r\n                    maximumFractionDigits:1\r\n                }\r\n            ) + \" M\u20ac\";\r\n\r\n    }\r\n\r\n\r\n    toggle.addEventListener(\r\n        \"click\",\r\n        () => {\r\n\r\n            if (\r\n                toggle.classList.contains(\r\n                    \"investment\"\r\n                )\r\n            ) {\r\n                showInitiatives();\r\n            } else {\r\n                showInvestment();\r\n            }\r\n\r\n        }\r\n    );\r\n\r\n\r\n    toggle.addEventListener(\r\n        \"keydown\",\r\n        event => {\r\n\r\n            if (\r\n                event.key === \"Enter\" ||\r\n                event.key === \" \"\r\n            ) {\r\n\r\n                event.preventDefault();\r\n\r\n                toggle.click();\r\n\r\n            }\r\n\r\n        }\r\n    );\r\n\r\n\r\n    \/* =====================================================\r\n       BARRA DE FINANCIAMENTO\r\n       ===================================================== *\/\r\n\r\n    document\r\n        .querySelectorAll(\r\n            \".funding-segment\"\r\n        )\r\n        .forEach(segment => {\r\n\r\n            segment.addEventListener(\r\n                \"mouseenter\",\r\n                event => {\r\n\r\n                    tooltip.innerHTML = `\r\n                        <div class=\"tooltip-title\">\r\n                            ${segment.dataset.name}\r\n                        <\/div>\r\n\r\n                        <div class=\"tooltip-value\">\r\n                            ${segment.dataset.value}\r\n                            iniciativas\r\n                        <\/div>\r\n                    `;\r\n\r\n                    tooltip.style.display =\r\n                        \"block\";\r\n\r\n                    positionTooltip(event);\r\n\r\n                }\r\n            );\r\n\r\n\r\n            segment.addEventListener(\r\n                \"mousemove\",\r\n                event => {\r\n\r\n                    positionTooltip(event);\r\n\r\n                }\r\n            );\r\n\r\n\r\n            segment.addEventListener(\r\n                \"mouseleave\",\r\n                hideTooltip\r\n            );\r\n\r\n        });\r\n\r\n\r\n    \/* =====================================================\r\n       BARRAS DE INVESTIMENTO\r\n       ===================================================== *\/\r\n\r\n    document\r\n        .querySelectorAll(\r\n            \".investment\"\r\n        )\r\n        .forEach(item => {\r\n\r\n            item.addEventListener(\r\n                \"mouseenter\",\r\n                () => {\r\n\r\n                    item.style.transform =\r\n                        \"translateX(3px)\";\r\n\r\n                    item.style.transition =\r\n                        \".2s\";\r\n\r\n                }\r\n            );\r\n\r\n\r\n            item.addEventListener(\r\n                \"mouseleave\",\r\n                () => {\r\n\r\n                    item.style.transform =\r\n                        \"translateX(0)\";\r\n\r\n                }\r\n            );\r\n\r\n        });\r\n\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fac661d e-con-full e-flex e-con e-parent\" data-id=\"fac661d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cad9f08 elementor-widget elementor-widget-html\" data-id=\"cad9f08\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n\/* =========================================\r\n   BLOCO PRINCIPAL\r\n   ========================================= *\/\r\n\r\n.mf-dashboard {\r\n    width: 100%;\r\n    background: #fff;\r\n    border-radius: 0 0 20px 20px;\r\n    box-shadow: 0 2px 8px rgba(0,0,0,.10);\r\n    overflow: hidden;\r\n    font-family: Arial, Helvetica, sans-serif;\r\n    color: #111;\r\n}\r\n\r\n\/* =========================================\r\n   CABE\u00c7ALHO\r\n   ========================================= *\/\r\n\r\n.mf-header {\r\n    position: relative;\r\n    padding: 14px 16px 10px;\r\n}\r\n\r\n.mf-title {\r\n    margin: 0;\r\n    padding: 0;\r\n    font-size: 15px;\r\n    line-height: 1.2;\r\n    font-weight: 700;\r\n    letter-spacing: .15px;\r\n}\r\n\r\n.mf-info {\r\n    display: inline-flex;\r\n    width: 14px;\r\n    height: 14px;\r\n    border: 1px solid #999;\r\n    border-radius: 50%;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 9px;\r\n    color: #777;\r\n    vertical-align: 1px;\r\n    margin-left: 4px;\r\n}\r\n\r\n.mf-description {\r\n    margin: 8px 0 4px;\r\n    padding: 0;\r\n    font-size: 11px;\r\n    line-height: 1.4;\r\n    color: #777;\r\n    font-style: italic;\r\n}\r\n\r\n\/* =========================================\r\n   BOT\u00d5ES\r\n   ========================================= *\/\r\n\r\n.mf-tabs {\r\n    position: absolute;\r\n    right: 16px;\r\n    top: 9px;\r\n    display: flex;\r\n    border: 1px solid #ddd;\r\n    border-radius: 4px;\r\n    overflow: hidden;\r\n}\r\n\r\n.mf-tab {\r\n    appearance: none;\r\n    border: 0;\r\n    border-radius: 0;\r\n    background: #fff;\r\n    color: #777;\r\n    font-family: Arial, Helvetica, sans-serif;\r\n    font-size: 11px;\r\n    line-height: 1;\r\n    padding: 7px 14px;\r\n    margin: 0;\r\n    cursor: pointer;\r\n    transition: .2s ease;\r\n}\r\n\r\n.mf-tab:hover {\r\n    background: #f5f5f5;\r\n}\r\n\r\n.mf-tab.active {\r\n    background: #67b57b;\r\n    color: #fff;\r\n}\r\n\r\n\/* =========================================\r\n   PAIN\u00c9IS\r\n   ========================================= *\/\r\n\r\n.mf-panel {\r\n    display: none;\r\n    padding: 0 16px 8px;\r\n}\r\n\r\n.mf-panel.active {\r\n    display: block;\r\n}\r\n\r\n\/* =========================================\r\n   LINHAS\r\n   ========================================= *\/\r\n\r\n.mf-row {\r\n    min-height: 57px;\r\n    display: flex;\r\n    align-items: center;\r\n    background: #fafafa;\r\n    border-bottom: 1px solid #ddd;\r\n    box-sizing: border-box;\r\n}\r\n\r\n.mf-row:last-child {\r\n    border-bottom: 0;\r\n}\r\n\r\n\/* =========================================\r\n   N\u00daMERO\r\n   ========================================= *\/\r\n\r\n.mf-number {\r\n    width: 21px;\r\n    height: 21px;\r\n    min-width: 21px;\r\n    border-radius: 50%;\r\n    background: #006b61;\r\n    color: #fff;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    margin-left: 7px;\r\n    margin-right: 10px;\r\n\r\n    font-size: 11px;\r\n    font-weight: 700;\r\n}\r\n\r\n\/* =========================================\r\n   CONTE\u00daDO\r\n   ========================================= *\/\r\n\r\n.mf-content {\r\n    flex: 1;\r\n    min-width: 0;\r\n    padding: 7px 5px 7px 0;\r\n}\r\n\r\n.mf-name {\r\n    margin: 0 0 4px;\r\n    font-size: 14px;\r\n    line-height: 1.25;\r\n    font-weight: 400;\r\n}\r\n\r\n.mf-sub {\r\n    margin: 0;\r\n    font-size: 11px;\r\n    line-height: 1.2;\r\n    color: #777;\r\n}\r\n\r\n\/* =========================================\r\n   ODS\r\n   ========================================= *\/\r\n\r\n.mf-ods {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 3px;\r\n    margin-left: 8px;\r\n    padding-right: 7px;\r\n    flex-shrink: 0;\r\n}\r\n\r\n.mf-ods-item {\r\n    width: 17px;\r\n    height: 17px;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    color: #fff;\r\n    font-size: 7px;\r\n    font-weight: 700;\r\n    line-height: 1;\r\n}\r\n\r\n\/* Cores ODS *\/\r\n\r\n.ods-4 {\r\n    background: #c5192d;\r\n}\r\n\r\n.ods-5 {\r\n    background: #ff3a21;\r\n}\r\n\r\n.ods-8 {\r\n    background: #a21942;\r\n}\r\n\r\n.ods-9 {\r\n    background: #f36d25;\r\n}\r\n\r\n.ods-10 {\r\n    background: #dd1367;\r\n}\r\n\r\n.ods-11 {\r\n    background: #fd6925;\r\n}\r\n\r\n.ods-12 {\r\n    background: #bf8b2e;\r\n}\r\n\r\n.ods-13 {\r\n    background: #3f7e44;\r\n}\r\n\r\n.ods-15 {\r\n    background: #56c02b;\r\n}\r\n\r\n.ods-16 {\r\n    background: #00689d;\r\n}\r\n\r\n.mf-more {\r\n    color: #777;\r\n    font-size: 9px;\r\n    margin-left: 1px;\r\n    white-space: nowrap;\r\n}\r\n\r\n\/* =========================================\r\n   MOBILE\r\n   ========================================= *\/\r\n\r\n@media (max-width: 767px) {\r\n\r\n    .mf-header {\r\n        padding: 14px 12px 12px;\r\n    }\r\n\r\n    .mf-title {\r\n        font-size: 14px;\r\n        padding-right: 0;\r\n    }\r\n\r\n    .mf-tabs {\r\n        position: relative;\r\n        top: auto;\r\n        right: auto;\r\n        margin-top: 12px;\r\n        width: max-content;\r\n    }\r\n\r\n    .mf-panel {\r\n        padding: 0 8px 5px;\r\n    }\r\n\r\n    .mf-row {\r\n        min-height: 62px;\r\n    }\r\n\r\n    .mf-number {\r\n        margin-left: 5px;\r\n        margin-right: 7px;\r\n    }\r\n\r\n    .mf-name {\r\n        font-size: 12px;\r\n    }\r\n\r\n    .mf-sub {\r\n        font-size: 10px;\r\n    }\r\n\r\n    .mf-ods {\r\n        gap: 2px;\r\n        padding-right: 4px;\r\n    }\r\n\r\n    .mf-ods-item {\r\n        width: 15px;\r\n        height: 15px;\r\n        font-size: 6px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n\r\n<div class=\"mf-dashboard\">\r\n\r\n    <!-- =====================================\r\n         CABE\u00c7ALHO\r\n         ===================================== -->\r\n\r\n    <div class=\"mf-header\">\r\n\r\n        <h3 class=\"mf-title\">\r\n            DISTRIBUI\u00c7\u00c3O POR INICIATIVAS RELEVANTES\r\n            <span class=\"mf-info\">i<\/span>\r\n        <\/h3>\r\n\r\n        <!-- BOT\u00d5ES -->\r\n\r\n        <div class=\"mf-tabs\">\r\n\r\n            <button\r\n                type=\"button\"\r\n                class=\"mf-tab active\"\r\n                data-target=\"mf-impacto\">\r\n                Impacto\r\n            <\/button>\r\n\r\n            <button\r\n                type=\"button\"\r\n                class=\"mf-tab\"\r\n                data-target=\"mf-investimento\">\r\n                Investimento\r\n            <\/button>\r\n\r\n        <\/div>\r\n\r\n        <!-- DESCRI\u00c7\u00c3O IMPACTO -->\r\n\r\n        <p class=\"mf-description mf-description-impacto\">\r\n            Estas iniciativas t\u00eam em m\u00e9dia 3.8 ODS cada.\r\n            \"Conselho Municipal de Juventude de Mafra\" tem o maior alcance de sustentabilidade.\r\n        <\/p>\r\n\r\n        <!-- DESCRI\u00c7\u00c3O INVESTIMENTO -->\r\n\r\n        <p class=\"mf-description mf-description-investimento\" style=\"display:none;\">\r\n            Estas 5 iniciativas representam 16.1M investimento combinado.\r\n        <\/p>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- =====================================\r\n         PAINEL IMPACTO\r\n         ===================================== -->\r\n\r\n    <div id=\"mf-impacto\" class=\"mf-panel active\">\r\n\r\n\r\n        <!-- 1 -->\r\n\r\n        <div class=\"mf-row\">\r\n\r\n            <div class=\"mf-number\">1<\/div>\r\n\r\n            <div class=\"mf-content\">\r\n\r\n                <div class=\"mf-name\">\r\n                    Conselho Municipal de Juventude de Mafra\r\n                <\/div>\r\n\r\n                <div class=\"mf-sub\">\r\n                    5 objetivos ODS\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"mf-ods\">\r\n                <span class=\"mf-ods-item ods-4\">4<\/span>\r\n                <span class=\"mf-ods-item ods-10\">10<\/span>\r\n                <span class=\"mf-ods-item ods-8\">8<\/span>\r\n                <span class=\"mf-more\">+2<\/span>\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- 2 -->\r\n\r\n        <div class=\"mf-row\">\r\n\r\n            <div class=\"mf-number\">2<\/div>\r\n\r\n            <div class=\"mf-content\">\r\n\r\n                <div class=\"mf-name\">\r\n                    Plano Municipal para a Juventude\r\n                <\/div>\r\n\r\n                <div class=\"mf-sub\">\r\n                    5 objetivos ODS\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"mf-ods\">\r\n                <span class=\"mf-ods-item ods-15\">15<\/span>\r\n                <span class=\"mf-ods-item ods-11\">11<\/span>\r\n                <span class=\"mf-ods-item ods-10\">10<\/span>\r\n                <span class=\"mf-more\">+2<\/span>\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- 3 -->\r\n\r\n        <div class=\"mf-row\">\r\n\r\n            <div class=\"mf-number\">3<\/div>\r\n\r\n            <div class=\"mf-content\">\r\n\r\n                <div class=\"mf-name\">\r\n                    Programa (Inter)municipal de Promo\u00e7\u00e3o do Sucesso Escolar (PIPSE)\r\n                <\/div>\r\n\r\n                <div class=\"mf-sub\">\r\n                    3 objetivos ODS\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"mf-ods\">\r\n                <span class=\"mf-ods-item ods-4\">4<\/span>\r\n                <span class=\"mf-ods-item ods-11\">11<\/span>\r\n                <span class=\"mf-ods-item ods-10\">10<\/span>\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- 4 -->\r\n\r\n        <div class=\"mf-row\">\r\n\r\n            <div class=\"mf-number\">4<\/div>\r\n\r\n            <div class=\"mf-content\">\r\n\r\n                <div class=\"mf-name\">\r\n                    Programa ArrenDar - Apoio ao arrendamento\r\n                <\/div>\r\n\r\n                <div class=\"mf-sub\">\r\n                    3 objetivos ODS\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"mf-ods\">\r\n                <span class=\"mf-ods-item ods-4\">4<\/span>\r\n                <span class=\"mf-ods-item ods-10\">10<\/span>\r\n                <span class=\"mf-ods-item ods-11\">11<\/span>\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- 5 -->\r\n\r\n        <div class=\"mf-row\">\r\n\r\n            <div class=\"mf-number\">5<\/div>\r\n\r\n            <div class=\"mf-content\">\r\n\r\n                <div class=\"mf-name\">\r\n                    Fornecimento de Cal\u00e7ado de Seguran\u00e7a\r\n                <\/div>\r\n\r\n                <div class=\"mf-sub\">\r\n                    3 objetivos ODS\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"mf-ods\">\r\n                <span class=\"mf-ods-item ods-4\">4<\/span>\r\n                <span class=\"mf-ods-item ods-15\">15<\/span>\r\n                <span class=\"mf-ods-item ods-11\">11<\/span>\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- =====================================\r\n         PAINEL INVESTIMENTO\r\n         ===================================== -->\r\n\r\n    <div id=\"mf-investimento\" class=\"mf-panel\">\r\n\r\n\r\n        <!-- 1 -->\r\n\r\n        <div class=\"mf-row\">\r\n\r\n            <div class=\"mf-number\">1<\/div>\r\n\r\n            <div class=\"mf-content\">\r\n\r\n                <div class=\"mf-name\">\r\n                    Centro Multiusos do Concelho de Mafra\r\n                <\/div>\r\n\r\n                <div class=\"mf-sub\">\r\n                    10 000 000,00 \u20ac\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"mf-ods\">\r\n                <span class=\"mf-ods-item ods-11\">11<\/span>\r\n                <span class=\"mf-ods-item ods-16\">16<\/span>\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- 2 -->\r\n\r\n        <div class=\"mf-row\">\r\n\r\n            <div class=\"mf-number\">2<\/div>\r\n\r\n            <div class=\"mf-content\">\r\n\r\n                <div class=\"mf-name\">\r\n                    Amplia\u00e7\u00e3o da Escola B\u00e1sica e Secund\u00e1ria Prof. Armando Lucena - Malveira\r\n                <\/div>\r\n\r\n                <div class=\"mf-sub\">\r\n                    2 579 902,49 \u20ac\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"mf-ods\">\r\n                <span class=\"mf-ods-item ods-4\">4<\/span>\r\n                <span class=\"mf-ods-item ods-9\">9<\/span>\r\n                <span class=\"mf-ods-item ods-10\">10<\/span>\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- 3 -->\r\n\r\n        <div class=\"mf-row\">\r\n\r\n            <div class=\"mf-number\">3<\/div>\r\n\r\n            <div class=\"mf-content\">\r\n\r\n                <div class=\"mf-name\">\r\n                    Cria\u00e7\u00e3o de uma Ciclovia entre a Quinta de P\u00eavides, Quinta da Figueira Branca, Quinta de Santa B\u00e1rbara e o Parque Intermodal Escolas\r\n                <\/div>\r\n\r\n                <div class=\"mf-sub\">\r\n                    1 400 000,00 \u20ac\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"mf-ods\">\r\n                <span class=\"mf-ods-item ods-10\">10<\/span>\r\n                <span class=\"mf-ods-item ods-11\">11<\/span>\r\n                <span class=\"mf-ods-item ods-13\">13<\/span>\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- 4 -->\r\n\r\n        <div class=\"mf-row\">\r\n\r\n            <div class=\"mf-number\">4<\/div>\r\n\r\n            <div class=\"mf-content\">\r\n\r\n                <div class=\"mf-name\">\r\n                    Programa (Inter)municipal de Promo\u00e7\u00e3o do Sucesso Escolar (PIPSE)\r\n                <\/div>\r\n\r\n                <div class=\"mf-sub\">\r\n                    1 111 134,79 \u20ac\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"mf-ods\">\r\n                <span class=\"mf-ods-item ods-4\">4<\/span>\r\n                <span class=\"mf-ods-item ods-11\">11<\/span>\r\n                <span class=\"mf-ods-item ods-10\">10<\/span>\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- 5 -->\r\n\r\n        <div class=\"mf-row\">\r\n\r\n            <div class=\"mf-number\">5<\/div>\r\n\r\n            <div class=\"mf-content\">\r\n\r\n                <div class=\"mf-name\">\r\n                    Constru\u00e7\u00e3o de edif\u00edcio com utiliza\u00e7\u00e3o de uma percentagem de 60-70% de materiais reciclados\r\n                <\/div>\r\n\r\n                <div class=\"mf-sub\">\r\n                    1 000 000,00 \u20ac\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"mf-ods\">\r\n                <span class=\"mf-ods-item ods-11\">11<\/span>\r\n                <span class=\"mf-ods-item ods-12\">12<\/span>\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function () {\r\n\r\n    const dashboard = document.querySelector(\".mf-dashboard\");\r\n\r\n    if (!dashboard) return;\r\n\r\n    const tabs = dashboard.querySelectorAll(\".mf-tab\");\r\n    const panels = dashboard.querySelectorAll(\".mf-panel\");\r\n\r\n    const descricaoImpacto =\r\n        dashboard.querySelector(\".mf-description-impacto\");\r\n\r\n    const descricaoInvestimento =\r\n        dashboard.querySelector(\".mf-description-investimento\");\r\n\r\n\r\n    tabs.forEach(function (tab) {\r\n\r\n        tab.addEventListener(\"click\", function () {\r\n\r\n            const target = tab.getAttribute(\"data-target\");\r\n\r\n\r\n            \/* BOT\u00d5ES *\/\r\n\r\n            tabs.forEach(function (item) {\r\n                item.classList.remove(\"active\");\r\n            });\r\n\r\n            tab.classList.add(\"active\");\r\n\r\n\r\n            \/* PAIN\u00c9IS *\/\r\n\r\n            panels.forEach(function (panel) {\r\n                panel.classList.remove(\"active\");\r\n            });\r\n\r\n            const painelActivo =\r\n                dashboard.querySelector(\"#\" + target);\r\n\r\n            if (painelActivo) {\r\n                painelActivo.classList.add(\"active\");\r\n            }\r\n\r\n\r\n            \/* DESCRI\u00c7\u00c3O *\/\r\n\r\n            if (target === \"mf-impacto\") {\r\n\r\n                descricaoImpacto.style.display = \"block\";\r\n                descricaoInvestimento.style.display = \"none\";\r\n\r\n            } else {\r\n\r\n                descricaoImpacto.style.display = \"none\";\r\n                descricaoInvestimento.style.display = \"block\";\r\n\r\n            }\r\n\r\n        });\r\n\r\n    });\r\n\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8427c46 elementor-widget elementor-widget-html\" data-id=\"8427c46\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n.pipeline-card {\r\n    width: 100%;\r\n    background: #ffffff;\r\n    border: 1px solid #e5e5e5;\r\n    border-radius: 22px;\r\n    padding: 20px 18px 18px;\r\n    box-sizing: border-box;\r\n    font-family: Arial, Helvetica, sans-serif;\r\n    overflow: hidden;\r\n}\r\n\r\n.pipeline-header {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    margin-bottom: 5px;\r\n}\r\n\r\n.pipeline-title {\r\n    color: #526477;\r\n    font-size: 13px;\r\n    font-weight: 700;\r\n    text-transform: uppercase;\r\n    letter-spacing: .2px;\r\n}\r\n\r\n.pipeline-info {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: 12px;\r\n    height: 12px;\r\n    margin-left: 3px;\r\n    border: 1px solid #9ba5ae;\r\n    border-radius: 50%;\r\n    color: #7d8994;\r\n    font-size: 8px;\r\n    vertical-align: middle;\r\n}\r\n\r\n.pipeline-total {\r\n    color: #78899a;\r\n    font-size: 12px;\r\n}\r\n\r\n.pipeline-chart {\r\n    width: 100%;\r\n    overflow-x: auto;\r\n    overflow-y: hidden;\r\n}\r\n\r\n.pipeline-chart svg {\r\n    display: block;\r\n    width: 100%;\r\n    min-width: 850px;\r\n    height: auto;\r\n}\r\n\r\n.pipeline-grid {\r\n    stroke: #d9dee3;\r\n    stroke-width: 1;\r\n}\r\n\r\n.pipeline-axis {\r\n    stroke: #68727c;\r\n    stroke-width: 1.2;\r\n}\r\n\r\n.pipeline-y-label {\r\n    fill: #1f4b72;\r\n    font-size: 12px;\r\n}\r\n\r\n.pipeline-gate-label {\r\n    fill: #31506c;\r\n    font-size: 11px;\r\n}\r\n\r\n.pipeline-value {\r\n    fill: #35516a;\r\n    font-size: 12px;\r\n}\r\n\r\n.pipeline-vertical {\r\n    stroke: #e1e4e7;\r\n    stroke-width: 2;\r\n}\r\n\r\n.pipeline-dot {\r\n    filter: drop-shadow(0 1px 2px rgba(0,0,0,.10));\r\n}\r\n\r\n.pipeline-legend-title {\r\n    fill: #111111;\r\n    font-size: 14px;\r\n}\r\n\r\n.pipeline-legend-value {\r\n    fill: #71808d;\r\n    font-size: 12px;\r\n}\r\n\r\n@media (max-width: 767px) {\r\n\r\n    .pipeline-card {\r\n        border-radius: 16px;\r\n        padding: 16px 12px;\r\n    }\r\n\r\n    .pipeline-title {\r\n        font-size: 11px;\r\n    }\r\n\r\n    .pipeline-total {\r\n        font-size: 10px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<div class=\"pipeline-card\">\r\n\r\n    <div class=\"pipeline-header\">\r\n\r\n        <div class=\"pipeline-title\">\r\n            PIPELINE FINANCEIRO\r\n            <span class=\"pipeline-info\">i<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"pipeline-total\" id=\"pipelineTotal\">\r\n            Total: 0 M \u20ac\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n    <div class=\"pipeline-chart\">\r\n\r\n        <svg\r\n            id=\"pipelineSVG\"\r\n            viewBox=\"0 0 1080 430\"\r\n            xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n        <\/svg>\r\n\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\n(function () {\r\n\r\n    \/* =====================================================\r\n       DADOS DO PIPELINE\r\n       ALTERA APENAS ESTES VALORES\r\n    ===================================================== *\/\r\n\r\n    const pipelineData = [\r\n        {\r\n            gate: \"G0\",\r\n            name: \"Ideia\",\r\n            value: 145,\r\n            color: \"#9fa2a3\"\r\n        },\r\n        {\r\n            gate: \"G1\",\r\n            name: \"Conceito\",\r\n            value: 34,\r\n            color: \"#a9d6ae\"\r\n        },\r\n        {\r\n            gate: \"G2\",\r\n            name: \"Estudo de Detalhe\",\r\n            value: 587,\r\n            color: \"#66b875\"\r\n        },\r\n        {\r\n            gate: \"G3\",\r\n            name: \"Defini\u00e7\u00e3o e Negocia\u00e7\u00e3o\",\r\n            value: 290,\r\n            color: \"#3d984b\"\r\n        },\r\n        {\r\n            gate: \"G4\",\r\n            name: \"Implementa\u00e7\u00e3o\",\r\n            value: 131,\r\n            color: \"#287538\"\r\n        },\r\n        {\r\n            gate: \"G5\",\r\n            name: \"Explora\u00e7\u00e3o\",\r\n            value: 162,\r\n            color: \"#185b27\"\r\n        }\r\n    ];\r\n\r\n\r\n    \/* =====================================================\r\n       CONFIGURA\u00c7\u00c3O\r\n    ===================================================== *\/\r\n\r\n    const svg = document.getElementById(\"pipelineSVG\");\r\n    const totalElement = document.getElementById(\"pipelineTotal\");\r\n\r\n    const chartLeft = 95;\r\n    const chartRight = 815;\r\n\r\n    const chartTop = 65;\r\n    const chartBottom = 341;\r\n\r\n    const chartHeight = chartBottom - chartTop;\r\n\r\n    const maxValue = 600;\r\n\r\n    const gridValues = [\r\n        600,\r\n        500,\r\n        400,\r\n        300,\r\n        200,\r\n        100,\r\n        0\r\n    ];\r\n\r\n\r\n    \/* =====================================================\r\n       FUN\u00c7\u00c3O PARA CRIAR ELEMENTOS SVG\r\n    ===================================================== *\/\r\n\r\n    function createSVG(type, attributes) {\r\n\r\n        const element = document.createElementNS(\r\n            \"http:\/\/www.w3.org\/2000\/svg\",\r\n            type\r\n        );\r\n\r\n        Object.keys(attributes).forEach(function (key) {\r\n            element.setAttribute(key, attributes[key]);\r\n        });\r\n\r\n        return element;\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       FUN\u00c7\u00c3O PARA ADICIONAR TEXTO\r\n    ===================================================== *\/\r\n\r\n    function addText(\r\n        text,\r\n        x,\r\n        y,\r\n        className,\r\n        anchor\r\n    ) {\r\n\r\n        const element = createSVG(\"text\", {\r\n            x: x,\r\n            y: y,\r\n            class: className,\r\n            \"text-anchor\": anchor || \"middle\"\r\n        });\r\n\r\n        element.textContent = text;\r\n\r\n        svg.appendChild(element);\r\n\r\n        return element;\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       FORMATA\u00c7\u00c3O DOS VALORES\r\n    ===================================================== *\/\r\n\r\n    function formatValue(value) {\r\n\r\n        return value.toLocaleString(\"pt-PT\") + \" M \u20ac\";\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       POSI\u00c7\u00c3O VERTICAL\r\n    ===================================================== *\/\r\n\r\n    function getY(value) {\r\n\r\n        return chartBottom -\r\n            ((value \/ maxValue) * chartHeight);\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       LIMPA O SVG\r\n    ===================================================== *\/\r\n\r\n    svg.innerHTML = \"\";\r\n\r\n\r\n    \/* =====================================================\r\n       GRELHA HORIZONTAL\r\n    ===================================================== *\/\r\n\r\n    gridValues.forEach(function (value) {\r\n\r\n        const y = getY(value);\r\n\r\n        const line = createSVG(\"line\", {\r\n            x1: chartLeft,\r\n            y1: y,\r\n            x2: chartRight,\r\n            y2: y,\r\n            class:\r\n                value === 0\r\n                    ? \"pipeline-axis\"\r\n                    : \"pipeline-grid\"\r\n        });\r\n\r\n        svg.appendChild(line);\r\n\r\n        addText(\r\n            value === 0\r\n                ? \"0 \u20ac\"\r\n                : value + \" M \u20ac\",\r\n            78,\r\n            y + 4,\r\n            \"pipeline-y-label\",\r\n            \"end\"\r\n        );\r\n\r\n    });\r\n\r\n\r\n    \/* =====================================================\r\n       POSI\u00c7\u00c3O HORIZONTAL DOS GATES\r\n    ===================================================== *\/\r\n\r\n    const step =\r\n        (chartRight - chartLeft) \/\r\n        (pipelineData.length - 1);\r\n\r\n\r\n    \/* =====================================================\r\n       DESENHA OS GATES\r\n    ===================================================== *\/\r\n\r\n    pipelineData.forEach(function (item, index) {\r\n\r\n        const x =\r\n            chartLeft +\r\n            (step * index);\r\n\r\n        const y =\r\n            getY(item.value);\r\n\r\n\r\n        \/* Linha vertical *\/\r\n\r\n        const verticalLine = createSVG(\"line\", {\r\n            x1: x,\r\n            y1: chartBottom,\r\n            x2: x,\r\n            y2: y,\r\n            class: \"pipeline-vertical\"\r\n        });\r\n\r\n        svg.appendChild(verticalLine);\r\n\r\n\r\n        \/* Tamanho do c\u00edrculo *\/\r\n\r\n        const radius =\r\n            5 +\r\n            (item.value \/ maxValue) * 7;\r\n\r\n\r\n        \/* C\u00edrculo *\/\r\n\r\n        const circle = createSVG(\"circle\", {\r\n            cx: x,\r\n            cy: y,\r\n            r: radius,\r\n            fill: item.color,\r\n            class: \"pipeline-dot\"\r\n        });\r\n\r\n        svg.appendChild(circle);\r\n\r\n\r\n        \/* Valor acima do c\u00edrculo *\/\r\n\r\n        addText(\r\n            formatValue(item.value),\r\n            x,\r\n            y - radius - 8,\r\n            \"pipeline-value\",\r\n            \"middle\"\r\n        );\r\n\r\n\r\n        \/* Nome do Gate *\/\r\n\r\n        addText(\r\n            item.gate,\r\n            x,\r\n            chartBottom + 19,\r\n            \"pipeline-gate-label\",\r\n            \"middle\"\r\n        );\r\n\r\n    });\r\n\r\n\r\n    \/* =====================================================\r\n       CALCULA O TOTAL\r\n    ===================================================== *\/\r\n\r\n    const total =\r\n        pipelineData.reduce(\r\n            function (sum, item) {\r\n                return sum + item.value;\r\n            },\r\n            0\r\n        );\r\n\r\n\r\n    \/* =====================================================\r\n       FORMATA O TOTAL\r\n    ===================================================== *\/\r\n\r\n    function formatTotal(value) {\r\n\r\n        if (value >= 1000) {\r\n\r\n            return (\r\n                (value \/ 1000)\r\n                    .toFixed(1)\r\n                    .replace(\".\", \",\")\r\n                + \" mil M \u20ac\"\r\n            );\r\n\r\n        }\r\n\r\n        return value + \" M \u20ac\";\r\n\r\n    }\r\n\r\n\r\n    totalElement.textContent =\r\n        \"Total: \" + formatTotal(total);\r\n\r\n\r\n    \/* =====================================================\r\n       LEGENDA\r\n    ===================================================== *\/\r\n\r\n    const legendX = 860;\r\n    const legendStartY = 40;\r\n    const legendStep = 63;\r\n\r\n\r\n    pipelineData.forEach(function (item, index) {\r\n\r\n        const y =\r\n            legendStartY +\r\n            (index * legendStep);\r\n\r\n\r\n        \/* Bolinha da legenda *\/\r\n\r\n        const legendCircle = createSVG(\r\n            \"circle\",\r\n            {\r\n                cx: legendX,\r\n                cy: y,\r\n                r: 6,\r\n                fill: item.color\r\n            }\r\n        );\r\n\r\n        svg.appendChild(legendCircle);\r\n\r\n\r\n        \/* =================================================\r\n           QUEBRA AUTOM\u00c1TICA DO NOME\r\n        ================================================= *\/\r\n\r\n        const words =\r\n            item.name.split(\" \");\r\n\r\n        let line1 = \"\";\r\n        let line2 = \"\";\r\n\r\n        words.forEach(function (word) {\r\n\r\n            const test =\r\n                (line1 + \" \" + word).trim();\r\n\r\n            if (test.length <= 21) {\r\n\r\n                line1 = test;\r\n\r\n            } else {\r\n\r\n                line2 =\r\n                    (line2 + \" \" + word).trim();\r\n\r\n            }\r\n\r\n        });\r\n\r\n\r\n        \/* Texto \"Gate X - ...\" *\/\r\n\r\n        addText(\r\n            \"Gate \" +\r\n            item.gate.replace(\"G\", \"\") +\r\n            \" - \" +\r\n            line1,\r\n            legendX + 15,\r\n            y + 5,\r\n            \"pipeline-legend-title\",\r\n            \"start\"\r\n        );\r\n\r\n\r\n        \/* Segunda linha *\/\r\n\r\n        if (line2) {\r\n\r\n            addText(\r\n                line2,\r\n                legendX + 15,\r\n                y + 23,\r\n                \"pipeline-legend-title\",\r\n                \"start\"\r\n            );\r\n\r\n            addText(\r\n                formatValue(item.value),\r\n                legendX + 15,\r\n                y + 42,\r\n                \"pipeline-legend-value\",\r\n                \"start\"\r\n            );\r\n\r\n        } else {\r\n\r\n            addText(\r\n                formatValue(item.value),\r\n                legendX + 15,\r\n                y + 24,\r\n                \"pipeline-legend-value\",\r\n                \"start\"\r\n            );\r\n\r\n        }\r\n\r\n    });\r\n\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dda26c4 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"dda26c4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/odslab.cm-mafra.pt\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Voltar \u00e0 p\u00e1gina inicial<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2f69cfe elementor-widget elementor-widget-html\" data-id=\"2f69cfe\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<script>\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n\r\n    const botao = document.getElementById('botao-graficos');\r\n    const iniciativas = document.getElementById('grafico-iniciativas');\r\n    const investimento = document.getElementById('grafico-investimento');\r\n\r\n    if (!botao || !iniciativas || !investimento) return;\r\n\r\n    const texto = botao.querySelector('.elementor-button-text');\r\n\r\n    \/\/ Estado inicial\r\n    investimento.style.display = 'none';\r\n\r\n    \/\/ Preparar anima\u00e7\u00f5es\r\n    iniciativas.style.transition = 'opacity 0.35s ease, transform 0.35s ease';\r\n    investimento.style.transition = 'opacity 0.35s ease, transform 0.35s ease';\r\n\r\n    botao.addEventListener('click', function (e) {\r\n\r\n        e.preventDefault();\r\n\r\n        if (investimento.style.display === 'none') {\r\n\r\n            \/\/ Sai Iniciativas\r\n            iniciativas.style.opacity = '0';\r\n            iniciativas.style.transform = 'translateY(10px)';\r\n\r\n            setTimeout(function () {\r\n\r\n                iniciativas.style.display = 'none';\r\n\r\n                \/\/ Entra Investimento\r\n                investimento.style.display = 'block';\r\n                investimento.style.opacity = '0';\r\n                investimento.style.transform = 'translateY(10px)';\r\n\r\n                requestAnimationFrame(function () {\r\n                    investimento.style.opacity = '1';\r\n                    investimento.style.transform = 'translateY(0)';\r\n                });\r\n\r\n            }, 200);\r\n\r\n            texto.textContent = 'Iniciativas';\r\n\r\n        } else {\r\n\r\n            \/\/ Sai Investimento\r\n            investimento.style.opacity = '0';\r\n            investimento.style.transform = 'translateY(10px)';\r\n\r\n            setTimeout(function () {\r\n\r\n                investimento.style.display = 'none';\r\n\r\n                \/\/ Entra Iniciativas\r\n                iniciativas.style.display = 'block';\r\n                iniciativas.style.opacity = '0';\r\n                iniciativas.style.transform = 'translateY(10px)';\r\n\r\n                requestAnimationFrame(function () {\r\n                    iniciativas.style.opacity = '1';\r\n                    iniciativas.style.transform = 'translateY(0)';\r\n                });\r\n\r\n            }, 200);\r\n\r\n            texto.textContent = 'Investimento';\r\n        }\r\n\r\n    });\r\n\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1e605f1 e-flex e-con-boxed e-con e-parent\" data-id=\"1e605f1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6a0c356 elementor-widget elementor-widget-html\" data-id=\"6a0c356\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n\/* =====================================================\r\n   PROGRESS BARS\r\n   APENAS TEXTO\r\n   N\u00c3O ALTERA A BARRA\r\n   ===================================================== *\/\r\n\r\n\/* Nome da \u00e1rea *\/\r\n.area-progress .elementor-progress-text {\r\n    color: #374151 !important;\r\n    font-size: 12px !important;\r\n    font-weight: 500 !important;\r\n    text-align: left !important;\r\n}\r\n\r\n\/* Valor *\/\r\n.area-progress .elementor-progress-percentage {\r\n    color: #6b7280 !important;\r\n    font-size: 11px !important;\r\n    font-weight: 500 !important;\r\n    text-align: right !important;\r\n}\r\n\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7ca74e6 e-flex e-con-boxed e-con e-parent\" data-id=\"7ca74e6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0942978 elementor-widget elementor-widget-text-editor\" data-id=\"0942978\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-36d1fc6 e-flex e-con-boxed e-con e-parent\" data-id=\"36d1fc6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\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>\u2726 Total Iniciativas 1 548 \u25a4 Total Investimento 4 011,4 M\u20ac \u2713 \u00cdndice ODS 97% ! Estado da execu\u00e7\u00e3o 75% Distribui\u00e7\u00e3o por ODS Distribui\u00e7\u00e3o das iniciativas e do investimento pelos 17 Objetivos de Desenvolvimento Sustent\u00e1vel. 1 \u2014 Tornar cidades inclusivas e sustent\u00e1veis \u2022 370 iniciativas 2 \u2014 Reduzir a desigualdade \u2022 169 iniciativas 3 \u2014&#8230;<\/p>\n","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"footnotes":""},"class_list":["post-23261","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/odslab.cm-mafra.pt\/wp-json\/wp\/v2\/pages\/23261","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/odslab.cm-mafra.pt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/odslab.cm-mafra.pt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/odslab.cm-mafra.pt\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/odslab.cm-mafra.pt\/wp-json\/wp\/v2\/comments?post=23261"}],"version-history":[{"count":203,"href":"https:\/\/odslab.cm-mafra.pt\/wp-json\/wp\/v2\/pages\/23261\/revisions"}],"predecessor-version":[{"id":23570,"href":"https:\/\/odslab.cm-mafra.pt\/wp-json\/wp\/v2\/pages\/23261\/revisions\/23570"}],"wp:attachment":[{"href":"https:\/\/odslab.cm-mafra.pt\/wp-json\/wp\/v2\/media?parent=23261"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}