/* ─────────────────────────────────────────────────────────────────────────────
   Documentos públicos — Termos de Uso e Política de Privacidade.

   Duas armadilhas do app.css que este arquivo precisa desfazer, e que já
   quebraram a página uma vez:

     1. `body` global tem `padding-left: var(--sidebar-w)` (252px) para abrir
        espaço para a barra lateral do sistema. Aqui não existe barra lateral, e
        sem zerar isso o documento inteiro nasce deslocado para a direita.

     2. `html` está em `font-size: 14px`. Medidas em `rem` encolhem junto: um
        texto de `.87rem` vira 12px, e uma medida de `72ch` vira ~430px dentro
        de um container de 860px — texto espremido no meio de espaço vazio.
        Por isso o documento define a própria base em `px` e dimensiona os
        filhos em `em`, sem depender da raiz.

   O resto é o que texto jurídico longo pede: medida de leitura confortável,
   hierarquia clara para citar cláusula por número, e impressão limpa.
   ───────────────────────────────────────────────────────────────────────────── */

.doc-body {
  margin: 0;
  /* Desfaz o espaço da barra lateral: esta página não tem uma. */
  padding-left: 0;
  background: var(--bg);
  color: var(--txt);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Base própria: o documento não herda os 14px da raiz do sistema. */
  font-size: 16px;
  line-height: 1.7;
}

/* ── Cabeçalho ────────────────────────────────────────────────────────────── */
.doc-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px clamp(20px, 5vw, 56px);
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
}
.doc-brand { display: inline-flex; align-items: center; }
.doc-brand-mark { height: 28px; width: auto; object-fit: contain; display: block; }
.doc-topbar-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ── Corpo ────────────────────────────────────────────────────────────────── */
/* A tela larga vira duas colunas: índice das cláusulas à esquerda, acompanhando
   a rolagem, e o texto à direita. Assim a largura trabalha em vez de virar
   margem vazia — e ainda resolve navegar num documento de 16 cláusulas.
   A coluna de texto para em ~880px porque linha de 150 caracteres não se lê. */
.doc-main {
  max-width: 1560px;
  margin: 0 auto;
  padding: clamp(32px, 4vw, 56px) clamp(20px, 3vw, 48px) 96px;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(32px, 4vw, 72px);
  align-items: start;
}

/* ── Índice das cláusulas ─────────────────────────────────────────────────── */
.doc-indice {
  position: sticky;
  /* 76px = altura da barra do topo, que é sticky e ficaria por cima. */
  top: 92px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding-right: 8px;
}
.doc-indice-titulo {
  display: block;
  font-size: .68em;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--txt-muted);
  margin-bottom: 14px;
}
.doc-indice ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.doc-indice a {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--txt-muted);
  text-decoration: none;
  font-size: .84em;
  line-height: 1.4;
  transition: background .15s, color .15s;
}
.doc-indice a:hover { background: var(--surface-1); color: var(--txt); }
.doc-indice a:focus-visible { outline: 2px solid var(--amber, #84d0e6); outline-offset: 1px; }
.doc-indice-num { font-variant-numeric: tabular-nums; opacity: .6; text-align: right; }

/* O conteúdo cresce, mas não além do que se lê confortavelmente. */
.doc-conteudo { max-width: 880px; min-width: 0; }
/* Página de documento sem índice — a tela de aceite é a única.
   Sem isto ela cai na primeira faixa da grade, a de 260px reservada ao índice,
   e o texto inteiro fica espremido num filete à esquerda com a tela vazia ao
   lado: `max-width` não alarga uma faixa de grade, quem alarga é o `span`.
   O limite de leitura continua existindo, só que agora centralizado. */
.doc-conteudo-largo {
  grid-column: 1 / -1;
  max-width: 940px;
  margin-inline: auto;
  width: 100%;
}

/* Âncora não pode parar debaixo da barra fixa do topo. */
.doc-section { scroll-margin-top: 96px; }

@media (max-width: 1100px) {
  /* Abaixo disso não há espaço para a coluna: o índice vira uma lista compacta
     antes do texto, e a página volta a ser uma coluna só. */
  .doc-main { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .doc-indice {
    position: static;
    max-height: none;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-1);
  }
  .doc-indice ol { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .doc-conteudo { max-width: none; }
}

.doc-head { margin-bottom: 44px; }
.doc-eyebrow {
  display: block;
  font-size: .72em;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--amber, #84d0e6);
  margin-bottom: 12px;
}
.doc-head h1 {
  margin: 0 0 16px;
  font-size: clamp(1.9em, 1.5em + 1.6vw, 2.6em);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.12;
  text-wrap: balance;
}
.doc-intro {
  margin: 0;
  color: var(--txt-muted);
  font-size: 1.06em;
  line-height: 1.72;
}

/* Identificação da versão — é o que dá autoridade ao documento. */
.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 36px;
  margin-top: 28px;
  padding: 18px 22px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-1);
}
.doc-meta > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.doc-meta .rot {
  font-size: .68em;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--txt-muted);
}
.doc-meta .val {
  font-size: .95em;
  font-weight: 700;
  color: var(--txt);
  word-break: break-word;
}
.doc-meta .val.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .84em;
  letter-spacing: .05em;
}

/* ── Seções ───────────────────────────────────────────────────────────────── */
.doc-section { margin-top: 44px; }
.doc-section h2 {
  margin: 0 0 18px;
  font-size: 1.22em;
  font-weight: 800;
  letter-spacing: -.012em;
  line-height: 1.35;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  text-wrap: balance;
}
.doc-section p {
  margin: 0 0 16px;
  font-size: 1em;
  line-height: 1.78;
  color: var(--txt-muted);
}
.doc-section p strong { color: var(--txt); font-weight: 700; }
.doc-section ul {
  margin: 0 0 16px;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.doc-section li {
  position: relative;
  padding-left: 22px;
  font-size: 1em;
  line-height: 1.72;
  color: var(--txt-muted);
}
.doc-section li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber, #84d0e6);
}
.doc-section li strong { color: var(--txt); font-weight: 700; }

/* Cláusula que muda o entendimento do contrato: precisa saltar da leitura. */
.doc-alert {
  margin: 0 0 16px;
  padding: 16px 20px;
  border-left: 3px solid var(--amber, #84d0e6);
  border-radius: 10px;
  background: rgba(132, 208, 230, .08);
  font-size: 1em;
  line-height: 1.72;
  color: var(--txt);
}

/* ── Registro do aceite do próprio usuário ────────────────────────────────── */
.doc-aceite {
  margin-top: 52px;
  padding: 24px 26px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-1);
}
.doc-aceite h2 { margin: 0 0 8px; font-size: 1.1em; font-weight: 800; }
.doc-aceite > p { margin: 0 0 20px; font-size: .95em; color: var(--txt-muted); }
.doc-aceite-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 18px 28px;
}
.doc-aceite-grid .rot {
  display: block;
  font-size: .68em;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--txt-muted);
  margin-bottom: 4px;
}
.doc-aceite-grid .val { font-size: .95em; font-weight: 700; word-break: break-word; }

/* ── Formulário de novo aceite ────────────────────────────────────────────── */
.doc-aceite-form {
  margin-top: 36px;
  padding: 24px 26px;
  border: 1px solid var(--amber-border, rgba(132, 208, 230, .4));
  border-radius: 14px;
  background: var(--surface-1);
}
.doc-aceite-check {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  font-size: 1em;
  line-height: 1.65;
  cursor: pointer;
}
.doc-aceite-check input {
  margin-top: 4px; flex: 0 0 auto; width: 18px; height: 18px;
  cursor: pointer; accent-color: var(--amber, #84d0e6);
}
.doc-aceite-form .btn { margin-top: 20px; }

.doc-footer {
  padding: 26px 20px 48px;
  text-align: center;
  font-size: .84em;
  color: var(--txt-muted);
  border-top: 1px solid var(--border);
}
.doc-footer p { margin: 0; }

/* ── Impressão ────────────────────────────────────────────────────────────── */
@media print {
  .doc-topbar, .doc-footer, .doc-aceite-form { display: none !important; }
  .doc-body { background: #fff; color: #000; font-size: 11pt; }
  .doc-main { max-width: none; padding: 0; }
  .doc-section h2 { break-after: avoid; }
  .doc-section p, .doc-section li, .doc-alert { color: #222; }
  .doc-alert { border-left-color: #666; background: transparent; }
  a[href]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}

@media (max-width: 560px) {
  .doc-body { font-size: 15px; }
  .doc-topbar { flex-wrap: wrap; }
  .doc-meta { gap: 14px 20px; padding: 16px 18px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   O mesmo documento dentro do painel.

   Quem já entrou lê os Termos como uma tela do sistema, com a barra lateral no
   lugar. Aí o `.doc-body` e o `.doc-main` do layout público não existem, e este
   invólucro precisa reproduzir os dois papéis deles:

     1. a base de 16px — o painel roda numa raiz de 14px, e sem reabrir a base
        cada medida em `em` daqui encolhe junto;
     2. a grade de duas colunas (índice + texto).

   O que ele NÃO faz é mexer no `padding-left` do body: aqui a barra lateral
   existe de verdade e o espaço dela é legítimo.
   ───────────────────────────────────────────────────────────────────────────── */
.doc-embed {
  font-size: 16px;
  line-height: 1.7;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(28px, 3vw, 56px);
  align-items: start;
  max-width: 1280px;
}
.doc-embed .doc-indice {
  /* Abaixo da barra superior do painel, que também é fixa. */
  top: 104px;
  max-height: calc(100vh - 140px);
  grid-row: 1 / span 2;
}
.doc-embed .doc-conteudo { max-width: 860px; }
.doc-embed .doc-section { scroll-margin-top: 110px; }
.doc-embed .doc-head { padding-top: 0; }

/* A ação de imprimir, que no layout público mora na barra superior. */
.doc-embed-acoes {
  grid-column: 2;
  display: flex;
  justify-content: flex-end;
  margin-bottom: -8px;
}

@media (max-width: 1100px) {
  .doc-embed { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .doc-embed .doc-indice {
    position: static;
    max-height: none;
    grid-row: auto;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-1);
  }
  .doc-embed-acoes { grid-column: 1; }
}

@media print {
  .doc-embed { display: block; max-width: none; }
  .doc-embed-acoes, .doc-embed .doc-indice { display: none !important; }
}