/**
 * P-01 · Avatar con iniciales — .scm-ui-avatar
 *
 * Sustituye a las 9 implementaciones actuales (.scm-name-avatar, .scm-avatar,
 * .scm-sidebar-user-avatar, .scm-pc-bav, .srv-avatar, .scm-critical-avatar,
 * .scm-teacher-avatar, .lider-avatar, .hero__logo-initials).
 *
 * El tono se calcula desde el nombre, nunca desde el módulo: la misma persona
 * tiene el mismo color en Personas, Eventos, Kids y Servidores. Ese cálculo
 * vive en scm_ui_avatar_idx() (core/helpers/ui.php).
 */

.scm-ui-avatar {
  --scm-ui-avatar-size: 40px;
  --scm-ui-avatar-radius: var(--scm-ui-r-md);
  --scm-ui-avatar-fs: 13px;
  --scm-ui-avatar-grad: linear-gradient(145deg, #4A9BFF 0%, #0A52C9 100%);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--scm-ui-avatar-size);
  height: var(--scm-ui-avatar-size);
  border-radius: var(--scm-ui-avatar-radius);
  background: var(--scm-ui-avatar-grad);
  color: #FFFFFF;
  font-family: var(--scm-ui-font);
  font-size: var(--scm-ui-avatar-fs);
  font-weight: var(--scm-ui-fw-strong);
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
  overflow: hidden;
  user-select: none;
}

/* ── Tamaños ─────────────────────────────────────────────────────── */
.scm-ui-avatar--sm {
  --scm-ui-avatar-size: 32px;
  --scm-ui-avatar-radius: var(--scm-ui-r-sm);
  --scm-ui-avatar-fs: 11px;
}
.scm-ui-avatar--md {
  --scm-ui-avatar-size: 40px;
  --scm-ui-avatar-radius: var(--scm-ui-r-md);
  --scm-ui-avatar-fs: 13px;
}
.scm-ui-avatar--lg {
  --scm-ui-avatar-size: 44px;
  --scm-ui-avatar-radius: var(--scm-ui-r-md);
  --scm-ui-avatar-fs: 14px;
}
/* El radio de 14px del tamaño --xl está declarado así en P-01: es la única
   medida de avatar fuera de los tres radios del sistema. */
.scm-ui-avatar--xl {
  --scm-ui-avatar-size: 52px;
  --scm-ui-avatar-radius: 14px;
  --scm-ui-avatar-fs: 17px;
}

/* ── Paleta — seis tonos, asignados por nombre ───────────────────── */
.scm-ui-avatar--1 { --scm-ui-avatar-grad: linear-gradient(145deg, #4A9BFF 0%, #0A52C9 100%); }
.scm-ui-avatar--2 { --scm-ui-avatar-grad: linear-gradient(145deg, #2FCE94 0%, #08855A 100%); }
.scm-ui-avatar--3 { --scm-ui-avatar-grad: linear-gradient(145deg, #A487FF 0%, #5433D6 100%); }
.scm-ui-avatar--4 { --scm-ui-avatar-grad: linear-gradient(145deg, #FFA061 0%, #DE5C13 100%); }
.scm-ui-avatar--5 { --scm-ui-avatar-grad: linear-gradient(145deg, #3FCFE3 0%, #0A8296 100%); }
.scm-ui-avatar--6 { --scm-ui-avatar-grad: linear-gradient(145deg, #FF8FAE 0%, #D33B67 100%); }

/* ── Estado inactivo — no se cambia el degradado ─────────────────── */
.scm-ui-avatar.is-inactive,
.scm-ui-avatar--inactive {
  filter: grayscale(1);
  opacity: .5;
}