/* Randan — páginas legais (/legal/*).
   Complementa css/styles.css: reaproveita tokens (--verde, --ambar, --esp-*) e
   a casca (nav/footer). Só o que é próprio de documento longo mora aqui.

   Mobile-first, como o resto do site: base para telas pequenas; o índice lateral
   só vira coluna a partir de 900px. */

.legal {
  background: #fff;
  padding: var(--esp-6) 0 var(--esp-8);
}

.legal__inner {
  display: flex;
  flex-direction: column;
  gap: var(--esp-5);
}

/* No mobile o documento vem primeiro: um índice de 8 links antes do título
   empurraria o texto para baixo da dobra. No desktop (grade) a ordem é a
   natural — por isso o reset dentro do media query de 900px. */
.legal-doc { order: 1; }
.legal-indice { order: 2; }

/* --- Índice dos documentos (lateral no desktop, lista no mobile) ----------- */

.legal-indice {
  background: var(--fundo-suave);
  border: 1px solid var(--borda-card);
  border-radius: 12px;
  padding: var(--esp-3);
}

.legal-indice .tag {
  display: block;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--verde);
  margin-bottom: var(--esp-2);
}

.legal-indice ul { list-style: none; }

.legal-indice li + li { margin-top: 2px; }

.legal-indice a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--verde-texto);
  border-left: 3px solid transparent;
}

.legal-indice a:hover {
  background: #fff;
  color: var(--verde);
}

.legal-indice a[aria-current="page"] {
  background: #fff;
  border-left-color: var(--ambar);
  color: var(--petroleo);
  font-weight: 600;
}

/* --- Documento ------------------------------------------------------------ */

.legal-doc {
  min-width: 0; /* impede que tabela larga estoure a grade */
  max-width: 72ch;
  color: var(--verde-texto);
  font-size: 16px;
  line-height: 1.7;
}

.legal-trilha {
  font-size: 13px;
  color: var(--cinza-texto);
  margin-bottom: var(--esp-2);
}

.legal-trilha a { color: var(--verde); }
.legal-trilha a:hover { color: var(--ambar); }

.legal-doc h1 {
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--petroleo);
  margin-bottom: var(--esp-2);
}

.legal-versao {
  font-size: 14px;
  color: var(--cinza-texto);
  padding-bottom: var(--esp-3);
  border-bottom: 1px solid var(--borda-card);
  margin-bottom: var(--esp-4);
}

.legal-doc h2 {
  font-size: clamp(20px, 3vw, 24px);
  line-height: 1.25;
  color: var(--petroleo);
  margin: var(--esp-6) 0 var(--esp-2);
  padding-top: var(--esp-1);
}

.legal-doc h3 {
  font-size: 17px;
  color: var(--verde);
  margin: var(--esp-4) 0 var(--esp-1);
}

.legal-doc p { margin-bottom: var(--esp-2); }

.legal-doc strong { color: var(--petroleo); font-weight: 600; }

.legal-doc a { color: var(--verde); text-decoration: underline; text-underline-offset: 2px; }
.legal-doc a:hover { color: var(--ambar); }

.legal-doc ul,
.legal-doc ol {
  margin: 0 0 var(--esp-2) var(--esp-3);
}

.legal-doc li { margin-bottom: 6px; }

.legal-doc hr {
  border: 0;
  border-top: 1px solid var(--borda-card);
  margin: var(--esp-5) 0;
}

.legal-doc blockquote {
  background: var(--fundo-suave);
  border-left: 4px solid var(--verde-claro);
  border-radius: 0 8px 8px 0;
  padding: var(--esp-2) var(--esp-3);
  margin: var(--esp-3) 0;
}

.legal-doc blockquote p:last-child { margin-bottom: 0; }

.legal-doc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--fundo-suave);
  border-radius: 4px;
  padding: 1px 5px;
}

/* Tabela: rola dentro do próprio container — a página nunca rola na horizontal */
.legal-doc table {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: var(--esp-3) 0;
}

.legal-doc th,
.legal-doc td {
  border: 1px solid var(--borda-card);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

.legal-doc th {
  background: var(--fundo-suave);
  color: var(--petroleo);
  font-weight: 600;
}

/* --- Sumário da página ---------------------------------------------------- */

.legal-sumario {
  background: var(--fundo-suave);
  border-radius: 12px;
  padding: var(--esp-3);
  margin-bottom: var(--esp-5);
}

.legal-sumario .tag {
  display: block;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--verde);
  margin-bottom: var(--esp-1);
}

.legal-sumario ul {
  list-style: none;
  margin: 0;
  font-size: 14px;
  columns: 1;
}

.legal-sumario li { margin-bottom: 4px; }
.legal-sumario a { color: var(--verde-texto); text-decoration: none; }
.legal-sumario a:hover { color: var(--ambar); }

/* --- Faixa de rascunho e lacunas ------------------------------------------ */

.legal-faixa {
  display: flex;
  gap: var(--esp-2);
  align-items: flex-start;
  background: var(--fundo-erro);
  border: 1px solid var(--borda-erro);
  border-radius: 12px;
  padding: var(--esp-2) var(--esp-3);
  margin-bottom: var(--esp-3);
  font-size: 14px;
  line-height: 1.5;
  color: var(--marrom-suave);
}

.legal-faixa .icone {
  font-size: 22px;
  color: var(--laranja-alerta);
  flex: none;
}

.lacuna {
  background: #FDF0D5;
  border-bottom: 2px dotted var(--ambar-escuro);
  color: var(--ambar-escuro);
  font-weight: 600;
  padding: 0 2px;
  white-space: nowrap;
}

.legal-rodape-doc {
  margin-top: var(--esp-6);
  padding-top: var(--esp-3);
  border-top: 1px solid var(--borda-card);
  font-size: 14px;
  color: var(--cinza-texto);
}

/* --- Camadas maiores ------------------------------------------------------ */

@media (min-width: 600px) {
  .legal-sumario ul { columns: 2; column-gap: var(--esp-4); }
}

@media (min-width: 900px) {
  .legal { padding: var(--esp-8) 0 var(--esp-10); }

  .legal__inner {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: var(--esp-6);
    align-items: start;
  }

  .legal-doc, .legal-indice { order: 0; } /* a grade já posiciona */

  /* acompanha a leitura sem cobrir: para abaixo da nav fixa */
  .legal-indice {
    position: sticky;
    top: calc(var(--altura-nav) + 24px);
  }

  .legal-doc { font-size: 17px; }
}

@media print {
  .nav, .footer, .legal-indice, .legal-sumario, .legal-trilha { display: none; }
  .legal-doc { max-width: none; font-size: 11pt; }
  .legal-doc a { color: inherit; text-decoration: none; }
}