Ajustes, onboarding y feedback

Settings, tema, onboarding, EmptyState, Toast y transacciones recurrentes en Targ-Apps-Finance.

Settings (`pages/Settings.js`, TAF-019 & TAF-018)

Página .taf-settings-page con secciones apiladas y separadores sutiles (sin card soup). Cabecera vía PageHeader.

Sección	Implementación
Apariencia	`.taf-settings-section` + icono Lucide `palette` + `ThemeToggle` (iconos `sun` / `moon` / `monitor`)
Regional	Icono `globe` + `useSettings()` — `defaultCurrency`, `locale`, `weekStartsOn` en Chroma-Fs (`logic/settings.js`)
Copia de seguridad (TAF-018)	Icono `hardDrive`; export (`download`) e import (`upload` + `folderOpen`) en `.taf-settings-backup`
Perfil local	Icono `user` + identidad del registro + «Cerrar sesión» (`logOut`)
Almacenamiento	Icono `info` + estadísticas `.taf-settings-stat` (cuentas, transacciones, categorías, versión)
Animación de entrada	`animateSettingsReveal` vía AnimeJS con revelación escalonada de `.taf-settings-section`

Cambios de preferencias disparan toast de confirmación. Errores de import muestran toast y banner .taf-settings-error con data-slot="import-error".

Tema claro/oscuro (TAF-020)

Pieza	Detalle
Persistencia	`settings.theme`: `light` \| `dark` \| `system`
Aplicación	`SettingsProvider` → `subscribeTheme(() => settings().theme)`
System	Sin `data-theme` en `<html>`; CSS usa `@media (prefers-color-scheme: dark)`
UI	Segmented control `ThemeToggle` con iconos Lucide (`sun`, `moon`, `monitor`) en `Settings`
Transición AnimeJS	`animateThemeSwitch()` dispara un micro-escalado suave durante el cambio de tema
Tokens	Plugin `chroma-style` (`tokens.css` y `utilities.css`) + tokens financieros `--finance-*` en `src/styles/finance.css`

Transacciones recurrentes (TAF-015)

Pieza	Detalle
Modelo	`createRecurringRule`, `recurringId` en transacciones generadas
Lógica pura	`logic/recurrence/generateOccurrences.js` — weekly/monthly/yearly con ancla de día
Sync	`materializeRecurringOccurrences` en boot de `FinanceProvider` (`useEffect`)
UI	`pages/RecurringTransactions.js` — `PageHeader`, formulario en tarjeta `.taf-recurring-form`, listado `.taf-recurring-card` con badge de estado (Activa/Pausada), icono `repeat` y acciones Lucide (pausar/reanudar/eliminar)
Vacío	`EmptyState` sin emoji — «Sin reglas recurrentes» + CTA «Nueva regla»
Ruta	`#/recurring` en `logic/router.js` y `NavBar`

Colección recurring incluida en export/import (COLLECTIONS en logic/persist.js).

Estilos: src/styles/finance.css — namespace .taf-recurring-*.

Onboarding (`pages/Onboarding.js`, TAF-024)

Pantalla completa (sin Layout), alineada visualmente con #/auth: Grift, tokens --cs-*, monograma Targ (TargMark) y copia en español directo.

Bloque	Implementación
Cabecera	Eyebrow «Targ Apps» + titular «Primera cuenta» + texto de apoyo
Firma visual	Regla horizontal tipo ledger con marcador `01` en `--cs-primary` (`.taf-onboarding-ledger`)
Formulario	`AccountForm` con `variant="onboarding"`, `hideName: true`, moneda default de `useSettings()`
Nombre de cuenta	`resolveOnboardingAccountName()` — `profile.name` del registro local (fallback «Mi cuenta»)
CTA	`Crear cuenta` → `addAccount({ name, type, initialBalance, currency, isDefault: true })`; si `result.valid`, hash `#/dashboard`
Animación	`animateOnboardingEnter()` en la tarjeta; `prefers-reduced-motion` respetado
Guard	`syncOnboardingRoute()` en `FinanceProvider` (`logic/onboarding.js`)

Estilos en src/styles/finance.css (.taf-onboarding-*). Componente compartido src/components/TargMark.js.

Onboarding está completo cuando onboardingComplete es true en el snapshot, o hay al menos una cuenta (migración). addAccount válido llama markOnboardingComplete(). El flag no se limpia si después se eliminan todas las cuentas: el usuario no vuelve al wizard.

EmptyState (`src/components/EmptyState.js`, TAF-022)

Componente visual enriquecido con:

Ilustración geométrica SVG nativa (.empty-svg-graphic) con soporte para tokens de tema.
Animación de partículas e iconos flotantes vía AnimeJS (animateEmptyState).
Soporte para icon, title, message, actionLabel, onAction y context (reports, transactions, accounts, etc.).
Botón de acción con estilo Chroma-Style (.cs-btn .cs-btn-primary).

Toast (`src/components/Toast.js`, TAF-022)

Aspecto	Detalle
Store	`logic/store/toastStore.js` — lista reactiva + `showToast(message, variant)` + `dismissToast(id)`
Render	`For` sobre `toasts()` con `role="status"` / `aria-live`
Diseño	Iconos distintivos por variante (✓ Éxito, ✕ Error, ⚠ Advertencia, ℹ Info) + botón de cierre manual
Auto-dismiss	4 segundos por toast
Montaje	Único en `Layout.js`
Estilos	Variantes `success` / `error` / `warning` / `info` en `finance.css` con `backdrop-filter: blur(12px)`

Convención

Atributos data-page, data-slot y data-component alineados con páginas core.