<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tablero de Control - Plan Michoacán por la Paz y la Justicia</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Fuentes: Montserrat -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<!-- Iconos: FontAwesome (Tablero) y Lucide (Bitácoras) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://unpkg.com/lucide@latest"></script>
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- Leaflet (Mapas) -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
gob: {
guinda: '#9D2449',
guindaDark: '#691C32',
dorado: '#BC955C',
gris: '#9E9E9E',
light: '#F5F5F5'
}
},
fontFamily: {
sans: ['Montserrat', 'sans-serif'],
}
}
}
}
</script>
<style>
body { font-family: 'Montserrat', sans-serif; }
/* Estilos Tablero Principal */
.tab-active { border-bottom: 4px solid #BC955C; color: #9D2449; font-weight: 700; }
.tab-inactive { color: #666; border-bottom: 4px solid transparent; }
.tab-inactive:hover { color: #9D2449; border-bottom: 4px solid #e5e5e5; }
.filter-btn-active { background-color: #9D2449; color: white; border-color: #9D2449; }
.filter-btn-inactive { background-color: white; color: #666; border-color: #e5e5e5; }
.progress-bar-striped { background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); background-size: 1rem 1rem; }
/* Animaciones */
.fade-in { animation: fadeIn 0.3s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
/* Estilos Específicos Bitácoras */
.bg-guinda { background-color: #9D2449; }
.text-guinda { color: #9D2449; }
.border-guinda { border-color: #9D2449; }
.bg-dorado { background-color: #B38E5D; }
.text-dorado { color: #B38E5D; }
.border-dorado { border-color: #B38E5D; }
.card-shadow { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
/* Estilos Vistas Detalle */
.card { background: white; border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); transition: transform 0.2s; }
.card:hover { transform: translateY(-2px); }
.gradient-guinda { background: linear-gradient(135deg, #9D2449 0%, #7a1c38 100%); }
/* Mapas */
#map { height: 400px; width: 100%; z-index: 1; border-radius: 0.5rem; }
#map-ia { height: 100%; min-height: 300px; width: 100%; z-index: 1; border-radius: 0.5rem; }
#map-bachillerato { height: 450px; width: 100%; z-index: 1; border-radius: 0.5rem; }
/* Scrollbar personalizado */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #B38E5D; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #9D2449; }
</style>
</head>
<body class="bg-gray-50 text-gray-800 flex flex-col min-h-screen">
<!-- HEADER GLOBAL (Solo visible en Tablero Principal) -->
<div id="global-header">
<header class="bg-white shadow-md border-b-4 border-gob-dorado sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 min-h-[6rem] py-4 flex flex-col md:flex-row items-center justify-between gap-4">
<div class="flex items-center space-x-4 w-full md:w-auto justify-center md:justify-start">
<div class="flex flex-col border-r border-gray-300 pr-4">
<span class="text-xs tracking-widest text-gray-500 uppercase font-bold">Gobierno de</span>
<span class="text-xl font-bold text-gob-guindaDark uppercase leading-none">México</span>
</div>
<div>
<h1 class="text-lg md:text-2xl font-bold text-gob-guinda uppercase leading-tight">Plan Michoacán</h1>
<p class="text-xs md:text-sm text-gob-dorado font-semibold tracking-wider uppercase">Por la Paz y la Justicia</p>
</div>
</div>
<div class="hidden md:block text-right">
<p class="text-sm text-gray-500">Última actualización</p>
<p class="font-bold text-gob-guinda" id="fecha-actual"></p>
</div>
</div>
</header>
<!-- LEYENDA SECTOR EDUCATIVO -->
<div class="bg-gob-light border-b border-gray-200 py-2">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<p class="text-center md:text-left text-sm font-bold text-gob-guindaDark uppercase tracking-[0.2em]">
Sector Educativo
</p>
</div>
</div>
</div>
<!-- CONTENIDO PRINCIPAL -->
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 flex-grow w-full">
<!-- VISTA PRINCIPAL (DASHBOARD) -->
<div id="main-dashboard-view">
<!-- RESUMEN EJECUTIVO (KPIs) -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 mb-8">
<!-- KPI 1 -->
<div class="bg-white rounded-lg shadow p-6 border-l-4 border-gob-guinda flex flex-col justify-between">
<div class="flex items-center justify-between mb-2">
<p class="text-sm text-gray-500 uppercase font-bold tracking-wide">Inversión Estatal</p>
<div class="text-gob-guinda text-2xl opacity-20"><i class="fas fa-coins"></i></div>
</div>
<div>
<p class="text-3xl font-bold text-gray-800">$182 MDP</p>
<p class="text-xs text-gray-400 mt-1">Presupuesto asignado reportado</p>
</div>
</div>
<!-- KPI 2 -->
<div class="bg-white rounded-lg shadow p-6 border-l-4 border-gob-dorado flex flex-col justify-between">
<div class="flex items-center justify-between mb-2">
<p class="text-sm text-gray-500 uppercase font-bold tracking-wide">Programas Activos</p>
<div class="text-gob-dorado text-2xl opacity-20"><i class="fas fa-chart-line"></i></div>
</div>
<div>
<p class="text-3xl font-bold text-gray-800">11</p>
<p class="text-xs text-gray-400 mt-1">En ejecución actual (2025)</p>
</div>
</div>
<!-- KPI 3 -->
<div class="bg-white rounded-lg shadow p-6 border-l-4 border-gray-400 flex flex-col justify-between">
<div class="flex items-center justify-between mb-2">
<p class="text-sm text-gray-500 uppercase font-bold tracking-wide">En Espera 2026</p>
<div class="text-gray-400 text-2xl opacity-20"><i class="far fa-clock"></i></div>
</div>
<div>
<p class="text-3xl font-bold text-gray-800">18</p>
<p class="text-xs text-gray-400 mt-1">Total Proyección 2026</p>
</div>
</div>
<!-- KPI 4 -->
<div class="bg-white rounded-lg shadow p-6 border-l-4 border-blue-600 flex flex-col justify-between">
<div class="flex items-center justify-between mb-2">
<p class="text-sm text-gray-500 uppercase font-bold tracking-wide">Avance Promedio</p>
<div class="text-blue-600 text-2xl opacity-20"><i class="fas fa-percent"></i></div>
</div>
<div>
<p class="text-3xl font-bold text-gray-800">63%</p>
<p class="text-xs text-gray-400 mt-1">Global de cumplimiento</p>
</div>
</div>
</div>
<!-- NAVEGACIÓN DE PESTAÑAS -->
<div class="flex border-b border-gray-200 mb-8 overflow-x-auto">
<button onclick="switchTab('tab-avances')" id="btn-tab-avances" class="flex-1 min-w-[180px] py-4 text-center text-lg focus:outline-none transition-colors duration-200 tab-active">
<i class="fas fa-tasks mr-2"></i> Tablero 2025
</button>
<button onclick="switchTab('tab-futuro')" id="btn-tab-futuro" class="flex-1 min-w-[180px] py-4 text-center text-lg focus:outline-none transition-colors duration-200 tab-inactive">
<i class="fas fa-hourglass-start mr-2"></i> Proyección 2026
</button>
</div>
<!-- PESTAÑA 1: AVANCES -->
<div id="tab-avances" class="fade-in">
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
<div>
<h2 class="text-2xl font-bold text-gob-guinda mb-1">Avances 2025</h2>
<p class="text-gray-600 text-sm">Monitoreo de programas en ejecución.</p>
</div>
<!-- Filtros -->
<div class="flex rounded-md shadow-sm" role="group">
<button type="button" onclick="filtrarCards2025('federal')" id="btn-2025-federal" class="px-4 py-2 text-sm font-medium border border-gray-200 rounded-l-lg filter-btn-inactive transition-colors"><i class="fas fa-building-columns mr-1"></i> Federales</button>
<button type="button" onclick="filtrarCards2025('estatal')" id="btn-2025-estatal" class="px-4 py-2 text-sm font-medium border-t border-b border-gray-200 filter-btn-inactive transition-colors"><i class="fas fa-map-location-dot mr-1"></i> Estatales</button>
<button type="button" onclick="filtrarCards2025('todos')" id="btn-2025-todos" class="px-4 py-2 text-sm font-medium border border-gray-200 rounded-r-lg filter-btn-active transition-colors"><i class="fas fa-layer-group mr-1"></i> Ambos</button>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6" id="cards-container"></div>
</div>
<!-- PESTAÑA 2: FUTURO -->
<div id="tab-futuro" class="hidden fade-in">
<div class="bg-white rounded-xl shadow p-4 md:p-8">
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
<div>
<h2 class="text-2xl font-bold text-gob-guinda mb-1">Cartera de Proyectos 2026</h2>
<p class="text-gray-600 text-sm">Programas nuevos y de continuidad para el próximo ejercicio fiscal.</p>
</div>
<div class="flex rounded-md shadow-sm" role="group">
<button type="button" onclick="filtrarTabla('federal')" id="btn-filtro-federal" class="px-4 py-2 text-sm font-medium border border-gray-200 rounded-l-lg filter-btn-inactive transition-colors"><i class="fas fa-building-columns mr-1"></i> Federales</button>
<button type="button" onclick="filtrarTabla('estatal')" id="btn-filtro-estatal" class="px-4 py-2 text-sm font-medium border-t border-b border-gray-200 filter-btn-inactive transition-colors"><i class="fas fa-map-location-dot mr-1"></i> Estatales</button>
<button type="button" onclick="filtrarTabla('todos')" id="btn-filtro-todos" class="px-4 py-2 text-sm font-medium border border-gray-200 rounded-r-lg filter-btn-active transition-colors"><i class="fas fa-layer-group mr-1"></i> Ambos</button>
</div>
</div>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-bold text-gob-guinda uppercase tracking-wider">Origen</th>
<th class="px-6 py-3 text-left text-xs font-bold text-gob-guinda uppercase tracking-wider">Programa / Campaña</th>
<th class="px-6 py-3 text-left text-xs font-bold text-gob-guinda uppercase tracking-wider">Responsable</th>
<th class="px-6 py-3 text-left text-xs font-bold text-gob-guinda uppercase tracking-wider">Estado 2026</th>
<th class="px-6 py-3 text-left text-xs font-bold text-gob-guinda uppercase tracking-wider">Prioridad</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200" id="tabla-futuro-body"></tbody>
</table>
</div>
</div>
</div>
</div>
<!-- VISTA DETALLE BITÁCORA UNRC -->
<div id="view-unrc-detail" class="hidden fade-in">
<!-- Header UNRC -->
<header class="bg-white border-b-4 border-guinda sticky top-0 z-50 shadow-md mb-8 rounded-lg">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center gap-4">
<div class="text-left"><h1 class="text-sm font-bold text-gray-600 uppercase leading-tight">Gobierno de<br>México</h1></div>
<div class="h-8 w-px bg-gray-400"></div>
<div class="text-left"><h2 class="text-lg font-bold text-guinda uppercase tracking-wide">Plan Michoacán</h2><p class="text-xs text-dorado font-semibold uppercase tracking-widest">Por la Paz y la Justicia</p></div>
</div>
<div class="flex items-center gap-4">
<div class="text-right hidden md:block"><h3 class="text-sm font-semibold text-gray-500">Bitácora de Gestión</h3><h1 class="text-xl font-bold text-gray-800">Universidad Nacional Rosario Castellanos</h1></div>
<button onclick="toggleDetailView(false)" class="bg-guinda text-white px-4 py-2 rounded shadow hover:bg-red-800 transition-colors text-sm font-bold flex items-center"><i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i> Volver</button>
</div>
</div>
</header>
<!-- KPIs UNRC -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
<div class="bg-white p-6 rounded-lg card-shadow border-l-4 border-guinda flex items-center justify-between"><div><p class="text-sm text-gray-500 font-semibold uppercase">Sedes Totales</p><p class="text-3xl font-bold text-gray-800">5</p><p class="text-xs text-green-600 mt-1">Con viabilidad confirmada</p></div><div class="bg-gray-100 p-3 rounded-full text-guinda"><i data-lucide="building-2" class="w-8 h-8"></i></div></div>
<div class="bg-white p-6 rounded-lg card-shadow border-l-4 border-dorado flex items-center justify-between"><div><p class="text-sm text-gray-500 font-semibold uppercase">Gestión Terrenos</p><p class="text-3xl font-bold text-gray-800">50%</p><p class="text-xs text-orange-500 mt-1">Avance global</p></div><div class="bg-gray-100 p-3 rounded-full text-dorado"><i data-lucide="map-pin" class="w-8 h-8"></i></div></div>
<div class="bg-white p-6 rounded-lg card-shadow border-l-4 border-blue-500 flex items-center justify-between"><div><p class="text-sm text-gray-500 font-semibold uppercase">Fase 1 (Marzo)</p><p class="text-3xl font-bold text-gray-800">2</p><p class="text-xs text-gray-500 mt-1">Sedes: Múgica y Oriente</p></div><div class="bg-gray-100 p-3 rounded-full text-blue-600"><i data-lucide="calendar-clock" class="w-8 h-8"></i></div></div>
<div class="bg-white p-6 rounded-lg card-shadow border-l-4 border-green-500 flex items-center justify-between"><div><p class="text-sm text-gray-500 font-semibold uppercase">Fase 2 (Sept)</p><p class="text-3xl font-bold text-gray-800">3</p><p class="text-xs text-gray-500 mt-1">Uruapan, Ario y Zacapu</p></div><div class="bg-gray-100 p-3 rounded-full text-green-600"><i data-lucide="users" class="w-8 h-8"></i></div></div>
</div>
<!-- Mapa y Gráficas UNRC -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
<div class="lg:col-span-2 bg-white rounded-lg card-shadow overflow-hidden">
<div class="bg-gray-100 px-6 py-4 border-b border-gray-200 flex justify-between items-center"><h3 class="font-bold text-gray-700 flex items-center gap-2"><i data-lucide="map" class="w-5 h-5 text-guinda"></i> Georreferencia de Sedes</h3><span class="text-xs bg-guinda text-white px-2 py-1 rounded">Michoacán</span></div>
<div class="p-4"><div id="map"></div></div>
</div>
<div class="bg-white rounded-lg card-shadow overflow-hidden flex flex-col">
<div class="bg-gray-100 px-6 py-4 border-b border-gray-200"><h3 class="font-bold text-gray-700 flex items-center gap-2"><i data-lucide="bar-chart-3" class="w-5 h-5 text-dorado"></i> Avance por Acción</h3></div>
<div class="p-6 flex-grow flex items-center justify-center"><canvas id="progressChart"></canvas></div>
<div class="px-6 py-4 border-t border-gray-100 bg-gray-50"><div class="text-xs text-gray-500 italic text-center">Fuente: Tablero de control UNRC.xlsx (Corte Nov 2025)</div></div>
</div>
</div>
<h2 class="text-2xl font-bold text-gray-800 mb-6 pl-2 border-l-4 border-guinda">Estatus Detallado por Sede</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="sedes-container"></div>
</div>
<!-- VISTA DETALLE INTELIGENCIA ARTIFICIAL -->
<div id="view-ia-detail" class="hidden fade-in">
<!-- Header IA -->
<header class="bg-white border-b-4 border-guinda sticky top-0 z-50 shadow-sm mb-6 rounded-lg">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center gap-4">
<div class="text-left"><h1 class="text-xs font-bold text-gray-500 uppercase">Gobierno de<br>México</h1></div>
<div class="h-8 w-px bg-gray-300"></div>
<div><h2 class="text-lg font-bold text-guinda uppercase leading-tight">Plan Michoacán</h2><p class="text-[10px] text-dorado font-bold uppercase tracking-widest">Agencia de Transformación Digital</p></div>
</div>
<div class="flex items-center gap-4">
<div class="text-right hidden md:block"><h3 class="text-xs text-gray-500 font-semibold uppercase">Tablero de Control</h3><h1 class="text-xl font-bold text-gray-800">Centro Público de Formación en IA</h1></div>
<!-- Botón Volver IA -->
<button onclick="toggleIADetailView(false)" class="bg-guinda text-white px-4 py-2 rounded shadow hover:bg-red-800 transition-colors text-sm font-bold flex items-center"><i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i> Volver</button>
</div>
</div>
</header>
<main class="container mx-auto space-y-6">
<!-- Banner Alerta -->
<div class="bg-guinda text-white p-4 rounded-lg shadow-lg flex items-center justify-between">
<div class="flex items-center gap-4">
<div class="bg-white/20 p-2 rounded-full"><i data-lucide="trending-up" class="w-6 h-6 text-white"></i></div>
<div><p class="text-xs text-dorado font-bold uppercase">Corte Informativo: 10 de Diciembre</p><h2 class="text-xl font-bold">Meta Superada (127%)</h2></div>
</div>
<div class="text-right hidden sm:block"><p class="text-3xl font-bold">12,717</p><p class="text-xs opacity-80">Registros Totales</p></div>
</div>
<!-- KPIs IA -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div class="card p-5 border-l-4 border-dorado"><p class="text-gray-500 text-xs font-bold uppercase">Participación Nacional</p><div class="flex items-end gap-2"><span class="text-4xl font-bold text-guinda">29.1%</span><span class="text-sm text-gray-400 mb-1">del total país</span></div></div>
<div class="card p-5 border-l-4 border-blue-500"><p class="text-gray-500 text-xs font-bold uppercase">Cobertura Estatal</p><div class="flex items-end gap-2"><span class="text-4xl font-bold text-gray-800">102</span><span class="text-sm text-gray-400 mb-1">municipios</span></div></div>
<div class="card p-5 border-l-4 border-green-500"><p class="text-gray-500 text-xs font-bold uppercase">Interés en IA</p><div class="flex items-end gap-2"><span class="text-4xl font-bold text-gray-800">20.6%</span><span class="text-sm text-gray-400 mb-1">área principal</span></div></div>
<div class="card p-5 border-l-4 border-purple-500"><p class="text-gray-500 text-xs font-bold uppercase">Jóvenes (<18 años)</p><div class="flex items-end gap-2"><span class="text-4xl font-bold text-gray-800">66.6%</span><span class="text-sm text-gray-400 mb-1">mayoría estudiantes</span></div></div>
</div>
<!-- Gráfica y Mapa IA -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div class="lg:col-span-2 card p-6">
<div class="flex justify-between items-center mb-6"><h3 class="font-bold text-gray-700 flex items-center gap-2"><i data-lucide="bar-chart-2" class="w-5 h-5 text-guinda"></i> Evolución de Registros</h3><span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded border border-gray-200">26 Nov - 10 Dic</span></div>
<div class="h-72"><canvas id="growthChart"></canvas></div>
</div>
<div class="card p-0 overflow-hidden flex flex-col">
<div class="p-4 bg-gray-50 border-b border-gray-100 flex justify-between items-center"><h3 class="font-bold text-gray-700 text-sm">Top Municipios</h3><i data-lucide="map-pin" class="w-4 h-4 text-dorado"></i></div>
<div id="map-ia" class="flex-grow min-h-[300px]"></div>
<div class="p-3 bg-white text-xs text-center text-gray-500 border-t border-gray-100">10 municipios concentran el 67% del total</div>
</div>
</div>
<!-- Demográficos IA -->
<h3 class="text-xl font-bold text-gray-800 border-l-4 border-guinda pl-3 mt-4">Perfil de los Registrados</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="card p-6"><h4 class="text-sm font-bold text-gray-600 mb-4 text-center">Género</h4><div class="h-48"><canvas id="genderChart"></canvas></div><div class="mt-4 flex justify-center gap-4 text-xs text-gray-500"><span class="flex items-center gap-1"><div class="w-2 h-2 rounded-full bg-[#9D2449]"></div> Mujeres (50.4%)</span><span class="flex items-center gap-1"><div class="w-2 h-2 rounded-full bg-[#B38E5D]"></div> Hombres (49.5%)</span></div></div>
<div class="card p-6"><h4 class="text-sm font-bold text-gray-600 mb-4 text-center">Nivel Educativo</h4><div class="h-48"><canvas id="eduChart"></canvas></div></div>
<div class="card p-0 overflow-hidden">
<div class="bg-gray-100 px-4 py-3 border-b border-gray-200"><h4 class="text-sm font-bold text-gray-700">Municipios con más registros</h4></div>
<div class="overflow-y-auto max-h-60">
<table class="w-full text-sm text-left">
<thead class="text-xs text-gray-500 uppercase bg-gray-50 sticky top-0"><tr><th class="px-4 py-2">Municipio</th><th class="px-4 py-2 text-right">Registros</th><th class="px-4 py-2 text-right">%</th></tr></thead>
<tbody class="divide-y divide-gray-100">
<tr><td class="px-4 py-3 font-medium text-gray-800">Morelia</td><td class="px-4 py-3 text-right font-bold text-guinda">1,612</td><td class="px-4 py-3 text-right text-gray-500">12.6%</td></tr>
<tr><td class="px-4 py-3 font-medium text-gray-800">Apatzingán</td><td class="px-4 py-3 text-right font-bold text-guinda">1,500</td><td class="px-4 py-3 text-right text-gray-500">11.8%</td></tr>
<tr><td class="px-4 py-3 font-medium text-gray-800">Tacámbaro</td><td class="px-4 py-3 text-right font-bold text-guinda">955</td><td class="px-4 py-3 text-right text-gray-500">7.5%</td></tr>
<tr><td class="px-4 py-3 font-medium text-gray-800">Uruapan</td><td class="px-4 py-3 text-right font-bold text-guinda">458</td><td class="px-4 py-3 text-right text-gray-500">3.6%</td></tr>
<tr><td class="px-4 py-3 font-medium text-gray-800">Pátzcuaro</td><td class="px-4 py-3 text-right font-bold text-guinda">407</td><td class="px-4 py-3 text-right text-gray-500">3.2%</td></tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Instituciones -->
<div class="card p-6 border-t-4 border-dorado">
<h3 class="text-lg font-bold text-gray-800 mb-2">Participación TecNM (Nivel Superior)</h3>
<p class="text-sm text-gray-500 mb-4">Principales institutos tecnológicos registrados.</p>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
<div class="bg-gray-50 rounded p-3"><p class="text-2xl font-bold text-guinda">321</p><p class="text-xs text-gray-600">ITS Los Reyes</p></div>
<div class="bg-gray-50 rounded p-3"><p class="text-2xl font-bold text-guinda">92</p><p class="text-xs text-gray-600">ITS Uruapan</p></div>
<div class="bg-gray-50 rounded p-3"><p class="text-2xl font-bold text-guinda">39</p><p class="text-xs text-gray-600">ITS Apatzingán</p></div>
<div class="bg-gray-50 rounded p-3"><p class="text-2xl font-bold text-guinda">29</p><p class="text-xs text-gray-600">ITS Purépecha</p></div>
</div>
</div>
</main>
</div>
<!-- VISTA DETALLE BACHILLERATO TECNOLÓGICO -->
<div id="view-bachillerato-detail" class="hidden fade-in">
<!-- Header Bachillerato -->
<header class="bg-white border-b-4 border-guinda sticky top-0 z-50 shadow-md mb-6 rounded-lg">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center gap-4">
<div class="text-left"><h1 class="text-xs font-bold text-gray-500 uppercase">Gobierno de<br>México</h1></div>
<div class="h-8 w-px bg-gray-300"></div>
<div><h2 class="text-lg font-bold text-guinda uppercase leading-tight">Plan Michoacán</h2><p class="text-[10px] text-dorado font-bold uppercase tracking-widest">Educación Media Superior</p></div>
</div>
<div class="flex items-center gap-4">
<div class="text-right hidden md:block">
<h3 class="text-xs text-gray-500 font-semibold uppercase">Proyecto de Expansión 2026-2028</h3>
<div class="flex items-center justify-end gap-2"><span class="bg-green-100 text-green-800 text-xs font-bold px-2 py-0.5 rounded">Meta: 30,000 Espacios</span></div>
</div>
<!-- Botón Volver -->
<button onclick="toggleBachilleratoDetailView(false)" class="bg-guinda text-white px-4 py-2 rounded shadow hover:bg-red-800 transition-colors text-sm font-bold flex items-center"><i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i> Volver</button>
</div>
</div>
</header>
<main class="container mx-auto space-y-6">
<!-- KPIs Bachillerato -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div class="card p-4 border-l-4 border-guinda flex items-center justify-between"><div><p class="text-xs text-gray-500 font-bold uppercase">Meta de Cobertura</p><p class="text-3xl font-bold text-gray-800">30,000</p><p class="text-xs text-gray-400">Nuevos espacios</p></div><div class="bg-red-50 p-2 rounded-full text-guinda"><i data-lucide="users" class="w-6 h-6"></i></div></div>
<div class="card p-4 border-l-4 border-dorado flex items-center justify-between"><div><p class="text-xs text-gray-500 font-bold uppercase">Nuevos Planteles</p><p class="text-3xl font-bold text-gray-800">10</p><p class="text-xs text-dorado">Bachillerato Tecnológico</p></div><div class="bg-yellow-50 p-2 rounded-full text-dorado"><i data-lucide="building" class="w-6 h-6"></i></div></div>
<div class="card p-4 border-l-4 border-blue-500 flex items-center justify-between"><div><p class="text-xs text-gray-500 font-bold uppercase">Ampliaciones</p><p class="text-3xl font-bold text-gray-800">20</p><p class="text-xs text-blue-500">Planteles existentes</p></div><div class="bg-blue-50 p-2 rounded-full text-blue-500"><i data-lucide="maximize" class="w-6 h-6"></i></div></div>
<div class="card p-4 border-l-4 border-green-500 flex items-center justify-between"><div><p class="text-xs text-gray-500 font-bold uppercase">Modulares / TBC</p><p class="text-3xl font-bold text-gray-800">60</p><p class="text-xs text-green-500">Rural e Indígena</p></div><div class="bg-green-50 p-2 rounded-full text-green-500"><i data-lucide="map-pin" class="w-6 h-6"></i></div></div>
</div>
<!-- Mapa y Gráficas Bachillerato -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div class="lg:col-span-2 card p-0 overflow-hidden flex flex-col">
<div class="p-4 bg-gray-50 border-b border-gray-100 flex justify-between items-center">
<div><h3 class="font-bold text-gray-700 flex items-center gap-2"><i data-lucide="map" class="w-5 h-5 text-guinda"></i> Distribución Territorial</h3></div>
<div class="flex gap-2 text-xs"><span class="flex items-center gap-1"><div class="w-3 h-3 rounded-full bg-[#9D2449]"></div> Nuevos (10)</span><span class="flex items-center gap-1"><div class="w-3 h-3 rounded-full bg-[#3B82F6]"></div> Ampliaciones (20)</span><span class="flex items-center gap-1"><div class="w-3 h-3 rounded-full bg-[#10B981]"></div> Rural/TBC (60)</span></div>
</div>
<div id="map-bachillerato" class="flex-grow bg-gray-200"></div>
</div>
<div class="card p-6 flex flex-col justify-between">
<div><h3 class="font-bold text-gray-700 mb-4">Composición del Proyecto</h3><div class="h-64"><canvas id="compositionChart-bach"></canvas></div></div>
<div class="mt-4 bg-gray-50 p-4 rounded border border-gray-100">
<h4 class="text-sm font-bold text-guinda mb-2">Prioridad de Atención</h4>
<ul class="text-xs space-y-2 text-gray-600">
<li class="flex items-start gap-2"><i data-lucide="check-circle" class="w-4 h-4 text-dorado mt-0.5"></i><span>Atención a rechazados de secundaria en zonas de alta densidad.</span></li>
<li class="flex items-start gap-2"><i data-lucide="check-circle" class="w-4 h-4 text-dorado mt-0.5"></i><span>Cobertura en comunidades indígenas y rurales sin oferta actual.</span></li>
</ul>
</div>
</div>
</div>
<!-- Panel Detalle Tabs -->
<div class="card p-6" id="bachillerato-tabs-container">
<div class="flex border-b border-gray-200 mb-6 overflow-x-auto">
<button class="px-6 py-2 tab-active transition-colors focus:outline-none" onclick="switchTabBachillerato('nuevos', this)">A. 10 Nuevos Planteles</button>
<button class="px-6 py-2 tab-inactive transition-colors focus:outline-none" onclick="switchTabBachillerato('ampliaciones', this)">B. 20 Ampliaciones</button>
<button class="px-6 py-2 tab-inactive transition-colors focus:outline-none" onclick="switchTabBachillerato('rurales', this)">C. 60 Modulares/Rurales</button>
</div>
<!-- Contenido Nuevos -->
<div id="tab-nuevos" class="tab-content block">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h4 class="text-sm font-bold text-gray-500 uppercase mb-3">Municipios Prioritarios (Alta Demanda)</h4>
<div class="space-y-3">
<div class="flex items-center justify-between p-3 bg-gray-50 rounded border-l-4 border-guinda"><span class="font-semibold text-gray-800">Uruapan</span><span class="text-xs bg-white border px-2 py-1 rounded">3,186 egresados sec.</span></div>
<div class="flex items-center justify-between p-3 bg-gray-50 rounded border-l-4 border-guinda"><span class="font-semibold text-gray-800">Ario de Rosales</span><span class="text-xs bg-white border px-2 py-1 rounded">1,886 egresados sec.</span></div>
<div class="flex items-center justify-between p-3 bg-gray-50 rounded border-l-4 border-guinda"><span class="font-semibold text-gray-800">Zitácuaro</span><span class="text-xs bg-white border px-2 py-1 rounded">1,753 egresados sec.</span></div>
<div class="flex items-center justify-between p-3 bg-gray-50 rounded border-l-4 border-guinda"><span class="font-semibold text-gray-800">Los Reyes</span><span class="text-xs bg-white border px-2 py-1 rounded">1,316 egresados sec.</span></div>
</div>
</div>
<div>
<h4 class="text-sm font-bold text-gray-500 uppercase mb-3">Otros Municipios Estratégicos</h4>
<div class="grid grid-cols-2 gap-3">
<div class="p-3 bg-white border rounded text-center shadow-sm"><p class="font-bold text-gray-700">Tangamandapio</p><p class="text-xs text-gray-400">311 Egresados</p></div>
<div class="p-3 bg-white border rounded text-center shadow-sm"><p class="font-bold text-gray-700">Aquila</p><p class="text-xs text-gray-400">Zona Costa</p></div>
<div class="p-3 bg-white border rounded text-center shadow-sm"><p class="font-bold text-gray-700">Zamora</p><p class="text-xs text-gray-400">Zona Urbana</p></div>
<div class="p-3 bg-white border rounded text-center shadow-sm"><p class="font-bold text-gray-700">Morelia</p><p class="text-xs text-gray-400">Villas del Pedregal</p></div>
<div class="p-3 bg-white border rounded text-center shadow-sm"><p class="font-bold text-gray-700">La Huacana</p><p class="text-xs text-gray-400">Tierra Caliente</p></div>
<div class="p-3 bg-white border rounded text-center shadow-sm"><p class="font-bold text-gray-700">Puruándiro</p><p class="text-xs text-gray-400">Bajío</p></div>
</div>
</div>
</div>
</div>
<!-- Contenido Ampliaciones -->
<div id="tab-ampliaciones" class="tab-content hidden">
<div class="overflow-x-auto">
<table class="w-full text-sm text-left"><thead class="text-xs text-white uppercase bg-guinda"><tr><th class="px-4 py-3 rounded-tl-lg">Subsistema</th><th class="px-4 py-3">Municipio</th><th class="px-4 py-3">Plantel</th><th class="px-4 py-3 text-center">Matrícula Actual</th><th class="px-4 py-3 text-center rounded-tr-lg">Acción 2025</th></tr></thead><tbody class="divide-y divide-gray-200"><tr class="hover:bg-gray-50"><td class="px-4 py-3 font-bold text-gray-600">COBACH</td><td class="px-4 py-3">Ario de Rosales</td><td class="px-4 py-3">Cobach Ario</td><td class="px-4 py-3 text-center">1,006</td><td class="px-4 py-3 text-center"><span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Ampliación</span></td></tr><tr class="hover:bg-gray-50"><td class="px-4 py-3 font-bold text-gray-600">COBACH</td><td class="px-4 py-3">Cherán</td><td class="px-4 py-3">Cobach Cherán</td><td class="px-4 py-3 text-center">999</td><td class="px-4 py-3 text-center"><span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Ampliación</span></td></tr><tr class="hover:bg-gray-50"><td class="px-4 py-3 font-bold text-gray-600">COBACH</td><td class="px-4 py-3">Huetamo</td><td class="px-4 py-3">Cobach Huetamo</td><td class="px-4 py-3 text-center">921</td><td class="px-4 py-3 text-center"><span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Ampliación</span></td></tr><tr class="hover:bg-gray-50"><td class="px-4 py-3 font-bold text-gray-600">CECYTE</td><td class="px-4 py-3">Lázaro Cárdenas</td><td class="px-4 py-3">Cecytem 05</td><td class="px-4 py-3 text-center">1,887</td><td class="px-4 py-3 text-center"><span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Ampliación</span></td></tr><tr class="hover:bg-gray-50"><td class="px-4 py-3 font-bold text-gray-600">DGETI</td><td class="px-4 py-3">Morelia</td><td class="px-4 py-3">CBTIS 149</td><td class="px-4 py-3 text-center">N/D</td><td class="px-4 py-3 text-center"><span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Ampliación</span></td></tr><tr class="hover:bg-gray-50"><td class="px-4 py-3 font-bold text-gray-600">DGETI</td><td class="px-4 py-3">Uruapan</td><td class="px-4 py-3">CETIS 27</td><td class="px-4 py-3 text-center">N/D</td><td class="px-4 py-3 text-center"><span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Ampliación</span></td></tr></tbody></table><p class="text-xs text-gray-400 mt-2 italic">* Muestra parcial basada en los registros prioritarios.</p>
</div>
</div>
<!-- Contenido Rurales -->
<div id="tab-rurales" class="tab-content hidden">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div><h4 class="text-sm font-bold text-gray-700 mb-2">Comunidades Indígenas y Rurales</h4><div class="bg-green-50 p-4 rounded border border-green-200"><ul class="space-y-2 text-sm"><li class="flex justify-between"><span>Cherán (Cheranástico)</span> <span class="font-bold text-green-700">TBC</span></li><li class="flex justify-between"><span>Chilchota (Tacuro)</span> <span class="font-bold text-green-700">Rural</span></li><li class="flex justify-between"><span>Tangamandapio (La Cantera)</span> <span class="font-bold text-green-700">Rural</span></li><li class="flex justify-between"><span>Aquila (El Atrancón)</span> <span class="font-bold text-green-700">Rural</span></li><li class="flex justify-between"><span>Arteaga (La Latija)</span> <span class="font-bold text-green-700">TBC</span></li><li class="flex justify-between"><span>Tancítaro (Condémbaro)</span> <span class="font-bold text-green-700">Rural</span></li></ul></div></div>
<div><h4 class="text-sm font-bold text-gray-700 mb-2">Localidades Urbanas (Alta Marginación)</h4><div class="bg-white border border-gray-200 p-4 rounded"><ul class="space-y-2 text-sm text-gray-600"><li><strong>Morelia:</strong> Atapaneo y La Palma</li><li><strong>Lázaro Cárdenas:</strong> La Orilla y Acalpican</li><li><strong>Zamora:</strong> Chaparaco y Linda Vista</li><li><strong>Zitácuaro:</strong> Col. Emiliano Zapata</li></ul></div></div>
</div>
</div>
</div>
</main>
</div>
</main>
<!-- FOOTER GLOBAL -->
<div id="global-footer">
<footer class="bg-gob-guinda text-white mt-auto py-8">
<div class="max-w-7xl mx-auto px-4 text-center">
<p class="font-bold text-lg mb-2">PLAN MICHOACÁN POR LA PAZ Y LA JUSTICIA</p>
<p class="text-sm opacity-80">Tablero de Control Interno - Secretaría de Educación del Estado</p>
</div>
</footer>
</div>
<!-- LOGICA JAVASCRIPT -->
<script>
const dateOptions = { year: 'numeric', month: 'long', day: 'numeric' };
document.getElementById('fecha-actual').innerText = new Date().toLocaleDateString('es-MX', dateOptions);
// --- INICIALIZACIÓN DE BITÁCORAS ---
let unrcInitialized = false;
let iaInitialized = false;
let bachilleratoInitialized = false;
let mapUnrc;
let mapIA;
let mapBachillerato;
function initBitacoraUNRC() {
if (unrcInitialized) return;
lucide.createIcons();
// Datos y Gráficas UNRC (Mismo código anterior)
const sedesData = [
{ municipio: "Múgica (Nueva Italia)", fase: "Marzo 2026", ubicacion: "CEIBAS Nueva Italia", coords: [19.0572, -102.0842], estatus: "Confirmada", accion: "Proyecto de adecuación inmediato.", viabilidad: "Alta" },
{ municipio: "Zitácuaro (Oriente)", fase: "Marzo 2026", ubicacion: "Calle Morelia No. 95", coords: [19.4257, -100.3598], estatus: "En Proceso", accion: "Reubicación de oficinas actuales.", viabilidad: "Media-Alta" },
{ municipio: "Uruapan", fase: "Septiembre 2026", ubicacion: "Campo Experimental INIFAP", coords: [19.4067, -102.0528], estatus: "En revisión", accion: "Desocupación total y donación.", viabilidad: "Media" },
{ municipio: "Zacapu", fase: "Septiembre 2026", ubicacion: "Ciudad Industrial FIDEMICH", coords: [19.7930, -101.7941], estatus: "Confirmada", accion: "Asignación a SEE y construcción.", viabilidad: "Alta" },
{ municipio: "Ario de Rosales", fase: "Septiembre 2026", ubicacion: "Terreno Ayuntamiento", coords: [19.198480128716778, -101.71161659748638], estatus: "Confirmada", accion: "Donación municipal.", viabilidad: "Alta" },
{ municipio: "Tuxpan", fase: "Septiembre 2026", ubicacion: "Terreno Ejidal", coords: [19.5682, -100.4640], estatus: "Confirmada", accion: "Regularización.", viabilidad: "Alta" }
];
mapUnrc = L.map('map').setView([19.4326, -101.1333], 8);
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community' }).addTo(mapUnrc);
const guindaIcon = L.divIcon({ className: 'custom-div-icon', html: "<div style='background-color:#9D2449; width:15px; height:15px; border-radius:50%; border:2px solid white; box-shadow: 0 0 5px rgba(0,0,0,0.5);'></div>", iconSize: [15, 15] });
sedesData.forEach(sede => { L.marker(sede.coords, { icon: guindaIcon }).addTo(mapUnrc).bindPopup(`<strong>${sede.municipio}</strong><br>${sede.ubicacion}`); });
new Chart(document.getElementById('progressChart').getContext('2d'), {
type: 'bar',
data: { labels: ['Gestión Terrenos', 'Adecuación Espacios', 'Contratación Docente', 'Difusión'], datasets: [{ label: '% de Avance', data: [50, 30, 0, 0], backgroundColor: ['#9D2449', '#B38E5D', '#999', '#999'] }] },
options: { indexAxis: 'y', responsive: true, maintainAspectRatio: false }
});
const container = document.getElementById('sedes-container');
sedesData.forEach(sede => {
let border = sede.fase.includes("Marzo") ? 'border-l-4 border-guinda' : 'border-l-4 border-gray-300';
container.innerHTML += `<div class="bg-white rounded-lg card-shadow overflow-hidden flex flex-col h-full hover:shadow-lg p-5 ${border}"><h3 class="font-bold text-lg text-gray-800">${sede.municipio}</h3><span class="text-xs font-bold px-2 py-1 rounded w-fit my-2 ${sede.fase.includes('Marzo') ? 'bg-red-100 text-red-800' : 'bg-blue-100 text-blue-800'}">${sede.fase}</span><p class="text-sm text-gray-700 mt-2">${sede.ubicacion}</p><p class="text-xs text-gray-600 italic mt-4">"${sede.accion}"</p></div>`;
});
unrcInitialized = true;
}
function initBitacoraIA() {
if (iaInitialized) return;
lucide.createIcons();
Chart.defaults.font.family = "'Montserrat', sans-serif";
// 1. Gráfica Crecimiento
new Chart(document.getElementById('growthChart').getContext('2d'), {
type: 'line',
data: { labels: ['26 Nov', '27 Nov', '28 Nov', '29 Nov', '30 Nov', '01 Dic', '02 Dic', '03 Dic', '07 Dic', '10 Dic'], datasets: [{ label: 'Registros Acumulados', data: [320, 573, 1254, 1441, 1968, 4195, 4087, 7002, 9780, 12717], borderColor: '#9D2449', backgroundColor: 'rgba(157, 36, 73, 0.1)', borderWidth: 3, pointBackgroundColor: '#B38E5D', pointRadius: 4, fill: true, tension: 0.3 }] },
options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, grid: { borderDash: [2, 4] } }, x: { grid: { display: false } } } }
});
// 2. Gráfica Género
new Chart(document.getElementById('genderChart').getContext('2d'), {
type: 'doughnut',
data: { labels: ['Mujeres', 'Hombres'], datasets: [{ data: [3532, 3470], backgroundColor: ['#9D2449', '#B38E5D'], borderWidth: 0 }] },
options: { responsive: true, maintainAspectRatio: false, cutout: '70%', plugins: { legend: { display: false } } }
});
// 3. Gráfica Educación
new Chart(document.getElementById('eduChart').getContext('2d'), {
type: 'bar',
data: { labels: ['Media Superior', 'Superior', 'Otro/NA'], datasets: [{ label: 'Registros', data: [6253, 6464, 0], backgroundColor: ['#B38E5D', '#9D2449', '#E5E7EB'], borderRadius: 4 }] },
options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { display: false }, x: { grid: { display: false } } } }
});
// Mapa Leaflet IA
const municipiosMap = [ { name: "Morelia", coords: [19.7008, -101.1846], val: 887 }, { name: "Apatzingán", coords: [19.0877, -102.3556], val: 831 }, { name: "Tacámbaro", coords: [19.2344, -101.4586], val: 527 }, { name: "Uruapan", coords: [19.4208, -102.0628], val: 258 }, { name: "Pátzcuaro", coords: [19.5133, -101.6091], val: 225 } ];
mapIA = L.map('map-ia').setView([19.3, -101.5], 7);
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', { attribution: '© OpenStreetMap', maxZoom: 19 }).addTo(mapIA);
municipiosMap.forEach(m => {
const size = Math.max(10, m.val / 30);
L.circleMarker(m.coords, { radius: size, fillColor: "#9D2449", color: "#fff", weight: 1, opacity: 1, fillOpacity: 0.7 }).addTo(mapIA).bindPopup(`<b>${m.name}</b><br>${m.val} registros`);
});
iaInitialized = true;
}
function initBitacoraBachillerato() {
if (bachilleratoInitialized) return;
lucide.createIcons();
// Mapa Bachillerato
mapBachillerato = L.map('map-bachillerato').setView([19.2, -101.6], 8);
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', { attribution: '© OpenStreetMap', maxZoom: 18 }).addTo(mapBachillerato);
const iconNew = L.divIcon({className: '', html: '<div style="background:#9D2449; width:12px; height:12px; border-radius:50%; border:2px solid white;"></div>'});
const iconAmp = L.divIcon({className: '', html: '<div style="background:#3B82F6; width:10px; height:10px; border-radius:50%; border:1px solid white;"></div>'});
const iconRur = L.divIcon({className: '', html: '<div style="background:#10B981; width:8px; height:8px; border-radius:50%;"></div>'});
const locations = [
{ type: 'new', name: 'Uruapan (Nuevo)', coords: [19.4208, -102.0628] }, { type: 'new', name: 'Ario de Rosales (Nuevo)', coords: [19.2114, -101.7067] }, { type: 'new', name: 'Zitácuaro (Nuevo)', coords: [19.4361, -100.3550] }, { type: 'new', name: 'Los Reyes (Nuevo)', coords: [19.5888, -102.4736] }, { type: 'new', name: 'Aquila (Nuevo)', coords: [18.6044, -103.5042] }, { type: 'new', name: 'Tangamandapio (Nuevo)', coords: [19.9542, -102.4303] }, { type: 'new', name: 'La Huacana (Nuevo)', coords: [18.9619, -101.8058] }, { type: 'new', name: 'Puruándiro (Nuevo)', coords: [20.0886, -101.5133] },
{ type: 'amp', name: 'COBACH Cherán', coords: [19.6872, -101.9547] }, { type: 'amp', name: 'COBACH Huetamo', coords: [18.6286, -100.8986] }, { type: 'amp', name: 'CECYTE Lázaro Cárdenas', coords: [17.9620, -102.2030] }, { type: 'amp', name: 'DGETI Morelia', coords: [19.7008, -101.1846] },
{ type: 'rur', name: 'Tancítaro (Rural)', coords: [19.3386, -102.3622] }, { type: 'rur', name: 'Chilchota (Rural)', coords: [19.8519, -102.1192] }, { type: 'rur', name: 'Arteaga (TBC)', coords: [18.3561, -102.2869] }
];
locations.forEach(loc => {
let icon = iconRur;
if(loc.type === 'new') icon = iconNew;
if(loc.type === 'amp') icon = iconAmp;
L.marker(loc.coords, {icon: icon}).addTo(mapBachillerato).bindPopup(`<b style="color:#333">${loc.name}</b>`);
});
// Gráfica Composición
const ctx = document.getElementById('compositionChart-bach').getContext('2d');
new Chart(ctx, {
type: 'doughnut',
data: { labels: ['Nuevos Planteles', 'Ampliaciones', 'Modulares/Rural'], datasets: [{ data: [10, 20, 60], backgroundColor: ['#9D2449', '#3B82F6', '#10B981'], borderWidth: 0 }] },
options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom', labels: { usePointStyle: true, font: {family: 'Montserrat'} } } } }
});
bachilleratoInitialized = true;
}
// --- MANEJO DE VISTAS ---
function toggleDetailView(show) {
const dashboard = document.getElementById('main-dashboard-view');
const detail = document.getElementById('view-unrc-detail');
const detailIA = document.getElementById('view-ia-detail');
const detailBach = document.getElementById('view-bachillerato-detail');
const gHeader = document.getElementById('global-header');
const gFooter = document.getElementById('global-footer');
if (show) {
dashboard.classList.add('hidden');
detailIA.classList.add('hidden');
detailBach.classList.add('hidden');
gHeader.classList.add('hidden');
gFooter.classList.add('hidden');
detail.classList.remove('hidden');
initBitacoraUNRC();
setTimeout(() => { if(mapUnrc) mapUnrc.invalidateSize(); }, 100);
window.scrollTo({ top: 0, behavior: 'smooth' });
} else {
detail.classList.add('hidden');
dashboard.classList.remove('hidden');
gHeader.classList.remove('hidden');
gFooter.classList.remove('hidden');
}
}
function toggleIADetailView(show) {
const dashboard = document.getElementById('main-dashboard-view');
const detailUNRC = document.getElementById('view-unrc-detail');
const detail = document.getElementById('view-ia-detail');
const detailBach = document.getElementById('view-bachillerato-detail');
const gHeader = document.getElementById('global-header');
const gFooter = document.getElementById('global-footer');
if (show) {
dashboard.classList.add('hidden');
detailUNRC.classList.add('hidden');
detailBach.classList.add('hidden');
gHeader.classList.add('hidden');
gFooter.classList.add('hidden');
detail.classList.remove('hidden');
initBitacoraIA();
setTimeout(() => { if(mapIA) mapIA.invalidateSize(); }, 100);
window.scrollTo({ top: 0, behavior: 'smooth' });
} else {
detail.classList.add('hidden');
dashboard.classList.remove('hidden');
gHeader.classList.remove('hidden');
gFooter.classList.remove('hidden');
}
}
function toggleBachilleratoDetailView(show) {
const dashboard = document.getElementById('main-dashboard-view');
const detailUNRC = document.getElementById('view-unrc-detail');
const detailIA = document.getElementById('view-ia-detail');
const detail = document.getElementById('view-bachillerato-detail');
const gHeader = document.getElementById('global-header');
const gFooter = document.getElementById('global-footer');
if (show) {
dashboard.classList.add('hidden');
detailUNRC.classList.add('hidden');
detailIA.classList.add('hidden');
gHeader.classList.add('hidden');
gFooter.classList.add('hidden');
detail.classList.remove('hidden');
initBitacoraBachillerato();
setTimeout(() => { if(mapBachillerato) mapBachillerato.invalidateSize(); }, 100);
window.scrollTo({ top: 0, behavior: 'smooth' });
} else {
detail.classList.add('hidden');
dashboard.classList.remove('hidden');
gHeader.classList.remove('hidden');
gFooter.classList.remove('hidden');
}
}
// --- PESTAÑAS BACHILLERATO ---
function switchTabBachillerato(tabId, btn) {
const container = document.getElementById('bachillerato-tabs-container');
container.querySelectorAll('.tab-content').forEach(el => {
el.classList.add('hidden');
el.classList.remove('block');
});
container.querySelector('#tab-' + tabId).classList.remove('hidden');
container.querySelector('#tab-' + tabId).classList.add('block');
const buttons = btn.parentElement.querySelectorAll('button');
buttons.forEach(b => {
b.classList.remove('tab-active');
b.classList.add('tab-inactive');
});
btn.classList.remove('tab-inactive');
btn.classList.add('tab-active');
}
// --- DATOS TABLERO GENERAL ---
const programasActivos = [
{ titulo: "Jalo a Estudiar, Jalo por la Paz", presupuesto: "$92,000,000", meta: "204,000 alumnos", avance: 60, estado: "En Ejecución", obs: "Entrega de calzado deportivo.", icon: "fa-shoe-prints", tipo: "Estatal" },
{ titulo: "Equipamiento Escolar", presupuesto: "$60,000,000", meta: "Padrón y diagnóstico", avance: 30, estado: "Diagnóstico", obs: "Validación de necesidades.", icon: "fa-chair", tipo: "Estatal" },
{ titulo: "Pinto Mi Escuela", presupuesto: "$20,000,000", meta: "171 escuelas", avance: 50, estado: "En Ejecución", obs: "Dotación en 58 municipios.", icon: "fa-paint-roller", tipo: "Estatal" },
{ titulo: "Guitarras de Paracho", presupuesto: "$10,000,000", meta: "10,000 guitarras", avance: 30, estado: "Adquisición", obs: "Trámite de compra.", icon: "fa-guitar", tipo: "Estatal" },
{ titulo: "En Michoacán Se Lee", presupuesto: "N/A", meta: "200,000 libros entregados", avance: 99, estado: "En Ejecución", obs: "Entrega en proceso.", icon: "fa-book-open", tipo: "Estatal" },
{ titulo: "Expo Universidades", presupuesto: "Sin presupuesto", meta: "13 sedes", avance: 92, estado: "En Ejecución", obs: "12 sedes realizadas de 13 programadas. 18,400 estudiantes.", icon: "fa-university", tipo: "Estatal" },
{ titulo: "Ferias del Bienestar", presupuesto: "Sin presupuesto", meta: "13 ferias", avance: 35, estado: "En Ejecución", obs: "Participación educativa 5 ferias realizadas de 13 programadas.", icon: "fa-hand-holding-heart", tipo: "Estatal" },
{ titulo: "Becas Gertrudis Bocanegra", presupuesto: "Federal", meta: "80,972 estudiantes", avance: 92, estado: "Asambleas", obs: "79 de 85 escuelas atendidas. 74,650 estudiantes asistieron.", icon: "fa-address-card", tipo: "Federal" },
{ titulo: "Universidad Rosario Castellanos", presupuesto: "Gestión", meta: "5 sedes", avance: 60, estado: "Gestión", obs: "1 terreno listo. Visitas restantes.", icon: "fa-university", tipo: "Federal", id: "unrc", extraAvanceInfo: "(Fase 1: Gestión de predios)" },
{ titulo: "Bachillerato Tecnológico", presupuesto: "N/A", meta: "10 nuevos, 20 ampliaciones y 60 modulares", avance: 50, estado: "Aprobado", obs: "Revisión en campo.", icon: "fa-certificate", tipo: "Federal", id: "bachillerato", extraAvanceInfo: "(Fase 1: Gestión de predios y ubicación de planteles)" },
{ titulo: "Centro Público de Formación IA", presupuesto: "N/A", meta: "10,000 registros", avance: 127, estado: "Convocatoria", obs: "Meta superada. 12,717 registros.", icon: "fa-robot", tipo: "Federal", id: "ia" }
];
// Helper para ordenar presupuestos
function getBudgetVal(str) {
if(!str || str === 'N/A' || str === 'Sin presupuesto' || str === 'Federal' || str === 'Gestión') return 0;
return parseInt(str.replace(/[^0-9]/g, '')) || 0;
}
// RENDERIZADO TABLERO GENERAL
function filtrarCards2025(filtro) {
const container = document.getElementById('cards-container');
container.innerHTML = '';
['federal', 'estatal', 'todos'].forEach(b => {
const btn = document.getElementById('btn-2025-' + b);
btn.className = b === filtro ? 'px-4 py-2 text-sm font-medium border border-gray-200 ' + (b==='federal'?'rounded-l-lg':'') + (b==='todos'?'rounded-r-lg':'') + ' filter-btn-active transition-colors' : 'px-4 py-2 text-sm font-medium border border-gray-200 ' + (b==='federal'?'rounded-l-lg':'') + (b==='todos'?'rounded-r-lg':'') + ' filter-btn-inactive transition-colors';
});
let datos = filtro === 'todos' ? programasActivos : programasActivos.filter(i => i.tipo.toLowerCase() === filtro);
// Ordenar: Mayor a menor avance
datos.sort((a, b) => b.avance - a.avance);
datos.forEach(prog => {
let barColor = prog.avance >= 70 ? 'bg-green-600' : (prog.avance <= 20 ? 'bg-red-500' : 'bg-gob-dorado');
let extraBtn = '';
if(prog.id === 'unrc') extraBtn = `<button onclick="toggleDetailView(true)" class="w-full mt-4 bg-white border border-gob-guinda text-gob-guinda hover:bg-gob-guinda hover:text-white transition-colors py-2 px-4 rounded text-sm font-bold flex items-center justify-center"><i class="fas fa-book mr-2"></i> Ver Bitácora</button>`;
if(prog.id === 'ia') extraBtn = `<button onclick="toggleIADetailView(true)" class="w-full mt-4 bg-white border border-gob-guinda text-gob-guinda hover:bg-gob-guinda hover:text-white transition-colors py-2 px-4 rounded text-sm font-bold flex items-center justify-center"><i class="fas fa-microchip mr-2"></i> Ver Bitácora</button>`;
if(prog.id === 'bachillerato') extraBtn = `<button onclick="toggleBachilleratoDetailView(true)" class="w-full mt-4 bg-white border border-gob-guinda text-gob-guinda hover:bg-gob-guinda hover:text-white transition-colors py-2 px-4 rounded text-sm font-bold flex items-center justify-center"><i class="fas fa-school mr-2"></i> Ver Bitácora</button>`;
// Ajuste visual para >100%
let visualWidth = prog.avance > 100 ? 100 : prog.avance;
container.innerHTML += `
<div class="bg-white rounded-xl shadow border border-gray-100 flex flex-col h-full hover:shadow-lg transition-all duration-300 animate-fade-in p-6">
<div class="flex justify-between items-start mb-4">
<div class="flex items-center">
<div class="w-12 h-12 rounded-full bg-gob-light flex items-center justify-center text-gob-guinda mr-4"><i class="fas ${prog.icon} text-lg"></i></div>
<div>
<h3 class="font-bold text-gray-800 text-lg leading-tight">${prog.titulo}</h3>
<span class="text-[10px] font-bold uppercase px-1.5 py-0.5 rounded mt-1 inline-block ${prog.tipo === 'Federal' ? 'bg-gob-guindaDark text-white' : 'bg-gray-200 text-gray-700'}">${prog.tipo}</span>
${prog.presupuesto !== 'N/A' && prog.presupuesto !== 'Sin presupuesto' ? `<span class="text-xs font-semibold text-gob-dorado bg-yellow-50 px-2 py-0.5 ml-1 rounded border border-yellow-100 inline-block">Presupuesto: ${prog.presupuesto}</span>` : ''}
${prog.presupuesto === 'Sin presupuesto' ? `<span class="text-xs font-semibold text-gray-500 bg-gray-50 px-2 py-0.5 ml-1 rounded border border-gray-200 inline-block">Sin presupuesto</span>` : ''}
</div>
</div>
</div>
<div class="mb-2"><span class="px-2 py-1 text-xs font-bold rounded bg-gray-100 text-gray-600 uppercase border border-gray-200">${prog.estado}</span></div>
<p class="text-sm font-medium text-gray-800 mb-2">Meta: ${prog.meta}</p>
<div class="mb-2">
<div class="flex justify-between text-sm mb-1">
<div class="flex flex-col">
<span class="font-bold text-gray-600">Avance</span>
${prog.extraAvanceInfo ? `<span class="text-[10px] text-gray-500 font-medium">${prog.extraAvanceInfo}</span>` : ''}
</div>
<span class="font-bold text-gob-guinda text-lg">${prog.avance}%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-4 overflow-hidden"><div class="${barColor} h-4 rounded-full progress-bar-striped transition-all duration-1000" style="width: ${visualWidth}%"></div></div>
</div>
<p class="text-xs text-gray-500 italic bg-gray-50 p-3 rounded border-l-2 border-gob-guinda mt-2"><i class="fas fa-info-circle mr-1"></i> ${prog.obs}</p>
${extraBtn}
</div>`;
});
}
// Datos y función Tabla 2026 (Simplificada para espacio)
const programas2026 = [
{nombre:"Semilleros Creativos", resp:"Cultura Federal", estado:"Planeación", prioridad:"Alta", tipo:"Federal"},
{nombre:"Juegos para la Paz", resp:"SEP / Bienestar", estado:"Por Iniciar", prioridad:"Media", tipo:"Federal"},
{nombre:"Protocolo Acoso Escolar", resp:"SEE", estado:"Revisión", prioridad:"Alta", tipo:"Estatal"},
{nombre:"Teatro Escolar", resp:"SEE / SECUM", estado:"Programación", prioridad:"Media", tipo:"Estatal"},
{nombre:"Equipamiento Modulares", resp:"SEE / SEP", estado:"Enero 2026", prioridad:"Alta", tipo:"Federal"},
{nombre:"Inauguración URC Fase 1", resp:"Gobierno", estado:"Marzo 2026", prioridad:"Crítica", tipo:"Federal"},
{nombre:"Educación Reinserción", resp:"SEE", estado:"Convenio", prioridad:"Alta", tipo:"Estatal"},
{nombre:"Escuelas UNESCO", resp:"UNESCO / SEE", estado:"Exploración", prioridad:"Baja", tipo:"Estatal"},
{nombre:"Jornaleros Agrícolas", resp:"CONAFE", estado:"Diagnóstico", prioridad:"Media", tipo:"Federal"},
{nombre:"Jornadas por la Paz", resp:"Gobierno", estado:"Programación", prioridad:"Alta", tipo:"Federal"},
{nombre:"Gestión FAM 2026 (ITD)", resp:"IEMSYSEM", estado:"Planeación", prioridad:"Alta", tipo:"Federal"}
];
function filtrarTabla(filtro) {
const tbody = document.getElementById('tabla-futuro-body');
tbody.innerHTML = '';
['federal', 'estatal', 'todos'].forEach(b => {
const btn = document.getElementById('btn-filtro-' + b);
btn.className = b === filtro ? 'px-4 py-2 text-sm font-medium border border-gray-200 ' + (b==='federal'?'rounded-l-lg':'') + (b==='todos'?'rounded-r-lg':'') + ' filter-btn-active transition-colors' : 'px-4 py-2 text-sm font-medium border border-gray-200 ' + (b==='federal'?'rounded-l-lg':'') + (b==='todos'?'rounded-r-lg':'') + ' filter-btn-inactive transition-colors';
});
let continuidad = programasActivos.map(p => ({nombre: p.titulo, resp: p.tipo==="Federal"?"Gobierno/SEE":"SEE", estado:"Continuidad", prioridad:"Alta", tipo:p.tipo}));
let lista = [...continuidad, ...programas2026];
let datos = filtro === 'todos' ? lista : lista.filter(i => i.tipo.toLowerCase() === filtro);
datos.sort((a, b) => (a.tipo === 'Federal' && b.tipo !== 'Federal') ? -1 : 1);
datos.forEach(item => {
tbody.innerHTML += `<tr class="hover:bg-gray-50"><td class="px-6 py-4"><span class="px-2 py-1 text-xs font-bold rounded-full ${item.tipo==='Federal'?'bg-gob-guinda text-white':'bg-gob-dorado text-white'}">${item.tipo}</span></td><td class="px-6 py-4 text-sm font-bold text-gray-900">${item.nombre}</td><td class="px-6 py-4 text-sm text-gray-600">${item.resp}</td><td class="px-6 py-4"><span class="px-2 text-xs font-semibold rounded-full bg-gray-100 text-gray-800 border border-gray-200">${item.estado}</span></td><td class="px-6 py-4 text-sm font-bold text-gob-guinda">${item.prioridad}</td></tr>`;
});
}
function switchTab(tabId) {
document.getElementById('tab-avances').classList.add('hidden');
document.getElementById('tab-futuro').classList.add('hidden');
document.getElementById('btn-tab-avances').className = 'flex-1 min-w-[180px] py-4 text-center text-lg focus:outline-none transition-colors duration-200 tab-inactive';
document.getElementById('btn-tab-futuro').className = 'flex-1 min-w-[180px] py-4 text-center text-lg focus:outline-none transition-colors duration-200 tab-inactive';
document.getElementById(tabId).classList.remove('hidden');
document.getElementById('btn-'+tabId).className = 'flex-1 min-w-[180px] py-4 text-center text-lg focus:outline-none transition-colors duration-200 tab-active';
}
// Init
filtrarCards2025('todos');
filtrarTabla('todos');
</script>
</body>
</html>Block Based Themes Made simple
A placeholder description that you can replace with your own content.
Variaciones de estilos
A placeholder description that you can replace with your own content.
Patrones incorporados
A placeholder description that you can replace with your own content.
Powered by Blocks
A placeholder description that you can replace with your own content.