🏫 Estructura Organizacional Educativa

Actúa como un diseñador organizacional y desarrollador web experto. Crea un ORGANIGRAMA INTERACTIVO en HTML sobre [ORGANIZACIÓN/INSTITUCIÓN]. CARACTERÍSTICAS DEL ORGANIGRAMA: 1. Archivo único HTML + CSS + JavaScript (sin librerías externas) 2. Estructura jerárquica VERTICAL (de arriba hacia abajo) 3. Diseño glassmorphism moderno 4. Nodos con información detallada en modales 5. Botones ℹ en cada nodo para ampliar información 6. Colores por nivel jerárquico 7. Líneas de conexión mostrando dependencias 8. Footer con modal del prompt maestro ESTRUCTURA JERÁRQUICA: Nivel 1 - ALTA DIRECCIÓN: - Color: Púrpura (#7c3aed) - Tamaño: Grande (min-width: 200px) - Ejemplos: Director General, CEO, Presidente - Badge: "Nivel Directivo" Nivel 2 - SUBDIRECCIÓN: - Color: Púrpura (#7c3aed) - Reporta a: Nivel 1 - Ejemplos: Subdirector, VP, Gerente General Nivel 3 - COORDINACIONES/GERENCIAS: - Color: Azul (#2563eb) - Reporta a: Nivel 2 - Ejemplos: Coordinador Académico, Gerente de Ventas - Badge: "Coordinación" Nivel 4 - DEPARTAMENTOS/ÁREAS: - Color: Verde (#059669) - Reporta a: Nivel 3 - Ejemplos: Depto. Ciencias, Área de Marketing - Badge: "Departamento" Nivel 5 - PERSONAL OPERATIVO: - Color: Naranja (#d97706) - Reporta a: Nivel 4 - Ejemplos: Docentes, Vendedores, Analistas - Badge: "Personal Docente/Operativo" Nivel 6 - APOYO/SERVICIOS: - Color: Rojo (#dc2626) - Soporte transversal - Ejemplos: TI, RR.HH., Psicología, Biblioteca - Badge: "Apoyo" - Nota: Separar con línea punteada DISEÑO DE CADA NODO: Estructura HTML del nodo: Elementos visuales: - Emoji representativo según cargo (👔💼📚🔬👨‍🏫) - Borde 3px del color del nivel - Border-radius: 15px - Box-shadow con elevación - Hover: translateY(-5px) - Min-width: 200px, max-width: 250px LÍNEAS DE CONEXIÓN: Entre niveles consecutivos: - Línea vertical de 40px (3px grosor) - Gradiente del color correspondiente - Posición: center Para ramificaciones múltiples: - Línea horizontal conectando hermanos - Líneas verticales a cada hijo - Usar position: relative y absolute EJEMPLO PARA INSTITUCIÓN EDUCATIVA: Nivel 1: Director General 👔 Nivel 2: Subdirector 📋 Nivel 3: Coord. Académica 📚, Coord. Convivencia 🎯, Coord. Administrativa 💼 Nivel 4: Dept. Ciencias 🔬, Dept. Humanidades 📖, Dept. Artes 🎨 Nivel 5: Docentes 👨‍🏫, Tutores 👨‍🎓 Nivel 6 (Apoyo): Psicología 🧠, Biblioteca 📚, Sistemas 🖥️, Enfermería 🏥 INFORMACIÓN DETALLADA EN MODALES: Para cada cargo, crear objeto con: { title: '[Emoji] [Nombre del Cargo]', color: '[Color hex del nivel]', definition: 'Descripción completa del cargo (150-200 palabras)', responsibilities: [ 'Responsabilidad 1', 'Responsabilidad 2', ...5-8 responsabilidades ], requirements: 'Requisitos y perfil del cargo (100-150 palabras)', skills: [ 'Habilidad 1', 'Habilidad 2', ...5-7 habilidades ], reports_to: 'A quién reporta', supervises: 'A quién supervisa', data: { 'Formación': '...', 'Experiencia': '...', 'Dedicación': '...', 'Personal a cargo': '...' } } LEYENDA DEL ORGANIGRAMA: Incluir cuadro de leyenda arriba del organigrama: - Nivel Dirección: Cuadro púrpura - Nivel Coordinación: Cuadro azul - Nivel Departamentos: Cuadro verde - Nivel Docentes/Operativo: Cuadro naranja - Nivel Apoyo: Cuadro rojo FUNCIONALIDADES INTERACTIVAS: 1. Click en botón ℹ → Abre modal con info detallada 2. Hover sobre nodo → Elevación y sombra aumentada 3. Scroll horizontal si organigrama es muy ancho 4. Modal colapsable con botón minimizar 5. Botón footer → Modal con este prompt DISEÑO VISUAL: - Fondo: Gradiente azul-púrpura (#1e3c72 → #2a5298 → #7e22ce) - Partículas flotantes animadas - Glassmorphism en header y footer - Container blanco semi-transparente - Typography: Fredoka (títulos), Poppins (texto) - Responsive para tablets y móviles RESPONSIVE: Desktop: Todos los nodos visibles horizontalmente Tablet: Flex-wrap para acomodar nodos Mobile: - Reducir tamaño nodos (160px) - Stack vertical si es necesario - Mantener interactividad completa CONTENIDO PEDAGÓGICO: Cada cargo debe incluir: - Definición clara del rol (150-200 palabras) - 5-8 responsabilidades principales - Requisitos de formación y experiencia - 5-7 habilidades clave necesarias - Relaciones jerárquicas (reporta a / supervisa) - Datos cuantitativos relevantes EJEMPLO PROMPT CORTO: "Crea un organigrama interactivo HTML de [EMPRESA DE SOFTWARE]. Estructura: - CEO - CTO, CFO, CMO - Dev Team, Finance Team, Marketing Team - Desarrolladores, Contadores, Diseñadores - Apoyo: HR, IT Support Cada nodo con botón ℹ que muestra: - Responsabilidades - Requisitos - Habilidades - A quién reporta - Personal a cargo Diseño moderno glassmorphism, colores por nivel."