/* Topo único da Cygnuss (04/11/2026): título, ajuda (i), abas, filtros e ações.
   Cópia idêntica em RH, Financeiro, Logística, Suporte e Marketing: mudou
   aqui, copie para todos. Cada sistema só troca o acento pelo data-sys do
   .tpc, nunca neste arquivo. Componente: TopoCygnuss.jsx (Marketing:
   js/core/topo-cygnuss.js).
   Abas num trilho só; a ativa leva o acento do sistema. Ícones: Material
   Symbols Outlined. Letra: a da página (herda; Inter nos cinco desde
   05/11/2026), tamanhos da escala do computador: título 20, abas e botões 13.
   Respiro de cima: quem põe é o container da página (24px no computador,
   16px no celular), igual nos cinco. */
.tpc {
  --tpc-tinta: #1d201e;
  --tpc-sub: #646b67;
  --tpc-borda: #e1e4e2;
  --tpc-borda-forte: #c9cecb;
  --tpc-sup: #fcfcfb;
  --tpc-trilho: #eef1ef;
  --tpc-dica: #202321;
  --tpc-dica-tinta: #fcfcfb;
  --tpc-sobre-ativo: #fcfcfb;
  --tpc-aviso-fundo: #fbe3dd;
  --tpc-aviso-tinta: #a8402c;
  --tpc-ativo: #16864e;
  --tpc-ativo-forte: #11683c;
  --tpc-peso-texto: 400;
  --tpc-peso-medio: 500;
  --tpc-peso-destaque: 600;
  --tpc-alto: 38px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "titulo abas acoes";
  align-items: center;
  column-gap: 24px;
  row-gap: 14px;
  margin: 0 0 20px;
  color: var(--tpc-tinta);
  font-family: inherit;
}
.tpc[data-sys="financeiro"] { --tpc-ativo: #16864e; --tpc-ativo-forte: #11683c; }
.tpc[data-sys="logistica"] { --tpc-ativo: #287b4a; --tpc-ativo-forte: #1f623a; }
.tpc[data-sys="rh"] { --tpc-ativo: #16794a; --tpc-ativo-forte: #11603a; }
.tpc[data-sys="suporte"] { --tpc-ativo: #d9654e; --tpc-ativo-forte: #bd513c; }
.tpc[data-sys="marketing"] { --tpc-ativo: #b65378; --tpc-ativo-forte: #943c61; }
/* Tema escuro (sistema que liga data-theme="dark" no html) */
[data-theme="dark"] .tpc {
  --tpc-tinta: #e3e6e3;
  --tpc-sub: #a3aaa5;
  --tpc-borda: #2a2a2a;
  --tpc-borda-forte: #3a3d3b;
  --tpc-sup: #1a1c1b;
  --tpc-trilho: #141414;
  --tpc-dica: #2a2d2b;
  --tpc-dica-tinta: #e3e6e3;
  --tpc-aviso-fundo: #3d221c;
  --tpc-aviso-tinta: #f2a593;
}
.tpc--sem-abas { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titulo acoes"; }
/* Com filtros (conta, período, busca): na mesma linha, entre as abas e as ações */
.tpc--com-filtros { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "titulo abas filtros acoes"; }
.tpc--com-filtros.tpc--sem-abas { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "titulo filtros acoes"; }
/* Com filtros e sem ações: a grade não guarda a coluna nem o vão das ações, e o último filtro encosta na borda direita */
.tpc--com-filtros.tpc--sem-acoes { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "titulo abas filtros"; }
.tpc--com-filtros.tpc--sem-abas.tpc--sem-acoes { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "titulo filtros"; }
.tpc__filtros { grid-area: filtros; justify-self: end; display: flex; align-items: center; gap: 8px; min-width: 0; }
.tpc__filtros > * { min-width: 0; }

.tpc-ico {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 18px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  direction: ltr;
  display: inline-flex;
  flex-shrink: 0;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

/* Título */
.tpc__titulo { grid-area: titulo; display: flex; align-items: center; gap: 8px; min-width: 0; }
.tpc__h1 { margin: 0; font-size: 20px; line-height: 1.2; font-weight: var(--tpc-peso-medio); white-space: nowrap; color: var(--tpc-tinta); }
.tpc__junto { display: inline-flex; align-items: center; gap: 8px; }

/* Ajuda: o (i) ao lado do título; a frase aparece no passar do mouse, no foco ou no toque */
.tpc__ajuda {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 999px;
  background: transparent; color: var(--tpc-sub); cursor: help; font: inherit;
}
.tpc__ajuda:hover, .tpc__ajuda:focus-visible, .tpc__ajuda.is-aberta { background: var(--tpc-trilho); color: var(--tpc-tinta); outline: none; }
.tpc__dica {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 30;
  width: max-content; max-width: 320px; padding: 10px 12px; border-radius: 10px;
  background: var(--tpc-dica); color: var(--tpc-dica-tinta);
  font-size: 12.5px; line-height: 1.45; font-weight: var(--tpc-peso-texto); text-align: left; white-space: normal;
  box-shadow: 0 8px 24px rgba(20, 24, 22, 0.18);
  display: none; pointer-events: none;
}
.tpc__ajuda:hover .tpc__dica, .tpc__ajuda:focus-visible .tpc__dica, .tpc__ajuda.is-aberta .tpc__dica { display: block; animation: tpc-surge 0.15s ease; }
@keyframes tpc-surge { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Abas: um trilho só, ativa no acento do sistema */
.tpc__abas {
  grid-area: abas; justify-self: start; display: flex; align-items: center; gap: 2px;
  max-width: 100%; min-width: 0; padding: 4px; overflow-x: auto; scrollbar-width: none;
  border: 1px solid var(--tpc-borda); border-radius: 999px; background: var(--tpc-trilho);
}
.tpc__abas::-webkit-scrollbar { display: none; }
.tpc__aba {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto;
  height: 34px; padding: 0 14px; margin: 0; border: 0; border-radius: 999px;
  background: transparent; color: var(--tpc-sub);
  font: inherit; font-size: 13px; font-weight: var(--tpc-peso-medio); line-height: 1; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
.tpc__aba:hover { background: var(--tpc-sup); color: var(--tpc-tinta); }
.tpc__aba:focus-visible { outline: 2px solid var(--tpc-ativo); outline-offset: 1px; }
.tpc__aba.is-ativa { background: var(--tpc-ativo); color: var(--tpc-sobre-ativo); box-shadow: 0 2px 8px rgba(20, 24, 22, 0.14); }
.tpc__aba.is-ativa:hover { background: var(--tpc-ativo-forte); }
/* Aba clicada enquanto a página dela chega: já marcada, sem barra nem esqueleto (#236) */
.tpc__aba.is-indo { cursor: progress; }
.tpc__qtd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--tpc-sup); color: var(--tpc-tinta); font-size: 11px; font-weight: var(--tpc-peso-medio);
}
.tpc__qtd--aviso { background: var(--tpc-aviso-fundo); color: var(--tpc-aviso-tinta); }
.tpc__aba.is-ativa .tpc__qtd { background: rgba(252, 252, 251, 0.2); color: var(--tpc-sobre-ativo); }

/* Ações: botão de ícone redondo, botão com texto, botão cheio e alternador */
.tpc__acoes { grid-area: acoes; justify-self: end; display: flex; align-items: center; gap: 8px; }
.tpc__icone, .tpc__botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--tpc-alto); margin: 0; border: 1px solid var(--tpc-borda); border-radius: 999px;
  background: var(--tpc-sup); color: var(--tpc-tinta);
  font: inherit; font-size: 13px; font-weight: var(--tpc-peso-medio); line-height: 1; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease;
}
.tpc__icone { width: var(--tpc-alto); padding: 0; }
.tpc__botao { padding: 0 14px; }
.tpc__icone:hover, .tpc__botao:hover { background: var(--tpc-trilho); border-color: var(--tpc-borda-forte); }
.tpc__icone:focus-visible, .tpc__botao:focus-visible { outline: 2px solid var(--tpc-ativo); outline-offset: 2px; }
.tpc__icone:disabled, .tpc__botao:disabled { opacity: 0.5; cursor: default; }
.tpc__botao--cheio { background: var(--tpc-ativo); border-color: var(--tpc-ativo); color: var(--tpc-sobre-ativo); font-weight: var(--tpc-peso-destaque); }
.tpc__botao--cheio:hover { background: var(--tpc-ativo-forte); border-color: var(--tpc-ativo-forte); }
.tpc__icone .tpc-ico, .tpc__botao .tpc-ico { font-size: 19px; }
.tpc__icone.is-girando .tpc-ico { animation: tpc-gira 0.9s linear infinite; }
@keyframes tpc-gira { to { transform: rotate(360deg); } }
.tpc__alterna { display: inline-flex; height: var(--tpc-alto); padding: 3px; gap: 2px; border: 1px solid var(--tpc-borda); border-radius: 999px; background: var(--tpc-trilho); box-sizing: border-box; }
.tpc__alterna > a, .tpc__alterna > button, .tpc__alterna > span {
  display: inline-flex; align-items: center; gap: 4px; padding: 0 12px; border: 0; border-radius: 999px;
  background: transparent; color: var(--tpc-sub); font: inherit; font-size: 12.5px; font-weight: var(--tpc-peso-medio);
  text-decoration: none; cursor: pointer;
}
.tpc__alterna > span { cursor: default; }
.tpc__alterna > .is-ativa { background: var(--tpc-sup); color: var(--tpc-tinta); box-shadow: 0 1px 3px rgba(20, 24, 22, 0.12); }
.tpc__alterna .tpc-ico { font-size: 17px; }

/* Computador estreito: abas descem para a 2ª linha */
@media (max-width: 1150px) {
  .tpc { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titulo acoes" "abas abas"; }
  .tpc--sem-abas { grid-template-areas: "titulo acoes"; }
  .tpc--com-filtros { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "titulo filtros acoes" "abas abas abas"; }
  .tpc--com-filtros.tpc--sem-abas { grid-template-areas: "titulo filtros acoes"; }
  .tpc--com-filtros.tpc--sem-acoes { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "titulo filtros" "abas abas"; }
  .tpc--com-filtros.tpc--sem-abas.tpc--sem-acoes { grid-template-areas: "titulo filtros"; }
}
/* Computador mais estreito: filtros descem para a linha das abas */
@media (max-width: 900px) {
  .tpc--com-filtros { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titulo acoes" "abas abas" "filtros filtros"; }
  .tpc--com-filtros.tpc--sem-abas { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titulo acoes" "filtros filtros"; }
  .tpc--com-filtros.tpc--sem-acoes { grid-template-columns: minmax(0, 1fr); grid-template-areas: "titulo" "abas" "filtros"; }
  .tpc--com-filtros.tpc--sem-abas.tpc--sem-acoes { grid-template-columns: minmax(0, 1fr); grid-template-areas: "titulo" "filtros"; }
  .tpc__filtros { justify-self: stretch; }
  .tpc__filtros > * { flex: 1 1 auto; }
}
/* Celular: título e ações em cima, abas roláveis embaixo, botões só com ícone */
@media (max-width: 640px) {
  .tpc { column-gap: 12px; row-gap: 12px; margin-bottom: 16px; --tpc-alto: 36px; }
  .tpc__h1 { font-size: 18px; overflow: hidden; text-overflow: ellipsis; }
  .tpc__abas { scroll-snap-type: x proximity; }
  .tpc__aba { scroll-snap-align: start; font-size: 12.5px; padding: 0 12px; }
  .tpc__botao .tpc__rotulo, .tpc__alterna .tpc__rotulo { display: none; }
  .tpc__botao { width: var(--tpc-alto); padding: 0; }
  .tpc { position: relative; }
  .tpc__ajuda { position: static; }
  .tpc__dica { top: 44px; left: 0; right: 0; width: auto; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tpc__aba, .tpc__icone, .tpc__botao { transition: none; }
  .tpc__ajuda .tpc__dica, .tpc__icone.is-girando .tpc-ico { animation: none; }
}