/* =====================================================================
   IA DEFENSOR — DESIGN SYSTEM v2 (ds.css)
   Área restrita /dpmg. Fonte da verdade do visual.
   =====================================================================
   CSS puro, sem build step, sem CDN. Abre por file://.
   Vocabulário de classes: dpmg-<componente>[__elemento][--variante]
   Cada bloco de componente traz um comentário com HTML mínimo de uso.

   Índice
   S1  Fundações — fontes, reset, tokens, tipografia base, layout
   S2  Navegação — navbar autenticada, navbar pública, breadcrumb, rodapé
   S3  Conteúdo — card/tile, badge, chip, favorito, tabela, vazio, toast, modal
   S4  Formulário — campo, select, data, máscara, botão acoplado, seção,
       índice do formulário, erro, ajuda, barra de ações persistente
   S5  Impressão e prefers-reduced-motion
   ===================================================================== */


/* =====================================================================
   S1 — FUNDAÇÕES
   ===================================================================== */

/* ---- @font-face -------------------------------------------------
   As duas famílias variáveis (Inter e EB Garamond) NÃO são declaradas
   aqui: quem as declara é static/css/dpmg-fonts.css, carregado antes
   deste arquivo em base.html. Os arquivos .woff2 são os mesmos; o que
   muda é o `unicode-range`, que lá cobre também os combining marks
   (U+0304, U+0308, U+0329) e os modificadores U+02C6/U+02DA/U+02DC que
   o protótipo não listava. Duplicar a declaração aqui, com a faixa
   menor, faria o navegador tratar as duas como fontes distintas e
   baixar cada arquivo duas vezes — exatamente o desperdício que a
   US-1801 corrigiu.

   Herdado de design-exploracao/v2/ds.css (contrato visual da v2). Ver
   design-exploracao/v2/README.md para as decisões de design e
   RELATORIO-GAUNTLET.md seção 14 para o que ficou em aberto. */

/* ---- Reset moderno -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { height: 100%; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, picture, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
ul[class], ol[class] { list-style: none; padding: 0; }
a { color: inherit; }
table { border-collapse: collapse; width: 100%; }
/* Correção preventiva conhecida (lição das explorações anteriores — v06
   da exploração v1 quebrou exatamente aqui): [hidden] precisa vencer
   QUALQUER seletor de componente que declare display:flex/grid, mesmo
   com a mesma especificidade de classe (ex.: .dpmg-modal-overlay tem
   display:flex e empataria em especificidade com um [hidden] simples,
   vencendo por vir depois no arquivo). Resolvido com especificidade de
   atributo DUPLA — nunca !important. */
[hidden][hidden] { display: none; }

/* ---- Tokens de cor --------------------------------------------------- */
:root {
  /* Marca — verde institucional (preservado) */
  --ds-green-900: #0f3d24;
  --ds-green-700: #1a5c3a;
  --ds-green-600: #206b45;
  --ds-green-500: #2d7a52;
  --ds-green-100: #e6efe9;
  --ds-green-50:  #f2f7f4;
  --ds-green-900-rgb: 15, 61, 36;
  --ds-green-700-rgb: 26, 92, 58;

  /* Marca — dourado (acento, nunca cor de texto direto — ver --ds-gold-ink) */
  --ds-gold-500: #c9a227;
  --ds-gold-400: #e0b93a;
  --ds-gold-100: #f6edd6;
  --ds-gold-ink: #5c4300;   /* variante escurecida — única forma segura de "soar dourado" em texto (9.3:1) */
  --ds-gold-600: #a8851c;   /* dourado para ÍCONE que carrega informação: 3,48:1 sobre --ds-surface, acima do
                               mínimo de 3:1 da WCAG 1.4.11. O --ds-gold-500 mede 2,42:1 e reprova quando o
                               ícone é o que comunica o estado (ex.: estrela de favorito marcada). */
  --ds-gold-500-rgb: 201, 162, 39;

  /* Neutros / superfícies */
  --ds-white: #ffffff;
  --ds-surface: #ffffff;
  --ds-surface-alt: #f6f7f5;
  --ds-surface-sunken: #eef1ee;
  --ds-bg: #f5f6f4;
  --ds-text: #182420;
  --ds-text-muted: #59635d;
  --ds-text-faint: #67716b;   /* 5,06:1 sobre --ds-surface. Era #7c857f, que media 3,80:1 e reprovava AA
                                 em placeholder, "(opcional)" e rótulos de estado. Continua mais claro que
                                 --ds-text-muted (6,24:1), preservando a hierarquia de peso visual. */
  --ds-on-brand: #ffffff;
  --ds-text-muted-on-brand: #cfd6d1;   /* texto secundário sobre fundo escuro de marca (ex.: tela de
                                          login, linear-gradient(155deg, --ds-green-700, --ds-green-900)).
                                          --ds-text-muted foi desenhado para --ds-surface (branco) e não
                                          serve aqui. Medido contra as DUAS pontas do gradiente, não só
                                          uma: 5,38:1 sobre --ds-green-700 (ponta mais clara) e 8,28:1
                                          sobre --ds-green-900 (ponta mais escura) — ambas ≥ 4,5:1 AA
                                          para texto pequeno. */

  /* Borda — dois PROPÓSITOS, não dois níveis do mesmo propósito (correção
     da rodada 3 do gauntlet: a variante "forte" abaixo foi usada para
     delimitar controles de formulário, mas rende só ~1.6:1 sobre
     --ds-surface — falha WCAG 1.4.11, que exige 3:1 para a borda que
     informa onde um controle começa e termina).

     — DECORATIVA (--ds-border / --ds-border-strong): divisórias, contorno
       de card/painel/tabela — nunca é a ÚNICA pista de onde um controle
       interativo termina (o elemento tem fundo, sombra ou texto que já
       cumprem esse papel). Não precisa de 3:1 e propositalmente é leve —
       escurecer isso deixaria a interface pesada sem ganho de acessibilidade.
     — DE CONTROLE (--ds-border-control / --ds-border-control-on-brand):
       usada em campo de texto, select, botão outline/secundário e chip —
       nesses, a borda É a única pista do limite do controle (o fundo é
       igual ao da superfície ao redor). Medido sobre --ds-surface (#fff):
       rgba(15,36,26,0.50) ≈ 3.2:1 (≥3:1, WCAG 1.4.11). A variante
       "-on-brand" mede sobre o pior caso do gradiente da navbar
       (--ds-green-700, mais claro que --ds-green-900): rgba(255,255,255,0.50)
       ≈ 3.27:1. */
  --ds-border: rgba(15, 36, 26, 0.13);
  --ds-border-strong: rgba(15, 36, 26, 0.24);
  --ds-border-on-brand: rgba(255, 255, 255, 0.22);
  --ds-border-control: rgba(15, 36, 26, 0.50);
  --ds-border-control-on-brand: rgba(255, 255, 255, 0.50);

  /* Semântico — sucesso / alerta / erro / info.
     "Erro de validação" (--ds-danger-*) e "ação destrutiva" (--ds-destructive-*)
     compartilham o mesmo valor de cor por decisão consciente (mesma família
     perceptual de "cuidado"), mas são tokens nomeados separadamente para que
     o significado no componente fique explícito no CSS — nunca usar
     --ds-danger-* para decorar algo que não é erro nem ação irreversível. */
  --ds-success-bg: #e3f0e8;
  --ds-success-text: #14502f;
  --ds-success-border: #bcdcc8;
  --ds-success-solid: #1a5c3a;

  --ds-warning-bg: #fbeecf;
  --ds-warning-text: #6b4e00;
  --ds-warning-border: #e6c98a;

  --ds-danger-bg: #f8d7da;
  --ds-danger-text: #842029;
  --ds-danger-border: #efb3ba;
  --ds-danger-solid: #b91c1c;
  --ds-danger-solid-hover: #991717;

  --ds-destructive-solid: var(--ds-danger-solid);
  --ds-destructive-solid-hover: var(--ds-danger-solid-hover);
  --ds-destructive-text: var(--ds-danger-text);
  --ds-destructive-bg: var(--ds-danger-bg);

  --ds-info-bg: #eceef1;
  --ds-info-text: #35424f;

  /* Foco — anel duplo (decisão herdada, cara de refazer; contraste medido
     no site atual). Nenhuma cor sólida única passa em todos os fundos do
     produto (marca, superfície clara, superfície escura), daí o par. */
  --ds-focus-inner: var(--ds-gold-500);
  --ds-focus-outer: #10231a;
  --ds-focus-ring: 0 0 0 2px var(--ds-focus-inner), 0 0 0 4px var(--ds-focus-outer);
  --ds-focus-outline: 2px solid var(--ds-focus-inner);
  --ds-focus-outline-offset: 2px;

  /* ---- Tipografia ---- */
  --ds-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ds-font-display: 'EB Garamond', Georgia, 'Times New Roman', serif;

  /* Escala — Inter conduz toda a UI (formulários, navegação, tabelas,
     botões); EB Garamond é reservada a título de página/seção e ao nome
     da peça — é a "voz" do sistema, porque o produto final é um documento.
     Tamanhos reduzidos (14–15px de base) para densidade de tela 1366×768
     sem sacrificar leitura — nunca abaixo de 12px. */
  --ds-text-xs: 0.75rem;     /* 12px — meta, badge, kicker */
  --ds-text-sm: 0.8125rem;   /* 13px — helper text, legenda de tabela */
  --ds-text-base: 0.9375rem; /* 15px — corpo de UI, campo, botão */
  --ds-text-md: 1rem;        /* 16px — corpo de leitura, card title */
  --ds-text-lg: 1.125rem;    /* 18px — h3 */
  --ds-text-xl: 1.375rem;    /* 22px — h2 / section title */
  --ds-text-2xl: 1.75rem;    /* 28px — h1 de sub-página */
  --ds-text-3xl: 2.25rem;    /* 36px — h1 de página / hero */

  --ds-weight-regular: 400;
  --ds-weight-medium: 500;
  --ds-weight-semibold: 600;
  --ds-weight-bold: 700;

  --ds-leading-tight: 1.25;
  --ds-leading-normal: 1.5;
  --ds-leading-relaxed: 1.65;
  --ds-tracking-tight: -0.015em;
  --ds-tracking-wide: 0.04em;

  /* ---- Espaçamento (escala 4px) ---- */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-7: 32px;
  --ds-space-8: 40px;
  --ds-space-9: 56px;
  --ds-space-10: 72px;

  /* ---- Raio ---- */
  --ds-radius-sm: 6px;
  --ds-radius-md: 8px;
  --ds-radius-lg: 12px;
  --ds-radius-xl: 16px;
  --ds-radius-full: 999px;

  /* ---- Sombra (neutra, sem tint de cor) ---- */
  --ds-shadow-xs: 0 1px 2px rgba(15, 23, 18, 0.06);
  --ds-shadow-sm: 0 1px 3px rgba(15, 23, 18, 0.07), 0 3px 10px rgba(15, 23, 18, 0.045);
  --ds-shadow-md: 0 2px 6px rgba(15, 23, 18, 0.08), 0 8px 22px rgba(15, 23, 18, 0.06);
  --ds-shadow-lg: 0 6px 16px rgba(15, 23, 18, 0.10), 0 18px 40px rgba(15, 23, 18, 0.08);
  --ds-shadow-navbar: 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 10px rgba(0, 0, 0, 0.16);

  /* ---- Transições — propriedades explícitas, nunca `all` (custo de
     layout/paint desnecessário era dívida documentada no CSS atual). ---- */
  --ds-duration-fast: 120ms;
  --ds-duration-base: 180ms;
  --ds-duration-slow: 260ms;
  --ds-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ds-t-color: color var(--ds-duration-fast) var(--ds-ease),
                background-color var(--ds-duration-fast) var(--ds-ease),
                border-color var(--ds-duration-fast) var(--ds-ease);
  --ds-t-shadow: box-shadow var(--ds-duration-base) var(--ds-ease),
                 transform var(--ds-duration-base) var(--ds-ease);
  --ds-spin-duration: 0.7s;
  --ds-lift-sm: -1px;
  --ds-lift-md: -2px;

  /* ---- z-index ---- */
  --ds-z-dropdown: 1000;
  --ds-z-sticky: 1020;
  --ds-z-navbar: 1030;
  --ds-z-modal: 1050;
  --ds-z-toast: 1070;
  --ds-z-skiplink: 1100;

  /* ---- Container / grid ----
     Breakpoints de referência (não há custom property válida em @media,
     documentado aqui para consistência entre componentes):
       --bp-xs 360px  --bp-sm 480px  --bp-md 768px
       --bp-lg 1024px --bp-xl 1280px --bp-2xl 1440px */
  --ds-container-max: 1280px;
  --ds-content-max: 940px;   /* largura de leitura de formulário/documento */
  --ds-navbar-height: 60px;

  /* ---- Impressão (tons neutros dedicados — nunca hex solto no componente) ---- */
  --ds-print-bg: #ffffff;
  --ds-print-ink: #000000;
  --ds-print-border: #999999;
}

/* ---- Tipografia base -------------------------------------------------- */
body {
  background: var(--ds-bg);
  color: var(--ds-text);
  font-family: var(--ds-font-ui);
  font-size: var(--ds-text-base);
  line-height: var(--ds-leading-relaxed);
  font-variant-numeric: tabular-nums slashed-zero;
}

h1, h2, h3, h4 {
  font-family: var(--ds-font-display);
  color: var(--ds-green-900);
  line-height: var(--ds-leading-tight);
  letter-spacing: var(--ds-tracking-tight);
  font-weight: var(--ds-weight-semibold);
}
h1 { font-size: var(--ds-text-3xl); font-weight: var(--ds-weight-bold); }
h2 { font-size: var(--ds-text-xl); }
h3 { font-size: var(--ds-text-lg); }
h4 { font-size: var(--ds-text-md); font-family: var(--ds-font-ui); font-weight: var(--ds-weight-semibold); }
p { max-width: 74ch; }
small { font-size: var(--ds-text-sm); }

a { text-decoration: none; }
/* .dpmg-link: link INLINE, embutido no meio de uma frase (ex.: "Documento
   gerado. Salvar no cadastro?" no toast; "Baixar Modelo CSV" no texto de
   ajuda). Fica de propósito do tamanho do texto — WCAG 2.5.8 (Target Size)
   isenta explicitamente alvos que fazem parte de uma frase/bloco de texto
   corrido da exigência de 40px; forçar esse tamanho aqui quebraria a
   tipografia sem ganho real de usabilidade. Não confundir com um botão ou
   item de lista — se o link não estiver dentro de uma frase, use
   .dpmg-btn ou .dpmg-chip, que têm o mínimo de 40px aplicado. */
a.dpmg-link {
  color: var(--ds-green-700);
  text-underline-offset: 3px;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: var(--ds-t-color), text-decoration-color var(--ds-duration-fast) var(--ds-ease);
}
a.dpmg-link:hover { text-decoration-color: currentColor; }

/* ---- Foco visível — 100% dos focáveis --------------------------------- */
:focus { outline: none; }
:focus-visible,
.dpmg-demo-focus {
  outline: var(--ds-focus-outline);
  outline-offset: var(--ds-focus-outline-offset);
  box-shadow: var(--ds-focus-ring);
  border-radius: var(--ds-radius-sm);
}

/* ---- Skip link --------------------------------------------------------
   <a class="dpmg-skip-link" href="#conteudo">Pular para o conteúdo</a> */
.dpmg-skip-link {
  position: absolute;
  top: -48px;
  left: var(--ds-space-3);
  z-index: var(--ds-z-skiplink);
  background: var(--ds-green-900);
  color: var(--ds-on-brand);
  padding: var(--ds-space-2) var(--ds-space-4);
  border-radius: var(--ds-radius-sm);
  font-weight: var(--ds-weight-semibold);
  transition: top var(--ds-duration-base) var(--ds-ease);
}
.dpmg-skip-link:focus-visible {
  top: var(--ds-space-3);
}

/* ---- Layout / container ------------------------------------------------
   <div class="dpmg-container">…</div> */
.dpmg-container {
  width: 100%;
  max-width: var(--ds-container-max);
  margin-inline: auto;
  padding-inline: var(--ds-space-6);
}
@media (max-width: 480px) {
  .dpmg-container { padding-inline: var(--ds-space-4); }
}
.dpmg-content { max-width: var(--ds-content-max); margin-inline: auto; }

.dpmg-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.dpmg-grid { display: grid; gap: var(--ds-space-5); }
.dpmg-grid--cards { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.dpmg-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .dpmg-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .dpmg-grid--3, .dpmg-grid--cards { grid-template-columns: 1fr; } }

.dpmg-section-block { padding-block: var(--ds-space-8); }
.dpmg-section-block + .dpmg-section-block { border-top: 1px solid var(--ds-border); }
.dpmg-eyebrow {
  display: inline-flex; align-items: center; gap: var(--ds-space-2);
  font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold);
  text-transform: uppercase; letter-spacing: var(--ds-tracking-wide);
  color: var(--ds-text-muted);
}
.dpmg-eyebrow::before {
  content: ""; width: 3px; height: 1em; background: var(--ds-gold-500);
  border-radius: var(--ds-radius-full);
}


/* =====================================================================
   S2 — NAVEGAÇÃO
   ===================================================================== */

/* ---- Navbar autenticada -------------------------------------------------
   CONTRATO do item ativo (documentado na rodada 3 do gauntlet, para as
   6 telas ficarem consistentes):
   — Marque `dpmg-navbar__link--active` SOMENTE quando a página atual
     corresponde de fato a um item do menu (a área autenticada sempre
     tem essa correspondência: Peças/Mediação/Atos/Ferramentas/Histórico/
     Admin mapeiam 1:1 com os grupos de rota).
   — `--active` SEMPRE vem acompanhado de `aria-current="page"` no mesmo
     elemento — nunca um sem o outro (o modificador é só a pista visual;
     `aria-current` é a pista programática, as duas descrevem o mesmo
     estado).
   — Na navbar PÚBLICA (`--public`), a home (`/`) não corresponde a
     nenhum item do menu (Ferramentas/Jurisprudência/Guias são
     subconjuntos de conteúdo, não páginas próprias) — não marcar
     nenhum item como ativo é o comportamento correto, não uma omissão.
     Se uma tela pública SEM ser a home usar esta navbar no futuro e
     corresponder a um dos 3 grupos, aí sim aplicar `--active` +
     `aria-current="page"` nesse item, seguindo a mesma regra da navbar
     autenticada.
   <nav class="dpmg-navbar">
     <div class="dpmg-navbar__inner dpmg-container">
       <a class="dpmg-navbar__brand" href="#">DPMG</a>
       <ul class="dpmg-navbar__menu">
         <li><a class="dpmg-navbar__link dpmg-navbar__link--active" href="#" aria-current="page">Peças</a></li>
         <li class="dpmg-navbar__item--dropdown">
           <button class="dpmg-navbar__link" aria-expanded="false">Atos</button>
           <div class="dpmg-navbar__dropdown">
             <a class="dpmg-navbar__dropdown-item" href="#">Declarações</a>
           </div>
         </li>
       </ul>
       <div class="dpmg-navbar__side">
         <span class="dpmg-navbar__user"><i class="bi bi-person-circle"></i> teste</span>
         <button class="dpmg-navbar__search"><i class="bi bi-search"></i> Buscar <kbd>Ctrl K</kbd></button>
         <a class="dpmg-navbar__logout" href="#">Sair</a>
       </div>
       <button class="dpmg-navbar__toggler" aria-label="Abrir menu"><i class="bi bi-list"></i></button>
     </div>
   </nav> */
.dpmg-navbar {
  background: linear-gradient(180deg, var(--ds-green-700), var(--ds-green-900));
  box-shadow: var(--ds-shadow-navbar);
  position: sticky; top: 0; z-index: var(--ds-z-navbar);
  min-height: var(--ds-navbar-height);
}
.dpmg-navbar__inner {
  display: flex; align-items: center; gap: var(--ds-space-6);
  min-height: var(--ds-navbar-height);
}
.dpmg-navbar__brand {
  display: inline-flex; align-items: center; min-height: 40px; /* R5: alvo de toque ≥40px */
  font-family: var(--ds-font-display);
  font-weight: var(--ds-weight-bold);
  font-size: var(--ds-text-lg);
  color: var(--ds-on-brand);
  letter-spacing: 0.03em;
  margin-right: var(--ds-space-2);
}
.dpmg-navbar__menu {
  display: flex; align-items: center; gap: var(--ds-space-1);
  flex: 1; min-width: 0;
}
.dpmg-navbar__item--dropdown { position: relative; }
.dpmg-navbar__link {
  display: inline-flex; align-items: center; gap: var(--ds-space-1);
  background: none; border: none; color: rgba(255, 255, 255, 0.88);
  font-size: var(--ds-text-base); font-weight: var(--ds-weight-medium);
  padding: var(--ds-space-2) var(--ds-space-3);
  border-radius: var(--ds-radius-sm);
  min-height: 40px;
  transition: var(--ds-t-color);
  white-space: nowrap;
}
.dpmg-navbar__link:hover { background: rgba(255, 255, 255, 0.10); color: var(--ds-on-brand); }
.dpmg-navbar__link--active,
.dpmg-navbar__link[aria-current="page"] {
  background: var(--ds-gold-500);
  color: var(--ds-green-900);
  font-weight: var(--ds-weight-semibold);
}
.dpmg-navbar__link--active:hover { background: var(--ds-gold-400); }
.dpmg-navbar :focus-visible { outline-color: var(--ds-gold-500); box-shadow: var(--ds-focus-ring); }

.dpmg-navbar__dropdown {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 220px; background: var(--ds-surface);
  border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-lg); padding: var(--ds-space-2);
  display: none; flex-direction: column; gap: 2px;
}
/* O estado aberto vive na classe .is-open, controlada por JS — nunca em
   :hover nem em :focus-within. Abrir o painel por CSS torna aria-expanded
   impossível de manter verdadeiro: o menu aparece e some sem que nada
   atualize o atributo, e Escape chega a anunciar "fechado" com o menu na
   tela, porque devolver o foco ao gatilho reabre por :focus-within.
   Medido: com a regra antiga, o painel ficava em display:flex e 211px de
   altura enquanto aria-expanded dizia "false". Com a classe como única
   fonte de verdade, atributo e tela não podem divergir. */
.dpmg-navbar__item--dropdown.is-open > .dpmg-navbar__dropdown {
  display: flex;
}
.dpmg-navbar__dropdown-item {
  color: var(--ds-text); padding: var(--ds-space-2) var(--ds-space-3);
  border-radius: var(--ds-radius-sm); font-size: var(--ds-text-base);
  min-height: 40px; display: flex; align-items: center; gap: var(--ds-space-2);
  transition: var(--ds-t-color);
}
.dpmg-navbar__dropdown-item:hover { background: var(--ds-green-50); color: var(--ds-green-900); }
.dpmg-navbar__dropdown-item--destructive { color: var(--ds-destructive-text); }
.dpmg-navbar__dropdown-item--destructive:hover { background: var(--ds-danger-bg); }

.dpmg-navbar__side { display: flex; align-items: center; gap: var(--ds-space-4); }
.dpmg-navbar__user {
  display: inline-flex; align-items: center; gap: var(--ds-space-2);
  color: rgba(255, 255, 255, 0.85); font-size: var(--ds-text-sm);
}
.dpmg-navbar__search {
  display: inline-flex; align-items: center; gap: var(--ds-space-2);
  background: rgba(255, 255, 255, 0.08); border: 1px solid var(--ds-border-control-on-brand); /* R5: 3:1 sobre o verde da navbar */
  color: var(--ds-on-brand); padding: var(--ds-space-2) var(--ds-space-3);
  border-radius: var(--ds-radius-md); font-size: var(--ds-text-sm);
  min-height: 40px; transition: var(--ds-t-color);
}
.dpmg-navbar__search:hover { background: rgba(255, 255, 255, 0.16); }
.dpmg-navbar__search kbd {
  font: inherit; font-size: 0.75em; background: rgba(0, 0, 0, 0.22);
  padding: 2px 6px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.15);
}
.dpmg-navbar__logout {
  color: rgba(255, 255, 255, 0.85); font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-medium); padding: var(--ds-space-2);
  min-height: 40px; display: inline-flex; align-items: center;
}
.dpmg-navbar__logout:hover { color: var(--ds-on-brand); text-decoration: underline; }

.dpmg-navbar__toggler {
  display: none; background: none; border: 1px solid var(--ds-border-control-on-brand); /* R5: 3:1 sobre o verde da navbar */
  color: var(--ds-on-brand); width: 40px; height: 40px; border-radius: var(--ds-radius-sm);
  font-size: 1.25rem; align-items: center; justify-content: center;
}
@media (max-width: 1024px) {
  .dpmg-navbar__menu, .dpmg-navbar__side { display: none; }
  .dpmg-navbar__toggler { display: inline-flex; }
}

/* ---- Navbar pública ------------------------------------------------------
   Mesma classe raiz, modificador --public: mesma linguagem visual da
   navbar autenticada (resolve a duplicação estrutural do CSS atual —
   um único componente, não dois). Sem busca/usuário/sair.
   <nav class="dpmg-navbar dpmg-navbar--public">
     <div class="dpmg-navbar__inner dpmg-container">
       <a class="dpmg-navbar__brand"><i class="bi bi-columns-gap"></i> Ferramentas e IA</a>
       <ul class="dpmg-navbar__menu"> … </ul>
     </div>
   </nav> */
.dpmg-navbar--public .dpmg-navbar__brand {
  display: inline-flex; align-items: center; gap: var(--ds-space-2);
}
.dpmg-navbar--public .dpmg-navbar__menu { justify-content: flex-end; }

/* ---- Breadcrumb -----------------------------------------------------
   <nav class="dpmg-breadcrumb" aria-label="Trilha de navegação">
     <ol>
       <li><a href="#">Início</a></li>
       <li><a href="#">Iniciais</a></li>
       <li aria-current="page">Execução de Alimentos</li>
     </ol>
   </nav> */
.dpmg-breadcrumb {
  background: var(--ds-surface-alt);
  border-bottom: 1px solid var(--ds-border);
}
.dpmg-breadcrumb ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2);
  padding-block: var(--ds-space-1);
  font-size: var(--ds-text-sm);
}
.dpmg-breadcrumb li { display: flex; align-items: center; gap: var(--ds-space-2); min-height: 40px; }
.dpmg-breadcrumb li:not(:last-child)::after {
  content: "/"; color: var(--ds-text-faint);
}
/* R5: o padding vertical fica no <a> (não só no <ol>), senão o hit-target
   focável do link fica menor que a faixa visível do breadcrumb. */
.dpmg-breadcrumb a { display: inline-flex; align-items: center; min-height: 40px; padding-inline: var(--ds-space-2); margin-inline: calc(var(--ds-space-2) * -1); border-radius: var(--ds-radius-sm); color: var(--ds-text-muted); } /* padding garante ≥40px também na largura (ex.: "Início"); margem negativa cancela o padding no layout visual da trilha */
.dpmg-breadcrumb a:hover { color: var(--ds-green-700); text-decoration: underline; }
.dpmg-breadcrumb li[aria-current="page"] { color: var(--ds-text); font-weight: var(--ds-weight-medium); }

/* ---- Rodapé -----------------------------------------------------------
   <footer class="dpmg-footer">
     <div class="dpmg-container dpmg-footer__grid">
       <div class="dpmg-footer__brand">DPMG</div>
       <div class="dpmg-footer__col">
         <h3>Peças</h3>
         <ul><li><a href="#">Iniciais</a></li></ul>
       </div>
     </div>
     <div class="dpmg-container dpmg-footer__legal">
       <strong>Uso responsável de IA:</strong> os conteúdos… conferidos.
     </div>
   </footer> */
.dpmg-footer {
  background: var(--ds-green-900); color: rgba(255, 255, 255, 0.78);
  margin-top: var(--ds-space-9);
}
.dpmg-footer__grid {
  display: grid; grid-template-columns: 1.2fr repeat(3, 1fr);
  gap: var(--ds-space-6); padding-block: var(--ds-space-7);
}
@media (max-width: 768px) { .dpmg-footer__grid { grid-template-columns: 1fr 1fr; } }
.dpmg-footer__brand { color: var(--ds-on-brand); font-family: var(--ds-font-display); font-size: var(--ds-text-lg); font-weight: var(--ds-weight-bold); }
.dpmg-footer__col h3 {
  color: var(--ds-gold-400); font-family: var(--ds-font-ui);
  font-size: var(--ds-text-sm); text-transform: uppercase;
  letter-spacing: var(--ds-tracking-wide); margin-bottom: var(--ds-space-3);
}
.dpmg-footer__col ul { display: flex; flex-direction: column; gap: var(--ds-space-1); }
.dpmg-footer__col a { display: inline-flex; align-items: center; min-height: 40px; font-size: var(--ds-text-sm); color: rgba(255, 255, 255, 0.75); } /* R5: alvo de toque ≥40px */
.dpmg-footer__col a:hover { color: var(--ds-on-brand); text-decoration: underline; }
.dpmg-footer__legal {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: var(--ds-space-4);
  font-size: var(--ds-text-sm); color: rgba(255, 255, 255, 0.65);
}
.dpmg-footer__legal strong { color: var(--ds-on-brand); }


/* =====================================================================
   S3 — CONTEÚDO
   ===================================================================== */

/* ---- Card / tile de hub (sistema único) --------------------------------
   Substitui os dois sistemas concorrentes do CSS atual (.document-card
   herdando de .card do Bootstrap vs. .dpmg-hub-tile próprio). Um só
   componente cobre hub público, home autenticada e hub de documentos.

   IMPORTANTE — "stretched link": o <a class="dpmg-card__link"> abaixo é o
   TEXTO real do título e precisa ficar ESTÁTICO/no fluxo normal (não
   aplique position:absolute nele nem no <h3> que o envolve). Quem estica
   a área de clique para o card inteiro é o ::after de .dpmg-card__link —
   ele que recebe position:absolute; inset:0, resolvido contra o
   .dpmg-card ancestral (position:relative). Tirar o <a> do fluxo colapsa
   o <h3> a 0px de altura e quebra o título visualmente — defeito já
   corrigido uma vez neste arquivo, não reintroduzir.
   <article class="dpmg-card">
     <button class="dpmg-card__favorite" aria-pressed="false" aria-label="Favoritar Iniciais">
       <i class="bi bi-star"></i>
     </button>
     <span class="dpmg-card__icon"><i class="bi bi-folder-fill"></i></span>
     <span class="dpmg-badge dpmg-badge--tool">Ferramenta</span>
     <h3 class="dpmg-card__title"><a class="dpmg-card__link" href="#">Iniciais</a></h3>
     <p class="dpmg-card__desc">Iniciais, defesas, recursos…</p>
     <ul class="dpmg-card__sublinks">
       <li><a href="#"><i class="bi bi-file-earmark-plus"></i> Iniciais</a></li>
     </ul>
     <span class="dpmg-card__action">Acessar <i class="bi bi-arrow-right"></i></span>
   </article> */
.dpmg-card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--ds-space-3);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-5);
  box-shadow: var(--ds-shadow-xs);
  transition: var(--ds-t-shadow), border-color var(--ds-duration-base) var(--ds-ease);
  height: 100%;
}
.dpmg-card:hover {
  box-shadow: var(--ds-shadow-md);
  border-color: var(--ds-green-500);
  transform: translateY(var(--ds-lift-md));
}
.dpmg-card:has(.dpmg-card__link:focus-visible) {
  box-shadow: var(--ds-focus-ring), var(--ds-shadow-md);
  border-color: var(--ds-green-500);
}
/* "Stretched link": o <a> fica ESTÁTICO, no fluxo normal — precisa
   continuar sendo o texto real do título, senão o <h3> colapsa a 0px de
   altura e o texto do card some do lugar (defeito corrigido na rodada 2
   do gauntlet). Quem estica a área de clique para o card inteiro é o
   ::after, absolutamente posicionado em relação ao ancestral .dpmg-card
   (que já é position:relative) — o próprio <a> não precisa de posição
   para isso, `inset:0` do pseudo-elemento resolve contra o ancestral
   posicionado mais próximo, pulando o <a> estático. */
.dpmg-card__link::after {
  content: "";
  position: absolute; inset: 0; border-radius: inherit;
  z-index: 1;
}
.dpmg-card__link:focus-visible { outline: none; box-shadow: none; } /* o :has() acima assume a indicação visual */
/* Nota sobre R5/alvo de toque: getBoundingClientRect() do próprio <a>
   mede só a caixa do TEXTO (o título), porque ::after não conta nessa
   medição — mas o ::after acima é quem recebe o ponteiro, e cobre o
   .dpmg-card inteiro (≥280px de largura pela grade, sempre >>40×40px). O alvo
   de toque real do link é o card inteiro, não a caixa de texto — uma
   auditoria que meça só o <a> vai reportar um falso positivo aqui. */
.dpmg-card__icon {
  width: 40px; height: 40px; 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-card__title { font-size: var(--ds-text-md); font-family: var(--ds-font-ui); font-weight: var(--ds-weight-semibold); color: var(--ds-green-900); }
.dpmg-card__desc { font-size: var(--ds-text-sm); color: var(--ds-text-muted); line-height: var(--ds-leading-normal); flex: 1; }
.dpmg-card__favorite {
  position: absolute; top: var(--ds-space-3); right: var(--ds-space-3);
  z-index: 2; width: 36px; height: 36px; min-width: 40px; min-height: 40px;
  border-radius: var(--ds-radius-full); border: 1px solid transparent;
  background: transparent; color: var(--ds-text-faint);
  display: inline-flex; align-items: center; justify-content: center;
  transition: var(--ds-t-color);
}
.dpmg-card__favorite:hover { background: var(--ds-surface-alt); color: var(--ds-gold-ink); }
.dpmg-card__favorite[aria-pressed="true"] { color: var(--ds-gold-600); }
/* O ícone (outline → preenchido) é trocado no MARKUP/JS de quem consome o
   componente (classe bi-star ↔ bi-star-fill), não via CSS — mantém o
   glyph real do Bootstrap Icons sempre correto. */
.dpmg-card__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);
}
.dpmg-card__sublinks a {
  display: inline-flex; align-items: center; gap: var(--ds-space-1);
  font-size: var(--ds-text-sm); color: var(--ds-text-muted);
  padding: var(--ds-space-1) var(--ds-space-2); border-radius: var(--ds-radius-sm);
  min-height: 40px; /* R5: alvo de toque ≥40px */
}
.dpmg-card__sublinks a:hover { background: var(--ds-green-50); color: var(--ds-green-700); }
.dpmg-card__sublinks a.dpmg-card__sublink--destructive { color: var(--ds-destructive-text); }
.dpmg-card__sublinks a.dpmg-card__sublink--destructive:hover { background: var(--ds-danger-bg); }
.dpmg-card__action {
  display: inline-flex; align-items: center; gap: var(--ds-space-1);
  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-card--ia .dpmg-card__icon { background: var(--ds-gold-100); color: var(--ds-gold-ink); }
.dpmg-card--admin { border-color: var(--ds-border-strong); }
.dpmg-card--compact { padding: var(--ds-space-4); }

/* ---- Badge --------------------------------------------------------------
   <span class="dpmg-badge dpmg-badge--tool">Ferramenta</span>
   <span class="dpmg-badge dpmg-badge--guide">Guia</span> */
.dpmg-badge {
  display: inline-flex; align-items: center; width: fit-content;
  font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium);
  padding: 3px var(--ds-space-2); border-radius: var(--ds-radius-sm);
}
.dpmg-badge--tool { background: var(--ds-green-900); color: var(--ds-on-brand); }
.dpmg-badge--guide { background: var(--ds-warning-text); color: var(--ds-on-brand); }

/* ---- Chip -----------------------------------------------------------
   Um único componente de chip com variantes para navegação de seção,
   atalho fixo e favorito (a dívida do CSS atual era duplicar quase o
   mesmo CSS entre .dpmg-hub-nav-link e .dpmg-form-nav-link).
   <a class="dpmg-chip dpmg-chip--nav dpmg-chip--active" href="#sec1"><i class="bi bi-journals"></i> Cumprimento de Sentença</a>
   <button class="dpmg-chip dpmg-chip--quick"><i class="bi bi-person-check"></i> Habilitação</button>
   <button class="dpmg-chip dpmg-chip--favorite"><i class="bi bi-pin-angle-fill"></i> Iniciais <span class="dpmg-chip__remove">×</span></button> */
.dpmg-chip {
  display: inline-flex; align-items: center; gap: var(--ds-space-2);
  padding: var(--ds-space-2) var(--ds-space-4);
  min-height: 40px;
  border-radius: var(--ds-radius-full);
  border: 1px solid var(--ds-border-control); /* chip é controle real (link/botão) — precisa de 3:1 */
  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-chip:hover { border-color: var(--ds-green-500); color: var(--ds-green-700); }
.dpmg-chip--active,
.dpmg-chip[aria-current="true"] {
  background: var(--ds-green-700); border-color: var(--ds-green-700); color: var(--ds-on-brand);
}
.dpmg-chip--favorite { background: var(--ds-gold-100); border-color: var(--ds-gold-400); color: var(--ds-gold-ink); }
.dpmg-chip--favorite:hover { border-color: var(--ds-gold-500); }
.dpmg-chip__remove { opacity: 0.7; font-size: 1.1em; line-height: 1; }
.dpmg-chip__remove:hover { opacity: 1; }
.dpmg-chip-row { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }

/* ---- Tabela -------------------------------------------------------------
   <div class="dpmg-table-wrap">
     <table class="dpmg-table">
       <thead><tr><th>Data</th><th>Tipo</th><th></th></tr></thead>
       <tbody><tr><td>11/08/2026</td><td>Manifestação</td><td><button class="dpmg-btn dpmg-btn--secondary dpmg-btn--sm">Duplicar</button></td></tr></tbody>
     </table>
   </div> */
.dpmg-table-wrap { overflow-x: auto; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); background: var(--ds-surface); }
.dpmg-table { font-size: var(--ds-text-sm); min-width: 560px; }
.dpmg-table thead th {
  background: var(--ds-green-900); color: var(--ds-on-brand);
  text-align: left; font-weight: var(--ds-weight-semibold);
  padding: var(--ds-space-3) var(--ds-space-4);
  text-transform: uppercase; letter-spacing: var(--ds-tracking-wide); font-size: var(--ds-text-xs);
  position: sticky; top: 0;
}
.dpmg-table tbody td { padding: var(--ds-space-3) var(--ds-space-4); border-top: 1px solid var(--ds-border); vertical-align: middle; }
.dpmg-table tbody tr:hover td { background: var(--ds-green-50); }
.dpmg-table tbody tr:nth-child(even) td { background-color: var(--ds-surface-alt); }
.dpmg-table tbody tr:nth-child(even):hover td { background-color: var(--ds-green-50); }

/* ---- Estado vazio ---------------------------------------------------
   <div class="dpmg-empty">
     <i class="bi bi-search dpmg-empty__icon"></i>
     <h3 class="dpmg-empty__title">Nenhum documento encontrado</h3>
     <p class="dpmg-empty__desc">Tente outro termo de busca…</p>
     <button class="dpmg-btn dpmg-btn--secondary"><i class="bi bi-x-circle"></i> Limpar filtro</button>
   </div> */
.dpmg-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);
}
.dpmg-empty__icon { font-size: 2rem; color: var(--ds-text-faint); }
.dpmg-empty__title { font-family: var(--ds-font-ui); font-size: var(--ds-text-md); }
.dpmg-empty__desc { color: var(--ds-text-muted); font-size: var(--ds-text-sm); max-width: 42ch; }

/* ---- Toast ------------------------------------------------------------
   <div class="dpmg-toast dpmg-toast--success" role="status">
     <i class="bi bi-check-circle-fill"></i>
     <p>Documento gerado. <a href="#">Salvar no cadastro?</a></p>
     <button class="dpmg-toast__close" aria-label="Fechar">×</button>
   </div> */
.dpmg-toast {
  display: flex; align-items: flex-start; gap: var(--ds-space-3);
  padding: var(--ds-space-3) var(--ds-space-4);
  border-radius: var(--ds-radius-md); border: 1px solid transparent;
  box-shadow: var(--ds-shadow-md); font-size: var(--ds-text-sm);
  max-width: 420px;
}
.dpmg-toast i { margin-top: 2px; }
.dpmg-toast__close { margin-left: auto; background: none; border: none; font-size: 1.1rem; line-height: 1; color: inherit; opacity: 0.6; min-width: 40px; min-height: 40px; }
.dpmg-toast__close:hover { opacity: 1; }
.dpmg-toast--success { background: var(--ds-success-bg); color: var(--ds-success-text); border-color: var(--ds-success-border); }
.dpmg-toast--warning { background: var(--ds-warning-bg); color: var(--ds-warning-text); border-color: var(--ds-warning-border); }
.dpmg-toast--error { background: var(--ds-danger-bg); color: var(--ds-danger-text); border-color: var(--ds-danger-border); }

/* ---- Modal ------------------------------------------------------------
   <div class="dpmg-modal-overlay">
     <div class="dpmg-modal" role="dialog" aria-modal="true" aria-labelledby="m-title">
       <header class="dpmg-modal__header"><h2 id="m-title">Confirmar exclusão</h2>
         <button class="dpmg-modal__close" aria-label="Fechar">×</button></header>
       <div class="dpmg-modal__body"><p>Esta ação não pode ser desfeita.</p></div>
       <footer class="dpmg-modal__footer">
         <button class="dpmg-btn dpmg-btn--ghost">Cancelar</button>
         <button class="dpmg-btn dpmg-btn--danger">Excluir</button>
       </footer>
     </div>
   </div> */
.dpmg-modal-overlay {
  position: fixed; inset: 0; background: rgba(15, 23, 18, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: var(--ds-space-5); z-index: var(--ds-z-modal);
}
.dpmg-modal {
  width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto;
  background: var(--ds-surface); border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-lg);
}
.dpmg-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--ds-space-5) var(--ds-space-5) var(--ds-space-3);
  border-bottom: 1px solid var(--ds-border);
}
.dpmg-modal__header h2 { font-size: var(--ds-text-lg); }
.dpmg-modal__close { background: none; border: none; font-size: 1.3rem; min-width: 40px; min-height: 40px; color: var(--ds-text-muted); }
.dpmg-modal__close:hover { color: var(--ds-text); }
.dpmg-modal__body { padding: var(--ds-space-5); color: var(--ds-text-muted); }
.dpmg-modal__footer { display: flex; justify-content: flex-end; gap: var(--ds-space-3); padding: var(--ds-space-4) var(--ds-space-5); border-top: 1px solid var(--ds-border); }


/* =====================================================================
   S4 — FORMULÁRIO
   ===================================================================== */

/* ---- Botões (usados dentro e fora de formulário) -----------------------
   <button class="dpmg-btn dpmg-btn--primary">Enviar</button>
   <button class="dpmg-btn dpmg-btn--secondary">Limpar Formulário</button>
   <button class="dpmg-btn dpmg-btn--ghost">Cancelar</button>
   <button class="dpmg-btn dpmg-btn--danger">Excluir</button>
   <button class="dpmg-btn dpmg-btn--primary" disabled></button>
   <button class="dpmg-btn dpmg-btn--primary" aria-busy="true">Enviando…</button> */
.dpmg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2);
  min-height: 44px; padding: 0 var(--ds-space-5);
  border-radius: var(--ds-radius-md); border: 1px solid transparent;
  font-size: var(--ds-text-base); font-weight: var(--ds-weight-semibold);
  transition: var(--ds-t-color), var(--ds-t-shadow);
  white-space: nowrap;
}
.dpmg-btn--sm { min-height: 40px; padding: 0 var(--ds-space-3); font-size: var(--ds-text-sm); } /* R5: alvo de toque ≥40px — "sm" é compacto por padding/fonte, não por ficar abaixo do mínimo de toque */
.dpmg-btn--primary { background: var(--ds-green-700); color: var(--ds-on-brand); box-shadow: var(--ds-shadow-xs); }
.dpmg-btn--primary:hover { background: var(--ds-green-600); box-shadow: var(--ds-shadow-sm); transform: translateY(var(--ds-lift-sm)); }
.dpmg-btn--primary:active { background: var(--ds-green-900); transform: translateY(0); }
.dpmg-btn--secondary { background: var(--ds-surface); color: var(--ds-green-700); border-color: var(--ds-border-control); } /* botão outline — a borda É o limite do controle, precisa de 3:1 */
.dpmg-btn--secondary:hover { background: var(--ds-green-50); border-color: var(--ds-green-500); }
.dpmg-btn--ghost { background: transparent; color: var(--ds-text-muted); }
.dpmg-btn--ghost:hover { background: var(--ds-surface-alt); color: var(--ds-text); }
.dpmg-btn--danger { background: var(--ds-destructive-solid); color: var(--ds-on-brand); }
.dpmg-btn--danger:hover { background: var(--ds-destructive-solid-hover); }
.dpmg-btn[disabled], .dpmg-btn[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; box-shadow: none; transform: none;
}
.dpmg-btn[aria-busy="true"] { color: transparent; position: relative; pointer-events: none; }
.dpmg-btn[aria-busy="true"]::after {
  content: ""; position: absolute; width: 18px; height: 18px;
  border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--ds-on-brand); animation: dpmg-spin var(--ds-spin-duration) linear infinite;
}
.dpmg-btn--secondary[aria-busy="true"]::after { border: 2px solid rgba(26, 92, 58, 0.25); border-top-color: var(--ds-green-700); }
@keyframes dpmg-spin { to { transform: rotate(360deg); } }

/* ---- Campo de texto / genérico ------------------------------------------
   <div class="dpmg-field">
     <label class="dpmg-field__label" for="nome">Nome Completo</label>
     <input class="dpmg-field__input" id="nome" name="nome" type="text" required>
     <p class="dpmg-field__hint">Como consta na certidão.</p>
   </div>
   Erro:
   <div class="dpmg-field dpmg-field--error">
     <label class="dpmg-field__label" for="cpf">CPF</label>
     <input class="dpmg-field__input" id="cpf" aria-invalid="true" aria-describedby="cpf-erro">
     <p class="dpmg-field__error" id="cpf-erro"><i class="bi bi-exclamation-circle-fill"></i> Informe um CPF válido.</p>
   </div> */
.dpmg-field { display: flex; flex-direction: column; gap: var(--ds-space-1); min-width: 0; }
.dpmg-field__label {
  font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold);
  color: var(--ds-green-900);
}
.dpmg-field__label .dpmg-field__optional { font-weight: var(--ds-weight-regular); color: var(--ds-text-faint); text-transform: none; }
.dpmg-field__input,
.dpmg-field__select {
  min-height: 44px; padding: 0 var(--ds-space-3);
  border: 1px solid var(--ds-border-control); border-radius: var(--ds-radius-md); /* R5: 3:1 sobre --ds-surface */
  background: var(--ds-surface); color: var(--ds-text);
  font-size: var(--ds-text-base);
  transition: var(--ds-t-color), box-shadow var(--ds-duration-fast) var(--ds-ease);
  width: 100%;
}
textarea.dpmg-field__input { min-height: 96px; padding-block: var(--ds-space-2); resize: vertical; }
.dpmg-field__input::placeholder { color: var(--ds-text-faint); }
.dpmg-field__input:hover, .dpmg-field__select:hover { border-color: var(--ds-text-faint); }
.dpmg-field__input:focus-visible, .dpmg-field__select:focus-visible {
  border-color: var(--ds-focus-inner); box-shadow: var(--ds-focus-ring); outline: none;
}
.dpmg-field__input:disabled, .dpmg-field__select:disabled {
  background: var(--ds-surface-sunken); color: var(--ds-text-faint); cursor: not-allowed;
}
.dpmg-field__input[aria-invalid="true"], .dpmg-field__select[aria-invalid="true"] {
  border-color: var(--ds-danger-solid);
}
.dpmg-field__input[aria-invalid="true"]:focus-visible {
  box-shadow: 0 0 0 2px var(--ds-danger-solid), 0 0 0 4px var(--ds-focus-outer);
}
/* A borda usa --ds-gold-600 (3,48:1), não --ds-warning-border (#e6c98a, 1,60:1).
   Borda de controle é elemento não-textual informativo: a WCAG 1.4.11 exige 3:1, e
   o token de aviso reprovava — o estado autopreenchido REGREDIA o contraste, ficando
   abaixo dos 3,23:1 do campo normal, justamente nos 6 campos que a busca por CPF
   preenche de uma vez. --ds-warning-border segue válido em superfície com fundo
   próprio (toast, alerta), onde não delimita controle. */
.dpmg-field--prefilled .dpmg-field__input { background: var(--ds-warning-bg); border-color: var(--ds-gold-600); }
.dpmg-field__hint { font-size: var(--ds-text-sm); color: var(--ds-text-muted); }
.dpmg-field__error {
  display: flex; align-items: center; gap: var(--ds-space-1);
  font-size: var(--ds-text-sm); color: var(--ds-danger-text); font-weight: var(--ds-weight-medium);
}

/* select — seta customizada, sem depender de estilo nativo do navegador */
.dpmg-field__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2359635d' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--ds-space-3) center;
  padding-right: var(--ds-space-8);
}

/* Campo curto — largura pensada para o conteúdo real (CPF, data, hora),
   nunca menor que o placeholder mais longo (lição da exploração anterior). */
.dpmg-field--short { max-width: 220px; }
.dpmg-field--short .dpmg-field__input { min-width: 14ch; }

/* Campo com máscara — sinaliza visualmente que há formatação automática */
.dpmg-field--masked .dpmg-field__input { letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }

/* Campo com botão acoplado (ex.: "Buscar Dados" por CPF, "Consultar" CEP)
   <div class="dpmg-field dpmg-field--with-button">
     <label class="dpmg-field__label" for="cpf2">CPF</label>
     <div class="dpmg-field__row">
       <input class="dpmg-field__input" id="cpf2" placeholder="000.000.000-00">
       <button class="dpmg-btn dpmg-btn--secondary dpmg-field__button" type="button">Buscar Dados</button>
     </div>
   </div> */
.dpmg-field__row { display: flex; gap: var(--ds-space-2); align-items: stretch; }
.dpmg-field__row .dpmg-field__input { flex: 1; min-width: 0; }
.dpmg-field__button { flex-shrink: 0; }
@media (max-width: 480px) {
  .dpmg-field__row { flex-direction: column; }
}

/* Grupo de campos — grade responsiva (1 campo por linha ≥360, 2 a partir
   de ~560px de coluna útil, nunca corta em 1366×768).
   <div class="dpmg-field-group">
     <div class="dpmg-field">…</div>
     <div class="dpmg-field">…</div>
   </div> */
.dpmg-field-group {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--ds-space-4) var(--ds-space-5);
}

/* Checkbox / radio — <label for="..."> obrigatório e clicável (não é
   decoração): a caixa nativa fica pequena (20px) de propósito — é o
   padrão universal de checkbox — mas o alvo de toque real ≥40px vem da
   LINHA inteira (.dpmg-check tem min-height:40px e o <label> ocupa a
   largura toda), que também alterna o estado por ser <label for>. É o
   alvo equivalente previsto pela WCAG 2.5.8, não uma pendência. */
.dpmg-check {
  display: flex; align-items: flex-start; gap: var(--ds-space-2);
  font-size: var(--ds-text-base); min-height: 40px;
}
.dpmg-check input {
  width: 20px; height: 20px; margin-top: 2px; accent-color: var(--ds-green-700);
  flex-shrink: 0;
}
.dpmg-check input:focus-visible { outline: var(--ds-focus-outline); outline-offset: 2px; }
/* label preenche o resto da linha e fica clicável em toda a largura —
   é ele que garante o alvo de toque equivalente ≥40px citado acima. */
.dpmg-check label { flex: 1; display: flex; align-items: center; min-height: 40px; cursor: pointer; }

/* ---- Cabeçalho de seção numerada -----------------------------------
   <header class="dpmg-form-section__header">
     <span class="dpmg-form-section__kicker">Seção 1</span>
     <h2 class="dpmg-form-section__title">Dados do Processo</h2>
   </header> */
.dpmg-form-section {
  background: var(--ds-surface); border: 1px solid var(--ds-border);
  border-left: 4px solid var(--ds-gold-500);
  border-radius: var(--ds-radius-lg); overflow: hidden;
  margin-bottom: var(--ds-space-5);
}
.dpmg-form-section__header { background: var(--ds-green-50); padding: var(--ds-space-4) var(--ds-space-5); }
.dpmg-form-section__kicker {
  display: block; font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold);
  text-transform: uppercase; letter-spacing: var(--ds-tracking-wide); color: var(--ds-text-muted);
  margin-bottom: 2px;
}
.dpmg-form-section__title { font-size: var(--ds-text-lg); margin: 0; }
.dpmg-form-section__body { padding: var(--ds-space-5); display: flex; flex-direction: column; gap: var(--ds-space-4); }
.dpmg-form-section[hidden] { display: none; }

/* ---- Índice de seções do formulário (chips, não-sticky por decisão:
   não deve competir visualmente com a barra de ações sticky abaixo) ----
   <nav class="dpmg-form-nav" aria-label="Seções do formulário">
     <a class="dpmg-chip dpmg-chip--nav dpmg-chip--active" href="#s1">Dados do Processo</a>
   </nav> */
.dpmg-form-nav { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); margin-bottom: var(--ds-space-6); }

/* ---- Resumo de conferência (pré-submit) --------------------------------
   <div class="dpmg-summary" role="region" aria-label="Resumo para conferência">
     <h2 class="dpmg-summary__title"><i class="bi bi-clipboard2-check"></i> Confira antes de enviar</h2>
     <dl class="dpmg-summary__list">
       <div class="dpmg-summary__row"><dt>Processo</dt><dd>0000000-00.0000.0.00.0000</dd></div>
     </dl>
     <div class="dpmg-summary__actions">
       <button class="dpmg-btn dpmg-btn--ghost">Corrigir</button>
       <button class="dpmg-btn dpmg-btn--primary">Confirmar e enviar</button>
     </div>
   </div> */
.dpmg-summary {
  background: var(--ds-surface); border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-lg);
  padding: var(--ds-space-5); max-width: 560px;
}
.dpmg-summary__title { display: flex; align-items: center; gap: var(--ds-space-2); font-size: var(--ds-text-lg); margin-bottom: var(--ds-space-4); }
.dpmg-summary__list { display: flex; flex-direction: column; }
.dpmg-summary__row {
  display: flex; justify-content: space-between; gap: var(--ds-space-4);
  padding: var(--ds-space-2) 0; border-bottom: 1px solid var(--ds-border);
  font-size: var(--ds-text-sm);
}
.dpmg-summary__row dt { color: var(--ds-text-muted); }
.dpmg-summary__row dd { font-weight: var(--ds-weight-medium); text-align: right; }
.dpmg-summary__actions { display: flex; justify-content: flex-end; gap: var(--ds-space-3); margin-top: var(--ds-space-5); }

/* ---- Barra de ações persistente -----------------------------------------
   CORREÇÃO OBRIGATÓRIA (a barra cobria o formulário nas capturas 04/05
   do estado atual). Duas medidas resolvem, juntas:
   1) `position: sticky` (nunca `fixed`) — o elemento permanece no fluxo
      do documento como ÚLTIMO item da coluna de conteúdo; ele nunca fica
      "sobrando" por cima de campos que ainda não foram vistos, porque
      sua posição de repouso já é o fim do formulário.
   2) O container do formulário reserva `scroll-margin`/espaço abaixo do
      último campo (`.dpmg-form { padding-bottom }`) para que, mesmo com
      a barra grudada, o último grupo de campos nunca fique permanentemente
      tampado ao chegar ao fim da rolagem.
   Fundo opaco + sombra para cima garantem contraste com o conteúdo que
   desliza por baixo durante a rolagem (comportamento normal e esperado
   de uma barra de ação fixa ao rodapé, não um bug).
   <div class="dpmg-form-actions">
     <p class="dpmg-form-actions__status"><i class="bi bi-info-circle"></i> 34 campos · 3 obrigatórios pendentes</p>
     <div class="dpmg-form-actions__buttons">
       <button class="dpmg-btn dpmg-btn--secondary" type="reset">Limpar Formulário</button>
       <button class="dpmg-btn dpmg-btn--primary" type="submit">Enviar</button>
     </div>
   </div> */
.dpmg-form { padding-bottom: var(--ds-space-4); }
.dpmg-form-actions {
  position: sticky; bottom: 0; z-index: var(--ds-z-sticky);
  display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-4);
  flex-wrap: wrap;
  background: var(--ds-surface);
  border-top: 1px solid var(--ds-border);
  box-shadow: 0 -6px 18px rgba(15, 23, 18, 0.10);
  padding: var(--ds-space-4) var(--ds-space-5);
  border-radius: var(--ds-radius-lg) var(--ds-radius-lg) 0 0;
  margin-top: var(--ds-space-6);
}
.dpmg-form-actions__status { font-size: var(--ds-text-sm); color: var(--ds-text-muted); display: flex; align-items: center; gap: var(--ds-space-2); }
.dpmg-form-actions__buttons { display: flex; gap: var(--ds-space-3); margin-left: auto; }
@media (max-width: 480px) {
  .dpmg-form-actions { flex-direction: column; align-items: stretch; }
  .dpmg-form-actions__buttons { margin-left: 0; }
  .dpmg-form-actions__buttons .dpmg-btn { flex: 1; }
}

/* Bloco de importação avançada (<details>) — usado no formulário de
   execução unificada para CSV em lote.
   <details class="dpmg-details">
     <summary>Importar dados em lote via CSV (avançado)</summary>
     <div class="dpmg-details__body">…</div>
   </details> */
.dpmg-details {
  border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md);
  background: var(--ds-surface-alt); padding: var(--ds-space-3) var(--ds-space-4);
  margin-bottom: var(--ds-space-5);
}
.dpmg-details summary {
  cursor: pointer; font-weight: var(--ds-weight-semibold); color: var(--ds-green-900);
  min-height: 40px; display: flex; align-items: center;
}
.dpmg-details summary:focus-visible { outline: var(--ds-focus-outline); outline-offset: 2px; border-radius: var(--ds-radius-sm); }
.dpmg-details__body { padding-top: var(--ds-space-3); display: flex; flex-direction: column; gap: var(--ds-space-3); }


/* =====================================================================
   S5 — IMPRESSÃO E MOVIMENTO REDUZIDO
   ===================================================================== */
@media print {
  /* Sem !important (R4): nenhuma outra regra do sistema declara `display`
     para estes seletores fora deste bloco, então a cascata resolve sozinha. */
  .dpmg-navbar, .dpmg-footer, .dpmg-form-actions, .dpmg-skip-link,
  .dpmg-card__favorite, .dpmg-btn, .dpmg-toast, .dpmg-modal-overlay { display: none; }
  body { background: var(--ds-print-bg); color: var(--ds-print-ink); }
  .dpmg-card, .dpmg-form-section { box-shadow: none; border: 1px solid var(--ds-print-border); break-inside: avoid; }
  a { color: var(--ds-print-ink); text-decoration: underline; }
}

/* Movimento reduzido — implementado por token, não por !important (R4):
   redefinir as durações/deslocamentos na raiz propaga para todo `var()`
   consumido pelos componentes, sem precisar vencer especificidade alheia. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ds-duration-fast: 0.001ms;
    --ds-duration-base: 0.001ms;
    --ds-duration-slow: 0.001ms;
    --ds-spin-duration: 0.001ms;
    --ds-lift-sm: 0;
    --ds-lift-md: 0;
  }
  html { scroll-behavior: auto; }
}