<script type="text/javascript" src="https://staticportaldaindustria.azureedge.net/static/js/dirigentes_empregados_v3.js"></script>
<script>
    [...document.querySelectorAll(".tab-content .tab-pane")].forEach((panel)=>{
        if (panel.classList.contains("active"))
            return;
        const tab = document.querySelector(`li.active>[aria-controls="${panel.id}"]`);
        if (tab) {
            panel.classList.add("active");
            return;
        }
    }
    );
    (function($){
    $('a.tab-link').click(function(e) {
        e.preventDefault();
        $(this).tab('show');
    });
    })(jQuery); 
</script>
<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        const $departamento = document.querySelector(".departamento-regional-select.auto-open")
        $departamento && $departamento.addEventListener("change", function(evt) {
            const value = this.value || this.options[this.selectedIndex].value;
            const selected = this.querySelector(`[value="${value}"]`);
            window.open(value, selected.dataset.target);
        });

        const btnOpenUrl = document.querySelector(".departamento-regional-mapa .btn-open-url");
        btnOpenUrl && btnOpenUrl.addEventListener("click", function(event) {
            const $select = this.parentElement.querySelector(".departamento-regional-select");
            const selected = $select.querySelectorAll("option")[$select.selectedIndex];
            const target = selected.dataset.target;

            $select && target && window.open($select.value, target)
        });
    });
</script>
<script>
    (function($){
    $(function() {
        $('.dropdown-toggle').dropdown();

        // Endpoints
        const apiDados = ({ano, departamento, entidade})=>`https://sistematransparenciaweb.com.br/api-atendimento-social/publico/atendimento-social?ano=${ano}&departamento=${departamento}&entidade=${entidade}`;
        const apiDownload = ({ano, departamento, entidade, formato})=>`https://sistematransparenciaweb.com.br/api-atendimento-social/publico/atendimento-social/export?ano=${ano}&departamento=${departamento}&entidade=${entidade}&formatoExportacao=${formato}`;

        // Global State
        var state = {
            modulo: null,
            ano: null,
            sigla: null,
            departamento: '',
            regiao: 'BRASIL',
            data: null,
        }

        const getStateFromKey = (key)=>{
            return state[key];
        }

        const getState = ()=>{
            return Object.assign({}, state);
        }

        const setStateFromKey = (key,newState,callback)=>{
            const oldState = state[key];
            state[key] = newState;
            callback && callback(oldState, newState);
        }

        const setState = (newState,callback)=>{
            const oldState = Object.assign({}, state);
            for (let[key,value] of Object.entries(newState)) {
                setStateFromKey(key, value);
            }
            callback && callback(oldState, Object.assign({}, state));
        }

        // Renderização
        const limparHtml = ($owner,selector='')=>{
            $owner.querySelector(`${selector} table tbody`).innerHTML = "";
            $owner.querySelector(".planejamento-estrategico-rodape").innerHTML = "";
        }

        const renderTableRow = ({row=[], spans=[], classes=[], isHead=false, onClick=()=>{}
        })=>{
            const $tr = document.createElement("tr");
            classes.forEach((cls)=>$tr.classList.add(cls));

            row.forEach((value,index)=>{
                const $cell = document.createElement(isHead ? "th" : "td");
                $cell.colSpan = spans[index];
                $cell.innerHTML = value;
                $tr.append($cell);
            }
            );

            $tr.addEventListener("click", onClick);

            return $tr;
        }

        const renderP = (text)=>{
            const $p = document.createElement("p");
            $p.textContent = text;
            return $p;
        }

        /**
         * @param {any[]} arr
         * @param {string[]} keys
         */
        const groupBy = (arr,keys)=>{
            return arr.reduce((storage,item)=>{
                const objKey = keys.map(key=>`${item[key]}`).join(':');
                //should be some unique delimiter that wont appear in your keys
                if (storage[objKey]) {
                    storage[objKey].push(item);
                } else {
                    storage[objKey] = [item];
                }
                return storage;
            }
            , {});
        }
        ;

        const getCor = (text)=>{
            switch (text.toLowerCase()) {
            case "clientes":
                return "dot-cinza";
                break;
            case "financeira":
                return "dot-azul";
                break;
            case "processos internos":
                return (state.entidade === "SESI") ? "dot-verde" : "dot-laranja";
                break;
            case "gestão e conhecimento":
                return "dot-marrom";
                break;
            default:
                return (state.entidade === "SESI") ? "dot-verde" : "dot-laranja";
                break;
            }
        }

        const renderAtendimentoSocialSesi = (data=[],$owner)=>{
            // renderAtendimentoSocialBrasilSesi(data, $owner);

            const $table = $owner.querySelector(".atendimento-social table");
            const $thead = $table.querySelector(".atendimento-social thead");
            const $tbody = $table.querySelector(".atendimento-social tbody");
            const $footer = $owner.querySelector(".planejamento-estrategico-rodape");

            $thead.querySelectorAll("th.periodo").forEach(el=>{
                el.innerHTML = `Realizado<br>(${data.periodoReferencia})`;
            }
            );

            // Tema: Educação
            var tema = data.temas.Educacao;
            $tbody.insertAdjacentElement("beforeend", renderTableRow({
                row: [tema.nomeTema.toUpperCase(), tema.dadosQuantitativos["NORTE"].previsto, tema.dadosQuantitativos["NORTE"].realizado, tema.dadosQuantitativos["NORTE"].indiceRealizacao,],
                spans: [6, 1, 1, 1],
                classes: ["estrategia"],
            }));

            var matriculas = tema.linhasNegocio.Cursos;
            $tbody.insertAdjacentElement("beforeend", renderTableRow({
                row: [matriculas.nomeLinhaNegocio.toUpperCase(), matriculas['dadosQuantitativos']['NORTE'].previsto, matriculas['dadosQuantitativos']['NORTE'].realizado, matriculas['dadosQuantitativos']['NORTE'].indiceRealizacao,],
                spans: [6, 1, 1, 1],
                classes: ["indicador"],
            }));

            var acoes = ["EDUCACAOINFANTIL", "ENSINOFUNDAMENTAL", "ENSINOMEDIO", "EDUCACAODEJOVENSEADULTOS", "EDUCACAOCONTINUADA", "ENSINOSUPERIOR", ];
            acoes.forEach(key=>{
                var acao = matriculas.acoesFinalisticas[key];
                $tbody.insertAdjacentElement("beforeend", renderTableRow({
                    row: [acao.nomeAcaoFinalistica.toUpperCase(), acao.dadosQuantitativos['NORTE'].previsto, acao.dadosQuantitativos['NORTE'].realizado, acao.dadosQuantitativos['NORTE'].indiceRealizacao, ],
                    spans: [6, 1, 1, 1],
                    classes: ["objetivo"],
                }));
            }
            );

            var matriculas = tema.linhasNegocio.EventosEducativos;
            $tbody.insertAdjacentElement("beforeend", renderTableRow({
                row: [matriculas.nomeLinhaNegocio.toUpperCase(), matriculas['dadosQuantitativos']['NORTE'].previsto, matriculas['dadosQuantitativos']['NORTE'].realizado, matriculas['dadosQuantitativos']['NORTE'].indiceRealizacao,  ],
                spans: [6, 1, 1, 1],
                classes: ["indicador"],
            }));

            // Tema: Saúde e Segurança
            tema = data.temas.SaudeeSeguranca;

            $tbody.insertAdjacentElement("beforeend", renderTableRow({
                row: [tema.nomeTema.toUpperCase(), "", "", "", ],
                spans: [6, 1, 1, 1],
                classes: ["estrategia"],
            }));

            matriculas = tema.linhasNegocio.SaudeeSeguranca;
            var acoes = ["EMPRESASATENDIDAS", "PESSOASATENDIDAS", "PESSOASBENEFICIADASCOMPROGRAMASEMSEGURANCAESAUDE", "PESSOASBENEFICIADASEMPROMOCAODASAUDE", "VACINASAPLICADAS", ];
            acoes.forEach(key=>{
                var acao = matriculas.acoesFinalisticas[key];
                $tbody.insertAdjacentElement("beforeend", renderTableRow({
                    row: [acao.nomeAcaoFinalistica.toUpperCase(), acao.dadosQuantitativos['NORTE'].previsto, acao.dadosQuantitativos['NORTE'].realizado, acao.dadosQuantitativos['NORTE'].indiceRealizacao,],
                    spans: [6, 1, 1, 1],
                    classes: ["objetivo"],
                }));
            }
            );

            // Tema: Cultura
            tema = data.temas.Cultura;
            $tbody.insertAdjacentElement("beforeend", renderTableRow({
                row: [tema.nomeTema.toUpperCase(), "", "", "", ],
                spans: [6, 1, 1, 1],
                classes: ["estrategia"],
            }));

            matriculas = tema.linhasNegocio.Cultura;
            acoes = ['ESPECTADORESEMACOESDECULTURA', 'CONSULTASAACERVO', 'EMPRESTIMOSDEACERVO'];
            acoes.forEach(key=>{
                var acao = matriculas.acoesFinalisticas[key];
                $tbody.insertAdjacentElement("beforeend", renderTableRow({
                    row: [acao.nomeAcaoFinalistica.toUpperCase(), acao.dadosQuantitativos['NORTE'].previsto, acao.dadosQuantitativos['NORTE'].realizado, acao.dadosQuantitativos['NORTE'].indiceRealizacao, ],
                    spans: [6, 1, 1, 1],
                    classes: ["objetivo"],
                }));
            }
            );

            // Tema: Cooperação Social
            tema = data.temas.CooperacaoSocial;
            $tbody.insertAdjacentElement("beforeend", renderTableRow({
                row: [tema.nomeTema.toUpperCase(), "", "", "", ],
                spans: [6, 1, 1, 1],
                classes: ["estrategia"],
            }));

            matriculas = tema.linhasNegocio.CooperacaoSocial;
            acoes = ['PESSOASATENDIDASEMACOESCOMUNITARIAS', 'ATENDIMENTOSEMACOESCOMUNITARIAS'];
            acoes.forEach(key=>{
                var acao = matriculas.acoesFinalisticas[key];
                $tbody.insertAdjacentElement("beforeend", renderTableRow({
                    row: [acao.nomeAcaoFinalistica.toUpperCase(), acao.dadosQuantitativos['NORTE'].previsto, acao.dadosQuantitativos['NORTE'].realizado, acao.dadosQuantitativos['NORTE'].indiceRealizacao, ],
                    spans: [6, 1, 1, 1],
                    classes: ["objetivo"],
                }));
            }
            );

            // Fontes
            if (data && data.fonte) {
                $footer.insertAdjacentElement("beforeend", renderP(`Fonte: ${data.fonte}`));
            }

            // Notas
            if (data && data.nota) {
                $footer.insertAdjacentElement("beforeend", renderP(`Notas`));
                data.nota.split("\n").forEach(nota=>{
                    $footer.insertAdjacentElement("beforeend", renderP(nota));
                }
                );
            }
        }

        const showDownloads = ($owner,show)=>{
            const el = $owner.querySelector(".planejamento-estrategico-downloads");
            if (!el)
                return;
            el.style.display = (show) ? "flex" : "none";
        }

        const showEmptyState = ($owner,show)=>{
            const $empty = $owner.querySelector(".si-transparencia-empty");
            const $table = $owner.querySelector(".planejamento-estrategico-tabela.atendimento-social-brasil");

            if (!$empty || !$table)
                return;

            $empty.style.display = (show) ? "flex" : "none";
            $table.style.display = (show) ? "none" : "flex";
        }

        // Dropdown
        function onChangeDropdownStyle(owner) {
            const $parent = $(owner).parents(".dropdown");
            const text = owner.textContent;

            $("button > span", $parent).first().text(text);
            $("button", $parent).first().addClass("active");

            $("li", $parent).each(function(i, e) {
                if (e.textContent === text) {
                    e.classList.add("active");
                } else {
                    e.classList.remove("active");
                }
            });
        }

        $('.dropdown-atendimento-social-ano .dropdown ul li a', $("#planejamento-4768110")).on("click", function(evt) {
            onChangeDropdownStyle(this);
            const $owner = $(this).parents(".planejamento-estrategico")[0];

            const payload = {
                modulo: $owner.dataset.modulo,
                ano: parseInt(this.dataset.ano),
                entidade: $owner.dataset.entidade,
                departamento: $owner.dataset.departamento,
            }
            setState(payload, (oldState,newState)=>{
                if (oldState.ano == newState.ano)
                    return;
                limparHtml($owner, '.atendimento-social');
                fetch(apiDados(newState), {
                    'Accept': 'application/json'
                }).then((response)=>response.json()).then((data)=>{
                    const fn = newState.entidade === "SESI" ? renderAtendimentoSocialSesi : renderAtendimentoSocialSenai;
                    fn(data, $owner);
                    showDownloads($owner, true);
                    showEmptyState($owner, false);
                }
                ).catch((error)=>{
                    alert(error + error.stack);
                    showDownloads($owner, false);
                    showEmptyState($owner, true);
                }
                );
            }
            );
        });

        $(".planejamento-estrategico-downloads .btn-download", $("#planejamento-4768110")).on("click", function(evt) {
            const payload = getState();
            if (payload.ano === null)
                return;
            window.open(apiDownload({
                ...payload,
                formato: this.dataset.format.toUpperCase()
            }));
        });

        $('.dropdown-atendimento-social-ano .dropdown ul li.active a', $("#planejamento-4768110")).trigger('click');
        $('.dropdown-atendimento-social-regiao .dropdown ul li.active a', $("#planejamento-4768110")).trigger('click');
    });
    })(jQuery); 

</script>
<script>
    [...document.querySelectorAll(".tab-content .tab-pane")].forEach((panel)=>{
        if (panel.classList.contains("active"))
            return;
        const tab = document.querySelector(`li.active>[aria-controls="${panel.id}"]`);
        if (tab) {
            panel.classList.add("active");
            return;
        }
    }
    );
</script>
<script>
    (function($){
    $(function() {
        $('.dropdown-toggle').dropdown();

        // Endpoints
        //                              https://sistematransparenciaweb.com.br/api-atendimento-social      /publico/atendimento-social?ano=2022&departamento=SESI-DN&entidade=SESI
        const apiDados = ({modulo, ano, departamento, entidade})=>`https://sistematransparenciaweb.com.br/api-planejamento-estrategico/publico/planejamento-estrategico/${modulo}?ano=${ano}&departamento=${departamento}&entidade=${entidade}`;
        const apiDownload = ({modulo, ano, departamento, entidade, formato})=>`https://sistematransparenciaweb.com.br/api-planejamento-estrategico/publico/planejamento-estrategico/${modulo}/export?ano=${ano}&departamento=${departamento}&entidade=${entidade}&formatoExportacao=${formato}`;

        // Global State
        var state = {
            modulo: null,
            ano: null,
            sigla: null,
            departamento: null,
        }

        const getStateFromKey = (key)=>{
            return state[key];
        }

        const getState = ()=>{
            return Object.assign({}, state);
        }

        const setStateFromKey = (key,newState,callback)=>{
            const oldState = state[key];
            state[key] = newState;
            callback && callback(oldState, newState);
        }

        const setState = (newState,callback)=>{
            const oldState = Object.assign({}, state);
            for (let[key,value] of Object.entries(newState)) {
                setStateFromKey(key, value);
            }
            callback && callback(oldState, Object.assign({}, state));
        }

        // Renderização
        const limparHtml = ($owner)=>{
            $owner.querySelector("table tbody").innerHTML = "";
            $owner.querySelector(".planejamento-estrategico-rodape").innerHTML = "";
        }

        const renderTableRow = ({row=[], spans=[], classes=[], isHead=false, onClick=()=>{}
        })=>{
            const $tr = document.createElement("tr");
            classes.forEach((cls)=>$tr.classList.add(cls));

            row.forEach((value,index)=>{
                const $cell = document.createElement(isHead ? "th" : "td");
                $cell.colSpan = spans[index];
                $cell.innerHTML = value;
                $tr.append($cell);
            }
            );

            $tr.addEventListener("click", onClick);

            return $tr;
        }

        const renderNotes = (notes,$owner)=>{
        }

        /**
         * @param {any[]} arr
         * @param {string[]} keys
         */
        const groupBy = (arr,keys)=>{
            return arr.reduce((storage,item)=>{
                const objKey = keys.map(key=>`${item[key]}`).join(':');
                //should be some unique delimiter that wont appear in your keys
                if (storage[objKey]) {
                    storage[objKey].push(item);
                } else {
                    storage[objKey] = [item];
                }
                return storage;
            }
            , {});
        }
        ;

        const renderP = (text)=>{
            const $p = document.createElement("p");
            $p.textContent = text;
            return $p;
        }

        const getCor = (text)=>{
            switch (text.toLowerCase()) {
            case "clientes":
                return "dot-cinza";
                break;
            case "financeira":
                return "dot-azul";
                break;
            case "processos internos":
                return (state.entidade === "SESI") ? "dot-verde" : "dot-laranja";
                break;
            case "gestão e conhecimento":
                return "dot-marrom";
                break;
            default:
                return (state.entidade === "SESI") ? "dot-verde" : "dot-laranja";
                break;
            }
        }

        const renderEspecifico = (data=[],$owner)=>{
            const $table = $owner.querySelector("table");
            const $thead = $table.querySelector("thead");
            const $tbody = $table.querySelector("tbody");
            const $footer = $owner.querySelector(".planejamento-estrategico-rodape");

            // set meta e realizado
            const periodo = (data.length) ? data[0].periodoReferencia : " - ";
            // $thead.querySelector("#meta").innerHTML = `Meta<br>(${periodo})`;
            $thead.querySelector("#meta").innerHTML = `Meta<br>Anual`;
            $thead.querySelector("#realizado").innerHTML = `Realizado<br>(${periodo})`;

            // Render Rows
            for (let[perspectiva,perspectivaValues] of Object.entries(groupBy(data, ["perspectiva"]))) {
                $tbody.insertAdjacentElement("beforeend", renderTableRow({
                    row: [`<span class="dot ${getCor(perspectiva)}"></span> ${perspectiva}`, ],
                    spans: [13],
                    classes: ["estrategia"],
                }));

                for (let[atuacao,atuacaoValues] of Object.entries(groupBy(perspectivaValues, ["focoAtuacao"]))) {
                    $tbody.insertAdjacentElement("beforeend", renderTableRow({
                        row: [atuacao, ],
                        spans: [13],
                        classes: ["indicador"],
                    }));

                    atuacaoValues.forEach((item)=>{
                        item.objetivosEstrategicos.forEach((objetivo)=>{
                            $tbody.insertAdjacentElement("beforeend", renderTableRow({
                                row: [objetivo.indicador, // <<
                                objetivo.estimadoAnual, objetivo.realizado, objetivo.indiceRealizacao, "+", ],
                                spans: [6, 2, 2, 2, 1],
                                classes: ["objetivo"],
                                onClick: function(evt) {
                                    const $modal = $("#modalPlanejamento")

                                    // Título
                                    $("th#indicador", $modal).text(item.indicador || "-");

                                    // show/hide campos especificos
                                    $("td#focoAtuacao", $modal).parent().show();
                                    $("td#objtEstrategico", $modal).parent().hide();
                                    $("td#descricaoObjetivoEstrategico", $modal).parent().hide();

                                    // Linhas
                                    $("td#focoAtuacao", $modal).text(item.focoAtuacao || "-");
                                    $("td#formulaCalculo", $modal).text(item.formulaCalculo || "-");
                                    $("td#fontePlanejamento", $modal).text(item.fontePlanejamento || "-");
                                    $("td#unidadeMedida", $modal).text(item.unidadeMedida || "-");
                                    $("td#acumulacao", $modal).text(item.acumulacao || "-");
                                    $("td#periodicidadeApuracao", $modal).text(item.periodicidadeApuracao || "-");
                                    $("td#polaridade", $modal).text(item.polaridade || "-");

                                    $modal.modal();
                                }
                            }));
                        }
                        )
                    }
                    );
                }
            }

            if (data.length) {
                $footer.insertAdjacentElement("beforeend", renderP(`Fonte: ${data[0].fonte}`));
                $footer.insertAdjacentElement("beforeend", renderP(`Notas`));
                data[0].nota.split("\n").forEach(nota=>{
                    $footer.insertAdjacentElement("beforeend", renderP(nota));
                }
                );
            }
        }

        const renderSistemico = (data=[],$owner)=>{
            const $table = $owner.querySelector("table");
            const $thead = $table.querySelector("thead");
            const $tbody = $table.querySelector("tbody");
            const $footer = $owner.querySelector(".planejamento-estrategico-rodape");

            // set meta e realizado
            const periodo = (data.length) ? data[0].periodoReferencia : " - ";
            // $thead.querySelector("#meta").innerHTML = `Meta<br>(${periodo})`;
            $thead.querySelector("#meta").innerHTML = `Meta<br>Anual`;
            $thead.querySelector("#realizado").innerHTML = `Realizado<br>(${periodo})`;

            // Render rows
            for (let[perspectiva,perspectivaValues] of Object.entries(groupBy(data, ["perspectiva"]))) {
                $tbody.insertAdjacentElement("beforeend", renderTableRow({
                    row: [`<span class="dot ${getCor(perspectiva)}"></span> ${perspectiva}`, ],
                    spans: [13],
                    classes: ["estrategia"],
                }));

                for (let[atuacao,atuacaoValues] of Object.entries(groupBy(perspectivaValues, ["focoAtuacao"]))) {
                    $tbody.insertAdjacentElement("beforeend", renderTableRow({
                        row: [atuacao, ],
                        spans: [13],
                        classes: ["indicador"],
                    }));

                    atuacaoValues.forEach((item)=>{

                        item.objetivosEstrategicos.forEach((objetivo)=>{
                            $tbody.insertAdjacentElement("beforeend", renderTableRow({
                                row: [objetivo.indicador, objetivo.objtEstrategico, objetivo.estimadoAnual, objetivo.realizado, objetivo.indiceRealizacao, "+", ],
                                spans: [3, 3, 2, 2, 2, 1],
                                classes: ["objetivo"],
                                onClick: function(evt) {
                                    const $modal = $("#modalPlanejamento.modal-planejamento-4768103");

                                    // Título
                                    $("th#indicador", $modal).text(item.indicador || "-");

                                    // show/hide campos especificos
                                    $("td#focoAtuacao", $modal).parent().hide();
                                    $("td#objtEstrategico", $modal).parent().show();
                                    $("td#descricaoObjetivoEstrategico", $modal).parent().show();

                                    // Linhas
                                    $("td#objtEstrategico", $modal).text(objetivo.objtEstrategico || "-");
                                    $("td#descricaoObjetivoEstrategico", $modal).text(item.descricaoObjetivoEstrategico || "-");
                                    $("td#formulaCalculo", $modal).text(item.formulaCalculo || "-");
                                    $("td#fontePlanejamento", $modal).text(item.fontePlanejamento || "-");
                                    $("td#unidadeMedida", $modal).text(item.unidadeMedida || "-");
                                    $("td#acumulacao", $modal).text(item.acumulacao || "-");
                                    $("td#periodicidadeApuracao", $modal).text(item.periodicidadeApuracao || "-");
                                    $("td#polaridade", $modal).text(item.polaridade || "-");

                                    $modal.modal();
                                }
                            }));
                        }
                        )

                    }
                    );
                }
            }

            if (data.length) {
                $footer.insertAdjacentElement("beforeend", renderP(`Fonte: ${data[0].fonte}`));
                $footer.insertAdjacentElement("beforeend", renderP(`Notas`));
                data[0].nota.split("\n").forEach(nota=>{
                    $footer.insertAdjacentElement("beforeend", renderP(nota));
                }
                );
            }
        }
        ;

        const renders = {
            "especifico": renderEspecifico,
            "sistemico": renderSistemico
        }

        const showDownloads = ($owner,show)=>{
            const el = $owner.querySelector(".planejamento-estrategico-downloads");
            if (!el)
                return;
            el.style.display = (show) ? "flex" : "none";
        }

        const showEmptyState = ($owner,show)=>{
            const $empty = $owner.querySelector(".si-transparencia-empty");
            const $table = $owner.querySelector(".planejamento-estrategico-tabela");

            if (!$empty || !$table)
                return;

            $empty.style.display = (show) ? "flex" : "none";
            $table.style.display = (show) ? "none" : "flex";
        }

        // Dropdown
        function onChangeDropdownStyle(owner) {
            const $parent = $(owner).parents(".dropdown");
            const text = owner.textContent;

            $("button > span", $parent).first().text(text);
            $("button", $parent).first().addClass("active");

            $("li", $parent).each(function(i, e) {
                if (e.textContent === text) {
                    e.classList.add("active");
                } else {
                    e.classList.remove("active");
                }
            });
        }

        $('.planejamento-estrategico-dropdown .dropdown ul li a', $("#planejamento-4768103")).on("click", function(evt) {
            onChangeDropdownStyle(this);
            const $owner = $(this).parents(".planejamento-estrategico")[0];

            const payload = {
                modulo: $owner.dataset.modulo,
                ano: parseInt(this.dataset.ano),
                entidade: $owner.dataset.entidade,
                departamento: $owner.dataset.departamento,
            }

            setState(payload, (oldState,newState)=>{
                if (oldState.ano == newState.ano)
                    return;
                limparHtml($owner);
                fetch(apiDados(newState), {
                    'Accept': 'application/json'
                }).then((response)=>response.json()).then((data)=>{
                    renders[getStateFromKey("modulo")](data, $owner);
                    showDownloads($owner, true);
                    showEmptyState($owner, false);
                }
                ).catch((error)=>{
                    showDownloads($owner, false);
                    showEmptyState($owner, true);
                }
                );
            }
            );
        })

        $(".planejamento-estrategico-downloads .btn-download", $("#planejamento-4768103")).on("click", function(evt) {
            const payload = getState();
            if (payload.ano === null)
                return;
            window.open(apiDownload({
                ...payload,
                formato: this.dataset.format.toUpperCase()
            }));
        });

        $('.planejamento-estrategico-dropdown .dropdown ul li.active a', $("#planejamento-4768103")).trigger('click');
    });
    })(jQuery); 
</script>
<script>
    (function($){
    $(function() {
        $('.dropdown-toggle').dropdown();

        // Endpoints
        //                              https://sistematransparenciaweb.com.br/api-atendimento-social      /publico/atendimento-social?ano=2022&departamento=SESI-DN&entidade=SESI
        const apiDados = ({modulo, ano, departamento, entidade})=>`https://sistematransparenciaweb.com.br/api-planejamento-estrategico/publico/planejamento-estrategico/${modulo}?ano=${ano}&departamento=${departamento}&entidade=${entidade}`;
        const apiDownload = ({modulo, ano, departamento, entidade, formato})=>`https://sistematransparenciaweb.com.br/api-planejamento-estrategico/publico/planejamento-estrategico/${modulo}/export?ano=${ano}&departamento=${departamento}&entidade=${entidade}&formatoExportacao=${formato}`;

        // Global State
        var state = {
            modulo: null,
            ano: null,
            sigla: null,
            departamento: null,
        }

        const getStateFromKey = (key)=>{
            return state[key];
        }

        const getState = ()=>{
            return Object.assign({}, state);
        }

        const setStateFromKey = (key,newState,callback)=>{
            const oldState = state[key];
            state[key] = newState;
            callback && callback(oldState, newState);
        }

        const setState = (newState,callback)=>{
            const oldState = Object.assign({}, state);
            for (let[key,value] of Object.entries(newState)) {
                setStateFromKey(key, value);
            }
            callback && callback(oldState, Object.assign({}, state));
        }

        // Renderização
        const limparHtml = ($owner)=>{
            $owner.querySelector("table tbody").innerHTML = "";
            $owner.querySelector(".planejamento-estrategico-rodape").innerHTML = "";
        }

        const renderTableRow = ({row=[], spans=[], classes=[], isHead=false, onClick=()=>{}
        })=>{
            const $tr = document.createElement("tr");
            classes.forEach((cls)=>$tr.classList.add(cls));

            row.forEach((value,index)=>{
                const $cell = document.createElement(isHead ? "th" : "td");
                $cell.colSpan = spans[index];
                $cell.innerHTML = value;
                $tr.append($cell);
            }
            );

            $tr.addEventListener("click", onClick);

            return $tr;
        }

        const renderNotes = (notes,$owner)=>{
        }

        /**
         * @param {any[]} arr
         * @param {string[]} keys
         */
        const groupBy = (arr,keys)=>{
            return arr.reduce((storage,item)=>{
                const objKey = keys.map(key=>`${item[key]}`).join(':');
                //should be some unique delimiter that wont appear in your keys
                if (storage[objKey]) {
                    storage[objKey].push(item);
                } else {
                    storage[objKey] = [item];
                }
                return storage;
            }
            , {});
        }
        ;

        const renderP = (text)=>{
            const $p = document.createElement("p");
            $p.textContent = text;
            return $p;
        }

        const getCor = (text)=>{
            switch (text.toLowerCase()) {
            case "clientes":
                return "dot-cinza";
                break;
            case "financeira":
                return "dot-azul";
                break;
            case "processos internos":
                return (state.entidade === "SESI") ? "dot-verde" : "dot-laranja";
                break;
            case "gestão e conhecimento":
                return "dot-marrom";
                break;
            default:
                return (state.entidade === "SESI") ? "dot-verde" : "dot-laranja";
                break;
            }
        }

        const renderEspecifico = (data=[],$owner)=>{
            const $table = $owner.querySelector("table");
            const $thead = $table.querySelector("thead");
            const $tbody = $table.querySelector("tbody");
            const $footer = $owner.querySelector(".planejamento-estrategico-rodape");

            // set meta e realizado
            const periodo = (data.length) ? data[0].periodoReferencia : " - ";
            // $thead.querySelector("#meta").innerHTML = `Meta<br>(${periodo})`;
            $thead.querySelector("#meta").innerHTML = `Meta<br>Anual`;
            $thead.querySelector("#realizado").innerHTML = `Realizado<br>(${periodo})`;

            // Render Rows
            for (let[perspectiva,perspectivaValues] of Object.entries(groupBy(data, ["perspectiva"]))) {
                $tbody.insertAdjacentElement("beforeend", renderTableRow({
                    row: [`<span class="dot ${getCor(perspectiva)}"></span> ${perspectiva}`, ],
                    spans: [13],
                    classes: ["estrategia"],
                }));

                for (let[atuacao,atuacaoValues] of Object.entries(groupBy(perspectivaValues, ["focoAtuacao"]))) {
                    $tbody.insertAdjacentElement("beforeend", renderTableRow({
                        row: [atuacao, ],
                        spans: [13],
                        classes: ["indicador"],
                    }));

                    atuacaoValues.forEach((item)=>{
                        item.objetivosEstrategicos.forEach((objetivo)=>{
                            $tbody.insertAdjacentElement("beforeend", renderTableRow({
                                row: [objetivo.indicador, // <<
                                objetivo.estimadoAnual, objetivo.realizado, objetivo.indiceRealizacao, "+", ],
                                spans: [6, 2, 2, 2, 1],
                                classes: ["objetivo"],
                                onClick: function(evt) {
                                    const $modal = $("#modalPlanejamento")

                                    // Título
                                    $("th#indicador", $modal).text(item.indicador || "-");

                                    // show/hide campos especificos
                                    $("td#focoAtuacao", $modal).parent().show();
                                    $("td#objtEstrategico", $modal).parent().hide();
                                    $("td#descricaoObjetivoEstrategico", $modal).parent().hide();

                                    // Linhas
                                    $("td#focoAtuacao", $modal).text(item.focoAtuacao || "-");
                                    $("td#formulaCalculo", $modal).text(item.formulaCalculo || "-");
                                    $("td#fontePlanejamento", $modal).text(item.fontePlanejamento || "-");
                                    $("td#unidadeMedida", $modal).text(item.unidadeMedida || "-");
                                    $("td#acumulacao", $modal).text(item.acumulacao || "-");
                                    $("td#periodicidadeApuracao", $modal).text(item.periodicidadeApuracao || "-");
                                    $("td#polaridade", $modal).text(item.polaridade || "-");

                                    $modal.modal();
                                }
                            }));
                        }
                        )
                    }
                    );
                }
            }

            if (data.length) {
                $footer.insertAdjacentElement("beforeend", renderP(`Fonte: ${data[0].fonte}`));
                $footer.insertAdjacentElement("beforeend", renderP(`Notas`));
                data[0].nota.split("\n").forEach(nota=>{
                    $footer.insertAdjacentElement("beforeend", renderP(nota));
                }
                );
            }
        }

        const renderSistemico = (data=[],$owner)=>{
            const $table = $owner.querySelector("table");
            const $thead = $table.querySelector("thead");
            const $tbody = $table.querySelector("tbody");
            const $footer = $owner.querySelector(".planejamento-estrategico-rodape");

            // set meta e realizado
            const periodo = (data.length) ? data[0].periodoReferencia : " - ";
            // $thead.querySelector("#meta").innerHTML = `Meta<br>(${periodo})`;
            $thead.querySelector("#meta").innerHTML = `Meta<br>Anual`;
            $thead.querySelector("#realizado").innerHTML = `Realizado<br>(${periodo})`;

            // Render rows
            for (let[perspectiva,perspectivaValues] of Object.entries(groupBy(data, ["perspectiva"]))) {
                $tbody.insertAdjacentElement("beforeend", renderTableRow({
                    row: [`<span class="dot ${getCor(perspectiva)}"></span> ${perspectiva}`, ],
                    spans: [13],
                    classes: ["estrategia"],
                }));

                for (let[atuacao,atuacaoValues] of Object.entries(groupBy(perspectivaValues, ["focoAtuacao"]))) {
                    $tbody.insertAdjacentElement("beforeend", renderTableRow({
                        row: [atuacao, ],
                        spans: [13],
                        classes: ["indicador"],
                    }));

                    atuacaoValues.forEach((item)=>{

                        item.objetivosEstrategicos.forEach((objetivo)=>{
                            $tbody.insertAdjacentElement("beforeend", renderTableRow({
                                row: [objetivo.indicador, objetivo.objtEstrategico, objetivo.estimadoAnual, objetivo.realizado, objetivo.indiceRealizacao, "+", ],
                                spans: [3, 3, 2, 2, 2, 1],
                                classes: ["objetivo"],
                                onClick: function(evt) {
                                    const $modal = $("#modalPlanejamento.modal-planejamento-4768106");

                                    // Título
                                    $("th#indicador", $modal).text(item.indicador || "-");

                                    // show/hide campos especificos
                                    $("td#focoAtuacao", $modal).parent().hide();
                                    $("td#objtEstrategico", $modal).parent().show();
                                    $("td#descricaoObjetivoEstrategico", $modal).parent().show();

                                    // Linhas
                                    $("td#objtEstrategico", $modal).text(objetivo.objtEstrategico || "-");
                                    $("td#descricaoObjetivoEstrategico", $modal).text(item.descricaoObjetivoEstrategico || "-");
                                    $("td#formulaCalculo", $modal).text(item.formulaCalculo || "-");
                                    $("td#fontePlanejamento", $modal).text(item.fontePlanejamento || "-");
                                    $("td#unidadeMedida", $modal).text(item.unidadeMedida || "-");
                                    $("td#acumulacao", $modal).text(item.acumulacao || "-");
                                    $("td#periodicidadeApuracao", $modal).text(item.periodicidadeApuracao || "-");
                                    $("td#polaridade", $modal).text(item.polaridade || "-");

                                    $modal.modal();
                                }
                            }));
                        }
                        )

                    }
                    );
                }
            }

            if (data.length) {
                $footer.insertAdjacentElement("beforeend", renderP(`Fonte: ${data[0].fonte}`));
                $footer.insertAdjacentElement("beforeend", renderP(`Notas`));
                data[0].nota.split("\n").forEach(nota=>{
                    $footer.insertAdjacentElement("beforeend", renderP(nota));
                }
                );
            }
        }
        ;

        const renders = {
            "especifico": renderEspecifico,
            "sistemico": renderSistemico
        }

        const showDownloads = ($owner,show)=>{
            const el = $owner.querySelector(".planejamento-estrategico-downloads");
            if (!el)
                return;
            el.style.display = (show) ? "flex" : "none";
        }

        const showEmptyState = ($owner,show)=>{
            const $empty = $owner.querySelector(".si-transparencia-empty");
            const $table = $owner.querySelector(".planejamento-estrategico-tabela");

            if (!$empty || !$table)
                return;

            $empty.style.display = (show) ? "flex" : "none";
            $table.style.display = (show) ? "none" : "flex";
        }

        // Dropdown
        function onChangeDropdownStyle(owner) {
            const $parent = $(owner).parents(".dropdown");
            const text = owner.textContent;

            $("button > span", $parent).first().text(text);
            $("button", $parent).first().addClass("active");

            $("li", $parent).each(function(i, e) {
                if (e.textContent === text) {
                    e.classList.add("active");
                } else {
                    e.classList.remove("active");
                }
            });
        }

        $('.planejamento-estrategico-dropdown .dropdown ul li a', $("#planejamento-4768106")).on("click", function(evt) {
            onChangeDropdownStyle(this);
            const $owner = $(this).parents(".planejamento-estrategico")[0];

            const payload = {
                modulo: $owner.dataset.modulo,
                ano: parseInt(this.dataset.ano),
                entidade: $owner.dataset.entidade,
                departamento: $owner.dataset.departamento,
            }

            setState(payload, (oldState,newState)=>{
                if (oldState.ano == newState.ano)
                    return;
                limparHtml($owner);
                fetch(apiDados(newState), {
                    'Accept': 'application/json'
                }).then((response)=>response.json()).then((data)=>{
                    renders[getStateFromKey("modulo")](data, $owner);
                    showDownloads($owner, true);
                    showEmptyState($owner, false);
                }
                ).catch((error)=>{
                    showDownloads($owner, false);
                    showEmptyState($owner, true);
                }
                );
            }
            );
        })

        $(".planejamento-estrategico-downloads .btn-download", $("#planejamento-4768106")).on("click", function(evt) {
            const payload = getState();
            if (payload.ano === null)
                return;
            window.open(apiDownload({
                ...payload,
                formato: this.dataset.format.toUpperCase()
            }));
        });

        $('.planejamento-estrategico-dropdown .dropdown ul li.active a', $("#planejamento-4768106")).trigger('click');
    });
    })(jQuery); 
</script>
<style>
.accordionn {
  background-color: #FFF;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: 1px solid #CCCCCC;
  border-radius:5px;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  color: #009C31;
  font-weight:bold;
  margin-bottom:20px;
}

.aactive, .accordionn:hover {
  background-color: #009C31;
  color:#FFF !important;
}

.accordionn:after {
  font-family: "FontAwesome";
  content:"\f103";
  color: #009C31;
  /* font-weight: bold; */
  font-weight: 900;
  float: right;
  margin-left: 5px;
}

.aactive:after {
  content:"\f102"
}

.panell {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
</style>
<style>
    :root {
        --cor-casa-sesi: #00963f
    }

    .nt .nt-downloads {
        display: flex;
        align-items: center;
        flex-direction: row;
        gap: 30px
    }

    .nt .nt-downloads .si-download {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 24px 16px;
        width: 146px;
        height: 165px;
        background: #FFFFFF;
        border: 1px solid #646464;
        border-radius: 8px
    }

    .nt .nt-downloads .si-download section {
        display: flex;
        flex-direction: column;
        gap: 20px
    }

    .nt .nt-downloads .si-download section p {
        
        font-style: normal;
        font-weight: 400;
        font-size: 16px !important;
        line-height: 16px
    }

    .nt .nt-downloads .si-download section h4 {
        
        font-style: normal;
        font-weight: 600;
        font-size: 18px !important;
        line-height: 16px
    }

    .nt .nt-downloads .si-download section span {
        
        font-style: normal;
        font-weight: 400;
        font-size: 14px !important;
        line-height: 16px;
        color: #646464
    }

    .nt .nt-downloads .si-download img {
        align-self: end
    }

    .nt .nt-downloads-horizontal .si-download {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0 24px;
        gap: 16px;
        background: #FFFFFF;
        border: 1px solid #F7F7F7;
        border-radius: 4px;
        height: 56px;
        width: 457px
    }

    .nt .nt-downloads-horizontal .si-download section {
        width: 100%
    }

    .nt .nt-downloads-horizontal .si-download section * {
        
        font-style: normal;
        font-weight: 400;
        font-size: 14px
    }

    .nt .nt-downloads-horizontal .si-download section p {
        line-height: 24px;
        margin: 0;
        color: #262626
    }

    .nt .nt-downloads-horizontal .si-download section span {
        font-weight: 500;
        font-size: 12px;
        line-height: 16px;
        color: #222222
    }

    .nt .tab-pane {
        padding-top: 48px
    }

    .nt .tab-content p {
        
        font-style: normal;
        font-weight: 400;
        font-size: 14px !important;
        line-height: 150%
    }

    .nt .tab-content p strong {
        
        font-style: normal;
        font-weight: 700;
        font-size: 14px !important;
        line-height: 160%;
        color: #222222
    }

    .nt .custom-nav-tabs>li>a {
        
        font-style: normal;
        font-weight: 400;
        font-size: 18px;
        line-height: 150%;
        color: #222222 !important
    }

    .nt .custom-nav-tabs>li>a:hover {
        color: #222222 !important
    }

    .nt .nt-mapa-estrategico .nt-cards {
        display: flex;
        align-items: center;
        justify-content: space-between
    }

    .nt .nt-mapa-estrategico .nt-card.nt-card-cinza .custom-card {
        background: #8397B0;
        border: 1px solid #8FA5C0;
        box-shadow: 2px 2px 0px #8397B0;
        border-radius: 8px
    }

    .nt .nt-mapa-estrategico .nt-card.nt-card-azul .custom-card {
        background: #333E50;
        border: 1px solid #4C5B73;
        box-shadow: 2px 2px 0px #333E50;
        border-radius: 8px
    }

    .nt .nt-mapa-estrategico .nt-card.nt-card-verde .custom-card {
        background: #70AC48;
        border: 1px solid #52B972;
        box-shadow: 2px 2px 0px #009C31;
        border-radius: 8px
    }

    .nt .nt-mapa-estrategico .nt-card.nt-card-laranja .custom-card {
        background: #00963f;
        border: 1px solid #C26603;
        box-shadow: 2px 2px 0px #C26603;
        border-radius: 8px
    }

    .nt .nt-mapa-estrategico .nt-card.nt-card-marrom .custom-card {
        background: #767070;
        border: 1px solid #979191;
        box-shadow: 2px 2px 0px #767070;
        border-radius: 8px
    }

    .nt .nt-mapa-estrategico .nt-card .custom-card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 24px;
        gap: 12px
    }

    .nt .nt-mapa-estrategico .nt-card .custom-card>header {
        margin: 0 !important;
        padding: 0 !important
    }

    .nt .nt-mapa-estrategico .nt-card .custom-card>header p {
        
        font-style: normal;
        font-weight: 700;
        font-size: 16px !important;
        line-height: 150%;
        text-align: center;
        color: #FFFFFF;
        margin: 0
    }

    .nt .nt-mapa-estrategico .nt-card .custom-card>main {
        width: 100%
    }

    .nt .nt-mapa-estrategico .nt-card .custom-card>main button {
        background: none;
        color: inherit;
        border: none;
        padding: 0;
        font: inherit;
        cursor: pointer;
        outline: inherit;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 12px;
        width: 100%;
        background: #FFFFFF;
        border: 1px solid #D0D0D0;
        box-shadow: 2px 2px 4px rgba(0,0,0,0.1);
        border-radius: 8px
    }

    .nt .nt-mapa-estrategico .nt-card .custom-card>main button p {
        
        font-style: normal;
        font-weight: 400;
        font-size: 12px !important;
        line-height: 150%;
        text-align: center;
        color: #222222;
        margin: 0
    }

    .nt .nt-mapa-estrategico .nt-seta {
        display: flex;
        align-items: center;
        justify-content: center;
        width: fit-content;
        padding: 0
    }

    .nt .nt-mapa-estrategico .nt-seta img {
        padding: 15px
    }

    .nt .nt-mapa-estrategico .nt-seta-centro {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0
    }

    .nt .nt-mapa-estrategico .nt-seta-centro img {
        padding: 15px
    }

    .nt.nt-senai .custom-nav-tabs>li.active {
        border-bottom: 4px solid var(--cor-casa-sesi)
    }

    .nt.nt-senai .nt-downloads .si-download section p {
        color: var(--cor-casa-sesi)
    }

    .nt.nt-senai .nt-downloads .si-download section h4 {
        color: var(--cor-casa-sesi)
    }

    .nt.nt-senai .nt-downloads-horizontal .si-download {
        border-left: 4px solid var(--cor-casa-sesi)
    }

    .nt.nt-sesi .custom-nav-tabs>li.active {
        border-bottom: 4px solid #1E984F
    }

    .nt.nt-sesi .nt-downloads .si-download section p {
        color: #0F6D47
    }

    .nt.nt-sesi .nt-downloads .si-download section h4 {
        color: #0F6D47
    }

    .nt.nt-sesi .nt-downloads-horizontal .si-download {
        border-left: 4px solid #009C31
    }

    @media only screen and (max-width: 970px) {
        .nt-cards-row {
            display:flex;
            flex-direction: column;
            gap: 15px
        }

        .nt-seta {
            display: flex;
            align-items: center;
            justify-content: center;
            width: fit-content;
            padding: 0
        }

        .nt-seta img {
            padding: 15px
        }
    }

    @media only screen and (max-width: 600px) {
        .nt .nt-mapa-estrategico .nt-seta img {
            padding:0
        }
    }
</style>
<style>
    .modal-custom .modal-dialog {
        max-width: 555px !important
    }

    .modal-custom .modal-content {
        background: #FFFFFF;
        box-shadow: 0px 16px 32px rgba(0,0,0,0.08);
        border-radius: 8px;
        padding: 24px
    }

    .modal-custom .modal-content .modal-header {
        padding: 0;
        border: 0
    }

    .modal-custom .modal-content .modal-header h4.modal-title {
        
        font-style: normal;
        font-weight: 700;
        font-size: 18px;
        line-height: 150%
    }

    .modal-custom .modal-content .modal-header button.close {
        display: flex;
        align-items: center;
        justify-content: center
    }

    .modal-custom .modal-content .modal-header button.close span {
        font-size: 32px;
        width: 27px;
        height: 27px;
        font-weight: 400;
        line-height: 80%
    }

    .modal-custom .modal-content .modal-body {
        padding: 0
    }

    .modal-custom .modal-content .modal-body p {
        margin: 0;
        padding: 8px 0
    }

    .modal-custom .modal-content .modal-body p>strong {
        
        font-style: normal;
        font-weight: 700;
        font-size: 18px;
        line-height: 150%;
        color: #646464
    }

    .modal-custom .modal-content .modal-body .nt-modal-card .custom-card {
        height: 100%
    }

    .modal-custom .modal-content .modal-body .nt-modal-card-cinza-claro .custom-card {
        background: #8397B0
    }

    .modal-custom .modal-content .modal-body .nt-modal-card-cinza-medio .custom-card {
        background: #333E50
    }

    .modal-custom .modal-content .modal-body .nt-modal-card-marrom .custom-card {
        background: #767070
    }

    .modal-custom .modal-content .modal-body .nt-modal-card-verde .custom-card {
        background: #009C31
    }

    .modal-custom .modal-content .modal-body .nt-modal-card-laranja .custom-card {
        background: #00963f
    }

    .modal-custom .modal-content .modal-body .nt-seta-centro {
        display: flex;
        align-items: center;
        justify-content: center
    }

    .modal-custom .modal-content .modal-body .nt-seta-centro img {
        padding: 15px
    }

    .modal-custom .modal-content .modal-body .custom-card {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 12px;
        gap: 12px;
        border-radius: 8px
    }

    .modal-custom .modal-content .modal-body .custom-card .card-body p {
        
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 150%;
        text-align: center;
        color: #FFFFFF;
        margin: 0
    }

    [data-style="sesi"] h4.modal-title {
        color: #009C31
    }

    [data-style="senai"] h4.modal-title {
        color: #00963f
    }
</style>
<style type="text/css">
    /* Defina a imagem de fundo. */
    .image-size-backgroud-4768001 {
        background-image: url('');
    }

    /*Default ou Centralizado - igual ao plugin de coluna*/
    .image-size-backgroud-4768001 {
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }
</style>
<style>
    #common-space-4768004 {
        height: 26px;
    }
</style>
<style>
    .departamento-regional {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
        gap: 32px;
        background: #FFFFFF;
        border: 1px solid rgba(225, 225, 225, 0.5);
        box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.05);
    }

    .departamento-regional-shadow {
        border: 1px solid rgba(225, 225, 225, 0.5);
        box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.05);
    }

    .departamento-regional .departamento-regional-textos {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        gap: 8px;
    }

    .departamento-regional h6, .departamento-regional p {
        /* font */
        
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
    }

    .departamento-regional h6 {
        font-weight: 700;
        font-size: 16px;
        letter-spacing: 0.04em;
        margin: 0;
    }

    .departamento-regional .departamento-regional-textos p {
        color: #222222;
        font-size: 14px !important;
    }

    .departamento-regional p:last-child {
        margin-bottom: 0;
    }

    .departamento-regional-select {
        width: 100%;
        border: 2px solid #A2A2A2;
        border-radius: 4px;
        /* font */
        
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 17px;
        color: #222222;
        opacity: 0.64;
    }

    .departamento-regional-senai h6 {
        color: #ff8c00;
    }

    .departamento-regional-sesi h6 {
        color: #009C31;
    }

    /* Mapa */
    .departamento-regional-mapa {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0px 0px 32px;
        gap: 16px;
        background: #FFFFFF;
        border: 1px solid rgba(130, 130, 130, 0.5);
        box-shadow: 0px 30px 40px rgba(0, 0, 0, 0.05);
    }

    .departamento-regional-mapa-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 16px;
        gap: 16px;
        width: 100%;
    }

    .departamento-regional-separador {
        display: block;
        border-bottom: 1px solid rgba(130, 130, 130, 0.5);
        width: 100%;
    }

    .departamento-regional-mapa-titulo {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 16px;
        gap: 8px;
        width: 100%;
        background: #828282;
        /* Font */
        
        font-style: normal;
        font-weight: 700;
        font-size: 18px;
        line-height: 22px;
        text-align: center;
        color: #FFFFFF;
    }

    .departamento-regional-mapa-subtitulo {
        width: 100%;
        /* Font */
        
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 19px;
        text-align: center;
        color: #373737;
    }

    .departamento-regional-mapa .svg-wrap {
        width: 95%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .departamento-regional-mapa .svg-wrap .outros-departamentos {
        position: absolute;
        display: flex;
        flex-direction: column;
        gap: 8px;
        right: 0;
        bottom: 50px;
    }

    .departamento-regional-mapa .svg-wrap .outros-departamentos a {
        display: block;
        background: #D3D2D1;
        border-radius: 8px;
        padding: 10px 20px;
        
        font-style: normal;
        font-weight: 700;
        font-size: 10px;
        line-height: 120%;
        text-align: center;
        color: #000000;
    }

    .departamento-regional-mapa .svg-wrap .outros-departamentos a:hover {
        background-color: #999;
        color: #000 !important;
    }

    .departamento-regional-mapa svg {
        width: 100%;
    }

    .departamento-regional-mapa svg a text {
        fill: #000;
        
        font-weight: 700;
        font-size: 14px;
    }

    .departamento-regional-mapa .btn.btn-primary {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 10px 16px 12px 16px;
        gap: 8px;
        border-radius: 8px;
        border: unset;
        /* Font */
        
        font-style: normal;
        font-weight: 700;
        font-size: 14px;
        line-height: 16px;
        text-align: center;
        color: #FFFFFF;
    }

    [data-instituicao="senai"] .btn-primary {
        background: #00963f;
    }

    [data-instituicao="sesi"] .btn-primary {
        background: #01A62D;
    }
</style>
<style type="text/css">
    /* Defina a imagem de fundo. */
    .image-size-backgroud-4768003 {
        background-image: url('');
    }

    /*Default ou Centralizado - igual ao plugin de coluna*/
    .image-size-backgroud-4768003 {
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }
</style>
<style type="text/css">
    .background-image-4768000 {
        background-image: url('');
    }

    .image-size-backgroud-4768000 {
        background-size: None;
    }
</style>
<style>
    .custom-nav-tabs {
        display: flex;
        flex-direction: row;
        align-items: end;
        justify-content: space-around;
        border-bottom: unset;
    }

    .custom-nav-tabs>li>a {
        text-align: center;
        border: unset;
        padding: 12px 16px;
    }

    .custom-nav-tabs>li {
        border-bottom: 4px solid #F8F8F8;
        ; transition: all 500ms ease;
    }

    .custom-nav-tabs>li.active {
        border-bottom: 4px solid rgba(1, 1, 1, .25);
        ; }

    .custom-nav-tabs>li>a:focus, .custom-nav-tabs>li>a:hover {
        background-color: transparent;
    }
</style>
<style>
    #common-space-4768109 {
        height: 24px;
    }
</style>
<style>
    .btn-transparencia {
        
            background: #00963f !important;
        
        
            border-color: #00963f !important;
        
        border-radius: 0 !important;
        color: #fff !important;
        font-weight: bold;
    }
    .btn-transparencia:hover {
        color: #fff !important;
    }
    .materia {
        color: #222;
        font-size: 14px;
        line-height: 21px;
    }


    .materia h2 {
        
            color: #00963f;
        
        font-size: 22px;
        font-weight: bold;
    }
    .materia a {
        
            color: #00963f;
        
        font-size: 14px;
        line-height: 21px;
    }
    .materia td a {
        color: #000 !important;
        font-size: 16px;
        line-height: 21px;
    }

    .materia p, .materia p * {
        font-size: 18px !important;
    }

    .breadcrumb-local li a{
        font-size: 14px;
    }

    .table tr td {
        vertical-align: middle !important;
    }
    .titulo_acessibilidade {
        margin-left: 10px;
        margin-top: 18px;
        font-weight: bold;
        background:url("https://staticportaldaindustria.azureedge.net/static/img/fundo_tit.png");
        background-position-y:43px;
    }
    .titulo_acessibilidade2 {
        margin-left: 10px;
        margin-top: 18px;
        font-weight: bold;
        background:url("https://staticportaldaindustria.azureedge.net/static/img/fundo_tit2.png");
        background-position-y:43px;
    }
    .Tit_acess{flex: 1; max-width: auto; min-width: auto; padding-left:10px;}
    .Tit_ico {flex:0}
    .Tit_bloco{display: flex; margin-left:0px;}


    .custom-nav-tabs {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        border-bottom: unset;
    }

    .custom-nav-tabs>li>a {
        text-align: center;
        border: unset;
        padding: 12px 16px;
    }

    .custom-nav-tabs>li{
        border-bottom: 4px solid #F8F8F8;;
        transition: all 500ms ease;
    }

    .custom-nav-tabs>li.active{
    
        border-bottom: 4px solid #00963f;
    

    }

    .custom-nav-tabs>li>a:focus, .custom-nav-tabs>li>a:hover {
        background-color: transparent;
    }
    .margin-top-20 {
        margin-top: 20px;
    }
    .custom-nav-tabs>li>a {
        
        font-style: normal;
        font-weight: 400;
        font-size: 18px;
        line-height: 150%;
        color: #222222 !important;
    }
    .tab-padding-top {
        padding-top: 48px;
    }



</style>
<style>
    .planejamento-estrategico {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .planejamento-estrategico-controles {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        width: 100%;
        min-height: 64px;
    }

    .planejamento-estrategico-tabela {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        width: 100%;
        filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.08));
        border-radius: 4px;
        overflow: hidden;
    }

    [data-style="sesi"] .planejamento-estrategico-tabela {
        border: 1px solid #0F6D47;
        background: #0F6D47;
    }

    [data-style="senai"] .planejamento-estrategico-tabela {
        border: 1px solid #00963f;
        background: #00963f;
    }

    /* Reset Table Style */
    .planejamento-estrategico-tabela table {
        width: 100%;
        background: unset;
    }

    .planejamento-estrategico-tabela table > thead {
        background: unset;
        border: unset;
        font-size: unset;
        line-height: unset;
        vertical-align: unset;
        margin: unset;
        padding: unset;
    }

    .planejamento-estrategico-tabela table > thead > tr, .planejamento-estrategico-tabela table > tbody > tr {
        background: unset;
        border: unset;
    }

    .planejamento-estrategico-tabela table > thead > tr > th, .planejamento-estrategico-tabela table > tbody > tr > td {
        padding: unset;
        margin: unset;
        background: unset;
        border-radius: unset !important;
        border: unset !important;
        
        font-size: unset;
        text-align: unset;
        line-height: unset;
    }

    /* Table */
    [data-style="sesi"] .planejamento-estrategico-tabela table > thead {
        background: #009C31;
    }

    [data-style="senai"] .planejamento-estrategico-tabela table > thead {
        background: #00963f;
    }

    .planejamento-estrategico-tabela table > thead > tr > th, .planejamento-estrategico-tabela table > tbody > tr > td {
        
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 110%;
        padding: 14px 16px;
        vertical-align: middle;
    }

    .planejamento-estrategico-tabela table > thead > tr > th {
        font-weight: 700;
        color: #FFFFFF;
    }

    .planejamento-estrategico-tabela table > thead > tr > th:nth-child(1), .planejamento-estrategico-tabela table > tbody > tr > td:nth-child(1) {
        text-align: start;
    }

    .planejamento-estrategico-tabela table > thead > tr > th:nth-child(n+2), .planejamento-estrategico-tabela table > tbody > tr > td:nth-child(n+2) {
        text-align: end;
    }

    .planejamento-estrategico-tabela table > thead > tr > th[colspan="3"] {
        text-align: start;
    }

    .planejamento-estrategico-tabela table > * > tr > [colspan="1"] {
        width: calc((100% / 13) * 1) !important;
    }

    .planejamento-estrategico-tabela table > * > tr > [colspan="2"] {
        width: calc((100% / 13) * 2) !important;
    }

    .planejamento-estrategico-tabela table > * > tr > [colspan="5"] {
        width: calc((100% / 13) * 6) !important;
    }

    .planejamento-estrategico-tabela table > tbody > tr {
        border-bottom: 1px solid #C0C0C0;
    }

    .planejamento-estrategico-tabela table > tbody > tr {
        border-bottom: 1px solid #C0C0C0;
    }

    .planejamento-estrategico-tabela table > tbody > tr:last-child {
        border-bottom: unset;
    }

    .planejamento-estrategico-tabela table > tbody > tr.estrategia {
        background: #DCDCDC;
    }

    .planejamento-estrategico-tabela table > tbody > tr.estrategia > td {
        
        font-weight: 700;
        color: #222222;
    }

    .planejamento-estrategico-tabela table > tbody > tr.indicador {
        background: #EDEDED;
    }

    .planejamento-estrategico-tabela table > tbody > tr.indicador > td {
        
        font-weight: 500;
    }

    .planejamento-estrategico-tabela table > tbody > tr.objetivo {
        background: #FFFFFF;
        cursor: pointer;
    }

    .planejamento-estrategico-tabela table > tbody > tr.objetivo:hover {
        background: #EDEDED;
    }

    .planejamento-estrategico-tabela table > tbody > tr.objetivo td {
        padding-top: 18px;
        padding-right: 16px;
        padding-bottom: 18px;
        padding-left: 24px;
    }

    .planejamento-estrategico-tabela table > tbody > tr.objetivo td:last-child {
        font-size: 22px;
        
        text-align: center;
    }

    .planejamento-estrategico-tabela table > tbody > tr.objetivo td[colspan="3"] {
        text-align: start;
    }

    .planejamento-estrategico-tabela table > tbody > tr > td > .dot {
        display: block;
        width: 12px;
        height: 12px;
        border-radius: 100%;
        float: left;
        margin: 2px 8px 0 0;
    }

    .planejamento-estrategico-tabela table > tbody > tr > td > .dot.dot-cinza {
        background: #8496B0;
    }

    .planejamento-estrategico-tabela table > tbody > tr > td > .dot.dot-azul {
        background: #333E50;
    }

    .planejamento-estrategico-tabela table > tbody > tr > td > .dot.dot-verde {
        background: #6EAE46;
    }

    .planejamento-estrategico-tabela table > tbody > tr > td > .dot.dot-laranja {
        background: #00963f;
    }

    .planejamento-estrategico-tabela table > tbody > tr > td > .dot.dot-cinza {
        background: #8397B0;
    }

    .planejamento-estrategico-tabela table > tbody > tr > td > .dot.dot-marrom {
        background: #767070;
    }

    .planejamento-estrategico-rodape {
        max-width: 550px;
    }

    .planejamento-estrategico-rodape > p {
        
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 100%;
        color: #222222;
    }

    .modal-custom {
        text-align: center;
    }

    @media screen and (min-width: 768px) {
        .modal-custom:before {
            display: inline-block;
            vertical-align: middle;
            content: " ";
            height: 100%;
        }
    }

    .modal-custom .modal-dialog {
        display: inline-block;
        text-align: left;
        vertical-align: middle;
    }

    #modalPlanejamento .modal-header > h4 {
        
        font-style: normal;
        font-weight: 700;
        font-size: 24px;
        line-height: 150%;
    }

    #modalPlanejamento .modal-body > table > tbody > tr {
        background-color: #FFF;
    }

    #modalPlanejamento .modal-body > table > tbody > tr > td {
        text-align: left !important;
    }

    #modalPlanejamento .modal-body > table > tbody > tr:hover {
        background: #EDEDED;
    }
</style>
<style>
    /* .atendimento-social table thead tr th[colspan="6"] {
min-width: 350px;
}
.atendimento-social table thead tr th[colspan="3"] {
min-width: 350px;
} */
    .atendimento-social table thead tr th[colspan="6"], .atendimento-social table thead tr th[colspan="3"], .atendimento-social table thead tr th[colspan="1"]:nth-child(3n), .atendimento-social table tbody tr td[colspan="1"]:nth-child(3n + 1), .atendimento-social table tbody tr td[colspan="6"] {
        border-right: 2px solid #C0C0C0 !important;
    }

    .atendimento-social table thead tr th[colspan="3"] {
        text-align: center !important;
    }

    .atendimento-social table thead tr th[colspan="6"] {
        text-align: start !important;
    }

    .atendimento-social table thead tr th[colspan="1"] {
        text-align: end !important;
    }

    .atendimento-social table > tbody > tr.objetivo td:last-child {
        font-size: unset;
        
        text-align: end;
    }

    .atendimento-social table > * > tr > [colspan="1"] {
        width: unset !important;
    }

    [data-style="sesi"] .btn-consolidados {
        background: #1E984F;
        border-color: #1E984F;
    }

    [data-style="senai"] .btn-consolidados {
        background: #00963f;
        border-color: #00963f;
    }

    .btn-consolidados {
        border-radius: 8px;
        padding: 12px 45px;
        /* Font */
        
        font-style: normal;
        font-weight: 700;
        font-size: 14px;
        line-height: 16px;
        color: #FFFFFF;
    }

    #modalAtendimentoSocial .modal-body {
        background-color: unset;
        border: unset;
    }

    #modalAtendimentoSocial .modal-lg {
        width: 80% !important;
        max-width: unset !important;
    }

    #modalAtendimentoSocial .modal-lg .modal-body {
        max-height: 70vh !important;
    }

    #modalAtendimentoSocial .modal-lg .modal-body .atendimento-social {
        display: block;
        overflow: scroll;
    }

    /* Brasil */
    .atendimento-social-brasil table > thead > tr > th[colspan="2"], .atendimento-social-brasil table > tbody > tr > td[colspan="2"] {
        text-align: end;
    }

    .atendimento-social-brasil table > tbody > tr > td[colspan="2"]:nth-child(n+4), .atendimento-social-brasil table > tbody > tr.objetivo td[colspan="2"], .atendimento-social-brasil table > tbody > tr.objetivo td[colspan="2"]:last-child {
        font-size: 14px !important;
        text-align: end !important;
    }

    .atendimento-social-brasil table > tbody > tr.objetivo td:nth-child(n + 1) {
        padding-left: 16px;
    }

    .atendimento-social-brasil table > tbody > tr.objetivo, .atendimento-social table > tbody > tr.objetivo {
        cursor: default;
    }

    .atendimento-social > table > thead {
        position: sticky;
        top: 0;
    }

    .atendimento-social > table > thead > tr > th[colspan="3"] {
        min-width: 350px !important;
    }

    .atendimento-social > table > thead > tr > th[colspan="6"] {
        min-width: 350px !important;
    }

    .atendimento-social table > tbody > tr > td:nth-child(n+1) {
        text-align: end;
    }

    .planejamento-estrategico-tabela.atendimento-social table > tbody > tr > td:nth-child(n+2), .planejamento-estrategico-tabela.atendimento-social-brasil table > tbody > tr > td:nth-child(n+2) {
        text-align: end !important;
    }
</style>
<style>
    .planejamento-estrategico-dropdown label {
        font-weight: 700;
    }

    [data-style="sesi"] .planejamento-estrategico-dropdown label {
        color: #009C31;
    }

    [data-style="senai"] .planejamento-estrategico-dropdown label {
        color: #00963f;
    }

    .planejamento-estrategico-dropdown, .planejamento-estrategico-dropdown .dropdown {
        
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
    }

    .planejamento-estrategico-dropdown .dropdown button {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 210px;
        height: 44px;
        background: #FFFFFF;
        border: 1px solid #E4ECF5;
        border-radius: 4px;
        text-align: left;
        color: #CAD9EB;
    }

    .planejamento-estrategico-dropdown .dropdown button.active {
        box-shadow: unset;
        background-color: #fff !important;
    }

    .planejamento-estrategico-dropdown .dropdown button.active span {
        
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
    }

    .planejamento-estrategico-dropdown .dropdown button:hover {
        color: #CAD9EB;
        background-color: #fff;
        border-color: #E4ECF5;
    }

    .planejamento-estrategico-dropdown .dropdown button span {
        width: 100%;
    }

    .planejamento-estrategico-dropdown .dropdown button i {
        font-size: 24px;
    }

    .planejamento-estrategico-dropdown .dropdown ul.dropdown-menu {
        width: 210px;
        background: #FFFFFF;
        border: 1px solid #E4ECF5;
        border-radius: 4px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .planejamento-estrategico-dropdown .dropdown .dropdown-menu>li>a {
        padding: 10px 16px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #657388 !important;
    }

    .planejamento-estrategico-dropdown .dropdown .dropdown-menu>li.active>a {
        border-left-width: 0px !important;
        border-right-width: 0px !important;
    }

    /* Sesi */
    [data-style="sesi"] .planejamento-estrategico-dropdown .dropdown button.active {
        background: #F9FFF9;
        border: 1px solid #E4ECF5
    }

    [data-style="sesi"] .planejamento-estrategico-dropdown .dropdown button.active span {
        color: #0F6D47;
    }

    [data-style="sesi"] .planejamento-estrategico-dropdown .dropdown button i {
        color: #0F6D47;
    }

    [data-style="sesi"] .planejamento-estrategico-dropdown .dropdown .btn-default.active.focus, [data-style="sesi"] .planejamento-estrategico-dropdown .dropdown .btn-default.active:focus, [data-style="sesi"] .planejamento-estrategico-dropdown .dropdown .btn-default.active:hover, [data-style="sesi"] .planejamento-estrategico-dropdown .dropdown .btn-default:active.focus, [data-style="sesi"] .planejamento-estrategico-dropdown .dropdown .btn-default:active:focus, [data-style="sesi"] .planejamento-estrategico-dropdown .dropdown .btn-default:active:hover, [data-style="sesi"] .planejamento-estrategico-dropdown .dropdown .open>.dropdown-toggle.btn-default.focus, [data-style="sesi"] .planejamento-estrategico-dropdown .dropdown .open>.dropdown-toggle.btn-default:focus, [data-style="sesi"] .planejamento-estrategico-dropdown .dropdown .open>.dropdown-toggle.btn-default:hover {
        border-color: #0F6D47;
    }

    [data-style="sesi"] .planejamento-estrategico-dropdown .dropdown .dropdown-menu>li>a {
        color: #657388 !important;
    }

    [data-style="sesi"] .planejamento-estrategico-dropdown .dropdown .dropdown-menu>li.active>a {
        border: 1px solid #E4ECF5;
        background: #F9FFF9;
    }

    /* Senai */
    [data-style="senai"] .planejamento-estrategico-dropdown .dropdown button.active {
        background: #FFFBF6;
        border: 1px solid #E4ECF5;
    }

    [data-style="senai"] .planejamento-estrategico-dropdown .dropdown button.active span {
        color: #9C2B13;
    }

    [data-style="senai"] .planejamento-estrategico-dropdown .dropdown button i {
        color: #00963f;
    }

    [data-style="senai"] .planejamento-estrategico-dropdown .dropdown .btn-default.active.focus, [data-style="senai"] .planejamento-estrategico-dropdown .dropdown .btn-default.active:focus, [data-style="senai"] .planejamento-estrategico-dropdown .dropdown .btn-default.active:hover, [data-style="senai"] .planejamento-estrategico-dropdown .dropdown .btn-default:active.focus, [data-style="senai"] .planejamento-estrategico-dropdown .dropdown .btn-default:active:focus, [data-style="senai"] .planejamento-estrategico-dropdown .dropdown .btn-default:active:hover, [data-style="senai"] .planejamento-estrategico-dropdown .dropdown .open>.dropdown-toggle.btn-default.focus, [data-style="senai"] .planejamento-estrategico-dropdown .dropdown .open>.dropdown-toggle.btn-default:focus, [data-style="senai"] .planejamento-estrategico-dropdown .dropdown .open>.dropdown-toggle.btn-default:hover {
        border-color: #00963f;
    }

    [data-style="senai"] .planejamento-estrategico-dropdown .dropdown .dropdown-menu>li>a {
        color: #9C2B13 !important;
    }

    [data-style="senai"] .planejamento-estrategico-dropdown .dropdown .dropdown-menu>li.active>a {
        border: 1px solid #FFFBF6;
        background: #FFFBF6;
    }
</style>
<style>
    /* Download */
    .planejamento-estrategico-downloads {
        display: flex;
        flex-direction: row;
        gap: 16px;
    }

    .planejamento-estrategico-downloads > .btn.btn-download {
        background-color: transparent;
        border-radius: 8px;
        padding: 12px 16px;
        text-align: center;
        /* font */
        
        font-style: normal;
        font-weight: 700;
        font-size: 14px;
        line-height: 16px;
    }

    [data-style="sesi"] .planejamento-estrategico-downloads > .btn.btn-download {
        border: 1.4px solid #009C31;
        color: #009C31 !important;
    }

    [data-style="senai"] .planejamento-estrategico-downloads > .btn.btn-download {
        border: 1.4px solid #00963f;
        color: #00963f !important;
    }
</style>
<style>
    .si-transparencia-empty {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 48px 0px;
        gap: 80px;
        display:none !important;
    }

    .si-transparencia-empty svg path {
        fill: 1px !important;
    }

    .si-transparencia-empty-label {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        gap: 24px;
        
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
    }

    .si-transparencia-empty-label h4 {
        font-weight: 700;
        font-size: 20px;
        line-height: 28px;
    }

    [data-entidade="sesi"] .si-transparencia-empty-label h4 {
        color: #009c31;
    }

    [data-entidade="senai"] .si-transparencia-empty-label h4 {
        color: #ff862c;
    }

    .si-transparencia-empty-label strong {
        font-weight: 700;
        font-size: 16px;
        line-height: 24px;
    }

    [data-entidade="sesi"] .si-transparencia-empty-label strong {
        color: #005C1D;
    }

    [data-entidade="senai"] .si-transparencia-empty-label strong {
        color: #CC6B23;
    }
</style>
<style>
    #common-space-4768021 {
        height: 48px;
    }
</style>
<style>
    #common-space-4768045 {
        height: 24px;
    }
</style>
<style type="text/css">
    /* Defina a imagem de fundo. */
    .image-size-backgroud-4768049 {
        background-image: url('');
    }

    /*Default ou Centralizado - igual ao plugin de coluna*/
    .image-size-backgroud-4768049 {
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }
</style>
<style type="text/css">
    /* Defina a imagem de fundo. */
    .image-size-backgroud-4768063 {
        background-image: url('');
    }

    /*Default ou Centralizado - igual ao plugin de coluna*/
    .image-size-backgroud-4768063 {
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }
</style>
<style type="text/css">
    /* Defina a imagem de fundo. */
    .image-size-backgroud-4768056 {
        background-image: url('');
    }

    /*Default ou Centralizado - igual ao plugin de coluna*/
    .image-size-backgroud-4768056 {
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }
</style>
<style type="text/css">
    .background-image-4768048 {
        background-image: url('');
    }

    .image-size-backgroud-4768048 {
        background-size: None;
    }
</style>
<style type="text/css">
    /* Defina a imagem de fundo. */
    .image-size-backgroud-4768066 {
        background-image: url('');
    }

    /*Default ou Centralizado - igual ao plugin de coluna*/
    .image-size-backgroud-4768066 {
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }
</style>
<style type="text/css">
    /* Defina a imagem de fundo. */
    .image-size-backgroud-4768068 {
        background-image: url('');
    }

    /*Default ou Centralizado - igual ao plugin de coluna*/
    .image-size-backgroud-4768068 {
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }
</style>
<style type="text/css">
    .background-image-4768065 {
        background-image: url('');
    }

    .image-size-backgroud-4768065 {
        background-size: None;
    }
</style>
<style type="text/css">
    /* Defina a imagem de fundo. */
    .image-size-backgroud-4768080 {
        background-image: url('');
    }

    /*Default ou Centralizado - igual ao plugin de coluna*/
    .image-size-backgroud-4768080 {
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }
</style>
<style type="text/css">
    /* Defina a imagem de fundo. */
    .image-size-backgroud-4768071 {
        background-image: url('');
    }

    /*Default ou Centralizado - igual ao plugin de coluna*/
    .image-size-backgroud-4768071 {
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }
</style>
<style type="text/css">
    .background-image-4768070 {
        background-image: url('');
    }

    .image-size-backgroud-4768070 {
        background-size: None;
    }
</style>
<style type="text/css">
    /* Defina a imagem de fundo. */
    .image-size-backgroud-4768083 {
        background-image: url('');
    }

    /*Default ou Centralizado - igual ao plugin de coluna*/
    .image-size-backgroud-4768083 {
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }
</style>
<style type="text/css">
    .background-image-4768082 {
        background-image: url('');
    }

    .image-size-backgroud-4768082 {
        background-size: None;
    }
</style>
<style type="text/css">
    /* Defina a imagem de fundo. */
    .image-size-backgroud-4768094 {
        background-image: url('');
    }

    /*Default ou Centralizado - igual ao plugin de coluna*/
    .image-size-backgroud-4768094 {
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }
</style>
<style type="text/css">
    /* Defina a imagem de fundo. */
    .image-size-backgroud-4768097 {
        background-image: url('');
    }

    /*Default ou Centralizado - igual ao plugin de coluna*/
    .image-size-backgroud-4768097 {
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }
</style>
<style type="text/css">
    .background-image-4768093 {
        background-image: url('');
    }

    .image-size-backgroud-4768093 {
        background-size: None;
    }
</style>
<style type="text/css">
    /* Defina a imagem de fundo. */
    .image-size-backgroud-4768091 {
        background-image: url('');
    }

    /*Default ou Centralizado - igual ao plugin de coluna*/
    .image-size-backgroud-4768091 {
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }
</style>
<style type="text/css">
    /* Defina a imagem de fundo. */
    .image-size-backgroud-4768086 {
        background-image: url('');
    }

    /*Default ou Centralizado - igual ao plugin de coluna*/
    .image-size-backgroud-4768086 {
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }
</style>
<style type="text/css">
    .background-image-4768085 {
        background-image: url('');
    }

    .image-size-backgroud-4768085 {
        background-size: None;
    }
</style>
<style type="text/css">
    /* Defina a imagem de fundo. */
    .image-size-backgroud-4768022 {
        background-image: url('');
    }

    /*Default ou Centralizado - igual ao plugin de coluna*/
    .image-size-backgroud-4768022 {
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }
</style>
<style type="text/css">
    /* Defina a imagem de fundo. */
    .image-size-backgroud-4768007 {
        background-image: url('');
    }

    /*Default ou Centralizado - igual ao plugin de coluna*/
    .image-size-backgroud-4768007 {
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }
</style>
<style type="text/css">
    .background-image-4768006 {
        background-image: url('');
    }

    .image-size-backgroud-4768006 {
        background-size: None;
    }
</style>
<style>
    .modal-custom {
        text-align: center;
    }

    @media screen and (min-width: 768px) {
        .modal-custom:before {
            display: inline-block;
            vertical-align: middle;
            content: " ";
            height: 100%;
        }
    }

    .modal-custom .modal-dialog {
        display: inline-block;
        text-align: left;
        vertical-align: middle;
    }
</style>
<style>
    #common-space-4768125 {
        height: 24px;
    }
</style>
<style type="text/css">
    /* Defina a imagem de fundo. */
    .image-size-backgroud-4768115 {
        background-image: url('');
    }

    /*Default ou Centralizado - igual ao plugin de coluna*/
    .image-size-backgroud-4768115 {
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }
</style>
<style type="text/css">
    .background-image-4768114 {
        background-image: url('');
    }

    .image-size-backgroud-4768114 {
        background-size: None;
    }
</style>
<style type="text/css">
    /* Defina a imagem de fundo. */
    .image-size-backgroud-4768120 {
        background-image: url('');
    }

    /*Default ou Centralizado - igual ao plugin de coluna*/
    .image-size-backgroud-4768120 {
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }
</style>
<style type="text/css">
    /* Defina a imagem de fundo. */
    .image-size-backgroud-4768122 {
        background-image: url('');
    }

    /*Default ou Centralizado - igual ao plugin de coluna*/
    .image-size-backgroud-4768122 {
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }
</style>
<style type="text/css">
    .background-image-4768119 {
        background-image: url('');
    }

    .image-size-backgroud-4768119 {
        background-size: None;
    }
</style>
<style type="text/css">
    /* Defina a imagem de fundo. */
    .image-size-backgroud-4768127 {
        background-image: url('');
    }

    /*Default ou Centralizado - igual ao plugin de coluna*/
    .image-size-backgroud-4768127 {
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }
</style>
<style type="text/css">
    /* Defina a imagem de fundo. */
    .image-size-backgroud-4768131 {
        background-image: url('');
    }

    /*Default ou Centralizado - igual ao plugin de coluna*/
    .image-size-backgroud-4768131 {
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }
</style>
<style type="text/css">
    .background-image-4768126 {
        background-image: url('');
    }

    .image-size-backgroud-4768126 {
        background-size: None;
    }
</style>
<style>
    #common-space-4768150 {
        height: 24px;
    }
</style>
<style type="text/css">
    /* Defina a imagem de fundo. */
    .image-size-backgroud-4768140 {
        background-image: url('');
    }

    /*Default ou Centralizado - igual ao plugin de coluna*/
    .image-size-backgroud-4768140 {
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }
</style>
<style>
    #common-space-4768148 {
        height: 8px;
    }
</style>
<style type="text/css">
    /* Defina a imagem de fundo. */
    .image-size-backgroud-4768144 {
        background-image: url('');
    }

    /*Default ou Centralizado - igual ao plugin de coluna*/
    .image-size-backgroud-4768144 {
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }
</style>
<style type="text/css">
    .background-image-4768139 {
        background-image: url('');
    }

    .image-size-backgroud-4768139 {
        background-size: None;
    }
</style>
<style>
    #common-space-4768171 {
        height: 24px;
    }
</style>
<style type="text/css">
    /* Defina a imagem de fundo. */
    .image-size-backgroud-4768156 {
        background-image: url('');
    }

    /*Default ou Centralizado - igual ao plugin de coluna*/
    .image-size-backgroud-4768156 {
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }
</style>
<style>
    #common-space-4768164 {
        height: 8px;
    }
</style>
<style type="text/css">
    /* Defina a imagem de fundo. */
    .image-size-backgroud-4768160 {
        background-image: url('');
    }

    /*Default ou Centralizado - igual ao plugin de coluna*/
    .image-size-backgroud-4768160 {
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }
</style>
<style>
    #common-space-4768165 {
        height: 8px;
    }
</style>
<style type="text/css">
    /* Defina a imagem de fundo. */
    .image-size-backgroud-4768166 {
        background-image: url('');
    }

    /*Default ou Centralizado - igual ao plugin de coluna*/
    .image-size-backgroud-4768166 {
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }
</style>
<style type="text/css">
    .background-image-4768155 {
        background-image: url('');
    }

    .image-size-backgroud-4768155 {
        background-size: None;
    }
</style>
<style>
    #common-space-4768209 {
        height: 24px;
    }
</style>
<style type="text/css">
    /* Defina a imagem de fundo. */
    .image-size-backgroud-4768179 {
        background-image: url('');
    }

    /*Default ou Centralizado - igual ao plugin de coluna*/
    .image-size-backgroud-4768179 {
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }
</style>
<style>
    #common-space-4768187 {
        height: 8px;
    }
</style>
<style type="text/css">
    /* Defina a imagem de fundo. */
    .image-size-backgroud-4768183 {
        background-image: url('');
    }

    /*Default ou Centralizado - igual ao plugin de coluna*/
    .image-size-backgroud-4768183 {
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }
</style>
<style>
    #common-space-4768188 {
        height: 8px;
    }
</style>
<style type="text/css">
    /* Defina a imagem de fundo. */
    .image-size-backgroud-4768189 {
        background-image: url('');
    }

    /*Default ou Centralizado - igual ao plugin de coluna*/
    .image-size-backgroud-4768189 {
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }
</style>
<style>
    #common-space-4768193 {
        height: 8px;
    }
</style>
<style type="text/css">
    /* Defina a imagem de fundo. */
    .image-size-backgroud-4768194 {
        background-image: url('');
    }

    /*Default ou Centralizado - igual ao plugin de coluna*/
    .image-size-backgroud-4768194 {
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }
</style>
<style>
    #common-space-4768198 {
        height: 8px;
    }
</style>
<style type="text/css">
    /* Defina a imagem de fundo. */
    .image-size-backgroud-4768199 {
        background-image: url('');
    }

    /*Default ou Centralizado - igual ao plugin de coluna*/
    .image-size-backgroud-4768199 {
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }
</style>
<style>
    #common-space-4768203 {
        height: 8px;
    }
</style>
<style type="text/css">
    /* Defina a imagem de fundo. */
    .image-size-backgroud-4768204 {
        background-image: url('');
    }

    /*Default ou Centralizado - igual ao plugin de coluna*/
    .image-size-backgroud-4768204 {
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }
</style>
<style type="text/css">
    .background-image-4768178 {
        background-image: url('');
    }

    .image-size-backgroud-4768178 {
        background-size: None;
    }
</style>
<style>
    #common-space-4768223 {
        height: 24px;
    }
</style>
<style type="text/css">
    /* Defina a imagem de fundo. */
    .image-size-backgroud-4768213 {
        background-image: url('');
    }

    /*Default ou Centralizado - igual ao plugin de coluna*/
    .image-size-backgroud-4768213 {
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }
</style>
<style>
    #common-space-4768221 {
        height: 8px;
    }
</style>
<style type="text/css">
    /* Defina a imagem de fundo. */
    .image-size-backgroud-4768217 {
        background-image: url('');
    }

    /*Default ou Centralizado - igual ao plugin de coluna*/
    .image-size-backgroud-4768217 {
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }
</style>
<style type="text/css">
    .background-image-4768212 {
        background-image: url('');
    }

    .image-size-backgroud-4768212 {
        background-size: None;
    }
</style>
<style>
    #common-space-4768239 {
        height: 24px;
    }
</style>
<style type="text/css">
    /* Defina a imagem de fundo. */
    .image-size-backgroud-4768229 {
        background-image: url('');
    }

    /*Default ou Centralizado - igual ao plugin de coluna*/
    .image-size-backgroud-4768229 {
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }
</style>
<style>
    #common-space-4768237 {
        height: 8px;
    }
</style>
<style type="text/css">
    /* Defina a imagem de fundo. */
    .image-size-backgroud-4768233 {
        background-image: url('');
    }

    /*Default ou Centralizado - igual ao plugin de coluna*/
    .image-size-backgroud-4768233 {
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }
</style>
<style type="text/css">
    .background-image-4768228 {
        background-image: url('');
    }

    .image-size-backgroud-4768228 {
        background-size: None;
    }
</style>
<style type="text/css">
    /* Defina a imagem de fundo. */
    .image-size-backgroud-3527910 {
        background-image: url('');
    }

    /*Default ou Centralizado - igual ao plugin de coluna*/
    .image-size-backgroud-3527910 {
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }
</style>
<style type="text/css">
    /* Defina a imagem de fundo. */
    .image-size-backgroud-3527913 {
        background-image: url('');
    }

    /*Default ou Centralizado - igual ao plugin de coluna*/
    .image-size-backgroud-3527913 {
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }
</style>
<style type="text/css">
    /* Defina a imagem de fundo. */
    .image-size-backgroud-3527915 {
        background-image: url('');
    }

    /*Default ou Centralizado - igual ao plugin de coluna*/
    .image-size-backgroud-3527915 {
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }
</style>
<style type="text/css">
    /* Defina a imagem de fundo. */
    .image-size-backgroud-3527919 {
        background-image: url('');
    }

    /*Default ou Centralizado - igual ao plugin de coluna*/
    .image-size-backgroud-3527919 {
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }
</style>
<style>
    .alt-ta-in {
        display: flex;
        margin-left: -32px;
        align-items: baseline;
    }

    .mt-4px-negative {
        margin-top: -4px !important;
    }
</style>
<style>
    .d-flexx {
        display: flex;
        flex-wrap: wrap;
    }

    .socials-draw {
        /*border: 1px solid white;
border-radius: 50px;*/
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
    }

    .socials-draw div {
        width: 24px;
        height: 24px;
        background-color: white;
    }

    .socials-draw:hover {
        border: 1px solid #337ab7;
    }

    .socials-draw:hover div {
        background-color: #337ab7;
    }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" defer></script>
<style>
    /* nt = novo transparencia */
    /* 
        Calibre Light
        Calibre Regular
        Calibre Medium
        Calibre Semibold
        Calibre Bold
    */
    .nt-lead .nt-lead-textos h2 {
        
        font-style: normal;
        font-weight: 600 !important;
        font-size: 24px !important;
        line-height: 130%;
    }

    .nt-lead .nt-lead-textos p {
        
        font-style: normal;
        font-weight: 400;
        font-size: 16px !important;
        line-height: 150%;
        color: #222222;
    }

    .nt-lead .nt-lead-textos strong, .nt-lead .nt-lead-textos p > strong {
        
        font-style: normal;
        font-weight: 700;
        font-size: 16px !important;
        line-height: 130%;
        color: #222222;
    }
</style>
        <main class="main container" id="main">
            <div class="cont cl">
                <div class="row">
                    <section class="col-md-9">
                        <div class="materia">
                            <div id="id-4768000" class="mobile-fallback background-image-4768000 image-size-backgroud-4768000 image-repeat-backgroud-4768000 None row nt nt-lead" style="">
                                    <div class="nt-lead-textos col-xs-12 col-sm-12 col-md-12 col-lg-12  image-size-backgroud-4768001 image-mobile-background-4768001" style="">
                                        <p>
                                            <br>Na Demonstração de Resultados, publicada pelo SESI/AP, você conhecerá o valor gerado pelo SESI para a indústria, seus trabalhadores e dependentes,  bem como para a sociedade.
                                        </p>
                                        <p>
                                            <br>
                                            <strong>Acesse as abas abaixo para conhecer os componentes da Demonstração de Resultados.</strong>
                                        </p>
                                        <p></p>
                                    </div>
                                </div>
                                <div id="id-4768006" class="mobile-fallback background-image-4768006 image-size-backgroud-4768006 image-repeat-backgroud-4768006 None row nt nt-sesi" style="">
                                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12  image-size-backgroud-4768007 image-mobile-background-4768007" style="">
                                        <div>
                                            <!-- Nav tabs -->
                                            <ul class="nav nav-tabs custom-nav-tabs" role="tablist">
                                                <li role="presentation" class="active" style="width: 33.3333333333%;">
                                                    <a href="#atendimento-social" aria-controls="atendimento-social" role="tab" data-toggle="tab">Atendimento Social</a>
                                                </li>
                                                <li role="presentation" style="width: 33.3333333333%;">
                                                    <a href="#plano-estrategico-sistemico" aria-controls="plano-estrategico-sistemico" role="tab" data-toggle="tab">Plano Estratégico</a>
                                                </li>
                                                <li role="presentation" style="width: 33.3333333333%;">
                                                    <a href="#relatorio-de-gestao-ap" aria-controls="relatorio-de-gestao-ap" role="tab" data-toggle="tab">Relatório de Gestão</a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="tab-content">
                                        
                                            <div role="tabpanel" class="tab-pane fade in active" id="atendimento-social" align="justify" >
                                                <p>Veja aqui os resultados consolidados dos serviços de Educação Profissional e Tecnologia e Inovação realizados pelo SESI/AP.</p>
                                                <div id="common-space-4768109" class="common-space-cms"></div>
                                                <div id="planejamento-4768110" class="planejamento-estrategico" data-style="sesi" data-modulo="" data-entidade="SESI" data-departamento="SESI-AP">
                                                    <div class="planejamento-estrategico-controles">
                                                        <div style="display: flex; flex-direction: row; gap: 12px;">
                                                            <div class="planejamento-estrategico-dropdown dropdown-atendimento-social-ano">
                                                                <label>Ano</label>
                                                                <div class="dropdown">
                                                                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownAno" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                                                        <span>Selecionar período</span>
                                                                        <i class="fa fa-angle-down" aria-hidden="true"></i>
                                                                    </button>
                                                                    <ul class="dropdown-menu" aria-labelledby="dropdownAno">
                                                                        <li class="active"><a href="javascript:void(0)" data-ano="2026">2026</a></li><li ><a href="javascript:void(0)" data-ano="2025">2025</a></li><li ><a href="javascript:void(0)" data-ano="2024">2024</a></li><li ><a href="javascript:void(0)" data-ano="2023">2023</a></li><li ><a href="javascript:void(0)" data-ano="2022">2022</a></li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="planejamento-estrategico-downloads">
                                                            <button class="btn btn-success btn-download" data-format="xlsx">Salvar (XLSX)</button>
                                                            <button class="btn btn-success btn-download" data-format="ods">Salvar (ODS)</button>
                                                        </div>
                                                    </div>
                                                    <div class="planejamento-estrategico-tabela atendimento-social">
                                                        <table>
                                                            <thead>
                                                                <tr class="com-borda">
                                                                    <th colspan="6">Ações Finalísticas</th>
                                                                    <th colspan="1">
                                                                        Previsão<br>Anual
                                                                    </th>
                                                                    <th colspan="1" class="periodo">
                                                                        Realizado<br>(Jan-Jun)
                                                                    </th>
                                                                    <th colspan="1">% Execução</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody></tbody>
                                                        </table>
                                                    </div>
                                                    <div class="si-transparencia-empty">
                                                        <div class="si-transparencia-empty-label">
                                                            <h4>Desculpe! Não há dados disponíveis para sua busca no momento.</h4>
                                                            <div>
                                                                <strong>Tente outra vez!</strong>
                                                                <p>Selecione outro período para localizar o que procura.</p>
                                                            </div>
                                                        </div>
                                                        <div class="si-transparencia-empty-imagem">
                                                            <img src="https://staticportaldaindustria.azureedge.net/static/si_transparencia/imgs/sesi-empty.png">
                                                        </div>
                                                    </div>
                                                    <div class="planejamento-estrategico-rodape">
                                                        <p>Fonte: SESI AP</p>
                                                        <p>Notas:</p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div role="tabpanel" class="tab-pane fade in" id="plano-estrategico-sistemico">
						<p> Além dos compromissos pactuados com o Plano Estratégico do SESI – 2025-2027, o Departamento Regional – SESI/AP desenvolveu um planejamento específico para atender às suas demandas locais.
                                                <p>Selecione uma das abas para conhecer a atuação estratégica do Departamento Regional – SESI/AP, seja em sua contribuição para o Plano Estratégico Sistêmico 2025-2027 ou para atender às demandas locais.</p>
                                                </p>
                                                <p>
                                                    <strong>Na sequência, clique em cada indicador para conhecer os parâmetros que monitoram o desempenho das metas e correlacione ao mapa utilizando as cores de cada perspectiva.</strong>
                                                    <br>
                                                </p>
                                                <div id="common-space-4768021" class="common-space-cms"></div>
                                              <!--  <button class="accordionn">Plano Estratégico do Departamento Regional SESI/AP</button> -->
                                                <div class="panell">
                                                    <div class="modal fade modal-custom modal-planejamento-4768103" id="modalPlanejamento" tabindex="-1" role="dialog" data-style="sesi">
                                                        <div class="modal-dialog modal-md" role="document">
                                                            <div class="modal-content">
                                                                <div class="modal-header">
                                                                    <button class="close" data-dismiss="modal" type="button">
                                                                        <span>×</span>
                                                                    </button>
                                                                    <h4 class="modal-title" style="margin-bottom: 24px;">Detalhe do Indicador</h4>
                                                                </div>
                                                                <div class="modal-body planejamento-estrategico-tabela">
                                                                    <table>
                                                                        <thead>
                                                                            <tr>
                                                                                <th colspan="2" id="indicador">-</th>
                                                                            </tr>
                                                                        </thead>
                                                                        <tbody>
                                                                            <tr>
                                                                                <td colspan="1">Foco de Atuação</td>
                                                                                <td colspan="1" id="focoAtuacao">-</td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td colspan="1">Objetivo Estratégico Associado</td>
                                                                                <td colspan="1" id="objtEstrategico">-</td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td colspan="1">Descrição do Objetivo</td>
                                                                                <td colspan="1" id="descricaoObjetivoEstrategico">-</td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td colspan="1">Fórmula de Cálculo</td>
                                                                                <td colspan="1" id="formulaCalculo">-</td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td colspan="1">Fonte</td>
                                                                                <td colspan="1" id="fontePlanejamento">-</td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td colspan="1">Unidade de Medida</td>
                                                                                <td colspan="1" id="unidadeMedida">-</td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td colspan="1">Acumulação</td>
                                                                                <td colspan="1" id="acumulacao">-</td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td colspan="1">Periodicidade de Apuração</td>
                                                                                <td colspan="1" id="periodicidadeApuracao">-</td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td colspan="1">Polaridade</td>
                                                                                <td colspan="1" id="polaridade">-</td>
                                                                            </tr>
                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                            </div>
                                                            <!-- /.modal-content -->
                                                        </div>
                                                        <!-- /.modal-dialog -->
                                                    </div>
                                                    <!-- /.modal -->
                                                    <div id="planejamento-4768103" class="planejamento-estrategico" data-style="sesi" data-modulo="especifico" data-entidade="SESI" data-departamento="SESI-AP">
                                                        <div class="planejamento-estrategico-controles">
                                                            <div class="planejamento-estrategico-dropdown dropdown-atendimento-social-ano">
                                                                <label>Ano</label>
                                                                <div class="dropdown">
                                                                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownAno" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                                                        <span>Selecionar período</span>
                                                                        <i class="fa fa-angle-down" aria-hidden="true"></i>
                                                                    </button>
                                                                    <ul class="dropdown-menu" aria-labelledby="dropdownAno">
                                                                    <li class="active"><a href="javascript:void(0)" data-sigla="SESI" data-departamento="SESI-AP" data-ano="2026">2026</a></li><li ><a href="javascript:void(0)" data-sigla="SESI" data-departamento="SESI-AP" data-ano="2025">2025</a></li><li ><a href="javascript:void(0)" data-sigla="SESI" data-departamento="SESI-AP" data-ano="2024">2024</a></li><li ><a href="javascript:void(0)" data-sigla="SESI" data-departamento="SESI-AP" data-ano="2023">2023</a></li><li ><a href="javascript:void(0)" data-sigla="SESI" data-departamento="SESI-AP" data-ano="2022">2022</a></li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                            <div class="planejamento-estrategico-downloads">
                                                                <button class="btn btn-success btn-download" data-format="xlsx">Salvar (XLSX)</button>
                                                                <button class="btn btn-success btn-download" data-format="ods">Salvar (ODS)</button>
                                                                                                                        </div>
                                                        </div>
                                                        <div class="planejamento-estrategico-tabela">
                                                            <table>
                                                                <thead>
                                                                    <tr>
                                                                        <th colspan="6">Indicadores Estratégicos</th>
                                                                        <th colspan="2" id="meta">
                                                                            Meta<br>(Jan - Dez)
                                                                        </th>
                                                                        <th colspan="2" id="realizado">
                                                                            Realizado<br>(Jan - Mar)
                                                                        </th>
                                                                        <th colspan="2">
                                                                            Índice de<br>realização¹
                                                                        </th>
                                                                        <th colspan="1"></th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody></tbody>
                                                               
                                                            </table>
                                                        </div>
                                                        <div class="planejamento-estrategico-rodape">
                                                            <p>Fonte: SESI AP</p>
                                                            <p>Notas:</p>
                                                           <p>1 Corresponde ao índice de realização da meta anual</p>
                                                            <p>2 Indicador de apuração anual</p>
                                                            <p>3 Indicador de apuração bienal</p>
                                                            <p>4 Indicador de apuração trimestral</p>
                                                        </div>
                                                        <div class="si-transparencia-empty">
                                                            <div class="si-transparencia-empty-label">
                                                                <h4>Desculpe! Não há dados disponíveis para sua busca no momento.</h4>
                                                                <div>
                                                                    <strong>Tente outra vez!</strong>
                                                                    <p>Selecione outro período para localizar o que procura.</p>
                                                                </div>
                                                            </div>
                                                            <div class="si-transparencia-empty-imagem">
                                                                <img src="https://staticportaldaindustria.azureedge.net/static/si_transparencia/imgs/sesi-empty.png">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <button class="accordionn">Plano Estratégico Sistêmico - 2025 - 2027</button>
                                                <div class="panell">
                                                    <div class="modal fade modal-custom modal-planejamento-4768106" id="modalPlanejamento" tabindex="-1" role="dialog" data-style="sesi">
                                                        <div class="modal-dialog modal-md" role="document">
                                                            <div class="modal-content">
                                                                <div class="modal-header">
                                                                    <button class="close" data-dismiss="modal" type="button">
                                                                        <span>×</span>
                                                                    </button>
                                                                    <h4 class="modal-title" style="margin-bottom: 24px;">Detalhe do Indicador</h4>
                                                                </div>
                                                                <div class="modal-body planejamento-estrategico-tabela">
                                                                    <table>
                                                                        <thead>
                                                                            <tr>
                                                                                <th colspan="2" id="indicador">-</th>
                                                                            </tr>
                                                                        </thead>
                                                                        <tbody>
                                                                            <tr>
                                                                                <td colspan="1">Foco de Atuação</td>
                                                                                <td colspan="1" id="focoAtuacao">-</td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td colspan="1">Objetivo Estratégico Associado</td>
                                                                                <td colspan="1" id="objtEstrategico">-</td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td colspan="1">Descrição do Objetivo</td>
                                                                                <td colspan="1" id="descricaoObjetivoEstrategico">-</td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td colspan="1">Fórmula de Cálculo</td>
                                                                                <td colspan="1" id="formulaCalculo">-</td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td colspan="1">Fonte</td>
                                                                                <td colspan="1" id="fontePlanejamento">-</td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td colspan="1">Unidade de Medida</td>
                                                                                <td colspan="1" id="unidadeMedida">-</td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td colspan="1">Acumulação</td>
                                                                                <td colspan="1" id="acumulacao">-</td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td colspan="1">Periodicidade de Apuração</td>
                                                                                <td colspan="1" id="periodicidadeApuracao">-</td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td colspan="1">Polaridade</td>
                                                                                <td colspan="1" id="polaridade">-</td>
                                                                            </tr>
                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                            </div>
                                                            <!-- /.modal-content -->
                                                        </div>
                                                        <!-- /.modal-dialog -->
                                                    </div>
                                                    <!-- /.modal -->
                                                    <div id="planejamento-4768106" class="planejamento-estrategico" data-style="sesi" data-modulo="sistemico" data-entidade="SESI" data-departamento="SESI-AP">
                                                        <div class="planejamento-estrategico-controles">
                                                            <div class="planejamento-estrategico-dropdown dropdown-atendimento-social-ano">
                                                                <label>Ano</label>
                                                                <div class="dropdown">
                                                                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownAno" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                                                        <span>Selecionar período</span>
                                                                        <i class="fa fa-angle-down" aria-hidden="true"></i>
                                                                    </button>
                                                                    <ul class="dropdown-menu" aria-labelledby="dropdownAno">
                                                                    <li class="active"><a href="javascript:void(0)" data-sigla="SESI" data-departamento="SESI-AP" data-ano="2026">2026</a></li><li ><a href="javascript:void(0)" data-sigla="SESI" data-departamento="SESI-AP" data-ano="2025">2025</a></li><li ><a href="javascript:void(0)" data-sigla="SESI" data-departamento="SESI-AP" data-ano="2024">2024</a></li><li ><a href="javascript:void(0)" data-sigla="SESI" data-departamento="SESI-AP" data-ano="2023">2023</a></li><li ><a href="javascript:void(0)" data-sigla="SESI" data-departamento="SESI-AP" data-ano="2022">2022</a></li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                            <div class="planejamento-estrategico-downloads">
                                                                <button class="btn btn-success btn-download" data-format="xlsx">Salvar (XLSX)</button>
                                                                <button class="btn btn-success btn-download" data-format="ods">Salvar (ODS)</button>
                                                            </div>
                                                        </div>
                                                        <div class="planejamento-estrategico-tabela">
                                                            <table>
                                                                <thead>
                                                                    <tr>
                                                                        <th colspan="3">Indicadores Estratégicos</th>
                                                                        <th colspan="3">Objetivo Estratégico</th>
                                                                        <th colspan="2" id="meta">
                                                                            Meta<br>(Jan - Dez)
                                                                        </th>
                                                                        <th colspan="2" id="realizado">
                                                                            Realizado<br>(Jan - Mar)
                                                                        </th>
                                                                        <th colspan="2">
                                                                            Índice de<br>realização¹
                                                                        </th>
                                                                        <th colspan="1"></th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody></tbody>
                                                            </table>
                                                        
                                                            </div>
                                                        <div class="planejamento-estrategico-rodape">
                                                            <p>Fonte: SESI AP</p>
                                                            <p>Notas:</p>
                                                            <p>1 Corresponde ao índice de realização da meta anual</p>
                                                            <p>2 Indicador de apuração anual</p>
                                                            <p>3 Indicador de apuração bienal</p>
                                                            <p>4 Indicador de apuração trimestral</p>
                        
                                                            </div>
                                                            
                                                          <style>
                                                        .download-link {
                                                            display: flex;
                                                            align-items: center;
                                                            gap: 10px;
                                                            text-decoration: none;
                                                            color: inherit;
                                                            padding: 10px;
                                                            border-radius: 6px;
                                                            transition: background 0.2s ease;
                                                        }

                                                        .download-link:hover {
                                                            background-color: #f5f5f5;
                                                        }

                                                        .download-link img {
                                                            width: 20px;
                                                            height: auto;
                                                        }

                                                        .download-text {
                                                            margin: 0 8px;
                                                            font-weight: bold;
                                                        }

                                                        .download-info {
                                                            display: flex;
                                                            align-items: center;
                                                            gap: 5px;
                                                            color: #00963F;
                                                        }

                                                        .download-info svg {
                                                            stroke: #00963F;
                                                        }
                                                        </style>

                                                        <a href="https://www.ap.sesi.org.br/transparencia-sesi/wp-content/uploads/2025/05/SESI_Mapa-Estrategico-Sistemico-2025-2027_.pdf"
                                                        class="download-link"
                                                        target="_blank"
                                                        title="Download Mapa Estratégico Sistêmico"
                                                        download>

                                                        <!-- Ícone PDF -->
                                                        <img src="https://staticportaldaindustria.azureedge.net/static/si_download/icons/pdf.svg" alt="Ícone PDF">

                                                        <!-- Texto -->
                                                        <span class="download-text">Abrir Mapa Estratégico Sistêmico em PDF</span>

                                                        <!-- Info do arquivo -->
                                                        <span class="download-info">
                                                            <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M17.0209 12.2103V14.3156C17.0209 14.897 16.5496 15.3682 15.9683 15.3682H2.28408C1.70272 15.3682 1.23145 14.897 1.23145 14.3156V12.2103M4.38934 6.42087L9.12548 11.1577L13.8623 6.42087H11.2307V1.68403C11.2307 1.39335 10.9951 1.15771 10.7044 1.15771H7.54653C7.25586 1.15771 7.02022 1.39335 7.02022 1.68403V6.42087H4.38934Z"
                                                                stroke-linecap="round" stroke-linejoin="round"/>
                                                            </svg>
                                                            <span>119 Kb</span>
                                                        </span>






                                                        <div class="si-transparencia-empty">
                                                            <div class="si-transparencia-empty-label">
                                                                <h4>Desculpe! Não há dados disponíveis para sua busca no momento.</h4>
                                                                <div>
                                                                    <strong>Tente outra vez!</strong>
                                                                    <p>Selecione outro período para localizar o que procura.</p>
                                                                </div>
                                                            </div>
                                                            <div class="si-transparencia-empty-imagem">
                                                                <img src="https://staticportaldaindustria.azureedge.net/static/si_transparencia/imgs/sesi-empty.png">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
<div role="tabpanel" class="tab-pane fade in" id="relatorio-de-gestao-ap">
    <p>
        Conheça as ações planejadas e executadas anualmente pelo SESI/AP para o aumento da competitividade
        industrial e a equidade social. O Relatório de Gestão, sob forma de relato integrado, é elaborado
        conforme orientações do Tribunal de Contas da União (TCU).
    </p>

    <p class="relatorio-download-texto">
        <strong>Clique nos relatórios abaixo para fazer download.</strong>
    </p>

    <section class="nt-downloads">
        <a href="https://www.ap.sesi.org.br/transparencia-sesi/storage/2026/03/Relatorio-de-Gestao-2025_SESI-AP.pdf" target="_blank" class="si-download" download>
            <section>
                <div>
                    <p>Relatório de Gestão</p>
                    <h4>2025</h4>
                </div>
                <div>
                    <span>12 Mb</span>
                </div>
            </section>
            <img src="https://static.portaldaindustria.com.br/media/./sesi-icon-download.svg" alt="Download">
        </a>

        <a href="https://www.ap.sesi.org.br/transparencia-sesi/storage/2025/03/Relatorio-de-Gestao-2024_SESI-AP.pdf" target="_blank" class="si-download" download>
            <section>
                <div>
                    <p>Relatório de Gestão</p>
                    <h4>2024</h4>
                </div>
                <div>
                    <span>60 Mb</span>
                </div>
            </section>
            <img src="https://static.portaldaindustria.com.br/media/./sesi-icon-download.svg" alt="Download">
        </a>

        <a href="https://www.ap.sesi.org.br/transparencia-sesi/wp-content/uploads/2024/03/Relatorio-de-Gestao-2023-SESI-AP-vf.pdf" target="_blank" class="si-download" download>
            <section>
                <div>
                    <p>Relatório de Gestão</p>
                    <h4>2023</h4>
                </div>
                <div>
                    <span>19,7 Mb</span>
                </div>
            </section>
            <img src="https://static.portaldaindustria.com.br/media/./sesi-icon-download.svg" alt="Download">
        </a>

        <a href="URL_DO_2022" target="_blank" class="si-download" download>
            <section>
                <div>
                    <p>Relatório de Gestão</p>
                    <h4>2022</h4>
                </div>
                <div>
                    <span>17,4 Mb</span>
                </div>
            </section>
            <img src="https://static.portaldaindustria.com.br/media/./sesi-icon-download.svg" alt="Download">
        </a>

        <a href="URL_DO_2021" target="_blank" class="si-download" download>
            <section>
                <div>
                    <p>Relatório de Gestão</p>
                    <h4>2021</h4>
                </div>
                <div>
                    <span>2,7 Mb</span>
                </div>
            </section>
            <img src="https://static.portaldaindustria.com.br/media/./sesi-icon-download.svg" alt="Download">
        </a>
    </section>
</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </div>
                </div>
            </main>
            <script>
            var acc = document.getElementsByClassName("accordionn");
            var i;

            for (i = 0; i < acc.length; i++) {
                acc[i].addEventListener("click", function() {
                    closeAllAccordions(acc);
                    this.classList.toggle("aactive");
                    var panel = this.nextElementSibling;
                    if (panel.style.maxHeight) {
                    panel.style.maxHeight = null;
                    } else {
                    panel.style.maxHeight = panel.scrollHeight + "px";
                    } 
                });
            }

            function closeAllAccordions(acc) {
                var panels = document.getElementsByClassName("panell");
                var a = 0;
                for (i = 0; i < acc.length; i++) {
                    acc[i].classList.remove("aactive");
                }
                for (i = 0; i < panels.length; i++) {
                    panels[i].style.maxHeight = null;
                }
            }
            </script>
            {"id":1521,"date":"2021-03-23T19:13:01","date_gmt":"2021-03-23T19:13:01","guid":{"rendered":"http:\/\/www.ap.sesi.org.br\/transparencia-sesi\/?page_id=1521"},"modified":"2023-03-10T20:14:40","modified_gmt":"2023-03-10T20:14:40","slug":"demonstracao-de-resultados","status":"publish","type":"page","link":"https:\/\/www.ap.sesi.org.br\/transparencia-sesi\/demonstracao-de-resultados\/","title":{"rendered":"Demonstra\u00e7\u00e3o de Resultados"},"content":{"rendered":"\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/www.ap.sesi.org.br\/transparencia-sesi\/wp-json\/wp\/v2\/pages\/1521"}],"collection":[{"href":"https:\/\/www.ap.sesi.org.br\/transparencia-sesi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ap.sesi.org.br\/transparencia-sesi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ap.sesi.org.br\/transparencia-sesi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ap.sesi.org.br\/transparencia-sesi\/wp-json\/wp\/v2\/comments?post=1521"}],"version-history":[{"count":90,"href":"https:\/\/www.ap.sesi.org.br\/transparencia-sesi\/wp-json\/wp\/v2\/pages\/1521\/revisions"}],"predecessor-version":[{"id":2784,"href":"https:\/\/www.ap.sesi.org.br\/transparencia-sesi\/wp-json\/wp\/v2\/pages\/1521\/revisions\/2784"}],"wp:attachment":[{"href":"https:\/\/www.ap.sesi.org.br\/transparencia-sesi\/wp-json\/wp\/v2\/media?parent=1521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}