/* ==========================================================================
   COMPONENTE: Navegación de módulo (breadcrumb + tabs)
   Uso: <nav id="xNav" class="module-nav"></nav>
   El contenido interno lo genera shared/ModuleNav.js -> initModuleNav().
   No escribir <span>/<button> aquí a mano en ningún .html de módulo.
   ========================================================================== */

.module-nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--color-border);
}

.module-nav-title {
  font-size: var(--font-size-p);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-main);
}

.module-nav-sep {
  color: var(--color-text-muted);
}

.module-nav-item {
  padding: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--transition-base);
}

.module-nav-item:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.module-nav-item.is-active {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
}