BizCure: Simulador de Diagnóstico Empresarial (o BizCure: Agencia de Triaje Publicitario)

 Eres un experto en desarrollo de aplicaciones web con dominio en HTML, CSS y JavaScript.

Crea una aplicación PWA (Progressive Web App) con los siguientes requisitos:

### Nombre de la Aplicación

BizCure: Simulador de Diagnóstico Empresarial (o BizCure: Agencia de Triaje Publicitario)

### Propósito / Función Principal

El propósito de la aplicación web es servir como un simulador interactivo de diagnóstico empresarial para estructurar y evaluar las necesidades o crisis de innovación de una marca o compañía.

Sus funciones principales integradas son:

Guiar el análisis causal: Digitalizar el Diagrama de Ishikawa, adaptado al entorno publicitario (Medios, Mensaje, Mercado, Management y Métodos), permitiendo la aplicación interactiva de la técnica de los "5 Porqués" mediante preguntas guía automatizadas.

Estructurar la relación causa-efecto: Proveer un Árbol de Problemas dinámico donde se trasladen los hallazgos para visualizar claramente los síntomas visibles (ramas), el problema central (tronco) y las raíces operativas.

Priorización y Síntesis: Permitir la selección de la causa raíz más urgente a resolver mediante estrategias de diseño, generando automáticamente un informe final ("Pitch de Triaje") que articula el problema y justifica la decisión estratégica para exportarlo como dossier.

### Público Objetivo

3. Público Objetivo  De acuerdo con los datos de la sesión, el público objetivo directo de esta aplicación son:  Estudiantes de Pregrado cursando la carrera de Diseño Publicitario y Comunicación.  Jóvenes matriculados en la asignatura Taller de Emprendimiento e Innovación Publicitaria.  Usuarios que interactúan de forma colaborativa, organizados en equipos de 5 personas que asumen el rol de "agencias consultoras" o diagnosticadores.  Docentes y facilitadores que supervisan la sesión clínica, quienes utilizarán la herramienta como medio para visualizar el proceso de análisis y realizar la evaluación formativa.

### Funcionalidades Deseadas

¡Excelente enfoque para la experiencia de usuario! Transformar el lienzo de diagnóstico en una narrativa interactiva mediante el desplazamiento (scroll) encaja a la perfección con el Diseño Universal para el Aprendizaje (DUA), manteniendo la atención y guiando la carga cognitiva de los estudiantes a través de una experiencia casi cinematográfica.

Tomando los conceptos de la librería de animación que compartiste y tu rol como Arquitecto de experiencia de desplazamiento, he redactado las funcionalidades deseadas en texto normal y descriptivo. De esta manera, la inteligencia artificial entenderá exactamente la lógica de las animaciones y el comportamiento visual que esperas sin enredarse en código complejo de forma prematura.

Aquí tienes la sección 4 para agregar a tu constructor de prompts:

4. Funcionalidades Deseadas (Interacción y Lógica Narrativa)

La aplicación no debe ser un formulario estático, sino una experiencia web cinematográfica impulsada por el desplazamiento del usuario. El desarrollador debe actuar como un Arquitecto de experiencia de desplazamiento, integrando las siguientes funcionalidades:

Narrativa Impulsada por el Desplazamiento (Scroll Storytelling): El progreso a través de las fases de Kolb (desde la experiencia concreta del Iceberg hasta la conceptualización en el Árbol) debe sentirse como un viaje. Al desplazar la página hacia abajo, el usuario debe "sumergirse" desde la superficie del problema hacia las raíces.

Ajuste de Desplazamiento y Secciones Pegajosas (Scroll Snapping & Sticky Sections): La pantalla debe anclarse suavemente en cada fase del diagnóstico (Iceberg, Ishikawa, Árbol, Síntesis) para que el equipo de estudiantes no pierda el foco visual durante su debate.

Animaciones en Cascada y Líneas de Tiempo: Los elementos gráficos (como las espinas del Ishikawa o las ramas del árbol) no deben aparecer de golpe. Deben revelarse secuencialmente utilizando retrasos escalonados (efectos tipo stagger) para guiar la lectura de izquierda a derecha o de arriba hacia abajo.

Microinteracciones Controladas: Incorporar sutiles indicadores de progreso en el lateral de la pantalla que muestren en qué etapa del triaje se encuentra la "agencia consultora". Además, las animaciones de entrada deben poder reproducirse de forma fluida pero sin saturar la vista, manteniendo un equilibrio entre impacto visual y rendimiento.

Lógica de Diagnóstico Dinámico (Interacción Funcional):

Capacidad de agregar múltiples campos de texto dinámicos en cada espina del diagrama para responder a los "5 Porqués".

Interactividad para seleccionar y resaltar visualmente (priorizar) la causa raíz definitiva dentro del Árbol de Problemas.

Un motor de síntesis que recopile los textos ingresados y genere automáticamente el "Pitch del Consultor" final en texto normal, listo para leerse y exportarse como dossier sin elementos visuales distractores.

### Diseño y Estilo Visual

El diseño visual de la aplicación fusionará la estética vanguardista del movimiento cubista con la identidad gráfica institucional, creando una experiencia interactiva que refleje visualmente la deconstrucción analítica de un problema empresarial. El desarrollador deberá aplicar las siguientes directrices:Síntesis y Geometrización Analítica: La interfaz debe prescindir del naturalismo, la perspectiva óptica tradicional y la imitación literal. Las distintas fases del diagnóstico (Iceberg, Ishikawa, Árbol de Problemas) se construirán mediante la deconstrucción hacia formas geométricas esenciales. Se utilizarán bloques de contenido asimétricos que simulen la superposición de planos, mostrando múltiples ángulos del problema en una sola vista.Paleta de Colores Institucional (Branding IDC): Fiel a la supresión del claroscuro, el diseño cromático se aplicará en bloques sólidos, planos y puros, utilizando estrictamente los colores del Instituto de Diseño y Comunicación: amarillo para llamados a la acción e interacciones (#f3a100), azul para contenedores y estructura (#0072b9), y tonos grises para las bases y tipografías (#555553 y #545452).  Estética de Collage Digital: Inspirado en la introducción cubista de técnicas no pictóricas, el lienzo de la aplicación web de un solo archivo actuará como un gran collage interactivo. Los inputs de texto, botones, pistas y tarjetas del diagrama aparecerán como "recortes" geométricos adosados sobre la pantalla, los cuales se reordenan secuencialmente a medida que el usuario hace scroll.  Predominio de la Forma sobre el Fondo: El fondo de la aplicación debe ser limpio para que el protagonismo recaiga enteramente en los elementos plásticos y en la arquitectura de la información. Las herramientas interactivas representarán la "cotidianidad corporativa" diseccionada analíticamente, guiando la atención del estudiante sin distracciones innecesarias.Recursos Gráficos y UI Embebida: Todo icono, ilustración geométrica o logotipo (incluyendo el logo del IDC) deberá integrarse directamente en formato base64 dentro del código, garantizando que la composición visual sea autosuficiente. La interfaz culminará con un bloque geométrico a modo de pie de página que integre el texto: "Mg. Mario Quiroz Martínez — Unidad didáctica Investigación e Innovación Tecnológica".

### Interacción y Comportamiento

Para garantizar que la aplicación web fluya de manera intuitiva y fomente el trabajo colaborativo sin fricciones técnicas, el comportamiento de la interfaz debe desarrollarse bajo estas reglas descritas en texto normal, priorizando una experiencia de usuario sin recargas de página:

Navegación Guiada y Suave: La transición entre las distintas fases (Iceberg, Ishikawa, Árbol y Síntesis) se realizará mediante desplazamientos automáticos en la misma pantalla. Al completar una etapa y hacer clic en el botón de continuar, la vista se deslizará fluidamente hacia el siguiente bloque de trabajo.

Generación Progresiva de Campos: En la fase de Ishikawa, los equipos podrán agregar espacios de texto de forma ilimitada para desglosar los "5 Porqués". Cada vez que interactúen con el botón de agregar dentro de una espina, aparecerá un nuevo campo de escritura desplegándose con un movimiento limpio.

Migración Inteligente de Datos: Para optimizar el tiempo de la clase y evitar la reescritura, el texto ingresado en el nivel más profundo de cada espina del Diagrama de Ishikawa se trasladará de manera automática a la zona de las raíces en el Árbol de Problemas. El sistema conectará estos valores en tiempo real.

Mecanismo de Priorización de Selección Única: En la sección del Árbol de Problemas, el equipo interactuará con las causas raíz para decidir cuál atacar. Al seleccionar una, esta se resaltará visualmente. Si cambian de opinión y hacen clic en otra causa, la selección anterior se desactivará. Esto obliga a la "agencia consultora" a tomar una decisión estratégica convergente.

Prevención de Errores y Avisos Amigables: Si un equipo intenta exportar el dossier o avanzar a la fase final sin haber definido el síntoma principal o sin haber priorizado una causa raíz, la interfaz mostrará un recordatorio visual sutil, destacando el campo vacío en color amarillo institucional para guiar su atención.

Construcción de Síntesis en Tiempo Real: A medida que los usuarios completan los diagnósticos y marcan sus decisiones, el "Pitch de Triaje" de la fase final se irá ensamblando al instante, mostrándose como texto normal y legible, preparándose para la lectura final del equipo.

### Tecnologías y Estructura

Para garantizar que la aplicación sea rápida, no requiera instalación y funcione perfectamente en las computadoras del aula o en los dispositivos de los estudiantes, la arquitectura técnica debe ser ligera y estar consolidada en un único archivo. El desarrollador deberá seguir las siguientes directrices tecnológicas, explicadas en texto normal:

Estructura Base (HTML5 Semántico): Todo el esqueleto de la aplicación vivirá en un solo archivo. Se utilizarán etiquetas de marcado claras para dividir la narrativa de la página en bloques lógicos: la zona de inmersión (Iceberg), la zona de análisis transversal (Ishikawa), la estructura jerárquica (Árbol) y el resumen ejecutivo (Síntesis).

Estilos y Maquetación (Tailwind CSS vía CDN): La estética cubista corporativa, la paleta de colores del Instituto, las transiciones suaves y la adaptación a diferentes tamaños de pantalla (diseño responsivo) se lograrán mediante este marco de trabajo. Se importará mediante un enlace directo en la cabecera del documento, evitando la necesidad de carpetas con archivos de estilo adicionales.

Interactividad y Motor Lógico (Vanilla JavaScript): El cerebro del simulador se construirá con código JavaScript puro y nativo, incrustado al final del archivo. Este código será el encargado de escuchar cuándo el estudiante hace clic o se desplaza, habilitar la aparición dinámica de las preguntas de "El Inquisidor", transferir los textos de las causas hacia el árbol y montar el discurso final sin necesidad de recargar la página.

Almacenamiento en Memoria Temporal: No se requerirá conexión a bases de datos ni servidores externos. Toda la información debatida y escrita por las "agencias consultoras" se gestionará en el momento. Si la página se cierra, el lienzo vuelve a quedar en blanco, ideal para un entorno de simulación rápida en clase.

Generador de Dossier Nativo: Para la evidencia de aprendizaje, se configurarán reglas de estilo específicas para impresión. El botón de exportación utilizará la función de imprimir del navegador, pero limpiará la pantalla para que el PDF resultante no muestre botones, paneles laterales ni herramientas de edición, entregando un reporte de diagnóstico visualmente impecable y listo para la rúbrica de coevaluación.

Con esta última sección, tienes tu Super Prompt completamente estructurado. Solo tienes que copiar desde el punto 1 hasta el 7 y pegarlo en Claude AI. La inteligencia artificial entenderá perfectamente no solo el código que debe generar, sino la intención pedagógica, visual y narrativa detrás de la herramienta.

### Sistema de Autenticación

La aplicación requiere login y registro almacenados en localStorage.

**Características requeridas:**

- Dado que la aplicación funcionará en un entorno de simulación en vivo sin base de datos, el sistema no utilizará un "login" tradicional con contraseñas, sino una pantalla de registro inicial que funcionará como la puerta de acceso al diagnóstico. El desarrollador deberá integrar las siguientes reglas:

Pantalla de Recepción: Al abrir la aplicación, antes de mostrar el "Iceberg", el sistema presentará un formulario limpio y con la estética corporativa solicitada, titulado "Registro de la Agencia Consultora".

Validación de Capacidad: El sistema obligará a registrar un mínimo de 2 integrantes y permitirá un máximo de 4 integrantes por equipo.

Campos de Identificación: Por cada estudiante, el formulario requerirá obligatoriamente dos campos de texto: "Nombres y Apellidos" y "Correo Institucional".

Comportamiento Dinámico: El formulario mostrará por defecto los espacios para los Estudiantes 1 y 2. Contará con un botón secundario que diga "Añadir Consultor", el cual agregará dinámicamente los bloques para el tercer y cuarto integrante. Al llegar a 4, el botón se ocultará o deshabilitará automáticamente.

Prevención de Avance: El botón principal de "Ingresar al Simulador" permanecerá bloqueado o mostrará una alerta visual amigable si los campos obligatorios del mínimo de integrantes (2) no están completos.

Firma Automática del Dossier: Los nombres, apellidos y correos ingresados en este paso inicial se almacenarán en la memoria temporal de la página y se imprimirán automáticamente en el encabezado del "Pitch de Triaje" y en la exportación del PDF final, asegurando que la autoría del trabajo grupal quede documentada para la rúbrica de evaluación.

**Funcionamiento del sistema:**

- Datos de usuarios guardados en localStorage como array/objeto

- Contraseñas con encriptación básica (hash mínimo)

- Sesión activa guardada en localStorage tras el login exitoso

- Verificar sesión al cargar la página para auto-login

- Redirigir al login si el usuario no está autenticado

- Solo usuarios autenticados acceden a las funciones principales

### Requisitos Adicionales

Los iconos y figugras que acompaña debe ser en formato svg, insertar el logotipo del idc y los colores Colores IDC #f3a100, #0072b9; #555553, #545452

### Instrucciones Finales

Entrega toda la aplicación en un único archivo HTML listo para ejecutarse.

Usa Bootstrap 5 para lograr un diseño moderno y responsivo.

Incluye service worker y manifest.json para funcionamiento offline e instalación como PWA.

Asegúrate de que el diseño sea completamente responsivo en dispositivos móviles.