feat: app completa recordaLexia (fases 1-5)

App web familiar de rutinas visuales para niños con TDAH: muestra cada día el
material del cole y las rutinas de tarde, con gamificación por monedas y tienda
de recompensas. Multi-niño y bilingüe ES/CA. Uso doméstico/homelab.

Backend (Spring Boot 3.5 / Java 21 / Gradle):
- Dominio por capas, PostgreSQL + Liquibase, datos semilla.
- API REST con DTOs: /today, toggle con monedas y bonos de bloque/día, monedero,
  tienda/canje, ajustes y CRUD del panel de padres.
- Seguridad ligera por PIN (BCrypt + sesion en memoria), sin Keycloak.
- Tests JUnit: generacion del dia, monedas/bonos con reversion, canje, seguridad.

Frontend (Angular 19, standalone + signals):
- Perfiles, Home (Tablero y Foco), Tienda y panel de padres (5 pestañas).
- Tipografia OpenDyslexic conmutable (accesibilidad), i18n ES/CA, TTS y sonido.
- Tokens de diseño fieles al handoff (paleta, animaciones, monedas voladoras).

Empaquetado:
- Docker multi-stage + docker-compose (PostgreSQL + backend + Nginx).
- Decisiones de arquitectura documentadas en docs/adr.

frontend/src/app/features/profiles/profile-select.component.scss

@@ -0,0 +1,92 @@
+:host {
+  display: block;
+}
+
+.profiles {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-6);
+  padding: var(--space-6) var(--space-4);
+
+  &__title {
+    margin: 0;
+    font-size: 2.4rem;
+    text-align: center;
+    color: var(--text-strong);
+  }
+
+  &__msg {
+    color: var(--text-1);
+    text-align: center;
+  }
+
+  &__grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-5);
+    justify-content: center;
+  }
+
+  &__parents {
+    all: unset;
+    cursor: pointer;
+    color: var(--text-3);
+    font-family: var(--font-display);
+    font-weight: 600;
+    padding: 10px 18px;
+    border-radius: var(--radius-pill);
+  }
+  &__parents:hover { color: var(--text-1); background: var(--surface-soft); }
+}
+
+// Tarjeta de niño: grande, con su color de acento, animación de entrada.
+.kid {
+  all: unset;
+  cursor: pointer;
+  box-sizing: border-box;
+  width: 200px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-5);
+  background: var(--surface);
+  border: var(--card-border-width) solid color-mix(in srgb, var(--c) 35%, #fff);
+  border-radius: var(--radius-card);
+  box-shadow: var(--shadow-card);
+  transition: transform 0.15s, box-shadow 0.2s;
+  animation: slideUp 0.4s ease both;
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-soft);
+  }
+  &:active { transform: scale(0.98); }
+
+  &__mascot {
+    font-size: 84px;
+    line-height: 1;
+    animation: floatY 3s ease-in-out infinite;
+  }
+  &__name {
+    font-family: var(--font-display);
+    font-weight: 700;
+    font-size: 1.5rem;
+    color: var(--text-strong);
+  }
+  &__coins {
+    font-family: var(--font-display);
+    font-weight: 700;
+    color: var(--coin-text);
+    background: var(--coin-bg);
+    padding: 4px 14px;
+    border-radius: var(--radius-pill);
+  }
+  &__age {
+    font-size: 0.9rem;
+    color: var(--text-3);
+  }
+}