/* 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); }
.doc-capa h1 { margin: 0 0 10px; font-size: clamp(1.7rem, 4.5vw, 2.3rem);
               line-height: 1.12; letter-spacing: -.02em; color: var(--text);
               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); }
.doc-clausula .doc-n { font-size: 1.3rem; font-weight: 600; line-height: 1.25;
                       color: var(--accent); font-variant-numeric: tabular-nums; }
.doc-corpo { color: var(--muted); }
.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; }

@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 { padding: 15px 0; border-bottom: 1px solid var(--line);
                display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; }
.doc-lista a { color: var(--text); font-weight: 600; text-decoration: none; }
.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 --- */
.doc-substituida { margin: 22px 0 0; padding: 13px 16px; border-radius: 8px;
                   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. */
.doc-escala { margin: 0 0 14px; padding-left: 20px; color: var(--tinta-fraca); }
.doc-escala li { margin-bottom: 8px; }