/* ═══════════════════════════════════════
   ▓ COMPONENTE · Avatar — gemelo vanilla ▓
   v1.0 · 2026-08-23. Ficha: `design-system/COMPONENTE_AVATAR.md`

   La cara de una persona o de una empresa: sus iniciales, o su foto. La FORMA dice el tipo
   (círculo = persona · cuadrado-redondeado = organización) y el COLOR dice quién eres tú.

   REQUISITOS DEL ANFITRIÓN:
     1. Los tokens del canon (`colors_and_type.css`).
     2. `box-sizing: border-box`.
   ═══════════════════════════════════════

   ⛔ EL TAMAÑO ENTRA POR `--avatar-size`, y de él cuelgan las otras dos medidas: la tipografía
   (35 % del diámetro) y el radio de una organización (18 % del lado). NO se escriben a mano —
   una medida recalculada a mano es una medida que se separa de sí misma.

   ⛔ EL TINTE ENTRA POR `data-tinte="1..5"` y el REPARTO NO ES DE ESTA HOJA: es un hash del
   correo (o del nombre) y una hoja de estilo no sabe hacer hashes. El montaje calcula el índice
   con el MISMO acumulador ·31 que ya corre en producción y escribe el atributo. Inventar otro
   reparto daría dos colores para la misma persona según por dónde entre.
   El JavaScript de referencia está en el README de esta carpeta.

   ⛔ NO HAY `avatar.js`, y no es un olvido: esta pieza NO TIENE CONDUCTA. No abre, no cierra,
   no cuenta y no filtra. Lo único que hace falta en código es el índice del tinte y las
   iniciales, y las dos cosas son del anfitrión que pinta el HTML.

   ⚠ HUECO DECLARADO, heredado del canon: en pila el anillo de superficie PISA el contorno, así
   que ahí dentro la silueta vuelve a 1.10:1 y la forma deja de comunicar. Se abre el día que
   una pantalla monte una pila — hoy la pila tiene CERO usos en las tres apps. */

.exds-avatar { width:var(--avatar-size, 40px); height:var(--avatar-size, 40px); flex-shrink:0; border-radius:var(--radius-pill, 999px); display:inline-flex; align-items:center; justify-content:center; overflow:hidden; user-select:none; font-family:var(--font-sans, "Inter", -apple-system, "system-ui", sans-serif); font-weight:600; font-size:calc(var(--avatar-size, 40px) * .35); letter-spacing:0.01em; line-height:1; text-transform:uppercase; box-sizing:border-box; background:var(--color-bg-subtle, #F2F4F6); color:var(--fg2, #4B5563); border:1px solid var(--color-border-default, #D1D5DB); }
/* LA FORMA DICE EL TIPO · círculo = persona · cuadrado-redondeado = organización. Y el radio
   de una organización es una FRACCIÓN DEL LADO (~18 %), no un valor fijo: un radius-lg de 16
   sobre un avatar de 34 es el 47 % del lado y la pieza se lee redonda. Medido en Contactos,
   donde la forma es la única señal que separa una empresa de una persona. */
.exds-avatar[data-tipo="organizacion"] { border-radius:max(4px, calc(var(--avatar-size, 40px) * .18)); }
/* GRIS POR DEFECTO · COLOR SÓLO SI ERES TÚ (Ricardo, 2026-08-15 · v0.10). La partición es
   «¿soy yo o es otro?» y NO admite un cajón intermedio. El default es gris a propósito: una
   pieza que naciera en color lo derramaría por todas las listas, que es de donde la v0.9 lo
   sacó. En la barra superior hay UNO y siempre es el mismo, así que ahí el color no compite
   con nada y dice algo real: «esta sesión es tuya».
   ⛔ Y EL AVATAR PROPIO NO LLEVA CONTORNO (Ricardo, 2026-08-18): el contorno se queda sólo en
   quien=otro, que es donde hace falta —su relleno gris mide 1.10:1 contra el blanco y sin
   contorno la silueta no existe—. El tuyo va teñido y el tinte ya separa por sí solo. */
.exds-avatar[data-quien="tu"] { border:0; }
.exds-avatar[data-quien="tu"][data-tinte="1"] { background:var(--avatar-tint-1, #C6F2F2); color:var(--avatar-ink-1, #00696D); }
.exds-avatar[data-quien="tu"][data-tinte="2"] { background:var(--avatar-tint-2, #CBEEFF); color:var(--avatar-ink-2, #005F8F); }
.exds-avatar[data-quien="tu"][data-tinte="3"] { background:var(--avatar-tint-3, #D9E8FF); color:var(--avatar-ink-3, #31509D); }
.exds-avatar[data-quien="tu"][data-tinte="4"] { background:var(--avatar-tint-4, #ECE2FF); color:var(--avatar-ink-4, #614092); }
.exds-avatar[data-quien="tu"][data-tinte="5"] { background:var(--avatar-tint-5, #FCDDF4); color:var(--avatar-ink-5, #7E3472); }
/* UNA FOTO NO SE TIÑE NUNCA: ya es la identidad, y un tinte debajo sólo se vería por los
   bordes del recorte. Va DESPUÉS de los tintes a propósito — es la regla que gana. */
.exds-avatar[data-foto="si"] { background:var(--color-bg-subtle, #F2F4F6); color:var(--fg2, #4B5563); }
.exds-avatar-img { width:100%; height:100%; object-fit:cover; display:block; }
/* EN PILA · anillo del color de superficie al solaparse.
   ⚠ HUECO DECLARADO, no resuelto: ese anillo PISA el contorno, así que dentro de una pila la
   silueta vuelve a 1.10:1 y la forma deja de comunicar. Resolverlo pedía un anillo por
   box-shadow sin precedente en este canon, y la pila tiene CERO usos en las 3 apps. Se abre
   el día que una pantalla monte una. */
.exds-avatar[data-apilado="si"] { border:2.5px solid var(--color-surface, #FFFFFF); }
.exds-avatar-stack { display:inline-flex; }
.exds-avatar-stack > * + * { margin-left:-12px; }
/* LA INSIGNIA es para lo que de verdad es un AÑADIDO —verificado, principal—, NUNCA para el
   tipo: el tipo lo dice la forma. Va en un envoltorio y no dentro del avatar porque el avatar
   recorta para que la foto no se salga del círculo, y ese recorte se la comería. */
.exds-avatar-wrap { position:relative; display:inline-flex; flex-shrink:0; }
.exds-avatar-insignia { position:absolute; right:-2px; bottom:-2px; display:inline-flex; align-items:center; justify-content:center; line-height:0; border:2px solid var(--color-surface, #FFFFFF); border-radius:var(--radius-pill, 999px); background:var(--color-surface, #FFFFFF); }