/* ==========================================================================
   Apolo Service · Iconografía — clases del componente
   Fase 3 · Panoramas DMKT
   Depende de apolo-tokens.css (--apolo-transition-color).
   Documentación: apolo-anexo-iconografia.md §5.1 y §6
   ========================================================================== */

.apolo-icon {
  display: inline-block;
  width: 1.25rem;                 /* 20px — tamaño por defecto */
  height: 1.25rem;
  vertical-align: -0.125em;       /* alinea con la línea base del texto */
  fill: currentColor;             /* Bootstrap Icons (relleno) */
  stroke: currentColor;           /* los 3 glifos de Lucide (trazo) */
  flex-shrink: 0;                 /* no se deforma dentro de un flex */
  transition: var(--apolo-transition-color);
}

.apolo-icon--sm { width: 1rem;    height: 1rem; }      /* 16px — inline en texto */
.apolo-icon--md { width: 1.25rem; height: 1.25rem; }   /* 20px — botones y filas */
.apolo-icon--lg { width: 1.5rem;  height: 1.5rem; }    /* 24px — títulos */
.apolo-icon--xl { width: 2rem;    height: 2rem; }      /* 32px — empty states, KPI */

@media (prefers-reduced-motion: reduce) {
  .apolo-icon { transition: none; }
}