/* ==========================================================================
   COMPONENTE: Encabezado de vista (breadcrumb + botón de acción)
   Uso: <div id="xHeader"></div>
   El contenido interno lo genera shared/ModuleHeader.js -> renderModuleHeader().
   No escribir <nav>/<a> aquí a mano en ningún .html de módulo.
   ========================================================================== */

.view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
}

/* Agrupa "Regresar" + breadcrumb a la izquierda, para que el
   space-between de .view-header no los separe entre sí. */
.view-header-start {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

/* ── Botón Regresar ──────────────────────────────────────────────────── */

.view-header-back {
  flex-shrink: 0;
  gap: var(--spacing-xs);
}

/* ── Breadcrumb ──────────────────────────────────────────────────────── */

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
}

.breadcrumb a {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: color var(--transition-base);
}

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

.breadcrumb span[aria-current="page"] {
  color: var(--color-text-main);
  font-weight: var(--font-weight-semibold);
}

.breadcrumb-sep {
  color: var(--color-text-muted);
  opacity: 0.6;
}

/* ── Botón de acción contextual ──────────────────────────────────────── */

.view-header-action {
  flex-shrink: 0;
}