Lo que cambió y por qué
El feedback fue directo: la página se sentía genérica, sin pulido. La revisamos pieza por pieza con dos reglas claras: cero apariencia de plantilla y cada decisión visual tiene que sumar al alumno.
Hero con anillo de progreso
Antes era una barra horizontal con el porcentaje al lado. Ahora es un anillo circular que se anima al cargar la página, con el porcentaje en el centro y un mini-icono de tu arquetipo flotando como un sello en la esquina. Si tu día es perfecto y tu cumplimiento semanal supera el 80%, el anillo se ilumina con el color de tu arquetipo.
Arquetipos sin emojis genéricos
Antes los arquetipos llevaban emojis 🎯 ⚡ 🛡️ 🚀 👑 — convencional, de plantilla. Ahora cada arquetipo tiene su propio icono en su color:
- Analista disciplinado → brújula esmeralda
- Aprendiz impulsivo → rayo ámbar
- Principiante cauteloso → escudo celeste
- Crecimiento agresivo → cohete rosa
- Profesional consistente → corona dorada
- Reactor emocional → cerebro púrpura
- Swing estratégico → línea ascendente azul
El brillo ambiental del hero también se ajusta al color de tu arquetipo — la página entera respira con tu identidad.
Indicadores con barritas de tendencia
Cada indicador tiene su icono propio y debajo, una barrita lineal que se anima al cargar mostrando la magnitud del valor. El "Cumplimiento semanal" se anima con su % real, el "Score" muestra la diferencia (positiva o negativa) versus hace 30 días, y el "Rango" trae tu nivel al lado.
Barra superior unificada
La barra de Ajustes, Tour y Lockdown estaba como botones sueltos. Ahora vive como una sola barra con efecto vidrio y línea de luz arriba; los iconos cambian de color al pasarles por encima.
Encabezados de sección
Cada bloque ("Tu coach", "Hoy te toca", "Reglas y hábitos", "Lo que la academia te recomienda") tiene un encabezado con un texto pequeño en mayúsculas arriba del título y dos líneas finas a los costados que crean sensación de "capítulo".
Botón "Nueva regla" con gradiente
El botón principal de crear regla pasó de un botón simple a uno con gradiente y un brillo direccional; el icono "+" gira al pasarle por encima. Útil sin ser ruidoso.
Bloque "Ver evolución y calendario"
Antes era un texto con flechita. Ahora es una tarjeta con icono propio, una etiqueta de "Histórico" y la flecha que gira al expandir.
Mobile + desktop pulido
- En el celular: el anillo y el arquetipo van uno al lado del otro arriba, después el saludo y el nombre, y abajo los indicadores acomodados (uno grande y dos chicos).
- En desktop: el anillo y el arquetipo quedan fijos a la izquierda y los indicadores y el saludo van a la derecha.
Mismo nivel de detalle visual en ambos formatos — nunca colapsamos todo en una pila plana cuando se reduce el tamaño.