/* =====================================================================
   DS-HUB — folha da área /dpmg para a home autenticada (acesso.html) e os
   7 hubs de documentos (iniciais/mediacao/declaracao/defesas/modelos/
   negativa/oficio/recursos). CSS puro, sem build step, sem CDN.

   Markup: 100% produzido por templates/macros/hub.html — este arquivo só
   estiliza as classes que as macros já emitem (contrato da migração,
   .agents-output/CONTRATO-MIGRACAO-V2.md). Fonte de verdade visual:
   design-exploracao/v2/3-home.html (home) e v2/4-hub-documentos.html
   (hubs), traduzidos aqui para os nomes REAIS das classes das macros.

   Duas partes:
     1. HOME AUTENTICADA (.dpmg-hub--home) — acesso.html
     2. HUB DE DOCUMENTOS (.dpmg-hub, sem modificador) — os 7 hubs
   ===================================================================== */


/* =====================================================================
   1. HOME AUTENTICADA — .dpmg-hub--home (acesso.html)

   Diferença estrutural do hub de documentos: o macro hub_home_header()
   não usa .main-container (ver templates/html/acesso.html:22 — o <div
   class="dpmg-hub dpmg-hub--home"> é o próprio container, direto dentro
   de <main>), então é ESTA classe que precisa da largura/margem que em
   outras páginas da área restrita vem de .main-container (ds-shell.css).
   ===================================================================== */
.dpmg-hub--home {
  width: 100%;
  max-width: var(--ds-container-max);
  margin-inline: auto;
  padding: var(--ds-space-8) var(--ds-space-6) var(--ds-space-9);
}
@media (max-width: 480px) {
  .dpmg-hub--home { padding: var(--ds-space-6) var(--ds-space-4) var(--ds-space-8); }
}

/* ---- Cabeçalho de saudação (hub_home_header) ---- */
.dpmg-hub-home-header {
  text-align: center;
  padding-bottom: var(--ds-space-6);
}
.dpmg-hub-home-header h1 { margin-bottom: var(--ds-space-3); }
.dpmg-hub-home-header p {
  color: var(--ds-text-muted);
  margin-inline: auto;
  margin-top: var(--ds-space-1);
}
.dpmg-hub-home-greeting {
  color: var(--ds-text-muted);
  font-size: var(--ds-text-md);
  margin-top: var(--ds-space-3);
}

/* ---- Acesso rápido (hub_quick) ---- */
.dpmg-hub-quick { padding-bottom: var(--ds-space-7); }
.dpmg-hub-quick-title {
  margin-bottom: var(--ds-space-4);
  font-size: var(--ds-text-xl);
}
/* tabindex="-1" no <h2> (destino de foco do fallback de remoção, US-1906):
   precisa de indicação visível de foco mesmo sem :focus-visible nativo em
   elemento não-interativo por padrão em todo navegador testado. */
.dpmg-hub-quick-title:focus-visible {
  outline: var(--ds-focus-outline);
  outline-offset: var(--ds-focus-outline-offset);
  border-radius: var(--ds-radius-sm);
}
.dpmg-hub-quick-grid { display: flex; flex-wrap: wrap; gap: var(--ds-space-3); }
.dpmg-hub-quick-note {
  margin-top: var(--ds-space-3);
  font-size: var(--ds-text-sm);
  color: var(--ds-text-muted);
  max-width: 74ch;
}

/* Atalho fixo do servidor (ATALHOS_RAPIDOS) — nível NEUTRO (US-1905): o
   destaque dourado é reservado ao que É do usuário (chip pessoal abaixo). */
.dpmg-hub-quick-chip {
  display: inline-flex; align-items: center; gap: var(--ds-space-2);
  min-height: 40px; padding: var(--ds-space-2) var(--ds-space-4);
  border-radius: var(--ds-radius-full);
  border: 1px solid var(--ds-border-control);
  background: var(--ds-surface);
  color: var(--ds-text);
  font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium);
  transition: var(--ds-t-color), border-color var(--ds-duration-fast) var(--ds-ease);
}
.dpmg-hub-quick-chip:hover { border-color: var(--ds-green-500); color: var(--ds-green-700); }
.dpmg-hub-quick-chip:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }
.dpmg-hub-quick-chip-icon { display: inline-flex; align-items: center; color: var(--ds-green-700); font-size: 1.05rem; }

/* Item = wrapper do chip pessoal (favorito ou, só via JS, "recente"). O
   botão de remover (US-1906) é IRMÃO do <a>, nunca aninhado nele — botão
   dentro de link rouba foco/clique e não é HTML válido — por isso o
   wrapper existe como alvo do position:relative do botão. */
.dpmg-hub-quick-item { position: relative; display: inline-flex; align-items: stretch; }
.dpmg-hub-quick-item--fixado .dpmg-hub-mine-chip { padding-right: calc(var(--ds-space-6) + var(--ds-space-2)); }

/* Chip pessoal — favorito (fixado) e, só com JS, sugestão de "recente".
   Fixado usa borda dourada de 3,48:1 (--ds-gold-600); sugerido é tracejado,
   sem dourado, para não competir visualmente com o que o usuário escolheu. */
.dpmg-hub-mine-chip {
  display: inline-flex; align-items: center; gap: var(--ds-space-2);
  min-height: 40px; padding: var(--ds-space-2) var(--ds-space-4);
  border-radius: var(--ds-radius-full);
  background: var(--ds-surface);
  color: var(--ds-text);
  text-decoration: none;
  font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium);
  border: 1px solid var(--ds-border-control);
  transition: var(--ds-t-color), border-color var(--ds-duration-fast) var(--ds-ease), transform var(--ds-duration-base) var(--ds-ease), box-shadow var(--ds-duration-base) var(--ds-ease);
}
.dpmg-hub-mine-chip:hover {
  border-color: var(--ds-gold-600);
  box-shadow: var(--ds-shadow-sm);
  transform: translateY(var(--ds-lift-sm));
}
.dpmg-hub-mine-chip:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }
.dpmg-hub-mine-chip--fixado { border: 2px solid var(--ds-gold-600); }
.dpmg-hub-mine-chip--sugerido { border-style: dashed; }
.dpmg-hub-mine-chip-icon { display: inline-flex; align-items: center; color: var(--ds-green-700); font-size: 1.05rem; }
.dpmg-hub-mine-chip-label { min-width: 0; } /* min-width:0 — texto do rótulo nunca deve empurrar a largura do chip além do que a fileira em flex-wrap permite */

/* Marcador de estado (alfinete/relógio) — comunica fixado vs. sugerido a
   quem enxerga E a quem usa leitor de tela (texto em .visually-hidden no
   próprio markup, já resolvido por ds-compat.css). */
.dpmg-hub-mine-chip-state { display: inline-flex; align-items: center; margin-left: 2px; }
.dpmg-hub-mine-chip-state i { font-size: 0.8rem; color: var(--ds-text-faint); }
.dpmg-hub-mine-chip-state--fixado i { color: var(--ds-gold-600); } /* 3,48:1 — ícone que carrega informação (WCAG 1.4.11), não --ds-gold-500 (2,42:1) */

/* Botão de remover (US-1906), só existe no chip fixado, montado por JS.
   Posicionado sobre o chip — por isso o padding-right extra acima, para o
   texto do rótulo nunca ficar embaixo dele. */
.dpmg-hub-quick-remove {
  position: absolute; top: 50%; right: var(--ds-space-2); transform: translateY(-50%);
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--ds-radius-full);
  background: transparent; color: var(--ds-text-faint);
  transition: var(--ds-t-color);
}
/* Alvo de toque 40px sem crescer visualmente o "x": ::before invisível
   estende a área clicável 6px por lado (28 + 6 + 6 = 40), mesmo padrão já
   usado em .dpmg-card__favorite (ds.css) para o mesmo problema. */
.dpmg-hub-quick-remove::before { content: ""; position: absolute; inset: -6px; }
.dpmg-hub-quick-remove:hover { background: var(--ds-surface-alt); color: var(--ds-text); }
.dpmg-hub-quick-remove:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }

/* ---- "Meus atalhos" (hub_mine) — nasce hidden, revelada por JS ----
   [hidden][hidden] em ds.css já vence qualquer display declarado aqui
   (regra global testada, ver ds.css:57) — nada extra a fazer para o
   estado oculto funcionar. */
.dpmg-hub-mine { margin-bottom: var(--ds-space-7); }
.dpmg-hub-mine-grid { display: flex; flex-wrap: wrap; gap: var(--ds-space-3); }
.dpmg-hub-mine-note {
  margin-top: var(--ds-space-3);
  font-size: var(--ds-text-sm);
  color: var(--ds-text-muted);
}

/* ---- Grade principal de categorias (hub_tile_grid) ----
   auto-fill em vez de auto-fit: com poucos cards (5-6 grupos de nav), fit
   esticaria o último órfão até a largura total da linha; fill preserva a
   largura de coluna e deixa a coluna extra vazia, alinhado à esquerda —
   mesma correção já documentada no protótipo v2 (home-grid). */
.dpmg-hub-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--ds-space-5);
}
@media (max-width: 600px) {
  .dpmg-hub-tile-grid { grid-template-columns: 1fr; }
}

/* ---- Tile / card de categoria (hub_tile) ----
   Mesmo papel de .dpmg-card (ds.css), com o vocabulário próprio das
   macros de hub. min-width:0 é OBRIGATÓRIO no item de grid: sem ele, o
   mínimo automático do item de grid é o do seu conteúdo, e qualquer
   descendente com white-space:nowrap empurra a coluna além da largura
   disponível. Foi a causa medida de +9px de rolagem horizontal a 360px no
   protótipo v2, quando a mini-lista do card "Histórico" ainda vivia aqui
   (US-1910; movida para .dpmg-hub-retomar-* na US-1920). Ver comentário
   equivalente em design-exploracao/v2/3-home.html. */
.dpmg-hub-tile {
  position: relative;
  min-width: 0;
  display: flex; flex-direction: column;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-xs);
  transition: var(--ds-t-shadow), border-color var(--ds-duration-base) var(--ds-ease);
}
.dpmg-hub-tile:hover {
  box-shadow: var(--ds-shadow-md);
  border-color: var(--ds-green-500);
  transform: translateY(var(--ds-lift-md));
}
.dpmg-hub-tile:has(.dpmg-hub-tile-link:focus-visible) {
  box-shadow: var(--ds-focus-ring), var(--ds-shadow-md);
  border-color: var(--ds-green-500);
}
.dpmg-hub-tile-body { display: flex; flex-direction: column; gap: var(--ds-space-3); padding: var(--ds-space-5); flex: 1 1 auto; }
.dpmg-hub-tile-header { display: flex; align-items: flex-start; gap: var(--ds-space-3); }
.dpmg-hub-tile-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: var(--ds-radius-md);
  background: var(--ds-green-100); color: var(--ds-green-900);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
}
.dpmg-hub-tile-title { font-size: var(--ds-text-md); font-family: var(--ds-font-ui); font-weight: var(--ds-weight-semibold); color: var(--ds-green-900); margin: 0; }
.dpmg-hub-tile-text { font-size: var(--ds-text-sm); color: var(--ds-text-muted); line-height: var(--ds-leading-normal); flex: 1; margin: 0; }
.dpmg-hub-tile--ia .dpmg-hub-tile-icon { background: var(--ds-gold-100); color: var(--ds-gold-ink); }
.dpmg-hub-tile--admin .dpmg-hub-tile-icon { background: var(--ds-gold-100); color: var(--ds-gold-ink); }

/* Stretched link — CONTRATO: o <a> fica ESTÁTICO/no fluxo (macro emite um
   <a> vazio, sem texto, ver templates/macros/hub.html:379); quem estica a
   área de clique para o card inteiro é o ::after, absoluto contra o
   .dpmg-hub-tile ancestral (já position:relative acima). Aplicar
   position:absolute no próprio <a> tiraria o único elemento clicável do
   fluxo sem quebrar nada visualmente (ele não tem texto) — mas colapsaria
   a ORDEM DE TABULAÇÃO documentada na macro (estrela -> link -> sub-links),
   então mantemos o padrão do resto do DS por consistência de contrato. */
/* `position: static` é o ponto inteiro da técnica, não um descuido: com
   `position: relative` no <a>, o `inset: 0` do ::after passa a resolver
   contra o PRÓPRIO <a> — que aqui é vazio e mede 0×0 — em vez do
   `.dpmg-hub-tile`, e a área de clique do card deixa de existir. Medido no
   navegador antes da correção: 18% dos pontos do card resolviam para o
   link (só a caixa do texto), contra 100% depois. Pelo mesmo motivo o
   z-index vive no ::after: num elemento estático ele é inerte. */
.dpmg-hub-tile-link { position: static; }
.dpmg-hub-tile-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.dpmg-hub-tile-link:focus-visible { outline: none; } /* :has() acima assume a indicação */

/* Sub-links e estrela precisam de z-index:2 — ACIMA do ::after do link
   principal (z-index:1) — senão o clique para de alcançá-los e sempre
   navega para o destino principal do card. */
.dpmg-hub-tile-sublinks {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; gap: var(--ds-space-2);
  padding-top: var(--ds-space-2); border-top: 1px solid var(--ds-border);
  margin: 0; list-style: none;
}
.dpmg-hub-tile-sublink {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: var(--ds-space-1);
  min-height: 40px; padding: var(--ds-space-1) var(--ds-space-2);
  border-radius: var(--ds-radius-sm);
  font-size: var(--ds-text-sm); color: var(--ds-text-muted);
  text-decoration: none;
}
.dpmg-hub-tile-sublink:hover { background: var(--ds-green-50); color: var(--ds-green-700); }
.dpmg-hub-tile-sublink:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }
.dpmg-hub-tile-sublink--destrutivo { color: var(--ds-destructive-text); }
.dpmg-hub-tile-sublink--destrutivo:hover { background: var(--ds-danger-bg); }

.dpmg-hub-tile-action {
  display: inline-flex; align-items: center; gap: var(--ds-space-1);
  margin-top: auto;
  font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold);
  color: var(--ds-green-700); text-transform: uppercase; letter-spacing: var(--ds-tracking-wide);
}
.dpmg-hub-tile-action-arrow { transition: transform var(--ds-duration-base) var(--ds-ease); }
.dpmg-hub-tile:hover .dpmg-hub-tile-action-arrow,
.dpmg-hub-tile:focus-within .dpmg-hub-tile-action-arrow { transform: translateX(4px); }

/* ---- Estrela de favorito (hub_tile_fav) ----
   Progressive enhancement: sem JS não há listener nenhum no botão (ele
   ficaria clicável e mudo), por isso só aparece depois que
   dpmg-hub-favoritos.js marca .is-enhanced no container (US-1111). */
.dpmg-hub-tile-fav {
  display: none;
  position: relative; z-index: 2;
  align-items: center; justify-content: center;
  width: 32px; height: 32px;
  margin-left: auto;
  border: none; border-radius: var(--ds-radius-md);
  background: transparent; color: var(--ds-text-faint);
  transition: var(--ds-t-color);
}
.is-enhanced .dpmg-hub-tile-fav { display: inline-flex; }
/* Alvo de toque 40px sem crescer a caixa visível (32px): ::before
   invisível estende 4px por lado (32 + 4 + 4 = 40), mesmo padrão de
   .dpmg-card__favorite em ds.css. */
.dpmg-hub-tile-fav::before { content: ""; position: absolute; inset: -4px; }
.dpmg-hub-tile-fav:hover { background: var(--ds-surface-alt); color: var(--ds-gold-ink); }
.dpmg-hub-tile-fav:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }
.dpmg-hub-tile-fav[aria-pressed="true"] { color: var(--ds-gold-600); } /* 3,48:1 — ícone que comunica o estado, ver nota do chip fixado acima */
/* Troca contornada/preenchida por aria-pressed, sem depender do JS mexer
   em classe de ícone (o glyph do Bootstrap Icons continua correto). */
.dpmg-hub-tile-fav-solid { display: none; }
.dpmg-hub-tile-fav[aria-pressed="true"] .dpmg-hub-tile-fav-outline { display: none; }
.dpmg-hub-tile-fav[aria-pressed="true"] .dpmg-hub-tile-fav-solid { display: inline-flex; }

/* A mini-lista de "últimos documentos" que morava no card "Histórico"
   (US-1910) virou seção própria na US-1920 — .dpmg-hub-retomar-*, mais
   abaixo. O card voltou a ser só card de navegação. */


/* =====================================================================
   1-B. HOME AUTENTICADA — refinamento de hierarquia (US-1920)

   Tudo aqui é escopado em .dpmg-hub--home: as macros de hub são
   compartilhadas com o hub público (.dpmg-hub--publico) e com os 7 hubs de
   documentos, e nada deste bloco pode vazar para eles. Nenhuma cor, fonte
   ou raio novo — só tokens --ds-* já existentes.
   ===================================================================== */

/* ---- Cabeçalho: uma linha, à esquerda ----
   Era centralizado, com <h1> de 36px + saudação + descrição: ~150px acima
   da dobra num app de uso diário, e no eixo errado em relação a tudo que
   vem abaixo (a grade é alinhada à esquerda). O <h1> continua sendo o
   mesmo texto do {% block title %} (decisão da US-1908). */
.dpmg-hub--home .dpmg-hub-home-header {
  text-align: left;
  padding-bottom: var(--ds-space-4);
}
.dpmg-hub--home .dpmg-hub-home-header h1 {
  font-size: var(--ds-text-2xl);
  margin-bottom: var(--ds-space-1);
}
.dpmg-hub--home .dpmg-hub-home-header p { margin-inline: 0; }
.dpmg-hub--home .dpmg-hub-home-greeting {
  font-size: var(--ds-text-sm);
  margin-top: 0;
}

/* ---- Alvo da busca global na própria página (hub_home_busca) ----
   É um <button> com aparência de campo: o mecanismo continua sendo o
   diálogo do Ctrl+K (data-busca-abrir, dpmg-busca.js), nunca um segundo
   campo de busca com regras próprias. */
.dpmg-hub-busca {
  display: flex; align-items: center; gap: var(--ds-space-3);
  width: 100%; min-height: 48px;
  padding: 0 var(--ds-space-4);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border-control);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-xs);
  margin-bottom: var(--ds-space-7);
  text-align: left;
  transition: var(--ds-t-color), box-shadow var(--ds-duration-base) var(--ds-ease);
}
.dpmg-hub-busca:hover { border-color: var(--ds-green-500); box-shadow: var(--ds-shadow-sm); }
.dpmg-hub-busca:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }
.dpmg-hub-busca-icone { color: var(--ds-green-700); font-size: 1.15rem; display: inline-flex; }
.dpmg-hub-busca-texto { flex: 1; min-width: 0; color: var(--ds-text-faint); font-size: var(--ds-text-base); }
.dpmg-hub-busca-kbd {
  flex-shrink: 0;
  font: inherit; font-size: var(--ds-text-xs); color: var(--ds-text-muted);
  background: var(--ds-surface-alt); border: 1px solid var(--ds-border);
  padding: 3px 7px; border-radius: 4px;
}
@media (max-width: 600px) {
  /* Não existe Ctrl+K no telefone — o rótulo mentiria. */
  .dpmg-hub-busca-kbd { display: none; }
}

/* =====================================================================
   1-C. HOME AUTENTICADA — "Coluna e Trilho" (US-1921)

   O que foi MEDIDO na home da US-1920, e que fazia tudo ter a mesma cara:

     · 23 pastilhas de 13px/peso 500 numa tela só (19 sub-links + 3 atalhos
       fixos + 1 chip de favorito). Três objetos distintos, uma roupa só.
     · Os 6 ícones eram o MESMO objeto: 40px, fundo --ds-green-100, glifo
       --ds-green-900, raio 8px. Só o glifo mudava — e a 19px ele não se lê.
       À distância de leitura eram seis quadrados verdes iguais.
     · Rampa tipográfica plana: <h1> de 28px e todo o resto entre 16 e 18px.
       Pior, o nome das categorias (16px) era MENOR que o título dos painéis
       (18px) — o alvo mais importante da página era seu texto mais fraco.
     · Nenhum agrupamento: seis categorias como iguais, sem um único título
       de seção. Sem marco onde pousar o olho, a grade irregular (um card de
       2 colunas, um curto, uma faixa) lia como quebrada, não como hierarquia.

   A resposta não é decorar os cards: é a página passar a ter DUAS metades
   com linguagens visuais diferentes, decididas por `home_coluna` em
   navegacao.py (dado, nunca `if grupo.id` no template):

     ESQUERDA (trabalho)  o que se vem PRODUZIR. Card horizontal largo,
                          marca de 56px com tinta própria, título de 26px.
     TRILHO (contexto)    o que é do usuário, o que já passou e o que
                          administra. Sem card: filetes e linhas de 44px.

   A regra que impede o trilho de virar gaveta: NADA entra nele por não
   caber na esquerda. Por isso Ferramentas ficou na ESQUERDA (Planilha e
   Gerador produzem documento) e só desceu de peso.

   Tudo aqui é escopado em .dpmg-hub--home: as macros são compartilhadas com
   o hub público (.dpmg-hub--publico) e com os 7 hubs de documentos, e nada
   deste bloco pode vazar para eles.
   ===================================================================== */

/* ---- Tintas das famílias ----
   Ao contrário da US-1920, este bloco PRECISA de cor nova: o sistema de
   ícones inteiro depende de as famílias terem tintas distintas, e o DS só
   tem a verde. São três irmãs — mesma clareza, mesma saturação baixa, só a
   matiz muda — mais uma neutra para a família de apoio. Ficam como custom
   properties no escopo da home, e não em ds.css, justamente para não virarem
   vocabulário global antes de existir um segundo uso. */
.dpmg-hub--home {
  --dpmg-tinta-atos-bg: #f2ece0;
  --dpmg-tinta-atos-ink: #4a3d17;
  --dpmg-tinta-pecas-bg: var(--ds-green-100);
  --dpmg-tinta-pecas-ink: var(--ds-green-900);
  --dpmg-tinta-mediacao-bg: #e2edf0;
  --dpmg-tinta-mediacao-ink: #10383d;
  --dpmg-tinta-neutra-bg: #edefec;
  --dpmg-tinta-neutra-ink: var(--ds-text-muted);
}

/* ---- As duas metades ---- */
.dpmg-hub-colunas {
  display: grid;
  grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr);
  gap: var(--ds-space-8);
  align-items: start;
  margin-top: var(--ds-space-7);
}
/* Abaixo de 980px o trilho não tem largura para as linhas de 44px sem
   truncar: desce inteiro, guardando a mesma linguagem de filetes. */
@media (max-width: 980px) {
  .dpmg-hub-colunas { grid-template-columns: 1fr; gap: var(--ds-space-7); }
}

.dpmg-hub-obra-rotulo {
  margin: 0 0 var(--ds-space-4);
  font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold);
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--ds-green-900);
}

/* ---- "As três mais geradas" (hub_home_medidas) ----
   Os 3 documentos de maior volume nos 299 registros analisados, no TOPO da
   coluna de trabalho. Até a US-1920 eram chips de "Acesso rápido" no canto
   oposto ao olhar — sendo o caminho mais percorrido da página. Não são
   pastilha nem card de família: são um terceiro objeto, deliberadamente
   (lista com filete dentro de uma caixa clara). */
.dpmg-hub-medidas {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  padding: 0 var(--ds-space-5) var(--ds-space-2);
  margin-bottom: var(--ds-space-6);
}
.dpmg-hub-medidas-topo {
  display: flex; align-items: baseline; gap: var(--ds-space-3);
  padding: var(--ds-space-3) 0 var(--ds-space-1);
}
.dpmg-hub-medidas-rotulo {
  margin: 0;
  font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--ds-text-faint);
}
.dpmg-hub-medidas-fonte { margin-left: auto; font-size: var(--ds-text-xs); color: var(--ds-text-faint); }
/* No estreito os dois não cabem lado a lado: em vez de o rótulo quebrar em
   duas linhas e a fonte do dado em outras duas, cada um fica com sua linha. */
@media (max-width: 600px) {
  .dpmg-hub-medidas-topo { flex-wrap: wrap; gap: var(--ds-space-1); }
  .dpmg-hub-medidas-fonte { margin-left: 0; flex-basis: 100%; }
}
.dpmg-hub-medidas-lista { list-style: none; margin: 0; padding: 0; }
.dpmg-hub-medidas-lista li + li { border-top: 1px solid var(--ds-border); }
.dpmg-hub-medida {
  display: flex; align-items: center; gap: var(--ds-space-3);
  min-height: 48px; padding: var(--ds-space-2) 0;
  color: var(--ds-text); text-decoration: none;
  font-size: var(--ds-text-base); font-weight: var(--ds-weight-medium);
  border-radius: var(--ds-radius-sm);
  transition: var(--ds-t-color);
}
.dpmg-hub-medida:hover { color: var(--ds-green-700); }
.dpmg-hub-medida:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }
.dpmg-hub-medida-icone { flex-shrink: 0; display: inline-flex; color: var(--dpmg-tinta-atos-ink); font-size: 1.05rem; }
.dpmg-hub-medida-texto { min-width: 0; }
.dpmg-hub-medida-seta { margin-left: auto; flex-shrink: 0; color: var(--ds-text-faint); font-size: .85rem; }

/* ---- Card de família (hub_home_familia) ----
   Horizontal: a marca de 56px ocupa a coluna esquerda inteira e o corpo
   ocupa a direita. min-width:0 no corpo é obrigatório — sem ele o mínimo
   automático do item de grid é o do conteúdo, e qualquer descendente com
   white-space:nowrap empurra a coluna além da largura disponível (mesma
   causa medida de +9px de rolagem horizontal a 360px na US-1910). */
.dpmg-hub--home .dpmg-hub-familia {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--ds-space-5);
  align-items: start;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-xs);
  padding: var(--ds-space-5) var(--ds-space-6);
  transition: var(--ds-t-shadow), border-color var(--ds-duration-base) var(--ds-ease);
}
.dpmg-hub--home .dpmg-hub-familia + .dpmg-hub-familia { margin-top: var(--ds-space-4); }
.dpmg-hub--home .dpmg-hub-familia:hover { border-color: var(--ds-green-500); box-shadow: var(--ds-shadow-md); }
.dpmg-hub--home .dpmg-hub-familia:focus-within { border-color: var(--ds-green-500); }

.dpmg-hub--home .dpmg-hub-familia-marca {
  width: 56px; height: 56px; flex-shrink: 0;
  border-radius: var(--ds-radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  background: var(--dpmg-tinta-neutra-bg);
  color: var(--dpmg-tinta-neutra-ink);
}
.dpmg-hub--home .dpmg-hub-familia--atos .dpmg-hub-familia-marca { background: var(--dpmg-tinta-atos-bg); color: var(--dpmg-tinta-atos-ink); }
.dpmg-hub--home .dpmg-hub-familia--pecas .dpmg-hub-familia-marca { background: var(--dpmg-tinta-pecas-bg); color: var(--dpmg-tinta-pecas-ink); }
.dpmg-hub--home .dpmg-hub-familia--mediacao .dpmg-hub-familia-marca { background: var(--dpmg-tinta-mediacao-bg); color: var(--dpmg-tinta-mediacao-ink); }
.dpmg-hub--home .dpmg-hub-familia--neutra .dpmg-hub-familia-marca { background: var(--dpmg-tinta-neutra-bg); color: var(--dpmg-tinta-neutra-ink); }

.dpmg-hub--home .dpmg-hub-familia-corpo { min-width: 0; display: block; padding: 0; }
/* Espaço reservado para a estrela, para o título nunca correr por baixo. */
.dpmg-hub--home .dpmg-hub-familia .dpmg-hub-tile-header { display: block; padding-right: var(--ds-space-7); }
/* 26px: era 16px na US-1920, MENOR que o título dos painéis vizinhos. */
.dpmg-hub--home .dpmg-hub-familia .dpmg-hub-tile-title {
  font-family: var(--ds-font-display);
  font-size: 1.625rem; font-weight: var(--ds-weight-semibold);
  line-height: var(--ds-leading-tight);
  margin: 0;
}
.dpmg-hub--home .dpmg-hub-familia .dpmg-hub-tile-text {
  margin: var(--ds-space-2) 0 var(--ds-space-4);
  font-size: var(--ds-text-sm); line-height: var(--ds-leading-normal);
  color: var(--ds-text-muted);
}

/* Família de apoio (Ferramentas): mesma metade da página, peso menor. */
.dpmg-hub--home .dpmg-hub-familia--apoio {
  margin-top: var(--ds-space-6);
  background: var(--ds-surface-sunken);
  border-color: transparent;
  box-shadow: none;
}
.dpmg-hub--home .dpmg-hub-familia--apoio:hover { border-color: var(--ds-border-strong); box-shadow: none; }
.dpmg-hub--home .dpmg-hub-familia--apoio .dpmg-hub-tile-title { font-size: 1.3125rem; }
.dpmg-hub--home .dpmg-hub-familia--apoio .dpmg-hub-tile-sublink { background: transparent; }

/* ---- Sub-links: alvo com CONTORNO, não pastilha cinza preenchida ----
   Era o mesmo objeto visual do chip de atalho e do chip de favorito — três
   coisas diferentes com a mesma roupa, e 19 delas na tela. Agora é um alvo
   de 44px com borda, distinto do chip dourado do trilho. */
.dpmg-hub--home .dpmg-hub-familia .dpmg-hub-tile-sublinks {
  display: flex; flex-wrap: wrap; gap: var(--ds-space-3);
  list-style: none; margin: 0; padding: 0; border-top: 0;
}
.dpmg-hub--home .dpmg-hub-familia .dpmg-hub-tile-sublink {
  display: inline-flex; align-items: center; gap: var(--ds-space-2);
  min-height: 44px; padding: 0 var(--ds-space-4);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border-strong);
  color: var(--ds-text); text-decoration: none;
  font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium);
  /* z-index acima do ::after do stretched link (z-index:1), para o sub-link
     continuar recebendo o próprio clique — mesmo empilhamento da US-1915. */
  position: relative; z-index: 2;
  transition: var(--ds-t-color), border-color var(--ds-duration-fast) var(--ds-ease);
}
.dpmg-hub--home .dpmg-hub-familia .dpmg-hub-tile-sublink:hover { border-color: var(--ds-green-500); color: var(--ds-green-700); }
.dpmg-hub--home .dpmg-hub-familia .dpmg-hub-tile-sublink:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }
.dpmg-hub--home .dpmg-hub-familia .dpmg-hub-tile-sublink i { color: var(--ds-text-faint); font-size: .95rem; }
.dpmg-hub--home .dpmg-hub-familia .dpmg-hub-tile-sublink:hover i { color: var(--ds-green-700); }
.dpmg-hub--home .dpmg-hub-familia .dpmg-hub-tile-sublink--destrutivo,
.dpmg-hub--home .dpmg-hub-familia .dpmg-hub-tile-sublink--destrutivo i { color: var(--ds-destructive-text); }

/* Estrela no canto, fora do fluxo (contrato de ordem de tabulação da
   US-1915: o botão é irmão de .dpmg-hub-tile-body, antes dele). */
.dpmg-hub--home .dpmg-hub-tile-fav {
  position: absolute;
  top: var(--ds-space-2); right: var(--ds-space-2);
  margin-left: 0; z-index: 2;
}

/* =====================================================================
   O TRILHO — sem card, sem borda, sem sombra. Filetes e nada mais.
   É esta ausência que faz as duas metades lerem como coisas diferentes;
   qualquer caixa aqui devolve a página ao problema de origem.
   ===================================================================== */
.dpmg-hub-trilho-bloco + .dpmg-hub-trilho-bloco {
  margin-top: var(--ds-space-7);
  padding-top: var(--ds-space-6);
  border-top: 1px solid var(--ds-border-strong);
}
.dpmg-hub-trilho-rotulo {
  display: flex; align-items: baseline; gap: var(--ds-space-3);
  margin: 0 0 var(--ds-space-3);
  font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold);
  /* Mesma entrelinha de .dpmg-hub-obra-rotulo: os dois rótulos abrem as
     duas colunas na MESMA altura, e sem isto a entrelinha relaxada herdada
     do corpo empurrava as maiúsculas do trilho ~1,8px para baixo — o tipo
     de quase-alinhamento que incomoda sem se deixar nomear. */
  line-height: var(--ds-leading-tight);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--ds-text-faint);
}
/* tabindex="-1" no rótulo (destino de foco do fallback de remoção,
   US-1906): precisa de indicação visível de foco mesmo sem :focus-visible
   nativo em elemento não-interativo. */
.dpmg-hub-trilho-rotulo:focus-visible {
  outline: var(--ds-focus-outline);
  outline-offset: var(--ds-focus-outline-offset);
  border-radius: var(--ds-radius-sm);
}
.dpmg-hub-trilho-ver {
  margin-left: auto;
  font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold);
  letter-spacing: normal; text-transform: none;
  color: var(--ds-green-700); text-decoration: none; white-space: nowrap;
}
.dpmg-hub-trilho-ver:hover { text-decoration: underline; }
.dpmg-hub-trilho-ver:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }

.dpmg-hub-trilho-lista { list-style: none; margin: 0; padding: 0; }
.dpmg-hub-trilho-lista li + li { border-top: 1px solid var(--ds-border); }
.dpmg-hub-trilho-linha {
  display: flex; align-items: center; gap: var(--ds-space-3);
  min-height: 44px; padding: var(--ds-space-2) 0;
  min-width: 0; color: var(--ds-text); text-decoration: none;
  font-size: var(--ds-text-base);
  border-radius: var(--ds-radius-sm);
  transition: var(--ds-t-color);
}
.dpmg-hub-trilho-linha:hover { color: var(--ds-green-700); }
.dpmg-hub-trilho-linha:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }
/* Nível 3 do sistema de ícones: 18px, contorno monocromático, sem caixa. */
.dpmg-hub-trilho-icone { flex-shrink: 0; display: inline-flex; width: 18px; color: var(--ds-text-faint); font-size: .95rem; }
.dpmg-hub-trilho-texto { min-width: 0; flex: 1; }
/* Sem white-space:nowrap: o título quebra em duas linhas em vez de virar
   reticências. É o dado mais útil da página inteira. */
.dpmg-hub-trilho-doc {
  display: block;
  font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium);
  line-height: var(--ds-leading-tight);
}
.dpmg-hub-trilho-quando { display: block; font-size: var(--ds-text-xs); color: var(--ds-text-faint); }
.dpmg-hub-trilho-seta { flex-shrink: 0; color: var(--ds-text-faint); font-size: .85rem; }
.dpmg-hub-trilho-vazio {
  margin: 0; font-size: var(--ds-text-sm); font-style: italic;
  color: var(--ds-text-faint); line-height: var(--ds-leading-normal);
}
.dpmg-hub-trilho-dica {
  margin: var(--ds-space-3) 0 0;
  font-size: var(--ds-text-xs); color: var(--ds-text-faint);
  line-height: var(--ds-leading-normal);
}
/* Some assim que houver qualquer chip pessoal — a dica só serve enquanto o
   bloco está vazio. :has() no irmão anterior, mesma técnica já usada em
   .dpmg-hub-quick-grupo (US-1920). */
.dpmg-hub-quick-grid:has(a) + .dpmg-hub-trilho-dica { display: none; }

/* Nível 4 do sistema de ícones: NENHUM ícone. */
.dpmg-hub-trilho-textos { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ds-space-1) var(--ds-space-4); }
.dpmg-hub-trilho-txt {
  font-size: var(--ds-text-sm); color: var(--ds-text-muted); text-decoration: none;
  border-radius: var(--ds-radius-sm);
}
.dpmg-hub-trilho-txt:hover { color: var(--ds-text); text-decoration: underline; }
.dpmg-hub-trilho-txt:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }
.dpmg-hub-trilho-txt--destrutivo { color: var(--ds-destructive-text); }
.dpmg-hub-trilho-ponto { color: var(--ds-border-strong); font-size: var(--ds-text-sm); }

/* O aviso do JS sobre alfinete/relógio: no trilho ele é rodapé de bloco, não
   prosa. Sem isto herda os 13px e o max-width de 74ch da US-1920 e ocupa três
   linhas cheias numa coluna de 438px. */
.dpmg-hub--home .dpmg-hub-quick-note {
  margin-top: var(--ds-space-3);
  max-width: none;
  font-size: var(--ds-text-xs);
  color: var(--ds-text-faint);
  line-height: var(--ds-leading-normal);
}

/* O bloco "Seus atalhos" continua sendo .dpmg-hub-quick (contrato de ids
   com o JS), mas perde a caixa que tinha na US-1920 — no trilho ele é uma
   seção como as outras. */
.dpmg-hub--home .dpmg-hub-quick { background: none; border: 0; box-shadow: none; padding: 0; }

/* =====================================================================
   1-D. HOME AUTENTICADA — "Busca no centro" (22/09/2026)

   Escolhida entre três direções desenhadas (busca no centro, mesa do dia,
   índice completo). O que ela resolve na "Coluna e Trilho" (1-C):

     · Duas buscas visíveis ao mesmo tempo (a da navbar e o campo da
       página). A busca da página vira o centro da faixa do topo, e o botão
       da navbar some SÓ nesta página — o Ctrl+K continua valendo.
     · O trilho acabava na metade da altura e deixava ~650px vazios à
       direita. O contexto do usuário desce para uma faixa de colunas
       abaixo das famílias, e as famílias passam a uma grade de 4.
     · Três estilos de rótulo de seção. Sobra um: o de .dpmg-hub-trilho-rotulo.

   Tudo escopado em .dpmg-hub--palco (modificador ADICIONAL ao --home, só
   em acesso.html): as regras de 1-C continuam valendo onde este bloco não
   sobrescreve, e nada vaza para o hub público nem para os 7 hubs.
   ===================================================================== */

/* A página deixa de ser um container centralizado: a faixa ocupa a largura
   inteira e cada parte interna recria a largura de --ds-container-max. */
.dpmg-hub--home.dpmg-hub--palco {
  max-width: none;
  padding: 0 0 var(--ds-space-9);
  /* Um tom abaixo de --ds-green-900 para o fundo da faixa escurecer nas
     bordas; fica no escopo, como as tintas de 1-C. */
  --dpmg-palco-fundo: #0b2e1b;
  --dpmg-palco-luz: #1d6541;
  --dpmg-palco-largura: var(--ds-container-max);
  --dpmg-palco-lateral: var(--ds-space-6);
}
@media (max-width: 480px) {
  .dpmg-hub--home.dpmg-hub--palco { --dpmg-palco-lateral: var(--ds-space-4); padding-bottom: var(--ds-space-8); }
}

/* Só nesta página: a busca da faixa substitui o botão da navbar. */
body:has(.dpmg-hub--palco) .dpmg-navbar__search { display: none; }

/* ---- A faixa ---- */
.dpmg-hub-palco {
  background:
    radial-gradient(90% 130% at 50% 0%, var(--dpmg-palco-luz) 0%, var(--ds-green-900) 58%, var(--dpmg-palco-fundo) 100%);
  color: var(--ds-on-brand);
  padding: var(--ds-space-9) var(--dpmg-palco-lateral) calc(var(--ds-space-10) + var(--ds-space-7));
}
.dpmg-hub-palco-dentro {
  max-width: 880px;
  margin-inline: auto;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--ds-space-4);
  text-align: center;
}
.dpmg-hub-palco-saudacao {
  margin: 0;
  font-size: var(--ds-text-base);
  color: var(--ds-text-muted-on-brand);
}
/* ds.css pinta h1 de verde-escuro: aqui o fundo É verde-escuro (armadilha
   de hero escuro já medida na migração do DS). */
.dpmg-hub--palco .dpmg-hub-palco-titulo {
  margin: 0;
  font-family: var(--ds-font-display);
  font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem);
  font-weight: var(--ds-weight-semibold);
  line-height: 1.08;
  color: var(--ds-on-brand);
  text-wrap: balance;
}

/* A busca: o mesmo botão de 1-B, maior e branco sobre a faixa. */
.dpmg-hub--palco .dpmg-hub-busca {
  margin: var(--ds-space-3) 0 0;
  min-height: 64px;
  padding: 0 var(--ds-space-4) 0 var(--ds-space-5);
  border: 0;
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18), 0 18px 40px rgba(0, 0, 0, 0.18);
}
.dpmg-hub--palco .dpmg-hub-busca:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22), 0 18px 40px rgba(0, 0, 0, 0.24); }
.dpmg-hub--palco .dpmg-hub-busca:focus-visible { box-shadow: var(--ds-focus-ring), 0 18px 40px rgba(0, 0, 0, 0.18); }
.dpmg-hub--palco .dpmg-hub-busca-icone { font-size: 1.35rem; }
.dpmg-hub--palco .dpmg-hub-busca-texto { font-size: 1.0625rem; }
/* No telefone o exemplo não cabe numa linha: corta com reticências em vez
   de quebrar dentro do campo. */
.dpmg-hub--palco .dpmg-hub-busca-texto { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* As três mais geradas: de caixa com lista para linha de atalhos. */
.dpmg-hub-medidas--palco {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--ds-space-2) var(--ds-space-3);
  margin: var(--ds-space-1) 0 0;
  padding: 0;
  background: none; border: 0; border-radius: 0;
}
.dpmg-hub-medidas--palco .dpmg-hub-medidas-topo { padding: 0; }
.dpmg-hub-medidas--palco .dpmg-hub-medidas-rotulo {
  color: var(--ds-text-muted-on-brand);
  letter-spacing: .09em;
}
.dpmg-hub-medidas--palco .dpmg-hub-medidas-lista {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ds-space-2);
}
.dpmg-hub-medidas--palco .dpmg-hub-medidas-lista li + li { border-top: 0; }
.dpmg-hub-medidas--palco .dpmg-hub-medida {
  min-height: 40px;
  padding: 0 var(--ds-space-4) 0 var(--ds-space-3);
  gap: var(--ds-space-2);
  border-radius: var(--ds-radius-full);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--ds-border-on-brand);
  color: var(--ds-on-brand);
  font-size: var(--ds-text-sm);
}
.dpmg-hub-medidas--palco .dpmg-hub-medida:hover {
  background: var(--ds-on-brand); color: var(--ds-green-900); text-decoration: none;
}
.dpmg-hub-medidas--palco .dpmg-hub-medida-icone { color: inherit; font-size: .95rem; }
.dpmg-hub-medidas--palco .dpmg-hub-medida-seta { display: none; }

/* ---- Famílias: grade de 4 que sobe por cima da borda da faixa ---- */
.dpmg-hub--palco .dpmg-hub-colunas {
  display: block;
  max-width: var(--dpmg-palco-largura);
  margin: calc(-1 * var(--ds-space-9)) auto 0;
  padding-inline: var(--dpmg-palco-lateral);
  position: relative;
}
.dpmg-hub--palco .dpmg-hub-obra {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ds-space-4);
  align-items: stretch;
}
@media (max-width: 1100px) { .dpmg-hub--palco .dpmg-hub-obra { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .dpmg-hub--palco .dpmg-hub-obra { grid-template-columns: minmax(0, 1fr); } }

/* Card vertical: marca e título lado a lado, descrição e seções embaixo,
   em largura cheia. A marca sai do fluxo (absolute) para o corpo não
   precisar de display:contents — ver o aviso em hub_home_familia(). */
.dpmg-hub--palco .dpmg-hub-familia,
.dpmg-hub--palco .dpmg-hub-familia--apoio {
  display: block;
  margin: 0;
  padding: var(--ds-space-5);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  box-shadow: var(--ds-shadow-sm);
}
.dpmg-hub--palco .dpmg-hub-familia + .dpmg-hub-familia { margin-top: 0; }
.dpmg-hub--palco .dpmg-hub-familia:hover { box-shadow: var(--ds-shadow-md); }
.dpmg-hub--palco .dpmg-hub-familia-marca {
  position: absolute;
  /* +6px: centra a marca de 44px na linha de título de 56px. */
  top: calc(var(--ds-space-5) + 6px); left: var(--ds-space-5);
  width: 44px; height: 44px;
  font-size: 1.25rem;
}
.dpmg-hub--palco .dpmg-hub-familia .dpmg-hub-tile-header {
  display: flex; align-items: center;
  /* 56px = duas linhas de título. "Mediação e Conciliação" quebra na grade
     de 4, e sem esta altura fixa a lista desse card começava ~28px abaixo
     das vizinhas. */
  min-height: 56px;
  padding-left: calc(44px + var(--ds-space-3));
  padding-right: var(--ds-space-7);
}
.dpmg-hub--palco .dpmg-hub-familia .dpmg-hub-tile-title,
.dpmg-hub--palco .dpmg-hub-familia--apoio .dpmg-hub-tile-title {
  font-size: var(--ds-text-xl);
}
.dpmg-hub--palco .dpmg-hub-familia .dpmg-hub-tile-text {
  margin: var(--ds-space-3) 0 var(--ds-space-3);
}
/* Na grade de 4 as descrições vão de 2 a 3 linhas; reservar 3 alinha o
   começo das listas lado a lado. Com 2 colunas ou menos não há vizinha. */
@media (min-width: 1101px) {
  .dpmg-hub--palco .dpmg-hub-familia .dpmg-hub-tile-text { min-height: calc(3 * 1.5em); }
}

/* Seções da família: de botões com contorno para linhas com filete. */
.dpmg-hub--palco .dpmg-hub-familia .dpmg-hub-tile-sublinks {
  display: flex; flex-direction: column; gap: 0;
}
.dpmg-hub--palco .dpmg-hub-familia .dpmg-hub-tile-sublinks li { border-top: 1px solid var(--ds-border); }
.dpmg-hub--palco .dpmg-hub-familia .dpmg-hub-tile-sublink,
.dpmg-hub--palco .dpmg-hub-familia--apoio .dpmg-hub-tile-sublink {
  display: flex; width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0; border-radius: var(--ds-radius-sm);
  background: transparent;
  font-size: var(--ds-text-base);
}
.dpmg-hub--palco .dpmg-hub-familia .dpmg-hub-tile-sublink::after {
  content: "\f285";           /* bi-chevron-right */
  font-family: bootstrap-icons;
  margin-left: auto;
  font-size: .8rem;
  color: var(--ds-text-faint);
  transition: transform var(--ds-duration-base) var(--ds-ease);
}
.dpmg-hub--palco .dpmg-hub-familia .dpmg-hub-tile-sublink:hover { color: var(--ds-green-700); }
.dpmg-hub--palco .dpmg-hub-familia .dpmg-hub-tile-sublink:hover::after { transform: translateX(3px); color: var(--ds-green-700); }

/* ---- Contexto do usuário: faixa de colunas abaixo das famílias ---- */
.dpmg-hub--palco .dpmg-hub-trilho {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--ds-space-7) var(--ds-space-8);
  margin-top: var(--ds-space-8);
  padding-top: var(--ds-space-6);
  border-top: 1px solid var(--ds-border-strong);
}
.dpmg-hub--palco .dpmg-hub-trilho-bloco + .dpmg-hub-trilho-bloco {
  margin-top: 0; padding-top: 0; border-top: 0;
}
/* Administração: grade de 2 colunas em vez de texto corrido com pontos —
   na coluna de ~290px o ponto sobrava no fim da linha. */
.dpmg-hub--palco .dpmg-hub-trilho-textos {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-space-2) var(--ds-space-5);
}
.dpmg-hub--palco .dpmg-hub-trilho-ponto { display: none; }

/* Sem o itálico: estado vazio não é erro. */
.dpmg-hub--palco .dpmg-hub-trilho-vazio { font-style: normal; color: var(--ds-text-muted); }

/* =====================================================================
   2. HUB DE DOCUMENTOS — .dpmg-hub sem modificador (os 7 hubs)

   Container já vem de .main-container (ds-shell.css) — hub_page() envolve
   tudo em <div class="main-container dpmg-hub" data-dpmg-hub>. Título
   (.page-title) e descrição (.page-description) também já vêm de
   ds-shell.css — este arquivo só cobre o que é específico do hub.
   ===================================================================== */

/* ---- Cabeçalho + filtro instantâneo (hub_header) ---- */
.dpmg-hub-header { margin-bottom: var(--ds-space-6); }
.dpmg-hub-filter { max-width: 480px; margin-inline: auto; }
.dpmg-hub-filter-label {
  display: block; text-align: center;
  font-weight: var(--ds-weight-semibold); color: var(--ds-green-900);
  margin-bottom: var(--ds-space-2); font-size: var(--ds-text-base);
}
.dpmg-hub-filter-field { position: relative; }
.dpmg-hub-filter-icon {
  position: absolute; left: var(--ds-space-3); top: 50%; transform: translateY(-50%);
  color: var(--ds-text-faint); pointer-events: none;
}
.dpmg-hub-filter-input {
  width: 100%; min-height: 40px;
  padding: var(--ds-space-2) var(--ds-space-3) var(--ds-space-2) calc(var(--ds-space-3) + 20px + var(--ds-space-2));
  border: 1px solid var(--ds-border-control);
  border-radius: var(--ds-radius-md);
  font-family: var(--ds-font-ui); font-size: var(--ds-text-base);
  color: var(--ds-text); background: var(--ds-surface);
  transition: border-color var(--ds-duration-fast) var(--ds-ease), box-shadow var(--ds-duration-fast) var(--ds-ease);
}
.dpmg-hub-filter-input::placeholder { color: var(--ds-text-faint); }
.dpmg-hub-filter-input:hover { border-color: var(--ds-text-faint); }
.dpmg-hub-filter-input:focus-visible { outline: none; border-color: var(--ds-green-500); box-shadow: var(--ds-focus-ring); }
.dpmg-hub-filter-count {
  display: block; text-align: center;
  min-height: 1.25rem; margin-top: var(--ds-space-2);
  font-size: var(--ds-text-sm); color: var(--ds-text-muted);
}

/* ---- Navegação de seções — faixa de chips sticky (hub_nav) ----
   Só existe com 2+ seções (a própria macro decide isso). */
.dpmg-hub-nav {
  position: sticky; top: var(--ds-space-3); z-index: var(--ds-z-sticky);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm);
  padding: var(--ds-space-3);
  margin-bottom: var(--ds-space-6);
}
/* Filtro que não casa nada esconde TODAS as seções, e `dpmg-hub-documentos.js`
   esconde o `<li>` de cada chip junto (`item.hidden = secao.hidden`) — mas o
   `<nav>` continua no fluxo, e sobrava uma barra branca de 26px com borda e
   sombra, vazia, logo acima do estado "Nenhum documento encontrado". Medido
   em /dpmg/iniciais com o termo "guardaxyzinexistente": 4 chips, 0 visíveis,
   nav com 26px. Some quando nenhum item resta visível. */
.dpmg-hub-nav:not(:has(.dpmg-hub-nav-item:not([hidden]))) { display: none; }
.dpmg-hub-nav-list {
  display: flex; flex-wrap: nowrap; gap: var(--ds-space-2);
  margin: 0; padding: 0 0 var(--ds-space-1); list-style: none;
  overflow-x: auto;
}
.dpmg-hub-nav-item { flex-shrink: 0; }
.dpmg-hub-nav-link {
  display: inline-flex; align-items: center; gap: var(--ds-space-2);
  min-height: 40px; padding: var(--ds-space-2) var(--ds-space-4);
  border-radius: var(--ds-radius-full);
  border: 1px solid var(--ds-border-control);
  background: var(--ds-surface-alt); color: var(--ds-green-700);
  font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium);
  text-decoration: none; white-space: nowrap;
  transition: var(--ds-t-color), transform var(--ds-duration-base) var(--ds-ease);
}
.dpmg-hub-nav-link:hover { background: var(--ds-green-700); color: var(--ds-on-brand); border-color: var(--ds-green-700); }
.dpmg-hub-nav-link:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }
/* .active é escrita por dpmg-hub-documentos.js (marcarAtivo(), scroll-spy
   via IntersectionObserver) — estado, não estilo puro; precisa de regra
   visual (regra dura 8 do contrato). aria-current="true" é escrito pelo
   mesmo JS e reforça a mesma pista para leitor de tela. */
.dpmg-hub-nav-link.active,
.dpmg-hub-nav-link[aria-current="true"] {
  background: var(--ds-green-700); color: var(--ds-on-brand);
  border-color: var(--ds-green-700); font-weight: var(--ds-weight-semibold);
}

/* ---- Seção de documentos (hub_secao) ---- */
.dpmg-hub-section { scroll-margin-top: calc(var(--ds-navbar-height) + var(--ds-space-4)); padding-block: var(--ds-space-6); }
.dpmg-hub-section + .dpmg-hub-section { border-top: 1px solid var(--ds-border); }
.dpmg-hub-section:focus { outline: none; }
.dpmg-hub-section-title {
  display: flex; align-items: center; gap: var(--ds-space-2);
  margin: 0 0 var(--ds-space-2);
}
.dpmg-hub-section-desc { color: var(--ds-text-muted); max-width: 78ch; margin: 0 0 var(--ds-space-5); }

/* Seção destacada (painel), ex.: Núcleo de Mediação. */
.dpmg-hub-section--destaque {
  background: var(--ds-green-50);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-5);
}
.dpmg-hub-section-selo {
  display: inline-flex; align-items: center; gap: var(--ds-space-2);
  font-size: var(--ds-text-xs); font-weight: var(--ds-weight-bold);
  letter-spacing: var(--ds-tracking-wide); text-transform: uppercase;
  color: var(--ds-on-brand); background: var(--ds-green-700);
  padding: var(--ds-space-1) var(--ds-space-3); border-radius: var(--ds-radius-full);
  margin-bottom: var(--ds-space-3);
}
/* Variante "judicial" (mediação): selo dourado — distingue as peças
   dirigidas ao juízo dos documentos lavrados na própria sessão. */
.dpmg-hub-section--judicial { background: var(--ds-gold-100); }
/* Tinta `--ds-green-900`, não `--ds-gold-ink`. O `--ds-gold-ink` mede 9,3:1
   sobre BRANCO — é para isso que ele existe —, mas aqui o fundo é o próprio
   `--ds-gold-500`, e sobre ele o par cai para **3,84:1**, abaixo dos 4,5:1
   que texto de 12px exige. Medido no navegador em /dpmg/mediacao, no selo
   "Peças Judiciais". Com `--ds-green-900` sobre o mesmo dourado: **5,07:1**.
   Token certo, superfície errada — o mesmo erro que já apareceu no link de
   retorno do login, agora do outro lado. */
.dpmg-hub-section--judicial .dpmg-hub-section-selo { background: var(--ds-gold-500); color: var(--ds-green-900); }

/* ---- Subgrupo dentro de uma seção (hub_subgrupo, US-922) ---- */
.dpmg-hub-subgrupo { margin-bottom: var(--ds-space-6); }
.dpmg-hub-subgrupo:last-child { margin-bottom: 0; }
.dpmg-hub-subgrupo-title {
  display: flex; align-items: center; gap: var(--ds-space-2);
  font-size: var(--ds-text-base); color: var(--ds-green-900);
  font-family: var(--ds-font-ui); font-weight: var(--ds-weight-semibold);
  margin: 0 0 var(--ds-space-3);
}
.dpmg-hub-subgrupo-title i { color: var(--ds-gold-ink); }

/* ---- Trilha do fluxo (hub_trilha, US-922/US-H09) ---- */
.dpmg-hub-trilha {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2) var(--ds-space-3);
  list-style: none; margin: 0 0 var(--ds-space-5);
  padding: var(--ds-space-3) var(--ds-space-4);
  background: var(--ds-surface-alt); border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
}
.dpmg-hub-trilha-passo { display: flex; align-items: center; gap: var(--ds-space-2); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); color: var(--ds-text-muted); }
.dpmg-hub-trilha-passo:not(:last-child)::after { content: "\2192"; margin-left: var(--ds-space-3); color: var(--ds-text-faint); font-weight: var(--ds-weight-regular); }
.dpmg-hub-trilha-numero {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: var(--ds-radius-full);
  background: var(--ds-green-700); color: var(--ds-on-brand);
  font-size: var(--ds-text-xs); font-weight: var(--ds-weight-bold); flex-shrink: 0;
}
/* Passo navegável (US-H09): alvo de toque 40px sem alterar a tipografia
   herdada de .dpmg-hub-trilha-texto. */
.dpmg-hub-trilha-link {
  display: inline-flex; align-items: center; min-height: 40px;
  color: inherit; text-decoration: none;
  border-bottom: 1px solid transparent;
}
.dpmg-hub-trilha-link:hover,
.dpmg-hub-trilha-link:focus-visible { color: var(--ds-green-700); border-bottom-color: currentColor; }

/* ---- Grade e card de documento (hub_card) ----
   auto-fill + min(260px,100%): min() evita que o piso de 260px transborde
   em viewports mais estreitos que 260px + padding do container (a mesma
   causa de rolagem horizontal documentada para a grade da home, regra
   dura 3 do contrato). */
.documents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: var(--ds-space-4);
}
/* .card/.card-body (ds-compat.css) já dão a base do card — posição
   relativa, fundo, borda, padding. Aqui só o que é específico do card de
   documento: hover, o link esticado e o layout compacto. */
.document-card {
  min-width: 0; /* ver nota grande da grade da home — mesma causa raiz em qualquer item de grid com texto sem quebra dentro */
  padding: var(--ds-space-4);
  display: flex; flex-direction: column; gap: var(--ds-space-2);
  transition: var(--ds-t-shadow), border-color var(--ds-duration-base) var(--ds-ease);
}
.document-card:hover { box-shadow: var(--ds-shadow-md); border-color: var(--ds-green-500); transform: translateY(var(--ds-lift-sm)); }
.document-card:focus-within { box-shadow: var(--ds-focus-ring), var(--ds-shadow-md); border-color: var(--ds-green-500); }
.document-link {
  /* ESTÁTICO de propósito — ver a nota longa em .dpmg-hub-tile-link acima.
     O z-index fica no ::after, que é quem tem posição. */
  position: static;
  display: flex; align-items: flex-start; gap: var(--ds-space-2);
  font-size: var(--ds-text-base); font-family: var(--ds-font-ui); font-weight: var(--ds-weight-semibold);
  color: var(--ds-green-900); text-decoration: none;
}
.document-link i { color: var(--ds-green-700); font-size: 1.05rem; line-height: 1; flex-shrink: 0; }
/* Stretched link do card inteiro — ::after absoluto contra .card
   (position:relative de ds-compat.css), o próprio <a> continua no fluxo
   normal (é o texto real do título, precisa ficar assim). */
.document-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.document-link:focus-visible { outline: none; }
.card:has(.document-link:focus-visible) { box-shadow: var(--ds-focus-ring), var(--ds-shadow-md); border-color: var(--ds-green-500); }
.dpmg-hub-card-desc { font-size: var(--ds-text-sm); color: var(--ds-text-muted); line-height: var(--ds-leading-normal); margin: 0; }

/* ---- Estado vazio do filtro (hub_empty, US-612) ---- */
.dpmg-hub-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--ds-space-3); padding: var(--ds-space-9) var(--ds-space-5);
  border: 1px dashed var(--ds-border-strong); border-radius: var(--ds-radius-lg);
  background: var(--ds-surface-alt);
  margin-block: var(--ds-space-7);
}
.dpmg-hub-empty-icon { font-size: 2rem; color: var(--ds-text-faint); }
.dpmg-hub-empty-title { font-family: var(--ds-font-display); font-size: var(--ds-text-md); margin: 0; }
.dpmg-hub-empty-text { color: var(--ds-text-muted); font-size: var(--ds-text-sm); max-width: 42ch; margin: 0; }

/* ---- Botão flutuante "voltar ao topo" (hub_scroll_top) ----
   .visible é escrita por dpmg-hub-documentos.js (scroll > 300px) — estado,
   precisa de regra visual (regra dura 8 do contrato). */
.scroll-top {
  position: fixed; right: var(--ds-space-6); bottom: var(--ds-space-6);
  width: 48px; height: 48px; border-radius: var(--ds-radius-full);
  background: var(--ds-green-700); color: var(--ds-on-brand); border: none;
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
  box-shadow: var(--ds-shadow-lg);
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity var(--ds-duration-base) var(--ds-ease), transform var(--ds-duration-base) var(--ds-ease), background-color var(--ds-duration-fast) var(--ds-ease);
}
.scroll-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.scroll-top:hover { background: var(--ds-green-600); }
.scroll-top:focus-visible { outline: none; box-shadow: var(--ds-focus-ring), var(--ds-shadow-lg); }

@media (max-width: 768px) {
  .dpmg-hub-section-title { font-size: var(--ds-text-lg); }
}


/* =====================================================================
   2-B. HUB NA FAIXA — .dpmg-hub--faixa (22/09/2026)

   Os 8 hubs passam a abrir como a página inicial: faixa verde com o nome
   do hub, o filtro como busca grande e as seções em pílulas (ds-faixa.css,
   variante `.page-header--centro`). As seções viram cartões brancos numa
   grade que sobe por cima da borda de baixo da faixa — o mesmo cartão das
   famílias da home (ds-hub.css 1-D) —, e cada documento vira uma linha
   com filete e seta dentro do cartão da sua seção.

   Grade `auto-fit`: 4 seções dão 4 colunas (Iniciais, Declarações), 3 dão
   3 (Mediação, Modelos), 1 seção ocupa a largura inteira (Defesas,
   Ofícios, Recursos) e, nesse caso, as linhas se repartem em colunas
   dentro do cartão.

   Tudo escopado em .dpmg-hub--faixa: as regras da seção 2 continuam
   valendo onde este bloco não sobrescreve.
   ===================================================================== */
.dpmg-hub--faixa { padding-bottom: var(--ds-space-9); }
.dpmg-hub--faixa .dpmg-hub-header { margin-bottom: 0; }

/* O filtro deixa de ser uma caixa de 480px centrada: é a busca da faixa. */
.dpmg-hub--faixa .dpmg-hub-filter { max-width: none; }
.dpmg-hub--faixa .dpmg-hub-filter-input {
  min-height: 64px; border: 0;
  padding: 0 var(--ds-space-5) 0 calc(var(--ds-space-5) + 1.35rem + var(--ds-space-3));
}
/* A coluna da faixa do hub é mais larga que a busca: as pílulas de seção
   (até 4, com nomes longos como "Guarda, Convivência e Alimentos") cabem
   numa linha só em 1280px. A busca fica nos 880px da home. */
.dpmg-hub--faixa .page-header--centro { --dpmg-faixa-largura: 1080px; }
.dpmg-hub--faixa .dpmg-hub-filter-input:hover { border: 0; }
.dpmg-hub--faixa .dpmg-hub-filter-count { color: var(--ds-text-muted-on-brand); }

/* As pílulas moram na faixa: sem caixa branca e sem ficar grudadas no
   topo ao rolar — translúcidas por cima do conteúdo branco, seriam
   ilegíveis. O estado ativo do scroll-spy continua sendo escrito pelo JS
   e fica visível enquanto a faixa está na tela. */
.dpmg-hub--faixa .dpmg-hub-nav {
  position: static;
  background: none; border: 0; box-shadow: none;
  padding: 0; margin: 0;
}
.dpmg-hub--faixa .dpmg-hub-nav-list { flex-wrap: wrap; overflow: visible; padding: 0; }
.dpmg-hub--faixa .dpmg-hub-nav-link {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--ds-border-control-on-brand);
  color: var(--ds-on-brand);
}
.dpmg-hub--faixa .dpmg-hub-nav-link:hover,
.dpmg-hub--faixa .dpmg-hub-nav-link.active,
.dpmg-hub--faixa .dpmg-hub-nav-link[aria-current="true"] {
  background: var(--ds-on-brand); color: var(--ds-green-900); border-color: var(--ds-on-brand);
}

/* ---- A grade de seções ---- */
.dpmg-hub-corpo {
  position: relative;
  max-width: var(--ds-container-max);
  margin: calc(-1 * var(--dpmg-faixa-sobe, var(--ds-space-9))) auto 0;
  padding-inline: var(--dpmg-faixa-lateral, var(--ds-space-6));
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--ds-space-4);
  align-items: stretch;
}
.dpmg-hub-rodape {
  max-width: var(--ds-container-max);
  margin-inline: auto;
  padding-inline: var(--dpmg-faixa-lateral, var(--ds-space-6));
}

/* ---- A seção vira cartão ---- */
.dpmg-hub--faixa .dpmg-hub-section {
  min-width: 0;
  padding: var(--ds-space-5);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm);
}
.dpmg-hub--faixa .dpmg-hub-section + .dpmg-hub-section { border-top: 1px solid var(--ds-border); }
.dpmg-hub--faixa .dpmg-hub-section--destaque { background: var(--ds-green-50); }
.dpmg-hub--faixa .dpmg-hub-section--judicial { background: var(--ds-gold-100); }
/* Marca de 44px com o ícone da seção, como a das famílias da home. */
.dpmg-hub--faixa .dpmg-hub-section-title {
  gap: var(--ds-space-3);
  min-height: 44px;
  font-size: var(--ds-text-xl);
  margin: 0;
}
.dpmg-hub--faixa .dpmg-hub-section-title i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 10px;
  background: var(--ds-green-100); color: var(--ds-green-700);
  font-size: 1.25rem;
}
.dpmg-hub--faixa .dpmg-hub-section--destaque .dpmg-hub-section-title i { background: var(--ds-surface); }
.dpmg-hub--faixa .dpmg-hub-section-desc {
  margin: var(--ds-space-3) 0 var(--ds-space-4);
  font-size: var(--ds-text-sm);
}
.dpmg-hub--faixa .dpmg-hub-section-title + .documents-grid,
.dpmg-hub--faixa .dpmg-hub-section-title + .dpmg-hub-subgrupo { margin-top: var(--ds-space-4); }
.dpmg-hub--faixa .dpmg-hub-trilha { background: var(--ds-surface); }

/* Subgrupo: rótulo discreto no lugar do título com ícone. */
.dpmg-hub--faixa .dpmg-hub-subgrupo { margin-bottom: var(--ds-space-4); }
.dpmg-hub--faixa .dpmg-hub-subgrupo:last-child { margin-bottom: 0; }
.dpmg-hub--faixa .dpmg-hub-subgrupo-title {
  margin: 0 0 var(--ds-space-1);
  font-size: var(--ds-text-xs);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--ds-text-muted);
}
.dpmg-hub--faixa .dpmg-hub-subgrupo-title i { display: none; }

/* ---- O documento vira linha ---- */
.dpmg-hub--faixa .documents-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 0 var(--ds-space-6);
}
.dpmg-hub--faixa .document-card {
  padding: 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--ds-border);
  border-radius: 0;
  box-shadow: none;
}
.dpmg-hub--faixa .document-card:hover { box-shadow: none; transform: none; border-color: var(--ds-border); }
.dpmg-hub--faixa .document-card:focus-within,
.dpmg-hub--faixa .card:has(.document-link:focus-visible) { box-shadow: var(--ds-focus-ring); border-radius: var(--ds-radius-sm); }
.dpmg-hub--faixa .document-card .card-body {
  display: flex; align-items: center; gap: var(--ds-space-2);
  min-height: 44px; padding: var(--ds-space-2) 0;
}
.dpmg-hub--faixa .document-link {
  flex: 1; min-width: 0;
  align-items: center;
  font-weight: var(--ds-weight-regular);
  color: var(--ds-text);
  line-height: var(--ds-leading-normal);
}
.dpmg-hub--faixa .document-link i { color: var(--ds-text-faint); font-size: .95rem; }
.dpmg-hub--faixa .document-card .card-body::after {
  content: "\f285";           /* bi-chevron-right, como nas famílias da home */
  font-family: bootstrap-icons;
  font-size: .8rem;
  color: var(--ds-text-faint);
  transition: transform var(--ds-duration-base) var(--ds-ease);
}
.dpmg-hub--faixa .document-card:hover .document-link,
.dpmg-hub--faixa .document-card:hover .card-body::after { color: var(--ds-green-700); }
.dpmg-hub--faixa .document-card:hover .card-body::after { transform: translateX(3px); }
/* A descrição fica no DOM (o filtro busca por ela) e vira dica do link. */
.dpmg-hub--faixa .dpmg-hub-card-desc { display: none; }

@media (prefers-reduced-motion: reduce) {
  .dpmg-hub--faixa .document-card .card-body::after { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dpmg-hub-tile, .dpmg-hub-tile-action-arrow, .document-card, .dpmg-hub-nav-link,
  .dpmg-hub-mine-chip, .dpmg-hub-quick-chip, .scroll-top {
    transition: none;
  }
  .dpmg-hub-tile:hover, .document-card:hover, .dpmg-hub-mine-chip:hover { transform: none; }
}