Quiero que diseñes una interfaz mobile-first altamente profesional y accesible para una aplicación web llamada NeuroSpot, desarrollada en Next.js con React y Tailwind CSS, usando componentes modernos como los de shadcn/ui. Esta aplicación está dirigida a niños y tutores legales para la detección temprana de posibles signos de TDAH mediante juegos interactivos y pruebas clínicas. La solución será utilizada en entornos educativos, clínicos o domésticos, y debe estar optimizada para móviles pero adaptarse perfectamente a escritorio.
La interfaz debe ser limpia, minimalista, emocionalmente neutral, con una estética moderna, intuitiva y sin sobrecarga visual, manteniendo un equilibrio entre lo lúdico (para los niños) y lo profesional (para los adultos).

🔷 Características clave: Mobile-first, 100% responsive
Tipografía legible y moderna
Compatibilidad modo oscuro/claro
Diseño accesible (uso de etiquetas ARIA, contraste alto, navegación intuitiva)
Estilo visual inspirado en webs como:
awwwards.com
godly.website
mobbin.com
curated.design
dark.design
Transiciones suaves, animaciones sutiles, microinteracciones

🧩 Estructura de pantallas a generar:
Pantalla de Inicio
Logo de NeuroSpot en el header
Título: “Bienvenid@ a NeuroSpot”
Descripción breve del propósito de la app (“Evaluación interactiva para detectar posibles indicadores de TDAH en niños, mediante juegos cognitivos breves”)
Botón principal “Comenzar Evaluación”
Opción inferior para tutor: “Ver resultados anteriores”
Pantalla de Consentimiento Legal
Explicación clara y en lenguaje accesible sobre consentimiento para uso de datos por parte del tutor
Checkbox de aceptación obligatorio
Botón “Acepto y continuar”

Panel Principal del Niño
Nombre del niño (por ejemplo: “Hola, Leo 👋”)
Lista visual con tarjetas de ejercicios disponibles:

Test de Stroop
Juego de Atención Sostenida
Lectura en voz alta
Prueba de Memoria Visual
Cámara activada para ejercicio de observación

Cada tarjeta debe incluir:
Icono representativo del ejercicio
Tiempo estimado
Botón “Jugar”
Vista de un Ejercicio Interactivo (p. ej. Stroop Test)
Encabezado con nombre del ejercicio
Instrucciones claras y visuales (con ejemplos si aplica)
Área de interacción principal (mostrar palabra de color, botones con colores)
Barra de progreso o tiempo restante
Botón para pausar/abandonar ejercicio
Pantalla de Resultados para Tutores
Mensaje de cierre amigable (“¡Has completado la evaluación!”)
Resumen visual de resultados (ej. tarjetas o gráfica tipo semáforo por cada ejercicio: Verde = normal, Amarillo = a observar, Rojo = posible indicador)
Botón para descargar informe PDF (placeholder)
Advertencia clara de que esto no sustituye diagnóstico clínico.

🎨 Branding Visual: Paleta de colores principal:
Azul suave (#3A8DFF o similar): transmite calma y concentración
Verde menta (#62DDBD): para llamadas a la acción o aciertos
Gris neutro (#F4F4F5 y #1F2937): para fondo y textos
Toques de naranja/amarillo para alertas o feedback llamativo

Tipografía recomendada:
Sans serif moderna, como Inter, Manrope o Rubik
Iconografía: minimalista, flat, amigable (inspirada en Material Symbols)

⚙️ Tecnología a respetar: Framework: Next.js (13 o superior, con App Router)
Estilos: Tailwind CSS
Librerías de UI: shadcn/ui, lucide-react
Código semántico y limpio (no usar elementos genéricos tipo div innecesarios)

🎁 Extras: Agrega placeholders para grabación de audio y captura de cámara
Usa componentes reutilizables: Botón, Card, Modal, Alert, etc.
Agrega estados de carga, errores y confirmaciones interactivas
Quiero una solución visualmente atractiva, emocionalmente empática y técnicamente escalable, lista para iterar y conectar con backend AWS vía API REST. El diseño debe transmitir seguridad, innovación y empatía. No es un juguete, pero tampoco debe parecer frío o clínico.
No me des una primera versión sin que todo lo anterior se cumpla