/* Os documentos legais, vestidos com a roupagem do produto.
 *
 * Nada aqui declara cor, medida ou fonte própria: tudo sai dos tokens de
 * styles.css. É o que faz a página do documento parecer o produto, e não
 * parecer um documento colado dentro dele.
 *
 * O prefixo doc- é deliberado: `.corpo` e `.n` sozinhas são nomes que uma
 * folha de mil classes acaba reusando sem querer, e a colisão apareceria
 * como um documento legal desmontado em produção.
 */

.doc { max-width: 760px; margin: 0 auto; padding: 40px 20px 96px; }

/* --- a moldura, montada da tabela e não do texto --- */
.doc-capa { padding-bottom: 20px; border-bottom: 2px solid var(--line-strong); }
/* ⚠️ O TÍTULO SEGUE O PADRÃO DE TÍTULO DE TELA DO PRODUTO, e era outra coisa.
   Medido a 1000px: dava **37px, peso 700, Manrope**, contra os 30/400 na
   serifada que a `produto.css` define para `.page-heading h1`. A serifada é a
   voz do documento lido, e o §2 diz que ela é do título de tela — esta é uma.

   ⚠️ E o `clamp(…, 4.5vw, …)` SAI, pela mesma razão que saiu do título da
   entrada: um título que muda de tamanho com a largura da janela não bate com
   desenho nenhum, e a 1000px dava 37 enquanto noutra largura daria outro. */
.doc-capa h1 { margin: 0 0 10px; font-family: var(--leitura); font-size: 30px;
               font-weight: 400; line-height: 1.12; letter-spacing: -.3px;
               color: var(--texto); text-wrap: balance; }
.doc-selo { margin: 0 0 14px; font-size: .74rem; letter-spacing: .12em;
            text-transform: uppercase; color: var(--muted); }
.doc-vigencia { margin: 0; font-size: .84rem; color: var(--muted);
                font-variant-numeric: tabular-nums; }

/* --- as cláusulas --- */
.doc-clausula { display: grid; grid-template-columns: 46px 1fr; gap: 0 18px;
                margin-top: 22px; padding: 26px 0 2px;
                border-top: 1px solid var(--line); }
/* ⚠️ O NÚMERO DA CLÁUSULA em `--accent` dava 2,72 sobre o papel — o piso é 4,5.
   Medido a 390 em 04/09/2026, onde a regra do celular o encolhe para 15,2px:
     --accent (ciano #009FF0) sobre #FAF7F2  ->  2,72  ⛔
     --acento-escuro (#00679C) sobre #FAF7F2 ->  5,75  ✅
   ⭐ O ciano é cor de MARCA e serve para superfícies e realces; sobre papel
   claro ele não é texto. O par que existe para isso é o `--acento-escuro`, e
   é o mesmo que os elos do produto já usam. */
.doc-clausula .doc-n { font-size: 1.3rem; font-weight: 600; line-height: 1.25;
                       color: var(--acento-escuro); font-variant-numeric: tabular-nums; }
/* ⚠⚠ O `min-width: 0` NÃO É DECORAÇÃO, e a razão está medida — 04/09/2026.
   Ele é o que faz a promessa escrita vinte linhas abaixo — *«tabelas: rolam
   sozinhas, sem empurrar a página de lado»* — ser verdade. Sem ele era falsa.

   O `.doc-corpo` é ITEM DE GRELHA (a `.doc-clausula` acima é `grid`), e um item
   de grelha nasce com `min-width: auto`: ele recusa encolher abaixo do tamanho
   mínimo do seu conteúdo. O conteúdo aqui inclui uma tabela com
   `min-width: 520px` — então a coluna inteira passava a medir 520.

   Medido a 390, antes:

       .doc-rolo ..... 520   (tem `overflow-x: auto` e nunca chegava a usá-lo)
       .doc-corpo .... 520   ⛔ o item que nao encolhia
       .doc-clausula . 520
       article.doc ... 552   ⛔ o DOCUMENTO INTEIRO, titulo e paragrafos
       .app-content .. 390   e era ESTE que rolava de lado

   ⛔ **Nada se perdia: perdia-se a leitura.** O `.app-content` tem
   `overflow-x: auto`, então o texto era alcançável — mas a pessoa tinha de
   arrastar a tela de lado para ler CADA LINHA do documento legal, e não só a
   tabela. Setenta e seis elementos saíam da janela por causa de um.

   📌 A promessa estava escrita e o efeito era o oposto dela. O invólucro certo
   já existia, com o nome certo e a propriedade certa; faltava-lhe poder
   encolher. */
.doc-corpo { color: var(--muted); min-width: 0; }
.doc-corpo h2 { margin: 0 0 12px; font-size: 1.3rem; line-height: 1.22;
                font-weight: 600; letter-spacing: -.01em; color: var(--text);
                text-wrap: balance; }
.doc-corpo h3 { margin: 22px 0 7px; font-size: 1rem; font-weight: 600;
                color: var(--text); }
.doc-corpo p { margin: 0 0 13px; }
.doc-corpo strong { color: var(--text); font-weight: 600; }
.doc-corpo ul { margin: 0 0 13px; padding-left: 19px; }
.doc-corpo li { margin-bottom: 7px; }
.doc-corpo li::marker { color: var(--line-strong); }
.doc-corpo a { color: var(--accent); }

/* --- tabelas: rolam sozinhas, sem empurrar a página de lado --- */
.doc-rolo { margin: 0 0 15px; overflow-x: auto; }
.doc-rolo table { width: 100%; min-width: 520px; border-collapse: collapse;
                  font-size: .9rem; }
.doc-rolo th { padding: 9px 13px 7px 0; text-align: left; font-weight: 500;
               font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
               color: var(--muted); border-bottom: 1px solid var(--line-strong); }
.doc-rolo td { padding: 10px 13px 10px 0; vertical-align: top;
               color: var(--muted); border-bottom: 1px solid var(--line); }
.doc-rolo td:first-child { width: 32%; color: var(--text); font-weight: 600; }
.doc-rolo th:last-child, .doc-rolo td:last-child { padding-right: 0; }
.doc-rolo td strong { color: var(--text); font-weight: 600; }
.doc-prazo { font-variant-numeric: tabular-nums; }

/* --- anexos: são conteúdo, e por isso h2, não h1 --- */
.doc-anexo { margin-top: 56px; padding-top: 26px;
             border-top: 2px solid var(--line-strong); }
.doc-anexo-titulo { margin: 0 0 8px; font-size: 1.6rem; font-weight: 600;
                    letter-spacing: -.015em; color: var(--text); }
.doc-anexo-alcance { margin: 0; font-size: .9rem; color: var(--muted); }

/* --- rodapé: versão, vigência e hash, montados da tabela --- */
.doc-rodape { margin-top: 56px; padding-top: 18px;
              border-top: 1px solid var(--line); font-size: .8rem;
              color: var(--muted); }
.doc-hash { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            font-size: .74rem; word-break: break-all; }

/* --- a nota do idioma. Ela aparece em DOIS lugares com molduras diferentes —
   dentro do rodapé do documento, que já é pequeno e apagado, e solta no fim do
   índice, onde não há nada em volta que a apague. Por isso ela declara o
   tamanho e a cor em vez de os herdar: no índice não havia o que herdar. --- */
.doc-idioma { margin: 18px 0 0; max-width: 62ch;
              font-size: .8rem; line-height: 1.5; color: var(--muted); }

@media (max-width: 640px) {
  .doc { padding: 28px 16px 72px; }
  .doc-clausula { grid-template-columns: 1fr; gap: 0; }
  .doc-clausula .doc-n { margin-bottom: 5px; font-size: .95rem; }
  .doc-rolo td:first-child { width: auto; }
}

/* --- o índice e o histórico: lista de documentos, sem marcador --- */
.doc-lista { margin: 26px 0 0; padding: 0; list-style: none; }
.doc-lista li { border-bottom: 1px solid var(--line);
                display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; }
/* ⭐ O RECHEIO E DA LINHA, E PASSA PARA O LINK — ordem do Alan, 04/09/2026:
   *«pode aumentar o espaço do toque das legais»*.

   ⛔ E ele NAO CRIA ESPACO NENHUM: entrega o que ja existia. Medido a 390 no
   indice, antes:

       a linha ......  49px   (15 + 18 + 15)
       o link .......  18px   ← o unico que respondia ao toque
       desperdicio ..  30px de espaco morto entre uma palavra e a seguinte

   `elementFromPoint` no topo e no fundo da linha devolvia `li`, e nao `a`. A
   pessoa via uma linha de 49px e tinha 18 para acertar.

   ⚠ O `display: block` nao e decoracao: num `inline` o recheio vertical nao
   empurra nada, e a emenda seria letra morta a passar por conserto.

   ⚠⚠ E O RECHEIO SAI DO `li` NA MESMA MUDANCA. Se ficasse nos dois, a linha
   passava de 49 para 79 e a tela mudava — o pedido era area de toque, nao
   espacamento novo. */
.doc-lista a { color: var(--text); font-weight: 600; text-decoration: none;
               display: block; padding: 15px 0; }
.doc-lista a:hover { color: var(--accent); }
.doc-lista .doc-selo { margin: 0; }
.doc-lista .doc-hash { flex-basis: 100%; }

/* --- o aviso de que ESTA versão já não é a vigente --- */
/* ⚠ O 24.º e último `8px` de raio escrito à mão (D-1614), e o único fora das
   duas folhas grandes. Ele contradizia o cabeçalho DESTE ficheiro — «nada aqui
   declara cor, medida ou fonte própria» —, e a folha é carregada pela mesma
   `cliente/base.html` que carrega o `styles.css`, portanto vê o `:root` dele. */
.doc-substituida { margin: 22px 0 0; padding: 13px 16px; border-radius: var(--radius-md);
                   background: var(--light-blue); font-size: .88rem;
                   color: var(--muted); }
.doc-substituida a { color: var(--accent); }

/* --- a escada de providências: avisar, suspender, encerrar ---
   Nasceu como `style` embutido nos quatro elementos. Virou classe porque o
   guarda de etiqueta da publicação (D-441) não aceita `style`, e manter o
   atributo na lista permitida por causa de quatro margens seria alargar a
   guarda para acomodar cosmética. */
/* `--texto` e não um token fraco: este parágrafo JÁ renderizava com a
   tinta do corpo — `--tinta-fraca` nunca existiu, e sem valor de recuo
   a declaração era descartada e a cor vinha por herança. Apontá-lo ao
   `--texto` não muda um pixel: apaga a mentira de que aqui havia uma
   distinção. */
.doc-escala { margin: 0 0 14px; padding-left: 20px; color: var(--texto); }
.doc-escala li { margin-bottom: 8px; }

/* A secção dos documentos com prazo, no fim do índice. Ela vem depois do corpo
   permanente porque é isso que ela é: um apenso com validade, e não uma
   segunda metade do conjunto. */
.doc-secao { margin-top: 28px; border-top: 1px solid var(--linha); padding-top: 18px; }
.doc-secao > summary { cursor: pointer; font-weight: 700; margin-bottom: 6px; }
.doc-secao > summary::marker { color: var(--accent); }
.doc-secao .doc-lista { margin-top: 10px; }

/* O corpo do documento dentro da caixa do produto. O que ele acrescenta ao
   `.doc-corpo` da página é só o que a caixa impõe: o texto rola DENTRO dela, e
   não a página atrás — um regulamento tem mais texto do que cabe num ecrã, e
   sem isto a caixa cresceria para fora da janela e o botão de fechar sairia
   com ela. A folha do celular é outra frente; isto é o mínimo para o texto ser
   legível e a saída estar sempre alcançável. */
.doc-caixa { max-height: 80vh; display: flex; flex-direction: column; }
.doc-caixa #modal-legal-corpo { overflow-y: auto; }
/* Medido: sem isto o pé é `flex-shrink: 1` como qualquer filho, e num
   documento comprido é ele que cede — a saída encolhia antes do texto. */
.doc-caixa .mk-modal-pe { flex-shrink: 0; }
.doc-caixa-titulo { font-size: 1.05rem; margin: 0 0 4px; }
.doc-caixa-versao { color: var(--muted); font-size: .78rem; margin: 0 0 14px; }
.doc-caixa-versao a { color: var(--accent); }

/* ⚠️ OS ELOS DESTAS TELAS ESTAVAM AZUIS DO NAVEGADOR. Medido a 390 em
   04/09/2026, em `/legal/identificacao/`:

     «Versões anteriores» · «Baixar em PDF» · «www.transcribia.app»
        cor computada  rgb(0, 0, 238)   ← o #0000EE de omissão

   Nenhuma regra os alcançava: esta folha nunca declarou `a`, e a do produto
   não chega cá. ⭐ Não há regra errada para encontrar — há uma regra A MENOS,
   e a folha lê-se igualmente bem sem ela. É a mesma espécie do `.mk-volta`,
   achada pela mesma varredura, noutro sítio.

   ⚠️ E o `www.transcribia.app` estava em `--accent` por outro caminho: 2,72
   sobre o papel. O `--acento-escuro` dá 5,75 e é o que o resto do produto usa
   nos elos.

   ⚠️ E o SELETOR desta regra foi inventado antes de ser medido, na primeira
   tentativa: escrevi `.doc-corpo a, .doc-capa a, .doc-pe a` e os elos ficaram
   azuis à mesma. Eles vivem num `footer.doc-rodape`, e o `.doc-pe` não existe.
   ⭐ Agora é o `.doc`, que é o `<article>` inteiro — cobre o corpo, a capa e o
   rodapé sem eu ter de adivinhar quantas partes há. */
.doc a { color: var(--acento-escuro) }
.doc a:hover { color: var(--marinho) }