/* PURPOSE: Cadena de navegación con separadores y estado activo.
   KEY CLASSES: .breadcrumb, .breadcrumb-item, .breadcrumb-list, .breadcrumb-separator
   DEPENDS ON: --hg-color-dark-grey, --hg-color-middle-grey, --hg-color-primary, --hg-typo-font-family-primary-regular (config).
   DEMO: dist/componentes.html#breadcrumb */

.breadcrumb {
  font-family: var(--hg-typo-font-family-primary-regular);
  font-size: 13px;
  color: var(--hg-color-dark-grey);
}

.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb-item a,
.breadcrumb-item {
  color: var(--hg-color-dark-grey);
  text-decoration: none;
  transition: color 0.12s ease;
}

.breadcrumb-item a:hover {
  color: var(--hg-color-primary);
  text-decoration: underline;
}

.breadcrumb-item.is-active,
.breadcrumb-item[aria-current="page"] {
  color: var(--hg-color-primary);
  font-weight: 600;
}

.breadcrumb-separator {
  color: var(--hg-color-middle-grey);
  user-select: none;
  font-size: 12px;
}