# Design System MallorcaTrabaja v2

Sistema visual unificado para web (Blade + Bootstrap) y app Flutter con direccion tecnologica-editorial.

## Objetivo

- Mantener consistencia visual y de interacción entre plataformas.
- Reducir deuda de UI centralizando estilos en tokens y componentes base.
- Evitar estilos inline y dependencias frágiles de red.

## Tokens principales (v2)

- **Primary:** `#635BFF`
- **Primary Hover:** `#4F46E5`
- **Primary Soft:** `#EEF0FF`
- **Background:** `#F6F8FC`
- **Surface:** `#FFFFFF`
- **Surface Alt:** `#F1F4FA`
- **Text Primary:** `#0F172A`
- **Text Muted:** `#475569`
- **Border:** `#DCE3F1`
- **Success:** `#0F766E`
- **Warning:** `#B45309`
- **Error:** `#B42318`
- **Info:** `#1D4ED8`

## Tipografia

- Familia base: `Inter, Segoe UI, Arial, sans-serif`
- Escala: `display 40`, `h1 32`, `h2 26`, `h3 22`, `body 16`, `bodySm 14`, `caption 12`
- Jerarquia: un titulo protagonista por pantalla, metadatos en `bodySm`/`caption`.

## Espaciado

- Sistema 4/8 extendido: 4, 8, 12, 16, 20, 24, 32, 40
- Regla: no introducir valores arbitrarios fuera de tokens salvo excepcion justificada.

## Web

- Bootstrap local servido desde `public/css/bootstrap.min.css`.
- Capa de diseño propia en `public/css/mallorca.css`.
- Estados de foco accesibles y microtransiciones unificadas.
- Vistas migradas sin estilos inline:
  - `resources/views/home.blade.php`
  - `resources/views/portal/layout.blade.php`
  - `resources/views/admin/layout.blade.php`
- Componentes Blade reutilizables:
  - `resources/views/portal/partials/ui/publish-page-header.blade.php`
  - `resources/views/portal/partials/ui/form-actions.blade.php`
  - `resources/views/portal/partials/ui/dashboard-list-card.blade.php`
  - `resources/views/portal/partials/ui/status-badge.blade.php`
  - `resources/views/portal/partials/ui/feedback-alert.blade.php`

## Admin (backoffice)

- Layout compartido para vistas admin:
  - `resources/views/admin/layout.blade.php`
- Vistas migradas al layout común:
  - `resources/views/admin/dashboard.blade.php`
  - `resources/views/admin/audit-logs.blade.php`
  - `resources/views/admin/support-ticket-board.blade.php`
  - `resources/views/admin/support-ticket-detail.blade.php`
- Se estandarizan:
  - cabecera de acciones,
  - feedback no bloqueante (sin `alert()` nativo),
  - badges de estado por semántica.

## Microinteracciones

- Toasts globales de interfaz:
  - `window.mtUi.showToast(message, tone)`
- Estado de carga visual para bloques interactivos:
  - `window.mtUi.setLoading(element, true/false)`
- Skeleton para carga de listas y bloques.
- Navegación activa en cabeceras (`.btn.is-active`) para reforzar orientación del usuario.
- Scripts desacoplados en archivos `public/js/*.js` (sin inline JS) para cumplimiento de CSP (`script-src 'self'`).
- Duraciones recomendadas: `140-220ms` para feedback directo, maximo `300ms`.

## App Flutter

- Tokens centralizados en `mobile_app/lib/src/design/design_tokens.dart`.
- Tema unificado en `mobile_app/lib/src/design/app_theme.dart`.
- Aplicación global del tema desde `mobile_app/lib/main.dart`.
- Componentes reutilizables:
  - `mobile_app/lib/src/design/widgets/app_primary_button.dart`
  - `mobile_app/lib/src/design/widgets/app_form_card.dart`
  - `mobile_app/lib/src/design/widgets/app_status_chip.dart`
  - `mobile_app/lib/src/design/widgets/app_feedback_banner.dart`
  - `mobile_app/lib/src/design/widgets/app_empty_state.dart`

## Reglas de implementación

- No agregar estilos inline en vistas salvo casos excepcionales justificados.
- Nuevos componentes deben reutilizar tokens en lugar de hardcodear colores/espaciados.
- Mantener naming semántico consistente en ambos lados (`primary`, `surface`, `muted`, etc.).
- Todo estado de datos debe contemplar: `loading`, `empty`, `error`, `success`.
- No usar animaciones decorativas; motion siempre orientado a comprension o feedback.