https://observatorio.iases.es.gov.br:443/Contents/Item/Display/1816Infográficoshttps://observatorio.iases.es.gov.br:443/Not%C3%ADcia/atos<p></p> <!-- Tailwind CSS CDN --> <p> <script src="https://cdn.tailwindcss.com"></script> </p> <!-- Chart.js CDN --> <p> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> </p> <!-- Lucide Icons --> <p> <script src="https://unpkg.com/lucide@latest"></script> <script> tailwind.config = { darkMode: 'class', theme: { extend: { colors: { brand: { 50: '#f8fafc', 100: '#e2e8f0', 200: '#cbd5e1', 500: '#475569', 600: '#334155', 700: '#1e293b', 800: '#0f172a', accent: '#6366f1', emerald: '#10b981', rose: '#f43f5e' } }, fontFamily: { sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'], } } } } </script> </p> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap'); body { box-sizing: border-box; font-family: 'Inter', sans-serif; background-color: #f8fafc; padding: 40px 0; overflow-x: hidden; transition: background-color 0.3s ease; } .dark body { background-color: #0f172a; } .container { max-width: 1200px; margin: 0 auto; padding: 1.5rem; } .infographic-card { border-radius: 1.5rem; background-color: #ffffff; box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.08); border: 1px solid rgba(0, 0, 0, 0.05); opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease-out, transform 0.8s ease-out, background-color 0.3s, border-color 0.3s; padding: 2rem; margin-bottom: 2rem; position: relative; overflow: hidden; } .dark .infographic-card { background-color: #1e293b; box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.05); } .infographic-card.is-visible { opacity: 1; transform: translateY(0); } .card-header-main { background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%); color: white; } .card-evolution { border-left: 6px solid #6366f1; } .card-categories { border-left: 6px solid #10b981; } .card-insights { border-left: 6px solid #f59e0b; } .card-explorer { border-left: 6px solid #3b82f6; } .data-header { font-weight: 800; line-height: 1; } .stat-card { transition: transform 0.3s ease, box-shadow 0.3s ease; } .stat-card:hover { transform: translateY(-4px); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.12); } .chart-container-wrapper { position: relative; height: 320px; width: 100%; margin: 20px 0; } .section-badge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 40px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1rem; } /* ESTILOS PARA INSIGHTS - FONTE DOS TEXTOS AUMENTADA EM 60% TOTAL */ .insight-card h4 { font-size: 1.3rem !important; } .insight-card p { font-size: 1.5rem !important; line-height: 1.4 !important; } @media (max-width: 768px) { .insight-card h4 { font-size: 1.1rem !important; } .insight-card p { font-size: 1.2rem !important; } } /* ESTILOS PARA OS CARDS DA SEÇÃO 2 - TEXTOS AUMENTADOS EM 15% */ .category-card .category-label { font-size: 1.15rem !important; } .category-card .category-value { font-size: 1.1rem !important; } @media (max-width: 768px) { .category-card .category-label { font-size: 1.0rem !important; } .category-card .category-value { font-size: 0.95rem !important; } } table { width: 100%; border-collapse: collapse; } th { text-align: left; padding: 10px 12px !important; background: #f8fafc; font-size: 0.8rem; color: #64748b; text-transform: uppercase; border-bottom: 2px solid #e2e8f0; cursor: pointer; user-select: none; transition: background-color 0.2s ease; } th:hover { background: #f1f5f9; } .dark th:hover { background: #334155; } .dark th { background: #1e293b; color: #94a3b8; border-bottom: 2px solid #334155; } td { padding: 8px 12px !important; border-bottom: 1px solid #f1f5f9; font-size: 0.9rem; color: #1e293b; transition: background-color 0.3s ease; word-break: break-word; white-space: normal; } .dark td { color: #cbd5e1; border-bottom: 1px solid #334155; } .sort-icon { display: inline-block; margin-left: 6px; font-size: 0.7rem; opacity: 0.5; transition: opacity 0.2s ease; } th:hover .sort-icon { opacity: 1; } .sort-icon.active { opacity: 1; color: #6366f1; } .card-explorer th { font-size: 1.05rem !important; padding: 10px 12px !important; } .card-explorer td { font-size: 1.15rem !important; padding: 8px 12px !important; } .bg-total { background-color: #f1f1ff !important; font-weight: 800; color: #4f46e5; border-left: 1px solid #e2e8f0; } .dark .bg-total { background-color: #2e2a75/30 !important; color: #818cf8; border-left: 1px solid #334155; } .text-center-val { text-align: center; } .empty-row td { text-align: center; padding: 40px 20px; color: #94a3b8; font-style: italic; } @media (max-width: 768px) { .container { padding: 0.75rem; } .infographic-card { padding: 1.25rem; } th { font-size: 0.75rem; padding: 6px 8px !important; } td { font-size: 0.8rem; padding: 6px 8px !important; } .card-explorer th { font-size: 0.85rem !important; padding: 6px 8px !important; } .card-explorer td { font-size: 0.9rem !important; padding: 6px 8px !important; } } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } .dark ::-webkit-scrollbar-thumb { background: #475569; } </style> <div class="container"><!-- HEADER PRINCIPAL --><header class="text-left infographic-card card-header-main"> <div class="flex items-center gap-3 mb-5"> <div class="bg-white/20 text-white p-2.5 rounded-xl shadow-md flex items-center justify-center"><i data-lucide="bar-chart-3" class="w-6 h-6" aria-hidden="true"></i></div> <div class="inline-flex items-center gap-2 bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full text-xs font-semibold"><i data-lucide="info" class="w-3.5 h-3.5" aria-hidden="true"></i> <span>NOTA METODOL&Oacute;GICA</span></div> </div> <h1 class="text-2xl sm:text-3xl font-black mb-3 tracking-tight">An&aacute;lise dos Atos Infracionais no Sistema Socioeducativo</h1> <p class="text-white/80 text-base sm:text-lg max-w-3xl mb-8 font-medium leading-relaxed">Um mesmo adolescente pode registrar entrada no sistema socioeducativo com mais de um artigo no mesmo processo, bem como possuir m&uacute;ltiplos processos com diferentes artigos acumulados.</p> <div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-left"> <div class="bg-white/10 rounded-2xl p-6 stat-card backdrop-blur-sm border border-white/10"> <p class="text-[10px] font-bold opacity-90 uppercase tracking-widest">1. Total Entradas</p> <p class="data-header text-4xl sm:text-5xl mt-2 countup" data-value="6172">0</p> <p class="text-sm mt-2 opacity-80 font-medium">Total de Entradas (2020-2025)</p> </div> <div class="bg-white/10 rounded-2xl p-6 stat-card backdrop-blur-sm border border-white/10"> <p class="text-[10px] font-bold opacity-90 uppercase tracking-widest">2. Total de Processos Judiciais</p> <p class="data-header text-4xl sm:text-5xl mt-2 countup" data-value="6759">0</p> <p class="text-sm mt-2 opacity-80 font-medium">M&eacute;dia de 1.10 processos por jovem</p> </div> <div class="bg-white/10 rounded-2xl p-6 stat-card backdrop-blur-sm border border-white/10"> <p class="text-[10px] font-bold opacity-90 uppercase tracking-widest">3. Total de Artigos</p> <p class="data-header text-4xl sm:text-5xl mt-2 countup" data-value="10475">0</p> <p class="text-sm mt-2 opacity-80 font-medium">Total consolidado (2020-2025)</p> </div> </div> </header><!-- 1. EVOLUÇÃO DAS ENTRADAS ANUAIS --> <section class="infographic-card card-evolution"> <div class="section-badge bg-indigo-100 text-indigo-700 dark:bg-indigo-950/40 dark:text-indigo-400"><i data-lucide="trending-up" class="w-3.5 h-3.5" aria-hidden="true"></i> <span>Evolu&ccedil;&atilde;o Temporal</span></div> <h2 class="text-xl sm:text-2xl font-bold text-slate-800 dark:text-white mb-2 flex items-center gap-2"><i data-lucide="activity" class="text-indigo-500 w-5 h-5" aria-hidden="true"></i> 1. Hist&oacute;rico Comparativo de Entradas</h2> <p class="text-base sm:text-lg text-slate-500 dark:text-slate-400 mb-6 leading-relaxed">An&aacute;lise entre o N&uacute;mero de Adolescentes/jovens X N&uacute;mero de Processos X N&uacute;mero de Artigos/Lei</p> <div class="chart-container-wrapper" id="chartContainer"><canvas id="evolutionChart"></canvas></div> </section> <!-- 2. CATEGORIAS DE ATOS INFRACIONAIS - 6 CARDS COM TEXTOS AUMENTADOS --> <section class="infographic-card card-categories"> <div class="section-badge bg-emerald-100 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-400"><i data-lucide="pie-chart" class="w-3.5 h-3.5" aria-hidden="true"></i> <span>Distribui&ccedil;&atilde;o</span></div> <h2 class="text-xl sm:text-2xl font-bold text-slate-800 dark:text-white mb-2 flex items-center gap-2"><i data-lucide="bar-chart-3" class="text-emerald-500 w-5 h-5" aria-hidden="true"></i> 2. Ranking dos Artigos Infracionais (Acumulado 2020 - 2025)</h2> <p class="text-base sm:text-lg text-slate-500 dark:text-slate-400 mb-8 leading-relaxed">An&aacute;lise dos registros infracionais por grupo classificados conforme a legisla&ccedil;&atilde;o e tipifica&ccedil;&atilde;o correspondente, dos 10.475 registros vinculados aos adolescentes ingressantes no sistema socioeducativo (2020&ndash;2025).</p> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"><!-- Card 1: Lei Antidrogas --> <div class="category-card bg-slate-50/50 dark:bg-brand-700/10 rounded-2xl p-6 border border-slate-100 dark:border-slate-800/80 hover:border-indigo-500/30 dark:hover:border-indigo-500/40 transition-all duration-300 group shadow-sm hover:shadow-md"> <div class="flex items-start justify-between mb-4"> <div class="p-3 bg-indigo-50 dark:bg-indigo-950/30 text-indigo-600 dark:text-indigo-400 rounded-xl group-hover:scale-110 transition-transform duration-300"><i data-lucide="pill" class="w-6 h-6" aria-hidden="true"></i></div> <span class="text-3xl font-extrabold text-indigo-600 dark:text-indigo-400 percent-count" data-percent="31.1">0%</span></div> <h3 class="font-bold text-slate-800 dark:text-white text-base sm:text-lg mb-1">Lei Antidrogas</h3> <p class="text-slate-500 dark:text-slate-400 mb-4 font-medium category-value">3.261 atos acumulados</p> <div class="w-full bg-slate-100 dark:bg-slate-800 h-2.5 rounded-full overflow-hidden mb-4"> <div class="bg-indigo-500 h-full rounded-full transition-all duration-1000 ease-out progress-bar" style="width: 0%;" data-target="31.1"></div> </div> <div class="flex items-center justify-between text-sm font-semibold"><span class="text-slate-400 category-label">Ano pico: 2025 (599)</span> <span class="text-emerald-500 flex items-center gap-1">▲ +10,1%</span></div> </div> <!-- Card 2: Crimes Contra o Patrimônio --> <div class="category-card bg-slate-50/50 dark:bg-brand-700/10 rounded-2xl p-6 border border-slate-100 dark:border-slate-800/80 hover:border-emerald-500/30 dark:hover:border-emerald-500/40 transition-all duration-300 group shadow-sm hover:shadow-md"> <div class="flex items-start justify-between mb-4"> <div class="p-3 bg-emerald-50 dark:bg-emerald-950/30 text-emerald-600 dark:text-emerald-400 rounded-xl group-hover:scale-110 transition-transform duration-300"><i data-lucide="shield-alert" class="w-6 h-6" aria-hidden="true"></i></div> <span class="text-3xl font-extrabold text-emerald-600 dark:text-emerald-400 percent-count" data-percent="25.6">0%</span></div> <h3 class="font-bold text-slate-800 dark:text-white text-base sm:text-lg mb-1">Contra o Patrim&ocirc;nio</h3> <p class="text-slate-500 dark:text-slate-400 mb-4 font-medium category-value">2.677 atos acumulados</p> <div class="w-full bg-slate-100 dark:bg-slate-800 h-2.5 rounded-full overflow-hidden mb-4"> <div class="bg-emerald-500 h-full rounded-full transition-all duration-1000 ease-out progress-bar" style="width: 0%;" data-target="25.6"></div> </div> <div class="flex items-center justify-between text-sm font-semibold"><span class="text-slate-400 category-label">Furtos, roubos e danos</span> <span class="text-emerald-500 flex items-center gap-1">▲ +14,9%</span></div> </div> <!-- Card 3: Crimes Contra a Pessoa --> <div class="category-card bg-slate-50/50 dark:bg-brand-700/10 rounded-2xl p-6 border border-slate-100 dark:border-slate-800/80 hover:border-rose-500/30 dark:hover:border-rose-500/40 transition-all duration-300 group shadow-sm hover:shadow-md"> <div class="flex items-start justify-between mb-4"> <div class="p-3 bg-rose-50 dark:bg-rose-950/30 text-rose-600 dark:text-rose-400 rounded-xl group-hover:scale-110 transition-transform duration-300"><i data-lucide="user-x" class="w-6 h-6" aria-hidden="true"></i></div> <span class="text-3xl font-extrabold text-rose-600 dark:text-rose-400 percent-count" data-percent="15.0">0%</span></div> <h3 class="font-bold text-slate-800 dark:text-white text-base sm:text-lg mb-1">Contra a Pessoa</h3> <p class="text-slate-500 dark:text-slate-400 mb-4 font-medium category-value">1.575 atos acumulados</p> <div class="w-full bg-slate-100 dark:bg-slate-800 h-2.5 rounded-full overflow-hidden mb-4"> <div class="bg-rose-500 h-full rounded-full transition-all duration-1000 ease-out progress-bar" style="width: 0%;" data-target="15.0"></div> </div> <div class="flex items-center justify-between text-sm font-semibold"><span class="text-slate-400 category-label">Les&otilde;es e amea&ccedil;as</span> <span class="text-rose-500 flex items-center gap-1">▲ +49,0%</span></div> </div> <!-- Card 4: Estatuto do Desarmamento --> <div class="category-card bg-slate-50/50 dark:bg-brand-700/10 rounded-2xl p-6 border border-slate-100 dark:border-slate-800/80 hover:border-amber-500/30 dark:hover:border-amber-500/40 transition-all duration-300 group shadow-sm hover:shadow-md"> <div class="flex items-start justify-between mb-4"> <div class="p-3 bg-amber-50 dark:bg-amber-950/30 text-amber-600 dark:text-amber-400 rounded-xl group-hover:scale-110 transition-transform duration-300"><i data-lucide="target" class="w-6 h-6" aria-hidden="true"></i></div> <span class="text-3xl font-extrabold text-amber-600 dark:text-amber-400 percent-count" data-percent="8.0">0%</span></div> <h3 class="font-bold text-slate-800 dark:text-white text-base sm:text-lg mb-1">Estatuto do Desarmamento</h3> <p class="text-slate-500 dark:text-slate-400 mb-4 font-medium category-value">838 atos acumulados</p> <div class="w-full bg-slate-100 dark:bg-slate-800 h-2.5 rounded-full overflow-hidden mb-4"> <div class="bg-amber-500 h-full rounded-full transition-all duration-1000 ease-out progress-bar" style="width: 0%;" data-target="8.0"></div> </div> <div class="flex items-center justify-between text-sm font-semibold"><span class="text-slate-400 category-label">Porte e posse ilegal</span> <span class="text-emerald-500 flex items-center gap-1">▲ +9,6%</span></div> </div> <!-- Card 5: Tentativa contra a Pessoa --> <div class="category-card bg-slate-50/50 dark:bg-brand-700/10 rounded-2xl p-6 border border-slate-100 dark:border-slate-800/80 hover:border-cyan-500/30 dark:hover:border-cyan-500/40 transition-all duration-300 group shadow-sm hover:shadow-md"> <div class="flex items-start justify-between mb-4"> <div class="p-3 bg-cyan-50 dark:bg-cyan-950/30 text-cyan-600 dark:text-cyan-400 rounded-xl group-hover:scale-110 transition-transform duration-300"><i data-lucide="heart-crack" class="w-6 h-6" aria-hidden="true"></i></div> <span class="text-3xl font-extrabold text-cyan-600 dark:text-cyan-400 percent-count" data-percent="4.9">0%</span></div> <h3 class="font-bold text-slate-800 dark:text-white text-base sm:text-lg mb-1">Tentativa contra Pessoa</h3> <p class="text-slate-500 dark:text-slate-400 mb-4 font-medium category-value">509 atos acumulados</p> <div class="w-full bg-slate-100 dark:bg-slate-800 h-2.5 rounded-full overflow-hidden mb-4"> <div class="bg-cyan-500 h-full rounded-full transition-all duration-1000 ease-out progress-bar" style="width: 0%;" data-target="4.9"></div> </div> <div class="flex items-center justify-between text-sm font-semibold"><span class="text-slate-400 category-label">Tentativas de crimes</span> <span class="text-rose-500 flex items-center gap-1">▼ -3,0%</span></div> </div> <!-- Card 6: Demais Infracções --> <div class="category-card bg-slate-50/50 dark:bg-brand-700/10 rounded-2xl p-6 border border-slate-100 dark:border-slate-800/80 hover:border-slate-500/30 dark:hover:border-slate-500/40 transition-all duration-300 group shadow-sm hover:shadow-md"> <div class="flex items-start justify-between mb-4"> <div class="p-3 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 rounded-xl group-hover:scale-110 transition-transform duration-300"><i data-lucide="layers" class="w-6 h-6" aria-hidden="true"></i></div> <span class="text-3xl font-extrabold text-slate-500 dark:text-slate-400 percent-count" data-percent="15.4">0%</span></div> <h3 class="font-bold text-slate-800 dark:text-white text-base sm:text-lg mb-1">Demais Infra&ccedil;&otilde;es</h3> <p class="text-slate-500 dark:text-slate-400 mb-4 font-medium category-value">1.615 atos acumulados</p> <div class="w-full bg-slate-100 dark:bg-slate-800 h-2.5 rounded-full overflow-hidden mb-4"> <div class="bg-slate-400 h-full rounded-full transition-all duration-1000 ease-out progress-bar" style="width: 0%;" data-target="15.4"></div> </div> <div class="flex items-center justify-between text-sm font-semibold"><span class="text-slate-400 category-label">Outros enquadramentos</span> <span class="text-emerald-500 flex items-center gap-1">▲ +15,2%</span></div> </div> </div> </section> <!-- 3. INSIGHTS E INTELIGÊNCIA SOCIOEDUCATIVA --> <section class="infographic-card card-insights"> <div class="section-badge bg-amber-100 text-amber-700 dark:bg-amber-950/40 dark:text-amber-400"><i data-lucide="lightbulb" class="w-3.5 h-3.5" aria-hidden="true"></i> <span>Estudo Anal&iacute;tico</span></div> <h2 class="text-xl sm:text-2xl font-bold text-slate-800 dark:text-white mb-6 flex items-center gap-2"><i data-lucide="book-open" class="text-amber-500 w-5 h-5" aria-hidden="true"></i> 3. Insights Estrat&eacute;gicos &amp; Tend&ecirc;ncias</h2> <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="insight-card space-y-3 bg-slate-50/60 dark:bg-brand-700/20 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80"> <div class="flex items-center space-x-2.5 text-indigo-600 dark:text-indigo-400"><span class="w-2.5 h-2.5 rounded-full bg-indigo-500 shadow-md"></span> <h4 class="font-extrabold tracking-tight">Ingressos Expressivos em 2025</h4> </div> <p class="text-slate-600 dark:text-slate-300 leading-relaxed text-justify">Ap&oacute;s anos de flutua&ccedil;&otilde;es e redu&ccedil;&otilde;es graduais (com menor registro de entradas em 2022 com 927 entradas), <strong>2025 registrou alta acentuada de 15,4%</strong> no total de entradas (1.146) e de <strong>14,9%</strong> nos atos cometidos (1.975) comparado a 2024.</p> </div> <div class="insight-card space-y-3 bg-slate-50/60 dark:bg-brand-700/20 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80"> <div class="flex items-center space-x-2.5 text-emerald-600 dark:text-emerald-400"><span class="w-2.5 h-2.5 rounded-full bg-emerald-500 shadow-md"></span> <h4 class="font-extrabold tracking-tight">Manuten&ccedil;&atilde;o dos Atos referentes &agrave; Lei Antidrogas e ao Patrim&ocirc;nio</h4> </div> <p class="text-slate-600 dark:text-slate-300 leading-relaxed text-justify">A <strong>Lei Antidrogas</strong> representa o principal vetor de entrada com <strong>3.261 atos (31,1%)</strong>, seguida diretamente por <strong>Crimes contra o Patrim&ocirc;nio (25,6%)</strong>. Juntos, consolidam <strong>56,7% de todos os atos infracionais</strong> do per&iacute;odo.</p> </div> <div class="insight-card space-y-3 bg-slate-50/60 dark:bg-brand-700/20 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80"> <div class="flex items-center space-x-2.5 text-sky-600 dark:text-sky-400"><span class="w-2.5 h-2.5 rounded-full bg-sky-500 shadow-md"></span> <h4 class="font-extrabold tracking-tight">Aumento Atos de Viol&ecirc;ncia Dom&eacute;stica</h4> </div> <p class="text-slate-600 dark:text-slate-300 leading-relaxed text-justify">Os enquadramentos na <strong>Lei Maria da Penha</strong> saltaram de uma m&eacute;dia de 14 anuais para <strong>35 infra&ccedil;&otilde;es em 2025</strong> (aumento expressivo de mais de 100%), refletindo maior rigor ou avan&ccedil;o da viol&ecirc;ncia intrafamiliar.</p> </div> <div class="insight-card space-y-3 bg-slate-50/60 dark:bg-brand-700/20 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80"> <div class="flex items-center space-x-2.5 text-rose-600 dark:text-rose-400"><span class="w-2.5 h-2.5 rounded-full bg-rose-500 shadow-md"></span> <h4 class="font-extrabold tracking-tight">A Perman&ecirc;ncia dos Crimes Contra a Pessoa Entre os Principais Motivadores das Entradas</h4> </div> <p class="text-slate-600 dark:text-slate-300 leading-relaxed text-justify">Em 2025, os crimes contra a pessoa atingiram o pico absoluto do per&iacute;odo com <strong>392 atos registrados</strong> (alta de <strong>49,0%</strong> em rela&ccedil;&atilde;o a 2024). Essa escalada indica um crescimento preocupante da viol&ecirc;ncia interpessoal entre os jovens atendidos.</p> </div> <div class="insight-card space-y-3 bg-slate-50/60 dark:bg-brand-700/20 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80"> <div class="flex items-center space-x-2.5 text-amber-600 dark:text-amber-400"><span class="w-2.5 h-2.5 rounded-full bg-amber-500 shadow-md"></span> <h4 class="font-extrabold tracking-tight">Estatuto do Desarmamento</h4> </div> <p class="text-slate-600 dark:text-slate-300 leading-relaxed text-justify">Com um total acumulado de 838 atos infracionais (8,0% do total), as infra&ccedil;&otilde;es ligadas ao Estatuto do Desarmamento registram m&eacute;dia anual de quase 140 casos. O porte e a posse ilegal de armas mant&ecirc;m-se de forma est&aacute;vel como a 4&ordf; maior tipifica&ccedil;&atilde;o em volume.</p> </div> <div class="insight-card space-y-3 bg-slate-50/60 dark:bg-brand-700/20 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80"> <div class="flex items-center space-x-2.5 text-violet-600 dark:text-violet-400"><span class="w-2.5 h-2.5 rounded-full bg-violet-500 shadow-md"></span> <h4 class="font-extrabold tracking-tight">A&ccedil;&otilde;es Contra a Administra&ccedil;&atilde;o</h4> </div> <p class="text-slate-600 dark:text-slate-300 leading-relaxed text-justify">Os atos contra a administra&ccedil;&atilde;o p&uacute;blica saltaram de 25 em 2022 para <strong>62 registros em 2025</strong>, um aumento expressivo de <strong>148%</strong>. Esse avan&ccedil;o cont&iacute;nuo pode sugerir um cen&aacute;rio de maior resist&ecirc;ncia ou tens&atilde;o em abordagens e interven&ccedil;&otilde;es estatais.</p> </div> </div> </section> <!-- 4. EXPLORADOR GERAL DE DADOS --> <section class="infographic-card card-explorer"> <div class="section-badge bg-blue-100 text-blue-700 dark:bg-blue-950/40 dark:text-blue-400"><i data-lucide="database" class="w-3.5 h-3.5" aria-hidden="true"></i> <span>Dados Brutos</span></div> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6"> <div> <h2 class="text-xl sm:text-2xl font-bold text-slate-800 dark:text-white flex items-center gap-2"><i data-lucide="search" class="text-blue-500 w-5 h-5" aria-hidden="true"></i> 4. Pesquisa &amp; Filtros de Atos</h2> <p class="text-base sm:text-lg text-slate-500 dark:text-slate-400">Consulte e filtre as 34 tipifica&ccedil;&otilde;es presentes nos dados oficiais</p> </div> <div class="relative max-w-xs w-full"><span class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-slate-400"> <i data-lucide="filter" class="h-4 w-4" aria-hidden="true"></i> </span> <input type="text" id="searchInput" placeholder="Filtrar por tipifica&ccedil;&atilde;o..." class="w-full pl-9 pr-4 py-2.5 border border-slate-200 dark:border-slate-700 rounded-lg text-sm sm:text-base bg-slate-50 dark:bg-brand-700 text-slate-800 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors" /></div> </div> <div class="overflow-x-auto"> <table class="rounded-xl overflow-hidden border border-slate-100 dark:border-slate-800" id="dataTable"> <thead> <tr> <th class="w-1/3 min-w-[200px]" data-sort="name">Artigo / Lei <span class="sort-icon">↕️</span></th> <th class="text-center-val" data-sort="2020">2020 <span class="sort-icon">↕️</span></th> <th class="text-center-val" data-sort="2021">2021 <span class="sort-icon">↕️</span></th> <th class="text-center-val" data-sort="2022">2022 <span class="sort-icon">↕️</span></th> <th class="text-center-val" data-sort="2023">2023 <span class="sort-icon">↕️</span></th> <th class="text-center-val" data-sort="2024">2024 <span class="sort-icon">↕️</span></th> <th class="text-center-val text-indigo-600 dark:text-indigo-400" data-sort="2025">2025 <span class="sort-icon">↕️</span></th> <th class="bg-total text-center-val" data-sort="total">Total <span class="sort-icon">↕️</span></th> </tr> </thead> <tbody id="tableBody"></tbody> </table> </div> <div class="p-4 bg-slate-50 dark:bg-brand-700/20 border-t border-slate-100 dark:border-slate-800 flex items-center justify-between text-xs sm:text-sm text-slate-400 mt-2 rounded-b-xl"><span>* Dados extra&iacute;dos e correspondentes &agrave;s diretrizes de estat&iacute;sticas do ES (2020-2025). Total geral de artigos: 10.475 conforme documento oficial.</span> <span id="rowCount" class="font-semibold">Exibindo registros</span></div> </section> <footer class="text-center text-slate-400 dark:text-slate-500 py-10 space-y-2"> <p class="text-sm font-medium">Dados consolidados do Sistema Socioeducativo do Esp&iacute;rito Santo (2020-2025)</p> <p class="text-xs"></p> </footer></div> <p> <script> document.addEventListener("DOMContentLoaded", () => { lucide.createIcons({ attrs: { 'aria-hidden': 'true' } }); Chart.defaults.font.family = "'Inter', sans-serif"; Chart.defaults.color = '#94a3b8'; // Dados da tabela "Situação" - conforme primeira tabela do PDF const situacoes = { anos: ['2020', '2021', '2022', '2023', '2024', '2025'], atos: [1756, 1727, 1585, 1716, 1716, 1975], processos: [1153, 1127, 1039, 1119, 1079, 1242], adolescentes: [1056, 1037, 927, 1013, 993, 1146] }; // Lista completa de atos infracionais - 34 linhas, total 10.475 conforme PDF // Atualizada com os devidos desvios temporais corrigidos para corresponder ao documento oficial const atosInfracionais = [ { nome: "Lei Antidrogas", valores: [520, 532, 524, 542, 544, 599], total: 3261 }, { nome: "Crimes Contra o Patrimônio", valores: [503, 504, 429, 435, 375, 431], total: 2677 }, { nome: "Crimes Contra a Pessoa", valores: [244, 231, 193, 252, 263, 392], total: 1575 }, { nome: "Estatuto do Desarmamento", valores: [163, 129, 122, 162, 125, 137], total: 838 }, { nome: "Tentativa de Crimes Contra a Pessoa", valores: [81, 77, 78, 76, 100, 97], total: 509 }, { nome: "Crimes Contra a Administração Pública", valores: [40, 44, 25, 43, 53, 62], total: 267 }, { nome: "Tentativa de Crimes Contra o Patrimônio", valores: [46, 38, 38, 38, 36, 35], total: 231 }, { nome: "Concurso Material", valores: [31, 46, 27, 23, 48, 38], total: 213 }, { nome: "Crimes Contra a Dignidade Sexual", valores: [11, 9, 18, 27, 30, 20], total: 115 }, { nome: "Crimes Contra a Paz Pública", valores: [22, 20, 17, 14, 14, 22], total: 109 }, { nome: "Lei Maria da Penha", valores: [17, 17, 12, 12, 16, 35], total: 109 }, { nome: "Concurso de Pessoas", valores: [12, 13, 15, 5, 20, 18], total: 83 }, { nome: "Crime Continuado", valores: [8, 15, 12, 10, 13, 10], total: 68 }, { nome: "Crimes Contra a Fé Pública", valores: [11, 7, 4, 5, 19, 12], total: 58 }, { nome: "Concurso Formal", valores: [9, 8, 14, 6, 13, 5], total: 55 }, { nome: "Crimes de Trânsito", valores: [9, 12, 16, 7, 3, 8], total: 55 }, { nome: "Lei das Contravenções Penais", valores: [6, 3, 8, 6, 6, 12], total: 41 }, { nome: "Crimes Contra a Incolumidade Pública", valores: [5, 5, 3, 10, 3, 5], total: 31 }, { nome: "Lei de Combate às Organizações Criminosas", valores: [0, 0, 8, 5, 5, 8], total: 26 }, { nome: "Lei de Tortura", valores: [2, 2, 2, 6, 4, 6], total: 22 }, { nome: "Crimes Contra o Sentimento Religioso e Contra o Respeito aos Mortos", valores: [3, 0, 4, 5, 4, 4], total: 20 }, { nome: "Lei de Crimes Ambientais", valores: [2, 3, 2, 1, 4, 2], total: 14 }, { nome: "Erro na Execução", valores: [2, 3, 1, 0, 1, 2], total: 9 }, { nome: "Tentativa de Crimes Contra a Incolumidade Pública", valores: [2, 0, 4, 3, 0, 0], total: 9 }, { nome: "Lei Antiterrorismo", valores: [0, 0, 0, 3, 0, 1], total: 4 }, { nome: "Crimes Contra a Família", valores: [0, 0, 0, 2, 0, 0], total: 2 }, { nome: "Crimes Contra a Propriedade Imaterial", valores: [0, 1, 0, 1, 0, 0], total: 2 }, { nome: "Crimes Resultantes de Preconceitos de Raça ou de Cor (Lei do Racismo)", valores: [0, 0, 0, 2, 0, 0], total: 2 }, { nome: "Lei de Crimes Contra a Ordem Econômica", valores: [0, 0, 2, 0, 0, 0], total: 2 }, { nome: "Lei Geral de Telecomunicações", valores: [0, 0, 0, 2, 0, 0], total: 2 }, { nome: "Tentativa de Concurso de Pessoas", valores: [0, 0, 0, 0, 2, 0], total: 2 }, { nome: "Tentativa de Crimes Contra a Dignidade Sexual", valores: [1, 0, 0, 0, 0, 0], total: 1 }, { nome: "Circunstâncias Agravantes", valores: [0, 0, 0, 0, 0, 1], total: 1 }, { nome: "Outros (Consolidado)", valores: [6, 8, 7, 13, 15, 13], total: 62 } ]; let evolutionChart; let currentData = [...atosInfracionais]; let currentSort = { column: null, direction: 'asc' }; let animationStarted = false; const getHeatColor = (val, max, isDark) => { if (val === 0) return 'transparent'; const intensity = 0.05 + (val / max) * 0.45; return isDark ? `rgba(129, 140, 248, ${intensity})` : `rgba(79, 70, 229, ${intensity})`; }; const sortData = (column, direction) => { const sorted = [...currentData]; const yearMap = { '2020': 0, '2021': 1, '2022': 2, '2023': 3, '2024': 4, '2025': 5 }; sorted.sort((a, b) => { let aVal, bVal; if (column === 'name') { aVal = a.nome; bVal = b.nome; return direction === 'asc' ? aVal.localeCompare(bVal, 'pt-BR') : bVal.localeCompare(aVal, 'pt-BR'); } else if (column === 'total') { aVal = a.total; bVal = b.total; } else if (yearMap[column] !== undefined) { aVal = a.valores[yearMap[column]]; bVal = b.valores[yearMap[column]]; } if (direction === 'asc') { return aVal - bVal; } else { return bVal - aVal; } }); return sorted; }; const populateTable = (dataArray, sortState = null) => { const tableBody = document.getElementById('tableBody'); tableBody.innerHTML = ''; const isDark = document.documentElement.classList.contains('dark'); let globalMax = 0; dataArray.forEach(item => { item.valores.forEach(v => { if (v > globalMax) globalMax = v; }); }); if (dataArray.length === 0) { const emptyRow = document.createElement('tr'); emptyRow.className = "empty-row"; emptyRow.innerHTML = `<td colspan="8" class="text-center py-12 text-slate-400 dark:text-slate-500 text-base">Nenhum ato infracional encontrado para este filtro.</td>`; tableBody.appendChild(emptyRow); document.getElementById('rowCount').textContent = `0 registros encontrados`; return; } dataArray.forEach(item => { const row = document.createElement('tr'); row.className = "hover:bg-slate-50/80 dark:hover:bg-brand-700/20 transition-colors"; let cellsHtml = `<td class="font-medium text-slate-900 dark:text-slate-100">${item.nome}</td>`; item.valores.forEach((val, index) => { const bgColor = getHeatColor(val, globalMax, isDark); const textCol = index === 5 ? 'text-indigo-600 dark:text-indigo-400 font-bold' : ''; cellsHtml += `<td class="text-center-val ${textCol}" style="background-color: ${bgColor}">${val || '-'}</td>`; }); cellsHtml += `<td class="bg-total text-center-val">${item.total}</td>`; row.innerHTML = cellsHtml; tableBody.appendChild(row); }); document.getElementById('rowCount').textContent = `Total de ${dataArray.length} registros exibidos (34 total)`; if (sortState && sortState.column) { document.querySelectorAll('.sort-icon').forEach(icon => { icon.classList.remove('active'); icon.textContent = '↕️'; }); const activeTh = document.querySelector(`th[data-sort="${sortState.column}"] .sort-icon`); if (activeTh) { activeTh.classList.add('active'); activeTh.textContent = sortState.direction === 'asc' ? '↑' : '↓'; } } }; function initCharts() { const isDark = document.documentElement.classList.contains('dark'); const gridColor = isDark ? '#334155' : '#f1f5f9'; const labelColor = isDark ? '#94a3b8' : '#64748b'; const ctxEvol = document.getElementById('evolutionChart').getContext('2d'); evolutionChart = new Chart(ctxEvol, { type: 'line', data: { labels: situacoes.anos, datasets: [ { label: 'Nº Artigos/Lei', data: situacoes.atos, borderColor: '#6366f1', backgroundColor: 'rgba(99, 102, 241, 0.05)', fill: true, tension: 0.35, borderWidth: 3, pointBackgroundColor: '#6366f1', pointRadius: 5, animation: { duration: 2000, Stat_easing: 'easeOutQuart' } }, { label: 'Nº Processos', data: situacoes.processos, borderColor: '#38bdf8', backgroundColor: 'transparent', tension: 0.35, borderWidth: 2, pointBackgroundColor: '#38bdf8', pointRadius: 4, borderDash: [5, 5], animation: { duration: 2000, easing: 'easeOutQuart' } }, { label: 'Nº Adolescentes', data: situacoes.adolescentes, borderColor: '#10b981', backgroundColor: 'transparent', tension: 0.35, borderWidth: 2, pointBackgroundColor: '#10b981', pointRadius: 4, animation: { duration: 2000, easing: 'easeOutQuart' } } ] }, options: { responsive: true, maintainAspectRatio: false, animation: { duration: 2000, easing: 'easeOutQuart' }, plugins: { legend: { position: 'bottom', labels: { color: labelColor, font: { family: 'Inter', size: 11, weight: 500 }, boxWidth: 12, padding: 15 } }, tooltip: { callbacks: { label: (context) => { let label = context.dataset.label || ''; let value = context.raw; return `${label}: ${value.toLocaleString('pt-BR')}`; } } } }, scales: { x: { grid: { display: false }, ticks: { color: labelColor, font: { family: 'Inter', size: 11 } } }, y: { grid: { color: gridColor }, ticks: { color: labelColor, font: { family: 'Inter', size: 11 }, callback: (value) => value.toLocaleString('pt-BR') } } } } }); } // Função de animação de contagem para números e percentuais function animateCountUp(element, target, isPercentage = false) { if (element.dataset.animated === 'true') return; element.dataset.animated = 'true'; let start = 0; const duration = 2000; const stepTime = 16; const steps = duration / stepTime; const increment = target / steps; let current = 0; const timer = setInterval(() => { current += increment; if (current >= target) { current = target; if (isPercentage) { element.textContent = Math.round(current) + '%'; } else { element.textContent = Math.round(current).toLocaleString('pt-BR'); } clearInterval(timer); } else { if (isPercentage) { element.textContent = Math.floor(current) + '%'; } else { element.textContent = Math.floor(current).toLocaleString('pt-BR'); } } }, stepTime); } // Função para animar as barras de progresso function animateProgressBar(bar) { if (bar.dataset.animated === 'true') return; bar.dataset.animated = 'true'; const target = parseFloat(bar.dataset.target); let start = 0; const duration = 2000; const stepTime = 16; const steps = duration / stepTime; const increment = target / steps; let current = 0; const timer = setInterval(() => { current += increment; if (current >= target) { current = target; bar.style.width = current + '%'; clearInterval(timer); } else { bar.style.width = current + '%'; } }, stepTime); } let chartLoaded = false; let animationsTriggered = false; const chartObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting && !chartLoaded) { chartLoaded = true; initCharts(); chartObserver.disconnect(); } }); }, { threshold: 0.1 }); const chartContainer = document.getElementById('chartContainer'); if (chartContainer) chartObserver.observe(chartContainer); // Observer para gatilho das animações de números e barras const animationObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting && !animationsTriggered) { animationsTriggered = true; // Animar números do cabeçalho document.querySelectorAll('.countup').forEach(el => { const target = parseFloat(el.dataset.value); animateCountUp(el, target, false); }); // Animar percentuais dos cards document.querySelectorAll('.percent-count').forEach(el => { const target = parseFloat(el.dataset.percent); animateCountUp(el, target, true); }); // Animar barras de progresso document.querySelectorAll('.progress-bar').forEach(bar => { animateProgressBar(bar); }); animationObserver.disconnect(); } }); }, { threshold: 0.1 }); // Observar o header para disparar animações numéricas const headerCard = document.querySelector('.card-header-main'); if (headerCard) animationObserver.observe(headerCard); const setupSearch = () => { const searchInput = document.getElementById('searchInput'); searchInput.addEventListener('input', (e) => { const term = e.target.value.toLowerCase().trim(); currentData = atosInfracionais.filter(item => item.nome.toLowerCase().includes(term) ); if (currentSort.column) { currentData = sortData(currentSort.column, currentSort.direction); } populateTable(currentData, currentSort); }); }; const setupSorting = () => { const headers = document.querySelectorAll('#dataTable th'); headers.forEach(th => { th.addEventListener('click', () => { const sortKey = th.getAttribute('data-sort'); if (!sortKey) return; if (currentSort.column === sortKey) { currentSort.direction = currentSort.direction === 'asc' ? 'desc' : 'asc'; } else { currentSort.column = sortKey; currentSort.direction = 'asc'; } const searchTerm = document.getElementById('searchInput').value.toLowerCase().trim(); const baseData = searchTerm ? atosInfracionais.filter(item => item.nome.toLowerCase().includes(searchTerm)) : [...atosInfracionais]; currentData = sortData(currentSort.column, currentSort.direction); populateTable(currentData, currentSort); }); }); }; const setupThemeToggle = () => { const applyTheme = (isDark) => { if (isDark) { document.documentElement.classList.add('dark'); } else { document.documentElement.classList.remove('dark'); } const gridColor = isDark ? '#334155' : '#f1f5f9'; const labelColor = isDark ? '#94a3b8' : '#64748b'; if (evolutionChart) { evolutionChart.options.scales.x.ticks.color = labelColor; evolutionChart.options.scales.y.ticks.color = labelColor; evolutionChart.options.scales.y.grid.color = gridColor; evolutionChart.options.plugins.legend.labels.color = labelColor; evolutionChart.update(); } const searchTerm = document.getElementById('searchInput').value.toLowerCase().trim(); const baseData = searchTerm ? atosInfracionais.filter(item => item.nome.toLowerCase().includes(searchTerm)) : [...atosInfracionais]; if (currentSort.column) { currentData = sortData(currentSort.column, currentSort.direction); } else { currentData = baseData; } populateTable(currentData, currentSort); }; const startDark = localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches); applyTheme(startDark); }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('is-visible'); } }); }, { threshold: 0.1 }); currentData = [...atosInfracionais]; populateTable(currentData); setupSearch(); setupSorting(); setupThemeToggle(); document.querySelectorAll('.infographic-card').forEach(card => observer.observe(card)); }); </script> </p>Mon, 01 Jun 2026 12:41:00 GMThttps://observatorio.iases.es.gov.br:443/Not%C3%ADcia/atoshttps://observatorio.iases.es.gov.br:443/Not%C3%ADcia/em-producao-conhecendo-as-medidas-socioeducativas<p></p> <p><img width="1660" height="1431" alt="" src="/Media/ObservatorioIases/Logos/2.png" style="display: block; margin-left: auto; margin-right: auto;" /></p> <p></p> <p><img width="1223" height="859" alt="" src="/Media/ObservatorioIases/Logos/1.png" style="display: block; margin-left: auto; margin-right: auto;" /></p>Wed, 15 Apr 2026 16:56:00 GMThttps://observatorio.iases.es.gov.br:443/Not%C3%ADcia/em-producao-conhecendo-as-medidas-socioeducativashttps://observatorio.iases.es.gov.br:443/analisefem<p></p> <!-- Tailwind CSS CDN --> <p> <script src="https://cdn.tailwindcss.com"></script> </p> <!-- Chart.js CDN --> <p> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> </p> <!-- Lucide Icons --> <p> <script src="https://unpkg.com/lucide@latest"></script> </p> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap'); body { box-sizing: border-box; font-family: 'Inter', sans-serif; background-color: #f8fafc; padding: 20px 0; overflow-x: hidden; } .container { max-width: 1200px; margin: 0 auto; padding: 1.5rem; } .infographic-card { border-radius: 1.5rem; box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.08); border: 1px solid rgba(0, 0, 0, 0.05); opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; padding: 2rem; margin-bottom: 2rem; position: relative; overflow: hidden; } .infographic-card.is-visible { opacity: 1; transform: translateY(0); } /* Temas por seção - Cores diferentes */ .card-header-main { background: linear-gradient(135deg, #1e1b4b 0%, #4c1d95 100%); color: white; } .card-evolution { background: linear-gradient(135deg, #ffffff 0%, #eef2ff 100%); border-left: 6px solid #6366f1; } .card-race { background: linear-gradient(135deg, #ffffff 0%, #fdf2f8 100%); border-left: 6px solid #ec4899; } .card-edu { background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%); border-left: 6px solid #3b82f6; } .card-age { background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%); border-left: 6px solid #f59e0b; } .card-laws { background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%); border-left: 6px solid #ef4444; } /* Efeito decorativo de bolha nos cards */ .infographic-card::before { content: ''; position: absolute; top: -30%; right: -20%; width: 200px; height: 200px; border-radius: 50%; opacity: 0.06; pointer-events: none; } .card-evolution::before { background: radial-gradient(circle, #6366f1, transparent); } .card-race::before { background: radial-gradient(circle, #ec4899, transparent); } .card-edu::before { background: radial-gradient(circle, #3b82f6, transparent); } .card-age::before { background: radial-gradient(circle, #f59e0b, transparent); } .card-laws::before { background: radial-gradient(circle, #ef4444, transparent); } .data-header { font-weight: 800; line-height: 1; } .stat-card { transition: transform 0.3s ease, box-shadow 0.3s ease; } .stat-card:hover { transform: translateY(-4px); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.12); } .chart-container-wrapper { position: relative; height: 300px; width: 100%; margin: 20px 0; } .highlight-bar { height: 12px; border-radius: 9999px; background-color: #e2e8f0; overflow: hidden; margin-top: 8px; } .animated-bar { height: 100%; width: 0; transition: width 2s cubic-bezier(0.23, 1, 0.32, 1); } /* Badge decorativa */ .section-badge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 40px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1rem; } /* Estilos de Tabela */ table { width: 100%; border-collapse: collapse; table-layout: fixed; } th { text-align: left; padding: 10px 14px; background: #f8fafc; font-size: 0.95rem; color: #64748b; text-transform: uppercase; border-bottom: 2px solid #e2e8f0; } td { padding: 8px 14px; border-bottom: 1px solid #f1f5f9; font-size: 1.1rem; color: #1e293b; transition: background-color 0.3s ease; } .bg-total { background-color: #f1f1ff !important; font-weight: 800; color: #4f46e5; border-left: 1px solid #e2e8f0; } .text-center-val { text-align: center; } @media (max-width: 768px) { .container { padding: 0.75rem; } .infographic-card { padding: 1.25rem; } th { font-size: 0.85rem; padding: 8px; } td { font-size: 0.95rem; padding: 6px; } } </style> <div class="container"><!-- Cabeçalho Principal com tema escuro --><header class="text-center infographic-card card-header-main"> <div class="inline-flex items-center gap-2 bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full text-sm font-semibold mb-4"><i data-lucide="bar-chart-3" class="w-4 h-4"></i> <span>RELAT&Oacute;RIO OFICIAL 2020&ndash;2025</span></div> <h1 class="text-3xl sm:text-4xl font-black mb-3 tracking-tight">An&aacute;lise Socioeducativa Feminina (ES)</h1> <p class="text-white/70 text-lg mb-8 font-medium">S&eacute;rie Hist&oacute;rica Consolidada 2020 &mdash; 2025</p> <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="bg-white/10 rounded-2xl p-6 stat-card backdrop-blur-sm border border-white/20"> <p class="text-sm font-bold opacity-90 uppercase tracking-widest">Total de Entradas</p> <p class="data-header text-6xl mt-2" data-value="300">0</p> <p class="text-sm mt-2 opacity-80">Per&iacute;odo Acumulado</p> </div> <div class="bg-white/10 rounded-2xl p-6 stat-card backdrop-blur-sm border border-white/20"> <p class="text-sm font-bold opacity-90 uppercase tracking-widest">M&eacute;dia Anual</p> <p class="data-header text-6xl mt-2" data-value="50">0</p> <p class="text-sm mt-2 opacity-80">Entradas / Ano</p> </div> <div class="bg-white/10 rounded-2xl p-6 stat-card backdrop-blur-sm border border-white/20"> <p class="text-sm font-bold opacity-90 uppercase tracking-widest">Idade Cr&iacute;tica</p> <p class="data-header text-6xl mt-2" data-value="16" data-suffix=" anos">0</p> <p class="text-sm mt-2 opacity-80">Maior Incid&ecirc;ncia</p> </div> </div> </header><!-- 1. Evolução das Entradas Anuais --> <section class="infographic-card card-evolution"> <div class="section-badge bg-indigo-100 text-indigo-700"><i data-lucide="trending-up" class="w-3.5 h-3.5"></i> <span>Evolu&ccedil;&atilde;o Temporal</span></div> <h2 class="text-xl font-bold text-slate-800 mb-6 flex items-center gap-2"><i data-lucide="line-chart" class="text-indigo-500 w-5 h-5"></i> 1. Evolu&ccedil;&atilde;o das Entradas Anuais</h2> <div class="chart-container-wrapper"><canvas id="trendChart"></canvas></div> </section> <!-- 2. Perfil por Cor/Raça --> <section class="infographic-card card-race"> <div class="section-badge bg-pink-100 text-pink-700"><i data-lucide="users" class="w-3.5 h-3.5"></i> <span>Diversidade &Eacute;tnica</span></div> <h2 class="text-xl font-bold text-slate-800 mb-6 flex items-center gap-2"><i data-lucide="users" class="text-pink-500 w-5 h-5"></i> 2. Perfil por Cor/Ra&ccedil;a (Acumulado 2020-2025)</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center mb-10"> <div class="chart-container-wrapper" style="height: 250px;"><canvas id="raceChart"></canvas></div> <div class="space-y-4"> <div> <div class="flex justify-between items-center mb-1"><span class="font-bold text-slate-700">Parda</span> <span class="text-pink-600 font-black" data-value="63.0" data-suffix="%">0%</span></div> <div class="highlight-bar"> <div class="animated-bar bg-pink-500" data-width="63.0%"></div> </div> <p class="text-sm text-slate-500 mt-1 font-medium">189 Entradas acumuladas</p> </div> <div> <div class="flex justify-between items-center mb-1"><span class="font-bold text-slate-700">Preta</span> <span class="text-pink-600 font-black" data-value="28.0" data-suffix="%">0%</span></div> <div class="highlight-bar"> <div class="animated-bar bg-slate-700" data-width="28.0%"></div> </div> <p class="text-sm text-slate-500 mt-1 font-medium">84 Entradas acumuladas</p> </div> <div> <div class="flex justify-between items-center mb-1"><span class="font-bold text-slate-700">Branca</span> <span class="text-pink-600 font-black" data-value="8.7" data-suffix="%">0%</span></div> <div class="highlight-bar"> <div class="animated-bar bg-blue-400" data-width="8.7%"></div> </div> <p class="text-sm text-slate-500 mt-1 font-medium">26 Entradas acumuladas</p> </div> </div> </div> <div class="overflow-x-auto"> <h3 class="text-sm font-bold text-slate-400 uppercase mb-4 tracking-widest">Tabela de Cor/Ra&ccedil;a por Ano</h3> <table class="rounded-xl overflow-hidden border border-slate-100"> <thead> <tr> <th class="w-1/4">Cor / Ra&ccedil;a</th> <th class="text-center-val">2025</th> <th class="text-center-val">2024</th> <th class="text-center-val">2023</th> <th class="text-center-val">2022</th> <th class="text-center-val">2021</th> <th class="text-center-val">2020</th> <th class="bg-total text-center-val">Total</th> </tr> </thead> <tbody id="raceTableBody"></tbody> </table> </div> </section> <!-- 3. Escolaridade --> <section class="infographic-card card-edu"> <div class="section-badge bg-blue-100 text-blue-700"><i data-lucide="graduation-cap" class="w-3.5 h-3.5"></i> <span>N&iacute;vel Educacional</span></div> <h2 class="text-xl font-bold text-slate-800 mb-6 flex items-center gap-2"><i data-lucide="graduation-cap" class="text-blue-500 w-5 h-5"></i> 3. Escolaridade na Entrada (Acumulado 2020-2025)</h2> <div class="chart-container-wrapper" style="height: 350px;"><canvas id="eduChart"></canvas></div> <div class="mt-10 overflow-x-auto"> <h3 class="text-sm font-bold text-slate-400 uppercase mb-4 tracking-widest">Tabela de Escolaridade por Ano</h3> <table class="rounded-xl overflow-hidden border border-slate-100"> <thead> <tr> <th class="w-1/3 min-w-[180px]">Escolaridade</th> <th class="text-center-val">2025</th> <th class="text-center-val">2024</th> <th class="text-center-val">2023</th> <th class="text-center-val">2022</th> <th class="text-center-val">2021</th> <th class="text-center-val">2020</th> <th class="bg-total text-center-val">Total</th> </tr> </thead> <tbody id="eduTableBody"></tbody> </table> </div> </section> <!-- 4. Distribuição por Idade --> <section class="infographic-card card-age"> <div class="section-badge bg-amber-100 text-amber-700"><i data-lucide="calendar" class="w-3.5 h-3.5"></i> <span>Faixa Et&aacute;ria</span></div> <h2 class="text-xl font-bold text-slate-800 mb-6 flex items-center gap-2"><i data-lucide="calendar" class="text-amber-500 w-5 h-5"></i> 4. Distribui&ccedil;&atilde;o por Idade (Acumulado)</h2> <div class="chart-container-wrapper" style="height: 350px;"><canvas id="ageChart"></canvas></div> <div class="mt-10 overflow-x-auto"> <h3 class="text-sm font-bold text-slate-400 uppercase mb-4 tracking-widest">Tabela Completa de Idades por Ano</h3> <table class="rounded-xl overflow-hidden border border-slate-100"> <thead> <tr> <th class="w-1/4">Idade</th> <th class="text-center-val">2025</th> <th class="text-center-val">2024</th> <th class="text-center-val">2023</th> <th class="text-center-val">2022</th> <th class="text-center-val">2021</th> <th class="text-center-val">2020</th> <th class="bg-total text-center-val">Total</th> </tr> </thead> <tbody id="ageTableBody"></tbody> </table> </div> </section> <!-- 5. Ranking Geral de Atos Infracionais --> <section class="infographic-card card-laws"> <div class="section-badge bg-red-100 text-red-700"><i data-lucide="shield-alert" class="w-3.5 h-3.5"></i> <span>Tipifica&ccedil;&atilde;o Legal</span></div> <h2 class="text-xl font-bold text-slate-800 mb-1 flex items-center gap-2"><i data-lucide="shield-alert" class="text-red-500 w-5 h-5"></i> 5. Ranking Geral de Atos Infracionais</h2> <!-- LEGENDA ORIGINAL RESTAURADA --> <p class="text-base text-slate-500 mb-6 italic leading-relaxed"><strong>Atos Infracionais:</strong> Esta tabela considera a quantidade de leis aplicadas e n&atilde;o o n&uacute;mero de indiv&iacute;duos. Exemplo: Se um jovem ingressou por "Lei de Drogas" e "Crime contra a Pessoa", ele gerar&aacute; dois registros nesta estat&iacute;stica.</p> <div class="chart-container-wrapper" style="height: 550px;"><canvas id="lawChart"></canvas></div> <div class="mt-10 overflow-x-auto"> <h3 class="text-sm font-bold text-slate-400 uppercase mb-4 tracking-widest">Tabela Detalhada de Atos Infracionais</h3> <table class="rounded-xl overflow-hidden border border-slate-100"> <thead> <tr> <th class="w-1/3 min-w-[200px]">Lei / Ato Infracional</th> <th class="text-center-val">2025</th> <th class="text-center-val">2024</th> <th class="text-center-val">2023</th> <th class="text-center-val">2022</th> <th class="text-center-val">2021</th> <th class="text-center-val">2020</th> <th class="bg-total text-center-val">Total</th> </tr> </thead> <tbody id="lawsTableBody"></tbody> </table> </div> </section> <footer class="text-center text-slate-400 py-10"> <p class="text-base sm:text-lg font-medium">Dados consolidados do Sistema Socioeducativo &mdash; Esp&iacute;rito Santo (2020-2025)</p> </footer></div> <p> <script> document.addEventListener("DOMContentLoaded", () => { lucide.createIcons(); Chart.defaults.font.family = "'Inter', sans-serif"; Chart.defaults.color = '#94a3b8'; const getHeatColor = (val, max) => { if (val === 0) return 'transparent'; const intensity = 0.05 + (val / max) * 0.45; return `rgba(79, 70, 229, ${intensity})`; }; const populateTable = (containerId, dataArray) => { const tableBody = document.getElementById(containerId); let globalMax = 0; dataArray.forEach(item => { item.vals.forEach(v => { if (v > globalMax) globalMax = v; }); }); dataArray.forEach(item => { const row = document.createElement('tr'); let cellsHtml = `<td class="font-medium">${item.name}</td>`; item.vals.forEach(val => { const bgColor = getHeatColor(val, globalMax); const isHighValue = (val / globalMax) > 0.6; const textWeight = isHighValue ? 'font-bold' : 'font-normal'; cellsHtml += `<td class="text-center-val ${textWeight}" style="background-color: ${bgColor}" data-value="${val}">0</td>`; }); cellsHtml += `<td class="bg-total text-center-val" data-value="${item.total}">0</td>`; row.innerHTML = cellsHtml; tableBody.appendChild(row); }); }; // Dados ORIGINAIS - NENHUMA ALTERAÇÃO const raceData = [ { name: 'Parda', vals: [41, 42, 35, 23, 28, 20], total: 189 }, { name: 'Preta', vals: [20, 17, 6, 3, 20, 18], total: 84 }, { name: 'Branca', vals: [3, 6, 2, 1, 7, 7], total: 26 }, { name: 'Amarela', vals: [0, 0, 1, 0, 0, 0], total: 1 } ]; const eduData = [ { name: 'Ens. Fund. II', vals: [38, 43, 14, 16, 32, 25], total: 168 }, { name: 'Não Informado', vals: [10, 3, 18, 9, 5, 8], total: 53 }, { name: 'Ens. Médio', vals: [7, 10, 5, 2, 4, 1], total: 29 }, { name: 'EJA Fund', vals: [6, 3, 3, 0, 6, 5], total: 23 }, { name: 'Ens. Fund. I', vals: [3, 4, 2, 0, 7, 6], total: 22 }, { name: 'EJA Médio', vals: [0, 2, 2, 0, 1, 0], total: 5 } ]; const ageData = [ { name: '12 anos', vals: [0, 5, 2, 1, 0, 0], total: 8 }, { name: '13 anos', vals: [4, 5, 2, 2, 3, 3], total: 19 }, { name: '14 anos', vals: [10, 12, 4, 2, 8, 1], total: 37 }, { name: '15 anos', vals: [14, 10, 11, 7, 6, 4], total: 52 }, { name: '16 anos', vals: [11, 17, 13, 5, 15, 22], total: 83 }, { name: '17 anos', vals: [19, 12, 8, 4, 20, 9], total: 72 }, { name: '18 anos', vals: [2, 1, 1, 3, 1, 4], total: 12 }, { name: '19 anos', vals: [2, 2, 2, 1, 0, 2], total: 9 }, { name: '20 anos', vals: [2, 1, 1, 2, 2, 0], total: 8 } ]; const lawData = [ { name: 'Crimes Contra a Pessoa', vals: [28, 17, 8, 16, 39, 45], total: 153 }, { name: 'Crimes Contra o Patrimônio', vals: [14, 10, 9, 5, 17, 13], total: 68 }, { name: 'Lei Antidrogas', vals: [6, 16, 7, 3, 5, 7], total: 44 }, { name: 'Tent. Crimes Contra Pessoa', vals: [1, 1, 1, 0, 6, 16], total: 25 }, { name: 'Contra Administração Pública', vals: [2, 5, 2, 4, 4, 7], total: 24 }, { name: 'Concurso Material', vals: [0, 1, 3, 1, 2, 4], total: 11 }, { name: 'Estatuto do Desarmamento', vals: [0, 5, 0, 3, 1, 1], total: 10 }, { name: 'Concurso de Pessoas', vals: [0, 1, 0, 0, 2, 4], total: 7 }, { name: 'Contra Dignidade Sexual', vals: [0, 2, 1, 1, 1, 2], total: 7 }, { name: 'Contravenções Penais', vals: [1, 1, 1, 0, 1, 2], total: 6 }, { name: 'Concurso Formal', vals: [1, 0, 1, 0, 1, 1], total: 4 }, { name: 'Lei Maria da Penha', vals: [0, 0, 0, 1, 2, 1], total: 4 }, { name: 'Tent. Crimes Patrimônio', vals: [1, 2, 0, 0, 0, 1], total: 4 } ]; populateTable('raceTableBody', raceData); populateTable('eduTableBody', eduData); populateTable('ageTableBody', ageData); populateTable('lawsTableBody', lawData); new Chart(document.getElementById('trendChart'), { type: 'line', data: { labels: ['2020', '2021', '2022', '2023', '2024', '2025'], datasets: [{ data: [45, 55, 27, 44, 65, 64], borderColor: '#6366f1', backgroundColor: 'rgba(99, 102, 241, 0.1)', fill: true, tension: 0.4, pointRadius: 5, pointBackgroundColor: '#fff', pointBorderWidth: 2 }] }, options: { maintainAspectRatio: false, animation: { duration: 2000, easing: 'easeOutQuart' }, plugins: { legend: { display: false } } } }); new Chart(document.getElementById('raceChart'), { type: 'doughnut', data: { labels: ['Parda (189)', 'Preta (84)', 'Branca (26)', 'Amarela (1)'], datasets: [{ data: [189, 84, 26, 1], backgroundColor: ['#ec4899', '#334155', '#60a5fa', '#fcd34d'], borderWidth: 0, hoverOffset: 15 }] }, options: { maintainAspectRatio: false, animation: { animateRotate: true, animateScale: true, duration: 2000 }, plugins: { legend: { position: 'bottom', labels: { boxWidth: 12, padding: 15 } } }, cutout: '65%' } }); new Chart(document.getElementById('eduChart'), { type: 'bar', data: { labels: eduData.map(e => e.name), datasets: [{ data: eduData.map(e => e.total), backgroundColor: '#3b82f6', borderRadius: 5 }] }, options: { indexAxis: 'y', maintainAspectRatio: false, animation: { duration: 2000 }, plugins: { legend: { display: false } } } }); new Chart(document.getElementById('ageChart'), { type: 'bar', data: { labels: ['12', '13', '14', '15', '16', '17', '18', '19', '20'], datasets: [{ data: [8, 19, 37, 52, 83, 72, 12, 9, 8], backgroundColor: '#f59e0b', borderRadius: 8 }] }, options: { maintainAspectRatio: false, animation: { duration: 2000 }, plugins: { legend: { display: false } } } }); new Chart(document.getElementById('lawChart'), { type: 'bar', data: { labels: lawData.map(l => l.name), datasets: [{ data: lawData.map(l => l.total), backgroundColor: '#ef4444', borderRadius: 5 }] }, options: { indexAxis: 'y', maintainAspectRatio: false, animation: { duration: 2000 }, plugins: { legend: { display: false } } } }); const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const card = entry.target; card.classList.add('is-visible'); card.querySelectorAll('[data-value]').forEach(num => animateCountUp(num)); card.querySelectorAll('.animated-bar').forEach(bar => bar.style.width = bar.dataset.width); const canvas = card.querySelector('canvas'); if (canvas) { const chart = Chart.getChart(canvas); if (chart) chart.update(); } } }); }, { threshold: 0.1 }); document.querySelectorAll('.infographic-card').forEach(card => observer.observe(card)); function animateCountUp(el) { if (el.dataset.animated) return; el.dataset.animated = "true"; const target = parseFloat(el.dataset.value); const suffix = el.dataset.suffix || ''; let start = null; const duration = 2000; function step(timestamp) { if (!start) start = timestamp; const progress = Math.min((timestamp - start) / duration, 1); const easeProgress = 1 - Math.pow(1 - progress, 3); const current = easeProgress * target; el.textContent = (target % 1 === 0 ? Math.floor(current) : current.toFixed(1)) + suffix; if (progress < 1) requestAnimationFrame(step); else el.textContent = target + suffix; } requestAnimationFrame(step); } }); </script> </p>Wed, 15 Apr 2026 14:12:00 GMThttps://observatorio.iases.es.gov.br:443/analisefemhttps://observatorio.iases.es.gov.br:443/escolaridade/2025<p></p> <!-- Tailwind CSS --> <p> <script src="https://cdn.tailwindcss.com"></script> </p> <!-- Lucide Icons --> <p> <script src="https://unpkg.com/lucide@latest"></script> </p> <!-- Google Fonts: Inter --> <p></p> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap'); * { box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background: linear-gradient(135deg, #f1f5f9 0%, #e6edf5 100%); color: #475569; margin: 0; padding: 0; min-height: 100vh; font-size: 1.2em; } .container { max-width: 1200px; margin: 0 auto; padding: 1.5rem; width: 100%; } .chart-container, .visual-card-container { background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%); border-radius: 1rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); padding: 1.75rem; transition: all 0.3s ease; border: 1px solid #e2e8f0; position: relative; } .chart-container:hover, .visual-card-container:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); } h1 { font-size: 2.4rem; font-weight: 800; color: #1e293b; } h3 { font-size: 1.8rem; font-weight: 700; color: #1e293b; } .age-bar-wrapper { flex: 1; display: flex; flex-direction: column; align-items: center; max-width: 5rem; } .age-bar { width: 100%; max-width: 3.5rem; transition: height 1s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.5s ease; border-top-left-radius: 0.6rem; border-top-right-radius: 0.6rem; height: 0; will-change: height; } .progress-bar { height: 24px; background-color: #f1f5f9; border-radius: 12px; overflow: hidden; width: 100%; } .progress-fill { height: 100%; border-radius: 12px; width: 0; transition: width 1s cubic-bezier(0.34, 1.56, 0.64, 1); will-change: width; } .school-item { cursor: pointer; padding: 0.5rem; border-radius: 0.75rem; transition: all 0.2s ease; } .school-item:hover { background: rgba(59, 130, 246, 0.05); } .school-item.active { background: rgba(59, 130, 246, 0.1); outline: 2px solid #3b82f6; } .texto-legenda { font-size: 0.86rem; font-weight: 600; } .category-label { font-size: 1.15rem; font-weight: 700; color: #1e293b; } .age-label { font-size: 1.35rem; font-weight: 800; color: #64748b; } .age-tooltip { font-size: 1.15rem; font-weight: 800; } </style> <div class="container space-y-8"><!-- HEADER --><header class="visual-card-container flex flex-col md:flex-row justify-between items-start md:items-center gap-4"> <div> <h1 class="leading-tight flex items-center gap-3"><i data-lucide="bar-chart-3" class="text-indigo-600 shrink-0" style="width: 42px; height: 42px;"></i> Dashboard das Escolaridades de Entrada em 2025</h1> <p id="filter-status" class="text-slate-600 text-3xl mt-3 italic font-bold tracking-tight">Consolidado Geral de Entradas</p> </div> <div class="flex flex-col items-end shrink-0"><button onclick="resetFilter()" id="reset-btn" style="display: none;" class="mb-4 text-xl font-extrabold text-blue-600 hover:text-blue-800 transition-colors flex items-center gap-2"> <i data-lucide="refresh-cw" class="w-6 h-6"></i> Ver Tudo </button> <span class="text-slate-400 texto-legenda uppercase tracking-widest mb-1">Total de Jovens</span> <span id="stat-total" class="text-5xl font-extrabold text-slate-900 tracking-tighter">1.146</span></div> </header><main class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-stretch"> <!-- COLUNA ESQUERDA --> <div class="lg:col-span-8 space-y-8 flex flex-col"><!-- TOP 10 ESCOLARIDADE (Topo) --> <section class="chart-container flex-grow"> <h3 class="mb-10 flex items-center gap-2"><i data-lucide="graduation-cap" class="text-blue-500 w-8 h-8"></i> Top 10 N&iacute;veis de Escolaridade (Clique para Filtrar)</h3> <div id="school-list" class="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-12"><!-- Gerado via JS --></div> </section> <!-- PERFIL POR IDADE (Base) --> <section class="chart-container h-[500px] shrink-0"> <div class="flex items-center justify-between mb-10"> <h3 class="flex items-center gap-2"><i data-lucide="calendar" class="text-indigo-500 w-7 h-7"></i> Perfil por Idade</h3> <div class="text-right"><span id="age-peak" class="text-4xl font-black text-indigo-600 tracking-tighter">375</span> <p class="texto-legenda text-slate-400 uppercase tracking-tighter">Pico na Visualiza&ccedil;&atilde;o</p> </div> </div> <div id="age-chart" class="flex items-end justify-between h-[340px] gap-1 md:gap-2 mb-4 px-4"><!-- Gerado via JS --></div> </section> </div> <!-- COLUNA DIREITA --> <div class="lg:col-span-4 flex flex-col gap-8"><!-- GÊNERO --> <section class="visual-card-container shrink-0"> <h3 class="mb-6 flex items-center gap-2"><i data-lucide="users" class="text-emerald-500 w-7 h-7"></i>Sexo Atribu&iacute;do ao Nascer</h3> <div class="grid grid-cols-2 gap-4"> <div class="bg-indigo-50 p-6 rounded-2xl border border-white shadow-sm flex flex-col items-center text-center"><i data-lucide="user" class="text-indigo-600 mb-2" style="width: 32px; height: 32px;"></i> <span class="texto-legenda uppercase text-slate-400">Masculino</span> <span id="stat-masc" class="text-3xl font-black text-slate-900 my-1">1.082</span> <span id="perc-masc" class="category-label text-indigo-600">94.4%</span></div> <div class="bg-rose-50 p-6 rounded-2xl border border-white shadow-sm flex flex-col items-center text-center"><i data-lucide="user" class="text-rose-500 mb-2" style="width: 32px; height: 32px;"></i> <span class="texto-legenda uppercase text-slate-400">Feminino</span> <span id="stat-fem" class="text-3xl font-black text-slate-900 my-1">64</span> <span id="perc-fem" class="category-label text-rose-500">5.6%</span></div> </div> </section> <!-- COR / RAÇA --> <section class="visual-card-container shrink-0"> <h3 class="mb-8 flex items-center gap-2"><i data-lucide="palette" class="text-orange-500 w-6 h-6"></i> Cor/Ra&ccedil;a</h3> <div id="race-list" class="space-y-8"><!-- Gerado via JS --></div> </section> <!-- MOTIVOS DA APREENSÃO --> <section class="chart-container flex-grow flex flex-col"> <h3 class="mb-10 flex items-center gap-2"><i data-lucide="shield-alert" class="text-rose-500 w-6 h-6"></i> Motivos</h3> <div id="motives-list" class="flex-grow flex flex-col justify-between py-2 gap-8"><!-- Gerado via JS --></div> </section> </div> </main><footer class="mt-12 mb-8 text-center"> <div class="inline-flex items-center gap-4 bg-white px-8 py-4 rounded-[1.2rem] border border-slate-200 shadow-sm text-slate-600 transition-all hover:shadow-md"><i data-lucide="file-text" class="text-slate-400 w-5 h-5"></i> <span class="text-base font-black uppercase tracking-[0.25em]"> Base de Dados: Sistema Socioeducativo ES &bull; Refer&ecirc;ncia 2025 </span></div> </footer></div> <p> <script> // DADOS REAIS EXTRAÍDOS E CONFERIDOS const MASTER_DATA = { total: 1146, gender: { masc: 1082, fem: 64 }, race: [ { name: "Parda", val: 875, perc: 76.3, color: "#9a3412" }, { name: "Preta", val: 196, perc: 17.1, color: "#0f172a" }, { name: "Branca", val: 73, perc: 6.4, color: "#94a3b8" }, { name: "Amarela", val: 2, perc: 0.2, color: "#facc15" } ], motives: [ { name: "Mandado de Busca", val: 525, color: "#4f46e5" }, { name: "Flagrante", val: 488, color: "#e11d48" }, { name: "Recaptura", val: 116, color: "#d97706" }, { name: "Descumprimento MSE", val: 17, color: "#64748b" } ], // AJUSTADO: Removido 21 anos, ajustado 20 anos para 46 (Total 1146) ages: [ { age: 12, val: 5 }, { age: 13, val: 37 }, { age: 14, val: 74 }, { age: 15, val: 149 }, { age: 16, val: 235 }, { age: 17, val: 375 }, { age: 18, val: 148 }, { age: 19, val: 77 }, { age: 20, val: 46 } ], schooling: [ // 8º ano E.F (190) { name: "8º ano E.F", val: 190, ageData: {13:3, 14:18, 15:28, 16:38, 17:65, 18:26, 19:10, 20:2}, genderData: { masc: 183, fem: 7 }, raceData: { "Amarela": 2, "Branca": 10, "Preta": 33, "Parda": 145 }, motivesData: { "Mandado de Busca": 78, "Flagrante": 87, "Recaptura": 21, "Descumprimento MSE": 4 } }, // AJUSTADO: 7º ano E.F (189) - 20 anos = 5, sem 21 anos { name: "7º ano E.F", val: 189, ageData: {12:1, 13:9, 14:18, 15:35, 16:40, 17:55, 18:13, 19:13, 20:5}, genderData: { masc: 172, fem: 17 }, raceData: { "Amarela": 0, "Branca": 10, "Preta": 27, "Parda": 152 }, motivesData: { "Mandado de Busca": 91, "Flagrante": 79, "Recaptura": 16, "Descumprimento MSE": 3 } }, // 1ª Série E.M (150) { name: "1ª Série E.M", val: 150, ageData: {15:7, 16:34, 17:62, 18:33, 19:7, 20:7}, genderData: { masc: 146, fem: 4 }, raceData: { "Amarela": 0, "Branca": 12, "Preta": 25, "Parda": 113 }, motivesData: { "Mandado de Busca": 65, "Flagrante": 61, "Recaptura": 24, "Descumprimento MSE": 0 } }, // AJUSTADO: 6º ano E.F (137) - 20 anos = 3, sem 21 anos { name: "6º ano E.F", val: 137, ageData: {12:1, 13:12, 14:18, 15:24, 16:24, 17:36, 18:14, 19:5, 20:3}, genderData: { masc: 134, fem: 3 }, raceData: { "Amarela": 0, "Branca": 2, "Preta": 23, "Parda": 112 }, motivesData: { "Mandado de Busca": 67, "Flagrante": 59, "Recaptura": 9, "Descumprimento MSE": 2 } }, // 9º ano E.F (136) { name: "9º ano E.F", val: 136, ageData: {14:4, 15:20, 16:35, 17:43, 18:18, 19:9, 20:7}, genderData: { masc: 131, fem: 5 }, raceData: { "Amarela": 0, "Branca": 6, "Preta": 31, "Parda": 99 }, motivesData: { "Mandado de Busca": 61, "Flagrante": 62, "Recaptura": 12, "Descumprimento MSE": 1 } }, // 5º ano E.F (46) { name: "5º ano E.F", val: 46, ageData: {12:1, 13:7, 14:3, 15:5, 16:8, 17:12, 18:3, 19:6, 20:1}, genderData: { masc: 46, fem: 0 }, raceData: { "Amarela": 0, "Branca": 2, "Preta": 7, "Parda": 37 }, motivesData: { "Mandado de Busca": 23, "Flagrante": 19, "Recaptura": 4, "Descumprimento MSE": 0 } }, // AJUSTADO: 2ª Série E.M (40) - 20 anos = 3, sem 21 anos { name: "2ª Série E.M", val: 40, ageData: {16:6, 17:20, 18:4, 19:7, 20:3}, genderData: { masc: 38, fem: 2 }, raceData: { "Amarela": 0, "Branca": 2, "Preta": 7, "Parda": 31 }, motivesData: { "Mandado de Busca": 20, "Flagrante": 15, "Recaptura": 4, "Descumprimento MSE": 1 } }, // 4º ano E.F (26) { name: "4º ano E.F", val: 26, ageData: {12:1, 13:3, 14:4, 15:3, 16:1, 17:9, 18:3, 19:1, 20:1}, genderData: { masc: 26, fem: 0 }, raceData: { "Amarela": 0, "Branca": 0, "Preta": 1, "Parda": 25 }, motivesData: { "Mandado de Busca": 9, "Flagrante": 12, "Recaptura": 5, "Descumprimento MSE": 0 } }, // 8ª Etapa E.F. (EJA) (21) { name: "8ª Etapa E.F. (EJA)", val: 21, ageData: {15:1, 16:6, 17:3, 18:5, 19:4, 20:2}, genderData: { masc: 20, fem: 1 }, raceData: { "Amarela": 0, "Branca": 4, "Preta": 4, "Parda": 13 }, motivesData: { "Mandado de Busca": 10, "Flagrante": 8, "Recaptura": 3, "Descumprimento MSE": 0 } }, // 7ª Etapa E.F. (EJA) (17) { name: "7ª Etapa E.F. (EJA)", val: 17, ageData: {15:1, 16:3, 17:12, 18:1}, genderData: { masc: 17, fem: 0 }, raceData: { "Amarela": 0, "Branca": 0, "Preta": 0, "Parda": 17 }, motivesData: { "Mandado de Busca": 11, "Flagrante": 5, "Recaptura": 1, "Descumprimento MSE": 0 } } ] }; function getAgeBarColor(val, max) { if (max === 0) return 'bg-indigo-100'; const p = (val / max) * 100; if (p >= 90) return 'bg-indigo-900'; if (p >= 70) return 'bg-indigo-700'; if (p >= 50) return 'bg-indigo-600'; if (p >= 30) return 'bg-indigo-400'; if (p >= 15) return 'bg-indigo-300'; return 'bg-indigo-200'; } function getFilteredData(schoolName) { const school = MASTER_DATA.schooling.find(s => s.name === schoolName); if (!school) return MASTER_DATA; const total = school.val; const filteredAges = MASTER_DATA.ages.map(a => ({ ...a, val: school.ageData[a.age] || 0 })); return { total: total, gender: { masc: school.genderData.masc, fem: school.genderData.fem }, race: MASTER_DATA.race.map(r => ({ ...r, val: school.raceData[r.name] || 0 })), motives: MASTER_DATA.motives.map(m => ({ ...m, val: school.motivesData[m.name] || 0 })), ages: filteredAges }; } function renderDashboard(data, isFiltered = false) { const elTotal = document.getElementById('stat-total'); const elMasc = document.getElementById('stat-masc'); const elFem = document.getElementById('stat-fem'); const elPercMasc = document.getElementById('perc-masc'); const elPercFem = document.getElementById('perc-fem'); const elReset = document.getElementById('reset-btn'); const elAgeChart = document.getElementById('age-chart'); const elAgePeak = document.getElementById('age-peak'); const elRaceList = document.getElementById('race-list'); const elMotivesList = document.getElementById('motives-list'); if (elTotal) elTotal.innerText = data.total.toLocaleString('pt-BR'); if (elMasc) elMasc.innerText = data.gender.masc; if (elFem) elFem.innerText = data.gender.fem; if (elPercMasc) elPercMasc.innerText = ((data.gender.masc/data.total)*100).toFixed(1) + '%'; if (elPercFem) elPercFem.innerText = ((data.gender.fem/data.total)*100).toFixed(1) + '%'; if (elReset) elReset.style.display = isFiltered ? 'flex' : 'none'; if (elAgeChart) { const maxVal = Math.max(...data.ages.map(a => a.val)); if (elAgePeak) elAgePeak.innerText = maxVal > 0 ? maxVal : 0; elAgeChart.innerHTML = data.ages.map(a => ` <div class="age-bar-wrapper group relative h-full"> <div class="absolute -top-10 opacity-0 group-hover:opacity-100 bg-slate-900 text-white text-[0.86rem] px-3 py-1.5 rounded-md transition-all whitespace-nowrap z-10 pointer-events-none shadow-lg">${a.val} jovens</div> <div class="w-full flex items-end h-full"> <div class="age-bar ${maxVal > 0 ? getAgeBarColor(a.val, maxVal) : 'bg-indigo-100'} mx-auto" style="height: ${maxVal > 0 ? (a.val/maxVal)*100 : 0}%"></div> </div> <span class="age-label mt-4 ${maxVal > 0 && a.val === maxVal ? 'text-indigo-900 font-black' : ''}">${a.age}</span> </div> `).join(''); } if (elRaceList) { elRaceList.innerHTML = data.race.map(r => ` <div class="flex flex-col gap-2"> <div class="flex justify-between items-center category-label uppercase"> <span class="font-bold text-slate-800">${r.name}</span> <span class="font-black text-slate-900">${r.val} <span class="text-slate-500 texto-legenda font-bold ml-1">(${((r.val/data.total)*100).toFixed(1)}%)</span></span> </div> <div class="progress-bar"><div class="progress-fill" style="width: ${(r.val/data.total)*100}%; background-color: ${r.color}"></div></div> </div> `).join(''); } if (elMotivesList) { elMotivesList.innerHTML = data.motives.map(m => ` <div class="space-y-4"> <div class="flex justify-between items-center category-label uppercase text-slate-900"> <span class="font-bold">${m.name}</span> <span class="text-2xl font-black">${m.val}</span> </div> <div class="progress-bar"><div class="progress-fill" style="width: ${(m.val/data.total)*100}%; background-color: ${m.color}"></div></div> </div> `).join(''); } if (typeof lucide !== 'undefined') lucide.createIcons(); } function renderSchoolList() { const list = document.getElementById('school-list'); if (!list) return; const maxVal = Math.max(...MASTER_DATA.schooling.map(s => s.val)); list.innerHTML = MASTER_DATA.schooling.map(s => ` <div class="school-item space-y-3" onclick="applyFilter('${s.name}', this)"> <div class="flex justify-between items-center category-label uppercase"> <span>${s.name}</span> <span class="font-black text-slate-900">${s.val}</span> </div> <div class="progress-bar"><div class="progress-fill bg-blue-500" style="width: ${(s.val/maxVal)*100}%"></div></div> </div> `).join(''); } function applyFilter(name, el) { const items = document.querySelectorAll('.school-item'); items.forEach(i => i.classList.remove('active')); if (el) el.classList.add('active'); const elFilter = document.getElementById('filter-status'); if (elFilter) elFilter.innerHTML = `Filtrado por: ${name} <span class="text-lg font-medium opacity-80 block md:inline mt-2 md:mt-0 md:ml-3">(Use 'Ver Tudo' para limpar)</span>`; const filtered = getFilteredData(name); renderDashboard(filtered, true); } function resetFilter() { const items = document.querySelectorAll('.school-item'); items.forEach(i => i.classList.remove('active')); const elFilter = document.getElementById('filter-status'); if (elFilter) elFilter.innerText = "Consolidado Geral de Entradas"; renderDashboard(MASTER_DATA); } window.onload = () => { if (typeof lucide !== 'undefined') lucide.createIcons(); renderSchoolList(); renderDashboard(MASTER_DATA); }; </script> </p>Fri, 13 Mar 2026 14:22:00 GMThttps://observatorio.iases.es.gov.br:443/escolaridade/2025https://observatorio.iases.es.gov.br:443/Not%C3%ADcia/atendimentos-tecnicos-2025-estatisticas-gerais<p></p> <p> <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script> </p> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap'); * { box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background: linear-gradient(135deg, #f1f5f9 0%, #e6edf5 100%); color: #475569; margin: 0; padding: 0; min-height: 100vh; overflow-x: hidden; font-size: 1.2em; } .container { max-width: 1200px; margin: 0 auto; padding: 1.5rem; width: 100%; } @media (max-width: 768px) { .container { padding: 1rem; } } .grid { gap: 1rem; } .chart-container, .kpi-card, .visual-card-container { background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%); border-radius: 1rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); padding: 1.5rem; transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid #e2e8f0; position: relative; overflow: hidden; } @media (max-width: 768px) { .chart-container, .kpi-card, .visual-card-container { padding: 1rem; } } .chart-container::after, .kpi-card::after, .visual-card-container::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.3s; box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.3); } .chart-container:hover::after, .kpi-card:hover::after, .visual-card-container:hover::after { opacity: 1; } .chart-container:hover, .kpi-card:hover, .visual-card-container:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); } h1, h2 { color: #1e293b; } h1 { font-size: 2.4rem; font-weight: 800; } h2 { font-size: 1.8rem; font-weight: 700; margin-bottom: 1.5rem !important; } .insight-text { color: #475569; font-size: 1.2rem; line-height: 1.6; } .kpi-card p.text-sm { font-size: 1.104rem; font-weight: 600; } .kpi-card p.text-2xl { font-size: 2.208rem; } .visual-card-container .text-2xl { font-size: 1.92rem; } .visual-card-container .text-sm { font-size: 1.2rem; font-weight: 700; } .fade-in-up { opacity: 0; transform: translateY(20px); animation: fadeInUp 0.8s ease-out forwards; } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } } .delay-100 { animation-delay: 0.1s; } .delay-200 { animation-delay: 0.2s; } .delay-300 { animation-delay: 0.3s; } .delay-400 { animation-delay: 0.4s; } .delay-500 { animation-delay: 0.5s; } .delay-600 { animation-delay: 0.6s; } .delay-700 { animation-delay: 0.7s; } .delay-800 { animation-delay: 0.8s; } .delay-900 { animation-delay: 0.9s; } .chart-height { height: 320px !important; } @media (max-width: 768px) { .chart-height { height: 280px !important; } } canvas { display: block; max-width: 100%; height: auto !important; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05)); } .counting { transition: all 0.5s ease-out; } .loading-complete::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #0ea5e9, #f59e0b); animation: loadingBar 1.5s ease-out; } @keyframes loadingBar { 0% { width: 0; opacity: 1; } 100% { width: 100%; opacity: 0; } } .export-btn { margin-top: 1rem; padding: 0.5rem 1rem; background-color: #0ea5e9; color: white; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.3s; border: none; cursor: pointer; } .export-btn:hover { background-color: #0284c7; transform: translateY(-2px); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } .peak-badge { display: inline-flex; align-items: center; padding: 0.25rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; background-color: #fef3c7; color: #92400e; margin-left: 0.5rem; } @media (prefers-color-scheme: dark) { body { background: linear-gradient(135deg, #0f172a 0%, #1a2538 100%); color: #cbd5e1; } .chart-container, .kpi-card { background: linear-gradient(135deg, #1e293b 0%, #263445 100%); border-color: #334155; } h1, h2 { color: #f1f5f9; } .insight-text { color: #94a3b8; } .kpi-card .text-sm, .kpi-card .text-2xl { color: #e2e8f0; } } </style> <div class="container"><header class="text-center mb-8 fade-in-up"> <h1 class="text-3xl sm:text-4xl font-extrabold tracking-tight">Dashboard de Atendimentos T&eacute;cnicos</h1> <p class="mt-1 text-lg insight-text">IASES - An&aacute;lise Consolidada de 2025</p> <div class="flex justify-center mt-4"><button class="export-btn" id="exportBtn"> <svg fill="none" stroke="currentColor" viewbox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path> </svg> Exportar PDF </button></div> </header> <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6"> <div class="kpi-card flex items-center p-3 fade-in-up delay-100"> <div class="bg-sky-100 text-sky-600 rounded-full p-2 mr-3"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path> </svg></div> <div> <p class="text-sm font-medium">Total de Atendimentos</p> <p id="totalAtendimentos" class="text-2xl font-bold counting">0</p> </div> </div> <div class="kpi-card flex items-center p-3 fade-in-up delay-200"> <div class="bg-amber-100 text-amber-600 rounded-full p-2 mr-3"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path> </svg></div> <div> <p class="text-sm font-medium">Total de Horas</p> <p id="totalHoras" class="text-2xl font-bold counting">0</p> </div> </div> <div class="kpi-card flex items-center p-3 fade-in-up delay-300"> <div class="bg-green-100 text-green-600 rounded-full p-2 mr-3"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path> </svg></div> <div> <p class="text-sm font-medium">M&eacute;dia Mensal</p> <p id="mediaMensal" class="text-2xl font-bold counting">0</p> </div> </div> <div class="kpi-card flex items-center p-3 fade-in-up delay-400"> <div class="bg-blue-100 text-blue-600 rounded-full p-2 mr-3"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path> </svg></div> <div> <p class="text-sm font-medium">M&ecirc;s de Pico</p> <p id="mesPico" class="text-2xl font-bold">-</p> </div> </div> </div> <div class="space-y-6"> <div class="chart-container fade-in-up delay-500"> <h2 class="text-2xl font-semibold mb-4 text-center">Evolu&ccedil;&atilde;o Mensal de Atendimentos e Horas</h2> <p class="text-base text-center mb-6 insight-text">Julho registrou o pico m&aacute;ximo do ano tanto em volume de atendimentos (6.255) quanto em horas dedicadas (14.995).</p> <canvas id="mensalChart" class="chart-height"></canvas></div> <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> <div class="chart-container fade-in-up delay-600"> <h2 class="text-2xl font-semibold mb-4 text-center">P&uacute;blico-Alvo do Atendimento</h2> <p class="text-base text-center mb-6 insight-text">O atendimento direto ao adolescente permanece como o eixo central, abrangendo 77% das demandas.</p> <canvas id="publicoAlvoChart" class="chart-height"></canvas></div> <div class="chart-container fade-in-up delay-700"> <h2 class="text-2xl font-semibold mb-4 text-center">Principais Tipos de Atendimento</h2> <p class="text-base text-center mb-6 insight-text">A categoria "Acompanhamento" &eacute; o servi&ccedil;o mais recorrente, com volume substancialmente superior &agrave;s demais a&ccedil;&otilde;es.</p> <canvas id="tipoAtendimentoChart" class="chart-height"></canvas></div> </div> <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6"> <div class="chart-container fade-in-up delay-800"> <h2 class="text-2xl font-semibold mb-4 text-center">Forma de Atendimento</h2> <p class="text-base text-center mb-6 insight-text">A modalidade presencial prevalece amplamente, representando 77% do total de atendimentos realizados.</p> <canvas id="formaAtendimentoChart" class="chart-height"></canvas></div> <div class="chart-container fade-in-up delay-900"> <h2 class="text-2xl font-semibold mb-4 text-center">Tipo de Atendimento</h2> <p class="text-base text-center mb-6 insight-text">Os atendimentos individuais s&atilde;o o padr&atilde;o de atua&ccedil;&atilde;o t&eacute;cnica, correspondendo a 92% do total.</p> <canvas id="tipoAtendimentoGeralChart" class="chart-height"></canvas></div> </div> </div> </div> <p> <script> const dataAtendimentosMensal = [4952, 4939, 4570, 4914, 4430, 4902, 6255, 5506, 6147, 6107, 5052, 5138]; const dataHorasMensal = [10664, 9184, 7757, 10834, 6992, 9454, 14995, 11383, 13662, 9945, 7169, 8014]; const labelsMeses = ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']; const dataPublicoAlvo = [48209, 6280, 5310, 1450, 870, 716, 77]; const labelsPublicoAlvo = ['Adolescente', 'Adolescente e Família', 'Família', 'Público Externo', 'Adol., Família e P. Ext.', 'Adol. e P. Externo', 'Família e P. Externo']; const dataTipoAtendimento = [36074, 3904, 3492, 2094, 3375, 1562, 947]; const dataFormaAtendimento = [48376, 14536]; const labelsFormaAtendimento = ['Presencial', 'Não Presencial']; const dataTipoAtendimentoGeral = [57803, 5109]; const labelsTipoAtendimentoGeral = ['Individual', 'Grupo']; function animateNumberImproved(element, finalValue, duration = 2000, isPercentage = false) { const startTime = performance.now(); function update(currentTime) { const elapsed = currentTime - startTime; const progress = Math.min(elapsed / duration, 1); const eased = 1 - Math.pow(1 - progress, 3); const current = finalValue * eased; if (isPercentage) { element.textContent = current.toFixed(1) + '%'; } else { element.textContent = Math.floor(current).toLocaleString('pt-BR'); } if (progress < 1) requestAnimationFrame(update); } requestAnimationFrame(update); } function animateChart(chart, duration = 1000) { const originalData = chart.data.datasets[0].data; chart.data.datasets[0].data = originalData.map(() => 0); chart.update(); let startTime = null; function animate(timestamp) { if (!startTime) startTime = timestamp; let progress = Math.min((timestamp - startTime) / duration, 1); let easedProgress = 1 - Math.pow(1 - progress, 3); chart.data.datasets[0].data = originalData.map(value => value * easedProgress); chart.update(); if (progress < 1) requestAnimationFrame(animate); } requestAnimationFrame(animate); } function addCustomTooltips() { const chartsIds = ['publicoAlvoChart', 'tipoAtendimentoChart', 'formaAtendimentoChart', 'tipoAtendimentoGeralChart']; chartsIds.forEach(chartId => { const canvas = document.getElementById(chartId); if (canvas) { const chart = Chart.getChart(canvas); if (chart) { chart.options.plugins.tooltip = { enabled: true, backgroundColor: '#1e293b', titleColor: '#f8fafc', bodyColor: '#cbd5e1', borderColor: '#0ea5e9', borderWidth: 2, cornerRadius: 8, padding: 12, callbacks: { label: (context) => { const value = context.raw; const total = context.dataset.data.reduce((a, b) => a + b, 0); const percent = ((value / total) * 100).toFixed(1); return `Valor: ${value.toLocaleString('pt-BR')} (${percent}%)`; } } }; chart.update(); } } }); } function highlightPeakMonth() { const peakElement = document.getElementById('mesPico'); const peakMonth = peakElement.textContent; peakElement.innerHTML = `${peakMonth} <span class="peak-badge">Pico</span>`; const peakIndex = labelsMeses.indexOf(peakMonth); if (peakIndex !== -1 && mensalChart) { mensalChart.data.datasets[0].backgroundColor = dataAtendimentosMensal.map((_, i) => i === peakIndex ? '#f59e0b' : '#0ea5e9' ); mensalChart.update(); } } const totalAtendimentos = 62912; const totalHoras = 120053; const mediaMensal = Math.round(totalAtendimentos / 12); const maxAtendimentos = Math.max(...dataAtendimentosMensal); const mesPicoIndex = dataAtendimentosMensal.indexOf(maxAtendimentos); setTimeout(() => { animateNumberImproved(document.getElementById('totalAtendimentos'), totalAtendimentos); animateNumberImproved(document.getElementById('totalHoras'), totalHoras); animateNumberImproved(document.getElementById('mediaMensal'), mediaMensal); document.getElementById('mesPico').textContent = labelsMeses[mesPicoIndex]; }, 500); Chart.defaults.plugins.legend.position = 'bottom'; Chart.defaults.plugins.legend.labels.usePointStyle = true; Chart.defaults.font.size = 14; const charts = []; const mensalChart = new Chart(document.getElementById('mensalChart'), { type: 'bar', data: { labels: labelsMeses, datasets: [ { type: 'bar', label: 'Total Atendimentos', data: dataAtendimentosMensal, backgroundColor: '#0ea5e9', yAxisID: 'y', order: 2 }, { type: 'line', label: 'Horas Atendimento', data: dataHorasMensal, borderColor: '#f59e0b', backgroundColor: 'rgba(245, 158, 11, 0.1)', tension: 0.3, fill: true, yAxisID: 'y1', order: 1 } ] }, options: { responsive: true, maintainAspectRatio: false, scales: { y: { position: 'left' }, y1: { position: 'right', grid: { drawOnChartArea: false } } } } }); charts.push(mensalChart); const publicoAlvoChart = new Chart(document.getElementById('publicoAlvoChart'), { type: 'bar', plugins: [ChartDataLabels], data: { labels: labelsPublicoAlvo, datasets: [{ data: dataPublicoAlvo, backgroundColor: '#14b8a6', borderRadius: 4 }] }, options: { indexAxis: 'y', responsive: true, maintainAspectRatio: false, layout: { padding: { right: 90 } }, plugins: { legend: { display: false }, datalabels: { anchor: 'end', align: 'end', color: '#475569', font: { weight: '600' }, formatter: (v) => v.toLocaleString('pt-BR') } }, scales: { x: { ticks: { display: false }, grid: { display: false } }, y: { grid: { display: false } } } } }); charts.push(publicoAlvoChart); const tipoAtendimentoChart = new Chart(document.getElementById('tipoAtendimentoChart'), { type: 'bar', plugins: [ChartDataLabels], data: { labels: ['Acompanhamento', 'Ações Acolhimento', 'Ligação Assistida', 'Acomp. P/Avaliações', 'Instrumentos Técnicos', 'Intervenções Socioed.', 'Ações de Grupos'], datasets: [{ data: dataTipoAtendimento, backgroundColor: '#3b82f6', borderRadius: 4 }] }, options: { indexAxis: 'y', responsive: true, maintainAspectRatio: false, layout: { padding: { right: 80 } }, plugins: { legend: { display: false }, datalabels: { anchor: 'end', align: 'end', color: '#475569', font: { weight: '600' }, formatter: (v) => v.toLocaleString('pt-BR') } }, scales: { x: { ticks: { display: false }, grid: { display: false } }, y: { grid: { display: false } } } } }); charts.push(tipoAtendimentoChart); const formaAtendimentoChart = new Chart(document.getElementById('formaAtendimentoChart'), { type: 'pie', plugins: [ChartDataLabels], data: { labels: labelsFormaAtendimento, datasets: [{ data: dataFormaAtendimento, backgroundColor: ['#10b981', '#3b82f6'] }] }, options: { responsive: true, maintainAspectRatio: false } }); charts.push(formaAtendimentoChart); const tipoAtendimentoGeralChart = new Chart(document.getElementById('tipoAtendimentoGeralChart'), { type: 'doughnut', plugins: [ChartDataLabels], data: { labels: labelsTipoAtendimentoGeral, datasets: [{ data: dataTipoAtendimentoGeral, backgroundColor: ['#8b5cf6', '#f59e0b'] }] }, options: { responsive: true, maintainAspectRatio: false, cutout: '60%' } }); charts.push(tipoAtendimentoGeralChart); setTimeout(() => { charts.forEach(c => animateChart(c)); addCustomTooltips(); highlightPeakMonth(); document.getElementById('exportBtn').addEventListener('click', () => window.print()); document.querySelectorAll('.chart-container, .kpi-card').forEach(el => el.classList.add('loading-complete')); }, 1500); </script> </p>Thu, 12 Mar 2026 13:59:00 GMThttps://observatorio.iases.es.gov.br:443/Not%C3%ADcia/atendimentos-tecnicos-2025-estatisticas-geraishttps://observatorio.iases.es.gov.br:443/Not%C3%ADcia/relatorio-de-visitas-familiares-2024<p></p> <!-- Carrega Tailwind CSS para estilização rápida e responsiva --> <p> <script src="https://cdn.tailwindcss.com"></script> </p> <!-- Carrega a biblioteca Lucide para ícones vetoriais --> <p> <script src="https://unpkg.com/lucide@latest"></script> </p> <!-- Carrega html2canvas para exportação --> <p> <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script> </p> <!-- Carrega Chart.js e plugin Datalabels --> <p> <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0/dist/chartjs-plugin-datalabels.min.js"></script> </p> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap'); /* CORREÇÃO DE SCROLLBAR AGRESSIVA */ html { overflow-x: hidden; } * { box-sizing: border-box; } /* 3. Garante box-sizing em todos os elementos e pseudo-elementos */ *, *::before, *::after { box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background-color: #f0f4f8; margin: 0; padding: 0; min-height: 100vh; overflow-x: hidden; max-width: 100vw; } .container { max-width: 1200px; margin: 0 auto; padding: 1.5rem; width: 100%; overflow: hidden; } .chart-card { background-color: white; border-radius: 1.5rem; padding: 1.5rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; } @media (min-width: 768px) { .chart-card { padding: 2rem; } } .chart-card:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .kpi-value { font-size: 3rem; font-weight: 800; } @media (min-width: 768px) { .kpi-value { font-size: 3.5rem; } } .section-title { font-size: 1.75rem; font-weight: 700; color: #1e293b; margin-bottom: 1.5rem; text-align: center; } @media (min-width: 768px) { .section-title { font-size: 2rem; } } /* Animações de entrada */ .fade-in-up { opacity: 0; transform: translateY(20px); animation: fadeInUp 0.8s ease-out forwards; } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } } .delay-100 { animation-delay: 0.1s; } .delay-200 { animation-delay: 0.2s; } .delay-300 { animation-delay: 0.3s; } .delay-400 { animation-delay: 0.4s; } .delay-500 { animation-delay: 0.5s; } /* Container de gráficos com altura fixa (para gráfico de barras) */ .chart-container { width: 100%; position: relative; } .chart-wrapper { width: 100%; height: 600px; position: relative; overflow: hidden; } .chart-wrapper-sm { width: 100%; height: 350px; position: relative; overflow: hidden; } /* Correção para gráficos não esticarem */ .chart-container canvas { width: 100% !important; height: 100% !important; } /* Badge para percentuais */ .percentage-badge { background: rgba(255, 255, 255, 0.2); padding: 2px 8px; border-radius: 12px; font-size: 0.86rem; font-weight: 600; } /* TEXTOS AUMENTADOS */ .texto-destaque { font-size: 1.15rem; } .texto-card { font-size: 1.04rem; } .texto-legenda { font-size: 1.32rem; } .observacao-texto { font-size: 1.2rem; line-height: 1.6; } .detail-card ul, .detail-card p { font-size: 1rem; } /* Cards de detalhes */ .detail-card { background: white; border-radius: 1rem; padding: 1.5rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); transition: all 0.3s ease; border-left: 4px solid; } .detail-card:hover { transform: translateY(-3px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } /* Responsividade melhorada */ @media (max-width: 768px) { .container { padding: 1rem; } .chart-card { padding: 1rem; } .kpi-value { font-size: 2.5rem; } .section-title { font-size: 1.5rem; } .chart-wrapper { height: 450px; } .chart-wrapper-sm { height: 300px; } .texto-destaque { font-size: 1.04rem; } .texto-card { font-size: 0.92rem; } .texto-legenda { font-size: 1.18rem; } .observacao-texto { font-size: 1.08rem; } .detail-card ul, .detail-card p { font-size: 0.98rem; } } @media (max-width: 640px) { .chart-wrapper { height: 400px; } .chart-wrapper-sm { height: 250px; } } /* Estilo para botão de exportação fixo */ .export-btn { position: fixed; bottom: 1rem; right: 1rem; z-index: 50; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } /* Cores personalizadas para os cards */ .card-primary { background: linear-gradient(135deg, #059669 0%, #047857 100%); color: white; } .card-secondary { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); color: white; } .card-accent { background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%); color: white; } /* ===== ESTILOS PARA PRINCIPAIS VISITANTES ===== */ /* Grid de Principais Visitantes */ .principais-visitantes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; padding: 1rem; } .visitante-card { background: white; border-radius: 1rem; padding: 1.5rem; box-shadow: 0 4px 20px rgba(0,0,0,0.08); transition: all 0.3s ease; border: 1px solid rgba(0,0,0,0.05); opacity: 0; transform: translateY(20px); animation: fadeInUp 0.8s ease-out forwards; } .visitante-card:hover { transform: translateY(-5px); box-shadow: 0 8px 30px rgba(0,0,0,0.12); } .icon-container { position: relative; transition: transform 0.3s ease; margin: 0 auto 1rem; } .visitante-card:hover .icon-container { transform: scale(1.05); } /* Barra de progresso */ .progress-bar { height: 6px; background-color: #e5e7eb; border-radius: 3px; overflow: hidden; margin-top: 0.5rem; } .progress-fill { height: 100%; border-radius: 3px; transition: width 1.5s ease-out; } /* Total Geral */ .total-card { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; } /* Cards de tipo de família */ .family-type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; } .family-type-card { background: white; border-radius: 1rem; padding: 1.5rem; box-shadow: 0 4px 15px rgba(0,0,0,0.08); transition: all 0.3s ease; border-top: 4px solid; } .family-type-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); } /* Responsividade para os visitantes */ @media (max-width: 1024px) { .principais-visitantes-grid { grid-template-columns: repeat(3, 1fr); } .family-type-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .principais-visitantes-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; padding: 0.5rem; } .visitante-card { padding: 1.2rem; } .family-type-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .principais-visitantes-grid { grid-template-columns: 1fr; } } /* Animações */ @keyframes growBar { from { width: 0%; } to { width: var(--target-width); } } /* Estilo específico para o gráfico de unidades */ #unitChart { font-family: 'Inter', sans-serif; } /* Animação de contagem */ .count-up { display: inline-block; } </style> <div class="container"><!-- Header e Métricas Chave --><header class="text-center mb-12 fade-in-up"> <h1 class="text-4xl md:text-5xl font-extrabold text-slate-800 tracking-tight"><i data-lucide="bar-chart-3" class="inline-block w-8 h-8 text-blue-500"></i> Relat&oacute;rio de Visitas Familiares nas Unidades Socioeducativas (2024)</h1> <!-- NOVO TEXTO ADICIONADO AQUI (COM LARGURA TOTAL) --> <div class="mt-4 w-full bg-blue-50 border border-blue-200 rounded-lg p-4"> <p class="text-blue-800 text-center italic text-base md:text-lg leading-relaxed">"Com o objetivo de assegurar a conviv&ecirc;ncia familiar e comunit&aacute;ria, as Equipes T&eacute;cnica, de Seguran&ccedil;a e a Gest&atilde;o das Unidades Socioeducativas validam e autorizam previamente as visitas aos adolescentes/jovens em cumprimento de Programa/Medida Socioeducativa."</p> </div> <!-- Key Metrics Dashboard --> <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4"><!-- Métrica 1: Total Geral --> <div class="chart-card card-secondary p-6 rounded-lg shadow-md flex flex-col items-center"><i data-lucide="users" class="w-6 h-6 mb-2"></i> <span class="text-xs uppercase font-medium">Total Geral de Visitas</span> <span class="kpi-value count-up" data-target="20121">0</span></div> <!-- Métrica 2: Mãe (Destaque) --> <div class="chart-card card-primary p-6 rounded-lg shadow-md flex flex-col items-center"><i data-lucide="heart" class="w-6 h-6 mb-2"></i> <span class="text-xs uppercase font-medium">Foco Principal: A M&atilde;e</span> <span class="kpi-value count-up" data-target="42" data-suffix="%">0%</span></div> <!-- Métrica 3: Família Biológica --> <div class="chart-card card-accent p-6 rounded-lg shadow-md flex flex-col items-center"><i data-lucide="home" class="w-6 h-6 mb-2"></i> <span class="text-xs uppercase font-medium">Fam&iacute;lia Biol&oacute;gica</span> <span class="kpi-value count-up" data-target="73" data-suffix="%">0%</span></div> </div> </header><!-- Layout principal --> <main role="main" aria-label="Relat&oacute;rio de visitas socioeducativas" class="grid grid-cols-1 gap-8"> <!-- Gráfico 1: Distribuição Mensal (Linha) --> <section aria-labelledby="monthly-chart-title" class="chart-card fade-in-up"> <h2 id="monthly-chart-title" class="section-title"><i data-lucide="calendar" aria-hidden="true"></i> 1. Distribui&ccedil;&atilde;o Mensal de Visitas</h2> <div class="chart-container"> <div class="chart-wrapper-sm"><canvas id="monthlyChart"></canvas></div> </div> <div class="mt-4 text-center text-gray-600"> <p class="text-sm">Distribui&ccedil;&atilde;o equilibrada ao longo do ano, com picos em Mar&ccedil;o, Junho, Setembro e Dezembro</p> </div> </section> <!-- Seção 2: Tipo de Família --> <section aria-labelledby="family-type-title" class="chart-card fade-in-up delay-100"> <h2 id="family-type-title" class="section-title"><i data-lucide="award" aria-hidden="true"></i> 2. Destaque: Categorias de V&iacute;nculo Familiar</h2> <div id="familyTypeKPIDisplay" class="mt-8"><!-- Conteúdo gerado via JavaScript --></div> <!-- BLOCO: Análise do Vínculo Familiar --> <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-lg mt-6"> <h3 class="text-lg font-bold text-blue-800 flex items-center mb-2"><i data-lucide="lightbulb" class="w-5 h-5 mr-2 text-blue-500"></i> An&aacute;lise do V&iacute;nculo Familiar</h3> <ul class="list-disc list-inside text-gray-700 space-y-2 observacao-texto ml-4"> <li><span class="font-semibold text-green-600">Preponder&acirc;ncia da Fam&iacute;lia Biol&oacute;gica:</span> As visitas da fam&iacute;lia biol&oacute;gica (Pai, M&atilde;e, Irm&atilde;os e Filhos) representam <strong>73%</strong> (14.721 visitas) do total. Este alto &iacute;ndice confirma o foco principal de manuten&ccedil;&atilde;o do v&iacute;nculo com os parentes de primeiro grau.</li> <li><span class="font-semibold text-green-600">Importante Suporte da Fam&iacute;lia Extensa:</span> A Fam&iacute;lia Extensa (Av&oacute;s, Tios, Sobrinhos, Primos) contribui com <strong>16%</strong> (3.319 visitas), demonstrando uma rede de apoio familiar ampliada.</li> <li><span class="font-semibold text-green-600">V&iacute;nculos Afetivos:</span> Namorados/Companheiros representam <strong>6%</strong> (1.307 visitas), indicando a manuten&ccedil;&atilde;o de relacionamentos afetivos durante a interna&ccedil;&atilde;o.</li> <li><span class="font-semibold text-green-600">Outras Rela&ccedil;&otilde;es:</span> Outros v&iacute;nculos (incluindo sogros, cunhados, padrinhos) somam <strong>4%</strong> (756 visitas), enquanto amigos representam menos de 0,1% (18 visitas).</li> </ul> </div> </section> <!-- Seção 3: Principais Visitantes (Infográfico Moderno) --> <section aria-labelledby="parentesco-chart-title" class="chart-card fade-in-up delay-200"> <h2 id="parentesco-chart-title" class="section-title"><i data-lucide="handshake" aria-hidden="true"></i> 3. Principais Visitantes</h2> <!-- Container para o infográfico --> <div id="parentescoChart" class="chart-container mt-4"><!-- Conteúdo será gerado pelo JavaScript --></div> <!-- BLOCO: Observações Chave --> <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-lg mt-6"> <h3 class="text-lg font-bold text-blue-800 flex items-center mb-2"><i data-lucide="lightbulb" class="w-5 h-5 mr-2 text-blue-500"></i> Observa&ccedil;&otilde;es Chave sobre os Visitantes</h3> <ul class="list-disc list-inside text-gray-700 space-y-2 observacao-texto ml-4"> <li><span class="font-semibold text-green-600">Domin&acirc;ncia Materna:</span> A M&atilde;e &eacute;, de longe, o principal contato, representando <strong>42%</strong> de todas as visitas (8.365 visitas). Este dado refor&ccedil;a o papel central da figura materna no suporte emocional.</li> <li><span class="font-semibold text-green-600">N&uacute;cleo Familiar Imediato:</span> M&atilde;e, Pai e Irm&atilde;os/Irm&atilde;s juntos representam <strong>71%</strong> das visitas (14.222 visitas). Isso indica que a maior parte do apoio &eacute; provida pelos membros mais pr&oacute;ximos da fam&iacute;lia.</li> <li><span class="font-semibold text-green-600">Import&acirc;ncia da Fam&iacute;lia Extensa:</span> Av&oacute;s e Tios/Tias representam <strong>13%</strong> das visitas (2.583 visitas), desempenhando um papel significativo na rede de apoio familiar.</li> <li><span class="font-semibold text-green-600">Outros Visitantes:</span> Os 9 principais visitantes listados representam <strong>95%</strong> do total (19.197 visitas). Os demais parentescos menores somam <strong>5%</strong> (924 visitas).</li> </ul> </div> </section> <!-- Gráfico 4: Visitas por Unidade Socioeducativa --> <section aria-labelledby="unit-chart-title" class="chart-card fade-in-up delay-300"> <h2 id="unit-chart-title" class="section-title"><i data-lucide="building" aria-hidden="true"></i> 4. Distribui&ccedil;&atilde;o por Unidade</h2> <div class="chart-container"> <div class="chart-wrapper"><canvas id="unitChart"></canvas></div> </div> <!-- BLOCO: Análise Contextual ATUALIZADA --> <div class="bg-yellow-50 border-l-4 border-yellow-500 p-4 rounded-lg mt-6"> <h3 class="text-lg font-bold text-yellow-800 flex items-center mb-2"><i data-lucide="map-pin" class="w-5 h-5 mr-2 text-yellow-500"></i> An&aacute;lise da Distribui&ccedil;&atilde;o por Unidade</h3> <ul class="list-disc list-inside text-gray-700 space-y-2 observacao-texto ml-4"> <li><span class="font-semibold text-green-600">Unidades de Interna&ccedil;&atilde;o (Maior Incid&ecirc;ncia):</span> As unidades com maior concentra&ccedil;&atilde;o de visitas (METROPOLITANA, UNIS/CACHOEIRO, UNIS, UNIP I, CSE e UNIS/LINHARES) s&atilde;o tipicamente Unidades de Cumprimento de Medida Socioeducativa de Interna&ccedil;&atilde;o. O maior volume &eacute; esperado devido &agrave; natureza prolongada da medida, que requer a manuten&ccedil;&atilde;o do v&iacute;nculo por um per&iacute;odo mais longo.</li> <li><span class="font-semibold text-green-600">Unidades de Interna&ccedil;&atilde;o Provis&oacute;ria e Feminina (Menor Volume/Alta Rotatividade):</span> Unidades de Interna&ccedil;&atilde;o Provis&oacute;ria (UNIP II, UNIP/CACHOEIRO e UNIP/LINHARES) apresentam incid&ecirc;ncia de visitas menor devido &agrave; alta rotatividade e tempo de perman&ecirc;ncia limitado (m&aacute;ximo de 45 dias). A Unidade Feminina de Interna&ccedil;&atilde;o (UFI), que atende o p&uacute;blico feminino (misto de Interna&ccedil;&atilde;o e Provis&oacute;ria), tamb&eacute;m demonstra baixa incid&ecirc;ncia em fun&ccedil;&atilde;o do menor n&uacute;mero de socioeducandas, comparado ao p&uacute;blico masculino.</li> <li><span class="font-semibold text-green-600">Semiliberdade (Diferencial na Conviv&ecirc;ncia):</span> As unidades SEMI (SEMI VILA VELHA e SEMI SERRA) possuem um volume menor de visitas presenciais. Na medida de Semiliberdade, o socioeducando tem a possibilidade de passar mais tempo com seus familiares fora da unidade, resultando em menos necessidade de visitas no ambiente socioeducativo.</li> <li><span class="font-semibold text-green-600">Atendimento Inicial (Fluxo R&aacute;pido):</span> A unidade CIASE, com apenas 3 visitas registradas, funciona como Unidade de Atendimento Inicial. Socioeducandos n&atilde;o permanecem por mais de 24 horas nesta unidade, explicando a incid&ecirc;ncia m&iacute;nima de visitas.</li> </ul> </div> </section> </main><footer class="mt-10 text-center text-sm text-gray-500 p-4">An&aacute;lise gerada com base no Relat&oacute;rio de Visitas Socioeducativas 2024. Total geral: <span class="count-up" data-target="20121">0</span> visitas.</footer></div> <p> <script> // Dados exatos conforme relatório PDF const data = { monthly: [ { month: "Janeiro", total: 1611, percentage: 8 }, { month: "Fevereiro", total: 1698, percentage: 8 }, { month: "Março", total: 1875, percentage: 9 }, { month: "Abril", total: 1680, percentage: 8 }, { month: "Maio", total: 1552, percentage: 8 }, { month: "Junho", total: 1831, percentage: 9 }, { month: "Julho", total: 1686, percentage: 8 }, { month: "Agosto", total: 1731, percentage: 9 }, { month: "Setembro", total: 1810, percentage: 9 }, { month: "Outubro", total: 1411, percentage: 7 }, { month: "Novembro", total: 1426, percentage: 7 }, { month: "Dezembro", total: 1810, percentage: 9 } ], // PRINCIPAIS VISITANTES (Top 9 do relatório) - VALORES ATUALIZADOS E ORDEM CORRIGIDA principaisVisitantes: [ { name: "Mãe", total: 8365, percentage: 42 }, { name: "Irmã/Irmão", total: 3608, percentage: 18 }, { name: "Pai", total: 2249, percentage: 11 }, { name: "Avós", total: 1780, percentage: 9 }, { name: "Namorada(o)/Companheira(o)", total: 1307, percentage: 6 }, { name: "Tios e Tias", total: 803, percentage: 4 }, { name: "Padrasto e Madastra", total: 506, percentage: 3 }, { name: "Filho/Filha", total: 499, percentage: 2 }, { name: "Sobrinhos", total: 469, percentage: 2 } ], // TIPO DE FAMÍLIA (valores atualizados conforme anexo) familyTypes: [ { name: "Biológica", description: "Pai/Mãe/Irmãos/Filhos(as)", total: 14721, percentage: 73, color: '#059669', icon: 'heart-handshake' }, { name: "Extensa", description: "Avós, Tios e Tias, Sobrinhos, Primos", total: 3319, percentage: 16, color: '#3b82f6', icon: 'family' }, { name: "Namorada(o)/Companheira(o)", total: 1307, percentage: 6, color: '#ec4899', icon: 'heart' }, { name: "Outros", description: "Outro(s), Sogra, Cunhado(a), Padrinho e Madrinha", total: 756, percentage: 4, color: '#f59e0b', icon: 'users' }, { name: "Amigos", total: 18, percentage: 0, color: '#6b7280', icon: 'user' } ], // UNIDADES (valores exatos do relatório) units: [ { name: "METROPOLITANA", total: 5023, percentage: 25 }, { name: "UNIS/CACHOEIRO", total: 2953, percentage: 15 }, { name: "UNIS", total: 2929, percentage: 15 }, { name: "UNIP I", total: 2527, percentage: 13 }, { name: "CSE", total: 2082, percentage: 10 }, { name: "UNIS/LINHARES", total: 1951, percentage: 10 }, { name: "UNIP II", total: 979, percentage: 5 }, { name: "UNIP/CACHOEIRO", total: 590, percentage: 3 }, { name: "UNIP/LINHARES", total: 474, percentage: 2 }, { name: "UFI", total: 278, percentage: 1 }, { name: "SEMI VILA VELHA", total: 194, percentage: 1 }, { name: "SEMI SERRA", total: 138, percentage: 1 }, { name: "CIASE", total: 3, percentage: 0 } ] }; const chartColors = [ '#059669', '#3b82f6', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899', '#6366f1', '#06b6d4', '#14b8a6', '#a855f7' ]; // Função para animação de contagem function animateCount(element, target, duration = 2000, suffix = '') { const start = 0; const increment = target / (duration / 16); // 60fps let current = start; const timer = setInterval(() => { current += increment; if (current >= target) { current = target; clearInterval(timer); } if (suffix === '%') { element.textContent = Math.floor(current) + suffix; } else { element.textContent = Math.floor(current).toLocaleString('pt-BR') + suffix; } }, 16); } // Função para animar todos os elementos com contagem function animateAllCounts() { const countElements = document.querySelectorAll('.count-up'); countElements.forEach(element => { const target = parseInt(element.getAttribute('data-target')); const suffix = element.getAttribute('data-suffix') || ''; animateCount(element, target, 2000, suffix); }); } // Função para obter ícone baseado no visitante function getIconForVisitante(name) { const icons = { 'Mãe': 'heart', 'Pai': 'user', 'Irmã/Irmão': 'users', 'Avós': 'home', 'Namorada(o)/Companheira(o)': 'heart', 'Tios e Tias': 'user-cog', 'Filho/Filha': 'users', 'Sobrinhos': 'users', 'Padrasto e Madastra': 'user-plus' }; return icons[name] || 'user'; } // 1. Gráfico Mensal com animação function createMonthlyChart() { const canvas = document.getElementById('monthlyChart'); if (!canvas) { console.error('Elemento monthlyChart não encontrado'); return; } const ctx = canvas.getContext('2d'); const monthlyChart = new Chart(ctx, { type: 'line', data: { labels: data.monthly.map(d => d.month), datasets: [{ label: 'Total de Visitas', data: data.monthly.map(d => 0), // Começa com 0 borderColor: '#3b82f6', backgroundColor: 'rgba(59, 130, 246, 0.15)', tension: 0.4, fill: true, pointBackgroundColor: '#059669', pointRadius: 5, pointHoverRadius: 7 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, title: { display: false }, tooltip: { callbacks: { label: function(context) { const label = context.dataset.label || ''; const value = context.parsed.y || context.parsed; const percentage = ((value / 20121) * 100).toFixed(0); return `${label}: ${value.toLocaleString('pt-BR')} (${percentage}%)`; } } }, datalabels: { align: 'top', anchor: 'end', color: '#3b82f6', font: { size: 11, weight: 'bold' }, formatter: (value) => value.toLocaleString('pt-BR'), } }, scales: { y: { beginAtZero: true, suggestedMin: 1000, grid: { color: 'rgba(0,0,0,0.05)' }, title: { display: true, text: 'Nº de Visitas' }, ticks: { callback: function(value) { return value.toLocaleString('pt-BR'); } } }, x: { grid: { color: 'rgba(0,0,0,0.05)' } } }, animation: { duration: 2000, easing: 'easeOutQuart' } }, plugins: [ChartDataLabels] }); // Animar os dados do gráfico setTimeout(() => { monthlyChart.data.datasets[0].data = data.monthly.map(d => d.total); monthlyChart.update(); }, 500); } // 2. Gráfico Principais Visitantes function createParentescoChart() { const container = document.getElementById('parentescoChart'); if (!container) { console.error('Elemento parentescoChart não encontrado'); return; } const principaisVisitantes = data.principaisVisitantes; const totalVisits = 20121; const top9Total = principaisVisitantes.reduce((sum, item) => sum + item.total, 0); const outrosTotal = totalVisits - top9Total; // Criar HTML dos principais visitantes container.innerHTML = ` <div class="principais-visitantes-grid"> ${principaisVisitantes.map((item, index) => { // Tamanho do ícone proporcional ao percentual const iconSize = 60 + (item.percentage * 0.5); return ` <div class="visitante-card" style="animation-delay: ${index * 0.1}s"> <div class="relative"> <!-- Ícone circular com gradiente --> <div class="icon-container" style="width: ${iconSize}px; height: ${iconSize}px;"> <div class="w-full h-full rounded-full flex items-center justify-center shadow-lg" style="background: linear-gradient(135deg, ${chartColors[index]} 0%, ${chartColors[(index + 5) % chartColors.length]} 100%);"> <i data-lucide="${getIconForVisitante(item.name)}" class="w-${Math.floor(iconSize/3)} h-${Math.floor(iconSize/3)} text-white"></i> </div> </div> <!-- Conteúdo do card --> <div class="text-center mt-2"> <h3 class="font-bold text-lg text-gray-800 mb-2">${item.name}</h3> <!-- PERCENTUAL EM DESTAQUE --> <div class="text-4xl font-bold mb-1 count-up" style="color: ${chartColors[index]}" data-target="${item.percentage}" data-suffix="%">0%</div> <!-- Valor absoluto --> <div class="text-sm text-gray-600 mb-3"> <span class="count-up" data-target="${item.total}">0</span> visitas </div> <!-- Barra de progresso --> <div class="w-full bg-gray-200 rounded-full h-3 overflow-hidden"> <div class="h-full rounded-full progress-fill" style="width: 0%; background-color: ${chartColors[index]};" data-target="${item.percentage}%"> </div> </div> </div> </div> </div> `; }).join('')} </div> <!-- Total Geral --> <div class="mt-8 p-6 total-card rounded-xl shadow-lg"> <div class="text-center"> <div class="flex items-center justify-center mb-3"> <i data-lucide="bar-chart-3" class="w-6 h-6 mr-2 text-white"></i> <span class="text-xl font-semibold">Resumo Geral</span> </div> <div class="grid grid-cols-2 gap-4"> <div class="text-center"> <div class="text-3xl font-bold mb-1 count-up" data-target="${top9Total}">0</div> <div class="text-sm opacity-90">9 Principais Visitantes</div> <div class="text-xs opacity-75">95% do total</div> </div> <div class="text-center"> <div class="text-3xl font-bold mb-1 count-up" data-target="${totalVisits}">0</div> <div class="text-sm opacity-90">Total Geral</div> <div class="text-xs opacity-75">100% das visitas</div> </div> </div> <div class="mt-4 text-sm opacity-90"> <i data-lucide="info" class="w-4 h-4 inline mr-1"></i> Os 9 principais representam 95% do total, outros parentescos somam 5% (<span class="count-up" data-target="${outrosTotal}">0</span> visitas) </div> </div> </div> `; // Re-cria os ícones Lucide if (window.lucide && window.lucide.createIcons) { lucide.createIcons(); } // Animar barras de progresso setTimeout(() => { const progressBars = container.querySelectorAll('.progress-fill'); progressBars.forEach(bar => { const targetWidth = bar.getAttribute('data-target'); bar.style.width = targetWidth; bar.style.transition = 'width 1.5s ease-out'; }); }, 100); } // 3. Destaque: Tipo de Família (KPI Cards - Versão Anterior) function renderFamilyTypeKPI() { const container = document.getElementById('familyTypeKPIDisplay'); if (!container) { console.error('Elemento familyTypeKPIDisplay não encontrado'); return; } const totalVisits = 20121; const familyTypes = data.familyTypes; // Encontrar os dados principais const biologica = familyTypes.find(f => f.name === "Biológica"); const extensa = familyTypes.find(f => f.name === "Extensa"); const namorados = familyTypes.find(f => f.name === "Namorada(o)/Companheira(o)"); const outros = familyTypes.find(f => f.name === "Outros"); const amigos = familyTypes.find(f => f.name === "Amigos"); container.innerHTML = ` <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8"> <!-- KPI Principal: Família Biológica --> <div class="lg:col-span-2 bg-green-50 p-6 rounded-xl border-4 border-green-500 shadow-lg flex flex-col justify-center items-center text-center"> <i data-lucide="heart-handshake" class="w-12 h-12 text-green-600 mb-3"></i> <span class="text-lg font-semibold text-gray-700">${biologica.name}</span> <div class="mt-2 text-sm text-gray-600">${biologica.description}</div> <div class="flex items-end mt-2"> <span class="kpi-value text-green-600 leading-none count-up" data-target="${biologica.percentage}" data-suffix="%">0%</span> <span class="text-2xl text-green-600 ml-2">(<span class="count-up" data-target="${biologica.total}">0</span> Visitas)</span> </div> <p class="text-sm text-gray-500 mt-2">Do total de <span class="count-up" data-target="${totalVisits}">0</span> visitas registradas.</p> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-4 mt-6"> <div class="bg-green-600 h-4 rounded-full" style="width: 0%;" data-target="${biologica.percentage}%"></div> </div> <div class="flex justify-between w-full text-xs font-medium text-gray-500 mt-1"> <span>0%</span> <span>100%</span> </div> </div> <!-- KPIs Secundários --> <div class="flex flex-col space-y-4"> <!-- Família Extensa --> <div class="bg-blue-50 p-4 rounded-xl border border-blue-300 shadow-md"> <div class="flex items-center justify-between"> <span class="font-semibold text-blue-700">${extensa.name}</span> <i data-lucide="${extensa.icon}" class="w-5 h-5 text-blue-500"></i> </div> <div class="text-xs text-blue-600 mb-1">${extensa.description}</div> <span class="text-3xl font-bold text-blue-900 count-up" data-target="${extensa.percentage}" data-suffix="%">0%</span> <p class="text-xs text-blue-600"><span class="count-up" data-target="${extensa.total}">0</span> visitas</p> </div> <!-- Namorada(o)/Companheira(o) --> <div class="bg-pink-50 p-4 rounded-xl border border-pink-300 shadow-md"> <div class="flex items-center justify-between"> <span class="font-semibold text-pink-700">${namorados.name}</span> <i data-lucide="${namorados.icon}" class="w-5 h-5 text-pink-500"></i> </div> <span class="text-3xl font-bold text-pink-900 count-up" data-target="${namorados.percentage}" data-suffix="%">0%</span> <p class="text-xs text-pink-600"><span class="count-up" data-target="${namorados.total}">0</span> visitas</p> </div> <!-- Outros + Amigos --> <div class="bg-orange-50 p-4 rounded-xl border border-orange-300 shadow-md"> <div class="flex items-center justify-between"> <span class="font-semibold text-orange-700">Outros Vínculos</span> <i data-lucide="${outros.icon}" class="w-5 h-5 text-orange-500"></i> </div> <div class="text-xs text-orange-600 mb-1">${outros.description} + Amigos</div> <span class="text-3xl font-bold text-orange-900 count-up" data-target="${outros.percentage + amigos.percentage}" data-suffix="%">0%</span> <p class="text-xs text-orange-600"><span class="count-up" data-target="${outros.total + amigos.total}">0</span> visitas</p> </div> </div> </div> <!-- Resumo Rápido --> <div class="mt-6 bg-gradient-to-r from-blue-50 to-green-50 p-4 rounded-lg"> <div class="text-center"> <div class="flex items-center justify-center mb-2"> <i data-lucide="pie-chart" class="w-5 h-5 mr-2 text-blue-500"></i> <span class="font-semibold text-gray-700">Resumo das Categorias</span> </div> <div class="text-sm text-gray-600"> Família Biológica (${biologica.percentage}%) + Família Extensa (${extensa.percentage}%) = <strong>${biologica.percentage + extensa.percentage}%</strong> do total de visitas </div> </div> </div> `; if (window.lucide && window.lucide.createIcons) { lucide.createIcons(); } // Animar barras de progresso setTimeout(() => { const progressBars = container.querySelectorAll('[data-target$="%"]'); progressBars.forEach(bar => { const targetWidth = bar.getAttribute('data-target'); if (targetWidth) { bar.style.width = targetWidth; bar.style.transition = 'width 1.5s ease-out'; } }); }, 100); } // 4. Gráfico Unidades - VERSÃO CORRIGIDA SEM DATALABELS (para resolver conflito de tooltips) function createUnitChart() { const canvas = document.getElementById('unitChart'); if (!canvas) { console.error('Elemento unitChart não encontrado'); return; } const ctx = canvas.getContext('2d'); // Ordenar unidades por total (decrescente) const sortedUnits = [...data.units].sort((a, b) => b.total - a.total); const chartLabels = sortedUnits.map(d => d.name); const chartData = sortedUnits.map(d => 0); // Começa com 0 const finalData = sortedUnits.map(d => d.total); // Dados finais const chartPercentages = sortedUnits.map(d => d.percentage); // Cores em gradiente (estilo da imagem) const getGradientColor = (ctx, index) => { const gradient = ctx.createLinearGradient(0, 0, 800, 0); if (index < 3) { // Top 3 unidades (verde gradiente) gradient.addColorStop(0, '#10b981'); gradient.addColorStop(0.5, '#059669'); gradient.addColorStop(1, '#047857'); } else if (index < 6) { // Próximas 3 (azul gradiente) gradient.addColorStop(0, '#60a5fa'); gradient.addColorStop(0.5, '#3b82f6'); gradient.addColorStop(1, '#1d4ed8'); } else if (index < 9) { // Médias (laranja gradiente) gradient.addColorStop(0, '#fbbf24'); gradient.addColorStop(0.5, '#f59e0b'); gradient.addColorStop(1, '#d97706'); } else { // Menores (cinza gradiente) gradient.addColorStop(0, '#9ca3af'); gradient.addColorStop(0.5, '#6b7280'); gradient.addColorStop(1, '#4b5563'); } return gradient; }; // Criar o gráfico SEM o plugin DataLabels (que estava causando conflito com tooltips) const unitChart = new Chart(ctx, { type: 'bar', data: { labels: chartLabels, datasets: [{ label: 'Total de Visitas', data: chartData, // Começa com 0 backgroundColor: sortedUnits.map((d, index) => { return getGradientColor(ctx, index); }), borderRadius: { topLeft: 8, bottomLeft: 8, topRight: 8, bottomRight: 8 }, borderWidth: 0, barThickness: 35, categoryPercentage: 0.9, barPercentage: 0.9 }] }, options: { responsive: true, maintainAspectRatio: false, indexAxis: 'y', plugins: { legend: { display: false }, title: { display: false }, // Configuração simplificada do tooltip - SEM conflito tooltip: { enabled: true, mode: 'index', intersect: false, backgroundColor: 'rgba(0, 0, 0, 0.85)', padding: 12, cornerRadius: 8, titleFont: { size: 14, weight: 'bold', family: "'Inter', sans-serif" }, bodyFont: { size: 13, family: "'Inter', sans-serif" }, titleColor: '#ffffff', bodyColor: '#f3f4f6', borderColor: '#059669', borderWidth: 1, callbacks: { title: function(tooltipItems) { const dataIndex = tooltipItems[0].dataIndex; return chartLabels[dataIndex]; }, label: function(context) { // Acessar os dados corretamente const value = context.raw || chartData[context.dataIndex]; const percentage = chartPercentages[context.dataIndex]; return `Visitas: ${value.toLocaleString('pt-BR')}`; }, afterLabel: function(context) { const percentage = chartPercentages[context.dataIndex]; return `Percentual: ${percentage}% do total`; } } } }, scales: { x: { type: 'linear', beginAtZero: true, max: 5500, grid: { color: 'rgba(0, 0, 0, 0.05)', drawBorder: false }, title: { display: true, text: 'Nº de Visitas', font: { size: 14, weight: '600', family: "'Inter', sans-serif" }, padding: { top: 10, bottom: 10 } }, ticks: { callback: function(value) { return value.toLocaleString('pt-BR'); }, font: { size: 12, family: "'Inter', sans-serif" }, padding: 5 }, border: { display: false } }, y: { grid: { display: false, drawBorder: false }, ticks: { autoSkip: false, font: { size: 14, weight: '600', family: "'Inter', sans-serif" }, padding: 15, color: '#1f2937' }, border: { display: false } } }, interaction: { mode: 'index', axis: 'y', intersect: false }, animation: { duration: 2000, easing: 'easeOutQuart' }, layout: { padding: { left: 10, right: 10, top: 20, bottom: 10 } } } }); // Animar os dados do gráfico setTimeout(() => { unitChart.data.datasets[0].data = finalData; unitChart.update(); }, 800); } // Inicialização quando o DOM estiver completamente carregado document.addEventListener('DOMContentLoaded', function() { console.log('DOM completamente carregado, iniciando gráficos...'); try { // Inicializa ícones Lucide if (typeof lucide !== 'undefined' && lucide.createIcons) { lucide.createIcons(); console.log('Ícones Lucide inicializados'); } // Cria os gráficos createMonthlyChart(); console.log('Gráfico mensal criado'); createParentescoChart(); console.log('Gráfico de parentesco criado'); renderFamilyTypeKPI(); console.log('KPI de família criado'); createUnitChart(); console.log('Gráfico de unidades criado'); // Inicia animações de contagem setTimeout(() => { animateAllCounts(); console.log('Animações de contagem iniciadas'); }, 1000); console.log('Todos os gráficos carregados com sucesso!'); } catch (error) { console.error('Erro ao carregar gráficos:', error); console.error('Stack trace:', error.stack); } }); // Fallback: também executar quando a janela carregar completamente window.addEventListener('load', function() { console.log('Window loaded, verificando gráficos...'); // Garante que tudo foi carregado if (typeof Chart !== 'undefined') { console.log('Chart.js carregado'); } }); </script> </p>Fri, 28 Nov 2025 20:32:00 GMThttps://observatorio.iases.es.gov.br:443/Not%C3%ADcia/relatorio-de-visitas-familiares-2024https://observatorio.iases.es.gov.br:443/Not%C3%ADcia/perfil-das-decretacoes-de-internacao-provisoria<!-- Tailwind CSS CDN --> <p> <script src="https://cdn.tailwindcss.com"></script> </p> <!-- Chart.js CDN --> <p> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> </p> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap'); body { box-sizing: border-box; font-family: 'Inter', sans-serif; background: transparent; min-height: 100%; background-color: #f8fafc; padding: 20px 0; overflow-x: hidden; } .container { max-width: 1200px; margin: 0 auto; padding: 1.5rem; } .infographic-card { box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .infographic-card.is-visible { opacity: 1; transform: translateY(0); } .data-header { font-weight: 800; line-height: 1; } .highlight-bar { height: 8px; border-radius: 9999px; margin-top: 8px; transition: all 0.3s ease; } .animated-bar { transition: width 1.5s cubic-bezier(0.23, 1, 0.32, 1); } .animated-bar.start { width: 0% !important; } .profile-item { display: flex; align-items: center; padding: 8px 0; border-bottom: 1px solid #f0f0f0; transition: all 0.2s ease; } .profile-item:hover { background-color: #f8fafc; padding-left: 8px; } .profile-item:last-child { border-bottom: none; } .chart-container { position: relative; height: 220px; margin: 20px 0; } .stat-card { transition: transform 0.2s ease, box-shadow 0.2s ease; } .stat-card:hover { transform: translateY(-2px); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2); } @media (max-width: 768px) { .container { padding: 0.75rem; } } </style> <div class="container"><header class="text-center mb-8 p-8 rounded-2xl bg-white/95 infographic-card"> <h1 class="text-4xl sm:text-5xl font-extrabold text-gray-800 mb-3">Perfil das Decreta&ccedil;&otilde;es de Interna&ccedil;&atilde;o Provis&oacute;ria - 2024</h1> <p class="text-xl text-gray-600 mb-8">An&aacute;lise das Entradas Registradas (Janeiro a Dezembro)</p> <div class="bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-2xl p-8 inline-block w-full stat-card"> <p class="text-lg font-medium opacity-90 uppercase tracking-wide">TOTAL DE DECRETA&Ccedil;&Otilde;ES</p> <p class="data-header text-7xl sm:text-8xl mt-2" data-value="629">0</p> <div class="highlight-bar bg-white/30 w-full"></div> </div> </header> <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8"> <section class="bg-white/95 p-8 rounded-2xl infographic-card"> <h2 class="text-2xl font-bold text-gray-800 mb-8 border-b-2 border-blue-200 pb-4"><span class="text-blue-600">1.</span> Distribui&ccedil;&atilde;o por Sexo Atribu&iacute;do ao Nascer</h2> <div class="flex items-center justify-between mb-8 gap-6"> <div class="text-center p-6 rounded-xl flex-1 bg-blue-50 stat-card"><svg class="w-16 h-16 text-blue-600 mx-auto mb-4" fill="currentColor" viewbox="0 0 24 24"> <path d="M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9V7L15 7V9C15 9.55 14.55 10 14 10S13 9.55 13 9V7H11V9C11 9.55 10.45 10 10 10S9 9.55 9 9V7H3V9C3 10.1 3.9 11 5 11V20C5 21.1 5.9 22 7 22H17C18.1 22 19 21.1 19 20V11C20.1 11 21 10.1 21 9Z"></path> </svg> <p class="text-5xl data-header text-blue-600 mb-2" data-value="94.8" data-suffix="%">0%</p> <p class="text-xl font-semibold text-blue-700">Masculino</p> <p class="text-base text-gray-500 mt-1">(596 Entradas)</p> <div class="highlight-bar bg-blue-400 w-full mt-3"></div> </div> <div class="text-center p-6 rounded-xl flex-1 bg-pink-50 stat-card"><svg class="w-16 h-16 text-pink-600 mx-auto mb-4" fill="currentColor" viewbox="0 0 24 24"> <path d="M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM7 22H17C18.1 22 19 21.1 19 20V12H16V20H13V12H11V20H8V12H5V20C5 21.1 5.9 22 7 22Z"></path> </svg> <p class="text-5xl data-header text-pink-600 mb-2" data-value="5.2" data-suffix="%">0%</p> <p class="text-xl font-semibold text-pink-700">Feminino</p> <p class="text-base text-gray-500 mt-1">(33 Entradas)</p> <div class="highlight-bar bg-pink-400 w-1/12 mt-3"></div> </div> </div> <div class="chart-container"><canvas id="genderChart"></canvas></div> </section> <section class="bg-white/95 p-8 rounded-2xl infographic-card"> <h2 class="text-2xl font-bold text-gray-800 mb-6 border-b-2 border-green-200 pb-3"><span class="text-green-600">2.</span> Distribui&ccedil;&atilde;o por Cor/Ra&ccedil;a</h2> <div class="space-y-3"> <div class="profile-item"> <div class="w-4 h-4 bg-amber-500 rounded-full mr-4"></div> <div class="flex-1"> <div class="flex justify-between items-center"><span class="text-lg font-semibold text-gray-700">Parda</span> <span class="text-2xl font-bold text-amber-600" data-value="79.7" data-suffix="%">0%</span></div> <div class="highlight-bar bg-amber-200 w-full"> <div class="highlight-bar bg-amber-500 animated-bar start" data-width="79.7%" style="width: 79.7%;"></div> </div> <p class="text-sm text-gray-500 mt-1">501 entradas</p> </div> </div> <div class="profile-item"> <div class="w-4 h-4 bg-gray-700 rounded-full mr-4"></div> <div class="flex-1"> <div class="flex justify-between items-center"><span class="text-lg font-semibold text-gray-700">Preta</span> <span class="text-2xl font-bold text-gray-700" data-value="13.0" data-suffix="%">0%</span></div> <div class="highlight-bar bg-gray-200 w-full"> <div class="highlight-bar bg-gray-700 animated-bar start" data-width="13.0%" style="width: 13.0%;"></div> </div> <p class="text-sm text-gray-500 mt-1">82 entradas</p> </div> </div> <div class="profile-item"> <div class="w-4 h-4 bg-blue-500 rounded-full mr-4"></div> <div class="flex-1"> <div class="flex justify-between items-center"><span class="text-lg font-semibold text-gray-700">Branca</span> <span class="text-2xl font-bold text-blue-600" data-value="7.0" data-suffix="%">0%</span></div> <div class="highlight-bar bg-blue-200 w-full"> <div class="highlight-bar bg-blue-500 animated-bar start" data-width="7.0%" style="width: 7.0%;"></div> </div> <p class="text-sm text-gray-500 mt-1">44 entradas</p> </div> </div> <div class="profile-item"> <div class="w-4 h-4 bg-yellow-500 rounded-full mr-4"></div> <div class="flex-1"> <div class="flex justify-between items-center"><span class="text-lg font-semibold text-gray-700">Amarela</span> <span class="text-2xl font-bold text-yellow-600" data-value="0.3" data-suffix="%">0%</span></div> <div class="highlight-bar bg-yellow-200 w-full"> <div class="highlight-bar bg-yellow-500 animated-bar start" data-width="0.3%" style="width: 0.3%;"></div> </div> <p class="text-sm text-gray-500 mt-1">2 entradas</p> </div> </div> <div class="profile-item"> <div class="w-4 h-4 bg-red-500 rounded-full mr-4"></div> <div class="flex-1"> <div class="flex justify-between items-center"><span class="text-lg font-semibold text-gray-700">Ind&iacute;gena</span> <span class="text-2xl font-bold text-red-600" data-value="0.0" data-suffix="%">0%</span></div> <div class="highlight-bar bg-red-200 w-full"> <div class="highlight-bar bg-red-500 animated-bar start" data-width="0.0%" style="width: 0.0%;"></div> </div> <p class="text-sm text-gray-500 mt-1">0 entradas</p> </div> </div> </div> </section> </div> <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8"> <section class="bg-white/95 p-8 rounded-2xl infographic-card"> <h2 class="text-2xl font-bold text-gray-800 mb-8 border-b-2 border-purple-200 pb-4"><span class="text-purple-600">3.</span> Distribui&ccedil;&atilde;o por Faixa Et&aacute;ria</h2> <div class="chart-container"><canvas id="ageChart"></canvas></div> <div class="grid grid-cols-3 gap-6 mt-6"> <div class="text-center p-4 bg-purple-50 rounded-lg"> <p class="text-3xl font-bold text-purple-600" data-value="16.1">0</p> <p class="text-base text-gray-600">Idade M&eacute;dia</p> </div> <div class="text-center p-4 bg-indigo-50 rounded-lg"> <p class="text-3xl font-bold text-indigo-600" data-value="17" data-suffix=" Anos">0 Anos</p> <p class="text-base text-gray-600">Idade Predominante</p> </div> <div class="text-center p-4 bg-pink-50 rounded-lg"> <p class="text-3xl font-bold text-pink-600" data-value="82.0" data-suffix="%">0%</p> <p class="text-base text-gray-600">Entre 15-17 Anos</p> </div> </div> </section> <section class="bg-white/95 p-8 rounded-2xl infographic-card"> <h2 class="text-2xl font-bold text-gray-800 mb-6 border-b-2 border-teal-200 pb-3"><span class="text-teal-600">4.</span> N&iacute;vel de Escolaridade (Mais Frequentes)</h2> <div class="space-y-3"> <div class="profile-item"> <div class="w-4 h-4 bg-red-500 rounded-full mr-4"></div> <div class="flex-1"> <div class="flex justify-between items-center"><span class="text-lg font-semibold text-gray-700">8&ordm; ano E.F.</span> <span class="text-2xl font-bold text-red-600" data-value="17.2" data-suffix="%">0%</span></div> <div class="highlight-bar bg-red-200 w-full"> <div class="highlight-bar bg-red-500 animated-bar start" data-width="17.2%" style="width: 17.2%;"></div> </div> <p class="text-sm text-gray-500 mt-1">108 entradas</p> </div> </div> <div class="profile-item"> <div class="w-4 h-4 bg-orange-500 rounded-full mr-4"></div> <div class="flex-1"> <div class="flex justify-between items-center"><span class="text-lg font-semibold text-gray-700">7&ordm; ano E.F.</span> <span class="text-2xl font-bold text-orange-600" data-value="16.2" data-suffix="%">0%</span></div> <div class="highlight-bar bg-orange-200 w-full"> <div class="highlight-bar bg-orange-500 animated-bar start" data-width="16.2%" style="width: 16.2%;"></div> </div> <p class="text-sm text-gray-500 mt-1">102 entradas</p> </div> </div> <div class="profile-item"> <div class="w-4 h-4 bg-green-500 rounded-full mr-4"></div> <div class="flex-1"> <div class="flex justify-between items-center"><span class="text-lg font-semibold text-gray-700">6&ordm; ano E.F.</span> <span class="text-2xl font-bold text-green-600" data-value="15.1" data-suffix="%">0%</span></div> <div class="highlight-bar bg-green-200 w-full"> <div class="highlight-bar bg-green-500 animated-bar start" data-width="15.1%" style="width: 15.1%;"></div> </div> <p class="text-sm text-gray-500 mt-1">95 entradas</p> </div> </div> <div class="profile-item"> <div class="w-4 h-4 bg-blue-500 rounded-full mr-4"></div> <div class="flex-1"> <div class="flex justify-between items-center"><span class="text-lg font-semibold text-gray-700">1&ordf; S&eacute;rie E.M.</span> <span class="text-2xl font-bold text-blue-600" data-value="12.7" data-suffix="%">0%</span></div> <div class="highlight-bar bg-blue-200 w-full"> <div class="highlight-bar bg-blue-500 animated-bar start" data-width="12.7%" style="width: 12.7%;"></div> </div> <p class="text-sm text-gray-500 mt-1">80 entradas</p> </div> </div> <div class="profile-item"> <div class="w-4 h-4 bg-gray-500 rounded-full mr-4"></div> <div class="flex-1"> <div class="flex justify-between items-center"><span class="text-lg font-semibold text-gray-700">N&atilde;o Sabe Informar / Vazio</span> <span class="text-2xl font-bold text-gray-600" data-value="13.7" data-suffix="%">0%</span></div> <div class="highlight-bar bg-gray-200 w-full"> <div class="highlight-bar bg-gray-500 animated-bar start" data-width="13.7%" style="width: 13.7%;"></div> </div> <p class="text-sm text-gray-500 mt-1">86 entradas</p> </div> </div> </div> </section> </div> <section class="bg-white/95 p-8 rounded-2xl infographic-card mb-8"> <h2 class="text-2xl font-bold text-gray-800 mb-6 border-b-2 border-emerald-200 pb-3"><span class="text-emerald-600">5.</span> Evolu&ccedil;&atilde;o Mensal das Decreta&ccedil;&otilde;es de Provis&oacute;ria</h2> <div class="chart-container" style="height: 200px;"><canvas id="monthlyChart"></canvas></div> <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mt-6"> <div class="text-center p-6 bg-emerald-50 rounded-lg"> <p class="text-2xl font-bold text-emerald-600" data-value="52.4">0</p> <p class="text-sm text-gray-600">M&eacute;dia Mensal</p> </div> <div class="text-center p-6 bg-red-50 rounded-lg"> <p class="text-2xl font-bold text-red-600" data-value="67">0</p> <p class="text-sm text-gray-600">Pico (Novembro)</p> </div> <div class="text-center p-6 bg-blue-50 rounded-lg"> <p class="text-2xl font-bold text-blue-600" data-value="34">0</p> <p class="text-sm text-gray-600">Menor (Dezembro)</p> </div> <div class="text-center p-6 bg-purple-50 rounded-lg"> <p class="text-2xl font-bold text-purple-600" data-value="3" data-suffix=" Meses">0</p> <p class="text-sm text-gray-600">Per&iacute;odo de Alta (+60)</p> </div> </div> </section> <section class="bg-white/95 p-8 rounded-2xl infographic-card mb-8"> <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center"><span class="text-orange-600">👤</span> A Ficha do Perfil Mais Comum - 2024</h2> <div class="max-w-lg mx-auto bg-gradient-to-br from-orange-50 to-red-50 rounded-2xl p-8 border-2 border-orange-200 stat-card"> <div class="text-center mb-6"> <div class="w-20 h-20 bg-orange-500 rounded-full mx-auto mb-4 flex items-center justify-center"><svg class="w-12 h-12 text-white" fill="currentColor" viewbox="0 0 24 24"> <path d="M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9V7L15 7V9C15 9.55 14.55 10 14 10S13 9.55 13 9V7H11V9C11 9.55 10.45 10 10 10S9 9.55 9 9V7H3V9C3 10.1 3.9 11 5 11V20C5 21.1 5.9 22 7 22H17C18.1 22 19 21.1 19 20V11C20.1 11 21 10.1 21 9Z"></path> </svg></div> <h3 class="text-2xl font-bold text-orange-800 mb-2">Perfil T&iacute;pico</h3> <p class="text-sm text-gray-600">Baseado nos dados mais frequentes de 2024</p> </div> <div class="space-y-4"> <div class="flex items-center justify-between p-3 bg-white rounded-lg border border-orange-100"> <div class="flex items-center"> <div class="w-4 h-4 bg-blue-500 rounded-full mr-3"></div> <span class="font-semibold text-gray-700">Sexo*:</span></div> <span class="text-lg font-bold text-blue-600">Masculino</span></div> <div class="flex items-center justify-between p-3 bg-white rounded-lg border border-orange-100"> <div class="flex items-center"> <div class="w-4 h-4 bg-amber-500 rounded-full mr-3"></div> <span class="font-semibold text-gray-700">Cor/Ra&ccedil;a:</span></div> <span class="text-lg font-bold text-amber-600">Parda</span></div> <div class="flex items-center justify-between p-3 bg-white rounded-lg border border-orange-100"> <div class="flex items-center"> <div class="w-4 h-4 bg-purple-500 rounded-full mr-3"></div> <span class="font-semibold text-gray-700">Idade:</span></div> <span class="text-lg font-bold text-purple-600">17 Anos</span></div> <div class="flex items-center justify-between p-3 bg-white rounded-lg border border-orange-100"> <div class="flex items-center"> <div class="w-4 h-4 bg-red-500 rounded-full mr-3"></div> <span class="font-semibold text-gray-700">Escolaridade:</span></div> <span class="text-lg font-bold text-red-600">8&ordm; Ano E.F.</span></div> </div> <div class="mt-6 p-4 bg-orange-100 rounded-lg"> <p class="text-sm text-orange-800 text-center font-medium">Este perfil representa a combina&ccedil;&atilde;o mais frequente encontrada nos dados de 2024 - Sexo Atribu&iacute;do ao Nascer*</p> </div> </div> </section> <section class="bg-white/95 p-8 rounded-2xl infographic-card mb-8"> <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center"><span class="text-indigo-600">📊</span> Principais Insights (Janeiro - Dezembro 2024)</h2> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="text-center p-8 bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl stat-card"> <div class="text-4xl mb-4">👥</div> <h3 class="font-bold text-blue-800 mb-4 text-xl">Foco Masculino</h3> <p class="text-base text-gray-600">Quase 95% dos casos s&atilde;o do sexo masculino (596 de 629).</p> </div> <div class="text-center p-8 bg-gradient-to-br from-amber-50 to-amber-100 rounded-xl stat-card"> <div class="text-4xl mb-4">🌍</div> <h3 class="font-bold text-amber-800 mb-4 text-xl">Predomin&acirc;ncia Racial</h3> <p class="text-base text-gray-600">79.7% s&atilde;o Pardos, e 13.0% Pretos, totalizando 92.7%.</p> </div> <div class="text-center p-8 bg-gradient-to-br from-green-50 to-green-100 rounded-xl stat-card"> <div class="text-4xl mb-4">🎓</div> <h3 class="font-bold text-green-800 mb-4 text-xl">Escolaridade em Destaque</h3> <p class="text-base text-gray-600">Os anos mais frequentes s&atilde;o 8&ordm; E.F., 7&ordm; E.F. e 6&ordm; E.F..</p> </div> </div> </section> <footer class="text-center text-gray-500 py-6"> <p class="text-sm">Dados referentes ao per&iacute;odo de Janeiro a Dezembro de 2024 &bull; Total Geral: 629 Entradas &bull; Fonte: Dados Anexados</p> </footer></div> <p> <script> document.addEventListener("DOMContentLoaded", () => { const totalGeral = 629; const chartAnimationConfig = { duration: 1500, easing: 'cubic-bezier(0.23, 1, 0.32, 1)', delay: 200 }; const genderCtx = document.getElementById('genderChart').getContext('2d'); new Chart(genderCtx, { type: 'doughnut', data: { labels: ['Masculino (94.8%)', 'Feminino (5.2%)'], datasets: [{ data: [596, 33], backgroundColor: ['#3B82F6', '#EC4899'], borderWidth: 0, hoverOffset: 10 }] }, options: { responsive: true, maintainAspectRatio: false, animation: chartAnimationConfig, plugins: { legend: { position: 'bottom', labels: { padding: 20, font: { size: 14, weight: 'bold' } } } } } }); const ageCtx = document.getElementById('ageChart').getContext('2d'); new Chart(ageCtx, { type: 'bar', data: { labels: ['12-14 anos', '15-17 anos', '18-21 anos'], datasets: [{ label: 'Número de Entradas', data: [66, 516, 47], backgroundColor: ['#8B5CF6', '#A855F7', '#C084FC'], borderRadius: 8, borderSkipped: false, }] }, options: { responsive: true, maintainAspectRatio: false, animation: chartAnimationConfig, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, grid: { color: '#f3f4f6' }, max: 600 }, x: { grid: { display: false } } } } }); const monthlyCtx = document.getElementById('monthlyChart').getContext('2d'); new Chart(monthlyCtx, { type: 'line', data: { labels: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'], datasets: [{ label: 'Decretações de Internação Provisória', data: [46, 38, 48, 43, 61, 66, 61, 49, 52, 64, 67, 34], borderColor: '#10B981', backgroundColor: 'rgba(16, 185, 129, 0.1)', borderWidth: 3, fill: true, tension: 0.4, pointBackgroundColor: '#10B981', pointBorderColor: '#ffffff', pointBorderWidth: 3, pointRadius: 6, pointHoverRadius: 8 }] }, options: { responsive: true, maintainAspectRatio: false, animation: chartAnimationConfig, plugins: { legend: { display: false }, tooltip: { titleFont: { size: 16, weight: 'bold' }, bodyFont: { size: 14, weight: 'bold' }, padding: 12, cornerRadius: 8 } }, scales: { y: { beginAtZero: true, grid: { color: '#f3f4f6' }, ticks: { font: { size: 12 } } }, x: { grid: { display: false }, ticks: { font: { size: 12 } } } }, interaction: { intersect: false, mode: 'index' } } }); function animateCountUp(el) { const target = parseFloat(el.dataset.value); const suffix = el.dataset.suffix || ''; const duration = 1500; const startTime = performance.now(); function step(currentTime) { const elapsedTime = currentTime - startTime; const progress = Math.min(elapsedTime / duration, 1); let currentVal = progress * target; if (target % 1 !== 0 || el.dataset.value.includes('.')) { currentVal = currentVal.toFixed(1); } else { currentVal = Math.floor(currentVal); } el.textContent = currentVal + suffix; if (progress < 1) { requestAnimationFrame(step); } else { el.textContent = target.toFixed(target % 1 !== 0 || el.dataset.value.includes('.') ? 1 : 0) + suffix; } } requestAnimationFrame(step); } function animateBar(el) { el.style.width = '0%'; el.classList.add('start'); void el.offsetWidth; el.style.width = el.dataset.width; setTimeout(() => { el.classList.remove('start'); }, 1500); } const observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { const card = entry.target; card.classList.add('is-visible'); const numbers = card.querySelectorAll('[data-value]'); numbers.forEach(num => { animateCountUp(num); }); const bars = card.querySelectorAll('.animated-bar'); bars.forEach(bar => { animateBar(bar); }); observer.unobserve(card); } }); }, { threshold: 0.1 }); document.querySelectorAll('.infographic-card').forEach(card => { observer.observe(card); }); document.querySelectorAll('.stat-card').forEach(card => { card.addEventListener('mouseenter', function() { this.style.transform = 'translateY(-4px) scale(1.02)'; }); card.addEventListener('mouseleave', function() { this.style.transform = 'translateY(0) scale(1)'; }); }); }); </script> </p>Wed, 05 Nov 2025 17:42:00 GMThttps://observatorio.iases.es.gov.br:443/Not%C3%ADcia/perfil-das-decretacoes-de-internacao-provisoriahttps://observatorio.iases.es.gov.br:443/Not%C3%ADcia/movimentacao<p></p> <!-- Carrega Tailwind CSS para estilização rápida e responsiva --> <script src="https://cdn.tailwindcss.com"></script> <!-- Carrega a biblioteca Chart.js para geração de gráficos --> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <!-- Carrega o plugin Datalabels para exibir os valores nas barras --> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0"></script> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap'); /* CORREÇÃO DE SCROLLBAR AGRESSIVA */ html { overflow-x: hidden; } * { box-sizing: border-box; } /* 3. Garante box-sizing em todos os elementos e pseudo-elementos */ *, *::before, *::after { box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background-color: #f0f4f8; margin: 0; padding: 0; min-height: 100vh; overflow-x: hidden; max-width: 100vw; /* 1. FORÇA LARGURA MÁXIMA PARA O BODY */ } .container { max-width: 1200px; margin: 0 auto; padding: 1.5rem; width: 100%; overflow: hidden; /* 2. ESCONDE O OVERFLOW DE CONTEÚDO DENTRO DO CONTAINER */ } .chart-card { background-color: white; border-radius: 1.5rem; padding: 1.5rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; } @media (min-width: 768px) { .chart-card { padding: 2rem; } } .chart-card:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .card-routine { background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%); color: white; } .card-development { background: linear-gradient(135deg, #10b981 0%, #047857 100%); color: white; } .card-complementary { background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%); color: white; } .card-rights { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); color: white; } .kpi-value { font-size: 3rem; font-weight: 800; } @media (min-width: 768px) { .kpi-value { font-size: 3.5rem; } } .section-title { font-size: 1.75rem; font-weight: 700; color: #1e293b; margin-bottom: 1.5rem; text-align: center; } @media (min-width: 768px) { .section-title { font-size: 2rem; } } /* Animações de entrada */ .fade-in-up { opacity: 0; transform: translateY(20px); animation: fadeInUp 0.8s ease-out forwards; } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } } .delay-100 { animation-delay: 0.1s; } .delay-200 { animation-delay: 0.2s; } .delay-300 { animation-delay: 0.3s; } .delay-400 { animation-delay: 0.4s; } .delay-500 { animation-delay: 0.5s; } /* Container de gráficos com altura fixa (para gráfico de barras) */ .chart-container { width: 100%; position: relative; } .chart-wrapper { width: 100%; height: 900px; /* Mantido em 900px para comportar confortavelmente as 35 categorias */ position: relative; overflow: hidden; /* Esconde o scroll interno dos gráficos */ } .chart-wrapper-sm { width: 100%; height: 350px; position: relative; overflow: hidden; /* Esconde o scroll interno dos gráficos */ } /* Correção para gráficos não esticarem */ .chart-container canvas { width: 100% !important; height: 100% !important; } /* Badge para percentuais (tamanho reajustado em +15%) */ .percentage-badge { background: rgba(255, 255, 255, 0.2); padding: 2px 8px; border-radius: 12px; font-size: 0.86rem; /* Original: 0.75rem. Novo: 0.75 * 1.15 = 0.8625rem */ font-weight: 600; } /* TEXTOS AUMENTADOS (+15% em todos os textos de detalhe/observação/legenda) */ .texto-destaque { font-size: 1.15rem; /* Original: 1rem. Novo: 1 * 1.15 = 1.15rem */ } .texto-card { font-size: 1.04rem; /* Original: 0.9rem. Novo: 0.9 * 1.15 = 1.035rem */ } .texto-legenda { font-size: 1.1rem; /* Original: 0.95rem. Novo: 0.95 * 1.15 = 1.0925rem */ } /* Aplica o aumento nos textos de detalhes dos cards (listas e parágrafos que usam 'text-sm') */ .detail-card ul, .detail-card p { font-size: 1rem; /* Aproximadamente 15% de aumento sobre o 0.875rem (text-sm) */ } /* Cards de detalhes */ .detail-card { background: white; border-radius: 1rem; padding: 1.5rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); transition: all 0.3s ease; border-left: 4px solid; } .detail-card:hover { transform: translateY(-3px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } /* Responsividade melhorada - Ajustando tamanhos móveis */ @media (max-width: 768px) { .container { padding: 1rem; } .chart-card { padding: 1rem; } .kpi-value { font-size: 2.5rem; } .section-title { font-size: 1.5rem; } .chart-wrapper { height: 750px; /* Reduz ligeiramente em mobile mas garante espaçamento das 35 barras */ } .chart-wrapper-sm { height: 350px; /* Mantido uma altura estável para legibilidade das barras horizontais */ } /* Ajuste de fonte responsivo mantendo a proporção */ .texto-destaque { font-size: 1.04rem; /* 0.9rem base + 15% */ } .texto-card { font-size: 0.92rem; /* 0.8rem base + 15% */ } .texto-legenda { font-size: 0.98rem; /* 0.85rem base + 15% */ } .detail-card ul, .detail-card p { font-size: 0.98rem; /* 0.85rem base + 15% */ } } @media (max-width: 640px) { .chart-wrapper { height: 680px; } .chart-wrapper-sm { height: 320px; } } </style> <div class="container"><!-- Cabeçalho --><header class="text-center mb-12 fade-in-up"> <h1 class="text-4xl md:text-5xl font-extrabold text-slate-800 tracking-tight">PAINEL DE MOVIMENTA&Ccedil;&Otilde;ES SOCIOEDUCATIVAS</h1> <p class="mt-4 text-lg text-slate-600">Ano de 2025 - Total: <span class="font-bold"><span id="total-registros" data-target-value="2007160">0</span></span> Registros</p> <p class="texto-destaque text-slate-500 mt-2">Dados representam todas as movimenta&ccedil;&otilde;es registradas nas Unidades do Sistema Socioeducativo do Esp&iacute;rito Santo</p> </header><!-- Card de Destaque: Rotina Socioeducativa --> <div class="chart-card card-routine mb-8 fade-in-up"> <div class="flex flex-col md:flex-row justify-between items-center"> <div> <h3 class="text-xl font-bold mb-2 flex items-center"><svg class="w-7 h-7 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path> </svg> ROTINA SOCIOEDUCATIVA</h3> <p class="kpi-value"><span id="kpi-rotina-value" data-target-value="1269412">0</span> <span class="text-xl font-light">registros</span></p> <p class="text-sm font-light italic opacity-90 mt-2">Representa <span class="font-bold"><span id="kpi-rotina-pct" data-target-value="63.2">0</span>%</span> de todas as movimenta&ccedil;&otilde;es - Cuidados essenciais como refei&ccedil;&otilde;es, higiene e tempo de sol</p> </div> <div class="mt-4 md:mt-0 bg-white/20 p-4 rounded-lg"> <p class="font-semibold text-sm">COMPOSI&Ccedil;&Atilde;O PRINCIPAL:</p> <ul class="text-sm space-y-1 mt-2"> <li>&bull; 6 refei&ccedil;&otilde;es di&aacute;rias + ceia</li> <li>&bull; Cuidados pessoais e higiene</li> <li>&bull; Tempo de sol e atividades ao ar livre</li> </ul> </div> </div> </div> <!-- Seção 1: Principais Movimentações --> <section class="mb-12"> <h2 class="section-title fade-in-up">Volume Detalhado por Tipo de Movimenta&ccedil;&atilde;o (35 Categorias)</h2> <div class="chart-card fade-in-up delay-100"> <div class="chart-container"> <div class="chart-wrapper"><canvas id="chartPrincipaisMovimentacoes" role="img" aria-label="Gr&aacute;fico de barras horizontais mostrando o volume de todas as 35 categorias de movimenta&ccedil;&otilde;es"></canvas></div> </div> <div class="mt-6 p-3 bg-indigo-50 border-l-4 border-indigo-500 rounded-md"> <p class="texto-destaque text-gray-700"><span class="font-bold">Destaque:</span> A visualiza&ccedil;&atilde;o agora cobre de forma abrangente e rigorosa todas as <span class="font-bold">35 categorias</span> registradas, em conformidade exata com o relat&oacute;rio oficial do &oacute;rg&atilde;o.</p> </div> </div> </section> <!-- Destaque: Cards de Desenvolvimento, Atividades Complementares e Garantia de Direitos --> <section class="mb-12"> <div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8"><!-- Card 1: Foco no Desenvolvimento --> <div class="chart-card card-development fade-in-up delay-100"> <h3 class="text-xl font-bold mb-3 flex items-center"><svg class="w-7 h-7 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path> </svg> FOCO NO DESENVOLVIMENTO</h3> <ul class="space-y-3 font-medium"> <li class="flex justify-between items-center"> <div><span class="font-semibold">Educa&ccedil;&atilde;o Escolar</span> <p class="texto-card opacity-80">Interna e externa</p> </div> <span class="font-extrabold text-lg bg-white/20 px-2 py-1 rounded"> <span id="dev-educacao" data-target-value="111076">0</span> </span></li> <li class="flex justify-between items-center"> <div><span class="font-semibold">Atividades Esportivas</span> <p class="texto-card opacity-80">Futebol, futsal, academia, basquete</p> </div> <span class="font-extrabold text-lg bg-white/20 px-2 py-1 rounded"> <span id="dev-esportivas" data-target-value="51547">0</span> </span></li> <li class="flex justify-between items-center"> <div><span class="font-semibold">Oficinas/Cursos</span> <p class="texto-card opacity-80">Pedag&oacute;gicos e qualifica&ccedil;&atilde;o</p> </div> <span class="font-extrabold text-lg bg-white/20 px-2 py-1 rounded"> <span id="dev-oficinas" data-target-value="23602">0</span> </span></li> </ul> <div class="mt-4 pt-3 border-t border-white/30"> <p class="texto-card font-light">Total Desenvolvimento: <span class="font-bold"><span id="dev-total" data-target-value="186225">0</span></span> <span class="percentage-badge"><span id="dev-total-pct" data-target-value="9.3">0</span>% do total</span></p> </div> </div> <!-- Card 2: Atividades Complementares --> <div class="chart-card card-complementary fade-in-up delay-200"> <h3 class="text-xl font-bold mb-3 flex items-center"><svg class="w-7 h-7 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path> </svg> ATIVIDADES COMPLEMENTARES</h3> <p class="kpi-value"><span id="comp-eventos" data-target-value="245643">0</span> <span class="percentage-badge"><span id="comp-total-pct" data-target-value="18.1">0</span>%</span></p> <p class="text-sm font-light italic opacity-90 mb-3">Eventos, atividades socioeducativas e encontros</p> <ul class="texto-card space-y-1"> <li>&bull; Eventos/Atividades: <span id="comp-eventos-list" data-target-value="245643">0</span></li> <li>&bull; Encontros (manh&atilde;/tarde/noite): <span id="comp-encontros-list" data-target-value="108672">0</span></li> <li>&bull; Atividade em Grupo ou C&iacute;rculo: <span id="comp-grupo-list" data-target-value="9460">0</span></li> </ul> <div class="mt-4 pt-3 border-t border-white/30"> <p class="texto-card">Total: <span class="font-bold"><span id="comp-total" data-target-value="363775">0</span></span> movimenta&ccedil;&otilde;es complementares</p> </div> </div> <!-- Card 3: Garantia de Direitos --> <div class="chart-card card-rights fade-in-up delay-300"> <h3 class="text-xl font-bold mb-3 flex items-center"><svg class="w-7 h-7 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.164-2.05-.479-3.016z"></path> </svg> GARANTIA DE DIREITOS</h3> <ul class="space-y-3 font-medium"> <li class="flex justify-between items-center"> <div><span class="font-semibold">Sa&uacute;de Integral</span> <p class="texto-card opacity-80">Cuidados m&eacute;dicos, enfermagem, odonto</p> </div> <span class="font-extrabold text-lg bg-white/20 px-2 py-1 rounded"> <span id="dir-saude" data-target-value="78197">0</span> </span></li> <li class="flex justify-between items-center"> <div><span class="font-semibold">Visitas</span> <p class="texto-card opacity-80">Rotina, assistida e &iacute;ntima</p> </div> <span class="font-extrabold text-lg bg-white/20 px-2 py-1 rounded"> <span id="dir-visitas" data-target-value="15016">0</span> </span></li> <li class="flex justify-between items-center"> <div><span class="font-semibold">Acesso &agrave; Justi&ccedil;a</span> <p class="texto-card opacity-80">Defensoria, MP, Judici&aacute;rio e Audi&ecirc;ncias</p> </div> <span class="font-extrabold text-lg bg-white/20 px-2 py-1 rounded"> <span id="dir-justica" data-target-value="4726">0</span> </span></li> </ul> <div class="mt-4 pt-3 border-t border-white/30"> <p class="texto-card font-light">Total Direitos: <span class="font-bold"><span id="dir-total" data-target-value="97939">0</span></span> <span class="percentage-badge"><span id="dir-total-pct" data-target-value="4.9">0</span>% do total</span></p> </div> </div> </div> </section> <!-- Seção 2 e 3: Histórico Mensal e Dia da Semana --> <section class="mb-12"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"><!-- Histórico Mensal (Modificado para barras horizontais) --> <div class="chart-card fade-in-up delay-100"> <h2 class="text-xl font-bold text-slate-800 mb-4 border-b pb-2">Hist&oacute;rico Mensal (Varia&ccedil;&atilde;o Jan-Dez)</h2> <div class="chart-container"> <div class="chart-wrapper-sm"><canvas id="chartHistoricoMensal" role="img" aria-label="Gr&aacute;fico de barras horizontais mostrando a varia&ccedil;&atilde;o mensal das movimenta&ccedil;&otilde;es de janeiro a dezembro"></canvas></div> </div> <div class="mt-4 p-3 bg-blue-50 rounded-md"> <p class="texto-legenda text-gray-600 text-center"><span class="font-bold">Pico em Mar&ccedil;o:</span> 188.586 movimenta&ccedil;&otilde;es<br /><span class="font-bold">Menor volume em Novembro:</span> 130.128 (redu&ccedil;&atilde;o tempor&aacute;ria das rotinas)</p> </div> </div> <!-- Movimentações por Dia da Semana --> <div class="chart-card fade-in-up delay-200"> <h2 class="text-xl font-bold text-slate-800 mb-4 text-center border-b pb-2">Distribui&ccedil;&atilde;o por Dia da Semana</h2> <div class="chart-container"> <div class="chart-wrapper-sm"><canvas id="chartDiaSemana" role="img" aria-label="Gr&aacute;fico de rosca mostrando a distribui&ccedil;&atilde;o das movimenta&ccedil;&otilde;es por dia da semana"></canvas></div> </div> <div class="mt-4 p-3 bg-amber-50 rounded-md"> <p class="texto-legenda text-gray-600 text-center"><span class="font-bold">Atendimento cont&iacute;nuo:</span> Alta consist&ecirc;ncia aos finais de semana atesta o compromisso com a rotina ininterrupta<br /><span class="font-bold">Quarta-feira:</span> Dia com maior volume (299.294)</p> </div> </div> </div> </section> <!-- Seção 4: Detalhamento das Movimentações --> <section class="mb-12"> <h2 class="section-title fade-in-up">Detalhamento das Movimenta&ccedil;&otilde;es</h2> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"><!-- Card 1: Educação Escolar --> <div class="detail-card fade-in-up delay-100" style="border-left-color: #10b981;"> <h3 class="text-lg font-bold text-slate-800 mb-3">Educa&ccedil;&atilde;o Escolar</h3> <p class="text-sm text-slate-600 mb-3">Inclui:</p> <ul class="text-sm text-slate-700 space-y-1"> <li>&bull; Educa&ccedil;&atilde;o Escolar Interna</li> <li>&bull; Educa&ccedil;&atilde;o Escolar Externa</li> </ul> </div> <!-- Card 2: Visitas --> <div class="detail-card fade-in-up delay-200" style="border-left-color: #3b82f6;"> <h3 class="text-lg font-bold text-slate-800 mb-3">Visitas</h3> <p class="text-sm text-slate-600 mb-3">Inclui:</p> <ul class="text-sm text-slate-700 space-y-1"> <li>&bull; Visita De Rotina</li> <li>&bull; Visita Assistida</li> <li>&bull; Visita &Iacute;ntima</li> </ul> </div> <!-- Card 3: Atendimento Defensoria Pública, MP e Judiciário --> <div class="detail-card fade-in-up delay-300" style="border-left-color: #8b5cf6;"> <h3 class="text-lg font-bold text-slate-800 mb-3">Atendimento Defensoria P&uacute;blica, MP e Judici&aacute;rio</h3> <p class="text-sm text-slate-600 mb-3">Inclui:</p> <ul class="text-sm text-slate-700 space-y-1"> <li>&bull; Atendimento Defensoria</li> <li>&bull; Atendimento MP</li> <li>&bull; Atendimento Judici&aacute;rio</li> </ul> </div> <!-- Card 4: Audiência --> <div class="detail-card fade-in-up delay-100" style="border-left-color: #f59e0b;"> <h3 class="text-lg font-bold text-slate-800 mb-3">Audi&ecirc;ncia</h3> <p class="text-sm text-slate-600 mb-3">Inclui:</p> <ul class="text-sm text-slate-700 space-y-1"> <li>&bull; Audi&ecirc;ncia</li> <li>&bull; Teleaudi&ecirc;ncia</li> </ul> </div> <!-- Card 5: Inspeção Sistemas de Justiça --> <div class="detail-card fade-in-up delay-200" style="border-left-color: #ec4899;"> <h3 class="text-lg font-bold text-slate-800 mb-3">Inspe&ccedil;&atilde;o Sistemas de Justi&ccedil;a</h3> <p class="text-sm text-slate-600 mb-3">Inclui:</p> <ul class="text-sm text-slate-700 space-y-1"> <li>&bull; Inspe&ccedil;&atilde;o Judicial</li> <li>&bull; Inspe&ccedil;&atilde;o Defensoria</li> <li>&bull; Inspe&ccedil;&atilde;o MP</li> </ul> </div> <!-- Card 6: Rotina Socioeducativa --> <div class="detail-card fade-in-up delay-300" style="border-left-color: #8b5cf6;"> <h3 class="text-lg font-bold text-slate-800 mb-3">Rotina Socioeducativa</h3> <p class="text-sm text-slate-600 mb-3">Inclui:</p> <ul class="text-sm text-slate-700 space-y-1"> <li>&bull; Desjejum/Caf&eacute; manh&atilde;</li> <li>&bull; Lanche Matutino</li> <li>&bull; Beleza e Est&eacute;tica</li> <li>&bull; Cuidados Pessoais</li> <li>&bull; Almo&ccedil;o</li> <li>&bull; Lanche Vespertino</li> <li>&bull; Jantar</li> <li>&bull; Ceia</li> <li>&bull; Tempo de Sol</li> <li>&bull; Degusta&ccedil;&atilde;o</li> <li>&bull; Outros</li> </ul> </div> <!-- Card 7: Atividades Esportivas --> <div class="detail-card fade-in-up delay-100" style="border-left-color: #10b981;"> <h3 class="text-lg font-bold text-slate-800 mb-3">Atividades Esportivas</h3> <p class="text-sm text-slate-600 mb-3">Inclui:</p> <ul class="text-sm text-slate-700 space-y-1"> <li>&bull; Futebol</li> <li>&bull; Futsal</li> <li>&bull; Academia</li> <li>&bull; Basquete</li> <li>&bull; Outras modalidades</li> </ul> </div> <!-- Card 8: Cuidados em Saúde --> <div class="detail-card fade-in-up delay-200" style="border-left-color: #3b82f6;"> <h3 class="text-lg font-bold text-slate-800 mb-3">Cuidados em Sa&uacute;de</h3> <p class="text-sm text-slate-600 mb-3">Inclui:</p> <ul class="text-sm text-slate-700 space-y-1"> <li>&bull; Atendimento de Enfermagem</li> <li>&bull; Cuidado em Sa&uacute;de</li> <li>&bull; Atendimento M&eacute;dico</li> <li>&bull; Atendimento Odontol&oacute;gico</li> <li>&bull; Exames</li> <li>&bull; Atendimento em Outras &Aacute;reas da Sa&uacute;de</li> <li>&bull; Imuniza&ccedil;&atilde;o</li> </ul> </div> <!-- Card 9: Atividade De Espiritualidade --> <div class="detail-card fade-in-up delay-300" style="border-left-color: #f59e0b;"> <h3 class="text-lg font-bold text-slate-800 mb-3">Atividade De Espiritualidade</h3> <p class="text-sm text-slate-600 mb-3">Inclui:</p> <ul class="text-sm text-slate-700 space-y-1"> <li>&bull; Atividades de Assist&ecirc;ncia Religiosa</li> <li>&bull; Atividades em Valores Humanos</li> </ul> </div> <!-- Card 10: Avaliação --> <div class="detail-card fade-in-up delay-100" style="border-left-color: #ec4899;"> <h3 class="text-lg font-bold text-slate-800 mb-3">Avalia&ccedil;&atilde;o</h3> <p class="text-sm text-slate-600 mb-3">Inclui:</p> <ul class="text-sm text-slate-700 space-y-1"> <li>&bull; Avalia&ccedil;&atilde;o Semanal</li> <li>&bull; Avalia&ccedil;&atilde;o de Progress&atilde;o de Fase</li> <li>&bull; Avalia&ccedil;&atilde;o Quinzenal</li> <li>&bull; Avalia&ccedil;&atilde;o Mensal</li> </ul> </div> <!-- Card 11: Atividades em Grupo --> <div class="detail-card fade-in-up delay-200" style="border-left-color: #10b981;"> <h3 class="text-lg font-bold text-slate-800 mb-3">Atividades em Grupo</h3> <p class="text-sm text-slate-600 mb-3">Inclui:</p> <ul class="text-sm text-slate-700 space-y-1"> <li>&bull; Grupo Pedag&oacute;gico</li> <li>&bull; Grupo Reflexivo</li> <li>&bull; Enfoque Restaurativo</li> <li>&bull; Grupo Tem&aacute;tico</li> <li>&bull; Grupo Terap&ecirc;utico</li> </ul> </div> <!-- Card 12: Oficinas/Cursos --> <div class="detail-card fade-in-up delay-300" style="border-left-color: #8b5cf6;"> <h3 class="text-lg font-bold text-slate-800 mb-3">Oficinas/Cursos</h3> <p class="text-sm text-slate-600 mb-3">Inclui:</p> <ul class="text-sm text-slate-700 space-y-1"> <li>&bull; Cursos de Qualifica&ccedil;&atilde;o Profissional</li> <li>&bull; Oficinas/cursos Pedag&oacute;gicos</li> <li>&bull; Curso Inicia&ccedil;&atilde;o Profissional</li> <li>&bull; Oficinas de Inicia&ccedil;&atilde;o Profissional</li> </ul> </div> <!-- Card 13: Evento/Atividade Socioeducativa --> <div class="detail-card fade-in-up delay-100" style="border-left-color: #f59e0b;"> <h3 class="text-lg font-bold text-slate-800 mb-3">Evento/Atividade Socioeducativa</h3> <p class="text-sm text-slate-600 mb-3">Inclui:</p> <ul class="text-sm text-slate-700 space-y-1"> <li>&bull; Assembl&eacute;ia e Palestras</li> <li>&bull; Atividade Cultural e Lazer</li> <li>&bull; Confec&ccedil;&otilde;es e Troca de Carta</li> <li>&bull; Conviv&ecirc;ncia</li> <li>&bull; Di&aacute;rio Terap&ecirc;utico</li> <li>&bull; Empr&eacute;stimo de Livros</li> <li>&bull; Estudo de M&oacute;dulo</li> <li>&bull; Jogos Digitais e Eventos On-Line</li> <li>&bull; Manuten&ccedil;&atilde;o de Jardim / Horta</li> <li>&bull; Roda de Conversa e leitura</li> <li>&bull; TV/Entretenimento</li> </ul> </div> <!-- Card 14: Encontro --> <div class="detail-card fade-in-up delay-200" style="border-left-color: #f59e0b;"> <h3 class="text-lg font-bold text-slate-800 mb-3">Encontro</h3> <p class="text-sm text-slate-600 mb-3">Inclui:</p> <ul class="text-sm text-slate-700 space-y-1"> <li>&bull; Encontro da Manh&atilde;</li> <li>&bull; Encontro da Tarde</li> <li>&bull; Encontro da Noite</li> </ul> </div> <!-- Card 15: Exames e/ou Imunização --> <div class="detail-card fade-in-up delay-300" style="border-left-color: #3b82f6;"> <h3 class="text-lg font-bold text-slate-800 mb-3">Exames e/ou Imuniza&ccedil;&atilde;o</h3> <p class="text-sm text-slate-600 mb-3">Inclui:</p> <ul class="text-sm text-slate-700 space-y-1"> <li>&bull; Imuniza&ccedil;&atilde;o contra Dengue</li> <li>&bull; Imuniza&ccedil;&atilde;o contra Hepatite e Difteria</li> <li>&bull; Imuniza&ccedil;&atilde;o contra T&eacute;tano e Coqueluche</li> <li>&bull; Imuniza&ccedil;&atilde;o contra COVID, Influenza</li> <li>&bull; Imuniza&ccedil;&atilde;o contra Meningite e HPV</li> <li>&bull; Imuniza&ccedil;&atilde;o contra Febre Amarela</li> <li>&bull; Exames Laboratorial</li> <li>&bull; Exames de Imagem</li> </ul> </div> </div> </section> </div> <script> // Registra o plugin Datalabels globalmente Chart.register(ChartDataLabels); // Função utilitária para verificar se um valor é 1 ou uma potência de 10. function isPowerOfTen(value) { if (value === 1) return true; return Math.log10(value) % 1 === 0 && value >= 10; } /** * Função para animar a contagem de um valor numérico em um elemento HTML. * @param {string} id O ID do elemento HTML a ser animado. * @param {number} start O valor inicial (geralmente 0). * @param {number} duration A duração da animação em milissegundos. * @param {boolean} isPercentage Indica se o valor é uma porcentagem (para formatação de decimais). */ function animateValue(id, start = 0, duration = 1500, isPercentage = false) { const obj = document.getElementById(id); if (!obj) return; // Obtém o valor final do atributo de dados const end = parseFloat(obj.getAttribute('data-target-value') || 0); // Ajusta a duração para valores pequenos (como percentuais) para animação mais rápida const finalDuration = end < 100 ? 1000 : duration; let startTime; function step(timestamp) { if (!startTime) startTime = timestamp; const progress = timestamp - startTime; const progressRatio = Math.min(progress / finalDuration, 1); let currentValue = start + (end - start) * progressRatio; let formattedValue; if (isPercentage) { // Formata porcentagens com uma casa decimal formattedValue = currentValue.toFixed(1); } else { // Formata números grandes (sem casas decimais) com separador de milhares formattedValue = Math.floor(currentValue).toLocaleString('pt-BR'); } obj.textContent = formattedValue; if (progress < finalDuration) { window.requestAnimationFrame(step); } else { // Garante que o valor final exacto seja exibido if (isPercentage) { obj.textContent = end.toFixed(1); } else { obj.textContent = end.toLocaleString('pt-BR'); } } } window.requestAnimationFrame(step); } // Função para inicializar todos os contadores de números function initializeCounters() { // Cabeçalho animateValue('total-registros'); // Rotina Socioeducativa animateValue('kpi-rotina-value'); animateValue('kpi-rotina-pct', 0, 1000, true); // Desenvolvimento animateValue('dev-educacao'); animateValue('dev-esportivas'); animateValue('dev-oficinas'); animateValue('dev-total'); animateValue('dev-total-pct', 0, 1000, true); // COMPLEMENTARES (KPI Principal e lista) animateValue('comp-eventos'); animateValue('comp-total-pct', 0, 1000, true); animateValue('comp-total'); // Lista de Complementares (para animação dos detalhes) animateValue('comp-eventos-list'); animateValue('comp-encontros-list'); animateValue('comp-grupo-list'); // Garantia de Direitos animateValue('dir-saude'); animateValue('dir-visitas'); animateValue('dir-justica'); animateValue('dir-total'); animateValue('dir-total-pct', 0, 1000, true); } // Configurações gerais dos gráficos Chart.defaults.font.family = 'Inter'; Chart.defaults.responsive = true; Chart.defaults.maintainAspectRatio = false; Chart.defaults.plugins.legend.position = 'bottom'; // AUMENTO DE 15% NOS FONTES DOS TOOLTIPS Chart.defaults.plugins.tooltip.titleFont = { size: 16, weight: 'bold' }; Chart.defaults.plugins.tooltip.bodyFont = { size: 14 }; Chart.defaults.plugins.tooltip.boxPadding = 4; Chart.defaults.animation.duration = 1500; // Define a duração da animação dos gráficos Chart.defaults.animation.easing = 'easeOutExpo'; // Dados extraídos da análise completa de 2025 do PDF const totalGeral = 2007160; const dadosPrincipais = { rotulos: [ "Rotina Socioeducativa", "Evento/Atividade Socioeducativa", "Educação Escolar", "Encontro", "Cuidado em Saúde", "Atividades Esportivas", "Atendimento Técnico", "Oficinas/Cursos", "Visitas", "Avaliação", "Atividade de Espiritualidade", "Movimentações Diversas", "Atividade em Grupo ou Círculo", "Atendimento de Enfermagem", "Ligação Assistida", "Atendimento Médico", "Audiência e/ou Teleaudiência", "Mov. Entrada/Liberação/Transf. Externas.", "Movimentação entre Unidades", "Atendimento Defensoria, MP, Judiciário", "Acolhimento e Intervenção de Equipe", "Exames e/ou Imunização", "Atendimento Odontológico", "Cerimônia de Progressão de Fase", "Atendimento em Outras Áreas da Saúde", "Comissão Avaliação Disciplinar", "Experiência Sociofamiliar", "Atendimento Socioeducativo", "Atendimento com Advogado", "Inspeção Sistema de Justiça", "Atividade de Desenvolvimento", "Emissão de Documentação Civil", "Jornada Extra/Bônus", "Estudo de Caso em Equipe", "Ações Mercado de Trabalho" ], valores: [ 1269412, 245643, 111076, 108672, 78197, 51547, 32767, 23602, 15016, 11909, 11437, 10973, 9460, 4531, 3603, 3480, 2995, 2184, 2118, 1731, 1517, 1228, 964, 628, 564, 458, 395, 227, 199, 179, 158, 134, 101, 33, 22 ], // MAPEAMENTO DE CORES SEMÂNTICAS BASEADO NOS CARDS DE KPI: // Roxo = Rotina/Disciplina, Verde = Desenvolvimento, Laranja = Complementares, Azul = Garantia de Direitos, Cinza/Azul Claro = Outros cores: [ '#8b5cf6', // Rotina Socioeducativa (Roxo) '#f59e0b', // Evento/Atividade Socioeducativa (Laranja) '#10b981', // Educação Escolar (Verde) '#f59e0b', // Encontro (Laranja) '#3b82f6', // Cuidado em Saúde (Azul) '#10b981', // Atividades Esportivas (Verde) '#60a5fa', // Atendimento Técnico (Azul Claro) '#10b981', // Oficinas/Cursos (Verde) '#3b82f6', // Visitas (Azul) '#60a5fa', // Avaliação (Azul Claro) '#10b981', // Atividade de Espiritualidade (Verde) '#60a5fa', // Movimentações Diversas (Azul Claro) '#f59e0b', // Atividade em Grupo ou Círculo (Laranja) '#3b82f6', // Atendimento de Enfermagem (Azul) '#3b82f6', // Ligação Assistida (Azul) '#3b82f6', // Atendimento Médico (Azul) '#3b82f6', // Audiência e/ou Teleaudiência (Azul) '#9ca3af', // Mov. Entrada/Liberação/Transf. Externas. (Cinza) '#9ca3af', // Movimentação entre Unidades (Cinza) '#3b82f6', // Atendimento Defensoria, MP, Judiciário (Azul) '#60a5fa', // Acolhimento e Intervenção de Equipe (Azul Claro) '#3b82f6', // Exames e/ou Imunização (Azul) '#3b82f6', // Atendimento Odontológico (Azul) '#10b981', // Cerimônia de Progressão de Fase (Verde) '#3b82f6', // Atendimento em Outras Áreas da Saúde (Azul) '#60a5fa', // Comissão Avaliação Disciplinar (Azul Claro) '#10b981', // Experiência Sociofamiliar (Verde) '#60a5fa', // Atendimento Socioeducativo (Azul Claro) '#3b82f6', // Atendimento com Advogado (Azul) '#3b82f6', // Inspeção Sistema de Justiça (Azul) '#10b981', // Atividade de Desenvolvimento (Verde) '#3b82f6', // Emissão de Documentação Civil (Azul) '#60a5fa', // Jornada Extra/Bônus (Azul Claro) '#60a5fa', // Estudo de Caso em Equipe (Azul Claro) '#10b981' // Ações Mercado de Trabalho (Verde) ] }; const dadosMensais = { rotulos: ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"], valores: [179176, 171712, 188586, 175117, 173920, 167142, 178429, 177407, 168589, 161874, 130128, 135080] }; const dadosDiaSemana = { rotulos: ["Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado", "Domingo"], valores: [290917, 299050, 299294, 293511, 282636, 251886, 289866], // Paleta elegante com destaque azul escuro para Sábado e Domingo e gradiente harmônico de Seg a Sex cores: ['#d8e6fd', '#b1cefb', '#8ab5fa', '#639cf8', '#3b82f6', '#0b60ea', '#0848b0'] }; // Função para gerar o gráfico de barras horizontais (Principais Movimentações) function gerarChartPrincipaisMovimentacoes() { const ctx = document.getElementById('chartPrincipaisMovimentacoes').getContext('2d'); new Chart(ctx, { type: 'bar', data: { labels: dadosPrincipais.rotulos, datasets: [{ label: 'Total de Movimentações', data: dadosPrincipais.valores, backgroundColor: dadosPrincipais.cores, borderRadius: 6, barPercentage: 0.8, categoryPercentage: 0.7 }] }, options: { indexAxis: 'y', responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, tooltip: { callbacks: { label: function(context) { let label = context.label || ''; if (label) { label += ': '; } if (context.parsed.x !== null) { const percentage = ((context.parsed.x / totalGeral) * 100).toFixed(1); label += context.parsed.x.toLocaleString('pt-BR') + ' registros (' + percentage + '%)'; } return label; } } }, datalabels: { display: false } }, scales: { x: { type: 'logarithmic', min: 1, title: { display: false, }, ticks: { maxRotation: 0, minRotation: 0, callback: function(value, index, ticks) { if (isPowerOfTen(value)) { return value.toLocaleString('pt-BR'); } return null; }, font: { size: 14 } } }, y: { grid: { display: false }, ticks: { autoSkip: false, maxRotation: 0, minRotation: 0, font: { size: 14 } } } }, layout: { padding: { left: 10, right: 10, top: 10, bottom: 10 } } } }); } // Função para gerar o gráfico de barras horizontais (Histórico Mensal) function gerarChartHistoricoMensal() { const ctx = document.getElementById('chartHistoricoMensal').getContext('2d'); new Chart(ctx, { type: 'bar', // Mudado de 'line' para 'bar' data: { labels: dadosMensais.rotulos, datasets: [{ label: 'Movimentações', data: dadosMensais.valores, backgroundColor: '#3b82f6', // Tom de azul consistente e moderno borderRadius: 4, barPercentage: 0.8, categoryPercentage: 0.8 }] }, options: { indexAxis: 'y', // Define a orientação horizontal responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, tooltip: { callbacks: { label: function(context) { let label = context.dataset.label || ''; if (label) { label += ': '; } if (context.parsed.x !== null) { label += context.parsed.x.toLocaleString('pt-BR'); } return label; } } }, datalabels: { display: false } }, scales: { x: { ticks: { callback: function(value) { return value.toLocaleString('pt-BR'); }, font: { size: 12 } } }, y: { grid: { display: false }, ticks: { font: { size: 12 // Garante que os meses fiquem horizontais e legíveis } } } } } }); } // Função para gerar o gráfico de rosquinha (Dia da Semana) function gerarChartDiaSemana() { const ctx = document.getElementById('chartDiaSemana').getContext('2d'); new Chart(ctx, { type: 'doughnut', data: { labels: dadosDiaSemana.rotulos, datasets: [{ label: 'Total de Movimentações', data: dadosDiaSemana.valores, backgroundColor: dadosDiaSemana.cores, hoverOffset: 8, borderWidth: 2 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom', labels: { boxWidth: 10, font: { size: 14 } } }, tooltip: { callbacks: { label: function(context) { const label = context.label || ''; const value = context.parsed || 0; const total = context.dataset.data.reduce((a, b) => a + b, 0); const percentage = ((value / total) * 100).toFixed(1) + '%'; return `${label}: ${value.toLocaleString('pt-BR')} (${percentage})`; } } } } } }); } // Função principal de inicialização window.onload = function() { initializeCounters(); // Gráficos (irão animar automaticamente com as configurações do Chart.js) gerarChartPrincipaisMovimentacoes(); gerarChartHistoricoMensal(); gerarChartDiaSemana(); }; </script>Thu, 30 Oct 2025 19:40:00 GMThttps://observatorio.iases.es.gov.br:443/Not%C3%ADcia/movimentacaohttps://observatorio.iases.es.gov.br:443/Not%C3%ADcia/atendimentos-tecnicos-2024-estatisticas-gerais<p></p> <p> <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script> </p> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap'); * { box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background: linear-gradient(135deg, #f1f5f9 0%, #e6edf5 100%); color: #475569; margin: 0; padding: 0; min-height: 100vh; overflow-x: hidden; font-size: 1.2em; } .container { max-width: 1200px; margin: 0 auto; padding: 1.5rem; width: 100%; } @media (max-width: 768px) { .container { padding: 1rem; } } .grid { gap: 1rem; } .chart-container, .kpi-card { background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%); border-radius: 1rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); padding: 1.5rem; transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid #e2e8f0; position: relative; overflow: hidden; } .chart-container::after, .kpi-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.3s; box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.3); } .chart-container:hover::after, .kpi-card:hover::after { opacity: 1; } .chart-container:hover, .kpi-card:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); } h1, h2 { color: #1e293b; } h1 { font-size: 2.4rem; font-weight: 800; } h2 { font-size: 1.8rem; font-weight: 700; margin-bottom: 1.5rem !important; } .insight-text { color: #475569; font-size: 1.2rem; line-height: 1.6; } .kpi-card p.text-sm { font-size: 1.104rem; font-weight: 600; } .kpi-card p.text-2xl { font-size: 2.208rem; } .fade-in-up { opacity: 0; transform: translateY(20px); animation: fadeInUp 0.8s ease-out forwards; } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } } .delay-100 { animation-delay: 0.1s; } .delay-200 { animation-delay: 0.2s; } .delay-300 { animation-delay: 0.3s; } .delay-400 { animation-delay: 0.4s; } .delay-500 { animation-delay: 0.5s; } .delay-600 { animation-delay: 0.6s; } .delay-700 { animation-delay: 0.7s; } .delay-800 { animation-delay: 0.8s; } .chart-height { height: 320px !important; } canvas { display: block; max-width: 100%; height: auto !important; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05)); } .counting { transition: all 0.5s ease-out; } .loading-complete::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #0ea5e9, #f59e0b); animation: loadingBar 1.5s ease-out; } @keyframes loadingBar { 0% { width: 0; opacity: 1; } 100% { width: 100%; opacity: 0; } } .export-btn { margin-top: 1rem; padding: 0.5rem 1rem; background-color: #0ea5e9; color: white; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.3s; border: none; cursor: pointer; } .export-btn:hover { background-color: #0284c7; transform: translateY(-2px); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } .peak-badge { display: inline-flex; align-items: center; padding: 0.25rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; background-color: #fef3c7; color: #92400e; margin-left: 0.5rem; } @media (prefers-color-scheme: dark) { body { background: linear-gradient(135deg, #0f172a 0%, #1a2538 100%); color: #cbd5e1; } .chart-container, .kpi-card { background: linear-gradient(135deg, #1e293b 0%, #263445 100%); border-color: #334155; } h1, h2 { color: #f1f5f9; } .insight-text { color: #94a3b8; } .kpi-card .text-sm, .kpi-card .text-2xl { color: #e2e8f0; } } </style> <div class="container"><header class="text-center mb-8 fade-in-up"> <h1 class="text-3xl sm:text-4xl font-extrabold tracking-tight">Dashboard de Atendimentos T&eacute;cnicos</h1> <p class="mt-1 text-lg insight-text">IASES - An&aacute;lise Consolidada de 2024</p> <div class="flex justify-center mt-4"><button class="export-btn" id="exportBtn"> <svg fill="none" stroke="currentColor" viewbox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path> </svg> Exportar PDF </button></div> </header> <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6"> <div class="kpi-card flex items-center p-3 fade-in-up delay-100"> <div class="bg-sky-100 text-sky-600 rounded-full p-2 mr-3"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path></svg></div> <div> <p class="text-sm font-medium">Total de Atendimentos</p> <p id="totalAtendimentos" class="text-2xl font-bold counting">0</p> </div> </div> <div class="kpi-card flex items-center p-3 fade-in-up delay-200"> <div class="bg-amber-100 text-amber-600 rounded-full p-2 mr-3"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg></div> <div> <p class="text-sm font-medium">Total de Horas</p> <p id="totalHoras" class="text-2xl font-bold counting">0</p> </div> </div> <div class="kpi-card flex items-center p-3 fade-in-up delay-300"> <div class="bg-green-100 text-green-600 rounded-full p-2 mr-3"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path></svg></div> <div> <p class="text-sm font-medium">M&eacute;dia Mensal</p> <p id="mediaMensal" class="text-2xl font-bold counting">0</p> </div> </div> <div class="kpi-card flex items-center p-3 fade-in-up delay-400"> <div class="bg-blue-100 text-blue-600 rounded-full p-2 mr-3"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg></div> <div> <p class="text-sm font-medium">M&ecirc;s de Pico</p> <p id="mesPico" class="text-2xl font-bold">-</p> </div> </div> </div> <div class="space-y-6"> <div class="chart-container fade-in-up delay-500"> <h2 class="text-2xl font-semibold mb-4 text-center">Evolu&ccedil;&atilde;o Mensal de Atendimentos e Horas</h2> <p class="text-base text-center mb-6 insight-text">Julho registrou o pico de atendimentos (4.309), enquanto Dezembro teve o maior volume de horas (8.276).</p> <canvas id="mensalChart" class="chart-height"></canvas></div> <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> <div class="chart-container fade-in-up delay-600"> <h2 class="text-2xl font-semibold mb-4 text-center">P&uacute;blico-Alvo do Atendimento</h2> <p class="text-base text-center mb-6 insight-text">O atendimento focado exclusivamente no adolescente corresponde a quase 80% dos casos.</p> <canvas id="publicoAlvoChart" class="chart-height"></canvas></div> <div class="chart-container fade-in-up delay-700"> <h2 class="text-2xl font-semibold mb-4 text-center">Principais Tipos de Atendimento</h2> <p class="text-base text-center mb-6 insight-text">"Acompanhamentos" &eacute; 3 vezes mais frequente que a segunda principal categoria.</p> <canvas id="tipoAtendimentoChart" class="chart-height"></canvas></div> </div> <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6"> <div class="chart-container fade-in-up delay-800"> <h2 class="text-2xl font-semibold mb-4 text-center">Forma de Atendimento</h2> <p class="text-base text-center mb-6 insight-text">A grande maioria dos atendimentos (84%) foi realizada de forma presencial.</p> <canvas id="formaAtendimentoChart" class="chart-height"></canvas></div> <div class="chart-container fade-in-up delay-900"> <h2 class="text-2xl font-semibold mb-4 text-center">Tipo de Atendimento</h2> <p class="text-base text-center mb-6 insight-text">Atendimentos individuais representam 92% do total.</p> <canvas id="tipoAtendimentoGeralChart" class="chart-height"></canvas></div> </div> </div> </div> <p> <script> // --- DADOS --- const dataAtendimentosMensal = [3492, 2758, 2751, 3226, 2914, 3413, 4309, 3971, 3809, 3886, 3487, 3320]; const dataHorasMensal = [7388, 5605, 4970, 5174, 4119, 6050, 7217, 6108, 6681, 4900, 5738, 8276]; const labelsMeses = ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']; const dataPublicoAlvo = [33013, 4056, 2695, 603, 465, 396, 106]; const labelsPublicoAlvo = ['Adolescente', 'Adolescente e Família', 'Família', 'Público Externo', 'Adol. e P. Externo', 'Adol., Família e P. Ext.', 'Família e P. Externo']; const dataTipoAtendimento = [24513, 7321, 2815, 2055, 1800, 831, 739]; const labelsTipoAtendimento = ['Acompanhamentos', 'Acomp. P/ Avaliações', 'Ações de Acolhimento', 'Acomp. P/ Ligação Assistida', 'Instrumentos Técnicos', 'Acomp. Em Visitas', 'Ações em Grupos']; const dataFormaAtendimento = [34742, 6593]; const dataTipoAtendimentoGeral = [38125, 3211]; // --- ANIMAÇÕES --- function animateNumber(element, finalValue, duration = 2000) { const startTime = performance.now(); function update(currentTime) { const elapsed = currentTime - startTime; const progress = Math.min(elapsed / duration, 1); const eased = 1 - Math.pow(1 - progress, 3); const current = finalValue * eased; element.textContent = Math.floor(current).toLocaleString('pt-BR'); if (progress < 1) requestAnimationFrame(update); } requestAnimationFrame(update); } function animateChart(chart) { const originalData = chart.data.datasets[0].data; chart.data.datasets[0].data = originalData.map(() => 0); chart.update(); let startTime = null; function animate(timestamp) { if (!startTime) startTime = timestamp; const progress = Math.min((timestamp - startTime) / 1000, 1); const eased = 1 - Math.pow(1 - progress, 3); chart.data.datasets[0].data = originalData.map(v => v * eased); chart.update(); if (progress < 1) requestAnimationFrame(animate); } requestAnimationFrame(animate); } // --- INICIALIZAÇÃO KPIs --- const totalAtendimentos = dataAtendimentosMensal.reduce((a, b) => a + b, 0); const totalHoras = dataHorasMensal.reduce((a, b) => a + b, 0); const mediaMensal = Math.round(totalAtendimentos / 12); const mesPicoIndex = dataAtendimentosMensal.indexOf(Math.max(...dataAtendimentosMensal)); setTimeout(() => { animateNumber(document.getElementById('totalAtendimentos'), totalAtendimentos); animateNumber(document.getElementById('totalHoras'), totalHoras); animateNumber(document.getElementById('mediaMensal'), mediaMensal); document.getElementById('mesPico').textContent = labelsMeses[mesPicoIndex]; }, 500); // --- GRÁFICOS --- Chart.defaults.plugins.legend.position = 'bottom'; Chart.defaults.font.size = 14; const mensalChart = new Chart(document.getElementById('mensalChart'), { type: 'bar', data: { labels: labelsMeses, datasets: [ { type: 'bar', label: 'Atendimentos', data: dataAtendimentosMensal, backgroundColor: '#0ea5e9', yAxisID: 'y' }, { type: 'line', label: 'Horas', data: dataHorasMensal, borderColor: '#f59e0b', tension: 0.3, fill: false, yAxisID: 'y1' } ] }, options: { responsive: true, maintainAspectRatio: false, scales: { y: { position: 'left' }, y1: { position: 'right', grid: { drawOnChartArea: false } } } } }); const publicoAlvoChart = new Chart(document.getElementById('publicoAlvoChart'), { type: 'bar', plugins: [ChartDataLabels], data: { labels: labelsPublicoAlvo, datasets: [{ data: dataPublicoAlvo, backgroundColor: '#14b8a6' }] }, options: { indexAxis: 'y', responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, datalabels: { anchor: 'end', align: 'end', formatter: (v) => v.toLocaleString('pt-BR') } }, scales: { x: { display: false }, y: { grid: { display: false } } } } }); const tipoAtendimentoChart = new Chart(document.getElementById('tipoAtendimentoChart'), { type: 'bar', plugins: [ChartDataLabels], data: { labels: labelsTipoAtendimento, datasets: [{ data: dataTipoAtendimento, backgroundColor: '#3b82f6' }] }, options: { indexAxis: 'y', responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, datalabels: { anchor: 'end', align: 'end', formatter: (v) => v.toLocaleString('pt-BR') } }, scales: { x: { display: false }, y: { grid: { display: false } } } } }); const formaAtendimentoChart = new Chart(document.getElementById('formaAtendimentoChart'), { type: 'pie', data: { labels: ['Presencial', 'Não Presencial'], datasets: [{ data: dataFormaAtendimento, backgroundColor: ['#10b981', '#3b82f6'] }] }, options: { responsive: true, maintainAspectRatio: false } }); const tipoAtendimentoGeralChart = new Chart(document.getElementById('tipoAtendimentoGeralChart'), { type: 'doughnut', data: { labels: ['Individual', 'Grupo'], datasets: [{ data: dataTipoAtendimentoGeral, backgroundColor: ['#8b5cf6', '#f59e0b'] }] }, options: { responsive: true, maintainAspectRatio: false, cutout: '60%' } }); setTimeout(() => { [mensalChart, publicoAlvoChart, tipoAtendimentoChart, formaAtendimentoChart, tipoAtendimentoGeralChart].forEach(animateChart); document.getElementById('exportBtn').addEventListener('click', () => window.print()); document.querySelectorAll('.chart-container, .kpi-card').forEach(el => el.classList.add('loading-complete')); }, 1500); </script> </p>Wed, 22 Oct 2025 16:33:00 GMThttps://observatorio.iases.es.gov.br:443/Not%C3%ADcia/atendimentos-tecnicos-2024-estatisticas-geraishttps://observatorio.iases.es.gov.br:443/Not%C3%ADcia/a-cor-da-socioeducacao-no-espirito-santo<p></p> <p> <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0"></script> </p> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap'); * { box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background-color: #f0f4f8; margin: 0; padding: 0; min-height: 100vh; overflow-x: hidden; } .container { max-width: 1200px; margin: 0 auto; padding: 1.5rem; width: 100%; } .chart-card { background-color: white; border-radius: 1.5rem; padding: 1.5rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; } @media (min-width: 768px) { .chart-card { padding: 2rem; } } .chart-card:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .kpi-card { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); color: white; } .kpi-card-alt { background: linear-gradient(135deg, #10b981 0%, #14b8a6 100%); color: white; } .main-kpi-card { background: linear-gradient(135deg, #1e293b 0%, #334155 100%); color: white; } .comparison-card { background: linear-gradient(135deg, #334155 0%, #52525b 100%); color: white; } .kpi-value { font-size: 3rem; font-weight: 800; } @media (min-width: 768px) { .kpi-value { font-size: 3.5rem; } } .section-title { font-size: 1.75rem; font-weight: 700; color: #1e293b; margin-bottom: 1.5rem; text-align: center; } @media (min-width: 768px) { .section-title { font-size: 2rem; } } /* Animações de entrada */ .fade-in-up { opacity: 0; transform: translateY(20px); animation: fadeInUp 0.8s ease-out forwards; } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } } .delay-100 { animation-delay: 0.1s; } .delay-200 { animation-delay: 0.2s; } .delay-300 { animation-delay: 0.3s; } .delay-400 { animation-delay: 0.4s; } .delay-500 { animation-delay: 0.5s; } /* Garantir que os gráficos não estiquem */ canvas { display: block; max-width: 100%; height: auto !important; } /* Responsividade melhorada */ @media (max-width: 768px) { .container { padding: 1rem; } .chart-card { padding: 1rem; } .kpi-value { font-size: 2.5rem; } .section-title { font-size: 1.5rem; } } </style> <div class="container"><!-- Cabeçalho --><header class="text-center mb-12 fade-in-up"> <h1 class="text-4xl md:text-5xl font-extrabold text-slate-800 tracking-tight">A Cor da Socioeduca&ccedil;&atilde;o no Esp&iacute;rito Santo</h1> <p class="mt-4 text-lg text-slate-600">An&aacute;lise das disparidades raciais no sistema socioeducativo (IASES) de 2014 a 2023</p> </header><!-- SEÇÃO DE CARDS ADICIONADA --> <section class="mb-12"> <div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8"> <div class="chart-card main-kpi-card text-center fade-in-up delay-100"> <h4 class="text-xl font-semibold mb-2 text-slate-300">Total de Entradas</h4> <p class="kpi-value animate-number" data-target="17348">0</p> <p class="opacity-80">no sistema (2014-2023)</p> </div> <div class="chart-card main-kpi-card text-center fade-in-up delay-200"> <h4 class="text-xl font-semibold mb-2 text-slate-300">Entradas de Pardos no Sistema</h4> <p class="kpi-value animate-number" data-target="14816">0</p> <p class="opacity-80">representando 85,4% do total</p> </div> <div class="chart-card main-kpi-card text-center fade-in-up delay-300"> <h4 class="text-xl font-semibold mb-2 text-slate-300">Pardos na Popula&ccedil;&atilde;o Jovem</h4> <p class="kpi-value animate-number" data-target="55" data-suffix="%">0%</p> <p class="opacity-80">na faixa de 12 a 21 anos no ES</p> </div> </div> </section> <!-- Seção Principal: A Grande Disparidade --> <section class="mb-12"> <h2 class="section-title fade-in-up">A Disparidade Racial em N&uacute;meros</h2> <div class="chart-card fade-in-up delay-100"> <h3 class="text-xl font-bold text-center mb-6">Comparativo: Popula&ccedil;&atilde;o Jovem (ES) vs. Entradas no IASES (%)</h3> <div class="h-96 w-full"><canvas id="disparityChart"></canvas></div> <p class="text-center mt-4 text-gray-600">Os dados mostram uma sobrerrepresenta&ccedil;&atilde;o massiva de jovens pardos e uma sub-representa&ccedil;&atilde;o acentuada de jovens brancos no sistema socioeducativo em rela&ccedil;&atilde;o &agrave; sua propor&ccedil;&atilde;o na popula&ccedil;&atilde;o geral do Esp&iacute;rito Santo.</p> </div> </section> <!-- Seção 2: ISocio --> <section class="mb-12"> <h2 class="section-title fade-in-up">&Iacute;ndice de Incid&ecirc;ncia Socioeducativa (ISocio)</h2> <p class="text-center text-slate-600 mb-8 max-w-3xl mx-auto fade-in-up">O &iacute;ndice mede quantas vezes mais um jovem de determinada cor/ra&ccedil;a tem chance de entrar no sistema em compara&ccedil;&atilde;o com um jovem branco.</p> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8"> <div class="chart-card kpi-card text-center fade-in-up delay-100"> <h4 class="text-xl font-semibold mb-2">Pardos</h4> <p class="kpi-value animate-number" data-target="11.8" data-decimals="1" data-suffix="x">0.0x</p> <p class="opacity-80">mais chances de entrar no IASES</p> </div> <div class="chart-card kpi-card-alt text-center fade-in-up delay-200"> <h4 class="text-xl font-semibold mb-2">Amarelos</h4> <p class="kpi-value animate-number" data-target="10.4" data-decimals="1" data-suffix="x">0.0x</p> <p class="opacity-80">mais chances de entrar no IASES</p> </div> <div class="chart-card kpi-card text-center fade-in-up delay-300"> <h4 class="text-xl font-semibold mb-2">Pretos</h4> <p class="kpi-value animate-number" data-target="6.8" data-decimals="1" data-suffix="x">0.0x</p> <p class="opacity-80">mais chances de entrar no IASES</p> </div> <div class="chart-card kpi-card-alt text-center fade-in-up delay-400"> <h4 class="text-xl font-semibold mb-2">Ind&iacute;genas</h4> <p class="kpi-value animate-number" data-target="1.3" data-decimals="1" data-suffix="x">0.0x</p> <p class="opacity-80">mais chances de entrar no IASES</p> </div> </div> </section> <section class="mb-12"> <h2 class="section-title fade-in-up">Distribui&ccedil;&atilde;o Geogr&aacute;fica e Et&aacute;ria</h2> <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> <div class="chart-card fade-in-up delay-100"> <h3 class="text-xl font-bold text-center mb-6">Concentra&ccedil;&atilde;o de Entradas por Macrorregi&atilde;o</h3> <div class="h-80 w-full flex items-center justify-center"><canvas id="regionChart"></canvas></div> <p class="text-center mt-4 text-gray-600">A Macrorregi&atilde;o Metropolitana concentra 65% de todas as entradas no sistema, sendo o principal foco geogr&aacute;fico do fen&ocirc;meno.</p> </div> <div class="chart-card fade-in-up delay-200"> <h3 class="text-xl font-bold text-center mb-6">Distribui&ccedil;&atilde;o das Entradas por Faixa Et&aacute;ria</h3> <div class="h-80 w-full"><canvas id="ageChart"></canvas></div> <p class="text-center mt-4 text-gray-600">A grande maioria das entradas (74%) ocorre na faixa dos 15 aos 17 anos, um per&iacute;odo cr&iacute;tico para a evas&atilde;o escolar e vulnerabilidade social.</p> </div> </div> </section> <section class="mb-12"> <h2 class="section-title fade-in-up">Vulnerabilidades Interligadas</h2> <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"><!-- NOVA SEÇÃO GRÁFICA DE REINCIDÊNCIA --> <div class="chart-card fade-in-up delay-100"> <h3 class="text-xl font-bold text-center mb-6">Taxa de Reentrada (Reincid&ecirc;ncia)</h3> <p class="text-center text-slate-600 mb-8 max-w-2xl mx-auto -mt-4">A reincid&ecirc;ncia &eacute; mais alta entre jovens pretos e ind&iacute;genas, indicando desafios na reintegra&ccedil;&atilde;o social.</p> <div class="grid grid-cols-1 sm:grid-cols-2 gap-6"><!-- Card Indígenas --> <div class="p-4 rounded-xl bg-slate-50 border border-slate-200"> <h4 class="font-bold text-md text-slate-700">Ind&iacute;genas</h4> <div class="flex items-center gap-3 mt-2"> <div class="text-4xl font-extrabold text-red-500 animate-number" data-target="80" data-suffix="%">0%</div> <div class="flex flex-wrap gap-1 flex-1" id="indigenous-icons"></div> </div> </div> <!-- Card Pretos --> <div class="p-4 rounded-xl bg-slate-50 border border-slate-200"> <h4 class="font-bold text-md text-slate-700">Pretos</h4> <div class="flex items-center gap-3 mt-2"> <div class="text-4xl font-extrabold text-indigo-500 animate-number" data-target="46" data-suffix="%">0%</div> <div class="flex flex-wrap gap-1 flex-1" id="black-icons"></div> </div> </div> <!-- Card Brancos --> <div class="p-4 rounded-xl bg-slate-50 border border-slate-200"> <h4 class="font-bold text-md text-slate-700">Brancos</h4> <div class="flex items-center gap-3 mt-2"> <div class="text-4xl font-extrabold text-pink-500 animate-number" data-target="41" data-suffix="%">0%</div> <div class="flex flex-wrap gap-1 flex-1" id="white-icons"></div> </div> </div> <!-- Card Pardos --> <div class="p-4 rounded-xl bg-slate-50 border border-slate-200"> <h4 class="font-bold text-md text-slate-700">Pardos</h4> <div class="flex items-center gap-3 mt-2"> <div class="text-4xl font-extrabold text-amber-500 animate-number" data-target="38" data-suffix="%">0%</div> <div class="flex flex-wrap gap-1 flex-1" id="brown-icons"></div> </div> </div> </div> </div> <!-- GRÁFICO DE ESCOLARIDADE --> <div class="chart-card fade-in-up delay-200"> <h3 class="text-xl font-bold text-center mb-6">Atraso Escolar: % que N&atilde;o Chegou ao Ensino M&eacute;dio</h3> <div class="h-80 w-full"><canvas id="educationChart"></canvas></div> <p class="text-center mt-4 text-gray-600">O atraso escolar &eacute; um fator cr&iacute;tico. A grande maioria dos jovens entra no sistema sem ter alcan&ccedil;ado o Ensino M&eacute;dio, com destaque para pretos e pardos.</p> </div> </div> </section> <!-- SEÇÃO AJUSTADA --> <section class="mb-12"> <h2 class="section-title fade-in-up">Evolu&ccedil;&atilde;o e Sexo Atribu&iacute;do ao Nascer</h2> <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> <div class="chart-card fade-in-up delay-100"> <h3 class="text-xl font-bold text-center mb-6">Propor&ccedil;&atilde;o de Entradas de Pardos e Pretos (2014-2023)</h3> <div class="h-96 w-full"><canvas id="evolutionChart"></canvas></div> </div> <!-- CARD VISUAL DE SEXO --> <div class="chart-card flex flex-col fade-in-up delay-200"> <h3 class="text-xl font-bold text-center mb-6">Disparidade de Sexo: % de Jovens Pretos</h3> <p class="text-center text-slate-600 mb-8 max-w-2xl mx-auto -mt-4">Proporcionalmente, a representa&ccedil;&atilde;o de jovens pretas &eacute; o dobro entre as meninas em compara&ccedil;&atilde;o com os meninos.</p> <div class="space-y-6 flex-1 flex flex-col justify-center"><!-- Card Meninas --> <div class="p-4 rounded-xl bg-slate-50 border border-slate-200"> <h4 class="font-bold text-lg text-slate-700">Meninas</h4> <div class="flex items-center gap-4 mt-2"> <div class="text-5xl font-extrabold text-pink-500 animate-number" data-target="20" data-suffix="%">0%</div> <div class="flex flex-wrap gap-2 flex-1 justify-center" id="girls-icons"></div> </div> </div> <!-- Card Meninos --> <div class="p-4 rounded-xl bg-slate-50 border border-slate-200"> <h4 class="font-bold text-lg text-slate-700">Meninos</h4> <div class="flex items-center gap-4 mt-2"> <div class="text-5xl font-extrabold text-blue-500 animate-number" data-target="10" data-suffix="%">0%</div> <div class="flex flex-wrap gap-2 flex-1 justify-center" id="boys-icons"></div> </div> </div> </div> </div> </div> </section> <!-- SEÇÃO DE COMPARAÇÃO NACIONAL --> <section class="mb-12"> <h2 class="section-title fade-in-up">Contexto Nacional: Um Fen&ocirc;meno Brasileiro</h2> <p class="text-center text-slate-600 mb-8 max-w-3xl mx-auto fade-in-up">A sobrerrepresenta&ccedil;&atilde;o de jovens Pretos e pardos n&atilde;o &eacute; uma exclusividade do Esp&iacute;rito Santo, mas um padr&atilde;o que se repete em todo o pa&iacute;s.</p> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> <div class="chart-card comparison-card text-center fade-in-up delay-100"> <h4 class="text-2xl font-bold mb-2">Bahia</h4> <p class="text-6xl font-extrabold text-teal-300">&gt;90%</p> <p class="opacity-80 mt-2">dos adolescentes internados s&atilde;o pretos ou pardos.</p> </div> <div class="chart-card comparison-card text-center fade-in-up delay-200"> <h4 class="text-2xl font-bold mb-2">Esp&iacute;rito Santo</h4> <p class="text-6xl font-extrabold text-teal-300">~95%</p> <p class="opacity-80 mt-2">dos adolescentes internados s&atilde;o pretos ou pardos.</p> </div> <div class="chart-card comparison-card text-center fade-in-up delay-300"> <h4 class="text-2xl font-bold mb-2">S&atilde;o Paulo</h4> <p class="text-6xl font-extrabold text-teal-300">~69%</p> <p class="opacity-80 mt-2">dos adolescentes internados s&atilde;o pretos ou pardos.</p> </div> <div class="chart-card comparison-card text-center fade-in-up delay-400"> <h4 class="text-2xl font-bold mb-2">Rio de Janeiro</h4> <p class="text-6xl font-extrabold text-teal-300">~65%</p> <p class="opacity-80 mt-2">dos adolescentes internados s&atilde;o pretos ou pardos.</p> </div> </div> </section> <footer class="text-center py-8 fade-in-up"> <h6 class="text-slate-500">Fonte: Dados compilados do caderno "A Cor da Socioeduca&ccedil;&atilde;o" (IASES, 2024) e resumo anal&iacute;tico.</h6> <p class="text-sm text-slate-500 mt-2">~ (Til): Significa "Aproximadamente" ou "Cerca de" e &gt; (Sinal de Maior): Significa "Mais de" ou "Maior que".</p> </footer></div> <p> <script> document.addEventListener("DOMContentLoaded", () => { // Criar ícones SVG dinamicamente function createIcons(containerId, count, colorClass) { const container = document.getElementById(containerId); if (!container) return; for(let i = 0; i < 10; i++) { const color = i < count ? colorClass : 'text-slate-300'; const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); svg.setAttribute('class', `w-5 h-5 ${color}`); svg.setAttribute('fill', 'currentColor'); svg.setAttribute('viewBox', '0 0 20 20'); const path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); path.setAttribute('fill-rule', 'evenodd'); path.setAttribute('d', 'M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z'); path.setAttribute('clip-rule', 'evenodd'); svg.appendChild(path); container.appendChild(svg); } } // Criar todos os ícones createIcons('indigenous-icons', 8, 'text-red-500'); createIcons('black-icons', 5, 'text-indigo-500'); createIcons('white-icons', 4, 'text-pink-500'); createIcons('brown-icons', 4, 'text-amber-500'); createIcons('girls-icons', 2, 'text-pink-500'); createIcons('boys-icons', 1, 'text-blue-500'); // --- ANIMAÇÃO DOS NÚMEROS --- const animateOnScroll = (entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { const el = entry.target; const target = parseFloat(el.dataset.target); const duration = 1500; const decimals = parseInt(el.dataset.decimals) || 0; const suffix = el.dataset.suffix || ''; let start = 0; const startTime = performance.now(); const animate = (currentTime) => { const elapsedTime = currentTime - startTime; const progress = Math.min(elapsedTime / duration, 1); const current = start + progress * (target - start); const formattedNumber = new Intl.NumberFormat('pt-BR', { minimumFractionDigits: decimals, maximumFractionDigits: decimals }).format(current); el.textContent = formattedNumber + suffix; if (progress < 1) { requestAnimationFrame(animate); } else { // Garante que o valor final seja exato el.textContent = new Intl.NumberFormat('pt-BR', { minimumFractionDigits: decimals, maximumFractionDigits: decimals }).format(target) + suffix; } }; requestAnimationFrame(animate); observer.unobserve(el); } }); }; const observer = new IntersectionObserver(animateOnScroll, { threshold: 0.5 }); document.querySelectorAll('.animate-number').forEach(el => { observer.observe(el); }); // --- CONFIGURAÇÕES GERAIS DOS GRÁFICOS --- Chart.register(ChartDataLabels); Chart.defaults.font.family = 'Inter'; Chart.defaults.responsive = true; Chart.defaults.maintainAspectRatio = false; Chart.defaults.plugins.legend.position = 'bottom'; Chart.defaults.plugins.tooltip.boxPadding = 4; Chart.defaults.plugins.tooltip.titleFont = { size: 14, weight: 'bold' }; Chart.defaults.plugins.tooltip.bodyFont = { size: 12 }; Chart.defaults.animation.duration = 1500; Chart.defaults.animation.easing = 'easeOutExpo'; Chart.defaults.plugins.datalabels.display = false; const colors = { blue: 'rgba(59, 130, 246, 0.8)', red: 'rgba(239, 68, 68, 0.8)', teal: 'rgba(20, 184, 166, 0.8)', indigo: 'rgba(79, 70, 229, 0.8)', pink: 'rgba(219, 39, 119, 0.8)', amber: 'rgba(245, 158, 11, 0.8)', green: 'rgba(16, 185, 129, 0.8)' }; // --- GRÁFICOS --- const disparityCtx = document.getElementById('disparityChart').getContext('2d'); new Chart(disparityCtx, { type: 'bar', data: { labels: ['Pardos', 'Brancos', 'Pretos'], datasets: [{ label: 'População Jovem no ES (%)', data: [55.01, 33.37, 11.18], backgroundColor: colors.blue, }, { label: 'Entradas no IASES (%)', data: [85.4, 4.4, 10.0], backgroundColor: colors.red, }] }, options: { plugins: { datalabels: { display: true, color: 'white', anchor: 'end', align: 'end', font: { weight: 'bold', size: 12 }, offset: -6, formatter: (value) => value.toFixed(1).replace('.', ',') + '%' } }, scales: { y: { beginAtZero: true, max: 100, ticks: { callback: value => value + '%' } } } } }); const regionCtx = document.getElementById('regionChart').getContext('2d'); new Chart(regionCtx, { type: 'doughnut', data: { labels: ['Metropolitana', 'Central', 'Sul', 'Norte'], datasets: [{ label: '% de Entradas', data: [65.1, 15.3, 11.0, 8.6], backgroundColor: [colors.indigo, colors.amber, colors.teal, colors.pink], borderColor: '#fff', borderWidth: 4, }] }, options: { plugins: { legend: { position: 'right' } } } }); const ageCtx = document.getElementById('ageChart').getContext('2d'); new Chart(ageCtx, { type: 'bar', data: { labels: ['12-14 anos', '15-17 anos', '18-20 anos'], datasets: [{ label: 'Número de Entradas', data: [1855, 12816, 2677], backgroundColor: [colors.teal, colors.indigo, colors.amber], }] }, options: { plugins: { legend: { display: false }, datalabels: { display: true, color: 'white', anchor: 'end', align: 'end', font: { weight: 'bold', size: 12 }, offset: -6, formatter: (value) => new Intl.NumberFormat('pt-BR').format(value) } }, scales: { y: { beginAtZero: true } } } }); const educationCtx = document.getElementById('educationChart').getContext('2d'); new Chart(educationCtx, { type: 'bar', data: { labels: ['Pretos', 'Pardos', 'Brancos'], datasets: [{ label: '% que não alcançou o Ensino Médio', data: [91.4, 90.7, 86.1], backgroundColor: [colors.indigo, colors.amber, colors.blue], }] }, options: { plugins: { legend: { display: false }, datalabels: { display: true, color: 'white', anchor: 'end', align: 'end', font: { weight: 'bold', size: 12 }, offset: -6, formatter: (value) => value.toFixed(1).replace('.', ',') + '%' } }, scales: { y: { beginAtZero: true, max: 100, ticks: { callback: value => value + '%' } } } } }); const evolutionCtx = document.getElementById('evolutionChart').getContext('2d'); new Chart(evolutionCtx, { type: 'line', data: { labels: ['2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023'], datasets: [{ label: 'Pardos (%)', data: [86.8, 85.8, 84.8, 84.5, 85.8, 90.8, 83.9, 81.5, 84.3, 81.5], borderColor: colors.indigo.replace('0.8','1'), backgroundColor: colors.indigo, fill: true, tension: 0.3 }, { label: 'Pretos (%)', data: [8.8, 9.9, 10.3, 10.4, 9.6, 6.3, 10.9, 13.0, 11.7, 12.5], borderColor: colors.teal.replace('0.8','1'), backgroundColor: colors.teal, fill: true, tension: 0.3 }] }, options: { scales: { y: { beginAtZero: false, ticks: { callback: value => value + '%' } } } } }); }); </script> </p>Sat, 11 Oct 2025 23:44:00 GMThttps://observatorio.iases.es.gov.br:443/Not%C3%ADcia/a-cor-da-socioeducacao-no-espirito-santohttps://observatorio.iases.es.gov.br:443/Not%C3%ADcia/decretacao-mse-de-internacao-em-2024<p></p> <!-- Chart.js --> <p> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> </p> <!-- Font Awesome CORRETO --> <p></p> <style> :root { --primary: #4361ee; --secondary: #3a0ca3; --accent: #f72585; --success: #4cc9f0; --light: #f8f9fa; --dark: #212529; --gray: #6c757d; --card-bg: #ffffff; --male-color: #4361ee; --female-color: #f72585; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background: transparent; color: var(--dark); line-height: 1.6; min-height: 100vh; display: flex; justify-content: center; align-items: flex-start; padding: 25px; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; } .page-container { width: 100%; max-width: 1300px; } .main-container { width: 100%; background: transparent; border-radius: 20px; padding: 30px; color: var(--dark); } header { text-align: center; margin-bottom: 25px; padding: 25px; background: var(--card-bg); border-radius: 16px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); position: relative; overflow: hidden; } header::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--primary), var(--accent)); } h1 { color: var(--secondary); font-size: 3.2rem !important; margin-bottom: 15px; font-weight: 800; line-height: 1.2; } .subtitle { color: var(--gray); font-size: 1.6rem !important; font-weight: 400; line-height: 1.4; } .stats-highlight { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 25px; } .stat-card { background: var(--card-bg); border-radius: 14px; padding: 22px 15px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07); text-align: center; transition: all 0.3s ease; position: relative; overflow: hidden; } .stat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12); } .stat-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--primary), var(--accent)); } .stat-value { font-size: 2.8rem !important; font-weight: 800; color: var(--primary); margin: 12px 0; } .stat-label { font-size: 1.3rem !important; color: var(--gray); font-weight: 500; } .dashboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); gap: 25px; margin-bottom: 25px; } .full-width-section { display: flex; flex-direction: column; gap: 25px; margin-bottom: 25px; } .card { background: var(--card-bg); border-radius: 16px; padding: 25px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; } .full-width-card { width: 100%; } .card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12); } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .card-title { font-size: 1.8rem !important; font-weight: 700; color: var(--secondary); } .card-icon { width: 55px; height: 55px; border-radius: 10px; background: linear-gradient(135deg, var(--primary), var(--secondary)); display: flex; align-items: center; justify-content: center; color: white; box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3); font-size: 1.5rem !important; } /* GARANTIR que os ícones apareçam */ .card-icon i, .gender-icon i { font-size: inherit !important; display: block !important; line-height: 1 !important; } .chart-container { position: relative; height: 220px; width: 100%; } .tall-chart-container { height: 280px; } .age-chart-container { height: 200px !important; } .gender-distribution { display: flex; flex-direction: column; align-items: center; gap: 20px; } .gender-cards { display: flex; justify-content: center; gap: 20px; width: 100%; } .gender-card { flex: 1; background: var(--card-bg); border-radius: 16px; padding: 25px 20px; text-align: center; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07); transition: all 0.3s ease; position: relative; overflow: hidden; } .gender-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12); } .gender-card.male::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--male-color); } .gender-card.female::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--female-color); } .gender-icon { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px; font-size: 32px !important; color: white; } .male-icon { background: linear-gradient(135deg, var(--male-color), #3a0ca3); box-shadow: 0 4px 12px rgba(67, 97, 238, 0.4); } .female-icon { background: linear-gradient(135deg, var(--female-color), #b5179e); box-shadow: 0 4px 12px rgba(247, 37, 133, 0.4); } .gender-percentage { font-size: 3.2rem !important; font-weight: 800; margin: 12px 0; } .male-percentage { color: var(--male-color) !important; } .female-percentage { color: var(--female-color) !important; } .gender-label { font-size: 1.5rem !important; color: var(--gray); font-weight: 500; margin-bottom: 8px; } .gender-count { font-size: 1.3rem !important; color: var(--dark); font-weight: 600; background: rgba(0, 0, 0, 0.03); padding: 8px 15px; border-radius: 16px; display: inline-block; } .comparison-container { display: flex; justify-content: space-between; margin-top: 15px; } .year-comparison { text-align: center; flex: 1; } .year-label { font-size: 1.4rem !important; font-weight: 600; color: var(--gray); } .year-value { font-size: 2.6rem !important; font-weight: 800; margin: 8px 0; } .year-2023 { color: var(--accent) !important; } .year-2024 { color: var(--success) !important; } .percentage { font-size: 1.2rem !important; color: var(--gray); padding: 5px 12px; border-radius: 16px; background: rgba(0, 0, 0, 0.03); display: inline-block; font-weight: 600; } .observation { margin-top: 18px; padding: 18px; background: rgba(67, 97, 238, 0.05); border-radius: 12px; font-size: 1.2rem !important; color: var(--dark); border-left: 4px solid var(--primary); line-height: 1.5; } .observation strong { color: var(--secondary); font-size: 1.3rem !important; } footer { text-align: center; padding: 20px; color: var(--gray); font-size: 1rem !important; margin-top: 15px; } /* Fallback para caso os ícones não carreguem */ .no-fa .card-icon::before, .no-fa .gender-icon::before { content: "⚡"; font-family: Arial !important; } .no-fa .fa-venus-mars::before { content: "⚧"; } .no-fa .fa-globe-americas::before { content: "🌎"; } .no-fa .fa-chart-line::before { content: "📈"; } .no-fa .fa-user-friends::before { content: "👥"; } .no-fa .fa-mars::before { content: "♂"; } .no-fa .fa-venus::before { content: "♀"; } @media (max-width: 768px) { body { padding: 15px; } .main-container { padding: 20px; } .dashboard { grid-template-columns: 1fr; } .gender-cards { flex-direction: column; } h1 { font-size: 2.4rem !important; } .card-title { font-size: 1.5rem !important; } .subtitle { font-size: 1.3rem !important; } .observation { font-size: 1.1rem !important; } } </style> <div class="page-container"> <div class="main-container"><header> <h1>Decreta&ccedil;&otilde;es de Interna&ccedil;&atilde;o 2024</h1> <p class="subtitle">An&aacute;lise detalhada por sexo, cor/ra&ccedil;a, idade e compara&ccedil;&atilde;o anual</p> </header> <div class="stats-highlight"> <div class="stat-card"> <div class="stat-value" data-target="439" data-format="integer">0</div> <div class="stat-label">Total de Decreta&ccedil;&otilde;es</div> </div> <div class="stat-card"> <div class="stat-value" data-target="95.7" data-format="percentage">0%</div> <div class="stat-label">Sexo Masculino</div> </div> <div class="stat-card"> <div class="stat-value" data-target="92.5" data-format="percentage">0%</div> <div class="stat-label">Pardos e Pretos</div> </div> <div class="stat-card"> <div class="stat-value" data-target="12.3" data-format="percentage">0%</div> <div class="stat-label">Crescimento vs 2023</div> </div> </div> <div class="dashboard"> <div class="card"> <div class="card-header"> <h2 class="card-title">Distribui&ccedil;&atilde;o por Sexo</h2> <div class="card-icon"><i class="fas fa-venus-mars"></i></div> </div> <div class="gender-distribution"> <div class="gender-cards"> <div class="gender-card male"> <div class="gender-icon male-icon"><i class="fas fa-mars"></i></div> <div class="gender-percentage male-percentage" data-target="95.7" data-format="percentage">0%</div> <div class="gender-label">Masculino</div> <div class="gender-count" data-target="420" data-format="integer">0</div> </div> <div class="gender-card female"> <div class="gender-icon female-icon"><i class="fas fa-venus"></i></div> <div class="gender-percentage female-percentage" data-target="4.3" data-format="percentage">0%</div> <div class="gender-label">Feminino</div> <div class="gender-count" data-target="19" data-format="integer">0</div> </div> </div> </div> <div class="observation"><strong>Observa&ccedil;&atilde;o:</strong> Disparidade significativa de g&ecirc;nero, com adolescentes do sexo masculino representando mais de 95% das interna&ccedil;&otilde;es.</div> </div> <div class="card"> <div class="card-header"> <h2 class="card-title">Distribui&ccedil;&atilde;o por Cor/Ra&ccedil;a</h2> <div class="card-icon"><i class="fas fa-globe-americas"></i></div> </div> <div class="chart-container"><canvas id="raceChart"></canvas></div> <div class="observation"><strong>Observa&ccedil;&atilde;o:</strong> Forte sobrerrepresenta&ccedil;&atilde;o de jovens pardos e pretos, que juntos comp&otilde;em 92.5% do total de decreta&ccedil;&otilde;es.</div> </div> </div> <div class="full-width-section"> <div class="card full-width-card"> <div class="card-header"> <h2 class="card-title">Comparativo 2023 vs 2024</h2> <div class="card-icon"><i class="fas fa-chart-line"></i></div> </div> <div class="chart-container tall-chart-container"><canvas id="comparisonChart"></canvas></div> <div class="comparison-container"> <div class="year-comparison"> <div class="year-label">2023</div> <div class="year-value year-2023" data-target="391" data-format="integer">0</div> <div class="percentage">Total</div> </div> <div class="year-comparison"> <div class="year-label">2024</div> <div class="year-value year-2024" data-target="439" data-format="integer">0</div> <div class="percentage">+<span data-target="12.3" data-format="percentage">0</span>%</div> </div> </div> <div class="observation"><strong>Observa&ccedil;&atilde;o:</strong> Aumento de 12.3% no volume total de interna&ccedil;&otilde;es em rela&ccedil;&atilde;o a 2023, com destaque para os meses de Dezembro, Agosto e Julho.</div> </div> <div class="card full-width-card"> <div class="card-header"> <h2 class="card-title">Distribui&ccedil;&atilde;o por Idade</h2> <div class="card-icon"><i class="fas fa-user-friends"></i></div> </div> <div class="chart-container age-chart-container"><canvas id="ageChart"></canvas></div> <div class="observation"><strong>Observa&ccedil;&atilde;o:</strong> Concentra&ccedil;&atilde;o nas idades de 16 e 17 anos (62% dos casos), pr&oacute;ximos da maioridade penal. Apenas 6.4% t&ecirc;m 14 anos ou menos.</div> </div> </div> <footer> <p>Fonte: Dados de Decreta&ccedil;&otilde;es de MSE de Interna&ccedil;&atilde;o em 2024 | An&aacute;lise realizada com base nos dados fornecidos</p> <p>| Sexo Atribu&iacute;do ao Nascer&nbsp;|</p> </footer></div> </div> <p> <script> // Verificar se Font Awesome carregou setTimeout(function() { const icons = document.querySelectorAll('.fa'); if (icons.length === 0 || getComputedStyle(icons[0]).fontFamily.indexOf('Font Awesome') === -1) { document.body.classList.add('no-fa'); console.log('Font Awesome não carregou - usando fallback'); } }, 1000); // Função para animar números - CORRIGIDA para preservar o símbolo % function animateNumber(element, target, duration = 2000) { const start = parseFloat(element.textContent) || 0; const increment = (target - start) / (duration / 16); let current = start; const timer = setInterval(() => { current += increment; if ((increment > 0 && current >= target) || (increment < 0 && current <= target)) { clearInterval(timer); current = target; // Formatar o valor final baseado no data-format const format = element.getAttribute('data-format'); if (format === 'integer') { element.textContent = Math.round(current); } else if (format === 'percentage') { element.textContent = current.toFixed(1) + '%'; } else { element.textContent = Math.round(current); } return; } // Durante a animação const format = element.getAttribute('data-format'); if (format === 'integer') { element.textContent = Math.round(current); } else if (format === 'percentage') { element.textContent = current.toFixed(1) + '%'; } else { element.textContent = Math.round(current); } }, 16); } // Animação para todos os elementos com data-target function startAllAnimations() { const animatedElements = document.querySelectorAll('[data-target]'); animatedElements.forEach(element => { const target = parseFloat(element.getAttribute('data-target')); animateNumber(element, target); }); } // Configuração dos gráficos com animações document.addEventListener('DOMContentLoaded', function() { // Iniciar animações dos números setTimeout(startAllAnimations, 500); // Gráfico de Cor/Raça const raceCtx = document.getElementById('raceChart').getContext('2d'); const raceChart = new Chart(raceCtx, { type: 'bar', data: { labels: ['Parda', 'Preta', 'Branca', 'Amarela', 'Indígena'], datasets: [{ data: [352, 54, 31, 2, 0], backgroundColor: [ 'rgba(67, 97, 238, 0.8)', 'rgba(58, 12, 163, 0.8)', 'rgba(76, 201, 240, 0.8)', 'rgba(247, 37, 133, 0.8)', 'rgba(108, 117, 125, 0.8)' ], borderWidth: 1, borderRadius: 4 }] }, options: { responsive: true, maintainAspectRatio: false, indexAxis: 'y', animation: { duration: 2000, easing: 'easeOutQuart' }, plugins: { legend: { display: false }, tooltip: { enabled: true } }, scales: { x: { beginAtZero: true, ticks: { font: { size: 14, weight: '600' } } }, y: { ticks: { font: { size: 14, weight: '600' } } } } } }); // Adicionar valores nas barras do gráfico de cor/raça - COR ESCURA raceChart.options.animation.onComplete = function() { const ctx = raceChart.ctx; raceChart.data.datasets.forEach((dataset, i) => { const meta = raceChart.getDatasetMeta(i); if (!meta.hidden) { meta.data.forEach((element, index) => { const value = dataset.data[index]; if (value > 0) { ctx.fillStyle = '#1a1d28'; // Cor escura para contraste ctx.font = 'bold 14px Segoe UI'; ctx.textAlign = 'left'; ctx.textBaseline = 'middle'; const padding = 10; const position = element.tooltipPosition(); ctx.fillText(value, position.x + padding, position.y); } }); } }); }; // Gráfico de Idade const ageCtx = document.getElementById('ageChart').getContext('2d'); new Chart(ageCtx, { type: 'line', data: { labels: ['12', '13', '14', '15', '16', '17', '18', '19', '20', '21'], datasets: [{ data: [0, 7, 21, 67, 135, 136, 44, 23, 6, 0], backgroundColor: 'rgba(67, 97, 238, 0.1)', borderColor: '#4361ee', borderWidth: 3, tension: 0.4, fill: true, pointBackgroundColor: '#4361ee', pointBorderColor: '#ffffff', pointBorderWidth: 2, pointRadius: 4, pointHoverRadius: 6 }] }, options: { responsive: true, maintainAspectRatio: false, animation: { duration: 2000, easing: 'easeOutQuart' }, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, ticks: { font: { size: 14, weight: '600' } } }, x: { ticks: { font: { size: 14, weight: '600' } } } } } }); // Gráfico de Comparação const comparisonCtx = document.getElementById('comparisonChart').getContext('2d'); const comparisonChart = new Chart(comparisonCtx, { type: 'bar', data: { labels: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'], datasets: [ { label: '2023', data: [16, 23, 49, 33, 19, 33, 30, 41, 45, 30, 40, 32], backgroundColor: 'rgba(247, 37, 133, 0.7)', borderRadius: 4 }, { label: '2024', data: [30, 32, 31, 26, 32, 29, 44, 49, 36, 44, 32, 54], backgroundColor: 'rgba(76, 201, 240, 0.7)', borderRadius: 4 } ] }, options: { responsive: true, maintainAspectRatio: false, animation: { duration: 2000, easing: 'easeOutQuart' }, plugins: { legend: { labels: { font: { size: 16, weight: '600' } } } }, scales: { y: { beginAtZero: true, ticks: { font: { size: 14, weight: '600' } } }, x: { ticks: { font: { size: 14, weight: '600' } } } } } }); // Adicionar valores nas barras do gráfico de comparação - COR ESCURA comparisonChart.options.animation.onComplete = function() { const ctx = comparisonChart.ctx; comparisonChart.data.datasets.forEach((dataset, i) => { const meta = comparisonChart.getDatasetMeta(i); if (!meta.hidden) { meta.data.forEach((element, index) => { const value = dataset.data[index]; if (value > 0) { ctx.fillStyle = '#1a1d28'; // Cor escura para contraste ctx.font = 'bold 12px Segoe UI'; ctx.textAlign = 'center'; ctx.textBaseline = 'bottom'; const position = element.tooltipPosition(); ctx.fillText(value, position.x, position.y - 5); } }); } }); }; }); </script> </p>Fri, 10 Oct 2025 19:17:00 GMThttps://observatorio.iases.es.gov.br:443/Not%C3%ADcia/decretacao-mse-de-internacao-em-2024https://observatorio.iases.es.gov.br:443/Not%C3%ADcia/entradas-no-iases-no-ano-de-2024<p></p> <p> <script src="https://cdn.tailwindcss.com"></script> </p> <p></p> <style> body { font-family: 'Inter', sans-serif; background-color: #f0f4f8; } .container { max-width: 1200px; margin: 0 auto; padding: 1.5rem; } .card { background-color: white; border-radius: 12px; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); padding: 24px; height: 100%; display: flex; flex-direction: column; } .bar-grow { width: 0%; transition: width 1.5s ease-out; } .bar-grow-vertical { height: 0%; transition: height 1.5s ease-out; } .fade-in-up { opacity: 0; transform: translateY(20px); animation: fadeInUp 0.8s ease-out forwards; } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } } .delay-100 { animation-delay: 0.1s; } .delay-200 { animation-delay: 0.2s; } .delay-300 { animation-delay: 0.3s; } .delay-400 { animation-delay: 0.4s; } .delay-500 { animation-delay: 0.5s; } .observation-text { font-size: 1.125rem; line-height: 1.6; } .data-label { font-size: 1rem; } .data-value { font-size: 0.875rem; } .bar-value-label { position: absolute; top: -25px; left: 50%; transform: translateX(-50%); font-size: 0.75rem; font-weight: 600; color: #1e293b; background: rgba(255, 255, 255, 0.9); padding: 2px 6px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); opacity: 0; transition: opacity 0.3s ease; } .bar-group:hover .bar-value-label { opacity: 1; } </style> <div class="container"><!-- Cabeçalho --><header class="mb-8 text-center fade-in-up"> <h1 class="text-3xl md:text-4xl font-bold text-slate-800">An&aacute;lise das Entradas no Iases no ano de 2024</h1> <p class="text-lg text-slate-600 mt-2">Um Raio-X das Entradas Registradas em 2024</p> </header><!-- Card Principal --> <div class="w-full bg-blue-600 text-white p-8 rounded-2xl shadow-lg mb-8 text-center fade-in-up delay-100"> <h2 class="text-2xl font-semibold uppercase tracking-wider">Total de Entradas em 2024</h2> <p class="text-7xl font-bold mt-2 animate-on-scroll" data-count-to="993">0</p> <p class="text-blue-200 mt-1">no per&iacute;odo de Janeiro a Dezembro de 2024</p> </div> <!-- Grid de Cards Menores --> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6"><!-- Card: Gênero --> <div class="card lg:col-span-1 fade-in-up delay-200"> <h3 class="text-xl font-bold text-slate-700 mb-4">Perfil por Sexo Atribu&iacute;do ao Nascer</h3> <div class="flex-grow flex items-center justify-around gap-4"> <div class="text-center"> <div class="bg-blue-100 rounded-full p-4 inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-blue-600" viewbox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path> </svg></div> <p class="text-4xl font-bold text-slate-800 mt-2 animate-on-scroll" data-count-to="93.5" data-format="percent">0%</p> <p class="text-slate-500 data-label">Masculino (929)</p> </div> <div class="text-center"> <div class="bg-pink-100 rounded-full p-4 inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-pink-600" viewbox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path> </svg></div> <p class="text-4xl font-bold text-slate-800 mt-2 animate-on-scroll" data-count-to="6.5" data-format="percent">0%</p> <p class="text-slate-500 data-label">Feminino (64)</p> </div> </div> </div> <!-- Card: Faixa Etária --> <div class="card lg:col-span-1 fade-in-up delay-300"> <h3 class="text-xl font-bold text-slate-700 mb-4">Principais Faixas Et&aacute;rias</h3> <div class="flex-grow space-y-3 flex flex-col justify-center"> <div class="flex items-center"><span class="w-16 data-label font-semibold text-slate-600">17 anos</span> <div class="w-full bg-slate-200 rounded-full h-7 ml-2 overflow-hidden"> <div class="bg-gradient-to-r from-teal-400 to-blue-500 h-7 rounded-full text-right pr-2 text-white font-bold data-value flex items-center justify-end bar-grow animate-on-scroll" data-final-width="29%"><span class="animate-on-scroll" data-count-to="288">0</span></div> </div> </div> <div class="flex items-center"><span class="w-16 data-label font-semibold text-slate-600">16 anos</span> <div class="w-full bg-slate-200 rounded-full h-7 ml-2 overflow-hidden"> <div class="bg-gradient-to-r from-teal-400 to-blue-500 h-7 rounded-full text-right pr-2 text-white font-bold data-value flex items-center justify-end bar-grow animate-on-scroll" data-final-width="22%"><span class="animate-on-scroll" data-count-to="220">0</span></div> </div> </div> <div class="flex items-center"><span class="w-16 data-label font-semibold text-slate-600">18 anos</span> <div class="w-full bg-slate-200 rounded-full h-7 ml-2 overflow-hidden"> <div class="bg-gradient-to-r from-teal-400 to-blue-500 h-7 rounded-full text-right pr-2 text-white font-bold data-value flex items-center justify-end bar-grow animate-on-scroll" data-final-width="16%"><span class="animate-on-scroll" data-count-to="160">0</span></div> </div> </div> <div class="flex items-center"><span class="w-16 data-label font-semibold text-slate-600">Outras</span> <div class="w-full bg-slate-200 rounded-full h-7 ml-2 overflow-hidden"> <div class="bg-slate-400 h-7 rounded-full text-right pr-2 text-white font-bold data-value flex items-center justify-end bar-grow animate-on-scroll" data-final-width="33%"><span class="animate-on-scroll" data-count-to="325">0</span></div> </div> </div> </div> </div> <!-- Card: Motivo da Entrada --> <div class="card lg:col-span-1 fade-in-up delay-400"> <h3 class="text-xl font-bold text-slate-700 mb-4">Motivo da Entrada</h3> <div class="flex-grow space-y-3 flex flex-col justify-center"> <div> <p class="font-semibold text-slate-600 data-label">Mandado de Busca</p> <div class="w-full bg-slate-200 rounded-full h-6 mt-1 overflow-hidden"> <div class="bg-red-500 h-6 rounded-full flex items-center justify-end pr-2 text-white data-value font-bold bar-grow animate-on-scroll" data-final-width="59.5%"><span class="animate-on-scroll" data-count-to="591">0</span></div> </div> </div> <div> <p class="font-semibold text-slate-600 data-label">Flagrante de Ato Infracional</p> <div class="w-full bg-slate-200 rounded-full h-6 mt-1 overflow-hidden"> <div class="bg-orange-500 h-6 rounded-full flex items-center justify-end pr-2 text-white data-value font-bold bar-grow animate-on-scroll" data-final-width="39.7%"><span class="animate-on-scroll" data-count-to="394">0</span></div> </div> </div> <div> <p class="font-semibold text-slate-600 data-label">Descumprimento de MSE</p> <div class="w-full bg-slate-200 rounded-full h-6 mt-1 overflow-hidden"> <div class="bg-yellow-500 h-6 rounded-full flex items-center justify-end pr-2 text-slate-700 data-value font-bold bar-grow animate-on-scroll" data-final-width="0.8%"><span class="animate-on-scroll" data-count-to="8">0</span></div> </div> </div> </div> </div> <!-- Card: Raça/Cor --> <div class="card md:col-span-2 lg:col-span-3 fade-in-up delay-500"> <h3 class="text-xl font-bold text-slate-700 mb-4">Cor/Ra&ccedil;a (Autodeclarada)</h3> <div class="flex-grow flex flex-col justify-center"> <p class="text-center text-slate-600 mb-3 data-label">Pardos e Pretos representam <span class="font-bold text-slate-800">91,6%</span> do total de entradas.</p> <div class="w-full flex rounded-full h-8 overflow-hidden"> <div class="bg-yellow-900/70 flex items-center justify-center text-white data-value font-bold bar-grow animate-on-scroll" data-final-width="76%" title="Parda (755)">76%</div> <div class="bg-stone-800 flex items-center justify-center text-white data-value font-bold bar-grow animate-on-scroll" data-final-width="15.6%" title="Preta (155)">16%</div> <div class="bg-sky-300 flex items-center justify-center text-slate-700 data-value font-bold bar-grow animate-on-scroll" data-final-width="8.2%" title="Branca (81)">8%</div> </div> <div class="flex justify-center gap-6 mt-4 data-label"> <div class="flex items-center"><span class="w-4 h-4 rounded-full bg-yellow-900/70 mr-2"></span>Parda</div> <div class="flex items-center"><span class="w-4 h-4 rounded-full bg-stone-800 mr-2"></span>Preta</div> <div class="flex items-center"><span class="w-4 h-4 rounded-full bg-sky-300 mr-2"></span>Branca</div> </div> </div> </div> </div> <!-- Seção de Gráficos Detalhados --> <div class="space-y-6"><!-- Card: Escolaridade (Layout Aprimorado) --> <div class="card fade-in-up delay-100"> <h3 class="text-xl font-bold text-slate-700 mb-4">N&iacute;vel de Escolaridade (Top 4)</h3> <div class="flex-grow flex flex-col justify-center space-y-4"> <div class="flex items-center"><span class="w-40 data-label font-semibold text-slate-600 shrink-0">8&ordm; Ano do E.F.</span> <div class="w-full bg-slate-200 rounded-full h-7 ml-2 overflow-hidden"> <div class="bg-gradient-to-r from-purple-500 to-indigo-600 h-7 rounded-full text-right pr-2 text-white font-bold data-value flex items-center justify-end bar-grow animate-on-scroll" data-final-width="100%"><span class="animate-on-scroll" data-count-to="178">0</span></div> </div> </div> <div class="flex items-center"><span class="w-40 data-label font-semibold text-slate-600 shrink-0">7&ordm; Ano do E.F.</span> <div class="w-full bg-slate-200 rounded-full h-7 ml-2 overflow-hidden"> <div class="bg-gradient-to-r from-purple-500 to-indigo-600 h-7 rounded-full text-right pr-2 text-white font-bold data-value flex items-center justify-end bar-grow animate-on-scroll" data-final-width="86.5%"><span class="animate-on-scroll" data-count-to="154">0</span></div> </div> </div> <div class="flex items-center"><span class="w-40 data-label font-semibold text-slate-600 shrink-0">1&ordf; S&eacute;rie do E.M.</span> <div class="w-full bg-slate-200 rounded-full h-7 ml-2 overflow-hidden"> <div class="bg-gradient-to-r from-purple-500 to-indigo-600 h-7 rounded-full text-right pr-2 text-white font-bold data-value flex items-center justify-end bar-grow animate-on-scroll" data-final-width="82.5%"><span class="animate-on-scroll" data-count-to="147">0</span></div> </div> </div> <div class="flex items-center"><span class="w-40 data-label font-semibold text-slate-600 shrink-0">6&ordm; Ano do E.F.</span> <div class="w-full bg-slate-200 rounded-full h-7 ml-2 overflow-hidden"> <div class="bg-gradient-to-r from-purple-500 to-indigo-600 h-7 rounded-full text-right pr-2 text-white font-bold data-value flex items-center justify-end bar-grow animate-on-scroll" data-final-width="80.3%"><span class="animate-on-scroll" data-count-to="143">0</span></div> </div> </div> </div> <p class="mt-4 observation-text text-slate-600 italic"><span class="font-bold">Observa&ccedil;&atilde;o:</span> Nota-se uma alta concentra&ccedil;&atilde;o de entradas nos anos finais do Ensino Fundamental, indicando uma janela de vulnerabilidade e poss&iacute;vel evas&atilde;o escolar.</p> </div> <!-- Card: Fluxo Mensal (Gráfico de Barras) --> <div class="card fade-in-up delay-200"> <h3 class="text-xl font-bold text-slate-700 mb-4">Fluxo Mensal de Entradas: 2024 vs 2023</h3> <div class="flex-grow flex flex-col"> <div id="bar-chart" class="flex-grow grid grid-cols-12 gap-2 items-end h-72 pt-6"><!-- Barras serão inseridas aqui pelo JS --></div> <div class="w-full h-px bg-slate-200 mt-2"></div> <div class="grid grid-cols-12 gap-2 text-center data-value text-slate-500 pt-1 font-semibold"><span>Jan</span><span>Fev</span><span>Mar</span><span>Abr</span><span>Mai</span><span>Jun</span> <span>Jul</span><span>Ago</span><span>Set</span><span>Out</span><span>Nov</span><span>Dez</span></div> </div> <div class="flex justify-center gap-6 mt-4 data-label flex-wrap"> <div class="flex items-center"><span class="w-4 h-4 rounded-full bg-blue-600 mr-2"></span>2024</div> <div class="flex items-center"><span class="w-4 h-4 rounded-full bg-orange-500 mr-2"></span>2023</div> </div> <p class="mt-4 observation-text text-slate-600 italic"><span class="font-bold">Observa&ccedil;&atilde;o:</span> O gr&aacute;fico de barras evidencia a sazonalidade diferente entre os anos. Enquanto 2023 (laranja) teve picos no in&iacute;cio e final do ano, 2024 (azul) concentrou seu maior volume de entradas no segundo semestre, especialmente em outubro.</p> </div> </div> <!-- Footer --><footer class="text-center mt-8 text-slate-500 text-sm fade-in-up delay-300"> <p>Fonte: Dados fornecidos sobre as Entradas no IASES em 2024 e 2023.</p> </footer></div> <p> <script> document.addEventListener('DOMContentLoaded', () => { // Função para animar números function animateValue(obj, start, end, duration, format) { let startTimestamp = null; const step = (timestamp) => { if (!startTimestamp) startTimestamp = timestamp; const progress = Math.min((timestamp - startTimestamp) / duration, 1); let currentValue = progress * (end - start) + start; if (format === 'percent') { obj.innerHTML = currentValue.toFixed(1) + '%'; } else { obj.innerHTML = Math.floor(currentValue); } if (progress < 1) { window.requestAnimationFrame(step); } else { if (format === 'percent') { obj.innerHTML = end.toFixed(1) + '%'; } else { obj.innerHTML = end; } } }; window.requestAnimationFrame(step); } // Intersection Observer para disparar animações const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const target = entry.target; // Animação de contagem if (target.hasAttribute('data-count-to')) { const finalValue = parseFloat(target.getAttribute('data-count-to')); const format = target.getAttribute('data-format'); animateValue(target, 0, finalValue, 1500, format); } // Animação de crescimento de barra horizontal if (target.classList.contains('bar-grow')) { target.style.width = target.getAttribute('data-final-width'); } // Animação de crescimento de barra vertical if (target.classList.contains('bar-grow-vertical')) { setTimeout(() => { // Pequeno delay para efeito escalonado target.style.height = target.getAttribute('data-final-height'); }, 200); } observer.unobserve(target); // Animar apenas uma vez } }); }, { threshold: 0.1 }); // Observar todos os elementos que precisam de animação document.querySelectorAll('.animate-on-scroll').forEach(el => { observer.observe(el); }); // Lógica para o gráfico de barras mensal const data2024 = [75, 54, 89, 65, 88, 94, 93, 76, 83, 105, 100, 71]; const data2023 = [79, 85, 107, 92, 76, 81, 85, 93, 109, 87, 51, 68]; const maxVal = Math.max(...data2024, ...data2023); const chartContainer = document.getElementById('bar-chart'); if(chartContainer) { chartContainer.innerHTML = ''; // Limpa o container data2024.forEach((value2024, index) => { const value2023 = data2023[index]; const height2024 = (value2024 / maxVal) * 100; const height2023 = (value2023 / maxVal) * 100; const monthGroup = document.createElement('div'); monthGroup.className = 'flex justify-center items-end h-full gap-1'; // Bar 2024 const bar2024Group = document.createElement('div'); bar2024Group.className = 'bar-group w-1/2 h-full flex items-end'; const bar2024 = document.createElement('div'); bar2024.className = 'relative w-full bg-blue-600 rounded-t-sm bar-grow-vertical animate-on-scroll'; bar2024.setAttribute('data-final-height', `${height2024}%`); // Rótulo para barra 2024 const barValue2024 = document.createElement('span'); barValue2024.className = 'bar-value-label'; barValue2024.textContent = value2024; const label2024 = document.createElement('span'); label2024.className = 'absolute top-1 left-0 right-0 text-center text-sm font-bold text-white'; label2024.innerText = value2024; bar2024.appendChild(label2024); bar2024Group.appendChild(bar2024); bar2024Group.appendChild(barValue2024); // Bar 2023 const bar2023Group = document.createElement('div'); bar2023Group.className = 'bar-group w-1/2 h-full flex items-end'; const bar2023 = document.createElement('div'); bar2023.className = 'relative w-full bg-orange-500 rounded-t-sm bar-grow-vertical animate-on-scroll'; bar2023.setAttribute('data-final-height', `${height2023}%`); // Rótulo para barra 2023 const barValue2023 = document.createElement('span'); barValue2023.className = 'bar-value-label'; barValue2023.textContent = value2023; const label2023 = document.createElement('span'); label2023.className = 'absolute top-1 left-0 right-0 text-center text-sm font-bold text-white'; label2023.innerText = value2023; bar2023.appendChild(label2023); bar2023Group.appendChild(bar2023); bar2023Group.appendChild(barValue2023); monthGroup.appendChild(bar2024Group); monthGroup.appendChild(bar2023Group); chartContainer.appendChild(monthGroup); }); // Re-observa as barras verticais recém-criadas document.querySelectorAll('.bar-grow-vertical').forEach(el => { observer.observe(el); }); } }); </script> </p>Fri, 10 Oct 2025 12:40:00 GMThttps://observatorio.iases.es.gov.br:443/Not%C3%ADcia/entradas-no-iases-no-ano-de-2024https://observatorio.iases.es.gov.br:443/Not%C3%ADcia/panorama-da-internacao-socioeducativa<p></p> <p> <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> </p> <style> body { font-family: 'Inter', sans-serif; background-color: #ffffff; margin: 0; padding: 0; } .container { max-width: 1200px; margin: 0 auto; padding: 1rem; } /* Ajuste para remover barras de rolagem: altura adaptável */ .chart-container { position: relative; width: 100%; margin-left: auto; margin-right: auto; height: auto; min-height: 350px; } @media (min-width: 768px) { .chart-container { min-height: 400px; } } .kpi-card { background-color: #ffffff; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); transition: transform 0.2s; overflow: visible; /* Alterado de hidden para visible */ } .kpi-card:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); } .kpi-label { color: #073B4C; font-weight: 600; } .fade-in-up { opacity: 0; transform: translateY(20px); animation: fadeInUp 0.8s ease-out forwards; } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } } .delay-100 { animation-delay: 0.1s; } .delay-200 { animation-delay: 0.2s; } .delay-300 { animation-delay: 0.3s; } .delay-400 { animation-delay: 0.4s; } .delay-500 { animation-delay: 0.5s; } .delay-600 { animation-delay: 0.6s; } @media (max-width: 768px) { .container { padding: 0.5rem; } } /* Ajuste específico para o gráfico longo de escolaridade */ #education-box { min-height: 650px; } </style> <div class="container"><header class="bg-[#073B4C] text-white p-6 md:p-8 text-center shadow-lg fade-in-up"> <h1 class="text-3xl md:text-4xl font-bold mb-2">Perfil dos Socioeducandos em Cumprimento de MSE de Interna&ccedil;&atilde;o&nbsp;no dia 1&ordm; de cada M&ecirc;s</h1> <p class="text-lg md:text-xl text-gray-300">An&aacute;lise Consolidada de Janeiro a Dezembro</p> </header><main class="p-4 md:p-8"> <section id="kpis" class="mb-12"> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> <div class="kpi-card p-6 text-center border-t-4 border-[#118AB2] fade-in-up delay-100"> <p class="text-lg kpi-label mb-2">Pico de Interna&ccedil;&otilde;es</p> <p class="text-5xl font-extrabold text-[#118AB2]">485</p> <p class="text-gray-500">(Fevereiro)</p> </div> <div class="kpi-card p-6 text-center border-t-4 border-[#06D6A0] fade-in-up delay-200"> <p class="text-lg kpi-label mb-2">M&iacute;nimo de Interna&ccedil;&otilde;es</p> <p class="text-5xl font-extrabold text-[#06D6A0]">313</p> <p class="text-gray-500">(Dezembro)</p> </div> <div class="kpi-card p-6 text-center border-t-4 border-[#FFD166] fade-in-up delay-300"> <p class="text-lg kpi-label mb-2">Pardos e Pretos</p> <p class="text-5xl font-extrabold text-[#FFD166]">92.9%</p> <p class="text-gray-500">(Predomin&acirc;ncia Racial)</p> </div> <div class="kpi-card p-6 text-center border-t-4 border-[#FF6B6B] fade-in-up delay-400"> <p class="text-lg kpi-label mb-2">Faixa Et&aacute;ria Cr&iacute;tica</p> <p class="text-5xl font-extrabold text-[#FF6B6B]">74.2%</p> <p class="text-gray-500">(16 a 18 anos)</p> </div> </div> </section> <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> <div class="bg-white rounded-lg shadow-md p-6 fade-in-up delay-100"> <h2 class="text-2xl font-bold text-center mb-4">Disparidade de Sexo Atribu&iacute;do ao Nascer</h2> <p class="text-center text-gray-600 mb-6">A an&aacute;lise anual confirma a <strong>predomin&acirc;ncia masculina (97%)</strong>, com uma presen&ccedil;a feminina est&aacute;vel por&eacute;m minorit&aacute;ria.</p> <div class="chart-container"><canvas id="genderChart"></canvas></div> </div> <div class="bg-white rounded-lg shadow-md p-6 fade-in-up delay-200"> <h2 class="text-2xl font-bold text-center mb-4">Distribui&ccedil;&atilde;o por Cor/Ra&ccedil;a</h2> <p class="text-center text-gray-600 mb-6">A popula&ccedil;&atilde;o parda comp&otilde;e a grande maioria (3.904), seguida pela popula&ccedil;&atilde;o <strong>preta</strong> (807), evidenciando o recorte racial do sistema.</p> <div class="chart-container"><canvas id="raceChart"></canvas></div> </div> <div class="lg:col-span-2 bg-white rounded-lg shadow-md p-6 fade-in-up delay-300"> <h2 class="text-2xl font-bold text-center mb-4">Faixa Et&aacute;ria (Idade)</h2> <p class="text-center text-gray-600 mb-6 max-w-3xl mx-auto">O &aacute;pice das interna&ccedil;&otilde;es ocorre aos <strong>17 anos (1.493)</strong>, indicando que a maior parte dos jovens ingressa ou permanece no sistema no final da adolesc&ecirc;ncia.</p> <div class="chart-container"><canvas id="ageChart"></canvas></div> </div> <div class="lg:col-span-2 bg-white rounded-lg shadow-md p-6 fade-in-up delay-400"> <h2 class="text-2xl font-bold text-center mb-4">O Abismo Educacional</h2> <p class="text-center text-gray-600 mb-6 max-w-3xl mx-auto">Os dados revelam um cen&aacute;rio cr&iacute;tico: a maioria esmagadora est&aacute; vinculada ao <strong>EJA Fundamental (2.422)</strong>, sinalizando uma defasagem idade-s&eacute;rie cr&ocirc;nica.</p> <div id="education-box" class="chart-container"><canvas id="educationChart"></canvas></div> </div> <div class="lg:col-span-2 bg-white rounded-lg shadow-md p-6 fade-in-up delay-500"> <h2 class="text-2xl font-bold text-center mb-4">Din&acirc;mica Populacional Mensal (Total Geral)</h2> <p class="text-center text-gray-600 mb-6 max-w-3xl mx-auto">Observa-se uma <strong>tend&ecirc;ncia de queda acentuada</strong> no &uacute;ltimo bimestre, saindo de 398 em Outubro para o m&iacute;nimo de 313 em Dezembro.</p> <div class="chart-container"><canvas id="monthlyTrendChart"></canvas></div> </div> </div> </main><footer class="text-center p-6 mt-8 bg-[#073B4C] text-gray-300 text-sm fade-in-up delay-600"> <p>Dados atualizados: Janeiro a Dezembro (Total: 5.070 registros).</p> </footer></div> <p> <script> const energeticPalette = { red: '#FF6B6B', yellow: '#FFD166', green: '#06D6A0', blue: '#118AB2', darkBlue: '#073B4C', gray: '#94A3B8' }; const animationOptions = { duration: 2000, easing: 'easeOutQuart', }; // --- Gráfico de Sexo --- const genderCtx = document.getElementById('genderChart').getContext('2d'); new Chart(genderCtx, { type: 'doughnut', data: { labels: ['Masculino', 'Feminino'], datasets: [{ data: [4916, 154], backgroundColor: [energeticPalette.blue, energeticPalette.yellow], borderColor: '#ffffff', borderWidth: 3 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom' } } } }); // --- Gráfico de Raça --- const raceCtx = document.getElementById('raceChart').getContext('2d'); new Chart(raceCtx, { type: 'bar', data: { labels: ['Parda', 'Preta', 'Branca', 'Amarela', 'Indígena'], datasets: [{ label: 'Quantidade', data: [3904, 807, 350, 9, 0], backgroundColor: [energeticPalette.blue, energeticPalette.darkBlue, energeticPalette.green, energeticPalette.yellow, energeticPalette.gray] }] }, options: { indexAxis: 'y', responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } } }); // --- Gráfico de Idade --- const ageCtx = document.getElementById('ageChart').getContext('2d'); const ageData = { '12 Anos': 2, '13 Anos': 24, '14 Anos': 146, '15 Anos': 452, '16 Anos': 987, '17 Anos': 1493, '18 Anos': 1282, '19 Anos': 513, '20 Anos': 171 }; new Chart(ageCtx, { type: 'bar', data: { labels: Object.keys(ageData), datasets: [{ label: 'Total por Idade', data: Object.values(ageData), backgroundColor: energeticPalette.green }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } } }); // --- Gráfico de Escolaridade --- const educationCtx = document.getElementById('educationChart').getContext('2d'); const educationData = { 'EJA Fund.': 2422, 'EJA Méd.': 787, '1ª Série E.M': 667, '2ª Série E.M': 350, '6º Ano Fund.': 163, '7º Ano Fund.': 165, '8º Ano Fund.': 139, '9º Ano Fund.': 138, 'Sem Preench.': 101, '3ª Série E.M': 63, '5º Ano Fund.': 48, '3º Ano Fund.': 12, '4º Ano Fund.': 7, 'Ensino Superior': 4, '1º Ano Fund.': 3, '2º Ano Fund.': 1 }; new Chart(educationCtx, { type: 'bar', data: { labels: Object.keys(educationData), datasets: [{ label: 'Alunos', data: Object.values(educationData), backgroundColor: energeticPalette.blue }] }, options: { indexAxis: 'y', responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } } }); // --- Gráfico de Tendência Mensal --- const monthlyTrendCtx = document.getElementById('monthlyTrendChart').getContext('2d'); new Chart(monthlyTrendCtx, { type: 'line', data: { labels: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'], datasets: [{ label: 'Total de Socioeducandos', data: [467, 485, 480, 482, 422, 405, 402, 428, 426, 398, 362, 313], borderColor: energeticPalette.red, backgroundColor: 'rgba(255, 107, 107, 0.2)', fill: true, tension: 0.4 }] }, options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: false } } } }); </script> </p>Wed, 08 Oct 2025 11:57:00 GMThttps://observatorio.iases.es.gov.br:443/Not%C3%ADcia/panorama-da-internacao-socioeducativa