{"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-10-08T16:33:58","modified_gmt":"2026-10-08T15:33:58","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-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-c0be3ab elementor-align-center elementor-widget elementor-widget-button\" data-id=\"c0be3ab\" 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<div class=\"elementor-element elementor-element-b23808b e-flex e-con-boxed e-con e-parent\" data-id=\"b23808b\" 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>DISTRIBUI\u00c7\u00c3O POR INICIATIVAS RELEVANTES i Impacto Investimento Estas iniciativas t\u00eam em m\u00e9dia 3.8 ODS cada. &#8220;Conselho Municipal de Juventude de Mafra&#8221; tem o maior alcance de sustentabilidade. Estas 5 iniciativas representam 16.1M investimento combinado. 1 Conselho Municipal de Juventude de Mafra 5 objetivos ODS 4 10 8 +2 2 Plano Municipal para a Juventude 5&#8230;<\/p>\n","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"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":205,"href":"https:\/\/odslab.cm-mafra.pt\/wp-json\/wp\/v2\/pages\/23261\/revisions"}],"predecessor-version":[{"id":23580,"href":"https:\/\/odslab.cm-mafra.pt\/wp-json\/wp\/v2\/pages\/23261\/revisions\/23580"}],"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}]}}