/* ============================================================================
   AVATAR — la carita redonda: foto de alguien, o el icono genérico si no la hay.

   DE DÓNDE VIENE
   --------------
   De `main.css`, donde vivía desde siempre (las diez líneas de `.avatar` y las
   tres de `.avatar.dark_avatar`). Se MUEVE, no se copia: mientras una regla base
   viva en la hoja legacy la paridad con el front nuevo es imposible, porque el
   front NO importa `main.css` a propósito y hay una prueba que lo verifica
   (`packages/ui/src/ds.test.ts`).

   POR QUÉ SE MUEVE AHORA
   ----------------------
   Lo destapó migrar `propinas`: su celda de mesero pinta `<span class="avatar">`
   y el espejo la midió sin fondo, sin redondear y en `display:block` —o sea, sin
   una sola de estas trece líneas— mientras PHP la pintaba redonda y gris. La
   diferencia arrastraba además el reparto de anchos de toda la tabla, porque una
   primera celda 27px más estrecha desplaza a las otras dos.

   NO ES DE UNA PANTALLA, y por eso va al DS y no a la hoja de la pantalla: la
   usan la caja (`pos.php`, el avatar del cliente, que además la extiende con
   `.customer_avatar`), la reja de mesas (dos veces: el mesero de la tarjeta y el
   de la cuenta) y ahora el informe de propinas. Tres módulos y el core.

   DÓNDE ENTRA EN LA CASCADA
   -------------------------
   Con los COMPONENTES (después de `main.css`), no con los tokens, y justo detrás
   de `icon-chip.css`: son la misma familia de forma —una caja cuadrada con un
   glifo centrado y muy redondeada— y así quedan juntas para quien venga a
   tocarlas. Mientras `main.css` conserve su propia copia ganaría la última; por
   eso la copia de allá se RETIRA en el mismo cambio.

   NO se añade a `HUB_FILES` en `scripts/sync-ds.sh`: el Hub no encola esta hoja
   hoy y su Local está caído, así que dársela sería cambiar una pantalla que no se
   puede medir. La regla de la casa para eso es no moverla a ciegas.
   ============================================================================ */

.avatar {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--neutral-300);
  background: var(--neutral-200);
  border-radius: 50%;
}

/* La variante oscura: papel neutral/500 y tinta blanca. La usa el avatar del
   cliente en la caja cuando SÍ hay cliente elegido (ver ds/cart.css, que lo
   describe: "el cliente se enciende, no se apaga"). */
.avatar.dark_avatar {
  background: var(--neutral-500);
  color: #fff;
}