/* ============================================================
   Breadcrumbs Umbral — pegar en tu CSS principal
   Requiere: FontAwesome 6.5.2 ya cargado en el layout
   ============================================================ */

.umbral-breadcrumb-nav {
  margin: 0.75rem 0 1.25rem 0 1.25rem;
}

.umbral-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0.45rem 0.85rem;
  background-color: #f5f6f7;
  border: 1px solid #e0e2e5;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  width: fit-content;
  max-width: 100%;
}

/* ── Ítem ─────────────────────────────────────────── */
.umbral-bc-item {
  display: flex;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1;
}

/* Separador chevron en CSS puro, sin HTML extra */
.umbral-bc-item + .umbral-bc-item::before {
  content: "\f054"; /* fa-chevron-right */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.55rem;
  color: #c8cbd0;
  margin: 0 0.5rem;
  flex-shrink: 0;
}

/* ── Enlace ───────────────────────────────────────── */
.umbral-bc-link {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0;
  color: #2d6a9f;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.umbral-bc-link i {
  font-size: 0.75rem;
  color: #ff6000;
  flex-shrink: 0;
  transition: color 0.18s ease;
}

.umbral-bc-link:hover,
.umbral-bc-link:focus-visible {
  color: #ff6000;
  border-bottom-color: #FF6F2D;
  outline: none;
}

.umbral-bc-link:hover i {
  color: #c45f10;
}

/* ── Ítem activo (sin enlace) ─────────────────────── */
.umbral-bc-current {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0;
  color: #6b7280;
  font-weight: 600;
}

.umbral-bc-current i {
  font-size: 0.75rem;
  color: #ff6000;
  flex-shrink: 0;
}

/* ============================================================
   RESPONSIVO
   ============================================================ */

/* Móvil pequeño: ocultar label en ítems intermedios */
@media (max-width: 479px) {
  .umbral-bc-item:not(:first-child):not(:last-child) .umbral-bc-label {
    display: none;
  }

  .umbral-breadcrumb {
    padding: 0.4rem 0.65rem;
  }

  .umbral-bc-item {
    font-size: 0.8rem;
  }
}

/* Tablet */
@media (min-width: 480px) and (max-width: 991px) {
  .umbral-bc-item {
    font-size: 0.84rem;
  }
}

/* Desktop */
@media (min-width: 992px) {
  .umbral-bc-item {
    font-size: 0.875rem;
  }
}