/* ============================================================
   HUF — Componente: Avatar (.hd-avatar) — iniciales de una persona
   ------------------------------------------------------------
   Vehículo: TagHelper <hd-avatar> (AdminPortal/TagHelpers/
   HdAvatarTagHelper.cs). Marca de identidad en listados de personas:
   ayuda a re-encontrar una fila ya vista sin releer el nombre completo.

   Legitimidad en el lenguaje visual: tokens.css ya reserva
   --hd-radius-pill "solo para badges de estado y avatares", así que el
   círculo no es una excepción nueva a HVL §5.1. Y NO cae bajo §5.5
   ("el ícono nunca va en círculo de color"): esto no es un ícono, es un
   dato — las iniciales de una persona concreta. La distinción importa:
   un ícono representa una categoría y por eso no debe colorearse; un
   avatar identifica a un individuo, que es exactamente lo que el color
   está codificando acá.

   Visible en los TRES modos (oscuro, claro, pastel), no solo en pastel:
   la utilidad de reconocer una fila no depende del modo.

   PALETA — reusa exactamente los cinco pares ya auditados de
   components/badges.css (los acentos de vertical: violeta, esmeralda,
   ámbar, rosa, cian), en sus dos calibraciones: la de fondo oscuro y la
   de fondo claro. Cero pares de color nuevos que auditar, y el avatar
   habla el mismo idioma cromático que el badge que suele ir en la misma
   fila. El slot NO significa nada de negocio: es un hash del nombre, no
   una categoría — misma persona, mismo color, siempre.
   ============================================================ */

.hd-avatar {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--hd-radius-pill);
    font-size: var(--hd-text-micro);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .01em;
    /* Las iniciales son texto corto en mayúscula: sin esto heredan el
       tabular-nums de algunas tablas y quedan con tracking raro. */
    font-variant-numeric: normal;
    user-select: none;
}

.hd-avatar--sm {
    width: 24px;
    height: 24px;
    font-size: 10px;
}

/* ── Calibración de fondo OSCURO (modo por defecto) ──────────────
   Un escalón MÁS claro que el badge equivalente (nivel 300 y no 400).
   No es capricho: el badge es texto de 12px y el avatar de 11px, ambos
   cuentan como texto normal para WCAG (4.5:1), y medido en pantalla los
   tonos 400 de violeta y rosa daban 4.29:1 y 4.46:1 sobre la fila de
   tabla — por debajo del mínimo. Se sube el nivel en los cinco para que
   la escala quede pareja, no solo en los dos que fallaban. */
.hd-avatar--c0 { background: rgba(139, 92, 246, 0.16); color: #c4b5fd; }
.hd-avatar--c1 { background: rgba(16, 185, 129, 0.16); color: #6ee7b7; }
.hd-avatar--c2 { background: rgba(245, 158, 11, 0.16); color: #fcd34d; }
.hd-avatar--c3 { background: rgba(244, 63, 94, 0.16);  color: #fda4af; }
.hd-avatar--c4 { background: rgba(6, 182, 212, 0.16);  color: #67e8f9; }

/* ── Calibración de fondo CLARO (modos "light" y "pastel") ─────
   Mismo agrupamiento con :is() que components/badges.css: lo que decide
   estos colores es si el suelo es claro u oscuro, no cuál de los dos
   modos claros esté activo. :is() y no :where() para conservar la
   especificidad, igual que allá. */
[data-hd-theme="neo-industrial"]:is([data-hd-mode="light"], [data-hd-mode="pastel"]) .hd-avatar--c0 { color: #5B21B6; }
[data-hd-theme="neo-industrial"]:is([data-hd-mode="light"], [data-hd-mode="pastel"]) .hd-avatar--c1 { color: #065F46; }
[data-hd-theme="neo-industrial"]:is([data-hd-mode="light"], [data-hd-mode="pastel"]) .hd-avatar--c2 { color: #92400E; }
[data-hd-theme="neo-industrial"]:is([data-hd-mode="light"], [data-hd-mode="pastel"]) .hd-avatar--c3 { color: #9F1239; }
[data-hd-theme="neo-industrial"]:is([data-hd-mode="light"], [data-hd-mode="pastel"]) .hd-avatar--c4 { color: #155E75; }

/* En modo pastel el tinte sube un punto: el suelo de la fila ya es un
   lavado de color, y al 16 % el círculo se perdía contra él.

   CUIDADO al tocar esta alpha. Subirla NO es gratis: sobre un suelo claro,
   más alpha vuelve el círculo más OSCURO, o sea lo acerca al color del
   texto y BAJA el contraste. La primera versión de este bloque afirmaba lo
   contrario y dejó el slot c1 en 4.45:1, por debajo del mínimo — se detectó
   midiendo en el navegador, no leyendo. Los textos de arriba están en nivel
   800 justamente para absorber este oscurecimiento. */
[data-hd-mode="pastel"] .hd-avatar--c0 { background: rgba(139, 92, 246, 0.22); }
[data-hd-mode="pastel"] .hd-avatar--c1 { background: rgba(16, 185, 129, 0.22); }
[data-hd-mode="pastel"] .hd-avatar--c2 { background: rgba(245, 158, 11, 0.22); }
[data-hd-mode="pastel"] .hd-avatar--c3 { background: rgba(244, 63, 94, 0.22); }
[data-hd-mode="pastel"] .hd-avatar--c4 { background: rgba(6, 182, 212, 0.22); }

/* Celda de identidad: avatar + nombre en la columna que identifica a una
   persona. Existe acá y no en cada .cshtml para que las pantallas que la
   usan no repitan el mismo flex a mano.

   inline-flex y NO flex: en las tablas expandibles esta celda comparte el
   <td> con .hd-table__expander, que es inline-flex. Un flex de bloque
   mandaría la identidad a un renglón propio debajo del chevron. Por el
   mismo motivo el botón expansor debe seguir siendo HIJO DIRECTO del <td>
   y quedar FUERA de este span: tables.css engancha el cursor de la fila
   con :has(> td > .hd-table__expander), un combinador de hijo directo —
   envolverlo rompería el puntero de toda la fila. */
.hd-identity {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    gap: var(--hd-space-3);
    min-width: 0;
}

/* El nombre puede ser un <a> o texto plano; en ambos casos trunca en vez
   de romper la altura de fila fija (--hd-size-row). */
.hd-identity__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}