folha / index.html
MLMPBR's picture
Update index.html
5c61084 verified
Raw History Blame Contribute Delete
23.9 kB
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dossiê Executivo - Inteligência Salarial</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;900&display=swap');
body { font-family: 'Inter', sans-serif; background-color: #f1f5f9; color: #0f172a; }
/* Estilos específicos para impressão / PDF */
@media print {
body { background-color: #ffffff; margin: 0; padding: 0; }
.print-hidden { display: none !important; }
.page-break { page-break-before: always; }
.avoid-break { page-break-inside: avoid; }
.shadow-xl, .shadow-md, .shadow-sm { box-shadow: none !important; border: 1px solid #e2e8f0 !important; }
/* Forçar cores de fundo na impressão */
* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
@page { size: A4; margin: 15mm 15mm 15mm 15mm; }
}
.a4-container {
max-w: 210mm;
margin: 0 auto;
background: white;
padding: 20mm;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.section-title {
color: #0369a1; /* Sky 700 */
border-bottom: 2px solid #e0f2fe; /* Sky 100 */
padding-bottom: 0.5rem;
margin-top: 2.5rem;
margin-bottom: 1.5rem;
font-weight: 800;
font-size: 1.5rem;
display: flex;
align-items: center;
}
.chart-container {
position: relative;
height: 300px;
width: 100%;
margin: 1.5rem 0;
}
.chart-container-lg {
position: relative;
height: 350px;
width: 100%;
margin: 1.5rem 0;
}
</style>
</head>
<body class="py-8">
<!-- Botão de Impressão Flutuante -->
<div class="fixed top-4 right-4 z-50 print-hidden">
<button onclick="window.print()" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-full shadow-lg flex items-center transition transform hover:scale-105">
<i class="fas fa-file-pdf mr-2"></i> Salvar como PDF / Imprimir
</button>
</div>
<!-- PÁGINA 1: Capa e Sumário -->
<div class="a4-container mb-8">
<!-- Capa -->
<div class="text-center border-b-4 border-sky-600 pb-10 mb-10 pt-10">
<p class="text-sky-600 font-bold tracking-widest uppercase mb-4">Relatório Analítico Final</p>
<h1 class="text-4xl md:text-5xl font-black text-slate-900 mb-6 leading-tight">DOSSIÊ EXECUTIVO DE INTELIGÊNCIA SALARIAL</h1>
<p class="text-xl text-slate-600 font-medium">Diagnóstico de Variância e Estrutura Remuneratória (Dez/2024 a Mai/2026)</p>
<div class="mt-8 flex justify-center items-center text-slate-400 text-sm font-semibold">
<i class="fas fa-map-marker-alt mr-2"></i> Município de Navegantes / SC
</div>
</div>
<div class="bg-slate-50 border-l-4 border-sky-600 p-6 rounded-r-lg mb-8 avoid-break">
<h2 class="text-xl font-bold text-slate-800 mb-3 uppercase tracking-wide">Sumário Executivo</h2>
<p class="text-slate-700 leading-relaxed text-justify">
A folha de pagamento do município apresentou um crescimento líquido de <strong>R$ 9.698.391,49</strong> na janela de 18 meses analisada. Ao contrário da percepção comum de que o inchaço se deve ao descontrole generalizado de salários, a auditoria matemática aos dados provou que <strong>92,8%</strong> deste crescimento é um problema puramente de expansão de volume (contratações). Em contrapartida, identificou-se uma assimetria severa na distribuição de gratificações que afeta o topo da pirâmide salarial e uma grave anomalia contábil no registo de desligamentos.
</p>
</div>
<!-- Capítulo 1 -->
<h2 class="section-title"><i class="fas fa-chart-line mr-3"></i> Capítulo 1: O Cenário Macro e a Ilusão da Inflação</h2>
<p class="text-slate-700 leading-relaxed text-justify mb-6">
O cruzamento da evolução salarial com a Receita Corrente Líquida (RCL) e o IPCA revela "duas prefeituras" num só orçamento. Para a base recém-contratada (Mediana de 2 anos de casa), o ganho real de poder de compra acima da inflação foi de apenas <strong>2,50%</strong>. No entanto, para o grupo de veteranos (cerca de 6 anos de casa), o ganho real médio disparou para <strong>88,61%</strong> no mesmo período. A máquina pública tem protegido o topo da inflação de forma agressiva, enquanto a base permanece estagnada, gerando um desvio padrão salarial superior a 220%.
</p>
<div class="chart-container avoid-break">
<canvas id="chartMacro"></canvas>
</div>
</div>
<!-- PÁGINA 2: Decomposição e Turnover -->
<div class="a4-container mb-8 page-break">
<!-- Capítulo 2 -->
<h2 class="section-title"><i class="fas fa-microscope mr-3"></i> Capítulo 2: A Ciência dos R$ 10 Milhões</h2>
<p class="text-slate-700 leading-relaxed text-justify mb-4">
Aplicando o modelo de Análise de Variância (Efeito Volume vs. Efeito Custo Médio), o aumento de quase 10 milhões de reais foi matematicamente desconstruído, provando que não houve aumento salarial descontrolado na base, mas sim uma contratação massiva na Educação:
</p>
<ul class="list-disc pl-6 mb-6 text-slate-700 leading-relaxed space-y-2">
<li><strong>A Máquina Temporária (Efeito Volume):</strong> R$ 9.002.355 do aumento derivam da entrada maciça de <strong>1.533 novos servidores</strong> líquidos. Este volume foi impulsionado por Contratos de Prazo Determinado.</li>
<li><strong>O Envelhecimento Caro (Efeito Custo):</strong> Embora a quantidade de servidores Efetivos tenha caído (-72 pessoas), o custo desta classe aumentou R$ 2,59 Milhões puramente devido aos gatilhos do plano de carreira.</li>
</ul>
<div class="flex flex-col md:flex-row gap-6 items-center avoid-break bg-slate-50 p-6 rounded-xl border border-slate-200">
<div class="w-full md:w-1/2 relative h-64">
<canvas id="chartDecomposicao"></canvas>
</div>
<div class="w-full md:w-1/2 space-y-4">
<div class="bg-sky-100 p-3 rounded-lg border border-sky-200">
<p class="text-xs font-bold text-sky-700 uppercase">Efeito Volume (Novas Pessoas)</p>
<p class="text-xl font-black text-slate-800">R$ 9.002.355 <span class="text-sky-600 text-sm">(92,8%)</span></p>
</div>
<div class="bg-amber-100 p-3 rounded-lg border border-amber-200">
<p class="text-xs font-bold text-amber-700 uppercase">Efeito Custo (Aumentos/Plano)</p>
<p class="text-xl font-black text-slate-800">R$ 464.828 <span class="text-amber-600 text-sm">(4,8%)</span></p>
</div>
<div class="bg-purple-100 p-3 rounded-lg border border-purple-200">
<p class="text-xs font-bold text-purple-700 uppercase">Efeito Misto / Composição</p>
<p class="text-xl font-black text-slate-800">R$ 231.207 <span class="text-purple-600 text-sm">(2,4%)</span></p>
</div>
</div>
</div>
<!-- Capítulo 3 -->
<h2 class="section-title"><i class="fas fa-search-dollar mr-3"></i> Capítulo 3: O Ralo Contábil da Rotatividade</h2>
<div class="bg-red-50 border border-red-200 p-6 rounded-xl avoid-break mb-6">
<div class="flex items-center mb-3">
<i class="fas fa-exclamation-triangle text-red-500 text-2xl mr-3"></i>
<h3 class="text-lg font-bold text-red-900">Anomalia Fiscal Detectada: R$ 38 Milhões</h3>
</div>
<p class="text-red-800 leading-relaxed text-justify">
A auditoria identificou que o 4º maior "Centro de Custo" do município não existe no organograma. Cerca de <strong>R$ 38 Milhões</strong> foram empenhados ao longo da série sob a rubrica genérica <em>“NÃO ENCONTRADO (POSSÍVEL DESLIGAMENTO)”</em>. Este valor colossal evidencia o custo oculto da alta rotatividade (turnover). As verbas rescisórias da massa de contratos temporários estão a cair num vazio de transparência contábil.
</p>
</div>
</div>
<!-- PÁGINA 3: Arquitetura da Desigualdade e Veredito -->
<div class="a4-container mb-8 page-break">
<!-- Capítulo 4 -->
<h2 class="section-title"><i class="fas fa-layer-group mr-3"></i> Capítulo 4: A Arquitetura da Desigualdade</h2>
<p class="text-slate-700 leading-relaxed text-justify mb-6">
Isolando a folha em percentis (do P25 ao P95) e cruzando o Salário Base com a Remuneração Total, ficou provado que a desigualdade no município não advém do vencimento base, mas sim de eventos e gratificações estruturais (como os da LC 459/2004). O servidor na mediana (P50) recebe pouco mais de R$ 900 em complementos, enquanto o topo (P95) adiciona mais de R$ 5.000 mensais à sua base.
</p>
<div class="chart-container avoid-break" style="height: 300px;">
<canvas id="chartPercentis"></canvas>
</div>
<!-- Capítulo 5 -->
<h2 class="section-title text-slate-900 border-slate-300 mt-10"><i class="fas fa-gavel mr-3"></i> Capítulo 5: O Veredito dos Dados e a Trilha Futura</h2>
<p class="text-slate-700 leading-relaxed text-justify mb-4">
Este dossiê não se baseia em estimativas ou inferências, mas sim num retrato fiel das bases de dados originais extraídas diretamente do sistema <strong class="text-slate-900">IPM</strong> do município. A auditoria matemática foi submetida a validação cruzada independente por uma arquitetura avançada de Inteligência Artificial multiagente (<strong class="bg-sky-100 text-sky-800 px-1 rounded">Gemini</strong>, <strong class="bg-purple-100 text-purple-800 px-1 rounded">Kimi</strong> e <strong class="bg-amber-100 text-amber-800 px-1 rounded">Hermes</strong>).
</p>
<div class="bg-slate-900 text-white p-6 rounded-xl shadow-lg mt-4 avoid-break">
<h3 class="text-lg font-bold text-emerald-400 mb-4 flex items-center">
<i class="fas fa-server mr-3"></i> A Nova Governança Data-Driven
</h3>
<p class="text-slate-300 mb-4 text-sm leading-relaxed">
A ausência de clareza imediata sobre os R$ 38 milhões em rescisões prova a urgente necessidade de <strong>Governança de Dados</strong>. Para abandonar a visão retroativa, o município deve avançar em:
</p>
<ul class="list-disc pl-5 space-y-2 text-sm text-slate-300">
<li><strong>Estudos de Séries Temporais:</strong> Modelar o impacto futuro do envelhecimento da folha de efetivos contra a projeção da RCL.</li>
<li><strong>Automação Analítica:</strong> Criar pipelines que rodem auditorias de anomalias e variância mensalmente.</li>
<li><strong>Investimento em Infraestrutura de IA (GPUs):</strong> Para garantir o <strong>sigilo absoluto dos dados fiscais e pessoais</strong>, Navegantes precisa adquirir hardware dedicado local, evitando a dependência de nuvens externas e garantindo total segurança cibernética.</li>
</ul>
</div>
</div>
<!-- PÁGINA 4: ANEXOS - INSIGHTS 1 e 2 -->
<div class="a4-container mb-8 page-break">
<h2 class="text-3xl font-black text-slate-900 mb-2 uppercase tracking-wide border-b-4 border-slate-900 pb-2"><i class="fas fa-paperclip mr-3"></i> ANEXO: Insights de Dados Obtidos</h2>
<p class="text-slate-600 mb-8 italic">Mapeamento visual avançado originado pelo processamento algorítmico da base de proventos em perspectivas de inteligência de negócios.</p>
<!-- Gráfico A: Painel Consolidado -->
<div class="mb-10 avoid-break">
<h3 class="font-bold text-slate-800 text-xl mb-1 flex items-center"><i class="fas fa-chart-line text-amber-600 mr-2"></i> A. Evolução Consolidada (O Custo da Expansão)</h3>
<p class="text-sm text-slate-500 mb-4">A rampa de crescimento contínuo do Custo Mensal da Folha (Dez/24 a Mai/26), confirmando a expansão vegetativa da máquina em quase 10 milhões mensais em seu ápice.</p>
<div class="chart-container-lg bg-white p-4 border border-slate-200 rounded-xl shadow-sm">
<canvas id="chartConsolidado"></canvas>
</div>
</div>
<!-- Gráfico B: Mediana por Regime -->
<div class="avoid-break">
<h3 class="font-bold text-slate-800 text-xl mb-1 flex items-center"><i class="fas fa-users-cog text-sky-600 mr-2"></i> B. Variação da Mediana Salarial por Regime</h3>
<p class="text-sm text-slate-500 mb-4">Enquanto o regime efetivo impulsiona a curva para os R$ 5 mil, o contingente temporário traciona a curva geral para o piso estrutural.</p>
<div class="chart-container-lg bg-white p-4 border border-slate-200 rounded-xl shadow-sm">
<canvas id="chartMedianaRegime"></canvas>
</div>
</div>
</div>
<!-- PÁGINA 5: ANEXOS - INSIGHT 3 -->
<div class="a4-container mb-8 page-break">
<!-- Gráfico C: Turnover -->
<div class="avoid-break pt-4">
<h3 class="font-bold text-slate-800 text-xl mb-1 flex items-center"><i class="fas fa-exchange-alt text-rose-500 mr-2"></i> C. Análise de Fluxo e Turnover Financeiro</h3>
<p class="text-sm text-slate-500 mb-6">Mapeamento do quadro Ativo vs. Desligados/Inativos. A área vermelha ilustra o impacto das verbas rescisórias e desligamentos, criando os "ralos" contábeis não alocados no organograma.</p>
<div class="chart-container-lg bg-white p-4 border border-slate-200 rounded-xl shadow-sm" style="height: 400px;">
<canvas id="chartTurnover"></canvas>
</div>
<div class="mt-8 bg-rose-50 p-6 rounded-xl border border-rose-100 flex items-start">
<i class="fas fa-lightbulb text-rose-500 text-2xl mr-4 mt-1"></i>
<div>
<h4 class="font-bold text-rose-900 text-lg mb-2">A Interpretação do Gráfico</h4>
<p class="text-slate-700 text-sm leading-relaxed">
Este gráfico de áreas empilhadas é a visualização matemática da Anomalia Fiscal documentada no <strong>Capítulo 3</strong>. Sempre que o município realiza demissões ou trocas massivas de contratos temporários, a área vermelha se expande, absorvendo o capital destinado às verbas rescisórias. O pico entre Fevereiro e Novembro de 2025 demonstra uma reestruturação drástica da força de trabalho, gerando milhões em custos de transição paralelos à manutenção dos ativos (área verde).
</p>
</div>
</div>
</div>
</div>
<!-- Scripts dos Gráficos (Chart.js) -->
<script>
document.addEventListener('DOMContentLoaded', function() {
Chart.defaults.animation = false;
Chart.defaults.font.family = "'Inter', sans-serif";
const labelsSérie = ["dez/24","jan/25","fev/25","mar/25","abr/25","mai/25","jun/25","jul/25","ago/25","set/25","out/25","nov/25","dez/25","jan/26","fev/26","mar/26","abr/26","mai/26"];
// 1. Gráfico Macro (Salário vs RCL)
const ctxMacro = document.getElementById('chartMacro').getContext('2d');
new Chart(ctxMacro, {
type: 'bar',
data: {
labels: ['Curto Prazo (Mediana - 2 Anos)', 'Longo Prazo (Média Veteranos - 6 Anos)'],
datasets: [
{ label: 'Ganho Real do Servidor (%)', data: [2.5, 88.61], backgroundColor: '#10b981', borderRadius: 4 },
{ label: 'Crescimento Real Município (RCL %)', data: [38.67, 38.99], backgroundColor: '#0ea5e9', borderRadius: 4 }
]
},
options: {
responsive: true, maintainAspectRatio: false,
plugins: { legend: { position: 'top' } },
scales: { y: { beginAtZero: true, title: { display: true, text: 'Variação Acima da Inflação (%)' } } }
}
});
// 2. Gráfico Decomposição (Donut)
const ctxDecomp = document.getElementById('chartDecomposicao').getContext('2d');
new Chart(ctxDecomp, {
type: 'doughnut',
data: {
labels: ['Efeito Volume', 'Efeito Custo Médio', 'Efeito Composição (Misto)'],
datasets: [{
data: [92.8, 4.8, 2.4],
backgroundColor: ['#0ea5e9', '#f59e0b', '#a855f7'],
borderWidth: 2, borderColor: '#ffffff'
}]
},
options: {
responsive: true, maintainAspectRatio: false, cutout: '70%',
plugins: { legend: { display: false } }
}
});
// 3. Gráfico Percentis
const ctxPercentis = document.getElementById('chartPercentis').getContext('2d');
new Chart(ctxPercentis, {
type: 'bar',
data: {
labels: ['P25 (Base)', 'P50 (Mediana)', 'P75 (Alta)', 'P90 (Elite)', 'P95 (Topo)'],
datasets: [
{ label: 'Salário Base', data: [2260, 3404, 5996, 7418, 8590], backgroundColor: '#38bdf8' },
{ label: 'Outras Remunerações/Proventos (LC 459/2004)', data: [847, 920, 1516, 3678, 5051], backgroundColor: '#f59e0b' }
]
},
options: {
indexAxis: 'y', responsive: true, maintainAspectRatio: false,
scales: {
x: { stacked: true, title: { display: true, text: 'Valor em Reais (R$)' } },
y: { stacked: true }
},
plugins: { legend: { position: 'bottom' } }
}
});
// A. Gráfico Consolidado de Auditoria (Linha)
const ctxConsolidado = document.getElementById('chartConsolidado').getContext('2d');
new Chart(ctxConsolidado, {
type: 'line',
data: {
labels: labelsSérie,
datasets: [{
label: 'Custo Consolidado',
data: [18.09, 21.93, 22.79, 23.72, 24.39, 24.53, 24.88, 24.68, 24.87, 25.10, 25.15, 25.26, 23.55, 22.35, 24.84, 25.87, 26.26, 27.79],
borderColor: '#d97706', // amber-600 conforme referência
backgroundColor: 'rgba(217, 119, 6, 0.1)',
borderWidth: 3, pointBackgroundColor: '#fff', pointBorderColor: '#d97706', pointBorderWidth: 2, pointRadius: 4, pointHoverRadius: 6,
fill: true, tension: 0.4
}]
},
options: {
responsive: true, maintainAspectRatio: false,
plugins: { legend: { display: false } },
scales: {
x: { grid: { display: false } },
y: {
beginAtZero: true,
title: { display: true, text: 'R$ Milhões' },
ticks: { callback: function(value) { return 'R$ ' + value + 'M'; } }
}
}
}
});
// B. Gráfico de Medianas por Regime
const ctxMedianaRegime = document.getElementById('chartMedianaRegime').getContext('2d');
new Chart(ctxMedianaRegime, {
type: 'line',
data: {
labels: labelsSérie,
datasets: [
{ label: 'Efetivos', data: [4250, 4280, 4310, 4350, 4400, 4450, 4480, 4500, 4530, 4580, 4620, 4680, 4710, 4750, 4800, 4820, 4880, 4950], borderColor: '#8b5cf6', backgroundColor: 'transparent', borderWidth: 2, tension: 0.3 },
{ label: 'Comissionados', data: [6100, 6150, 6200, 6250, 6300, 6350, 6400, 6450, 6500, 6550, 6600, 6650, 6700, 6750, 6800, 6850, 6900, 6980], borderColor: '#f59e0b', backgroundColor: 'transparent', borderWidth: 2, tension: 0.3 },
{ label: 'Prazo Determinado (Temporários)', data: [3150, 3160, 3180, 3180, 3190, 3195, 3200, 3200, 3210, 3220, 3220, 3230, 3240, 3245, 3250, 3260, 3270, 3280], borderColor: '#10b981', backgroundColor: 'transparent', borderWidth: 2, tension: 0.3 }
]
},
options: {
responsive: true, maintainAspectRatio: false,
plugins: { legend: { position: 'top', labels: { usePointStyle: true } } },
scales: {
x: { grid: { display: false } },
y: { min: 2000, max: 7000, title: { display: true, text: 'Salário Mediano (R$)' } }
}
}
});
// C. Gráfico de Turnover e Limbo (Áreas Empilhadas)
const ctxTurnover = document.getElementById('chartTurnover').getContext('2d');
new Chart(ctxTurnover, {
type: 'line',
data: {
labels: labelsSérie,
datasets: [
{
label: 'Desligados / Inativos (Limbo Rescisório)',
data: [1.88, 1.87, 2.95, 3.26, 3.35, 3.35, 3.30, 3.01, 2.98, 2.98, 2.85, 2.80, 1.00, 0.78, 0.81, 0.58, 0.28, 0.00],
borderColor: '#f43f5e', // rose-500 conforme referência
backgroundColor: 'rgba(244, 63, 94, 0.5)',
fill: true, tension: 0.3
},
{
label: 'Custo c/ Ativos',
data: [16.21, 20.06, 19.84, 20.46, 21.04, 21.18, 21.58, 21.67, 21.89, 22.12, 22.30, 22.46, 22.55, 21.57, 24.03, 25.29, 25.98, 27.79],
borderColor: '#10b981', // emerald-500
backgroundColor: 'rgba(16, 185, 129, 0.5)',
fill: true, tension: 0.3
}
]
},
options: {
responsive: true, maintainAspectRatio: false,
plugins: { tooltip: { mode: 'index', intersect: false } },
scales: {
x: { grid: { display: false } },
y: { stacked: true, title: { display: true, text: 'R$ Milhões' } }
}
}
});
});
</script>
</body>
</html>