/* Proposta E · estrutura da aba Módulos de /sistema: cabeçalho canônico, números, menu de tabelas e uma tabela por tela. */
@layer app {
  .estr { padding-block: var(--ds-space-6); display: grid; gap: var(--ds-space-5); }

  .estr-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--ds-space-4); }
  .estr-num {
    display: flex;
    align-items: center;
    gap: var(--ds-space-4);
    padding: var(--ds-space-4) var(--ds-space-5);
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius-cartao);
    background: var(--ds-surface);
  }
  .estr-num-rotulo { font: var(--ds-type-label) var(--ds-font-interface); font-weight: 700; }
  .estr-num-valor { font: var(--ds-type-h2) var(--ds-font-marca); }
  .estr-num-nota { font: var(--ds-type-caption) var(--ds-font-interface); color: var(--ds-muted); }

  .estr-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-5); align-items: start; }
  @media (min-width: 1100px) { .estr-layout { grid-template-columns: 360px minmax(0, 1fr); } }
  @media (min-width: 1440px) { .estr-layout { grid-template-columns: 400px minmax(0, 1fr); } }

  .estr-conteudo { display: grid; gap: var(--ds-space-4); min-inline-size: 0; }
  .estr-tabela-topo { display: grid; gap: var(--ds-space-1); }
  .estr-tabela-topo h2 { font: var(--ds-type-label) var(--ds-font-interface); font-weight: 700; font-size: 18px; }
  .estr-caminho { font: var(--ds-type-caption) var(--ds-font-mono); color: var(--ds-muted); }
  .estr-nota { font: var(--ds-type-caption) var(--ds-font-interface); color: var(--ds-muted); }
  .estr-mini-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--ds-space-2) var(--ds-space-5); }
  .estr-mini-numeros div { display: grid; gap: var(--ds-space-1); }
  .estr-mini-numeros dt { font: var(--ds-type-caption) var(--ds-font-interface); font-weight: 700; }
  .estr-mini-numeros dd { margin: 0; }
  .estr-mini-numeros .mini { justify-content: flex-start; }
  .estr-mini-numeros .mini-trilho { inline-size: 100%; max-inline-size: 140px; }

  .estr .painel-tabela { min-inline-size: 900px; }
  .estr tr[data-alvo] > * { background: var(--ds-brand-soft); }
  .estr-grupo-link { color: var(--ds-brand); font-weight: 600; text-underline-offset: 0.2em; }
}