/* =====================================================================
   ds-compat.css — ponte entre o markup legado e o design system v2
   Área restrita /dpmg. Carregado logo depois de ds.css.
   =====================================================================

   POR QUE ESTE ARQUIVO EXISTE

   O `ds.css` é um sistema autossuficiente e substitui o `bootstrap.min.css`
   na área restrita. Só que o markup de ~150 templates Jinja foi escrito em
   vocabulário Bootstrap: 529 `class="row"`, 990 `col-md-*`, 293
   `form-control`, 129 `btn btn-*`, além de `card`/`card-header`/`card-body`,
   `form-check`, `input-group`, `table` e as utilidades de espaçamento.
   Tirar o Bootstrap sem substituir essa base derrubaria o layout de todos
   os formulários de petição de uma vez.

   Este arquivo dá a essas classes:
     1. a ESTRUTURA que o Bootstrap dava (caixa, grade, fluxo) — reproduzida
        fielmente, para que nenhum layout existente se mova;
     2. a PELE do design system (cor, raio, tipografia, altura de controle,
        foco) — vinda dos tokens de `ds.css`, para que o markup legado já
        apareça com o visual novo, sem edição de template.

   Ou seja: `.form-control` passa a ser visualmente `.dpmg-field__input`,
   `.btn.btn-primary` passa a ser `.dpmg-btn.dpmg-btn--primary`, e
   `.card > .card-header + .card-body` passa a ser `.dpmg-form-section`.

   TRÊS CLASSES SÃO CONTRATO DE JAVASCRIPT, NÃO SÓ DE ESTILO — não remova:
     — `.card` / `.card-header`: `dpmg-form-secoes.js` varre `.card > .card-header`
       para montar as seções condicionais do formulário;
     — `.btn-danger` ↔ `.btn-outline-secondary`: `mascara.js` alterna as duas
       no botão de limpar campos;
     — `.btn-warning` ↔ `.btn-success`: `forms/execucao-comum.js` alterna as duas
       nos botões "Representante é a Mãe"/"Executado é o Pai".
   Renomeá-las quebra comportamento em silêncio, sem erro no console.

   REGRAS DESTE ARQUIVO
   — Nenhuma cor fora de token de `ds.css`. Verificável por grep.
   — Nenhum `!important`. Se algo não venceu, o problema é ordem ou seletor.
   — Nada aqui estiliza classe `dpmg-*` de página (hub, formulário, tabela):
     essas vivem nas folhas próprias (`ds-hub.css`, `ds-form.css`, …).
   ===================================================================== */


/* =====================================================================
   C1 — GRADE (container / row / col)
   =====================================================================
   Reprodução da grade de 12 colunas do Bootstrap 5, com os mesmos
   breakpoints (sm 576 · md 768 · lg 992 · xl 1200 · xxl 1400), porque é
   isso que os templates assumem. Os breakpoints do design system
   (768/1024, ver ds.css) são outra coisa e continuam valendo para os
   componentes do DS.

   Única divergência deliberada: `min-width: 0` nos filhos de `.row`.
   O Bootstrap não declara isso, e a ausência é a causa raiz de três dos
   quatro defeitos de rolagem horizontal encontrados na v2 (README.md,
   "Duas armadilhas que já custaram uma rodada cada"): um item de flex
   herda `min-width: auto`, então a largura mínima do conteúdo vaza para
   a coluna e estoura o container em telas estreitas. */
.container,
.container-fluid {
  width: 100%;
  margin-inline: auto;
  padding-inline: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
}
@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;              /* ver comentário acima — não remova */
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

.col { flex: 1 0 0%; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-1 { flex: 0 0 auto; width: 8.333333%; }
.col-2 { flex: 0 0 auto; width: 16.666667%; }
.col-3 { flex: 0 0 auto; width: 25%; }
.col-4 { flex: 0 0 auto; width: 33.333333%; }
.col-5 { flex: 0 0 auto; width: 41.666667%; }
.col-6 { flex: 0 0 auto; width: 50%; }
.col-7 { flex: 0 0 auto; width: 58.333333%; }
.col-8 { flex: 0 0 auto; width: 66.666667%; }
.col-9 { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.333333%; }
.col-11 { flex: 0 0 auto; width: 91.666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }
@media (min-width: 576px) {
  .col-sm { flex: 1 0 0%; }
  .col-sm-auto { flex: 0 0 auto; width: auto; }
  .col-sm-1 { flex: 0 0 auto; width: 8.333333%; }
  .col-sm-2 { flex: 0 0 auto; width: 16.666667%; }
  .col-sm-3 { flex: 0 0 auto; width: 25%; }
  .col-sm-4 { flex: 0 0 auto; width: 33.333333%; }
  .col-sm-5 { flex: 0 0 auto; width: 41.666667%; }
  .col-sm-6 { flex: 0 0 auto; width: 50%; }
  .col-sm-7 { flex: 0 0 auto; width: 58.333333%; }
  .col-sm-8 { flex: 0 0 auto; width: 66.666667%; }
  .col-sm-9 { flex: 0 0 auto; width: 75%; }
  .col-sm-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-sm-11 { flex: 0 0 auto; width: 91.666667%; }
  .col-sm-12 { flex: 0 0 auto; width: 100%; }
  .order-sm-1 { order: 1; }
  .order-sm-2 { order: 2; }
  .order-sm-3 { order: 3; }
  .order-sm-4 { order: 4; }
  .order-sm-5 { order: 5; }
}
@media (min-width: 768px) {
  .col-md { flex: 1 0 0%; }
  .col-md-auto { flex: 0 0 auto; width: auto; }
  .col-md-1 { flex: 0 0 auto; width: 8.333333%; }
  .col-md-2 { flex: 0 0 auto; width: 16.666667%; }
  .col-md-3 { flex: 0 0 auto; width: 25%; }
  .col-md-4 { flex: 0 0 auto; width: 33.333333%; }
  .col-md-5 { flex: 0 0 auto; width: 41.666667%; }
  .col-md-6 { flex: 0 0 auto; width: 50%; }
  .col-md-7 { flex: 0 0 auto; width: 58.333333%; }
  .col-md-8 { flex: 0 0 auto; width: 66.666667%; }
  .col-md-9 { flex: 0 0 auto; width: 75%; }
  .col-md-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-md-11 { flex: 0 0 auto; width: 91.666667%; }
  .col-md-12 { flex: 0 0 auto; width: 100%; }
  .order-md-1 { order: 1; }
  .order-md-2 { order: 2; }
  .order-md-3 { order: 3; }
  .order-md-4 { order: 4; }
  .order-md-5 { order: 5; }
}
@media (min-width: 992px) {
  .col-lg { flex: 1 0 0%; }
  .col-lg-auto { flex: 0 0 auto; width: auto; }
  .col-lg-1 { flex: 0 0 auto; width: 8.333333%; }
  .col-lg-2 { flex: 0 0 auto; width: 16.666667%; }
  .col-lg-3 { flex: 0 0 auto; width: 25%; }
  .col-lg-4 { flex: 0 0 auto; width: 33.333333%; }
  .col-lg-5 { flex: 0 0 auto; width: 41.666667%; }
  .col-lg-6 { flex: 0 0 auto; width: 50%; }
  .col-lg-7 { flex: 0 0 auto; width: 58.333333%; }
  .col-lg-8 { flex: 0 0 auto; width: 66.666667%; }
  .col-lg-9 { flex: 0 0 auto; width: 75%; }
  .col-lg-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-lg-11 { flex: 0 0 auto; width: 91.666667%; }
  .col-lg-12 { flex: 0 0 auto; width: 100%; }
  .order-lg-1 { order: 1; }
  .order-lg-2 { order: 2; }
  .order-lg-3 { order: 3; }
  .order-lg-4 { order: 4; }
  .order-lg-5 { order: 5; }
}
@media (min-width: 1200px) {
  .col-xl { flex: 1 0 0%; }
  .col-xl-auto { flex: 0 0 auto; width: auto; }
  .col-xl-1 { flex: 0 0 auto; width: 8.333333%; }
  .col-xl-2 { flex: 0 0 auto; width: 16.666667%; }
  .col-xl-3 { flex: 0 0 auto; width: 25%; }
  .col-xl-4 { flex: 0 0 auto; width: 33.333333%; }
  .col-xl-5 { flex: 0 0 auto; width: 41.666667%; }
  .col-xl-6 { flex: 0 0 auto; width: 50%; }
  .col-xl-7 { flex: 0 0 auto; width: 58.333333%; }
  .col-xl-8 { flex: 0 0 auto; width: 66.666667%; }
  .col-xl-9 { flex: 0 0 auto; width: 75%; }
  .col-xl-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-xl-11 { flex: 0 0 auto; width: 91.666667%; }
  .col-xl-12 { flex: 0 0 auto; width: 100%; }
  .order-xl-1 { order: 1; }
  .order-xl-2 { order: 2; }
  .order-xl-3 { order: 3; }
  .order-xl-4 { order: 4; }
  .order-xl-5 { order: 5; }
}
@media (min-width: 1400px) {
  .col-xxl { flex: 1 0 0%; }
  .col-xxl-auto { flex: 0 0 auto; width: auto; }
  .col-xxl-1 { flex: 0 0 auto; width: 8.333333%; }
  .col-xxl-2 { flex: 0 0 auto; width: 16.666667%; }
  .col-xxl-3 { flex: 0 0 auto; width: 25%; }
  .col-xxl-4 { flex: 0 0 auto; width: 33.333333%; }
  .col-xxl-5 { flex: 0 0 auto; width: 41.666667%; }
  .col-xxl-6 { flex: 0 0 auto; width: 50%; }
  .col-xxl-7 { flex: 0 0 auto; width: 58.333333%; }
  .col-xxl-8 { flex: 0 0 auto; width: 66.666667%; }
  .col-xxl-9 { flex: 0 0 auto; width: 75%; }
  .col-xxl-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-xxl-11 { flex: 0 0 auto; width: 91.666667%; }
  .col-xxl-12 { flex: 0 0 auto; width: 100%; }
  .order-xxl-1 { order: 1; }
  .order-xxl-2 { order: 2; }
  .order-xxl-3 { order: 3; }
  .order-xxl-4 { order: 4; }
  .order-xxl-5 { order: 5; }
}

.g-0, .gx-0 { --bs-gutter-x: 0; }
.g-0, .gy-0 { --bs-gutter-y: 0; }
.gap-0 { gap: 0; }
.g-1, .gx-1 { --bs-gutter-x: var(--ds-space-1); }
.g-1, .gy-1 { --bs-gutter-y: var(--ds-space-1); }
.gap-1 { gap: var(--ds-space-1); }
.g-2, .gx-2 { --bs-gutter-x: var(--ds-space-2); }
.g-2, .gy-2 { --bs-gutter-y: var(--ds-space-2); }
.gap-2 { gap: var(--ds-space-2); }
.g-3, .gx-3 { --bs-gutter-x: var(--ds-space-4); }
.g-3, .gy-3 { --bs-gutter-y: var(--ds-space-4); }
.gap-3 { gap: var(--ds-space-4); }
.g-4, .gx-4 { --bs-gutter-x: var(--ds-space-6); }
.g-4, .gy-4 { --bs-gutter-y: var(--ds-space-6); }
.gap-4 { gap: var(--ds-space-6); }
.g-5, .gx-5 { --bs-gutter-x: var(--ds-space-9); }
.g-5, .gy-5 { --bs-gutter-y: var(--ds-space-9); }
.gap-5 { gap: var(--ds-space-9); }

.order-0 { order: 0; }
.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
.order-5 { order: 5; }
.order-first { order: -1; }
.order-last { order: 6; }


/* =====================================================================
   C2 — UTILITÁRIOS
   =====================================================================
   Espaçamento na escala do Bootstrap (0 · .25 · .5 · 1 · 1.5 · 3rem),
   porém expresso nos tokens do design system, que casam exatamente nos
   quatro degraus usados pelos templates: 1→4px, 2→8px, 3→16px, 4→24px.
   O degrau 5 (48px no Bootstrap) vira 56px (--ds-space-9) para ficar na
   escala do DS — nenhum template do escopo usa `-5`, então isso não move
   nada hoje e evita um valor solto fora de escala amanhã. */

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--ds-space-1); }
.mt-2 { margin-top: var(--ds-space-2); }
.mt-3 { margin-top: var(--ds-space-4); }
.mt-4 { margin-top: var(--ds-space-6); }
.mt-5 { margin-top: var(--ds-space-9); }
.mt-auto { margin-top: auto; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--ds-space-1); }
.mb-2 { margin-bottom: var(--ds-space-2); }
.mb-3 { margin-bottom: var(--ds-space-4); }
.mb-4 { margin-bottom: var(--ds-space-6); }
.mb-5 { margin-bottom: var(--ds-space-9); }
.mb-auto { margin-bottom: auto; }
.ms-0 { margin-left: 0; }
.ms-1 { margin-left: var(--ds-space-1); }
.ms-2 { margin-left: var(--ds-space-2); }
.ms-3 { margin-left: var(--ds-space-4); }
.ms-4 { margin-left: var(--ds-space-6); }
.ms-5 { margin-left: var(--ds-space-9); }
.ms-auto { margin-left: auto; }
.me-0 { margin-right: 0; }
.me-1 { margin-right: var(--ds-space-1); }
.me-2 { margin-right: var(--ds-space-2); }
.me-3 { margin-right: var(--ds-space-4); }
.me-4 { margin-right: var(--ds-space-6); }
.me-5 { margin-right: var(--ds-space-9); }
.me-auto { margin-right: auto; }
.mx-0 { margin-left: 0; margin-right: 0; }
.mx-1 { margin-left: var(--ds-space-1); margin-right: var(--ds-space-1); }
.mx-2 { margin-left: var(--ds-space-2); margin-right: var(--ds-space-2); }
.mx-3 { margin-left: var(--ds-space-4); margin-right: var(--ds-space-4); }
.mx-4 { margin-left: var(--ds-space-6); margin-right: var(--ds-space-6); }
.mx-5 { margin-left: var(--ds-space-9); margin-right: var(--ds-space-9); }
.mx-auto { margin-left: auto; margin-right: auto; }
.my-0 { margin-top: 0; margin-bottom: 0; }
.my-1 { margin-top: var(--ds-space-1); margin-bottom: var(--ds-space-1); }
.my-2 { margin-top: var(--ds-space-2); margin-bottom: var(--ds-space-2); }
.my-3 { margin-top: var(--ds-space-4); margin-bottom: var(--ds-space-4); }
.my-4 { margin-top: var(--ds-space-6); margin-bottom: var(--ds-space-6); }
.my-5 { margin-top: var(--ds-space-9); margin-bottom: var(--ds-space-9); }
.my-auto { margin-top: auto; margin-bottom: auto; }
.m-0 { margin: 0; }
.m-1 { margin: var(--ds-space-1); }
.m-2 { margin: var(--ds-space-2); }
.m-3 { margin: var(--ds-space-4); }
.m-4 { margin: var(--ds-space-6); }
.m-5 { margin: var(--ds-space-9); }
.m-auto { margin: auto; }
.pt-0 { padding-top: 0; }
.pt-1 { padding-top: var(--ds-space-1); }
.pt-2 { padding-top: var(--ds-space-2); }
.pt-3 { padding-top: var(--ds-space-4); }
.pt-4 { padding-top: var(--ds-space-6); }
.pt-5 { padding-top: var(--ds-space-9); }
.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: var(--ds-space-1); }
.pb-2 { padding-bottom: var(--ds-space-2); }
.pb-3 { padding-bottom: var(--ds-space-4); }
.pb-4 { padding-bottom: var(--ds-space-6); }
.pb-5 { padding-bottom: var(--ds-space-9); }
.ps-0 { padding-left: 0; }
.ps-1 { padding-left: var(--ds-space-1); }
.ps-2 { padding-left: var(--ds-space-2); }
.ps-3 { padding-left: var(--ds-space-4); }
.ps-4 { padding-left: var(--ds-space-6); }
.ps-5 { padding-left: var(--ds-space-9); }
.pe-0 { padding-right: 0; }
.pe-1 { padding-right: var(--ds-space-1); }
.pe-2 { padding-right: var(--ds-space-2); }
.pe-3 { padding-right: var(--ds-space-4); }
.pe-4 { padding-right: var(--ds-space-6); }
.pe-5 { padding-right: var(--ds-space-9); }
.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: var(--ds-space-1); padding-right: var(--ds-space-1); }
.px-2 { padding-left: var(--ds-space-2); padding-right: var(--ds-space-2); }
.px-3 { padding-left: var(--ds-space-4); padding-right: var(--ds-space-4); }
.px-4 { padding-left: var(--ds-space-6); padding-right: var(--ds-space-6); }
.px-5 { padding-left: var(--ds-space-9); padding-right: var(--ds-space-9); }
.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: var(--ds-space-1); padding-bottom: var(--ds-space-1); }
.py-2 { padding-top: var(--ds-space-2); padding-bottom: var(--ds-space-2); }
.py-3 { padding-top: var(--ds-space-4); padding-bottom: var(--ds-space-4); }
.py-4 { padding-top: var(--ds-space-6); padding-bottom: var(--ds-space-6); }
.py-5 { padding-top: var(--ds-space-9); padding-bottom: var(--ds-space-9); }
.p-0 { padding: 0; }
.p-1 { padding: var(--ds-space-1); }
.p-2 { padding: var(--ds-space-2); }
.p-3 { padding: var(--ds-space-4); }
.p-4 { padding: var(--ds-space-6); }
.p-5 { padding: var(--ds-space-9); }

/* ---- Exibição e flexbox ---- */
.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-grid { display: grid; }
.d-table { display: table; }
@media (min-width: 768px) {
  .d-md-none { display: none; }
  .d-md-block { display: block; }
  .d-md-flex { display: flex; }
}
@media (min-width: 992px) {
  .d-lg-none { display: none; }
  .d-lg-block { display: block; }
  .d-lg-flex { display: flex; }
}
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-grow-1 { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.justify-content-start { justify-content: flex-start; }
.justify-content-center { justify-content: center; }
.justify-content-end { justify-content: flex-end; }
.justify-content-between { justify-content: space-between; }
.justify-content-around { justify-content: space-around; }
.align-items-start { align-items: flex-start; }
.align-items-center { align-items: center; }
.align-items-end { align-items: flex-end; }
.align-items-baseline { align-items: baseline; }
.align-items-stretch { align-items: stretch; }
.align-self-center { align-self: center; }
.align-middle { vertical-align: middle; }

/* ---- Dimensão ---- */
.w-100 { width: 100%; }
.w-auto { width: auto; }
.h-100 { height: 100%; }
.mw-100 { max-width: 100%; }
.img-fluid { max-width: 100%; height: auto; }

/* ---- Texto ---- */
.text-start { text-align: left; }
.text-center { text-align: center; }
.text-end { text-align: right; }
.text-nowrap { white-space: nowrap; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }
.text-decoration-none { text-decoration: none; }
.fst-italic { font-style: italic; }
.fw-normal { font-weight: var(--ds-weight-regular); }
.fw-medium { font-weight: var(--ds-weight-medium); }
.fw-semibold { font-weight: var(--ds-weight-semibold); }
.fw-bold { font-weight: var(--ds-weight-bold); }
.font-monospace { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.small, small { font-size: var(--ds-text-sm); }
.lead { font-size: var(--ds-text-md); color: var(--ds-text-muted); }

/* Cores de texto — mapeadas para os tokens do DS, não para a paleta do
   Bootstrap. `.text-muted` é o caso de maior volume (27 usos) e precisa de
   contraste AA sobre superfície clara: --ds-text-muted mede 6,24:1. */
.text-muted { color: var(--ds-text-muted); }
.text-body { color: var(--ds-text); }
.text-primary { color: var(--ds-green-700); }
.text-success { color: var(--ds-success-text); }
.text-danger { color: var(--ds-danger-text); }
.text-warning { color: var(--ds-warning-text); }
.text-dark { color: var(--ds-text); }
.text-white { color: var(--ds-on-brand); }

/* Títulos usados como CLASSE (ex.: `<h2 class="h5 mb-0">` da macro
   form.secao(), que precisa do nível semântico h2 com o tamanho visual de
   h5). Espelham a escala tipográfica do ds.css. */
.h1 { font-family: var(--ds-font-display); font-size: var(--ds-text-3xl); font-weight: var(--ds-weight-bold); line-height: var(--ds-leading-tight); color: var(--ds-green-900); }
.h2 { font-family: var(--ds-font-display); font-size: var(--ds-text-xl); font-weight: var(--ds-weight-semibold); line-height: var(--ds-leading-tight); color: var(--ds-green-900); }
.h3 { font-family: var(--ds-font-display); font-size: var(--ds-text-lg); font-weight: var(--ds-weight-semibold); line-height: var(--ds-leading-tight); color: var(--ds-green-900); }
.h4, .h5, .h6 { font-family: var(--ds-font-ui); font-size: var(--ds-text-md); font-weight: var(--ds-weight-semibold); line-height: var(--ds-leading-tight); color: var(--ds-green-900); }
.h6 { font-size: var(--ds-text-base); }

/* ---- Fundos sólidos (badge/estado) ---- */
.bg-primary { background-color: var(--ds-green-700); color: var(--ds-on-brand); }
.bg-secondary { background-color: var(--ds-text-muted); color: var(--ds-on-brand); }
.bg-success { background-color: var(--ds-success-solid); color: var(--ds-on-brand); }
.bg-danger { background-color: var(--ds-danger-solid); color: var(--ds-on-brand); }
.bg-warning { background-color: var(--ds-gold-500); color: var(--ds-green-900); }
.bg-light { background-color: var(--ds-surface-alt); }
.text-bg-primary { background-color: var(--ds-green-700); color: var(--ds-on-brand); }
.text-bg-secondary { background-color: var(--ds-text-muted); color: var(--ds-on-brand); }
.text-bg-success { background-color: var(--ds-success-solid); color: var(--ds-on-brand); }
.text-bg-danger { background-color: var(--ds-danger-solid); color: var(--ds-on-brand); }
.text-bg-warning { background-color: var(--ds-gold-500); color: var(--ds-green-900); }

/* ---- Borda, raio, sombra ---- */
.border { border: 1px solid var(--ds-border); }
.border-0 { border: 0; }
.border-top { border-top: 1px solid var(--ds-border); }
.border-bottom { border-bottom: 1px solid var(--ds-border); }
.border-primary { border-color: var(--ds-green-700); }
.rounded { border-radius: var(--ds-radius-md); }
.rounded-circle { border-radius: 50%; }
.shadow-sm { box-shadow: var(--ds-shadow-sm); }
.shadow { box-shadow: var(--ds-shadow-md); }

/* ---- Diversos ---- */
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.fade { transition: opacity var(--ds-duration-base) var(--ds-ease); }
.fade:not(.show) { opacity: 0; }
.collapse:not(.show) { display: none; }
.invisible { visibility: hidden; }


/* =====================================================================
   C3 — FORMULÁRIO (vocabulário Bootstrap → pele do design system)
   =====================================================================
   As macros de `templates/macros/form.html` emitem este vocabulário em
   todos os 119 formulários de petição. Estilizá-lo aqui migra os 119 de
   uma vez, sem tocar em markup, sem mexer nos `aria-describedby` e sem
   arriscar os `name=` que alimentam os `.docx`. */

.form-label {
  display: block;
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-green-900);
  margin-bottom: var(--ds-space-1);
}
/* <legend class="form-label"> dos fieldsets de radio/seção condicional:
   legend não herda display:block útil em todos os navegadores e vem com
   padding-inline nativo. */
legend.form-label { padding-inline: 0; width: 100%; }

.form-control,
.form-select,
.form-control-file {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0 var(--ds-space-3);
  border: 1px solid var(--ds-border-control);   /* 3,22:1 sobre --ds-surface (WCAG 1.4.11) */
  border-radius: var(--ds-radius-md);
  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);
}
textarea.form-control {
  min-height: 96px;
  padding-block: var(--ds-space-2);
  resize: vertical;
  line-height: var(--ds-leading-normal);
}
.form-control-file { padding-block: var(--ds-space-2); }
.form-control::placeholder { color: var(--ds-text-faint); }
.form-control:hover,
.form-select:hover { border-color: var(--ds-text-faint); }
.form-control:focus-visible,
.form-select:focus-visible {
  border-color: var(--ds-focus-inner);
  box-shadow: var(--ds-focus-ring);
  outline: none;
}
.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
  background: var(--ds-surface-sunken);
  color: var(--ds-text-faint);
  cursor: not-allowed;
}
.form-control-sm,
.form-select-sm { min-height: 40px; font-size: var(--ds-text-sm); padding-inline: var(--ds-space-2); }

/* `<select class="form-control">` é o padrão emitido por campo_select() e
   campo_formato(); a seta customizada vem do mesmo data-URI do ds.css para
   os dois não divergirem. `appearance:none` é obrigatório: sem ele o
   Chrome desenha a seta nativa ao lado da nossa. */
select.form-control,
.form-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;
  background-size: 16px 16px;
  padding-right: var(--ds-space-8);
}
select.form-control[multiple],
select.form-control[size]:not([size="1"]) { background-image: none; padding-right: var(--ds-space-3); height: auto; }

/* Texto auxiliar (`hint` das macros, ligado por aria-describedby). */
.form-text,
.helper-text {
  display: block;
  font-size: var(--ds-text-sm);
  color: var(--ds-text-muted);
  margin-top: var(--ds-space-1);
}

/* Estados de validação. `.is-invalid`/`.is-valid`/`.was-validated` são
   escritos por mascara.js e dpmg-form-ux.js — o CSS aqui é a metade
   visual desse contrato. */
.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid,
.was-validated .form-select:invalid,
.form-control[aria-invalid="true"] { border-color: var(--ds-danger-solid); }
.form-control.is-invalid:focus-visible,
.was-validated .form-control:invalid:focus-visible {
  box-shadow: 0 0 0 2px var(--ds-danger-solid), 0 0 0 4px var(--ds-focus-outer);
}
.form-control.is-valid,
.was-validated .form-control:valid { border-color: var(--ds-success-solid); }
.invalid-feedback {
  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);
  margin-top: var(--ds-space-1);
}
.valid-feedback { font-size: var(--ds-text-sm); color: var(--ds-success-text); margin-top: var(--ds-space-1); }

/* Checkbox e radio. A caixa nativa fica em 20px de propósito (padrão
   universal); o alvo de toque ≥40px vem da LINHA inteira, porque o
   <label for> ocupa o resto da largura e também alterna o estado — é o
   alvo equivalente previsto pela WCAG 2.5.8. */
.form-check {
  display: flex; align-items: flex-start; gap: var(--ds-space-2);
  min-height: 40px;
  font-size: var(--ds-text-base);
}
.form-check + .form-check { margin-top: var(--ds-space-1); }
.form-check-input {
  width: 20px; height: 20px; margin-top: 10px;
  accent-color: var(--ds-green-700);
  flex-shrink: 0;
}
.form-check-input:focus-visible { outline: var(--ds-focus-outline); outline-offset: 2px; }
/* Coluna, não linha. Vários rótulos do sistema não são só texto: a escolha
   do tipo de planilha usa `<strong>título</strong><div class="text-muted
   small">explicação</div>` dentro do mesmo <label>. Com `flex-direction:
   row` (o padrão), título e explicação viram irmãos na MESMA linha e o
   texto sai emendado — "Taxa legal (Bacen) (padrão)Modelo padrão baseado…".
   Em coluna, o rótulo de uma linha só continua centrado verticalmente
   (`justify-content: center`) e o de duas linhas empilha certo. */
.form-check-label {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  min-height: 40px;
  cursor: pointer;
  color: var(--ds-text);
}
.form-switch .form-check-input { width: 34px; border-radius: var(--ds-radius-full); }

/* Campo com botão acoplado (CEP + "Consultar", CPF + "Buscar Dados").
   `flex-wrap: nowrap` com `min-width: 0` no input é o que impede o botão
   de empurrar a linha e criar rolagem horizontal; abaixo de 480px vira
   coluna, como o `.dpmg-field__row` do design system. */
.input-group {
  display: flex;
  align-items: stretch;
  /* `wrap`, não `nowrap`. Campo e botão continuam lado a lado porque o
     campo encolhe (`flex: 1 1 auto` + `min-width: 0`) — mas a mensagem de
     erro é irmã deles dentro do grupo, e com `nowrap` ela virava uma
     terceira coluna ENTRE o campo e o botão. Medido no CEP de
     divorcio_litigioso_unificada: "Preencha este campo obrigatório."
     aparecia espremida no meio da linha, empurrando o "Consultar".
     Com `wrap` + `flex-basis: 100%` na mensagem, ela cai na linha de
     baixo, que é onde uma mensagem de erro pertence. */
  flex-wrap: wrap;
  gap: var(--ds-space-2);
  width: 100%;
}
.input-group > .form-control,
.input-group > .form-select { flex: 1 1 auto; min-width: 0; width: auto; }
.input-group > .btn { flex: 0 0 auto; }
.input-group > .invalid-feedback,
.input-group > .valid-feedback,
.input-group > .form-text {
  flex-basis: 100%;
  order: 99;          /* sempre abaixo, mesmo que o markup a coloque antes */
  margin-top: 0;
}
.input-group-text {
  display: inline-flex; align-items: center;
  padding-inline: var(--ds-space-3);
  border: 1px solid var(--ds-border-control);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-alt);
  color: var(--ds-text-muted);
  font-size: var(--ds-text-sm);
  white-space: nowrap;
}
.input-group-sm > .form-control,
.input-group-sm > .btn { min-height: 40px; font-size: var(--ds-text-sm); }
@media (max-width: 480px) {
  .input-group { flex-direction: column; align-items: stretch; }
}

/* `.form-group` é resquício do Bootstrap 4 e ainda aparece em
   execucao_unificada.html (bloco de importação CSV). */
.form-group { margin-bottom: var(--ds-space-4); }


/* =====================================================================
   C4 — BOTÕES
   =====================================================================
   Mapeamento para as variantes do `.dpmg-btn` do design system. As
   variantes `warning`/`success`/`danger`/`outline-secondary` NÃO são
   decoração: três arquivos de JS as alternam para comunicar estado
   (ver o cabeçalho deste arquivo), então cada uma precisa ser
   visualmente distinta das outras. */
.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: 1px solid transparent;
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
  color: var(--ds-text);
  font-size: var(--ds-text-base);
  font-weight: var(--ds-weight-semibold);
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  transition: var(--ds-t-color), var(--ds-t-shadow);
}
/* `<input type="submit" class="btn btn-primary">` (macro botao_enviar) não
   aceita flex de conteúdo, mas herda todo o resto. */
input.btn { display: inline-block; }
.btn-sm, .btn-group-sm > .btn { min-height: 40px; padding: 0 var(--ds-space-3); font-size: var(--ds-text-sm); }
.btn-lg { min-height: 48px; padding: 0 var(--ds-space-6); font-size: var(--ds-text-md); }

.btn-primary { background: var(--ds-green-700); color: var(--ds-on-brand); box-shadow: var(--ds-shadow-xs); }
.btn-primary:hover { background: var(--ds-green-600); box-shadow: var(--ds-shadow-sm); transform: translateY(var(--ds-lift-sm)); }
.btn-primary:active { background: var(--ds-green-900); transform: translateY(0); }

.btn-secondary,
.btn-outline-primary { background: var(--ds-surface); color: var(--ds-green-700); border-color: var(--ds-border-control); }
.btn-secondary:hover,
.btn-outline-primary:hover { background: var(--ds-green-50); border-color: var(--ds-green-500); }

.btn-outline-secondary { background: var(--ds-surface); color: var(--ds-text-muted); border-color: var(--ds-border-control); }
.btn-outline-secondary:hover { background: var(--ds-surface-alt); color: var(--ds-text); border-color: var(--ds-text-faint); }

.btn-danger { background: var(--ds-destructive-solid); color: var(--ds-on-brand); }
.btn-danger:hover { background: var(--ds-destructive-solid-hover); }
.btn-outline-danger { background: var(--ds-surface); color: var(--ds-destructive-text); border-color: var(--ds-danger-border); }
.btn-outline-danger:hover { background: var(--ds-danger-bg); }

.btn-success { background: var(--ds-success-solid); color: var(--ds-on-brand); }
.btn-success:hover { background: var(--ds-green-600); }
.btn-outline-success { background: var(--ds-surface); color: var(--ds-success-text); border-color: var(--ds-success-border); }
.btn-outline-success:hover { background: var(--ds-success-bg); }

/* Dourado sólido com tinta verde escura: **5,07:1** medido (não 8,4:1, que
   era uma estimativa minha errada por comparar o verde com o branco em vez
   de com o dourado). Passa em AA para texto normal. Branco sobre o mesmo
   dourado daria 2,4:1 — a variante de aviso precisa de tinta escura. */
.btn-warning { background: var(--ds-gold-500); color: var(--ds-green-900); border-color: var(--ds-gold-600); }
.btn-warning:hover { background: var(--ds-gold-400); }

.btn-info,
.btn-outline-info { background: var(--ds-surface); color: var(--ds-gold-ink); border-color: var(--ds-gold-600); }
.btn-info:hover,
.btn-outline-info:hover { background: var(--ds-gold-100); }

.btn-light { background: var(--ds-surface-alt); color: var(--ds-text); border-color: var(--ds-border); }
.btn-link { background: none; border: none; color: var(--ds-green-700); text-decoration: underline; text-underline-offset: 3px; min-height: 0; padding: 0; }

.btn:disabled,
.btn.disabled,
.btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; box-shadow: none; transform: none; }

.btn-group {
  display: inline-flex;
  align-items: stretch;
}
.btn-group > .btn { border-radius: 0; }
.btn-group > .btn:first-child { border-start-start-radius: var(--ds-radius-md); border-end-start-radius: var(--ds-radius-md); }
.btn-group > .btn:last-child { border-start-end-radius: var(--ds-radius-md); border-end-end-radius: var(--ds-radius-md); }
.btn-group > .btn + .btn { margin-left: -1px; }

.btn-close {
  width: 40px; height: 40px;
  border: none; background: none;
  color: var(--ds-text-muted);
  font-size: 1.3rem; line-height: 1;
}
.btn-close:hover { color: var(--ds-text); }


/* =====================================================================
   C5 — CARD  (é também o casco de SEÇÃO DE FORMULÁRIO)
   =====================================================================
   `form.secao()` emite `<div class="card mb-4"><div class="card-header">
   <h5>…</h5></div><div class="card-body">…</div></div>` em praticamente
   todos os formulários de petição. Estilizar esse casco como o
   `.dpmg-form-section` do design system — filete dourado à esquerda,
   cabeçalho em verde-50 — é o que dá aos 119 formulários a aparência da
   v2 sem editar um único template.

   `dpmg-form-secoes.js` depende de `.card > .card-header` para descobrir
   as seções condicionais. Não renomeie. */
.card {
  position: relative;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  overflow: hidden;
}
/* O filete dourado marca SEÇÃO DE FORMULÁRIO, e seção de formulário é o
   card que tem cabeçalho — a mesma estrutura que `dpmg-form-secoes.js`
   procura (`.card > .card-header`). Sem esta condição, o filete vazava
   para o card de documento dos hubs (`.card.document-card`, que não tem
   cabeçalho) e para os mini-cards de formulário das telas de admin, onde
   ele não significa nada. Medido no navegador em /dpmg/mediacao antes da
   correção: 33 cards de documento com barra dourada indevida. */
.card:has(> .card-header) { border-left: 4px solid var(--ds-gold-500); }
.card-header {
  background: var(--ds-green-50);
  padding: var(--ds-space-4) var(--ds-space-5);
  border-bottom: 1px solid var(--ds-border);
}
.card-header h5,
.card-header .h5,
.card-header h2,
.card-header h3 {
  margin: 0;
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-lg);
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-green-900);
  line-height: var(--ds-leading-tight);
}
.card-body {
  padding: var(--ds-space-5);
}
.card-footer {
  padding: var(--ds-space-4) var(--ds-space-5);
  border-top: 1px solid var(--ds-border);
  background: var(--ds-surface-alt);
}
.card-title { font-family: var(--ds-font-ui); font-size: var(--ds-text-md); font-weight: var(--ds-weight-semibold); color: var(--ds-green-900); margin-bottom: var(--ds-space-2); }
.card-text { color: var(--ds-text-muted); font-size: var(--ds-text-sm); }
.card-subtitle { color: var(--ds-text-muted); font-size: var(--ds-text-sm); }
@media (max-width: 480px) {
  .card-header { padding: var(--ds-space-3) var(--ds-space-4); }
  .card-body { padding: var(--ds-space-4); }
}


/* =====================================================================
   C6 — TABELA
   =====================================================================
   Mesma pele do `.dpmg-table` do design system: cabeçalho verde escuro
   em versalete, zebra na superfície alternativa, realce da linha sob o
   ponteiro. O `min-width` fica de fora aqui de propósito — quem decide
   se a tabela precisa rolar é o container de cada página. */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ds-text-sm);
  background: var(--ds-surface);
}
.table thead th {
  background: var(--ds-green-900);
  color: var(--ds-on-brand);
  text-align: left;
  font-weight: var(--ds-weight-semibold);
  font-size: var(--ds-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--ds-tracking-wide);
  padding: var(--ds-space-3) var(--ds-space-4);
}
.table tbody td,
.table tbody th {
  padding: var(--ds-space-3) var(--ds-space-4);
  border-top: 1px solid var(--ds-border);
  vertical-align: middle;
}
.table tbody tr:nth-child(even) td { background-color: var(--ds-surface-alt); }
.table tbody tr:hover td { background-color: var(--ds-green-50); }
.table-sm thead th,
.table-sm tbody td { padding: var(--ds-space-2) var(--ds-space-3); }
.table-bordered td, .table-bordered th { border: 1px solid var(--ds-border); }
.table-responsive {
  overflow-x: auto;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface);
}


/* =====================================================================
   C7 — ALERTA, BADGE, LISTA, PROGRESSO
   ===================================================================== */
.alert {
  display: flex; align-items: flex-start; gap: var(--ds-space-3);
  padding: var(--ds-space-3) var(--ds-space-4);
  border: 1px solid transparent;
  border-radius: var(--ds-radius-md);
  font-size: var(--ds-text-sm);
  background: var(--ds-info-bg);
  color: var(--ds-info-text);
}
.alert-success { background: var(--ds-success-bg); color: var(--ds-success-text); border-color: var(--ds-success-border); }
.alert-info    { background: var(--ds-green-50);  color: var(--ds-green-900);   border-color: var(--ds-green-100); }
.alert-warning { background: var(--ds-warning-bg); color: var(--ds-warning-text); border-color: var(--ds-warning-border); }
.alert-danger  { background: var(--ds-danger-bg);  color: var(--ds-danger-text);  border-color: var(--ds-danger-border); }
.alert-secondary { background: var(--ds-surface-alt); color: var(--ds-text-muted); border-color: var(--ds-border); }
.alert-sm { padding: var(--ds-space-2) var(--ds-space-3); font-size: var(--ds-text-xs); }

.badge {
  display: inline-flex; align-items: center; width: fit-content;
  padding: 3px var(--ds-space-2);
  border-radius: var(--ds-radius-sm);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-medium);
  background: var(--ds-green-900);
  color: var(--ds-on-brand);
}

.list-group { display: flex; flex-direction: column; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); overflow: hidden; background: var(--ds-surface); }
.list-group-item { padding: var(--ds-space-3) var(--ds-space-4); font-size: var(--ds-text-sm); color: var(--ds-text); }
.list-group-item + .list-group-item { border-top: 1px solid var(--ds-border); }
.list-group-item-action { min-height: 40px; display: flex; align-items: center; }
.list-group-item-action:hover { background: var(--ds-green-50); color: var(--ds-green-900); }

.progress { height: 8px; background: var(--ds-surface-sunken); border-radius: var(--ds-radius-full); overflow: hidden; }
.progress-bar { height: 100%; background: var(--ds-green-700); }


/* =====================================================================
   C8 — ABAS  (usadas só pelo dashboard)
   =====================================================================
   O comportamento continua sendo do bootstrap.bundle.js, carregado
   apenas na página do dashboard; aqui vai só a pele. */
.nav { display: flex; flex-wrap: wrap; gap: var(--ds-space-1); list-style: none; padding: 0; margin: 0; }
.nav-item { min-width: 0; }
.nav-link {
  display: inline-flex; align-items: center; gap: var(--ds-space-2);
  min-height: 40px;
  padding: var(--ds-space-2) var(--ds-space-3);
  border-radius: var(--ds-radius-sm);
  color: var(--ds-text-muted);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-medium);
  background: none; border: none;
  transition: var(--ds-t-color);
}
.nav-link:hover { background: var(--ds-green-50); color: var(--ds-green-900); }
.nav-tabs { border-bottom: 1px solid var(--ds-border); gap: 0; }
.nav-tabs .nav-link { border-radius: var(--ds-radius-sm) var(--ds-radius-sm) 0 0; border-bottom: 2px solid transparent; }
.nav-tabs .nav-link.active {
  color: var(--ds-green-900);
  background: var(--ds-surface);
  border-bottom-color: var(--ds-gold-500);
  font-weight: var(--ds-weight-semibold);
}
.tab-content > .tab-pane { display: none; }
.tab-content > .tab-pane.active { display: block; }


/* =====================================================================
   C9 — UTILITÁRIOS OUTRA VEZ, POR ÚLTIMO
   =====================================================================
   No Bootstrap os utilitários vêm DEPOIS dos componentes, e é essa ordem
   que faz `class="form-control w-auto"` significar "campo que não estica".
   Como aqui os componentes (C3–C8) vêm depois do bloco de utilitários
   (C2), a mesma marcação perdia: `.form-control { width: 100% }` vencia
   `.w-auto` por vir depois, com a mesma especificidade.

   Sintoma medido no dashboard antes desta seção: os dois campos de data e
   o seletor de ferramenta, todos marcados `w-auto`, ocupavam a linha
   inteira e empilhavam — a barra de filtros ia de ~40px para 213px de
   altura, empurrando o resto da página.

   Só entram aqui os utilitários que existem PARA vencer um componente
   (dimensão, exibição, alinhamento). Repetir os de cor ou espaçamento não
   teria efeito prático e só aumentaria o arquivo. */
.w-auto { width: auto; }
.w-100 { width: 100%; }
.h-100 { height: 100%; }
.mw-100 { max-width: 100%; }

.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-grid { display: grid; }
@media (min-width: 768px) {
  .d-md-none { display: none; }
  .d-md-block { display: block; }
  .d-md-flex { display: flex; }
}
@media (min-width: 992px) {
  .d-lg-none { display: none; }
  .d-lg-block { display: block; }
  .d-lg-flex { display: flex; }
}

.text-start { text-align: left; }
.text-center { text-align: center; }
.text-end { text-align: right; }

/* `[hidden]` continua acima de tudo: mesma dobra de especificidade de
   atributo que o `ds.css` usa, sem !important. */
[hidden][hidden] { display: none; }