PROMPT — Recurso web interactivo de investigación (PWA)

Eres un experto en desarrollo web (HTML, CSS y JavaScript). Crea una aplicación web interactiva tipo PWA en un solo archivo, responsiva e instalable, para el tema:

[TEMA / MODELO DE INVESTIGACIÓN] — p. ej. "Investigación Aplicada", "Metodología de la Investigación Científica", "Innovación Social", "Proyectos de Emprendimiento". Público objetivo: [p. ej. docentes / estudiantes de educación superior tecnológica]. Institución: [nombre] — usa el logotipo en [ruta/logo.png].

ESTILO VISUAL (obligatorio, coherente en toda la app):

• Paleta institucional: primario [#0072b9] (estructura, títulos, navegación), acento [#f3a100] (CTAs, palabras clave, bordes de énfasis), neutros de texto #33322f / #545452, fondos claros #eef0f2 y tarjetas #fff. Evita el negro puro.
• Colores por categoría/eje temático: asigna un color distinto a cada [eje/programa/línea] y úsalo consistentemente en tarjetas y comparadores.
• Tipografía: títulos en Poppins (700–800), cuerpo en Source Sans 3. Nada de Inter/Roboto/Arial.
• Componentes: tarjetas con border-radius 14–20px, sombras suaves, encabezado de tarjeta en color de categoría, badges tipo "pill", semáforos de estado (verde/ámbar/rojo). Sin gradientes agresivos ni emojis.
• Layout: barra lateral de navegación fija (azul, con logo arriba) que en móvil colapsa a pestañas horizontales scrollables; contenido principal con scroll independiente.

ESTRUCTURA POR SECCIONES (navegación lateral):

1. Presentación / Introducción — tarjeta destacada con el propósito del recurso.
2. Fundamento conceptual — definición, cita de autor (APA 7), comparación con conceptos afines (3 tarjetas), e importancia (3 tarjetas numeradas).
3. Navegación por [ejes/disciplinas/líneas] — una tarjeta por eje, con color propio, descripción y caso/ejemplo.
4. Comparador de casos — para cada eje: [problema, solución, proceso, resultados, impacto] en columnas.
5. Tarjetas de conceptos clave expandibles (<details>).
6. Línea de proceso — timeline vertical numerada de las etapas de [la metodología].
7. Formulario guiado de propuesta — con <fieldset>/<legend> por bloque: datos generales, alineamiento institucional (menús dependientes), problema, propuesta, objetivos, matriz de factibilidad (sliders 1–5 con índice y semáforo automáticos), inventario de recursos (estados), cláusula de uso de IA generativa, compromiso de cumplimiento (marco normativo [R.D. …]) y cronograma Gantt autocalculado entre dos fechas, con hitos de avance.
8. Generador de prompts — construye automáticamente, a partir del formulario, [N] prompts editables (p. ej. marco teórico y factibilidad), cada uno con tarjeta explicativa "¿qué hace? / ¿para qué sirve?", botón copiar, y opción de redactar con IA (usa window.claude.complete).

FUNCIONALIDAD:

• Guardado de borrador en localStorage; guía de llenado en modal indicando qué escribir en cada campo con ejemplos.
• Exportar a PDF (ventana de impresión) con logotipo institucional en el encabezado y bloque de firma de conformidad al final (nombre, correo y fecha).
• Validación visual de campos (:valid/:invalid, :focus-visible), transiciones suaves.
• manifest.json + service worker para uso offline e instalación.
• Entregar todo listo para ejecutarse y totalmente responsivo.

CONTENIDO: rellena las secciones con información rigurosa y real sobre [TEMA]; citas en APA 7 sin inventar fuentes.