/* ================================================================
   SIGMA-PLI — Componente Reutilizável: vw-header
   Cabeçalho compacto de página com breadcrumb, título e ações.
   Usado em todas as páginas do M03 Dicionário.
   ================================================================ */

/* ===== CSS VARIABLES (escopo do componente) ===== */
.vw-header {
  --vw-header-text: var(--vw-text, var(--pli-navy, #1c3d59));
  --vw-header-text-muted: var(--vw-text-muted, var(--pli-text-muted, #444444));
  --vw-header-accent: var(--vw-accent, var(--pli-navy, #1c3d59));
  --vw-header-accent-light: var(--vw-accent-light, rgba(28, 61, 89, 0.07));
  --vw-header-green: var(--vw-green, var(--pli-green, #3ec26e));
  --vw-header-surface: var(--vw-surface, var(--pli-white, #ffffff));
  --vw-header-radius-sm: var(--vw-radius-sm, var(--pli-radius-sm, 4px));
  --vw-header-shadow: var(
    --vw-shadow,
    var(--pli-shadow-card, 0px 4px 20px rgba(0, 0, 0, 0.12))
  );
}

/* ===== PAGE HEADER ===== */
.vw-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0 4px;
  margin-top: 16px;
}

.vw-header__left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* ===== BREADCRUMB ===== */
.vw-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--sigma-type-caption, 0.8125rem);
  font-family: var(--pli-font-secondary, "Roboto", sans-serif);
  color: var(--vw-header-text-muted);
}

.vw-breadcrumb a {
  color: var(--vw-header-accent);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--vw-transition);
}

.vw-breadcrumb a:hover {
  color: var(--vw-header-green);
}

.vw-breadcrumb .fa-chevron-right {
  font-size: 0.45em;
  opacity: 0.4;
}

/* ===== TITLE ===== */
.vw-header__title {
  font-size: clamp(
    var(--sigma-type-title-md, 1.25rem),
    1.8vw,
    var(--sigma-type-title-lg, 1.5rem)
  );
  font-weight: 700;
  font-family: var(--pli-font-primary, "Montserrat", sans-serif);
  color: var(--vw-header-text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.3;
}

.vw-header__title i {
  color: var(--vw-header-green);
  font-size: 0.85em;
}

/* ===== DESCRIPTION ===== */
.vw-header__desc {
  font-size: var(--sigma-type-body-sm, 0.9375rem);
  font-family: var(--pli-font-secondary, "Roboto", sans-serif);
  color: var(--vw-header-text-muted);
  margin: 4px 0 0;
  line-height: var(--pli-lh-relaxed, 1.7);
  text-align: justify;
  max-width: 680px;
}

/* ===== HEADER ACTIONS ===== */
.vw-header__right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.vw-header-divider {
  width: 1px;
  height: 20px;
  background: var(--vw-border);
  margin: 0 4px;
}

/* ===== ACTION BUTTONS ===== */
.vw-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  border: 1.5px solid var(--vw-header-accent);
  border-radius: var(--vw-header-radius-sm);
  background: var(--vw-header-surface);
  color: var(--vw-header-accent);
  font-size: var(--sigma-type-label, 0.875rem);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--vw-transition);
  white-space: nowrap;
  line-height: 1.4;
  min-width: 100px;
  justify-content: center;
}

.vw-action-btn:hover {
  background: var(--vw-header-accent);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--vw-header-shadow);
  text-decoration: none;
}

.vw-action-btn--accent {
  background: var(--vw-header-accent);
  color: #fff;
}

.vw-action-btn--accent:hover {
  background: var(--vw-header-green);
  border-color: var(--vw-header-green);
}

.vw-action-btn--ghost {
  border-color: var(--vw-border-strong);
  color: var(--vw-header-text-muted);
}

.vw-action-btn--ghost:hover {
  border-color: var(--vw-header-accent);
  background: var(--vw-header-accent-light);
  color: var(--vw-header-accent);
}

.vw-action-btn--sm {
  padding: 4px 9px;
  font-size: var(--sigma-type-caption, 0.8125rem);
}

.vw-action-btn--danger {
  border-color: #e53e3e;
  color: #e53e3e;
}

.vw-action-btn--danger:hover {
  background: #e53e3e;
  color: #fff;
  border-color: #e53e3e;
}

/* ===== BADGE (label informativo, não interativo) ===== */
.vw-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 100px;
  background: var(--vw-header-accent-light);
  color: var(--vw-header-accent);
  font-size: var(--sigma-type-caption, 0.8125rem);
  font-weight: 700;
  font-family: var(--pli-font-primary, "Montserrat", sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid rgba(28, 61, 89, 0.15);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 640px) {
  .vw-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .vw-header__right {
    flex-wrap: wrap;
  }
  .vw-header__title {
    font-size: var(--sigma-type-title-md, 1.25rem);
  }
}

@media (max-width: 480px) {
  .vw-header {
    gap: 6px;
    padding: 6px 0 2px;
  }

  .vw-header__title {
    font-size: 1.1rem;
    gap: 6px;
  }

  .vw-header__right {
    width: 100%;
    gap: 4px;
  }

  .vw-action-btn {
    padding: 5px 10px;
    font-size: 0.75rem;
    min-width: 80px;
  }

  .vw-breadcrumb {
    font-size: 0.75rem;
    gap: 5px;
  }

  .vw-header__desc {
    font-size: 0.8125rem;
  }
}

@media (max-width: 360px) {
  .vw-action-btn {
    padding: 4px 8px;
    font-size: 0.7rem;
    min-width: 0;
  }

  .vw-header__title {
    font-size: 1rem;
  }
}