/*
 * Estilos compartidos por /favoritos y /coleccion (grillas de listing-card
 * con un estado vacío diseñado). Tokens en tokens.css; base en app.css.
 */

.collection-byline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

.collection-byline img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.collection-byline a {
  font-weight: 700;
  color: var(--clay-ink);
}

.collection-byline a:hover {
  text-decoration: underline;
}

/* Estado vacío diseñado: ícono en un círculo tenue, texto corto y un CTA —
   en vez del párrafo suelto de antes (spec §4). */
.empty-state--designed {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  max-width: 440px;
  margin-inline: auto;
  padding-block: var(--space-8);
}

.empty-state__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  margin-bottom: var(--space-2);
  border-radius: 50%;
  background: var(--clay-wash);
  color: var(--clay-ink);
}

.empty-state--designed p {
  color: var(--ink-muted);
}

.empty-state--designed .btn-primary {
  margin-top: var(--space-4);
}