Organograma
por admin
—
última modificação
08/04/2026 11h26
organograma.html
—
HTML,
10 KB (10381 bytes)
Conteúdo do arquivo
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Organograma</title>
<style>
:root {
--bg: #f2f2f2;
--line: #9fb0ba;
--box: #5b9bd5;
--text: #ffffff;
--shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--bg);
color: #222;
font-family: Arial, Helvetica, sans-serif;
}
.page {
max-width: 1600px;
margin: 0 auto;
padding: 28px 18px 56px;
}
.diagram-section + .diagram-section {
margin-top: 72px;
}
.annex-title {
margin: 0 0 24px;
text-align: center;
font-family: Georgia, "Times New Roman", serif;
font-size: 22px;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.scroll-area {
overflow-x: auto;
padding: 12px 0 6px;
}
.scroll-area::-webkit-scrollbar {
height: 10px;
}
.scroll-area::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.14);
border-radius: 999px;
}
.box {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: var(--box);
color: var(--text);
padding: 14px 12px;
text-transform: uppercase;
font-weight: 700;
line-height: 1.18;
box-shadow: var(--shadow);
}
.box--top-large {
width: 300px;
min-height: 124px;
font-size: 26px;
letter-spacing: 0.02em;
}
.box--top-small {
width: 190px;
min-height: 56px;
font-size: 14px;
}
.box--middle {
width: 265px;
min-height: 126px;
font-size: 18px;
}
.box--dept {
width: 100%;
min-height: 72px;
font-size: 13px;
}
.box--sub {
width: calc(100% - 26px);
min-height: 58px;
margin-left: auto;
font-size: 12px;
}
.center-row {
display: flex;
justify-content: center;
}
.branch {
position: relative;
display: grid;
justify-content: center;
padding-top: 34px;
}
.branch::before {
content: "";
position: absolute;
top: 0;
border-top: 2px solid var(--line);
}
.branch::after {
content: "";
position: absolute;
top: -34px;
left: 50%;
width: 2px;
height: 34px;
background: var(--line);
transform: translateX(-50%);
}
.branch > .branch__item {
position: relative;
display: flex;
justify-content: center;
}
.branch > .branch__item::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 2px;
height: 34px;
background: var(--line);
transform: translateX(-50%);
}
.branch--3 {
grid-template-columns: repeat(3, 265px);
gap: 56px;
width: 907px;
margin: 0 auto;
}
.branch--3::before {
left: 132px;
right: 132px;
}
.branch--2 {
grid-template-columns: repeat(2, 190px);
gap: 28px;
width: 408px;
margin: 0 auto;
}
.branch--2::before {
left: 95px;
right: 95px;
}
.branch--5 {
grid-template-columns: repeat(5, 220px);
gap: 26px;
width: 1204px;
margin: 0 auto;
}
.branch--5::before {
left: 110px;
right: 110px;
}
.chart {
margin: 0 auto;
position: relative;
}
.chart--plenario {
min-width: 1060px;
}
.chart--mesa {
min-width: 1280px;
}
.bridge-line {
position: relative;
width: 2px;
height: 26px;
background: var(--line);
margin: 8px auto 0;
}
.department-grid {
margin-top: 0;
}
.department-column {
display: flex;
flex-direction: column;
align-items: stretch;
}
.substack {
position: relative;
display: grid;
gap: 16px;
margin-top: 18px;
padding-top: 14px;
min-height: 0;
}
.substack::before {
content: "";
position: absolute;
top: -18px;
bottom: 30px;
left: 13px;
width: 2px;
background: var(--line);
}
.substack__item {
position: relative;
padding-left: 12px;
}
.substack__item::before {
content: "";
position: absolute;
left: 13px;
top: 50%;
width: 18px;
height: 2px;
background: var(--line);
transform: translateY(-50%);
}
.empty-stack {
min-height: 20px;
}
@media (max-width: 900px) {
.annex-title {
font-size: 18px;
}
}
</style>
</head>
<body>
<div class="page">
<section class="diagram-section" aria-labelledby="organograma-plenario">
<p class="annex-title" id="organograma-plenario">ANEXO I - ORGANOGRAMA</p>
<div class="scroll-area">
<div class="chart chart--plenario">
<div class="center-row">
<div class="box box--top-large">PLENÁRIO</div>
</div>
<div class="branch branch--3" aria-label="Estrutura do Plenário">
<div class="branch__item">
<div class="box box--middle">COMISSÃO EXECUTIVA DA MESA</div>
</div>
<div class="branch__item">
<div class="box box--middle">COMISSÕES PERMANENTES</div>
</div>
<div class="branch__item">
<div class="box box--middle">COMISSÕES TEMPORÁRIAS</div>
</div>
</div>
</div>
</div>
</section>
<section class="diagram-section" aria-labelledby="organograma-mesa">
<p class="annex-title" id="organograma-mesa">ANEXO I - ORGANOGRAMA</p>
<div class="scroll-area">
<div class="chart chart--mesa">
<div class="center-row">
<div class="box box--top-small">MESA DIRETORA</div>
</div>
<div class="branch branch--2" aria-label="Estrutura superior da Mesa Diretora">
<div class="branch__item">
<div class="box box--top-small">GABINETE DA PRESIDÊNCIA</div>
</div>
<div class="branch__item">
<div class="box box--top-small">GABINETE DOS VEREADORES</div>
</div>
</div>
<div class="bridge-line" aria-hidden="true"></div>
<div class="branch branch--5 department-grid" aria-label="Departamentos e unidades da Mesa Diretora">
<div class="branch__item">
<div class="department-column">
<div class="box box--dept">DEPARTAMENTO ADMINISTRATIVO</div>
<div class="substack">
<div class="substack__item">
<div class="box box--sub">SEÇÃO DE COMPRAS, LICITAÇÕES E PATRIMÔNIO</div>
</div>
<div class="substack__item">
<div class="box box--sub">SEÇÃO DE RECURSOS HUMANOS</div>
</div>
<div class="substack__item">
<div class="box box--sub">SEÇÃO COPA, HIGIENE E LIMPEZA</div>
</div>
<div class="substack__item">
<div class="box box--sub">SEÇÃO DE TECNOLOGIA DA INFORMAÇÃO</div>
</div>
<div class="substack__item">
<div class="box box--sub">SEÇÃO DE COMUNICAÇÃO SOCIAL</div>
</div>
</div>
</div>
</div>
<div class="branch__item">
<div class="department-column">
<div class="box box--dept">DEPARTAMENTO LEGISLATIVO</div>
<div class="substack">
<div class="substack__item">
<div class="box box--sub">SEÇÃO DE PROCESSO LEGISLATIVO</div>
</div>
<div class="substack__item">
<div class="box box--sub">SEÇÃO DE ASSESSORIA LEGISLATIVA</div>
</div>
<div class="substack__item">
<div class="box box--sub">SEÇÃO DE ATAS</div>
</div>
<div class="substack__item">
<div class="box box--sub">SEÇÃO DE TELEFONIA E PROTOCOLO</div>
</div>
<div class="substack__item">
<div class="box box--sub">SEÇÃO DE ARQUIVO</div>
</div>
</div>
</div>
</div>
<div class="branch__item">
<div class="department-column">
<div class="box box--dept">DEPARTAMENTO CONTÁBIL, FINANCEIRO E ORÇAMENTÁRIO</div>
<div class="substack">
<div class="substack__item">
<div class="box box--sub">SEÇÃO CONTÁBIL</div>
</div>
<div class="substack__item">
<div class="box box--sub">SEÇÃO FINANCEIRA</div>
</div>
<div class="substack__item">
<div class="box box--sub">SEÇÃO ORÇAMENTÁRIA</div>
</div>
</div>
</div>
</div>
<div class="branch__item">
<div class="department-column">
<div class="box box--dept">DEPARTAMENTO JURÍDICO</div>
<div class="empty-stack" aria-hidden="true"></div>
</div>
</div>
<div class="branch__item">
<div class="department-column">
<div class="box box--dept">CONTROLADORIA INTERNA</div>
<div class="empty-stack" aria-hidden="true"></div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</body>
</html>