feat(studio): que se note que hay una IA atrás, sin fondo animado permanente

Un fondo animado corriendo todo el día en una herramienta de trabajo se ve bien
diez segundos y molesta las ocho horas siguientes, además de tener un canvas
comiéndose la batería. Así que el movimiento va donde hay algo pasando de
verdad, y el fondo queda quieto.

Al entrar, una vez por sesión: el campo de puntos conectándose durante poco más
de un segundo, y se destruye. Es el mismo lenguaje visual de la página pública
—puntos que se enlazan, como el espacio vectorial donde vive el conocimiento—
así que refuerza la marca en vez de inventar algo para adentro.

En los momentos de espera, que es donde el producto se veía muerto: el chat de
prueba decía "Pensando..." en gris y ahora muestra a Umi con los tres puntos,
el mismo gesto que ve el visitante en el widget. Y una fuente en "procesando"
tenía la etiqueta quieta, sin decir si seguía avanzando o se había colgado:
ahora late.

El fondo es una retícula de plano técnico, tenue y estática, que se desvanece
hacia abajo para no competir con las tablas y los formularios.

Dos cosas que aparecieron al verificar:

El apagado de la animación de entrada estaba dentro del requestAnimationFrame,
que el navegador no corre en pestañas de fondo — abrir el Studio en una pestaña
que no se está mirando dejaba el canvas puesto para siempre, tapando la
interfaz con una capa invisible. Ahora el temporizador se programa aparte.

Y una fuente sin procesar mostraba "leído sin procesar", que no quiere decir
nada: si no hay fecha de lectura, no se escribe la frase.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

orchestrator/src/style.css

@@ -29,6 +29,28 @@
     color: rgb(var(--texto));
     -webkit-font-smoothing: antialiased;
   }
+
+  /* Retícula de plano técnico, muy tenue y ESTÁTICA. Da profundidad sin pedir
+     atención ni gastar un canvas corriendo todo el día. Se desvanece hacia
+     abajo para no competir con las tablas y los formularios, que es donde de
+     verdad se trabaja. */
+  body::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    z-index: 0;
+    pointer-events: none;
+    background-image:
+      linear-gradient(rgb(var(--borde) / 0.5) 1px, transparent 1px),
+      linear-gradient(90deg, rgb(var(--borde) / 0.5) 1px, transparent 1px);
+    background-size: 56px 56px;
+    -webkit-mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, #000 10%, transparent 70%);
+            mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, #000 10%, transparent 70%);
+    opacity: 0.55;
+  }
+
+  /* El contenido va por encima de la retícula. */
+  #app { position: relative; z-index: 1; }
 }
 
 @layer components {
@@ -99,3 +121,25 @@
     display: none;
   }
 }
+
+@layer components {
+  /* Un punto que late para lo que está trabajando de verdad: una fuente en
+     "procesando" con la etiqueta quieta no dice si sigue avanzando o si se
+     colgó. Se usa sólo donde hay trabajo real en curso, nunca de adorno. */
+  .latido {
+    width: 5px;
+    height: 5px;
+    border-radius: 9999px;
+    background: currentColor;
+    animation: latido 1.4s ease-in-out infinite;
+  }
+
+  @keyframes latido {
+    0%, 100% { opacity: 0.35; transform: scale(0.85); }
+    50% { opacity: 1; transform: scale(1); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .latido { animation: none; opacity: 0.8; }
+  }
+}