# Motion Spec Premium - MallorcaTrabaja

## Principios
- Motion util, no decorativo.
- Duracion objetivo: `140ms` (feedback directo), `220ms` (transicion), maximo `300ms`.
- Propiedades permitidas para rendimiento: `transform`, `opacity`.
- Respetar claridad del estado: loading, success, error, empty.

## Microinteracciones definidas

## 1) Hover y focus web
- Botones y elementos listados elevan levemente (`translateY(-1/-2px)`).
- Focus visible con contorno de alto contraste en elementos interactivos.
- Beneficio: navegacion mas clara y accesible con teclado.

## 2) Press/feedback en acciones criticas
- CTA principal cambia a estado de carga y bloquea interaccion.
- Mensajes de confirmacion via toast/banner no intrusivo.
- Beneficio: reduce dobles envios y dudas de estado.

## 3) Carga de listas
- Skeleton en bloques de dashboard/listados mientras llega respuesta.
- Spinner solo como refuerzo, no como unico indicador.
- Beneficio: mejora percepcion de velocidad.

## 4) Transicion de pantallas mobile
- Navegacion mantiene continuidad visual con cambios de contexto cortos.
- IndexedStack en shell para preservar estado por seccion.
- Beneficio: menor perdida de contexto al cambiar de modulo.

## 5) Estados vacios y de error
- Entradas/salidas suaves y copy accionable.
- Accion de recuperacion visible (`Reintentar`, ajustar filtros, publicar).
- Beneficio: menor abandono ante falla o ausencia de datos.

## Checklist de implementacion
- [ ] Cada pantalla de datos tiene estados completos.
- [ ] Ninguna animacion supera 300ms.
- [ ] No se animan propiedades costosas (layout/paint pesado).
- [ ] Existe feedback inmediato al click/tap en CTA principal.