/**
 * documento.css — as páginas jurídicas públicas.
 *
 * Mesma linguagem que o e-mail do sistema passou a falar: serifa na coluna de
 * leitura, sans na camada de sistema, faixa azul da hero e o filete cor de selo.
 * Política de privacidade e termos são documentos — e o sistema agora tem uma
 * voz de documento, em vez de uma voz por peça.
 *
 * Estas páginas são PÚBLICAS: abrem sem login, sem `gate.js`, sem Firebase.
 * É requisito de duas coisas ao mesmo tempo — a LGPD, que exige a política
 * acessível a quem ainda não é usuário, e a verificação de marca do Google,
 * que busca a página sem sessão nenhuma.
 *
 * Sem `theme.js` de propósito: o modo escuro do sistema é `filter: invert(90%)`
 * no <html>, e invertendo esta página a faixa azul viraria bege. Documento
 * jurídico não precisa de alternador de tema.
 */

:root {
    --doc-marca: #0a1f45;
    --doc-destaque: #1a3a6e;
    --doc-selo: #A16207;
    --doc-tinta: #25303f;
    --doc-tinta-suave: #5d6b82;
    --doc-fundo: #eef1f6;
    --doc-papel: #ffffff;
    --doc-painel: #f5f8fc;
    --doc-linha: #dde5f0;

    --doc-serifa: Georgia, 'Times New Roman', Times, serif;
    --doc-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0 0 64px;
    background: var(--doc-fundo);
    color: var(--doc-tinta);
    font-family: var(--doc-serifa);
    font-size: 17px;
    line-height: 1.75;
    -webkit-text-size-adjust: 100%;
}

/* ── Faixa da marca ─────────────────────────────────────────────────────── */

.doc-topo {
    background: var(--doc-marca);
    padding: 26px 24px 24px;
}
/* Grid, e não flex-wrap, por causa do seletor de idioma que entra à direita da
   marca. Com `flex-wrap` o selo só quebrava de linha recebendo `flex-basis:
   100%` — que sobrepõe o `width: 44px` dele e transformava o traço curto numa
   régua de ponta a ponta. No grid ele apenas ocupa as duas colunas da segunda
   linha e mantém a largura que sempre teve. */
.doc-topo-interno {
    max-width: 760px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0 16px;
}
.doc-marca {
    display: inline-block;
    font-family: var(--doc-sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.7px;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
}
.doc-marca:hover { text-decoration: underline; text-underline-offset: 4px; }
/* O selo: único elemento quente da página, e o mesmo do e-mail. */
.doc-selo {
    width: 44px; height: 2px; background: var(--doc-selo); margin-top: 15px;
    /* Segunda linha da grade, sob a marca — onde sempre esteve. */
    grid-column: 1 / -1;
}

/* ── Folha ──────────────────────────────────────────────────────────────── */

.doc-folha {
    max-width: 760px;
    margin: 0 auto;
    background: var(--doc-papel);
    border: 1px solid var(--doc-linha);
    border-top: none;
    padding: 48px 56px 56px;
}

.doc-titulo {
    margin: 0 0 6px;
    font-size: 34px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--doc-marca);
    letter-spacing: -0.3px;
}
.doc-data {
    margin: 0 0 40px;
    font-family: var(--doc-sans);
    font-size: 13px;
    color: var(--doc-tinta-suave);
}

/* Aviso de que o português é a versão que vale. Só existe fora do português —
   o i18n.js o revela. Fica acima do sumário, e não no rodapé, porque quem
   precisa dele precisa ANTES de ler, não depois. */
.doc-aviso-traducao {
    margin: -24px 0 40px;
    padding: 12px 16px;
    font-family: var(--doc-sans);
    font-size: 13px;
    line-height: 1.6;
    color: var(--doc-tinta);
    background: var(--doc-papel);
    border-left: 3px solid var(--doc-selo);
}
.doc-aviso-traducao[hidden] { display: none; }

/* ── Sumário ────────────────────────────────────────────────────────────── */

.doc-sumario {
    margin: 0 0 48px;
    padding: 24px 26px;
    background: var(--doc-painel);
    border-left: 3px solid var(--doc-destaque);
}
.doc-sumario h2 {
    margin: 0 0 14px;
    font-family: var(--doc-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--doc-destaque);
}
.doc-sumario ol { margin: 0; padding-left: 22px; font-size: 16px; line-height: 1.9; }
.doc-sumario a { color: var(--doc-tinta); text-decoration: none; }
.doc-sumario a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Seções ─────────────────────────────────────────────────────────────── */

/* Numeração automática: um documento jurídico É uma sequência numerada, e
   citar "item 7" é como se conversa sobre ele. O contador evita a renumeração
   à mão quando uma seção entra no meio. */
.doc-folha { counter-reset: secao; }

.doc-secao { margin: 0 0 44px; }
.doc-secao h2 {
    counter-increment: secao;
    margin: 0 0 16px;
    font-size: 21px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--doc-marca);
    scroll-margin-top: 24px;
}
.doc-secao h2::before {
    content: counter(secao, decimal-leading-zero);
    display: inline-block;
    min-width: 44px;
    font-size: 15px;
    color: var(--doc-selo);
    vertical-align: baseline;
}
.doc-secao h3 {
    margin: 28px 0 10px;
    font-family: var(--doc-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.6px;
    color: var(--doc-destaque);
}
.doc-secao p { margin: 0 0 18px; }
.doc-secao ul, .doc-secao ol { margin: 0 0 18px; padding-left: 24px; }
.doc-secao li { margin-bottom: 12px; }
.doc-secao a { color: var(--doc-destaque); }

/* Tabela de dados — mesma gramática da ficha do e-mail: filete fino, rótulo em
   sans versalete, valor em serifa. */
.doc-tabela { width: 100%; border-collapse: collapse; margin: 4px 0 22px; }
.doc-tabela th, .doc-tabela td {
    padding: 12px 0;
    border-top: 1px solid var(--doc-linha);
    vertical-align: top;
    text-align: left;
}
.doc-tabela tr:last-child td, .doc-tabela tr:last-child th { border-bottom: 1px solid var(--doc-linha); }
.doc-tabela th {
    width: 34%;
    padding-right: 20px;
    font-family: var(--doc-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--doc-tinta-suave);
}
.doc-tabela td { font-size: 16px; line-height: 1.6; }

/* Caixa de atenção — o mesmo painel com filete do e-mail. */
.doc-nota {
    margin: 26px 0;
    padding: 22px 26px;
    background: var(--doc-painel);
    border-left: 3px solid var(--doc-destaque);
}
.doc-nota > :first-child { margin-top: 0; }
.doc-nota > :last-child { margin-bottom: 0; }

/* ── Rodapé ─────────────────────────────────────────────────────────────── */

.doc-rodape {
    margin-top: 48px;
    padding-top: 26px;
    border-top: 1px solid var(--doc-linha);
    font-family: var(--doc-sans);
    font-size: 13px;
    line-height: 1.75;
    color: var(--doc-tinta-suave);
}
.doc-rodape a { color: var(--doc-destaque); }

/* ── Foco visível ───────────────────────────────────────────────────────── */

a:focus-visible {
    outline: 2px solid var(--doc-selo);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ── Telas estreitas ────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    body { font-size: 16px; }
    .doc-folha { padding: 32px 22px 40px; border-left: none; border-right: none; }
    .doc-topo { padding: 22px 22px 20px; }
    .doc-titulo { font-size: 27px; }
    .doc-secao h2 { font-size: 19px; }
    /* O numeral sai da margem e vai para cima do título: com 22px de respiro
       lateral, uma coluna de 44px comeria um quinto da linha. */
    .doc-secao h2::before { display: block; min-width: 0; margin-bottom: 2px; }
    .doc-tabela th, .doc-tabela td { display: block; width: 100%; padding-right: 0; }
    .doc-tabela th { border-bottom: none; padding-bottom: 2px; }
    .doc-tabela td { border-top: none; padding-top: 0; }
    .doc-tabela tr:last-child td { border-bottom: 1px solid var(--doc-linha); }
}

@media print {
    body { background: #fff; }
    .doc-folha { border: none; max-width: none; padding: 0; }
    .doc-topo { background: none; padding-left: 0; }
    .doc-marca { color: #000; }
}


/* ----------------------------------------------------------------
   3c. ACESSIBILIDADE — Texto so para leitor de tela
   ----------------------------------------------------------------
   `display: none` e `visibility: hidden` tirariam o elemento TAMBEM da
   arvore de acessibilidade, que e justamente o contrario do que se quer
   aqui: o texto precisa sumir da tela e continuar sendo lido. O recorte
   de 1px e a forma que funciona nos leitores de tela em uso.

   Mora no CSS, e nao no script da barra de acessibilidade, porque um
   `<h1 class="sr-only">` definido so por JS aparece na tela ate o script
   rodar. Regra de <head> nao pisca.
   ---------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}