.idxpm__avatar {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    line-height: 1;
    overflow: hidden;
}

.idxpm__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}

.idxpm__items {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: inherit;
}

/* Avatar + autor van siempre pegados, nunca separados por otro tramo en
   medio — comparten un solo lugar en el orden. */
.idxpm__author-block {
    display: inline-flex;
    align-items: center;
    gap: inherit;
}

/* inline-flex + gap: inherit — mismo espacio entre categorías (cuando hay
   más de una) que "Espacio entre tramos" del resto del widget, en vez de
   depender de espacios sueltos tipeados en el separador. Con el fondo
   activado, cada .idxpm__category-item es su propia píldora separada (el
   gap de acá es el espacio entre píldoras); sin fondo, son texto plano
   unido por el separador y esta clase no envuelve nada extra. */
.idxpm__category {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: inherit;
}

.idxpm__category-item {
    display: inline-flex;
    align-items: center;
}

/* Link de categoría: sin padding/margin propio — así ocupa lo mismo que el
   texto plano y el separador no "salta" al activar/desactivar el link. */
.idxpm__link {
    display: inline;
    padding: 0;
    margin: 0;
}