Avatar

El Avatar es un elemento de identificación rápida que sintetiza la presencia de un usuario, marca o sistema dentro de la interfaz.

Previsualización Rápida

El componente funciona como una marca visual reconocible para guiar la lectura y dar personalidad a las interacciones.

Perfiles y encabezados: Mostrar la foto o iniciales del usuario autenticado.
Listados y grupos: Identificar participantes en hilos de conversación, tablas o tarjetas.
Entidades abstractas: Representar marcas, empresas o componentes del sistema con logos o íconos.

El avatar ajusta su contenido interno según el tipo de entidad o información disponible:

Img: Muestra la foto real del usuario.
Initials: Alternativa por defecto (fallback) que presenta las iniciales del nombre (ej. “MM”).
Icon: Utiliza íconos genéricos de sistema para funciones abstractas o usuarios anónimos.
Extras: Reservado para logos de empresas, marcas o aliados.

Permiten adecuar el peso visual del contenedor según el fondo y la jerarquía de la pantalla:

Light: Fondo suave calculado al 10% de opacidad del color frontal principal.
Filled: Contenedor sólido de alto contraste con texto o ícono blanco.
Filled-claro: Fondo claro con contraste intermedio para listas densas.
Outline: Fondo transparente delimitado por un borde visible.

Tamaño	Dimensión	Caso de Uso
`xl`	`84x84 px`	Encabezados de perfil principal y vistas resumen.
`lg`	`56x56 px`	Cabeceras de sección, modales y tarjetas destacadas.
`md`	`38x38 px`	Estándar. Listas de navegación, barras superiores y tablas.
`sm`	`26x26 px`	Elementos en línea, comentarios y tablas de alta densidad.

full: Forma completamente circular. Utilizada para personas y usuarios.
sm: Cuadrado con bordes redondeados. Recomendado para marcas, empresas o componentes del sistema.

Navegación por teclado: El componente es estrictamente visual y no interactivo, por lo que no debe recibir foco (tabindex="-1" implícito).
Lectores de pantalla: Se clasifica como un elemento decorativo (aria-hidden="true"), evitando redundancias en la lectura ya que el nombre o descripción siempre debe estar presente de forma textual.