Addendum: animación de flujo en las líneas punteadas del login

Date: 2026-07-25 Status: ✅ Aplicado sobre el LoginView.vue real y verificado (2026-07-27) — mismo método de validación: stroke-dashoffset computado leído en 2 instantes distintos (cambió de -8.1px a -13.4px), y animation-name confirmado en none con prefers-reduced-motion: reduce. Depende de: doc/plans/2026-07-25-rebrand-logo-real.md (usa el mismo LoginView.vue)

Qué se agrega

A la ilustración de "mapa de conexión" del panel de marca del login (los 6 paths punteados que conectan los puntos naranjas), se le agrega una animación de flujo — sensación de "datos moviéndose por la conexión", sutil y lenta, no algo llamativo.

Implementación

1. Cada <path> de la ilustración lleva la clase route-dash (ya estaba el stroke-dasharray, solo se agrega la clase).
2. CSS (scoped, al final de LoginView.vue):

.route-dash {
  animation: route-flow 2.4s linear infinite;
}

@keyframes route-flow {
  to {
    stroke-dashoffset: -20;
  }
}

@media (prefers-reduced-motion: reduce) {
  .route-dash {
    animation: none;
  }
}

Respeta prefers-reduced-motion — se apaga sola para quien lo tenga configurado en el sistema operativo (accesibilidad, no es opcional saltearlo).

Dónde aplicarlo

En el LoginView.vue real (no el de referencia, que es de antes de M1) — agregar class="route-dash" a los 6 <path> de la ilustración del panel de marca, y agregar el bloque <style scoped> de arriba al final del archivo (o al <style> que ya exista, si el archivo real le sumó otros estilos).