Organograma Inspetorial

#organograma-inspetorial { –org-largura-util: 1130px; –org-mapa-largura: 1900px; –org-mapa-altura: 1700px; –org-zoom: .56; –org-stage-w: 1064px; –org-stage-h: 952px; –org-azul: #0076a8; –org-azul-escuro: #005f89; –org-texto: #1d1d1f; –org-fundo: #f7fafc; –org-branco: #ffffff; –org-borda: #e6edf2; –org-linha: rgba(0, 0, 0, 0.6); –org-sombra: 0 14px 35px rgba(0, 0, 0, 0.12); –org-raio: 18px; org-texto); width: 100vw; max-width: none; margin-left: calc(50% – 50vw); margin-right: calc(50% – 50vw); padding: 40px 20px; overflow: visible; } #organograma-inspetorial * { box-sizing: border-box; } #organograma-inspetorial .org-zoom-radio { position: absolute; opacity: 0; pointer-events: none; } #org-z-45:checked ~ .org-area { –org-zoom: .45; –org-stage-w: 855px; –org-stage-h: 765px; } #org-z-56:checked ~ .org-area { –org-zoom: .56; –org-stage-w: 1064px; –org-stage-h: 952px; } #org-z-72:checked ~ .org-area { –org-zoom: .72; –org-stage-w: 1368px; –org-stage-h: 1224px; } #org-z-100:checked ~ .org-area { –org-zoom: 1; –org-stage-w: 1900px; –org-stage-h: 1700px; } #organograma-inspetorial .org-area { width: 100%; max-width: var(–org-largura-util); margin: 0 auto; } #organograma-inspetorial .org-toolbar { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 10px; } #organograma-inspetorial .org-zoom-btn { border: 1px solid #dcebf3; background: #ffffff; org-azul-escuro); border-radius: 999px; padding: 8px 13px; font-size: 0.85rem; font-weight: 700; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06); user-select: none; } #organograma-inspetorial .org-zoom-btn:hover { background: #f3f8fb; } #org-z-45:checked ~ .org-area label[for=”org-z-45″], #org-z-56:checked ~ .org-area label[for=”org-z-56″], #org-z-72:checked ~ .org-area label[for=”org-z-72″], #org-z-100:checked ~ .org-area label[for=”org-z-100″] { background: var(–org-azul); border-org-azul); } #organograma-inspetorial .org-help { width: 100%; margin: 0 0 14px; padding: 12px 16px; border-radius: 16px; background: #ffffff; border: 1px solid #e2e8ee; font-size: 0.9rem; line-height: 1.45; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05); } #organograma-inspetorial .org-help strong { org-azul-escuro); } #organograma-inspetorial .org-viewport { position: relative; width: 100%; height: 850px; min-height: 620px; background: linear-gradient(180deg, #ffffff 0%, var(–org-fundo) 100%); border: 1px solid var(–org-borda); border-radius: 28px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); overflow: auto; -webkit-overflow-scrolling: touch; } #organograma-inspetorial .org-stage { width: var(–org-stage-w); height: var(–org-stage-h); position: relative; margin: 0 auto; } #organograma-inspetorial .org-canvas { position: absolute; left: 0; top: 0; width: var(–org-mapa-largura); height: var(–org-mapa-altura); transform: scale(var(–org-zoom)); transform-origin: 0 0; } #organograma-inspetorial .org-lines { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; } #organograma-inspetorial .org-lines line, #organograma-inspetorial .org-lines polyline { stroke: var(–org-linha); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; fill: none; } #organograma-inspetorial .org-lines .org-dashed { stroke-dasharray: 7 7; } #organograma-inspetorial .org-node { position: absolute; z-index: 2; } #organograma-inspetorial .node-inspetor { left: 630px; top: 40px; width: 260px; } #organograma-inspetorial .node-vice-inspetor { left: 630px; top: 300px; width: 260px; } #organograma-inspetorial .node-familia { left: 1290px; top: 300px; width: 320px; } #organograma-inspetorial .node-conselho { left: 290px; top: 530px; width: 310px; } #organograma-inspetorial .node-secretario { left: 325px; top: 650px; width: 285px; } #organograma-inspetorial .node-comunicacao { left: 890px; top: 655px; width: 340px; } #organograma-inspetorial .node-economo { left: 400px; top: 900px; width: 260px; } #organograma-inspetorial .node-escritorio { left: 120px; top: 965px; width: 250px; } #organograma-inspetorial .node-escritorio-complemento { left: 120px; top: 1070px; width: 250px; } #organograma-inspetorial .node-captacao { left: 400px; top: 1135px; width: 260px; } #organograma-inspetorial .node-pastoral { left: 890px; top: 900px; width: 260px; } #organograma-inspetorial .node-formacao { left: 1200px; top: 900px; width: 260px; } #organograma-inspetorial .node-ref-am { left: 880px; top: 1160px; width: 115px; } #organograma-inspetorial .node-ref-av { left: 1005px; top: 1160px; width: 115px; } #organograma-inspetorial .node-ref-ajs { left: 1130px; top: 1160px; width: 115px; } #organograma-inspetorial .node-osj { left: 1255px; top: 1160px; width: 115px; } #organograma-inspetorial .node-pjs { left: 1380px; top: 1160px; width: 125px; } #organograma-inspetorial .node-coord-ies { left: 340px; top: 1480px; width: 220px; } #organograma-inspetorial .node-coord-escolas { left: 610px; top: 1480px; width: 220px; } #organograma-inspetorial .node-coord-obras { left: 880px; top: 1480px; width: 220px; } #organograma-inspetorial .node-coord-paroquias { left: 1150px; top: 1480px; width: 220px; } #organograma-inspetorial .node-ref-adma { left: 1250px; top: 590px; width: 90px; } #organograma-inspetorial .node-ref-eeaa { left: 1345px; top: 590px; width: 90px; } #organograma-inspetorial .node-ref-sscc { left: 1440px; top: 590px; width: 90px; } #organograma-inspetorial .node-ref-vdb { left: 1535px; top: 590px; width: 90px; } #organograma-inspetorial .org-card { display: block; width: 100%; border: 0; border-radius: var(–org-raio); background: var(–org-branco); box-shadow: var(–org-sombra); cursor: pointer; padding: 16px; text-align: center; org-texto); text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; } #organograma-inspetorial .org-card:hover, #organograma-inspetorial .org-card:focus-visible { transform: translateY(-3px); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.16); outline: none; } #organograma-inspetorial .org-card-person { min-height: 215px; } #organograma-inspetorial .org-card-group { min-height: 82px; display: flex; align-items: center; justify-content: center; background: #ffffff; border: 1px solid #dcebf3; } #organograma-inspetorial .org-card-list { min-height: 155px; background: #ffffff; border: 1px solid #dcebf3; text-align: left; padding: 16px 18px; } #organograma-inspetorial .org-card-list-title { display: inline-block; background: var(–org-azul); padding: 7px 14px; border-radius: 10px; font-size: 0.88rem; font-weight: 800; margin-bottom: 10px; } #organograma-inspetorial .org-card-list ol { margin: 0; padding-left: 18px; font-size: 0.84rem; line-height: 1.45; font-weight: 700; } #organograma-inspetorial .org-card-ref { height: 190px; padding: 12px 8px; background: var(–org-branco); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; } #organograma-inspetorial .org-card-pastoral-ref { height: 210px; padding: 12px 8px; background: var(–org-branco); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; } #organograma-inspetorial .org-card-pastoral-text { height: 210px; padding: 14px 8px; background: var(–org-branco); display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #dcebf3; } #organograma-inspetorial .org-card-bottom { min-height: 92px; display: flex; align-items: center; justify-content: center; background: #ffffff; border: 1px solid #dcebf3; } #organograma-inspetorial .org-photo { width: 98px; height: 98px; margin: 0 auto 12px; border-radius: 999px; background: #eaf4f8; border: 4px solid #ffffff; box-shadow: 0 0 0 3px var(–org-azul); overflow: hidden; display: flex; align-items: center; justify-content: center; org-azul-escuro); font-size: 0.72rem; font-weight: 800; text-align: center; } #organograma-inspetorial .org-card-ref .org-photo, #organograma-inspetorial .org-card-pastoral-ref .org-photo { width: 62px; height: 62px; margin-bottom: 10px; border-width: 3px; box-shadow: 0 0 0 2px var(–org-azul); flex: 0 0 auto; } #organograma-inspetorial .org-photo img, #organograma-inspetorial .org-modal-photo img, #organograma-inspetorial .org-member-photo img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; object-position: center center !important; display: block !important; } #organograma-inspetorial .org-role { display: inline-block; background: var(–org-azul); padding: 8px 18px; border-radius: 12px; font-size: 1.05rem; font-weight: 800; line-height: 1.1; margin-bottom: 8px; } #organograma-inspetorial .org-card-group .org-role, #organograma-inspetorial .org-card-bottom .org-role { margin: 0; font-size: 1rem; } #organograma-inspetorial .org-card-ref .org-role { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 42px; padding: 7px 6px; border-radius: 10px; font-size: 0.72rem; line-height: 1.1; margin-bottom: 7px; } #organograma-inspetorial .org-card-pastoral-ref .org-role, #organograma-inspetorial .org-card-pastoral-text .org-role { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 58px; padding: 7px 6px; border-radius: 10px; font-size: 0.68rem; line-height: 1.08; margin-bottom: 7px; } #organograma-inspetorial .org-name { font-size: 0.95rem; line-height: 1.3; font-weight: 600; } #organograma-inspetorial .org-card-ref .org-name, #organograma-inspetorial .org-card-pastoral-ref .org-name, #organograma-inspetorial .org-card-pastoral-text .org-name { width: 100%; min-height: 42px; display: flex; align-items: center; justify-content: center; font-size: 0.68rem; line-height: 1.2; } #organograma-inspetorial .org-modal { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, visibility 0.2s ease; } #organograma-inspetorial .org-modal:target { opacity: 1; visibility: visible; pointer-events: auto; } #organograma-inspetorial .org-modal-backdrop { position: fixed; inset: 0; background: rgba(2, 20, 32, 0.58); backdrop-filter: blur(3px); display: block; } #organograma-inspetorial .org-modal-panel { position: relative; z-index: 1; width: min(760px, 100%); max-height: calc(100dvh – 48px); overflow-y: auto; background: #ffffff; border-radius: 24px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25); padding: 28px; } #organograma-inspetorial .org-modal-close { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 999px; background: #edf4f8; org-azul-escuro); cursor: pointer; font-size: 1.4rem; line-height: 38px; text-align: center; text-decoration: none; z-index: 3; font-weight: 700; } #organograma-inspetorial .org-modal-header { display: grid; grid-template-columns: 120px 1fr; gap: 22px; align-items: center; margin-bottom: 18px; padding-right: 48px; } #organograma-inspetorial .org-modal-header-text { display: block; padding-right: 48px; } #organograma-inspetorial .org-modal-photo { width: 120px; height: 120px; border-radius: 24px; overflow: hidden; background: #eaf4f8; box-shadow: 0 0 0 4px #ffffff, 0 0 0 7px var(–org-azul); display: flex; align-items: center; justify-content: center; org-azul-escuro); font-weight: 800; text-align: center; flex: 0 0 auto; } #organograma-inspetorial .org-modal-title h3 { margin: 0 0 6px; org-azul-escuro); font-size: 1.65rem; line-height: 1.2; } #organograma-inspetorial .org-modal-title p { margin: 0; font-weight: 600; } #organograma-inspetorial .org-modal-panel p { line-height: 1.6; margin: 0 0 14px; } #organograma-inspetorial .org-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; } #organograma-inspetorial .org-modal-box { background: #f3f8fb; border: 1px solid #dcebf3; border-radius: 16px; padding: 14px; } #organograma-inspetorial .org-modal-box strong { display: block; margin-bottom: 6px; org-azul-escuro); } #organograma-inspetorial .org-modal-box ul { margin: 0; padding-left: 18px; } #organograma-inspetorial .org-modal-box li { margin: 4px 0; } #organograma-inspetorial .org-member-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 20px 0; } #organograma-inspetorial .org-member-card { background: #f3f8fb; border: 1px solid #dcebf3; border-radius: 16px; padding: 12px; text-align: center; } #organograma-inspetorial .org-member-photo { width: 76px; height: 76px; margin: 0 auto 10px; border-radius: 999px; overflow: hidden; background: #eaf4f8; box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px var(–org-azul); } #organograma-inspetorial .org-member-name { font-size: 0.78rem; line-height: 1.25; font-weight: 700; } #organograma-inspetorial .org-member-role { margin-top: 4px; font-size: 0.7rem; line-height: 1.2; } @media (max-width: 1170px) { #organograma-inspetorial { padding-left: 0; padding-right: 0; } #organograma-inspetorial .org-area { max-width: none; } #organograma-inspetorial .org-toolbar, #organograma-inspetorial .org-help { margin-left: 20px; margin-right: 20px; } #organograma-inspetorial .org-viewport { border-radius: 0; border-left: 0; border-right: 0; } } @media (max-width: 760px) { #organograma-inspetorial { padding-top: 24px; padding-bottom: 24px; } #organograma-inspetorial .org-viewport { height: 72vh; min-height: 520px; } #organograma-inspetorial .org-modal { padding: 12px; align-items: flex-start; } #organograma-inspetorial .org-modal-panel { max-height: calc(100dvh – 24px); border-radius: 20px; padding: 22px; padding-top: 64px; } #organograma-inspetorial .org-modal-close { position: fixed; top: 16px; right: 16px; width: 44px; height: 44px; background: #ffffff; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.22); line-height: 44px; } #organograma-inspetorial .org-modal-header { grid-template-columns: 1fr; padding-right: 0; } #organograma-inspetorial .org-modal-header-text { padding-right: 0; } #organograma-inspetorial .org-modal-photo { width: 96px; height: 96px; border-radius: 20px; } #organograma-inspetorial .org-modal-grid { grid-template-columns: 1fr; } #organograma-inspetorial .org-member-grid { grid-template-columns: repeat(2, 1fr); } }
#spx-organograma-geral { –spx-blue: #0076a8; –spx-blue-dark: #005d86; –spx-line: #111111; –spx-soft: #f5f8fa; –spx-text: #1d1d1d; –spx-highlight: #f6c343; –spx-radius: 9px; position: relative; left: 50%; transform: translateX(-50%); width: min(calc(100vw – 72px), 1240px); max-width: none; margin-top: 36px; margin-bottom: 64px; Arial Narrow”, “Roboto Condensed”, Arial, sans-serif; spx-text); } #spx-organograma-geral * { box-sizing: border-box; } #spx-organograma-geral .spx-intro { max-width: 760px; margin: 0 auto 18px; } #spx-organograma-geral .spx-intro h2 { margin: 0 0 8px; font-size: clamp(34px, 3vw, 48px); line-height: 1.05; spx-blue-dark); font-weight: 700; } #spx-organograma-geral .spx-intro p { margin: 0; max-width: 720px; font-size: 16px; line-height: 1.45; } #spx-organograma-geral .spx-canvas-wrap { width: 100%; overflow-x: auto; overflow-y: visible; padding: 0 0 18px; } #spx-organograma-geral .spx-canvas { position: relative; width: 100%; min-width: 1100px; background: #fff; border: 1px solid #cfe0e8; border-radius: 22px; padding: 30px 30px 26px; box-shadow: 0 14px 35px rgba(0, 40, 70, .08); overflow: hidden; } /* ========================= TOPO DO ORGANOGRAMA ========================= */ #spx-organograma-geral .spx-top { position: relative; padding: 2px 0 18px; isolation: isolate; } /* Setas cinzas grandes, agora sem corte nas pontas */ #spx-organograma-geral .spx-top::before, #spx-organograma-geral .spx-top::after { content: “”; position: absolute; top: 128px; width: 46%; height: 112px; background: rgba(0, 0, 0, .08); z-index: 0; pointer-events: none; } #spx-organograma-geral .spx-top::before { left: 0; clip-path: polygon( 0 50%, 10% 0, 10% 30%, 90% 30%, 90% 0, 100% 50%, 90% 100%, 90% 70%, 10% 70%, 10% 100% ); } #spx-organograma-geral .spx-top::after { right: 0; clip-path: polygon( 0 50%, 10% 0, 10% 30%, 90% 30%, 90% 0, 100% 50%, 90% 100%, 90% 70%, 10% 70%, 10% 100% ); } #spx-organograma-geral .spx-top-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.18fr .82fr 1.38fr; gap: 38px; align-items: start; } #spx-organograma-geral .spx-column { display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 2; } #spx-organograma-geral .spx-left-column, #spx-organograma-geral .spx-right-column { position: relative; } #spx-organograma-geral .spx-center-column { align-items: center; position: relative; } /* Linha vertical central */ #spx-organograma-geral .spx-center-column::after { content: “”; position: absolute; top: 62px; bottom: -248px; left: 50%; width: 2px; background: var(–spx-line); transform: translateX(-50%); z-index: 0; } /* ========================= BALÕES ========================= */ #spx-organograma-geral .spx-node, #spx-organograma-geral .spx-mini-node { position: relative; z-index: 3; border: 0; background: var(–spx-blue); border-radius: var(–spx-radius); padding: 8px 14px; min-height: 40px; min-width: 145px; Arial Narrow”, “Roboto Condensed”, Arial, sans-serif; font-size: 17px; line-height: 1.08; font-weight: 800; text-align: center; cursor: pointer; box-shadow: 0 2px 0 rgba(0, 0, 0, .15); transition: box-shadow .16s ease, opacity .16s ease, background .16s ease, outline .16s ease; } #spx-organograma-geral .spx-mini-node { min-width: 54px; min-height: 34px; font-size: 12px; padding: 6px 8px; border-radius: 7px; } #spx-organograma-geral .spx-mini-node-wide { min-width: 72px; } #spx-organograma-geral .spx-node-wide { min-width: 188px; } #spx-organograma-geral .spx-node-smalltext { min-width: 154px; font-size: 12px; line-height: 1.2; } #spx-organograma-geral .spx-node:hover, #spx-organograma-geral .spx-mini-node:hover, #spx-organograma-geral .spx-node:focus-visible, #spx-organograma-geral .spx-mini-node:focus-visible { background: var(–spx-blue-dark); box-shadow: 0 6px 16px rgba(0, 0, 0, .16); outline: 3px solid rgba(246, 195, 67, .5); } #spx-organograma-geral .spx-row { display: flex; gap: 12px; align-items: flex-start; justify-content: center; flex-wrap: nowrap; position: relative; } #spx-organograma-geral .spx-row-left { justify-content: flex-start; } /* ========================= LEGENDA ========================= */ #spx-organograma-geral .spx-box { border: 1px solid #aebdc7; border-radius: 12px; background: rgba(255, 255, 255, .95); padding: 10px 12px; max-width: 236px; position: relative; z-index: 4; } #spx-organograma-geral .spx-box-title { margin: 0 0 7px; font-size: 13px; font-weight: 900; spx-blue-dark); text-transform: uppercase; letter-spacing: .04em; } #spx-organograma-geral .spx-legend-list { display: grid; gap: 7px; font-size: 11px; line-height: 1.35; } #spx-organograma-geral .spx-legend-item { display: flex; align-items: flex-start; gap: 8px; } #spx-organograma-geral .spx-legend-symbol { width: 18px; text-align: center; font-weight: 900; flex: 0 0 18px; } /* ========================= CONEXÕES DO TOPO ========================= */ /* Inspetor -> Vice */ #spx-organograma-geral [data-id=”inspetor”]::after { content: “”; position: absolute; left: 50%; bottom: -10px; width: 2px; height: 10px; background: var(–spx-line); transform: translateX(-50%); z-index: 1; } /* Inspetor -> Coord. Família Salesiana */ #spx-organograma-geral [data-id=”inspetor”]::before { content: “”; position: absolute; left: 100%; top: 50%; width: 260px; height: 2px; background: var(–spx-line); transform: translateY(-50%); z-index: 1; } /* Conselho -> linha central */ #spx-organograma-geral [data-id=”conselho”]::before { content: “”; position: absolute; left: 100%; top: 50%; width: 325px; height: 2px; background: var(–spx-line); transform: translateY(-50%); z-index: 1; } /* Secretário -> linha central */ #spx-organograma-geral [data-id=”secretario”]::before { content: “”; position: absolute; left: 100%; top: 50%; width: 325px; height: 2px; background: var(–spx-line); transform: translateY(-50%); z-index: 1; } /* Linha administrativa: Escritório / Ecônomo -> Pastoral */ #spx-organograma-geral .spx-left-column > .spx-row:nth-of-type(2)::before { content: “”; position: absolute; left: 80px; right: -665px; top: 20px; height: 2px; background: var(–spx-line); z-index: 1; } /* Escritório -> equipe do escritório */ #spx-organograma-geral [data-id=”escritorio”]::after { content: “”; position: absolute; left: 50%; bottom: -10px; width: 2px; height: 10px; background: var(–spx-line); transform: translateX(-50%); z-index: 1; } /* Ecônomo -> captação */ #spx-organograma-geral [data-id=”economo”]::after { content: “”; position: absolute; left: 50%; bottom: -10px; width: 2px; height: 10px; background: var(–spx-line); transform: translateX(-50%); z-index: 1; } /* Comunicação -> linha central */ #spx-organograma-geral [data-id=”comunicacao”]::before { content: “”; position: absolute; right: 100%; top: 50%; width: 250px; height: 2px; background: var(–spx-line); transform: translateY(-50%); z-index: 1; } /* Coord. Família -> Referenciais */ #spx-organograma-geral .spx-subtree { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 0; position: relative; } #spx-organograma-geral [data-id=”familia-salesiana”]::after { content: “”; position: absolute; left: 50%; bottom: -8px; width: 2px; height: 8px; background: var(–spx-line); transform: translateX(-50%); z-index: 1; } #spx-organograma-geral .spx-subtree .spx-mini-row { position: relative; } #spx-organograma-geral .spx-subtree .spx-mini-row::before { content: “”; position: absolute; left: 27px; right: 27px; top: -8px; height: 2px; background: var(–spx-line); z-index: 1; } #spx-organograma-geral .spx-subtree .spx-mini-node::before { content: “”; position: absolute; left: 50%; top: -8px; width: 2px; height: 8px; background: var(–spx-line); transform: translateX(-50%); z-index: 1; } /* Coord. Pastoral Coord. Formação */ #spx-organograma-geral [data-id=”pastoral”]::before { content: “”; position: absolute; left: 100%; top: 50%; width: 12px; height: 2px; background: var(–spx-line); transform: translateY(-50%); z-index: 1; } #spx-organograma-geral [data-id=”formacao”]::before { content: “”; position: absolute; right: 100%; top: 50%; width: 12px; height: 2px; background: var(–spx-line); transform: translateY(-50%); z-index: 1; } /* Coord. Pastoral -> Referenciais / OJ / PJS */ #spx-organograma-geral [data-id=”pastoral”]::after { content: “”; position: absolute; left: 50%; bottom: -10px; width: 2px; height: 10px; background: var(–spx-line); transform: translateX(-50%); z-index: 1; } #spx-organograma-geral .spx-right-column > .spx-mini-row { position: relative; } #spx-organograma-geral .spx-right-column > .spx-mini-row::before { content: “”; position: absolute; left: 26px; right: 42px; top: -10px; height: 2px; background: var(–spx-line); z-index: 1; } #spx-organograma-geral .spx-right-column > .spx-mini-row .spx-mini-node::before { content: “”; position: absolute; left: 50%; top: -10px; width: 2px; height: 10px; background: var(–spx-line); transform: translateX(-50%); z-index: 1; } /* ========================= LINHA TRACEJADA ========================= */ #spx-organograma-geral .spx-limite { display: flex; align-items: center; gap: 14px; margin: 20px -30px 26px; spx-blue-dark); font-size: 15px; font-weight: 900; text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; position: relative; z-index: 3; } #spx-organograma-geral .spx-limite::before, #spx-organograma-geral .spx-limite::after { content: “”; flex: 1; border-top: 3px dashed var(–spx-blue); } /* ========================= PARTE INFERIOR ========================= */ #spx-organograma-geral .spx-bottom-grid { display: grid; grid-template-columns: repeat(4, minmax(180px, 1fr)); gap: 18px; align-items: start; position: relative; } /* Linha horizontal superior que conecta as coordenações de área */ #spx-organograma-geral .spx-bottom-grid::before { content: “”; position: absolute; top: -22px; left: 92px; right: 92px; height: 2px; background: var(–spx-line); z-index: 1; } /* Ramal vertical de cada coordenação inferior até a linha horizontal */ #spx-organograma-geral .spx-area-stack::before { content: “”; position: absolute; left: 50%; top: -22px; width: 2px; height: 22px; background: var(–spx-line); transform: translateX(-50%); z-index: 1; } #spx-organograma-geral .spx-area { position: relative; display: grid; grid-template-columns: 42px 1fr; gap: 8px; align-items: center; } #spx-organograma-geral .spx-area-stack { display: flex; flex-direction: column; align-items: center; gap: 9px; position: relative; } /* Conexão vertical entre as caixas de cada casa */ #spx-organograma-geral .spx-area-stack .spx-node::after { content: “”; position: absolute; left: 50%; bottom: -9px; width: 2px; height: 9px; background: var(–spx-line); transform: translateX(-50%); z-index: 1; } #spx-organograma-geral .spx-area-stack .spx-node:last-of-type::after { display: none; } #spx-organograma-geral .spx-consult { font-size: 48px; font-weight: 900; line-height: .72; text-align: center; } #spx-organograma-geral .spx-count { font-size: 18px; font-weight: 900; text-align: center; margin-top: 2px; } #spx-organograma-geral .spx-footer { margin-top: 26px; display: flex; justify-content: center; } #spx-organograma-geral .spx-footer .spx-node { width: 100%; max-width: none; } #spx-organograma-geral .spx-footer .spx-node::after { display: none; } /* GP */ #spx-organograma-geral .spx-gp { position: absolute; left: 50%; top: 59.5%; transform: translateX(-50%); z-index: 5; } #spx-organograma-geral .spx-gp:hover, #spx-organograma-geral .spx-gp:focus-visible, #spx-organograma-geral .spx-gp.is-active { transform: translateX(-50%); } /* ========================= PAINEL EXPLICATIVO ========================= */ #spx-organograma-geral .spx-info-panel { position: fixed; right: 24px; top: 110px; width: min(390px, calc(100vw – 48px)); max-height: calc(100vh – 140px); overflow-y: auto; z-index: 9999; background: #fff; border: 2px solid var(–spx-blue); border-radius: 18px; box-shadow: 0 20px 60px rgba(0, 40, 70, .28); padding: 22px 24px 20px; } #spx-organograma-geral .spx-info-panel[hidden] { display: none; } #spx-organograma-geral .spx-info-close { position: absolute; top: 12px; right: 14px; border: 0; background: transparent; font-size: 28px; line-height: 1; cursor: pointer; spx-blue-dark); } #spx-organograma-geral .spx-info-kicker { margin: 0 34px 4px 0; spx-blue-dark); font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } #spx-organograma-geral .spx-info-title { margin: 0 34px 10px 0; spx-blue-dark); font-size: 26px; line-height: 1.1; } #spx-organograma-geral .spx-info-text { margin: 0 0 14px; font-size: 16px; line-height: 1.55; } #spx-organograma-geral .spx-related-title { margin: 0 0 8px; font-size: 13px; font-weight: 800; text-transform: uppercase; } #spx-organograma-geral .spx-related-list { display: flex; flex-wrap: wrap; gap: 8px; } #spx-organograma-geral .spx-chip { background: var(–spx-soft); border: 1px solid #d2dde5; border-radius: 999px; padding: 6px 10px; font-size: 13px; font-weight: 700; } /* ========================= ESTADO DE SELEÇÃO ========================= */ #spx-organograma-geral.spx-is-focused .spx-node.is-muted, #spx-organograma-geral.spx-is-focused .spx-mini-node.is-muted { opacity: .24; filter: grayscale(.3); } #spx-organograma-geral .spx-node.is-active, #spx-organograma-geral .spx-mini-node.is-active { background: #003f5c; outline: 4px solid var(–spx-highlight); box-shadow: 0 8px 22px rgba(0, 40, 70, .25); } #spx-organograma-geral .spx-node.is-related, #spx-organograma-geral .spx-mini-node.is-related { background: #0094ca; outline: 3px solid rgba(246, 195, 67, .8); } /* ========================= RESPONSIVO ========================= */ @media (max-width: 1400px) { #spx-organograma-geral { width: min(calc(100vw – 48px), 1240px); } } @media (max-width: 1200px) { #spx-organograma-geral { width: calc(100vw – 36px); } #spx-organograma-geral .spx-info-panel { right: 18px; top: 90px; } } @media (max-width: 900px) { #spx-organograma-geral { left: auto; transform: none; width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; margin-top: 28px; } #spx-organograma-geral .spx-intro { max-width: 100%; } #spx-organograma-geral .spx-canvas-wrap { overflow-x: visible; } #spx-organograma-geral .spx-canvas { min-width: 0; width: 100%; padding: 22px 18px; border-radius: 18px; } #spx-organograma-geral .spx-top-grid, #spx-organograma-geral .spx-bottom-grid { grid-template-columns: 1fr; gap: 22px; } #spx-organograma-geral .spx-top::before, #spx-organograma-geral .spx-top::after, #spx-organograma-geral .spx-center-column::after, #spx-organograma-geral .spx-bottom-grid::before, #spx-organograma-geral .spx-area-stack::before, #spx-organograma-geral .spx-gp { display: none; } #spx-organograma-geral .spx-row, #spx-organograma-geral .spx-row-left, #spx-organograma-geral .spx-mini-row { justify-content: center; flex-wrap: wrap; } #spx-organograma-geral .spx-node, #spx-organograma-geral .spx-node-wide, #spx-organograma-geral .spx-node-smalltext { width: 100%; min-width: 0; } #spx-organograma-geral .spx-box { max-width: 100%; } #spx-organograma-geral .spx-area { grid-template-columns: 1fr; } #spx-organograma-geral .spx-consult { display: none; } #spx-organograma-geral .spx-limite { margin: 26px 0; white-space: normal; font-size: 14px; text-align: center; } #spx-organograma-geral .spx-info-panel { position: fixed; left: 16px; right: 16px; bottom: 16px; top: auto; width: auto; max-height: 70vh; } #spx-organograma-geral [data-id=”inspetor”]::before, #spx-organograma-geral [data-id=”inspetor”]::after, #spx-organograma-geral [data-id=”conselho”]::before, #spx-organograma-geral [data-id=”secretario”]::before, #spx-organograma-geral .spx-left-column > .spx-row:nth-of-type(2)::before, #spx-organograma-geral [data-id=”escritorio”]::after, #spx-organograma-geral [data-id=”economo”]::after, #spx-organograma-geral [data-id=”comunicacao”]::before, #spx-organograma-geral [data-id=”familia-salesiana”]::after, #spx-organograma-geral .spx-subtree .spx-mini-row::before, #spx-organograma-geral .spx-subtree .spx-mini-node::before, #spx-organograma-geral [data-id=”pastoral”]::before, #spx-organograma-geral [data-id=”pastoral”]::after, #spx-organograma-geral [data-id=”formacao”]::before, #spx-organograma-geral .spx-right-column > .spx-mini-row::before, #spx-organograma-geral .spx-right-column > .spx-mini-row .spx-mini-node::before, #spx-organograma-geral .spx-area-stack .spx-node::after { display: none; } } (function () { function initSpxOrganograma() { const root = document.getElementById(“spx-organograma-geral”); if (!root || root.dataset.spxInit === “true”) return; root.dataset.spxInit = “true”; const panel = root.querySelector(“[data-panel]”); const panelTitle = root.querySelector(“[data-panel-title]”); const panelType = root.querySelector(“[data-panel-type]”); const panelText = root.querySelector(“[data-panel-text]”); const relatedList = root.querySelector(“[data-related-list]”); const relatedBlock = root.querySelector(“[data-related-block]”); const closeButton = root.querySelector(“[data-close]”); const nodes = Array.from(root.querySelectorAll(“[data-id]”)); const details = { “inspetor”: { type: “Posição canônica”, title: “Inspetor”, text: “Representa institucionalmente a Inspetoria, acolhe demandas da Congregação e da Rede Salesiana Brasil e acompanha a missão inspetorial em seu conjunto.”, related: [“vice”, “conselho”, “secretario”, “economo”, “pastoral”, “formacao”, “familia-salesiana”, “comunicacao”] }, “vice”: { type: “Posição canônica”, title: “Vice-Inspetor”, text: “Atua em colaboração com o Inspetor e preside a Comissão de Vida e Disciplina Religiosa.”, related: [“inspetor”, “conselho”] }, “conselho”: { type: “Instância deliberativa”, title: “Conselho Inspetorial”, text: “Discute e delibera questões levadas às reuniões periódicas previstas em regimento. Recebe pautas a partir do Inspetor, Vice, Ecônomo, Coordenadores de Área e conselheiros.”, related: [“inspetor”, “vice”, “secretario”, “economo”, “pastoral”, “coord-escolas”, “coord-obras”, “coord-ies”, “coord-paroquias”] }, “secretario”: { type: “Posição canônica”, title: “Secretário”, text: “Recebe pautas para discussão no Conselho Inspetorial, define a agenda dos encontros e responde pelo registro das reuniões e pelos documentos oficiais da Inspetoria.”, related: [“inspetor”, “conselho”] }, “economo”: { type: “Posição canônica”, title: “Ecônomo”, text: “Acompanha os orçamentos do Centro Inspetorial e das casas. Delibera sobre suplementações orçamentárias, isenção ou adiamento de cotas, obras de infraestrutura e investimentos da Inspetoria.”, related: [“escritorio”, “equipe-escritorio”, “captacao”, “prestadores”, “coord-escolas”, “coord-obras”, “coord-ies”] }, “escritorio”: { type: “Área técnica”, title: “Escritório Inspetorial”, text: “É responsável por demandas administrativas e jurídicas ligadas ao Centro Inspetorial, prestando apoio às casas quando necessário. Seu trabalho é supervisionado pelo Ecônomo.”, related: [“economo”, “equipe-escritorio”, “prestadores”] }, “equipe-escritorio”: { type: “Equipe técnica”, title: “Equipe do Escritório Inspetorial”, text: “Compreende gestão/jurídico, tesouraria, tecnologia da informação e auxiliares. Atua nas demandas administrativas, financeiras, jurídicas e operacionais relacionadas ao Centro Inspetorial.”, related: [“escritorio”, “economo”, “prestadores”] }, “captacao”: { type: “Gestão técnica”, title: “Gestor de Captação de Recursos”, text: “Responsável por captar e alocar recursos públicos e privados obtidos por meio de doação, patrocínio e programas de responsabilidade social corporativa.”, related: [“economo”, “escritorio”, “coord-obras”, “prestadores”] }, “comunicacao”: { type: “Gestão técnica”, title: “Gestor e equipe de Comunicação”, text: “Atende às demandas do Centro Inspetorial e das Coordenações de Área, especialmente Pastoral. Representa a Inspetoria na Comissão de Comunicação da RSB e transmite orientações da Rede às casas. Não atende pedidos diretos das casas.”, related: [“inspetor”, “pastoral”, “coord-escolas”, “coord-obras”, “coord-ies”, “coord-paroquias”] }, “familia-salesiana”: { type: “Coordenação de Área”, title: “Coordenação da Família Salesiana”, text: “Supervisiona os Referenciais ligados aos grupos da Família Salesiana e tem atuação autônoma. O Coordenador e seus Referenciais são nomeados pelo Inspetor.”, related: [“inspetor”, “adma”, “eeaa”, “sscc”, “vdb”] }, “adma”: { type: “Referencial”, title: “Referencial ADMA”, text: “Articula atividades relacionadas à Associação de Maria Auxiliadora, em vínculo com a Coordenação da Família Salesiana.”, related: [“familia-salesiana”, “eeaa”, “sscc”, “vdb”] }, “eeaa”: { type: “Referencial”, title: “Referencial EEAA”, text: “Articula atividades relacionadas aos Ex-alunos de Dom Bosco, em vínculo com a Coordenação da Família Salesiana.”, related: [“familia-salesiana”, “adma”, “sscc”, “vdb”] }, “sscc”: { type: “Referencial”, title: “Referencial SSCC”, text: “Articula atividades relacionadas aos Salesianos Cooperadores, em vínculo com a Coordenação da Família Salesiana.”, related: [“familia-salesiana”, “adma”, “eeaa”, “vdb”] }, “vdb”: { type: “Referencial”, title: “Referencial VDB”, text: “Articula atividades relacionadas aos Voluntários de Dom Bosco, em vínculo com a Coordenação da Família Salesiana.”, related: [“familia-salesiana”, “adma”, “eeaa”, “sscc”] }, “pastoral”: { type: “Coordenação de Área”, title: “Coordenação de Pastoral”, text: “Zela pelo cumprimento do Plano Orgânico Inspetorial e do Projeto Educativo Pastoral Salesiano Inspetorial. Supervisiona os Referenciais de AM, AV e AJS, o Observatório Salesiano das Juventudes e a Pastoral Juvenil Salesiana.”, related: [“formacao”, “am”, “av”, “ajs”, “oj”, “pjs”, “comunicacao”, “inspetor”] }, “formacao”: { type: “Coordenação de Área”, title: “Coordenação de Formação”, text: “Encarrega-se do planejamento e da supervisão da formação de salesianos e leigos. Atua em sintonia com a Coordenação de Pastoral.”, related: [“pastoral”, “inspetor”] }, “am”: { type: “Referencial”, title: “Referencial AM”, text: “Articula atividades de Animação Missionária. Tem atuação transversal nas casas e está formalmente vinculado à Coordenação de Pastoral.”, related: [“pastoral”, “av”, “ajs”, “pjs”, “oj”] }, “av”: { type: “Referencial”, title: “Referencial AV”, text: “Articula atividades de Animação Vocacional. Tem atuação transversal nas casas e está formalmente vinculado à Coordenação de Pastoral.”, related: [“pastoral”, “am”, “ajs”, “pjs”, “oj”] }, “ajs”: { type: “Referencial”, title: “Referencial AJS”, text: “Articula atividades relacionadas à Articulação da Juventude Salesiana. Atua em diálogo com as pastorais das casas, os demais Referenciais e a Coordenação de Pastoral.”, related: [“pastoral”, “am”, “av”, “pjs”, “oj”] }, “oj”: { type: “Observatório”, title: “Observatório Salesiano das Juventudes”, text: “Encarrega-se de pesquisa e acompanhamento de jovens. No novo organograma, passa a ser subordinado à Coordenação de Pastoral.”, related: [“pastoral”, “pjs”, “am”, “av”, “ajs”] }, “pjs”: { type: “Gestão pastoral”, title: “Gestor e equipe PJS”, text: “Lidera a equipe da Pastoral Juvenil Salesiana e atua diretamente com as pastorais das casas e os Referenciais, cumprindo orientações da Coordenação de Pastoral.”, related: [“pastoral”, “am”, “av”, “ajs”, “oj”, “coord-escolas”, “coord-obras”, “coord-ies”, “coord-paroquias”] }, “coord-ies”: { type: “Coordenação de Área”, title: “Coordenação IES”, text: “Acompanha a unidade de ensino superior, seus planos, orçamento, resultados e demandas que ultrapassam as decisões ordinárias da casa.”, related: [“fdb”, “dir-inst-ies”, “dir-ex-ies”, “coord-div-ies”, “conselho”, “economo”, “prestadores”] }, “fdb”: { type: “Casa salesiana”, title: “Faculdade Dom Bosco”, text: “Unidade de ensino superior vinculada à Inspetoria. Conta com Direção Institucional, Direção Executiva e coordenações equivalentes às divisões de serviço.”, related: [“coord-ies”, “dir-inst-ies”, “dir-ex-ies”, “coord-div-ies”] }, “dir-inst-ies”: { type: “Casa salesiana”, title: “Direção Institucional”, text: “Integra a estrutura da Faculdade Dom Bosco e atua em conjunto com a Direção Executiva, conforme a organização própria da unidade.”, related: [“coord-ies”, “fdb”, “dir-ex-ies”, “coord-div-ies”] }, “dir-ex-ies”: { type: “Casa salesiana”, title: “Direção Executiva”, text: “Responde pelas decisões executivas da unidade. Demandas que ultrapassam sua alçada são partilhadas com a Coordenação de Área correspondente.”, related: [“coord-ies”, “fdb”, “dir-inst-ies”, “coord-div-ies”] }, “coord-div-ies”: { type: “Casa salesiana”, title: “Coordenações”, text: “Coordenações equivalentes às divisões de serviço. Atuam no acompanhamento de áreas específicas da unidade, em diálogo com a Direção Executiva.”, related: [“coord-ies”, “fdb”, “dir-inst-ies”, “dir-ex-ies”] }, “coord-escolas”: { type: “Coordenação de Área”, title: “Coordenação de Escolas”, text: “Supervisiona as unidades escolares, acompanhando o cumprimento do Projeto Educativo-Pastoral Salesiano, dos planos, dos orçamentos e dos resultados.”, related: [“colegio”, “dir-inst-escolas”, “dir-ex-escolas”, “coord-div-escolas”, “gestor-pedagogico”, “conselho”, “economo”] }, “colegio”: { type: “Casa salesiana”, title: “Colégios”, text: “As escolas mantêm sua organização local, com Direção Institucional, Direção Executiva e Coordenações das Divisões de Serviços.”, related: [“coord-escolas”, “dir-inst-escolas”, “dir-ex-escolas”, “coord-div-escolas”, “gestor-pedagogico”] }, “dir-inst-escolas”: { type: “Casa salesiana”, title: “Direção Institucional”, text: “Integra a estrutura de governo da escola, em diálogo com a Direção Executiva e com a Coordenação de Área quando necessário.”, related: [“coord-escolas”, “colegio”, “dir-ex-escolas”, “coord-div-escolas”] }, “dir-ex-escolas”: { type: “Casa salesiana”, title: “Direção Executiva”, text: “Lidera a gestão executiva da escola. Decisões do dia a dia cabem à casa; questões que ultrapassam a alçada ordinária devem ser partilhadas com a Coordenação de Área.”, related: [“coord-escolas”, “colegio”, “dir-inst-escolas”, “coord-div-escolas”] }, “coord-div-escolas”: { type: “Casa salesiana”, title: “Coordenações das Divisões de Serviços”, text: “Nos colégios, compreendem as áreas administrativa, pastoral e pedagógica. Integram o Grupo Gestor local e acompanham as decisões de sua área.”, related: [“coord-escolas”, “colegio”, “dir-inst-escolas”, “dir-ex-escolas”, “gestor-pedagogico”] }, “coord-obras”: { type: “Coordenação de Área”, title: “Coordenação de Obras Sociais”, text: “Supervisiona as obras sociais, acompanhando planos, orçamentos, resultados e o cumprimento da missão educativo-pastoral.”, related: [“obras”, “dir-inst-obras”, “dir-ex-obras”, “coord-div-obras”, “gestor-pedagogico”, “captacao”, “conselho”, “economo”] }, “obras”: { type: “Casa salesiana”, title: “Obras Sociais”, text: “As obras sociais mantêm sua organização local, com cargos equivalentes aos dos colégios: Direção Institucional, Direção Executiva e coordenações das áreas de serviço.”, related: [“coord-obras”, “dir-inst-obras”, “dir-ex-obras”, “coord-div-obras”, “gestor-pedagogico”, “captacao”] }, “dir-inst-obras”: { type: “Casa salesiana”, title: “Direção Institucional”, text: “Integra a estrutura da obra social, em diálogo com a Direção Executiva e com a Coordenação de Área quando necessário.”, related: [“coord-obras”, “obras”, “dir-ex-obras”, “coord-div-obras”] }, “dir-ex-obras”: { type: “Casa salesiana”, title: “Direção Executiva”, text: “Lidera a gestão executiva da obra social. Questões que ultrapassam sua alçada ordinária devem ser discutidas com a Coordenação de Área correspondente.”, related: [“coord-obras”, “obras”, “dir-inst-obras”, “coord-div-obras”] }, “coord-div-obras”: { type: “Casa salesiana”, title: “Coordenações”, text: “Coordenações responsáveis pelas áreas de serviço da obra social. Atuam junto à Direção Executiva no alinhamento das práticas locais.”, related: [“coord-obras”, “obras”, “dir-inst-obras”, “dir-ex-obras”, “gestor-pedagogico”] }, “gestor-pedagogico”: { type: “Gestão técnica”, title: “Gestor Pedagógico”, text: “Assessora diretamente as coordenações pedagógicas dos colégios e das obras sociais, acompanha resultados, orienta processos educacionais e apoia o cumprimento de determinações legais e orientações da Rede Salesiana Brasil.”, related: [“coord-escolas”, “coord-obras”, “colegio”, “obras”, “coord-div-escolas”, “coord-div-obras”] }, “coord-paroquias”: { type: “Coordenação de Área”, title: “Coordenação de Paróquias”, text: “Acompanha as paróquias salesianas em sua organização pastoral e institucional, respeitando sua estrutura própria composta por pároco, secretários, coordenadores voluntários e voluntários.”, related: [“paroquias”, “paroco”, “secretarios-paroquiais”, “coord-voluntarios”, “voluntarios”, “conselho”] }, “paroquias”: { type: “Casa salesiana”, title: “Paróquias”, text: “As paróquias mantêm sua estrutura própria, com pároco, secretários, coordenadores voluntários e voluntários.”, related: [“coord-paroquias”, “paroco”, “secretarios-paroquiais”, “coord-voluntarios”, “voluntarios”] }, “paroco”: { type: “Paróquia”, title: “Pároco”, text: “Responde pela condução da paróquia e pelas decisões ordinárias da comunidade paroquial, recorrendo à Coordenação de Área quando necessário.”, related: [“coord-paroquias”, “paroquias”, “secretarios-paroquiais”, “coord-voluntarios”, “voluntarios”] }, “secretarios-paroquiais”: { type: “Paróquia”, title: “Secretários”, text: “Apoiam a organização administrativa e pastoral da paróquia, em diálogo com o pároco e as coordenações locais.”, related: [“coord-paroquias”, “paroquias”, “paroco”, “coord-voluntarios”, “voluntarios”] }, “coord-voluntarios”: { type: “Paróquia”, title: “Coordenadores voluntários”, text: “Acompanham grupos, pastorais ou serviços da paróquia, em articulação com o pároco e com os demais voluntários.”, related: [“coord-paroquias”, “paroquias”, “paroco”, “secretarios-paroquiais”, “voluntarios”] }, “voluntarios”: { type: “Paróquia”, title: “Voluntários”, text: “Colaboram nas atividades pastorais, administrativas e comunitárias das paróquias salesianas.”, related: [“coord-paroquias”, “paroquias”, “paroco”, “secretarios-paroquiais”, “coord-voluntarios”] }, “prestadores”: { type: “Apoio operacional”, title: “Prestadores de Serviços e Fornecedores”, text: “A barra inferior representa a relação com prestadores de serviços e fornecedores. Consultas e encaminhamentos seguem a alçada correspondente, considerando a autonomia das casas e, quando necessário, o Escritório Inspetorial, o Ecônomo ou a Coordenação de Área.”, related: [“economo”, “escritorio”, “equipe-escritorio”, “coord-ies”, “coord-escolas”, “coord-obras”, “coord-paroquias”] } }; function labelFor(id) { const node = root.querySelector(‘[data-id=”‘ + id + ‘”]’); if (!node) return id; return node.innerText.replace(/s+/g, ” “).trim(); } function clearSelection() { root.classList.remove(“spx-is-focused”); nodes.forEach(function (node) { node.classList.remove(“is-active”, “is-related”, “is-muted”); }); if (panel) { panel.hidden = true; } } function openPanel(id) { const item = details[id]; if (!item || !panel) return; const related = item.related || []; panelType.textContent = item.type; panelTitle.textContent = item.title; panelText.textContent = item.text; relatedList.innerHTML = “”; if (related.length) { relatedBlock.hidden = false; related.forEach(function (relatedId) { const chip = document.createElement(“span”); chip.className = “spx-chip”; chip.textContent = labelFor(relatedId); relatedList.appendChild(chip); }); } else { relatedBlock.hidden = true; } root.classList.add(“spx-is-focused”); nodes.forEach(function (node) { const nodeId = node.getAttribute(“data-id”); node.classList.remove(“is-active”, “is-related”, “is-muted”); if (nodeId === id) { node.classList.add(“is-active”); } else if (related.includes(nodeId)) { node.classList.add(“is-related”); } else { node.classList.add(“is-muted”); } }); panel.hidden = false; if (window.innerWidth <= 900) { panel.scrollIntoView({ behavior: "smooth", block: "nearest" }); } } nodes.forEach(function (node) { node.addEventListener("click", function () { const id = node.getAttribute("data-id"); if (node.classList.contains("is-active") && panel && panel.hidden === false) { clearSelection(); return; } openPanel(id); }); }); if (closeButton) { closeButton.addEventListener("click", clearSelection); } document.addEventListener("keydown", function (event) { if (event.key === "Escape") { clearSelection(); } }); document.addEventListener("click", function (event) { if (!root.classList.contains("spx-is-focused")) return; if (root.contains(event.target)) return; clearSelection(); }); } if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", initSpxOrganograma); } else { initSpxOrganograma(); } })();

Organograma Inspetorial

Clique nos balões para entender a função de cada cargo, setor ou área. Ao selecionar um item, os campos relacionados serão destacados no organograma.

Legenda

Relação com o Conselho Inspetorial
Sentido das consultas de natureza administrativa
Sentido das consultas junto a prestadores de serviço e fornecedores
Limite para consultas e decisões do dia a dia


8X

5X

9X