/**
 * Archivo NUEVO: assets/css/shared/avatar.css
 * Origen: maqueta "La Tienda Natural - Intercambios.html", bloque
 *         "Capa 2 — estructura de página" (.ltn-avatar)
 * Versión: 1.0.0
 * Creado: DEUDA-CSS-004, Fase 2 — 2026-08-16
 *
 * Aunque en la maqueta aparece agrupado con la estructura de página,
 * es un componente reutilizable (iniciales de usuario) sin dependencias
 * de intercambios — va en shared/ como el resto de componentes atómicos
 * (badges, cards…), no en assets/css/.
 *
 * Uso:
 *   <span class="ltn-avatar">JM</span>
 *   <span class="ltn-avatar ltn-avatar--sm">CV</span>
 *   <span class="ltn-avatar ltn-avatar--terra ltn-avatar--sm">MA</span>
 */

.ltn-avatar {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: var(--ltn-green-light);
    color: var(--ltn-green-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--ltn-font-size-sm);
    flex-shrink: 0;
}

.ltn-avatar--sm {
    width: 28px;
    height: 28px;
    font-size: 11px;
}

/* DEUDA-CSS-004 Fase 2 (aprobado 2026-08-16). Usa --ltn-terra-bg-light
   de shared/variables.css. */
.ltn-avatar--terra {
    background: var(--ltn-terra-bg-light);
    color: var(--ltn-terra-deep, #B95F33);
}