/* ==========================================================================
   MODAL · CONTEUDO — cabecalho, blocos, trilho, rodape.
   ========================================================================== */

/* ⚠ **A IDENTIDADE PASSA A USAR A ESCALA DO DS, e as duas declaracoes que
   estavam aqui MORRERAM.** *(20/08/2026, decisao do operador: "acho o card meio
   morto em si, com excecao do resumo... quero uma mudanca expressiva".)*

   Medido no ar antes: num modal de **1.044 px**, o `<h2>` da identidade media
   **17 px** e o valor — o numero que decide dinheiro — media **16 px**. Os dois
   eram MENORES que os 15 px do corpo de `.fato__v`, na coluna ao lado: o card
   nao tinha ancora de escala nenhuma, e "hierarquia por tamanho" e literalmente
   o mecanismo em que a lei diz que o sistema se apoia.

   ⚠ **E OS DOIS ERAM LITERAIS FORA DA ESCALA.** `base.css` declara
   `.h1` (21) · `.h2` (15) · `.h3` (13) e `.num` (25) · `.num-sm` (19); 17 e 16
   nao sao nenhum deles. A varredura de 20/08 que deu *"tipografia 100% na
   escala"* mediu a COLUNA ESQUERDA — o cabecalho ficou de fora, e era onde os
   dois desvios estavam. E a lei do dia: *"estar dentro do DS nao e usar o DS"*.

   ⚠ **QUEM PINTA AGORA E A PECA, NAO ESTA FOLHA** — o markup emite
   `class="h1 mod__t"` e `class="num-sm"`, e `.mod__t` fica so com a margem.
   Redeclarar 21 px aqui seria a MESMA regra escrita duas vezes, e `modal.css`
   carrega DEPOIS de `base.css`: qualquer `font-size` que sobrasse aqui venceria
   a peca em silencio, que e como os 17 px sobreviveram a uma varredura inteira.

   ⚠ **`.mod__v` SAIU DAS DUAS PONTAS** — da folha e do markup. Classe sem
   regra e o defeito da classe orfa, e regra sem classe e o mesmo defeito pelo
   avesso; deixar uma das duas seria trocar um pelo outro. */
.mod__t { margin-top: 10px; }
.mod__c { font-size: 12px; color: var(--fg3); margin-top: 3px; }

/* ⚠ **`grid-template-rows: auto 1fr` E `.mod__selo:empty` SAO A CORRECAO DOS
   128 px DE BRANCO**, medida em 20/08/2026. A calha ATRAVESSA AS DUAS LINHAS do
   grid; com as duas em `auto` e a calha mais alta que a coluna, a sobra ia para
   a linha do SELO — que esta VAZIA em 783 de 787 autos da G2L e em 2.633 de
   2.633 do TORA. Medido com a aba *Atividade* vazia: `.mod__esq` = 292 px
   contra 548 da calha, e o resultado eram 128 px de branco acima da barra de
   abas, com `.mod__selo` de altura ZERO.

   EM GRID, LINHA VAZIA NAO E LINHA DE ALTURA ZERO: ela e uma trilha que
   participa da distribuicao. `1fr` na segunda manda a sobra para a coluna, e o
   `:empty` tira a primeira trilha da conta quando nao ha selo.

   ⚠ ABRIR *O caso* PAGA METADE DO DEFEITO SOZINHO (a coluna vai a 699 px e
   passa a calha) — E NAO DISPENSA ESTA CORRECAO: na aba *Atividade* vazia o
   branco fica. Quem olhar so a aba *Resumo* esta vendo o caso que se conserta
   sozinho.

   ⚠ **O CHAO DA COLUNA ESQUERDA RECUOU PARA `--bg`** na mesma data. O gradiente
   era `--sup` a esquerda e `--sup2` na calha; com `.bl` virando cartao `--sup`,
   cartao e chao ficariam da MESMA COR e so a borda os separaria — que e meio
   caminho para o filete horizontal que esta rodada existe para matar. `--bg` e
   o chao que o DS pressupoe embaixo de `.cx`. */
.mod__gd {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-areas: "selo tri" "esq tri";
  grid-template-rows: auto 1fr; align-items: start;
  background: linear-gradient(to right, var(--bg) calc(100% - 320px), var(--sup2) 0);
}
.mod__selo:empty { display: none; }
/* ⚠ **O `background` EXPLICITO NAO E REDUNDANCIA.** `.mod__gd--1` herdava o
   gradiente do irmao e desenhava, acima de 860 px, uma CALHA CINZA DE 320 px
   QUE NAO EXISTE — no retrato da entidade, no `carregando()` e no
   `naoAchado()`, que sao os tres consumidores desta variante. Defeito anterior
   a esta rodada; conferido no ar antes e depois. */
.mod__gd--1 { grid-template-columns: minmax(0, 1fr); grid-template-areas: "esq";
              grid-template-rows: auto; background: var(--bg); }
.mod__selo { grid-area: selo; padding: 0 20px; }
.mod__esq { grid-area: esq; padding: 4px 20px 24px; display: flex; flex-direction: column; min-width: 0; }
/* ⚠ `.mod__b` CONTINUA SENDO O ÚNICO ROLADOR — é lei, e esta regra já quebrou
   isso uma vez: `overflow-y: auto` mais `max-height` aqui abre uma SEGUNDA
   área de rolagem dentro do modal, colada na primeira. O operador rola a
   calha, solta o mouse achando que rolou o card inteiro, e o resto continua
   onde estava. Sem cap e sem overflow próprio, a calha cresce com o
   conteúdo e sobe/desce junto de `.mod__b` — `position: sticky` já a mantém
   à vista enquanto houver espaço na trilha do grid, sem precisar de um
   contêiner de rolagem seu. */
/* ⚠ **A CALHA VIRA N CARTÕES DE VERDADE — a lei do fio, de horas atrás,
   NÃO BASTOU.** *(20/08/2026, segunda rodada, o operador ainda vendo a mesma
   tela: "podemos dar mais profundidade nos itens, eles parecem impressos em
   uma folha A4, sem separação e nada. Ficou ruim".)*

   ⚠ **A CORREÇÃO ANTERIOR TROCOU O DEFEITO POR UM PRIMO DELE.** O fio de 1 px
   entre casas separa no papel, mas continua sendo TUDO A MESMA SUPERFÍCIE —
   zero sombra, zero elevação, zero contraste de fundo. Numa tela cujas OUTRAS
   colunas são cartões `--sup` com `--sh0` desde a mesma data, a calha ficou a
   ÚNICA área do card ainda plana — e "plana ao lado de elevado" é exatamente a
   leitura de "impresso numa folha".

   ⚠ **A LEI DE 20/08 QUE FAZIA A CALHA EXCEÇÃO — "ela já é o cartão" — CAI
   AQUI, medida contra a reação real do operador.** O argumento presumia que
   `--sup2` mais um fio já lia como profundidade; não lê. A calha passa a seguir
   a MESMA gramática da coluna esquerda: cada casa é `--sup` + borda + raio +
   `--sh0`, e o que sobra como "exceção" é só o CHÃO — `.mod__tri` continua
   `--sup2`, agora um chão recuado que RECEBE cartões soltos com `gap` de
   verdade entre eles, em vez de um painel único fatiado por linhas. */
/* ⚠ **O `z-index` E DA COLUNA, NUNCA DO PAINEL — e isto esta MEDIDO
   (01/09/2026, defeito relatado pelo operador: "se abrir um comentario e o
   status, o comentario fica por cima do card do status").**

   `.mod__tri` e `position: sticky`, logo um CONTEXTO DE EMPILHAMENTO proprio: o
   `--z-sel: 6` de `.mudar__p` esta preso la dentro e nao disputa com nada de
   fora. Com a coluna em `z-index: auto`, ela pinta na camada dos posicionados
   sem indice, **em ordem de documento** — e `.mod__esq` vem DEPOIS de
   `.mod__tri` no markup (`card/card.js`), com `.atv__i { position: relative }`
   em toda linha do feed. Resultado: **todo comentario pinta por cima do painel
   do status**.

   ⚠ **O PAINEL SO INVADE A COLUNA ESQUERDA porque cresce para a ESQUERDA**
   (`.mod__tri .mudar__p { right: 0 }`, mais abaixo) e mede ate 440 px contra os
   320 px da calha. Medido a 1280 px: o painel vai de x=701 a x=1134 e a calha
   comeca em x=836 — **133 px do painel caem sobre o feed**, e e exatamente essa
   faixa que ficava por baixo.

   ⚠ **`z-index` NO PROPRIO `.mudar__p` NAO RESOLVE, e foi medido com
   `10000000`: `elementFromPoint` continuou devolvendo `.atv__ent` nos tres
   pontos amostrados.** Numero nenhum vence um contexto de empilhamento de fora
   para dentro — quem tem de subir e a CAIXA que o cria. Com `--z-sel` aqui, os
   mesmos tres pontos passaram a devolver o painel.

   ⚠ **ISTO NAO VAZA PARA FORA DE `.mod__b`**: ele e `overflow-y: auto` e
   RECORTA o painel (e a razao de `couber()` existir em `card/status.js`), entao
   subir a calha nao a poe sobre o rodape nem sobre o cabecalho do card.

   ⚠ **NO TELEFONE NAO HA NADA A FAZER, e por construcao:** abaixo de 860 px
   `.mod__tri` volta a `position: static` (mais abaixo), deixa de criar contexto,
   e o `--z-sel` do painel passa a disputar direto no contexto do `.mod` — onde
   ele ja ganha de `.atv__i`. Conferido a 536 px antes desta correcao: o painel
   ja pintava por cima. **Nao acrescente `z-index` no bloco do telefone** — em
   `position: static` ele e inerte, e a linha morta mentiria sobre quem resolve. */
.mod__tri {
  grid-area: tri; position: sticky; top: 0; z-index: var(--z-sel);
  padding: var(--e5); border-left: 1px solid var(--lin); background: var(--sup2);
  display: flex; flex-direction: column; gap: var(--e4); align-self: start;
}
.mod__tri > .mudar,
.mod__tri > .bl,
.mod__tri > .par {
  background: var(--sup); border: 1px solid var(--lin); border-radius: var(--r-md);
  box-shadow: var(--sh0), var(--brilho);
  padding: var(--e5); margin: 0;
}

/* ⚠ **O SELETOR GANHOU O ROTULO QUE AS OUTRAS TRES CASAS JA TINHAM.**
   *(20/08/2026, decisao do operador: "nao temos um texto STATUS e embaixo o
   select, ele e apenas solto".)* *O relogio*, o parecer e *Se ninguem fizer
   nada* abrem com `.rot`; o seletor era **a unica casa sem cabeca**, e por isso
   lia como um controle jogado ali em vez da primeira casa do instrumento. O
   `.rot` e o mesmo `<span>` das outras — nenhuma peca nova. */
.tri__cab { display: block; flex-basis: 100%; margin-bottom: var(--e3); }

/* --------------------------------------------------------------- abas -- */
/* ⚠ **`.ab` MORREU E ENTROU `.seg`, o segmentado que o produto JA USA.**
   *(20/08/2026, decisao do operador: "acho o card meio morto em si, com excecao
   do resumo... quero uma mudanca expressiva".)*

   ⚠ **ERA O ULTIMO FILETE HORIZONTAL DO CARD.** Esta rodada matou o filete em
   `.bl`, em `.lrec` e na calha — e a barra de abas continuava sendo exatamente
   ele: `border-bottom: 1px solid var(--lin)` atravessando a coluna, com botoes
   de fundo transparente e um sublinhado de 2 px marcando o ativo. E a forma de
   um DOCUMENTO DE TEXTO, que e o *"escritas como se fosse um Word"* do operador,
   sobrevivendo no unico lugar onde ninguem tinha olhado.

   ⚠ **E ERA PECA PROPRIA ONDE O DS JA TINHA UMA.** `.ab` tinha **um unico
   consumidor em todo o `mvp/`** — este card — enquanto `.seg` e o controle de
   vista do produto inteiro: *Lista · Calendario* no Acervo, *Grafico · Tabela*
   na Analise, as lentes da Concentracao. O operador ja aprendeu esse gesto em
   quatro telas; a quinta o obrigava a aprender outro para a mesma coisa. Dois
   nomes para a mesma coisa e o modo de falha que este projeto pagou tres vezes.

   ⚠ **E `.seg` TRAZ A ELEVACAO DE GRACA:** o segmento ativo e `--sup` com
   `--sh1`, sobre a calha `--sup2` do proprio controle. Onde havia um risco de
   2 px passa a haver uma pastilha que sobe — *"elevacao e hierarquia"* valendo
   tambem para a escolha de vista.

   ⚠ **O ROLE CONTINUA SENDO `tablist`/`tab`, e isso nao e detalhe.** `.seg` e
   so a roupa: ela nao casa role nenhum, so a classe `.on`. Trocar para
   `role="group"` + `aria-pressed` — como o Acervo usa — quebraria a associacao
   `aria-controls` com os dois `<section role="tabpanel">`, e o leitor de tela
   deixaria de anunciar que ha dois paineis. Quem desenha le `.on`; quem ouve le
   `aria-selected`. */
/* ⚠ **QUEM RESOLVE O `align-self` E `.seg--barra`, QUE JA EXISTE — nao uma
   regra escopada nova.** `.mod__esq` e `flex-direction: column`, e um filho
   `inline-flex` sem `align-self` ESTICA para a largura da coluna: a pastilha
   viraria uma barra de 664 px com os dois botoes encostados na esquerda — a
   mesma armadilha que a lei ja nomeia para badge e pilula em grid.
   `telas.css` declara `.seg--barra { align-self: flex-start; flex-wrap: wrap;
   max-width: 100% }`, com dois consumidores (as lentes da Concentracao e as
   janelas de Relatorios), e as tres declaracoes sao exatamente as certas aqui.
   *"Modificador responsivo viaja com a peca, nunca amarrado ao envelope de uma
   tela"* — escrever a quarta copia do mesmo `align-self` seria fundar o
   problema que a lei descreve. **O que sobra escopado e so a margem**, que e
   relacao com o vizinho de baixo e nao propriedade do controle. */
/* ⚠ **A BARRA DE ABAS ESTAVA COLADA NO CABEÇALHO: 4 px.** *(20/08/2026,
   decisão do operador: "dê um margin auto no seletor de resumo e
   atividade".)* `.mod__esq` abre com `padding: 4px 20px 24px`, e o seg era o
   primeiro filho — então o único respiro entre a sombra do cabeçalho fixo e a
   pastilha eram esses 4 px, contra os 12 que ela já tinha embaixo. Assim
   ela lia como parte da moldura, não como o primeiro controle da coluna.
   ⚠ **A MARGEM SAI DE TOKEN**, e a de cima é maior que a de baixo de
   propósito: acima há uma troca de superfície (o cabeçalho elevado), abaixo
   há continuidade da mesma coluna.

   ⚠ **E ELA CENTRALIZA** *(20/08/2026, decisão do operador: "sim, centraliza
   a pastilha")*. Quem faz isso e `align-self`, NUNCA `margin: auto`: a
   pastilha ja herda `align-self: flex-start` de `.seg--barra`, e uma margem
   automatica ficaria brigando com ela sem vencer — as duas continuando certas
   sozinhas. Esta regra e mais especifica (`.mod__esq > .seg`) e mora numa
   folha que carrega depois, entao ela ganha de forma declarada.
   ⚠ **`.seg--barra` FICA NO MARKUP**: dela ainda vem `flex-wrap` e
   `max-width: 100%`, que sao o que impede a pastilha de estourar a coluna a
   375 px. Trocar por uma regra propria seria a quarta copia das mesmas tres
   declaracoes. */
.mod__esq > .seg { align-self: center; margin: var(--e5) 0 var(--e4); }
/* ⚠ O CONTADOR NASCE DA `.seg`, NAO DA `.ab`. Ele e o mesmo `<span>` de
   antes; o que muda e a superficie em que pousa — dentro do segmento inativo o
   chao e `--sup2`, entao `--sup3` continua sendo o degrau que o separa. */
.mod__esq > .seg button span {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: var(--pill); background: var(--sup3);
  font-size: 10.5px; color: var(--fg3);
}
.mod__esq > .seg button.on span { background: var(--sup2); color: var(--fg2); }

/* ----------------------------------------------------------- atividade -- */
/* ⚠ **`--e5` → `--e6` ENTRE O COMPOSITOR E O FEED, e `--e3` → `--e4` DENTRO
   DELE** (20/08/2026). Escrever e ler sao dois gestos, e eles se encostavam. */
.atv { display: flex; flex-direction: column; gap: var(--e6); padding-top: var(--e2); }
.atv__comp {
  display: flex; flex-direction: column; gap: var(--e4); padding: var(--e4);
  border: 1px solid var(--lin); border-radius: var(--r-md); background: var(--sup2);
}
/* ⚠ **ELA GUARDA SÓ A ALTURA — `resize`, `line-height` e `width` VOLTARAM
   PARA `.inp` E `.ta`, que ja os declaram.** *(20/08/2026.)* Com o `inp` de
   volta no markup, repetir aqui seria a mesma regra escrita duas vezes, e a
   copia divergiria no dia em que o DS mexesse no original — as duas
   continuando certas sozinhas. `min-height` porque `.ta` põe 62 px e este
   campo é a única superfície de texto livre do card: *"o textarea é
   pequeno"* foi queixa medida do operador em 20/08. */
.atv__tx { min-height: 92px; }
/* ⚠ UM CONTROLE SÓ CONTINUA VALENDO — isto não mudou: nada de label
   DECORATIVO fingindo ser o gatilho do `<input type="file">`, porque "clique
   para anexar" já é o que o próprio botão nativo diz. O que mudou é outra
   coisa: os dois controles não tinham NENHUMA legenda visível, só
   `aria-label` — invisível para quem enxerga. *(20/08/2026, "escritos não
   sinalizados".)* Um rótulo `<label>` de VERDADE, em pé ACIMA do controle, não
   é a mesma peça que a lei acima recusou: aquela substituía a interação
   nativa por uma decorativa; esta só nomeia o campo, sem tocar em como se
   clica. Empilhado (`.atv__campo`, coluna) em vez de ao lado — é o que evita
   reabrir a quebra de linha que a lei registra. */
.atv__ferr { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e3); }
.atv__campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.atv__campo-r { font-size: 11px; color: var(--fg3); }
/* ⚠ ELE ENCOLHEU: era `1 1 200px` e media **380 px** — largura de campo de
   TEXTO, herdada de quando o navegador escrevia *"Nenhum ficheiro
   selecionado"* ali dentro. Agora o conteúdo é um rótulo curto de ação, e o
   que sobra de espaço na fileira vai para o vão antes de *Comentar*. */
.atv__campo--arq { flex: 0 1 230px; max-width: 100%; }
.atv__campo--arq .atv__arq { width: 100%; }
.atv__campo--nat { flex: 0 0 176px; }
.atv__campo--nat .sel { width: 100%; }
/* ⚠ **O CAMPO DE ARQUIVO É UM BOTÃO, e o `<input>` É esse botão — só que
   pintado por nós.** *(20/08/2026, terceira volta no mesmo campo: "anexar ainda
   está ruim".)* As duas formas anteriores tentaram domar o desenho NATIVO do
   `<input type="file">`, e as duas esbarraram no mesmo teto:

     1. **caixa dentro de caixa** — o campo com borda e raio, e o botão nativo
        DENTRO dele com outra borda e outro raio: dois enquadramentos para um
        controle só, que é o oposto de *"um controle só"*;
     2. **o texto é do navegador e vem na língua dele** — medido: *"Escolher
        Ficheiros"* e *"Nenhum ficheiro selecionado"*, **pt-PT**, num produto em
        que a lei do vocabulário diz **arquivo**. Não existe propriedade de CSS
        que troque esse texto.

   Agora o `<input>` cobre o campo inteiro em `opacity: 0`: **o clique cai no
   controle de verdade**, em qualquer ponto, sem `<span>` fingindo ser gatilho e
   sem JS abrindo o seletor. O que a folha faz é desenhar por cima.

   ⚠ **`opacity`, NUNCA `display: none` nem `visibility: hidden`:** os dois
   tirariam o campo da ordem de `Tab`, e ele é a única porta para anexar
   documento. Com `opacity` ele continua focalizável, e `:focus-within` leva o
   anel do DS para a moldura — mesmo anel de qualquer outro campo.

   ⚠ **`inset: 0` COBRE O `padding` do `.inp`**, e é por isso que a área de
   clique é o campo todo e não só o texto. Sem isso sobrariam 10 px mortos de
   cada lado, e um alvo com buraco na borda é pior que um alvo pequeno: ele
   funciona quase sempre. */
.atv__arq { position: relative; cursor: pointer; }
.atv__arq > .ico { flex: none; color: var(--fg3); }
.atv__arq-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atv__arq-in { position: absolute; inset: 0; width: 100%; height: 100%;
               opacity: 0; cursor: pointer; }
.atv__arq:focus-within { border-color: var(--b400); box-shadow: var(--anel); }

/* ⚠ **OS ARQUIVOS ESCOLHIDOS APARECEM COMO CHIP, na mesma peça do feed.**
   O texto nativo (*"Nenhum ficheiro selecionado"* / *"2 ficheiros"*) é do
   navegador, vem na língua dele e não diz o tamanho — e o teto de 40 MB por auto
   é justamente por tamanho. `.atv__anexo` já desenha nome + tamanho no feed, e
   reusá-la mantém *o que vai ser anexado* e *o que já foi* falando a mesma
   língua. ⚠ **NÃO É o label decorativo que a lei probe:** o gatilho continua sendo
   o botão nativo, e isto aqui é leitura do que ele já escolheu. */
.atv__pend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.atv__pend:empty { display: none; }
.atv__pend .rot { flex-basis: 100%; }
.atv__ferr [data-atv-comentar] { flex: none; margin-left: auto; }
/* ⚠ **A DICA ERA UM `.sm` SOLTO e virou linha com ícone.** Ela diz o que o
   campo de arquivo aceita e o teto de 40 MB — informação de ajuda, não
   parágrafo —, e sem a marca ela lia como uma frase perdida entre o controle e
   o feed. `align-items: flex-start` porque o texto quebra em duas linhas a 375
   px e o ícone tem de ficar na PRIMEIRA, nunca centrado no bloco. */
.atv__dica { display: flex; align-items: flex-start; gap: 6px;
             font-size: 11.5px; line-height: 1.45; color: var(--fg3); }
.atv__dica > .ico { flex: none; margin-top: 2px; }
.atv__feed { display: flex; flex-direction: column; list-style: none; }
.atv__i { position: relative; padding: 0 0 var(--e4) 22px; }
.atv__i:not(:last-child)::before {
  content: ''; position: absolute; left: 6px; top: 15px; bottom: -1px;
  width: 1px; background: var(--lin2);
}
.atv__ent, .atv__lap {
  padding: 12px 13px; border: 1px solid var(--lin); border-radius: var(--r-md); background: var(--sup);
  font-size: 12.5px; line-height: 1.45;
}
.atv__ent::before, .atv__lap::before {
  content: ''; position: absolute; z-index: var(--z-no); left: 2px; top: 18px;
  width: 9px; height: 9px; border: 1.5px solid var(--fg3); border-radius: 50%; background: var(--sup);
}
.atv__meta { display: flex; align-items: center; gap: var(--e2); color: var(--fg3); }
.atv__meta > b { color: var(--fg); font-weight: 600; }
.atv__meta > .ico { color: var(--fg3); }
.atv__texto { margin-top: var(--e3); white-space: pre-wrap; color: var(--fg); }
.atv__anexos { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e3); }
.atv__anexo {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 7px 9px;
  border: 1px solid var(--lin); border-radius: var(--r-sm); background: var(--sup2); color: var(--fg2);
}
.atv__anexo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atv__anexo small { flex: none; color: var(--fg4); }
.atv__ent--rastro { background: var(--sup2); color: var(--fg2); }
.atv__mud { margin-top: var(--e2); }
.atv__ent q { display: block; margin-top: var(--e2); padding-left: 9px; border-left: 2px solid var(--lin2); quotes: none; }
.atv__lap { display: flex; gap: var(--e3); background: var(--sup2); color: var(--fg3); }
.atv__lap b { color: var(--fg2); }
.atv__lap p { margin-top: 3px; }
/* ⚠ **OS MESMOS 22 px DE CALHA DE `.atv__i`** (logo acima): o vazio e o feed
   ocupam a mesma posicao, e sem a calha o texto do vazio comeca 22 px a
   esquerda de onde a primeira entrada vai comecar. */
.atv__vazio { padding: var(--e5) 0 var(--e5) 22px; color: var(--fg3); font-size: 12.5px; }

/* ------------------------------------- o degrau antes de remover (01/09) ---
   ⚠ **NENHUMA CLASSE NASCE AQUI, E ISSO E O PONTO.** A pergunta que o `×` do
   feed passou a abrir e `.pso` — a MESMA peca de
   `config/usuarios.js:passoDeDesativar`, declarada em `acesso.css`. Uma familia
   `.atv__rm*` seria um segundo desenho para *"confirme antes de destruir"*, e a
   segunda divergiria do primeiro no primeiro ajuste.

   O QUE MUDA E SO A MARGEM: `.pso` traz `margin-bottom: var(--e4)` porque na
   aba *Usuarios* ela e IRMA da linha seguinte e precisa se descolar dela. Aqui
   ela e a ULTIMA filha de `.atv__ent`, dentro do padding do cartao — a margem de
   baixo viraria um vao morto sob os botoes, e o que falta e o respiro de CIMA,
   separando a pergunta do texto do comentario. */
.atv__ent > .pso { margin: var(--e3) 0 0; }

/* ============================================== cabecalho: campo de cor ===
   ⚠ **A BORDA CINZA DO TOPO SAIU, e o territorio deixou de ser so um trilho de
   5 px.** *(20/08/2026, decisao do operador: "temos uma borda cinza no topo do
   card e e feio, ela ocupa um espaco desnecessario".)* O `border-bottom: 1px
   solid var(--lin)` que a folha base (`componentes.css`) da a TODO `.mod__cab`
   — inclusive o do retrato e o de carregando/nao-achado, que continuam com ele
   — separava cabecalho e corpo por uma linha morta. Aqui, ESPECIFICAMENTE no
   cabecalho do card do auto (a classe nova `.mod__cab--terr`, e so ela), a
   separacao passa a ser por ELEVACAO — `--sh0` — e o territorio ganha um
   verniz de cor por TRAS do cabecalho inteiro, nao so no trilho de 5 px que
   `.cx--terr` ja desenhava (e que continua, como acento).

   ⚠ **E A LEI *"COR PRECISA DE AREA"* PASSA A SER CUMPRIDA DE VERDADE**: ate
   aqui o card nao tinha NENHUM campo grande de cor — so a tag de 22 px e o
   trilho de 5 px. `color-mix()` sobre os tokens que JA EXISTEM
   (`--ant`/`--ctb`) — nenhuma cor nova entra na paleta, e o mix e raso (6%)
   para nao competir com o monopolio de vermelho/ambar/verde do prazo. */
/* ⚠ **`--sh1`, NAO `--sh0`: o cabecalho e SINGULAR, e o corpo rola por baixo
   dele.** *(20/08/2026, decisao do operador: "melhore o rodape e cabecalho".)*
   `--sh0` e o plano do item em grade — o degrau de quem e um entre vinte iguais.
   O cabecalho fixo nao e um entre vinte: e a chapa de identidade que nunca sai da
   tela, com 495 px de conteudo passando por baixo. A lei ja nomeia o degrau
   ("`--sh1` o singular"); o que faltava era aplica-lo. */
/* ⚠ `--brilho` VAI JUNTO, SEMPRE: no tema escuro a sombra praticamente some
   (`rgba(0,0,0,.4)` sobre chao escuro) e sem o realce de aresta a chapa fica
   chapada. E lei, e as duas superficies fixas do card nasceram sem ele. */
.mod__cab--terr {
  border-bottom: none; box-shadow: var(--sh1), var(--brilho);
  position: relative; z-index: 1;
}
/* ⚠ **O GRADIENTE PASSOU A SEGURAR A COR ATE O FIM DO CABECALHO.** Ele ia de
   7% em 0% ate `--sup` puro em **130%**; com o trilho pintado por cima, a unica
   parte visivel era o topo, e ninguem media o resto. Com o trilho transparente o
   degrade ficou a vista inteiro — e nos ultimos 100 px ele ja estava em ~1,6% de
   mistura, ou seja, **branco**: o campo de cor terminaria justamente onde a marca
   comeca a ser desenhada. Agora ele vai de 8% a 3% em 100%, e o cabecalho e um
   campo continuo do comeco ao fim.

   ⚠ **A MISTURA CONTINUA RASA DE PROPOSITO.** Vermelho, ambar e verde tem dono
   unico — o prazo —, e as pilulas do trilho pousam neste campo. 8% de violeta ou
   de ciano sobre branco nao disputa matiz com nenhuma das tres; o fundo comunica,
   nunca compete. Nenhuma cor nova entra na paleta: `color-mix()` sobre `--ant` e
   `--ctb`, que ja existem medidos. */
/* ⚠ **O CAMPO DE COR DO CABECALHO MORREU, e o cabecalho volta a ser CHAPA
   BRANCA.** *(20/08/2026, decisao do operador, olhando a tela: "o cabecalho saiu
   totalmente do design system... tem um gradiente algo diferente que esta ruim,
   veja como o sistema e e deixe minimalista".)*

   ⚠ **A LEI *"COR PRECISA DE AREA"* FICA SUSPENSA NO CARD, e isto e lapide, nao
   esquecimento.** Ela pedia um campo grande de cor por tela, e o card tentou
   cumpri-la DUAS vezes em 20/08: primeiro com a faixa de territorio de 5 px, que
   o operador mandou tirar, depois com este verniz de 12%, que ele recusou por
   sair do sistema. **O produto inteiro e chapa branca sobre `--bg`** — e o proprio
   card ja tem essa pilha completa: `--sup` no cabecalho e nos blocos, `--bg` no
   chao da coluna, `--sup2` na calha e no rodape. Um verniz violeta de 209 px era
   a UNICA superficie do `mvp/` com matiz de fundo, e por isso lia como peca de
   outro produto colada aqui.

   ⚠ **O TERRITORIO CONTINUA DITO, e sem gastar area:** a `tag--ant`/`tag--ctb`
   com o nome por extenso, na primeira linha do cabecalho. Ela sempre foi a
   afirmacao; o campo era enfase.

   ⚠ **QUEM SEPARA O CABECALHO DO CORPO E A ELEVACAO (`--sh1` + `--brilho`), e
   ela FICA.** O operador reclamou do gradiente, nunca da sombra — e e a sombra
   que substituiu o `border-bottom` de 1 px que ele mandou tirar mais cedo.
   `.mod__cab--terr` sem `background` proprio herda o `--sup` de `.mod__cx`, que e
   exatamente a chapa branca que o resto do sistema usa: nenhuma cor declarada,
   nenhuma cor inventada. */

/* --------------------------------------------------------------- bloco -- */
/* ⚠ **CADA SECAO E UM CARTAO desde 20/08/2026, e o filete horizontal MORREU.**
   Medido no ar antes da correcao: `box-shadow: none` nas OITO superficies do
   card, fundo transparente, borda zero — `.bl` era `padding: 18px 0` mais um
   `border-bottom`. E exatamente o *"o design e meio morto, as sessoes sao
   escritas como se fosse um Word, nao tem uma sombra e nada"* do operador: o
   filete e a forma de um DOCUMENTO DE TEXTO, nao de um instrumento.

   O card era **a unica superficie do produto que descumpria a lei**, e ela ja
   estava escrita duas vezes — *"toda superficie e cartao com borda de 1 px"* e
   *"elevacao e hierarquia, nao decoracao"*. O que faltava era medir.

   OS TRES PLANOS, e eles sao a lei sendo cumprida:
     · o modal      `.mod__cx`                          --sh3  (ja tinha)
     · a peca       `.bl`, `.lrec`                       --sh0
     · o singular   `.bl--fato`, `.selo-d`               --sh1
     · o cursor     `.lrec > summary:hover`              --sh2

   ⚠ **`--brilho` VAI JUNTO, SEMPRE.** No tema escuro a sombra some; sem o
   highlight de aresta o escuro fica chapado — e lei.

   ⚠ **O ESCOPO E A PECA FORA DA CALHA.** `.mod__tri .bl` e a excecao nomeada,
   logo acima. O retrato da entidade (`entidade.js`) ENTRA, porque a partir
   desta rodada as duas sobreposicoes sao vistas no MESMO gesto — o retrato
   empilha sobre o card —, e uma delas lendo como documento dois segundos depois
   da outra e pior que qualquer das duas sozinha. */
/* ⚠ O PADDING SAI DE TOKEN. A primeira forma trazia `16px 17px` — o 17
   digitado a mao, sem medicao nenhuma por tras, num arquivo cujo DS declara a
   escala 4/6/8/12/16/24/32/48. Varredura de 20/08 sobre o card inteiro: a
   tipografia estava **100% na escala** e o raio tambem; os espacos literais eram
   o unico desvio, e este era o unico sem justificativa escrita. */
.bl {
  padding: var(--e5); margin-top: var(--e4);
  background: var(--sup); border: 1px solid var(--lin); border-radius: var(--r-md);
  box-shadow: var(--sh0), var(--brilho);
}
.bl:first-child { margin-top: 0; }
/* ⚠ **O SINGULAR SOBE, E SAO EXATAMENTE DOIS.** *O fato que decide* — o par
   aferido × limite, o numero que decide dinheiro — e o selo de contradicao.
   `bl--fato` nasceu em `card/corpo.js` nesta rodada porque o bloco nao tinha
   seletor proprio: alcanca-lo por POSICAO (`.bl:first-child`) quebraria em
   silencio no dia em que a ordem da coluna mudasse, e ela mudou nesta mesma
   rodada. */
.bl--fato { box-shadow: var(--sh1), var(--brilho); }
.bl__c { display: flex; align-items: baseline; gap: 10px; margin-bottom: 11px; }
/* ⚠ `--fg3`, NAO `--fg4` — e e a MESMA correcao que `.lrec__n` recebeu em
   18/08, aplicada ao lugar que ficou de fora. Medido em 20/08 no ar: o municipio
   no cabecalho de *O caso* dava **3,75:1** a 11,5 px sobre `--sup` e **reprovava
   AA** (piso 4,5). A lei do DS e literal: `--fg4` fica restrito a placeholder,
   eixo de grafico e `.prov` — e mais nada; o piso da camada de instrumento e
   `--fg3`. E este texto nao e enfeite: e o LUGAR do auto, que a lei nomeia como
   *"o que o operador procura"*. Texto que se le tem de passar como texto. */
.bl__c .sm { margin-left: auto; color: var(--fg3); }
.bl__p { font-size: 12px; color: var(--fg2); line-height: 1.5; margin-top: 10px; }
.bl__p b { color: var(--fg); font-weight: 600; }
.chave { font-size: 11px; word-break: break-all; line-height: 1.35; }

/* ------------------------------------------------------ medicao (radar) - */
/* tres barras na MESMA escala: o excedente so significa alguma coisa se der
   para ler as tres juntas. */
.med3 { display: flex; flex-direction: column; gap: 9px; }
.med3__l { display: grid; grid-template-columns: 96px minmax(0, 1fr) 96px; gap: 12px; align-items: center; }
.med3__r { font-size: 12px; color: var(--fg2); }
.med3__t { height: 8px; background: var(--sup3); border-radius: var(--pill); overflow: hidden; }
.med3__t i { display: block; height: 100%; border-radius: var(--pill); background: var(--s2); }
.med3__v { font-size: 12px; text-align: right; }
.med3__l--a .med3__t i { background: var(--r1); }
.med3__l--c .med3__t i { background: var(--r2t); }   /* --r2t: ver base.css, faixa 2 */
.med3__l--lim .med3__t i { background: var(--r3); }
.med3__l--lim .med3__r { font-weight: 550; color: var(--fg); }

/* --------------------------------------------------------------- conta -- */
.conta { display: flex; flex-direction: column; font-size: 12.5px; }
.conta__l { display: flex; align-items: baseline; gap: 14px; padding: 7px 0; }
.conta__l span { color: var(--fg2); flex: 1; }
.conta__l b { font-weight: 550; }
.conta__l--s { border-top: 1px solid var(--lin); }
.conta__l--s span { color: var(--fg); font-weight: 500; }
.conta__l--t { border-top: 2px solid var(--lin2); margin-top: 2px; }
.conta__l--t span, .conta__l--t b { color: var(--fg); font-weight: 600; }

/* --------------------------------------------------------------- citacao */
.cit {
  font-size: 12.5px; line-height: 1.55; color: var(--fg2);
  padding: 11px 14px; border-left: 2px solid var(--lin2); background: var(--sup2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.cit.mono { font-size: 11.5px; }

/* ---------------------------------------------------------- composicao -- */
.comp { display: flex; flex-direction: column; gap: 7px; }
.comp__v { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.comp__v > .trunc { flex: 1; color: var(--fg2); }


/* -------------------------------------------------------------- trilho -- */
.tri__b { display: flex; flex-direction: column; gap: 9px; }
.tri__p { font-size: 11.5px; color: var(--fg3); line-height: 1.5; }

.pzs { display: flex; flex-direction: column; gap: 12px; }
/* ⚠ SÓ UMA LINHA DE TEXTO AGORA (`.pzs__r`) — `.pzs__d` (a proveniência por
   extenso) virou `title` da linha em 19/08/2026, e a pílula não precisa mais
   se espichar por DUAS linhas (`grid-row: 1 / 3`) para centralizar ao lado
   de um rótulo que já é altura única. `cursor: help` avisa que a linha tem
   mais para contar no hover. */
.pzs__l {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px;
  align-items: baseline; cursor: help;
}
.pzs__r { font-size: 12.5px; font-weight: 500; }
.pzs__l .pz { grid-column: 2; align-self: center; }

/* -------------------------------------------------------------- rodape -- */
.mod__nav { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--fg3); }

/* =================================================== linha do tempo v2 ==
   Por eventos DATADOS, colorida pela natureza. Tres naturezas, tres formas de
   no — a mesma gramatica de .est e da pilula: cheio, vazado, meio.
   (A regra "rito nao e cronologia" do v4 morreu: o dado novo a tornou falsa.) */
.tl2 { display: flex; flex-direction: column; }
.tl2__e { display: grid; grid-template-columns: 52px 16px minmax(0, 1fr); gap: 10px;
          align-items: start; padding-bottom: 14px; position: relative; }
.tl2__e:last-child { padding-bottom: 0; }
.tl2__d { font-size: 11px; color: var(--fg3); padding-top: 1px; }
.tl2__p { position: relative; height: 16px; }
.tl2__p s {
  text-decoration: none; position: absolute; left: 2px; top: 3px;
  width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--fg3);
}
/* a linha que liga E O TRAJETO — mesma peca da lateral e da lente de 30 dias */
.tl2__e:not(:last-child) .tl2__p::after {
  content: ''; position: absolute; left: 6.5px; top: 14px; bottom: -14px;
  width: 1.5px; background: var(--lin2);
}
.tl2__r { font-size: 12.5px; color: var(--fg); line-height: 1.35; }

/* os preenchimentos vem dos tokens de forma de estado.css — nenhuma peca
   escreve o gradiente do no a mao, e isso e uma linha de grep na prova */
.tl2__e--gatilho s    { background: var(--no-cheio); color: var(--fg3); }
.tl2__e--status s     { background: var(--no-vazado); }
.tl2__e--financeiro s { color: var(--fg3); background: var(--no-meio); }

/* A JANELA VIVA FECHA A LINHA, E ELA USA A ESCALA DE PRAZO — nao a familia de
   estado. Ate 14/08 esta regra usava `--e-voce`; a T2 a repontou para
   `--e-agir` como PONTE, e a ponte tinha dois defeitos: em tema claro
   `--e-agir` e #15141A, EXATAMENTE `--fg`, entao a linha da janela viva nao se
   distinguia do texto; e uma cor unica dizia "existe janela" calando "ela vence
   hoje".

   UMA JANELA VIVA E UM PRAZO, e vermelho/ambar/verde pertencem exclusivamente
   ao prazo. Os cinco degraus sao os mesmos da pilula, e a classe vem de
   `faixaDaPilula` (js/status.js) — a peca pura decide, a folha desenha.

   ⚠ `m` E A FOLGA VENCIDA (`vivo` com `dias < 0`) e NUNCA se desenha como
   vencida: ali o que acabou foi a NOSSA folga de dia util, e a janela do orgao
   continua aberta — este item e o MAIS urgente, nao o menos. */

/* ------------------------------------------------------------- pecas ---- */
.pcs { display: flex; flex-direction: column; }
.pcs__i { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto auto; gap: 10px;
          align-items: center; padding: 6px 0; border-bottom: 1px solid var(--lin); font-size: 12.5px; }
.pcs__i:last-child { border-bottom: none; }
.pcs__p { font-size: 11px; color: var(--fg3); }
/* peca INVALIDADA aparece riscada, nunca sumida */
.pcs__i--inv .pcs__r { text-decoration: line-through; color: var(--fg3); }

/* --------------------------------------------------- lista de entidade --
   OS 12 ITENS DE MAIOR VALOR do retrato (`entidade.js`, task 2 de
   `telas-estrategia`). RESTAURADA aqui: existia neste arquivo no SHA base do
   plano desta task (`440e078`) e foi perdida na reescrita do card (t10, ainda
   fora do git quando esta task começou) — o retrato que a consome não
   existia até agora, e nada acusa regra sem consumidor. O hover ganhou o
   guarda de `@media (hover:hover)` que a lei de 18/08 exige e a versão de
   440e078 não tinha. */
/* ⚠ **AS CINCO COLUNAS SAO FIXAS, E CADA CELULA E NOMEADA** *(20/08/2026)*.
   A forma anterior tinha a coluna do prazo em `auto` e identificava o valor por
   `> .mono:last-child` — as duas coisas presumiam que a linha SEMPRE traz cinco
   filhos, e ela nao traz: `pilula()` devolve `''` em todo auto sem acao (100%
   dos 61 itens de *Acompanhar* da G2L). Com quatro filhos, o valor virava o 4o
   e caia na trilha do prazo — o *"se um item falta fica embaralhado"* que o
   operador viu. `entidade.js` passou a emitir a celula vazia; aqui as classes
   proprias tiram a regra de cima de `:last-child`, que e o que a tornava fragil
   a ordem.

   ⚠ **`122px` NO PRAZO, e ele e medido, nao chutado**: a pilula de DOIS andares
   (`Defesa 15 + Indicacao 20 dias`) e a mais larga em uso. Em `auto` a coluna
   mudava de largura entre um retrato e outro, e a leitura vertical do valor —
   a unica razao de esta lista ser tabela — se perdia.

   ⚠ **DATA E VALOR ALINHAM A DIREITA.** Sao os dois campos numericos, e numero
   se compara pela unidade: alinhados a esquerda, `5 jun` e `16 mai` deslocam a
   virgula de linha para linha. */
.ent__l { display: flex; flex-direction: column; }
.ent__i { display: grid; grid-template-columns: 128px minmax(0, 1fr) 84px 122px 104px;
          gap: 12px; align-items: center; padding: 9px 6px; text-align: left;
          border-bottom: 1px solid var(--lin); font-size: 12.5px; }
.ent__i:last-child { border-bottom: none; }
.ent__d { text-align: right; color: var(--fg3); white-space: nowrap; }
/* A celula do prazo e VAZIA em boa parte das linhas: `justify-items` nela
   mesma, para a pilula nao esticar ate os 122 px quando existe. */
.ent__pz { display: flex; justify-content: flex-start; min-width: 0; }
.ent__v { text-align: right; font-weight: 550; white-space: nowrap; }

/* ------------------------------------------------------------- o fato --
   ⚠ CHAMAVA-SE `.fd`, E COLIDIA COM A FAIXA DE DIAS DO GRAFICO (`grafico.css`,
   `.fd`/`.fd__r`). As duas peças existiam e as duas tinham regra.

   E A ORDEM DE FONTE NAO SALVAVA: esta folha carrega DEPOIS daquela, com a mesma
   especificidade — mas "a ultima vence" vale POR PROPRIEDADE, e o que a regra de
   ca NAO DECLARA continua vindo de la. `.fd` daqui declara `display`,
   `flex-direction`, `gap` e `padding`; o `align-items: flex-end` de la nunca foi
   sobrescrito. `.fd__r` daqui declara fonte, caixa e cor; o `text-align: center`
   de la, tambem nao. Resultado: o rotulo do fato saia centralizado e encostado a
   direita, com as duas folhas certas sozinhas.

   NENHUM LINTER PEGA: nao ha classe sem regra, nao ha palavra morta, nao ha
   orfao — e ganhar a ordem nao basta. Ficou INVISIVEL por sete tasks porque
   `.fd` so era emitido dentro da densidade que morreu em 13/08, e voltou no dia
   em que o fato passou a abrir a coluna. Medido na foto do primeiro dossie
   aberto, em 15/08/2026 — a medicao de DOM passava verde. */
.fato { display: flex; flex-direction: column; gap: 3px; padding: 14px 0 4px; }
.fato__r { font-family: var(--fm); font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
           text-transform: uppercase; color: var(--fg3); }
.fato__v { font-size: 15px; line-height: 1.4; }
.fato__v b { font-weight: 600; }

/* A TRIAGEM EM FILA MORREU em 13/08/2026 — com ela a acao "Triar os N", o
   contrato de teclado D/P/I/X, a densidade propria do dossie e a barra de
   progresso. O caminho de decidir muitos itens e a selecao multipla com acao
   em lote no Acervo, mais o botao de concordar com o escritorio em lote.
   As 17 regras que vestiam aquele modo sairam daqui em 14/08, e em 15/08 a T5
   apagou os dois modulos JS que ainda as emitiam. A lapide fica; a divida
   fechou, e o `checar_classes.mjs` ja nao lista pendente nenhum. */

/* ======================================================== o selo aberto ==
   A EXPLICACAO INTEIRA DA CONTRADICAO. Na linha do Acervo ele e uma marca
   discreta; aqui ele diz o que mudou, quando, e que o papel prevalece. */
/* O fundo proprio `--r2s` ja existia; o que faltava era a SOMBRA — ele e o
   outro singular da coluna, ao lado de `.bl--fato`. */
.selo-d { padding: 14px 15px; margin: 16px 0 0; border-radius: var(--r-md);
          background: var(--r2s); color: var(--r2t);
          box-shadow: var(--sh1), var(--brilho); }
.selo-d__c { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.selo-d__c > .ico { color: var(--r2t); }
.selo-d__t { font-size: 12.5px; line-height: 1.5; margin: 7px 0 11px; }
.selo-d__t b { font-weight: 650; }

/* ============================================= o botao do auto de infracao ==
   ⚠ **HISTORICO DE ONDE ELE JA MOROU, porque o proximo agente vai procurar por
   la:** nasceu no cabecalho (task 2, `bt--fant`), foi para o cluster da
   identidade na faixa 1 (mesmo dia, ainda `bt--fant`, so mudou de lado). NAS
   DUAS FORMAS ele competia com o `<h2>`/valor/trilho por espaco vertical e
   nunca tinha superficie propria de destaque — o proprio operador mediu
   "sem destaque e quase nao da pra saber que ele existe" mesmo DEPOIS de ganhar
   contorno.

   ⚠ **AGORA MORA NO RODAPE, CANTO INFERIOR ESQUERDO, E LEVA A TINTA.**
   *(20/08/2026, decisao do operador: "quero colocar ele no inferior esquerdo, e
   dar mais destaque para ele… simplificar o que e escrito nele".)* O rodape e
   onde o resto do sistema ja espera encontrar ACAO — e este e, hoje, o UNICO
   botao do rodape que funciona de verdade: todo o resto de `ACOES` nasce
   `disabled` (D-01/D-06/D-14 sem escritor). Dar a ele `bt--pri` nao e excecao a
   "a acao primaria e tinta" — e a lei sendo cumprida pela primeira vez neste
   rodape, porque so agora existe uma acao real para levar a tinta. O rotulo
   encolheu de "Baixar auto de infracao" para **"Baixar auto"**.
   ⚠ *(02/10/2026)* **Deixou de ser o UNICO que funciona:** *Indicar condutor*
   executa com o modulo de condutores — e fica `.bt`, sem tinta, pela razao
   escrita em `js/card/regua.js`: a tinta continua sendo do papel. */
/* ⚠ **A GEOMETRIA VEM DE `.bt`, e este bloco so guarda o que E do papel.**
   *(20/08/2026, mesma decisao.)* Ele trazia `min-height: 40px`, `padding:
   9px 16px`, `font-size: 13px` e `font-weight: 600` — quatro sobrescritas que
   o faziam **o maior controle do card**, num rodape fixo, em tinta cheia. O
   destaque que o operador pediu em 20/08 continua inteiro e vem de onde
   sempre veio: `bt--pri`, o icone e a ponta esquerda. */
.mod__pap { gap: var(--e3); flex: none; }
.mod__pap .ico { flex: none; }
.mod__pap b { font-family: var(--fm); font-size: 11px; font-weight: 500;
              color: color-mix(in srgb, var(--acao-fg) 68%, transparent); }
.mod__pap[disabled] b { color: var(--fg4); }

/* ============================================================== parecer ==
   A CASA DA RECOMENDACAO DO ESCRITORIO, na calha (`card/regua.js:parecer`). O
   parecer e real ou nao existe — o selo de demonstracao era do prototipo, e
   saiu com ele. *(Este comentario dizia "desenho proprio que diz que e
   demonstracao" ate 13/10/2026.)* Na calha a casa herda a chapa das outras
   (`.mod__tri > .par`, no topo desta folha); `.par` sozinho e o desenho de
   fora dela. */
.par { padding: 12px 20px; border-bottom: 1px solid var(--lin); background: var(--sup2); }
.par__c { display: flex; align-items: center; gap: 9px; }
.par__t { font-size: 12.5px; line-height: 1.5; color: var(--fg); margin-top: 6px; }
.par__t b { font-weight: 650; }
/* ⚠ O PARECER EM DESTAQUE — `par--rec`, so na casa COM parecer (13/10/2026,
   task 3 de `features/escritorio.md`, R38: "quando tem um parecer de escritorio,
   tem que aparecer com mais destaque"). NO MESMO LUGAR da calha — a ordem
   *status · relogio · recomendacao · consequencia* e lei —, e o destaque e por
   tres canais que o DS ja tem: UM DEGRAU de elevacao (`--sh1`, o singular, onde
   as outras casas sao `--sh0`), um FIO DE TINTA a esquerda (`--acao`, a mesma
   do botao recomendado) e a recomendacao em CORPO MAIOR.
   ⚠ NADA DE VERMELHO, AMBAR OU VERDE (sao do prazo), NEM LIME, `--b600` OU
   CIANO (`regras/interface.md`). O fio e a tinta da acao: ele liga o bloco ao
   botao que leva a mesma tinta no rodape.
   ⚠ O FIO E `box-shadow` INSET, NAO `border-left`: a borda de 1 px da chapa
   continua inteira em volta, e trocar so a esquerda por 3 px deslocaria o texto
   2 px para a direita em relacao as casas vizinhas. */
.mod__tri > .par.par--rec {
  box-shadow: inset 3px 0 0 var(--acao), var(--sh1), var(--brilho);
}
.par--rec .par__t { font-size: 15px; line-height: 1.35; }
.par--rec .par__t b { font-weight: 650; }
.par__s { font-size: 11px; line-height: 1.45; color: var(--fg3); margin-top: 6px; }
.par--fora, .par--vazio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
                          font-size: 12.5px; color: var(--fg2); }
.par--fora b { color: var(--fg); font-weight: 600; }
/* O PEDIDO AO ESCRITÓRIO, dentro da casa do parecer (09/10/2026,
   `card/escritorio.js:pedido`). UM bloco com a observação dentro, e ele ocupa a
   linha inteira nas casas `flex` (`.par--vazio`, `.par--fora`) — sem isso a
   frase e a observação se espalhariam entre a cabeça e o texto da casa. */
.par__ped { flex-basis: 100%; margin-top: var(--e3); font-size: 12px; line-height: 1.45;
            color: var(--fg2); }
.par__ped p { margin: 0; }
.par__ped b { color: var(--fg); font-weight: 600; }

/* =============================================================== regua ===
   O RODAPE EMPILHA: o painel de indicar (quando aberto), a faixa do parecer
   (com o par do escritorio, desde 13/10/2026) e a fileira de acao. O parecer
   INTEIRO saiu daqui para a calha em 18/08/2026; o que voltou e o resumo de uma
   linha. O rodape do modal ja e `display:flex` na casca; aqui ele vira coluna.
   *(Dizia "duas faixas: o parecer em cima, a acao embaixo" ate 13/10/2026.)* */
/* ⚠ **O RODAPE PASSA A LANCAR SOMBRA PARA CIMA, e ele era a ULTIMA superficie
   chapada do card.** *(20/08/2026, decisao do operador: "melhore o rodape e
   cabecalho".)* Medido antes: `box-shadow: none`, `--sup2`, e um fio de 1 px
   separando-o de **495 px de conteudo que rolam por baixo dele**. Cabecalho e
   rodape sao os dois instrumentos fixos do card; o de cima ja tinha elevacao e o
   de baixo nao tinha nenhuma, entao o corpo parecia terminar no rodape em vez de
   passar sob ele.

   ⚠ **A SOMBRA E `--sh-cima`, TOKEN DA PALETA — a `--sh1` com o `y` negado.**
   Ela nasceu em `base.css` nesta data, ao lado das outras quatro, e nao aqui:
   nivel de elevacao escondido dentro do componente e o mesmo defeito do
   `z-index` literal, que este projeto ja pagou quatro vezes.

   ⚠ **`position: relative` E OBRIGATORIO PARA A SOMBRA EXISTIR.** `.mod__rod` e
   `flex: none` sem posicionamento; sem contexto proprio ela pinta ATRAS do
   `.mod__b`, que tem fundo, e o efeito e exatamente nenhum — sem erro e sem
   sintoma, que e a assinatura de sempre. */
.mod__rod--regua { flex-direction: column; align-items: stretch; gap: 0; padding: 0;
                   position: relative; z-index: 1;
                   box-shadow: var(--sh-cima), var(--brilho); }
/* ⚠ **UMA ALTURA SO NA FILEIRA, E ELA E A DO DS — 32 px, nao 40.**
   *(20/08/2026, segunda correcao do mesmo dia, decisao do operador olhando a
   tela: "os botoes do rodape ficaram gordos, e ocupa grande parte da tela".)*
   A fileira tinha tres alturas (40/26/26) e a primeira correcao emparelhou
   todas em **40**, puxando pelo mais alto. Errado: 40 nao e degrau do DS —
   `.bt` e **32** e `.bt--peq` e 26, e mais nada. Puxar pelo maior tornou a
   fileira inteira mais pesada que qualquer outra do produto para consertar
   um desalinhamento; **emparelhar por baixo, no degrau que existe, conserta
   o mesmo defeito e devolve 8 px de altura ao rodape.**
   ⚠ **A REGRA ESCOPADA SUMIU JUNTO:** com os tres em `.bt` puro nao ha o que
   emparelhar, e regra que nao muda nada e regra morta. O que garante o alvo
   de dedo continua sendo `#mod .bt { min-height: 44px }` no bloco de toque.
   ⚠ **E O DESTAQUE DO PAPEL DO ORGAO NAO DEPENDIA DA ALTURA:** ele e o unico
   `bt--pri` da tela (tinta `#15141A`), o unico com icone e o primeiro da
   esquerda. Tres canais de enfase, nenhum deles tamanho. */
.regua__ac { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 20px; }
.regua__ac .md { min-width: 0; }
/* o grupo de acao encosta a direita e quebra DENTRO de si — nunca deixa um
   botao orfao na esquerda da linha de baixo */
.regua__bt { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center;
             justify-content: flex-end; gap: 10px; }
/* O SELO DO BOTÃO RECOMENDADO PELO ESCRITÓRIO (09/10/2026) — dentro do botão
   em tinta, na cor da contagem de `.bt--pri b`: ênfase sem um segundo matiz. */
.regua__rec { font-size: 11px; font-weight: 500;
              color: color-mix(in srgb, var(--acao-fg) 68%, transparent); }
/* A FAIXA DO PARECER, logo acima da fileira (13/10/2026, R38 —
   `card/escritorio.js:faixa`). UMA LINHA, sempre, tambem a 375 px: o texto
   corta com reticencia e *ver parecer* fica inteiro na ponta. Ela e resumo, nao
   o parecer — por isso `--fg2`, com so a recomendacao em `--fg`. Sem fundo nem
   fio proprio: ela e a primeira linha da mesma chapa do rodape. */
/* ⚠ `width: 100%` NAO E ENFEITE: abaixo de 768 px o rodape e coluna com
   `flex-wrap: wrap` (`.mod__rod`, no bloco do telefone), e numa coluna que quebra
   a largura da linha e a do item mais largo — o texto `nowrap` desta faixa
   esticava o rodape INTEIRO para 458 px a 375, e *ver parecer* e *Fechar*
   saiam da tela. Medido em 13/10/2026; sem a faixa o rodape volta a 375. */
.regua__par { display: flex; align-items: baseline; gap: var(--e3); margin: 0;
              width: 100%; padding: 10px 20px 0; font-size: 12px; color: var(--fg2); }
.regua__par > span { min-width: 0; overflow: hidden; text-overflow: ellipsis;
                     white-space: nowrap; }
.regua__par b { color: var(--fg); font-weight: 650; }
/* *ver parecer* — botao com cara de link: e navegacao dentro do card (rola ate
   a casa da calha), nao acao sobre o auto, e nao disputa com a fileira de
   botoes logo abaixo. */
.regua__ver { flex: none; margin-left: auto; padding: 0; border: none; background: none;
              font: inherit; color: var(--fg); text-decoration: underline;
              text-underline-offset: 2px; cursor: pointer; }

/* a conta crua, a um clique — para quem for montar defesa */
.dec { margin-top: 12px; }
.dec > summary { font-size: 11.5px; color: var(--fg3); cursor: pointer; padding: 4px 0;
                 list-style: none; display: flex; align-items: center; gap: 6px; }
.dec > summary::-webkit-details-marker { display: none; }
.dec > summary::before { content: '▸'; font-size: 10px; }
.dec[open] > summary::before { content: '▾'; }
.dec > summary:hover { color: var(--fg2); }
.dec > *:not(summary) { margin-top: 10px; }

/* ------------------------------------------------------- a exposicao R$ --
   O TERCEIRO NUMERO DE DINHEIRO, e o unico lugar do produto onde ele aparece
   junto com a fila dos vencidos. NUNCA ENTRA EM SOMA — sem essa trava ele vira
   um terceiro total conflitando com `valor_devido`. */
/* ⚠ O NOME DO NUMERO, e ele NAO e `.rot`. A casa da calha ja abre com
   `SE NINGUEM FIZER NADA` em mono maiusculo; repetir a forma aqui punha dois
   cabecalhos empilhados, o segundo competindo com o primeiro. Este nomeia o
   VALOR que vem embaixo — texto de destaque, herdando `--r2t` da caixa. */
.exp__r { display: block; font-size: 12px; font-weight: 600; margin-bottom: var(--e3); }
/* ⚠ DENTRO DA CAIXA DE AVISO, O TEXTO PEQUENO HERDA A COR DA CAIXA. `.sm` e
   `--fg3`, calibrado contra `--sup`/`--sup2`; sobre `--r2s` ele media **4,44:1**
   e REPROVAVA AA por 0,06 (piso 4,5). A caixa ja traz `--r2t` como cor propria,
   e o corpo menor basta para separar a nota do argumento — clarear a cor era o
   canal errado. */
.tri__b--exp .sm { color: inherit; }

.tri__b--exp { padding: 12px 13px; margin: 0 -2px; border-radius: var(--r-md);
               background: var(--r1s); color: var(--r1t); }
.tri__b--exp .rot { color: var(--r1t); }
.tri__b--exp .tri__p { color: color-mix(in srgb, var(--r1t) 88%, var(--fg2)); }
.exp { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.exp__de { font-size: 13px; text-decoration: line-through; opacity: .72; }
.exp__para { font-size: 19px; font-weight: 650; letter-spacing: -.02em; }
.exp__s { align-self: center; opacity: .7; }

/* o botao de confirmar prazo mora na terceira linha da grade de `.pzs__l` */
.pzs__a { grid-column: 1 / -1; margin-top: 2px; }

/* ================================= AS CINCO LINHAS RECOLHIDAS (T6) ========
   *O caso* · *O papel* · *A linha do tempo* · *Os documentos* · *O que foi
   feito*. Treze blocos do prototipo viraram cinco linhas nomeadas, e a
   CONTAGEM no rotulo e o que permite decidir se vale abrir ANTES de abrir.

   ⚠ ELAS SAO `<details>` NATIVOS, e o estado e do NAVEGADOR — nao ha mecanismo
   de recolher em JS. `.dec` ja documentava a mesma escolha para a conta crua, e
   `telas.css` para o resumo da Home. Um segundo dono do mesmo estado e como se
   perde a sincronia entre o `▸` desenhado e o bloco aberto.

   ⚠ ELAS TAMBEM SAO `.bl`, e e de proposito: bloco aberto e linha recolhida
   dividem o MESMO ritmo vertical e o mesmo fio de separacao. Sem isso a metade
   de baixo do card lê como uma lista de outra tela colada embaixo.

   O `▸`/`▾` e o mesmo de `.dec`, em corpo maior: aqui a linha e navegacao
   primaria do card, la e a prova de uma conta. */
/* ⚠ O `summary` SANGRA ATE A BORDA DO CARTAO: com `.bl` virando cartao com
   `padding: 16px 17px`, um `summary` de largura interna deixaria a area
   clicavel menor que a peca, e o cursor mudaria de forma no meio do caminho.
   As margens negativas o devolvem a caixa inteira; o `padding` reposto por
   dentro mantem o texto no mesmo lugar. */
.lrec > summary {
  display: flex; align-items: baseline; gap: var(--e3);
  cursor: pointer; list-style: none;
  /* ⚠ A SANGRIA SE DERIVA DO PADDING DA PECA, nunca se digita duas vezes: o
     `summary` tem de cobrir exatamente a caixa de `.bl`, e dois literais
     independentes divergem no dia em que um deles mudar — e ele mudou (o
     `16px 17px` virou `var(--e5)` em 20/08). E a lei que as pecas concentricas
     do trilho ja escrevem: derive de um eixo declarado. */
  margin: calc(var(--e5) * -1); padding: var(--e5);
  border-radius: var(--r-md);
}
.lrec[open] > summary { margin-bottom: 0; border-radius: var(--r-md) var(--r-md) 0 0; }
.lrec > summary::-webkit-details-marker { display: none; }
.lrec > summary::before { content: '▸'; font-size: 11px; color: var(--fg3); }
.lrec[open] > summary::before { content: '▾'; }
/* ⚠ `--fg3`, NAO `--fg4` — e e a MESMA correcao que o seletor e o trilho ja
   receberam em 18/08, aplicada ao lugar que ficou de fora. A nota daquela
   correcao (mais abaixo nesta folha) e literal: no tema escuro `--fg4` mede
   **3,36–3,59:1** contra a superficie, e o DS o declara para GRAFISMO, onde o
   piso e 3:1. Medido aqui: **3,59:1** a 11,5 px — reprova AA.

   E esta contagem nao e grafismo: e o `12 pecas` / `6 eventos` / `nenhum
   anexado` que a lei nomeia como **o que permite decidir se vale abrir ANTES de
   abrir**. Texto que decide um gesto tem de passar como texto. Com `--fg3` vai a
   5,04:1. */
.lrec__n { margin-left: auto; font-size: 11.5px; color: var(--fg3); }
/* O corpo so ganha respiro quando existe: `+ margin` no `summary` empurraria a
   linha fechada tambem, e cinco linhas fechadas com folga de aberta e o
   pergaminho que esta estrutura existe para nao ser. */
.lrec > *:not(summary) { margin-top: var(--e4); }

/* ------------------------------------------------------------------ lk --
   O CAMPO QUE ABRE O RETRATO — placa, empresa e transportadora.

   ⚠ **RESSUSCITADO DE `OLD_PROTÓTIPO/prototipo3/css/modal.css:34-36`, COM O NOME DE LA.**
   Medido nos dois sentidos do diff antes da primeira linha: ZERO ocorrencias de
   `.lk` em todo o `mvp/` — nenhuma regra e nenhum emissor. Nome novo para a
   mesma coisa e o modo de falha que este projeto ja pagou tres vezes
   (o `z-index` literal, o `.trj*`, o `.sel`).

   ⚠ **ELE E UM `<button>`**, e por isso precisa herdar a tipografia do `<dd>`
   em volta: o reset de `base.css:333` da `font: inherit`, mas o alinhamento e a
   quebra sao desta peca. `text-align: left` porque `<button>` centraliza por
   padrao, e um nome de transportadora de 40 caracteres centralizado dentro de
   um `<dd>` de rotulo-e-valor sai do prumo da coluna. */
.lk {
  display: inline; padding: 0; text-align: left;
  color: var(--b600); font-weight: 500;
  border-bottom: 1px solid var(--b200);
}
.lk b { font-weight: 600; }
html[data-tema="escuro"] .lk { color: var(--b500); }

/* ------------------------------------------------------ campos de um caso -
   ROTULO E VALOR, em duas colunas. `<dl>` de verdade: a relacao entre os dois e
   semantica, e um leitor de tela anuncia "Empresa: X" em vez de duas celulas
   soltas.

   Os 168 px sao o maior rotulo em uso (`Aferição do INMETRO até`, 158 px em
   12,5) mais a folga — medido na fonte e no corpo em que a peca renderiza, como
   manda a lei da cota. */
.cmp { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 7px var(--e5);
       font-size: 12.5px; align-items: baseline; }
.cmp dt { color: var(--fg3); }
.cmp dd { color: var(--fg); min-width: 0; line-height: 1.45; }

/* O SUBCABECALHO DENTRO DE UM BLOCO — *Financeiro*, *As pecas*, *O que o agente
   escreveu*. Modificador de `.bl__c` e nao margem digitada no JS: medida
   desenhada sai de token, sempre. */
.bl__c--sub { margin-top: var(--e5); }

/* ------------------------------------------------------------- diversos - */
.tb--fixa { min-width: 380px; }
.tb tfoot td { height: 38px; padding: 0 12px; font-weight: 600; border-top: 1px solid var(--lin2);
               background: var(--sup2); color: var(--fg); font-size: 12px; }
.tb tbody tr.exc-l td { background: var(--r2s); }

/* ============================================ o cabecalho de identidade ===
   O TITULO E O VALOR NA MESMA LINHA. Antes o valor morava numa terceira faixa,
   ao lado do status e da fase — tres coisas de naturezas diferentes disputando
   uma linha, e o dinheiro perdendo para duas palavras de estado. Aqui ele fica
   colado no que ele mede: o tipo da infracao. */
.mod__id { display: flex; align-items: flex-start; gap: var(--e5); margin-top: var(--e3); }
.mod__id .mod__t { margin-top: 0; flex: 1; min-width: 0; }
.mod__vc { flex: none; align-items: flex-end; text-align: right; }
.mod__vc .mod__c { margin-top: 2px; }

/* ======================================== as etiquetas do cabecalho ======
   (08/10/2026, `js/card/etiquetas.js`; NA LINHA DA IDENTIDADE desde 09/10/2026,
   decisao do operador.) Territorio · placa · auto · ETIQUETAS · *+ Etiqueta*,
   e a navegacao e o `×` na ponta — lembrete atras de uma aba nao lembra
   ninguem (`regras/card.md`). `.mod__etq` e a casa (`[data-etq-casa]`), e ela
   existe sempre: o *+ Etiqueta* esta nela mesmo sem etiqueta nenhuma.
   ⚠ ELA E QUEM CEDE NA LINHA (`flex-shrink: 40`): com muitas etiquetas os chips
   quebram DENTRO dela, em mais de uma fileira, e o auto, a placa, a navegacao e
   o `×` ficam onde estao. A razao do encolhimento e o tamanho: o encolher do
   flex e proporcional a base, e sem o fator o numero do auto (que corta com
   `title`) cederia junto.
   ⚠ OS CHIPS TEM A ALTURA DA PLACA GRANDE (21 px) — e o destaque que o
   operador pediu; com os 19 da `.tag` eles liam como selo menor que a placa ao
   lado. O seletor e um DIALOGO por cima do card (`.etq-dlg`, abaixo), e por
   isso nada aqui empurra `.mod__b`. */
.mod__etq {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2);
  flex: 0 40 auto; min-width: 0;
}
.mod__etq .etq { height: 21px; padding: 0 8px; font-size: 11.5px; }
/* o motivo do botao desabilitado, na MESMA linha e em texto visivel — o
   `margin-top` de `.mod__c` e de quando ele mora embaixo do valor */
.mod__etq .mod__c { margin-top: 0; }

/* O *+ ETIQUETA* — um chip TRACEJADO, nao um botao do DS: na linha da
   identidade, entre chips e placa, um `.bt` de 26 px com fundo e sombra era a
   peca mais pesada do cabecalho, e o gesto e secundario. O tracejado e a forma
   comum de *"aqui cabe mais um"*; o desabilitado (sem `decidir`) fica visivel,
   com o motivo ao lado em texto. */
.etq-add {
  display: inline-flex; align-items: center; height: 21px; padding: 0 8px; flex: none;
  border: 1px dashed var(--lin3); border-radius: var(--r-xs);
  font-size: 11.5px; font-weight: 500; color: var(--fg2); white-space: nowrap;
  transition: background var(--t1) var(--ease), color var(--t1) var(--ease),
              border-color var(--t1) var(--ease);
}
.etq-add[disabled] { opacity: .5; cursor: not-allowed; }
@media (hover: hover) {
  .etq-add:not([disabled]):hover { background: var(--sup2); color: var(--fg); border-color: var(--fg3); }
}

/* =============================================== o seletor de status =====
   O GATILHO E O PROPRIO STATUS — padrao do JIRA. Ele e a unica superficie do
   cabecalho que muda o item, e por isso e a unica que reage ao cursor:
   `repouso = leitura, resposta = acao`. */
/* ⚠ SEM `margin-top`: ele mora DENTRO da linha de identidade desde 18/08, e ali
   quem espaça é o `gap` da `.linha`. A margem de 10 px era da época em que ele
   era uma faixa própria — mantida, ela abriria um degrau no meio de uma fileira
   alinhada por `center`. */
.mudar { position: relative; }
.mudar__g {
  display: inline-flex; align-items: center; gap: var(--e3);
  min-height: 32px; padding: 5px 10px 5px 11px;
  border: 1px solid var(--lin2); border-radius: var(--r-md);
  font-size: 12.5px; font-weight: 550; cursor: pointer;
  /* `background-color` e nao o atalho `background`, aqui e na `transition`: e a
     forma mais precisa, e o atalho carregando `var()` nao interpola.
     ⚠ **O RESTO DO DS USA O ATALHO, e isso NAO e defeito** — o caso de troca de
     tema tem dono proprio, `html.trocando` em `movimento.css`, que declara as
     longhands com `!important` durante a troca. Quem uniformizar isto um dia
     comeca por la, nao por aqui. */
  background-color: var(--sup);
  transition: background-color calc(var(--t1) * var(--mo)) var(--suave),
              border-color calc(var(--t1) * var(--mo)) var(--suave);
}
/* ⚠ O HOVER FALTAVA, e a folha AFIRMAVA que ele existia. O comentario acima diz
   que este e o unico controle do cabecalho que "reage ao cursor", e a lei do DS
   e literal: *"repouso = leitura, resposta = acao; so a acionavel reage ao
   cursor"*. A `transition` de `background-color` e `border-color` estava
   declarada desde 18/08 e nao animava NADA — zero regras de `:hover`, `:active`
   ou `[aria-expanded]` mexiam nessas duas propriedades em toda a folha.

   Transicao sem estado de destino nao falha: ela so deixa o unico botao que
   MUDA O AUTO com o mesmo comportamento de um paragrafo. Sem o guarda de
   `hover:hover` o dedo deixaria o gatilho preso aceso depois do toque. */
.mudar__g[aria-expanded="true"] { background-color: var(--sup2); border-color: var(--lin3); }
.mudar__g[disabled] { opacity: .62; cursor: default; }
.mudar__gd { font-style: normal; font-weight: 400; color: var(--fg3); }
/* A MARCA DO ESCRITORIO NO GATILHO, NUMA SEGUNDA LINHA (13/10/2026 —
   `card/status.js:gatilho`). Medido na calha a 1280 px: o gatilho tem 256 px e
   *"Aguardando execucao"* + *"com o escritorio"* pedem ~300; ao lado, o status
   saia cortado (*"Aguardando exe…"*) e a marca quebrava em duas linhas. Aqui o
   no, o status e a seta ficam na primeira linha, e a marca desce alinhada ao
   texto do status (o recuo e o no de 9 px mais o `gap`). O DESFECHO NAO MUDA:
   ele e curto e continua ao lado. */
.mudar__g--marca { flex-wrap: wrap; row-gap: 0; }
.mudar__g--marca > .mudar__gt { flex: none; }
.mudar__g--marca > .ico { order: 2; margin-left: auto; }
.mudar__g--marca > .mudar__gd { order: 3; flex-basis: 100%; padding-left: calc(9px + var(--e3));
                                text-align: left; line-height: 1.3; }
.mudar__g > .ico { color: var(--fg3); margin-left: 1px; }
.mudar__g .bola { flex: none; }
/* O status pode ser longo (`aguardando execucao`) e o gatilho vive num
   cabecalho que ja disputa espaco com a navegacao: ele encolhe com reticencia
   em vez de empurrar o cartao. */
.mudar__gt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* O PAINEL NAO USA `menu.js`, e a razao e dura: `#menus` e `--z-menu: 90` e o
   modal e `--z-mod: 110`, entao o suspenso abriria ATRAS do card — o defeito de
   15/08 que a lei do `z-index` de token nomeia. Dentro do `.mod__cx` ele nao
   precisa de token global: `--z-sel` ja e o nivel de sobreposicao LOCAL.

   ⚠ **A SEGUNDA METADE DESTE COMENTARIO ERA FALSA, E A MENTIRA CUSTOU UM BUG
   (26/08/2026).** Ela dizia que *"o recorte de `.mod__cx { overflow: hidden }` o
   mantem dentro do cartao"*. Quem recorta e `.mod__b` — a caixa de ROLAGEM do
   corpo (`componentes.css: overflow-y: auto`) —, e caixa de rolagem **TESOURA**
   o que e absoluto dentro dela: nao contem, corta. **Medido em janela de 720 px:
   `.mod__b` termina em 626 e o painel ia a 671 — 45 px decepados**, em cima da
   ultima opcao da valvula. O clique ali caia FORA de `[data-mudar]`, no rodape
   por baixo, e o ouvinte de "clicar fora" fechava o painel inteiro: nenhum erro,
   nenhum console, nenhum `4xx`.

   ⚠ **`z-index` NAO RESOLVE *ISTO*, e tentar e perder tempo.** Recorte de
   `overflow` nao se vence com pintura — e ainda por cima `.mod__tri` e
   `position: sticky`, logo um contexto de empilhamento proprio: o `--z-sel: 6`
   daqui esta preso la dentro e nunca disputa com o `z-index: 1` de
   `.mod__rod--regua`.

   ⚠ **NAO LEIA ISTO COMO *"z-index nunca importa aqui"* — ELE IMPORTA, UM NIVEL
   ACIMA (01/09/2026).** O paragrafo trata do RECORTE, e continua inteiro. Mas a
   frase *"preso la dentro"* e tambem o diagnostico de um SEGUNDO defeito, de
   PINTURA: o comentario do feed pintava por cima deste painel, e a correcao foi
   pôr `z-index` em `.mod__tri` — a caixa que cria o contexto —, nunca aqui.
   Racional medido no bloco de `.mod__tri`, no alto do arquivo. **Aumentar o
   numero DESTA linha continua sem efeito nenhum; foi medido com `10000000`.**

   ⚠ **QUEM RESOLVE E `couber()`, em `card/status.js`**, que encolhe o teto para
   a folga real ate a base de `.mod__b`. **O `max-height` abaixo continua sendo o
   dono do numero** — o JS so aperta quando nao cabe, e le o valor computado
   daqui (inclusive os `52vh` do telefone, mais abaixo). Quem mexer nesses
   numeros nao precisa mexer no JS; quem mexer na ESTRUTURA do card confere se
   `raiz.closest('.mod__b')` ainda acha a caixa. */
.mudar__p {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: var(--z-sel);
  width: min(440px, calc(100vw - 56px));
  max-height: 46vh; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--e2);
  background-color: var(--sup); border: 1px solid var(--lin2); border-radius: var(--r-lg);
  box-shadow: var(--sh3), var(--brilho);
  animation: mudarEntra calc(var(--t1) * var(--mo)) var(--suave) backwards;
}
/* ⚠ NA CALHA O PAINEL CRESCE PARA A ESQUERDA, NUNCA PARA A DIREITA. O
   seletor mudou de casa em 19/08/2026 (do cabeçalho para `.mod__tri`), e
   `.mod__tri` é a coluna mais à DIREITA do grid, com 320 px — `left: 0` mais
   `min(440px, …)` empurraria o painel para fora de `.mod__cx`, que é
   `overflow: hidden`: metade dele sumiria, cortada, sem erro nenhum. */
.mod__tri .mudar__p { left: auto; right: 0; }
/* ⚠ `backwards`, NUNCA `forwards` com `opacity:0` no elemento: se a animacao nao
   rodar (aba oculta, renderizador ocupado), o estado de REPOUSO tem de ser o
   visivel — e aqui o repouso e um painel de decisao. */
@keyframes mudarEntra { from { opacity: 0; transform: translateY(-5px); } }

.mudar__s { padding: var(--e1) 0; }
.mudar__s + .mudar__s { margin-top: var(--e1); border-top: 1px solid var(--lin); }
/* ⚠ `--fg3` E NAO `--fg4` NAS QUATRO PECAS DE TEXTO DO SELETOR E DO TRILHO.
   Medido em 18/08 no tema escuro: `--fg4` da 3,36–3,59:1 contra a superficie, e
   o DS o declara para GRAFISMO — `base.css` e literal ao dizer que ele passa
   3:1, que e o piso de elemento nao textual. Etiqueta de secao, status de
   destino, data de evento e nome de fase sao texto que o operador LE. `--fg3`
   poe as quatro em 5,04:1. */
.mudar__c {
  font-family: var(--fm); font-size: 10px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--fg3); padding: 5px 9px;
}
.mudar__l { list-style: none; display: flex; flex-direction: column; }
.mudar__o {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 9px; width: 100%;
  padding: 8px 9px; border-radius: var(--r-sm); text-align: left; cursor: pointer;
  transition: background-color calc(var(--t1) * var(--mo)) var(--suave);
}
.mudar__o .bola { justify-self: start; }
.mudar__ot { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mudar__ot b { font-size: 12.5px; font-weight: 550; }
.mudar__ot i { font-style: normal; font-size: 11px; color: var(--fg3); line-height: 1.35; }
.mudar__od {
  font-family: var(--fm); font-size: 10px; color: var(--fg3);
  white-space: nowrap; align-self: center;
}

/* A VALVULA — recolhida e VISUALMENTE SUBORDINADA, como a lei manda. A
   subordinacao e a superficie recuada mais o rotulo em `--fg3`: ela nao pode
   ler como um segundo grupo de igual peso, senao a primeira camada — que e o
   caminho certo — perde a preferencia que o desenho lhe da. */
.mudar__s--v { margin: var(--e1) calc(var(--e2) * -1) calc(var(--e2) * -1);
               padding: var(--e1) var(--e2) var(--e2);
               background-color: var(--sup2); border-radius: 0 0 var(--r-md) var(--r-md); }
.mudar__vg {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 8px 9px; border-radius: var(--r-sm);
  font-size: 12px; color: var(--fg3); cursor: pointer;
}
.mudar__vg > .ico {
  color: var(--fg4);
  transition: transform calc(var(--t1) * var(--mo)) var(--suave);
}
.mudar__vg[aria-expanded="true"] > .ico { transform: rotate(90deg); }
.mudar__pq { font-size: 11.5px; color: var(--fg2); line-height: 1.5; padding: 2px 9px 8px; }
.mudar__pq b { font-weight: 650; }

/* A RECUSA DO SERVIDOR, e o motivo do seletor desabilitado sem `decidir`.
   ⚠ O FORMULARIO DO MOTIVO SAIU EM 01/09/2026, e com ele `.mudar__m`,
   `.mudar__mt`, `.mudar__ml`, `.mudar__in` e `.mudar__ma`: a valvula passou a
   gravar no primeiro clique, sem confirmacao e sem campo de texto. */
.mudar__er { font-size: 11.5px; color: var(--r1t); line-height: 1.45; }


/* ==================================================== o trajeto do auto ===
   A LINHA DO TEMPO NO TOPO, HORIZONTAL E SEMPRE A VISTA. Ela sangra ate as
   bordas do cabecalho e assenta na superficie recuada: o trilho e o CHAO do
   cartao, e o que esta acima dele e a identidade.

   ⚠ ELE ROLA DENTRO DE SI, e a pagina nunca rola horizontalmente por causa
   dele. Medido em 18/08: 4,76 eventos por item em media, mas o MAXIMO e 19 —
   22 nos, 2.376 px, num contêiner de ~1.020. */
/* ⚠ **A FAIXA CINZA DO TRILHO MORREU, e ela era a MAIOR SUPERFICIE CHAPADA
   do card.** *(20/08/2026, decisao do operador: "acho o card meio morto em si,
   com excecao do resumo... quero uma mudanca expressiva".)*

   ⚠ **ELA COMIA METADE DO CAMPO DE COR QUE TINHA ACABADO DE NASCER, e isso
   e medido, nao impressao:** o cabecalho mede **205 px** e o trilho media
   **100** deles — **49%** —, pintados de `--sup2` **por cima** do verniz de
   territorio que `.mod__cab--terr` desenha. O cabecalho lia como um verniz fino
   de 105 px seguido de uma laje cinza de 1.042 x 100, sem sombra, sem borda e
   sem cartao: a lei *"cor precisa de area"* estava cumprida no codigo e
   desfeita na tela, pelo elemento de baixo.

   ⚠ **E O QUE FICA POR CIMA DO CAMPO E A PROPRIA MARCA.** No · trajeto ·
   destino e a gramatica grafica do produto — a lei diz que *"o fundo carrega a
   linguagem grafica da marca"* —, e o trilho E o trajeto daquele auto. Desenha-
   lo direto sobre o territorio faz o cabecalho ser UMA superficie continua com
   a marca em cima, em vez de duas faixas empilhadas disputando o olho.

   ⚠ **O FIO FICA.** Ele nao e decoracao: separa a identidade (quem e o auto)
   do trajeto (onde ele esta) DENTRO da mesma superficie. O que morreu foi o
   fundo, nunca a divisao — que e exatamente o erro inverso que a calha cometeu
   horas atras, quando ganhou fio e continuou plana.

   ⚠ ELE ROLA DENTRO DE SI, e a pagina nunca rola horizontalmente por causa
   dele. Medido em 18/08: 4,76 eventos por item em media, mas o MAXIMO e 19 —
   22 nos, 2.376 px, num contêiner de ~1.020. */
.trilho {
  margin: var(--e4) -20px -14px; padding: 10px 20px 12px;
  border-top: 1px solid var(--lin); background-color: transparent;
  overflow-x: auto; overscroll-behavior-x: contain;
}
.trilho__l {
  /* O EIXO DECLARADO. No, linha e halo tem larguras diferentes (9, 1,5 e 17 px)
     e cada um precisa do seu proprio recuo para o MESMO centro — foi assim que
     um halo ficou 4 px fora do no, em 15/08. As tres pecas concentricas saem
     destas medidas, e nenhuma e digitada duas vezes. */
  --trilho-r1: 14px;      /* a altura da linha da data, fixa: e ela que ancora o eixo */
  --trilho-gap: 5px;
  --trilho-eixo: 11px;    /* o centro da faixa de 22 px que segura o marcador */
  /* ⚠ 140 E DERIVADO DA PILULA MAIS LARGA QUE PODE EXISTIR, nao escolhido.
     O no tem largura FIXA — e ele precisa ter, porque o segmento `::before`
     alcanca o centro do vizinho por `left:-50%`, que so cai no lugar certo se
     todos os nos medirem o mesmo. Entao a largura tem de caber o pior caso.

     Medido em 18/08 na fonte real: o texto mais largo que `prazo.texto()` pode
     produzir e `órgão até DD/MM` — 114 px de texto + 17 px de recuo da pilula =
     **131 px**. E ele e TETO, nao amostra: a data e sempre `DD/MM`, entao nao
     existe conteudo maior. Os outros textos sao menores (`vence hoje` 81,
     `365 dias` 69, `−12 dias` 67).

     COM OS 124 ANTIGOS A PILULA SANGRAVA 4,5 px PARA CADA LADO e as vizinhas se
     sobrepunham 9 px — medido, e visivel na tela: os dois relogios do par
     `defesa + indicacao` viravam um borrao so. Nada falhava, porque `.trilho__n`
     nao recorta e o estouro so aparece quando DUAS janelas vivas caem no estado
     `vivo && dias < 0`. 140 poe 9 px de folga sobre o teto.

     ⚠ Quem mexer no texto de `prazo.texto()` remede este teto. */
  --trilho-larg: 140px;
  display: flex; align-items: flex-start; list-style: none; min-width: min-content;
}
.trilho__n {
  position: relative; flex: none; width: var(--trilho-larg);
  display: grid; grid-template-rows: var(--trilho-r1) 22px auto auto;
  row-gap: var(--trilho-gap); justify-items: center; text-align: center;
}
/* O SEGMENTO QUE CHEGA. Um so por no, vindo do centro do anterior — dois
   (`::before` e `::after`) desenhariam a mesma linha duas vezes e a emenda
   apareceria no tema escuro. */
.trilho__n::before {
  content: ''; position: absolute; left: -50%; right: 50%;
  top: calc(var(--trilho-r1) + var(--trilho-gap) + var(--trilho-eixo) - .75px);
  border-top: 1.5px solid var(--lin2);
}
.trilho__n:first-child::before { display: none; }
/* O TRECHO ATE UM PRAZO E TRACEJADO, porque ele ainda NAO foi percorrido. E a
   mesma gramatica de `--no-tracejado` em `estado.css` — tracejado e a unica
   forma da familia que fala de borda e nao de preenchimento, e ali ela ja
   significa exatamente isto: nao aconteceu. Sem ela, passado e futuro tem o
   mesmo traco e o trilho afirma que o prazo ja passou.
   ⚠ `border-top` E NAO `height` + `background`: e o que permite trocar so o
   ESTILO do traco sem redeclarar cor, espessura nem o eixo. */
.trilho__n--fu::before { border-top-style: dashed; }

.trilho__q { font-family: var(--fm); font-size: 10px; color: var(--fg3); line-height: var(--trilho-r1); }
.trilho__b { display: grid; place-items: center; height: 22px; }
/* ⚠ **TODA MARCA DO TRILHO PINTA ACIMA DO SEGMENTO — as TRES, nao so a
   pilula.** A lei do `--z-no` ja estava escrita e **estava cumprida pela
   metade**: `.trilho__b .pz` levava o token, e o no do passado (`.trilho__s`) e
   o halo do agora (`.trilho__halo`) ficaram de fora. Medido em 20/08 no ar:
   **18 marcas com `z-index: auto` e `position: static`** contra um
   `.trilho__n::before` que e `position: absolute` — e descendente posicionado
   com `z-index: auto` pinta DEPOIS do conteudo em fluxo. O traco atravessava as
   bolinhas.

   ⚠ **O SELETOR E O FILHO DE `.trilho__b`, e nao a lista das tres classes**: a
   quarta marca que nascer entra sozinha. Nomear as tres seria repetir o mesmo
   defeito com um item a mais — foi assim que a pilula ficou certa sozinha
   enquanto as outras duas erravam, cada regra correta por si. */
.trilho__b > * { position: relative; z-index: var(--z-no); justify-self: center; }
/* ⚠ **DUAS LINHAS, E O RESTO NO `title`.** Medido em 18/08: o rotulo mais longo
   dos 15 tem 35 caracteres, e a 11 px ele pede 3 linhas em 124 px — o que
   engordava o cabecalho para 303 px de um cartao de 638, deixando o corpo com
   240 px para 659 de conteudo. Nenhuma informacao se perde: o rotulo inteiro
   esta no `title` do no e a lista completa continua na linha *A linha do tempo*.
   ⚠ E o `-webkit-` NAO E prefixo legado: `line-clamp` sem ele ainda nao e
   universal, e os tres declarados juntos sao o unico jeito que funciona hoje. */
.trilho__r {
  font-size: 11px; color: var(--fg2); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.trilho__f { font-size: 10px; color: var(--fg3); line-height: 1.3; }

/* O NO DO PASSADO: forma por `natureza`, NUNCA cor. Cor por natureza abriria um
   TERCEIRO eixo ao lado do prazo e do estado, e vermelho/ambar/verde pertencem
   exclusivamente ao prazo. Sao as mesmas tres formas de `.tl2__e--*`. */
.trilho__s {
  text-decoration: none; width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid currentColor; color: var(--fg3); background: var(--no-vazado);
}
/* O PASSADO RECUA. Ele e contexto, nao decisao: com o mesmo peso do presente,
   dezenove eventos competiam de igual para igual com o unico no em que o
   operador pode agir. */
.trilho__n--pas .trilho__r { color: var(--fg3); }
.trilho__n--gatilho .trilho__s    { background: var(--no-cheio); }
.trilho__n--status .trilho__s     { background: var(--no-vazado); }
.trilho__n--financeiro .trilho__s { background: var(--no-meio); }

/* O NO DE AGORA. O halo e a peca concentrica que a lei nomeia; `place-items:
   center` o mantem no eixo sem um unico `left` chutado. */
.trilho__halo {
  display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%;
  background-color: var(--sup); box-shadow: 0 0 0 1.5px var(--lin2);
}
.trilho__n--ag .trilho__r { color: var(--fg); font-weight: 600; }

/* O CHECKPOINT DE CHEGADA — o segundo dos tres donos do lime, e o unico caso em
   que o trajeto tem destino. Auto vivo NAO ganha lime: ele ainda nao chegou a
   lugar nenhum, e pintar o presente de destino seria cota falsa em cor. */
.trilho__n--fim .trilho__halo { background-color: var(--lime); box-shadow: none; }
.trilho__n--fim .bola { color: var(--lime-fg); }

/* ================================================== a regua e o rastro ====
   A FRASE DO RODAPE E VISIVEL, e substitui tres `title` que ninguem lia. */
.regua__nt {
  display: flex; gap: var(--e3); align-items: flex-start;
  padding: 0 20px 12px; font-size: 11.5px; color: var(--fg3); line-height: 1.45;
}
.regua__nt > .ico { color: var(--fg4); flex: none; margin-top: 1px; }

/* ---------------------------------------------- o painel de indicar condutor --
   (02/10/2026, o módulo de condutores — `card/indicar.js`.) ⚠ NO FLUXO DO
   RODAPÉ, ACIMA DA FILEIRA, E NUNCA ABSOLUTO — e sem `z-index`, porque no fluxo
   não há o que empilhar. O rodapé (`.mod__rod--regua`) está FORA de `.mod__b`:
   um painel absoluto abrindo para cima pintaria POR BAIXO de `.mod__tri`
   (`--z-sel`), e para baixo seria cortado pelo `overflow: hidden` de
   `.mod__cx`. No fluxo ele empurra `.mod__b` para cima, que encolhe e continua
   sendo o rolador do card.

   ⚠ O TETO É `34vh`, E É ELE QUE PROTEGE O CORPO DO CARD: o rodapé é fixo, e
   sem teto um painel de oito resultados comeria `.mod__b` inteiro. MEDIDO a
   1280×720 em 02/10/2026: rodapé + `.mod__b` somam ~397 px; o formulário de
   *nada achado* pede 246 px, e com `40vh` (288) o pior caso — oito resultados,
   ou o formulário com a recusa do CPF e a oferta do `409` — deixava `.mod__b`
   com ~109 px. Com `34vh` (245 px) o formulário cabe inteiro, `.mod__b` nunca
   fica abaixo de ~150 px, e o que passar do teto rola SÓ no painel
   (`overscroll-behavior: contain`, a forma de `.mudar__p`). Os vãos internos
   são `--e2`, e não `--e3`, pelo mesmo motivo.

   ⚠ `display` DECLARADO OBRIGA A DESFAZER O `[hidden]` (a nota de
   `acesso.css`, `.lg__caps`): sem a segunda regra o painel nasceria aberto. */
.regua__ind {
  display: flex; flex-direction: column; gap: var(--e2);
  padding: var(--e4) 20px; border-bottom: 1px solid var(--lin);
  max-height: 34vh; overflow-y: auto; overscroll-behavior: contain;
}
.regua__ind[hidden] { display: none; }
.regua__ind-cab { display: flex; align-items: center; justify-content: space-between;
                  gap: var(--e3); }
.regua__ind-corpo { display: flex; flex-direction: column; gap: var(--e2); min-width: 0; }
.regua__ind-res { list-style: none; margin: 0; padding: 0; }
.regua__ind-res > li {
  padding: 2px 0; border-top: 1px solid var(--lin); font-size: 12.5px; min-width: 0;
}
/* ⚠ O RESULTADO É UMA ESCOLHA, NÃO UM GESTO *(07/10/2026, decisão do operador)*
   — `.mudar__o` com a `.rd` da casa, a forma de `.imp__ls` (`acesso.css`): a
   marca diz o estado, e o fundo é o reforço, porque cor nunca é canal único. */
.regua__ind-res .mudar__o { padding: 6px 9px; }
.regua__ind-res .mudar__o.on { background: var(--b50); }
html[data-tema="escuro"] .regua__ind-res .mudar__o.on { background: var(--b100); }
.regua__ind-res .mudar__o.on b { color: var(--b700); }
html[data-tema="escuro"] .regua__ind-res .mudar__o.on b { color: var(--b800); }
@media (hover: hover) {
  .regua__ind-res .mudar__o:hover { background: var(--sup3); }
  .regua__ind-res .mudar__o.on:hover { background: var(--b50); }
  html[data-tema="escuro"] .regua__ind-res .mudar__o.on:hover { background: var(--b100); }
}
/* O miolo de cada resultado *(05/10/2026, condutores etapa 2)*: o nome e o CPF
   numa linha e, com o sincronismo ligado, o sinal e a frase do estado no
   sistema do cliente embaixo (`js/sincronismo.js`). `min-width: 0` deixa a
   frase quebrar em vez de empurrar a linha para fora do painel. */
.regua__ind-quem { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.regua__ind-f { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: var(--e3); align-items: end; }
.regua__ind-ac { display: flex; align-items: center; justify-content: flex-end;
                 gap: var(--e3); }
/* ⚠ O *INDICAR* DO ESCOLHIDO GRUDA NO FIM DO PAINEL. Oito resultados passam do
   teto de `34vh`, e sem isto escolher o primeiro deixava o botão que indica
   abaixo da dobra — o operador escolheria e não acharia o passo seguinte. O
   fundo é o do rodapé (`.mod__rod`, `--sup2`), para a lista não vazar por
   baixo. */
.regua__ind-ac--fixa { position: sticky; bottom: 0; padding-top: var(--e2);
                       background: var(--sup2); }

/* ---------------------------------- a confirmação de indicar, por cima ----
   (07/10/2026, decisão do operador: *"quero que o texto de confirmação seja um
   modal central, e não aparecer embaixo"*.) A camada `.conf` de
   `componentes.css` — o `--z-conf` que `base.css` reserva para *"a confirmação
   abre POR CIMA do dossiê"* —, pintada em `#mod` como IRMÃ do card
   (`card/indicar.js`).
   ⚠ `.conf` NASCEU SEM FUNDO E SEM PONTEIRO: no popup da automação ele é o
   único cartão, e o `#veu` de baixo já escurece a página. Aqui há um card
   aceso por baixo — o fundo próprio o recua, para o olho ir à pergunta, e o
   ponteiro faz o clique fora cair no `.conf` (que desiste) e nunca no card.
   ⚠ E ELA FICA CENTRAL TAMBÉM NO TELEFONE: abaixo de 560 px `componentes.css`
   faz de `.conf` uma folha presa à base, e a pergunta voltaria a nascer
   embaixo — o que o operador recusou. As duas regras do `@media` ganham por
   ESPECIFICIDADE (duas classes contra uma), não pela ordem no arquivo. */
.conf--sobre {
  pointer-events: auto;
  background: color-mix(in srgb, var(--inst) 34%, transparent);
}
.conf--sobre .conf__cx { width: min(440px, 100%); }
.conf--sobre .conf__cx:focus { outline: none; }
/* O diálogo do escritório (09/10/2026, `card/escritorio.js`) é a MESMA peça,
   com o campo da observação: as regras do corpo se dividem, não se copiam. */
.ind-conf, .escr-conf { display: flex; flex-direction: column; gap: var(--e2); }
.ind-conf p, .escr-conf p { margin: 0; }
.ind-conf__nv, .escr-conf__nv { color: var(--fg); }
.escr-conf__campo { display: flex; flex-direction: column; gap: var(--e2); }
.escr-conf__r { font-size: 12px; color: var(--fg2); }
/* A TROCA DE STATUS no dialogo do escritorio (13/10/2026, R36 —
   `card/escritorio.js:linhaDoStatus`): *"Status: Aguardando decisao →
   Aguardando execucao · com o escritorio"*. Os dois lados em `--fg`, a moldura
   em `--fg2`: o que se le primeiro e para onde o auto vai. E a MESMA linha no
   dialogo do adicional (14/10/2026, `card/indicar.js:linhaDoStatus`): *"Status:
   Aguardando decisao → Encerrado · Condutor indicado"* — a regra se divide. */
.escr-conf__st, .ind-conf__st { font-size: 12.5px; color: var(--fg2); }
.escr-conf__st b, .ind-conf__st b { color: var(--fg); font-weight: 600; }
@media (max-width: 560px) {
  .conf.conf--sobre { padding: 16px; place-items: center; }
  .conf--sobre .conf__cx { width: 100%; border-radius: var(--r-xl); }
}

/* ------------------------------------------ o dialogo das etiquetas -------
   (09/10/2026, `js/card/etiquetas.js`; decisao do operador: *"ao clicar em
   adicionar a etiqueta… abrir um modal lateral… ou um modal central"*.) A MESMA
   camada `.conf--sobre` da confirmacao de indicar — central, com o fundo que
   recua o card, e central tambem no telefone. No card ele e irmao do
   `.mod__cx`; no lote do Acervo, filho do `body`.
   ⚠ O CARTAO NAO ROLA — QUEM ROLA E A LISTA. `.conf__cx` rola inteiro por
   padrao; aqui o titulo e o campo ficam parados e so `.etq-dlg__l` rola, com
   teto proprio, para 40 etiquetas nao empurrarem o campo para fora da vista.
   ⚠ AS LINHAS SAO BOTOES COM A CAIXA DO DS (`.ck`) — a mesma da selecao do
   Acervo —, e o verbo (*Por* / *Tirar*) aparece a direita no hover e no foco:
   a caixa diz o estado, o verbo diz o que o clique faz. */
.etq-dlg__cx { gap: var(--e3); padding: 16px; overflow: hidden; }
.etq-dlg__cab { display: flex; align-items: flex-start; gap: var(--e3); }
.etq-dlg__cab > .col { flex: 1 1 auto; gap: 2px; }
.etq-dlg__cab .bt { margin: -4px -6px 0 0; }
.etq-dlg__sub { font-size: 12px; color: var(--fg3); }
.etq-dlg__sub .mono { font-size: 11.5px; color: var(--fg2); }
/* O FOCO DO CAMPO E A MOLDURA (`:focus-within`), nunca o anel do `input` — a
   lei de `base.css` para campo de texto. */
.etq-dlg__busca {
  display: flex; align-items: center; gap: 8px; flex: none; height: 36px; padding: 0 10px;
  border: 1px solid var(--lin2); border-radius: var(--r-sm); background: var(--sup);
  cursor: text;
}
.etq-dlg__busca:focus-within {
  border-color: var(--b400);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--b400) 18%, transparent);
}
.etq-dlg__busca .ico { color: var(--fg3); flex: none; }
.etq-dlg__busca input { flex: 1; min-width: 0; font-size: 13px; }
.etq-dlg__busca input::placeholder { color: var(--fg3); }
.etq-dlg__l {
  display: flex; flex-direction: column; gap: 1px; margin: 0 -6px;
  min-height: 0; max-height: min(320px, 46vh); overflow-y: auto; overscroll-behavior: contain;
}
.etq-op {
  display: flex; align-items: center; gap: var(--e3); width: 100%; min-height: 34px;
  padding: 6px; border-radius: var(--r-sm); text-align: left; font-size: 12.5px; color: var(--fg);
}
.etq-op .etq { flex: 0 1 auto; min-width: 0; height: 21px; padding: 0 8px; font-size: 11.5px; }
.etq-op .ck { pointer-events: none; }
.etq-op__v { margin-left: auto; flex: none; font-size: 11.5px; color: var(--fg3); opacity: 0; }
.etq-op:hover, .etq-op:focus-visible { background: var(--sup2); }
.etq-op:hover .etq-op__v, .etq-op:focus-visible .etq-op__v { opacity: 1; }
.etq-op--criar { color: var(--fg2); }
.etq-op--criar b { color: var(--fg); font-weight: 600; }
.etq-op__mais {
  display: grid; place-items: center; width: 15px; height: 15px; flex: none;
  font-size: 14px; font-weight: 600; color: var(--fg3);
}
.etq-dlg__nota {
  display: flex; gap: 6px; padding: 2px 6px 4px;
  font-size: 11.5px; color: var(--fg3); line-height: 1.45;
}
.etq-dlg__nota .ico { flex: none; margin-top: 2px; }
.etq-dlg__vazio { padding: 10px 6px; font-size: 12.5px; color: var(--fg3); line-height: 1.45; }
.etq-dlg__pe {
  padding-top: var(--e3); border-top: 1px solid var(--lin);
  font-size: 11.5px; color: var(--fg3); line-height: 1.45;
}

/* O aviso do prazo confirmavel fica ao lado do botao, nunca em `title`. */
.pzs__a { align-items: center; }
.pzs__a .sm { flex: 1; min-width: 190px; line-height: 1.4; }

/* ================================================ abaixo de 768 px ========
   ⚠ ESTE BLOCO FICA NO FIM DO ARQUIVO, e nao e arrumacao: media query NAO
   acrescenta especificidade, entao um `@media` no topo perde para qualquer
   regra da mesma peca escrita abaixo dele. Este projeto ja mediu isso — um
   `pointer:coarse` no topo perdeu para um `height:34px` 200 linhas adiante, e o
   alvo de toque ficou em 34 px COM A CORRECAO PRESENTE NO ARQUIVO.

   O DOSSIE OCUPA A TELA CHEIA, e o cabecalho PRECISA QUEBRAR. A linha de
   identidade — territorio · placa · numero do auto · selo de chegada · valor ·
   fechar — mede 473 px, e a 375 px o envelope do modal tem 335. Medido em
   15/08/2026 com a regua dentro do instrumento.

   ⚠ O ESTOURO E HERDADO, NAO NASCEU COM O SELO: ele aparece igual em item sem
   `.tag--fim` (`SPAN.mod__v` a 451 num viewport de 375). Ficou invisivel
   enquanto o corpo do modal era esqueleto, e apareceu no dia em que ele virou
   dossie. O `.espaco` empurra valor e fechar para uma segunda linha em vez de
   espremer os dois contra a borda. */
@media (max-width: 860px) {
  .mod__gd { grid-template-columns: minmax(0, 1fr); grid-template-areas: "selo" "tri" "esq"; background: var(--sup); }
  .mod__gd--1 { grid-template-areas: "esq"; }
  .mod__tri { position: static; border-left: none; border-top: 1px solid var(--lin); border-bottom: 1px solid var(--lin); }
  /* ⚠ O `right: 0` da mesa CORTA À ESQUERDA aqui: a calha vira coluna cheia e
     o gatilho do seletor fica colado na borda esquerda da tela — crescer
     440 px para a esquerda a partir dali empurra o painel para fora de
     `.mod__cx` pelo lado oposto ao que a regra de mesa evita. Abaixo de
     860 px o botão tem o modal inteiro à direita para crescer; volta a ser
     `left: 0`, como todo `.mudar__p` fora da calha. */
  .mod__tri .mudar__p { left: 0; right: auto; }
}

@media (hover: hover) {
  .lrec > summary:hover .rot, .lrec > summary:hover::before { color: var(--fg2); }
  .mudar__g:not([disabled]):hover { background-color: var(--sup2); border-color: var(--lin3); }
  .ent__i:hover { background: var(--sup2); }
  /* ⚠ **O TERCEIRO PLANO: O QUE RESPONDE AO CURSOR.** A linha recolhida e o
     unico controle da coluna esquerda, e `--sh2` e o que a lei manda.

     ⚠ **NUNCA O ATALHO `transition`** — ele zera as outras propriedades, e foi
     assim que o hover do cartao clicavel passou a saltar uma vez neste projeto.
     As duas propriedades vao ENUMERADAS, com as duracoes derivadas de
     `--t1`/`--t2` pelo `--mo` e a curva `--suave`; a entrada e mais lenta que a
     saida, dentro do teto de 300 ms.

     ⚠ **E TUDO DENTRO DESTE `@media (hover: hover)`**: sem o guarda, o dedo em
     tela deixa o cartao preso levantado depois do toque. */
  .lrec > summary { transition: box-shadow calc(var(--t1) * var(--mo)) var(--suave),
                                background calc(var(--t1) * var(--mo)) var(--suave); }
  .lrec > summary:hover {
    transition-duration: calc(var(--t2) * var(--mo));
    box-shadow: var(--sh2), var(--brilho);
  }
}

/* A grade de 5 colunas do item de entidade não sobrevive à largura do retrato
   no telefone — 130+88+92 px de colunas fixas mais os dois `gap` de 12 já
   somam 322 px antes da coluna elástica, contra ~343 disponíveis dentro do
   `.mod__esq` a 375 px. Duas colunas — identidade e valor, empilhando o resto
   — é a mesma técnica de `.mod__id` logo acima. */
@media (max-width: 700px) {
  /* Duas colunas — identidade e valor —, e as tres celulas do meio empilham
     dentro da primeira. ⚠ Elas continuam SENDO EMITIDAS: e o mesmo markup, e a
     celula vazia aqui simplesmente nao ocupa linha. */
  .ent__i { grid-template-columns: minmax(0, 1fr) auto; row-gap: 3px; }
  .ent__d, .ent__pz { grid-column: 1; justify-content: flex-start; text-align: left; }
  .ent__pz:empty { display: none; }
}

@media (max-width: 768px) {
  /* ⚠ ABAIXO DE 768 O CARD NAO E MODAL: E FOLHA DE TELA CHEIA. Um modal de 90%
     da viewport no telefone reconstroi exatamente o problema que a lei do
     cartao existe para evitar — margem de sobra em volta de conteudo espremido.

     ⚠ O CORTE MUDOU DE 560 PARA 768, e a regra veio de `casca.css` para ca em
     18/08/2026: a lei do card diz 768, e a regra da peca mora na folha da peca.
     Ela ficava tres degraus abaixo do corte em que a tabela ja vira cartao.

     CABECALHO E RODAPE CONTINUAM FIXOS, sem uma linha a respeito: `.mod__cx` e
     `flex column` com `.mod__b` em `flex: 1; overflow-y: auto`, e a altura
     passa a ser `100dvh` em vez de `min(880px, 90vh)`. A regua e o motivo de a
     tela existir e e a primeira coisa que se perde ao espremer. */
  .mod { padding: 0; }
  .mod__cx { width: 100vw; max-height: 100dvh; height: 100dvh;
             border-radius: 0; border: none; }
  /* Em uma coluna o rotulo sobe e o valor desce: 168 px de rotulo mais o valor
     nao cabem em 375, e truncar rotulo de campo esconde qual dado e aquele. */
  .cmp { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cmp dt { margin-top: var(--e2); }
  .mod__cab .linha { flex-wrap: wrap; row-gap: 8px; }
  /* AS ETIQUETAS DESCEM PARA UMA FILEIRA SO DELAS, depois do `×` *(09/10/2026)*.
     No meio da linha, a quebra natural as poria entre o auto e a navegacao, e
     o `×` desceria para uma terceira fileira sozinho — o defeito que a nota
     abaixo ja pagou uma vez. `order` move so a CAIXA; o DOM e a ordem de
     leitura continuam territorio · placa · auto · etiquetas. */
  .mod__cab .mod__etq { order: 1; flex-basis: 100%; }
  /* ⚠ A QUEBRA FORCADA SAIU, e ela custava uma fileira inteira. O `.espaco` com
     `flex-basis: 100%` obrigava um corte SEMPRE naquele ponto: com o seletor
     dentro da linha desde 18/08, a fileira seguinte ficava com o `×` sozinho —
     **43 px de altura para um botao de 26 px de largura**, e a linha inteira ia
     a 131 px em quatro fileiras.

     A regra fazia sentido na forma antiga, quando a linha era so
     `etiquetas · navegacao · fechar` e media 473 px em 335 disponiveis. Agora a
     quebra natural resolve melhor, e resolve nos DOIS casos: sem navegacao,
     `seletor + ×` sobram numa fileira de 270 px; com ela,
     `seletor + ‹ N de M › + ×` dao 270 de 330 e continuam cabendo juntos.
     Duas fileiras em vez de quatro. */
  /* a tabela de eixos nunca empurra o modal: ela rola dentro do proprio envelope */
  #mod .tb-rol { max-width: 100%; }
  /* ⚠ ERA `width: 100%`, E ISSO CUSTAVA UMA FILEIRA INTEIRA. Com o grupo ocupando
     a largura toda, o *Fechar* nao tinha como caber ao lado e descia sozinho:
     a faixa de acao ficava com 120 px — duas fileiras de 43 e os vaos — num
     rodape que ja somava 303.

     A regra fazia sentido quando o primeiro rotulo media 171 px (*"Defender —
     autorizar defesa"*). Deixando o grupo dimensionar pelo conteudo, o caso em
     que nao couberem quebra sozinho, que e o comportamento certo — e nao o
     forcado sempre.
     ⚠ DESDE 09/10/2026 O RODAPE QUEBRA EM TRES FILEIRAS: *Baixar auto* / o par
     do escritorio / *Fechar*, medido a 375 px no cartao de 369 — e o par fica
     numa fileira so (315 px: 96 + 209), que e o que `width: auto` compra.
     *(Dizia "com Autorizar defesa os tres botoes somam 291 de 329 px disponiveis
     e cabem numa fileira so" ate 09/10/2026, quando *Autorizar* saiu.)* */
  .regua__bt { width: auto; }
  /* A FRASE DO RODAPE SOBE PARA UMA LINHA SO DELA. Na calha unica ela disputava
     espaco com a navegacao e os botoes e quebrava em oito linhas de duas
     palavras — "O processo esta / encerrado no / papel — nao / ha mais ato".
     `order:-1` a poe ACIMA dos controles, que e a ordem de leitura certa: o
     estado primeiro, a acao depois. */
  .mod__rod { flex-wrap: wrap; row-gap: 10px; }
  .mod__rod > .md { flex-basis: 100%; order: -1; line-height: 1.45; }
  .mod__rod > .espaco { display: none; }

  /* O TITULO E O VALOR EMPILHAM: 375 px nao seguram `Multa por nao indicar o
     condutor` mais `R$ 260,32` na mesma linha sem truncar o tipo — e o tipo e a
     identidade do auto. */
  .mod__id { flex-direction: column; gap: var(--e2); }
  .mod__vc { align-items: flex-start; text-align: left; }
  /* O trilho sangra para a largura da FOLHA, nao para a do cartao. */
  .trilho { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
  /* ⚠ O TRILHO NAO ENCOLHE NO TELEFONE, e as duas saidas obvias foram medidas e
     RECUSADAS — fica escrito para ninguem tentar de novo:

     (1) ESTREITAR SO O NO DO PASSADO (96) e deixar o do futuro cheio (140)
         QUEBRA O SEGMENTO. O `::before` alcanca o centro do vizinho por
         `left:-50%`, que so cai no lugar certo com todos os nos do mesmo
         tamanho: com larguras mistas o traco do no de futuro comeca 22 px a
         ESQUERDA do ponto anterior — tracejado por cima de trecho ja percorrido,
         que e exatamente a mentira que o tracejado existe para nao contar.

     (2) CORTAR O ROTULO EM UMA LINHA tira 15 px e ESCONDE TEXTO. O que recupera
         a segunda linha e o `title` do no — e `title` NAO EXISTE NO TOQUE. E a
         mesma razao pela qual este projeto tirou o motivo dos botoes de dentro
         do `title` em 18/08; repeti-la aqui seria desfazer a correcao no lugar
         onde ela mais importa.

     O cabecalho encolhe pelo RODAPE e pela faixa de acao, que e onde havia
     gordura de verdade. O trilho fica com os 100 px que ele usa para dizer onde
     o auto esta. */
  /* O painel do seletor ocupa a folha: com `min(440px, 100vw - 56px)` ele ainda
     caberia, mas encostaria na borda de um lado so. */
  .mudar__p { width: calc(100vw - 32px); max-height: 52vh; }
  .regua__nt { padding: 0 16px 12px; }
  /* o painel de indicar acompanha o recuo da folha, e o nome e o CPF empilham */
  .regua__ind { padding-left: 16px; padding-right: 16px; }
  .regua__ind-f { grid-template-columns: minmax(0, 1fr); }
  .mod__selo, .mod__esq { padding-left: 16px; padding-right: 16px; }
  /* ⚠ **`.mod__tri` NAO PRECISA MAIS DE OVERRIDE** — desde que a calha virou N
     cartoes (20/08, segunda rodada), `.mod__tri` tem `padding: var(--e5)` em
     TODA largura, e `--e5` e 16 px: exatamente o recuo que este bloco tentava
     forcar a mao aqui. A regra caiu com o defeito que ela consertava. */
  .atv__ferr { align-items: stretch; }
  .atv__campo, .atv__ferr [data-atv-comentar] { flex-basis: 100%; }
  /* ⚠ **O BOTAO DO PAPEL NAO COLAPSA MAIS PARA ICONE.** Ele morava no
     cabecalho, onde a faixa 1 disputava espaco com placa/numero/navegacao — la
     fazia sentido encolher. Agora mora no rodape, sozinho na ponta esquerda, e
     e a UNICA acao real da tela: encolher o rotulo bem no lugar que existe para
     dar "mais destaque" desfaria o proprio pedido. */
  /* ⚠ **`.bt--peq` VIROU `.bt` — SUPERCONJUNTO, e a troca e obrigatoria desde
     que o rodape deixou de usar `bt--peq`.** *(20/08/2026.)* Todo `bt--peq` do
     produto nasce como `class="bt bt--peq"`, entao `.bt` cobre tudo o que a
     regra antiga cobria E os botoes do rodape, que agora sao `.bt` puro. Sem a
     troca eles cairiam para os **40 px** de `.regua__ac .bt` — abaixo do minimo
     de 44 — com a correcao PRESENTE no arquivo apontando para uma classe que o
     rodape nao emite mais. E a regra sem classe pela sexta vez neste projeto, e
     desta vez fui eu que a criei, uma edicao depois de consertar a mesma coisa
     em `.ab`. */
  #mod .bt, #mod .seg button,
  #mod .lrec > summary, #mod .dec > summary { min-height: 44px; }
  #mod .lrec > summary, #mod .dec > summary { align-items: center; }
}

/* =============================================== o toque, no card ========
   ⚠ ESTE BLOCO E O ULTIMO DO ARQUIVO, e nao e arrumacao: media query NAO
   acrescenta especificidade, entao ele so ganha de `min-height: 32px` escrita
   200 linhas acima por estar DEPOIS. E a mesma lei — e o mesmo defeito medido —
   que `telas.css` documenta: um `pointer:coarse` no topo perdeu para um
   `height:34px` mais abaixo, e o alvo ficou em 34 px COM A CORRECAO PRESENTE NO
   ARQUIVO. Ele vem depois do `max-width: 768px` pelo mesmo motivo.

   ABAIXO DE 768 O CARD E FOLHA DE TELA CHEIA, e ai ele deixa de ser uma janela
   sobre a lista para ser A tela — todo controle dele passa a ser alvo de dedo.
   Os tres do seletor nasceram em 32/33 px porque o desenho de mesa pede um
   gatilho discreto no cabecalho; no toque eles crescem, que e o unico canal
   possivel numa LINHA (crescer nao deforma nada).

   OS ICONES NAO CRESCEM: eles ampliam a AREA por pseudo-elemento, que e o
   padrao ja firmado em `casca.css`. O defeito e de alcance, e a correcao tem
   que ser de alcance — engordar o desenho de um `x` de 14 px o transforma num
   botao que disputa atencao com o conteudo. */
@media (pointer: coarse) {
  .mudar__g, .mudar__vg, .mudar__o { min-height: 44px; }
  #mod .bt { min-height: 44px; }   /* superconjunto de `.bt--peq`: ver a nota acima */
  /* ⚠ **`.inp` FALTAVA, e ele e a UNICA superficie de ESCRITA do card.**
     *(20/08/2026, medido a 375 px ao refazer o compositor da aba Atividade.)*
     Este bloco nomeava botao, segmento e `<summary>` — nunca campo de
     formulario —, entao o seletor de natureza e o campo de arquivo mediam
     **32 px** no telefone, abaixo do minimo de 44. O defeito e o mesmo dos
     `<summary>` de 18/08: mudo, porque o dedo erra, o campo nao abre e nao ha
     erro nenhum para ver. ⚠ O `<textarea>` ja passava por outro caminho
     (`.atv__tx` poe 92 px), e `min-height` nao o encolhe. */
  #mod .inp { min-height: 44px; }
  /* ⚠ OS `<summary>` FALTAVAM, E SAO A NAVEGACAO PRIMARIA DO CARD. Medido em
     18/08 no preset movel: as cinco linhas recolhidas mediam **21 px** e o `▸`
     das provas do bloco do tipo **24 px** — os unicos controles do card abaixo
     do minimo, num bloco que ja cuidava dos outros cinco. O defeito e mudo: o
     dedo erra, o `<details>` nao abre, e nao ha erro nenhum para ver.

     `align-items: center` junto porque `.lrec > summary` alinha por `baseline`:
     so o `min-height` deixaria o texto colado no topo de uma caixa de 44 px. */
  #mod .lrec > summary, #mod .dec > summary { min-height: 44px; align-items: center; }
  /* ⚠ **`.ab button` VIROU `.seg button` AQUI TAMBEM, e esquecer esta
     linha seria o defeito MUDO da rodada.** A barra de abas trocou de peca
     nesta data; as duas regras de toque continuavam nomeando a classe morta,
     e `.seg button` nasce com **26 px** de altura. O alvo primario de
     navegacao do card cairia de 44 para 26 px no telefone — abaixo do minimo,
     com a correcao PRESENTE no arquivo apontando para um seletor que nao casa
     mais com nada. Nenhum linter ve: nao ha classe sem regra, ha regra sem
     classe, que e o mesmo defeito pelo avesso. */
  #mod .seg button { min-height: 44px; }
  /* ⚠ **O `.lk` E ALVO DE DEDO E MEDIA 19 px.** Ele e `display: inline` dentro
     de um `<dd>`, entao a altura e a da LINHA DE TEXTO — nenhuma das regras de
     toque deste bloco o alcancava, porque nenhuma delas fala de `.lk`. A
     correcao e de ALCANCE, nao de desenho: a area cresce por pseudo-elemento e
     o texto fica do tamanho que estava, que e o padrao ja firmado em
     `casca.css` e no `.bt--ico` logo abaixo. */
  #mod .lk { position: relative; }
  #mod .lk::after {
    content: ''; position: absolute; left: 0; right: 0; top: 50%;
    height: 44px; transform: translateY(-50%);
  }
  #mod .bt--ico { position: relative; }
  #mod .bt--ico::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
  /* O `×` DO CHIP DE ETIQUETA mede 14 px e mora dentro de um chip de 19: a
     mesma ampliacao por area, pelo mesmo motivo — o desenho fica, o alvo
     cresce. (08/10/2026, medido a 375 px com `pointer: coarse`.) */
  /* *VER PARECER*, na faixa do rodape (13/10/2026): texto de 12 px numa linha
     so — a area cresce pelo pseudo-elemento, e a faixa continua com uma linha. */
  #mod .regua__ver { position: relative; }
  #mod .regua__ver::after {
    content: ''; position: absolute; left: 0; right: 0; top: 50%;
    height: 44px; transform: translateY(-50%);
  }
  #mod .etq__x { position: relative; }
  #mod .etq__x::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
  /* O *+ ETIQUETA* (21 px) cresce pela area, pelo mesmo motivo; e as linhas do
     dialogo crescem pela CAIXA, porque numa lista vertical o halo de uma
     cobriria a vizinha (`componentes.css`, o alvo de toque do menu). */
  #mod .etq-add { position: relative; }
  #mod .etq-add::after {
    content: ''; position: absolute; left: 0; right: 0; top: 50%;
    height: 44px; transform: translateY(-50%);
  }
  .etq-op { min-height: 44px; }
}

/* ===================================== o hover do campo de arquivo =======
   ⚠ FICA NO FIM, junto dos outros blocos de media: media query não acrescenta
   especificidade, e uma regra de hover escrita 900 linhas acima perderia para
   qualquer coisa que tocasse a mesma propriedade depois.
   ⚠ O SELETOR É `.atv__arq:hover`, e não mais `::file-selector-button:hover`:
   o botão nativo deixou de ser desenhado, e regra que aponta para peça que não
   existe mais é regra morta — a classe órfã pelo avesso. */
@media (hover: hover) {
  .atv__arq:hover { border-color: var(--lin3); }
}