Add planning docs, design system, and Stitch mockups

- CLAUDE.md: project guidance (stack, domain model, auth, i18n, gotchas)
- DESIGN.md: full design system spec derived from Stitch mockups (slate
  monochrome, Inter, shadcn-svelte, screen patterns for all 5 views)
- README.md: development plan with Justfile commands
- analysis/: functional spec (domain model, use cases, business rules)
- plan/: phase-by-phase implementation plans (Fase 0–4)
- .stitch/designs/: generated mockups (lists, shopping session, notes,
  tasks, list detail with frequency chips)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

plan/fase-2b-realtime-modo-compra.md

@@ -0,0 +1,40 @@
+### Fase 2b — Sincronización en Tiempo Real y Modo Compra
+**Duración estimada: 2–3 semanas**  
+**Objetivo: el diferencial del producto. Es la fase más compleja técnicamente.**
+
+#### 2b.1 Sincronización Realtime
+
+- [ ] Suscripción a `Postgres Changes` de Supabase Realtime sobre `items_compra` filtrada por `lista_id`
+- [ ] Suscripción a `Presence` de Supabase Realtime para indicador de miembros presentes en lista
+- [ ] Store Svelte `realtimeSync`:
+  - Gestiona el ciclo de vida de las suscripciones (subscribe/unsubscribe al entrar/salir de la lista)
+  - Aplica cambios remotos al estado local sin causar bucles
+  - Detecta conflicto last-write-wins: si el `updated_at` remoto > local, aplica remoto y muestra aviso visual
+
+#### 2b.2 Offline-First
+
+- [ ] Instalación y configuración de `idb` (wrapper de IndexedDB)
+- [ ] Esquema local en IndexedDB: `pending_ops`, `listas_cache`, `items_cache`
+- [ ] Cola de operaciones pendientes: cada mutación se escribe en `pending_ops` antes de llamar a Supabase
+- [ ] Service Worker (`@vite-pwa/sveltekit` + Workbox):
+  - Cache-first para assets estáticos
+  - Network-first con fallback a caché para rutas de la app
+  - Background sync para flush de `pending_ops` al recuperar conexión
+- [ ] Fallback manual de sync: al detectar `online` en el evento del navegador, flush de la cola (cubre Safari que no soporta Background Sync API)
+- [ ] Indicador de estado de sincronización en la UI: `sincronizado | sincronizando | sin conexión`
+
+#### 2b.3 Modo Compra
+
+- [ ] Ruta `/listas/[id]/compra` — UI dedicada al Modo Compra:
+  - Ítems en formato grande (mínimo 64px de altura), optimizado para pulsar con el pulgar
+  - Reordenamiento automático al marcar: pendientes arriba, marcados abajo (animación fluida con `flip`)
+  - Indicador de presencia: avatares de miembros que tienen la lista abierta simultáneamente
+  - Banner `sin conexión` cuando no hay red (los cambios se guardan en local)
+  - Botón prominente **"Finalizar compra"** — confirmación modal → lista pasa a `completada`
+  - Notificación push (si el usuario ha dado permiso) a otros miembros al finalizar
+- [ ] Rendimiento: 60fps en gama media, tap < 100ms (validar en Chrome DevTools con throttling)
+- [ ] Prueba de sincronización: dos dispositivos, misma lista, cambios visibles en < 1 segundo
+
+**Criterio de aceptación:** dos personas en el mismo supermercado, con cobertura inestable, pueden marcar ítems desde sus móviles y verse los cambios mutuamente en tiempo real. Si se pierde la conexión, los cambios locales se sincronizan al recuperarla.
+
+---