/* =============================================================================
   LEGAL.CSS — Páginas de documento legal
   (privacidade.html / termos.html / exclusao-conta.html)
   -----------------------------------------------------------------------------
   Carregado DEPOIS de driver-plus.css, e SÓ pelas páginas legais — a landing
   não paga por estes estilos. Reaproveita a navbar, o rodapé e os tokens do
   Aurora; aqui vive apenas o que um documento longo de texto precisa e que
   nenhum componente .ds-* cobre: a coluna de leitura, o sumário fixo, a
   numeração das seções e as regras de impressão.

   Sem cores cruas: tudo lê tokens do DS.
   ========================================================================== */

/* Âncoras do sumário não podem parar embaixo da navbar sticky. */
.dp-legal-page { scroll-behavior: smooth; }
.dp-legal-section { scroll-margin-top: var(--space-9); }

@media (prefers-reduced-motion: reduce) {
  .dp-legal-page { scroll-behavior: auto; }
}

.dp-legal-main {
  padding-top: var(--space-8);
  padding-bottom: var(--space-9);
}

/* =========================================================================
   CABEÇALHO DO DOCUMENTO
   ========================================================================= */
.dp-legal-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: 46rem;
  margin-bottom: var(--space-8);
}
.dp-legal-eyebrow { color: var(--brand-accent-vivid); }
.dp-legal-lede { color: var(--text-muted); }
.dp-legal-lede strong { color: var(--text-strong); font-weight: var(--weight-medium); }

/* Alternador entre os dois documentos — duas pílulas de vidro. */
.dp-legal-switch {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.dp-legal-tab {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  background: var(--glass-tint);
  color: var(--text-body);
  font-size: var(--fluid-14);
  text-decoration: none;
  transition: color var(--dur-base), border-color var(--dur-base), background var(--dur-base);
}
.dp-legal-tab:hover { color: var(--text-strong); border-color: var(--border-strong); }
.dp-legal-tab[aria-current="page"] {
  color: var(--brand-accent-vivid);
  border-color: var(--border-strong);
  background: var(--glass-tint-strong);
}

/* =========================================================================
   LAYOUT — sumário + documento
   Mobile: uma coluna, sumário recolhível no topo.
   ≥1024px: sumário vira coluna fixa à esquerda.
   ========================================================================= */
.dp-legal-layout {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

@media only screen and (min-width: 1024px) {
  .dp-legal-layout {
    grid-template-columns: 17rem minmax(0, 1fr);
    gap: var(--space-8);
  }
}

/* -------- Sumário ---------------------------------------------------- */
.dp-legal-toc {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: var(--glass-tint);
  padding: var(--space-4) var(--space-5);
}
.dp-legal-toc-title {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--fluid-12);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--text-muted);
}
.dp-legal-toc-title::-webkit-details-marker { display: none; }
.dp-legal-toc-title::after {
  content: "▾";
  float: right;
  transition: transform var(--dur-base) var(--ease-out);
}
.dp-legal-toc[open] .dp-legal-toc-title::after { transform: rotate(180deg); }

.dp-legal-toc-list {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.dp-legal-toc-list a {
  display: flex;
  gap: var(--space-3);
  padding: 0.35rem 0;
  color: var(--text-muted);
  font-size: var(--fluid-14);
  line-height: var(--lh-snug);
  text-decoration: none;
  transition: color var(--dur-base);
}
.dp-legal-toc-list a:hover { color: var(--text-strong); }
.dp-legal-toc-list a.is-active { color: var(--brand-accent-vivid); }
.dp-legal-toc-num { flex: 0 0 1.6rem; color: var(--text-muted); opacity: 0.7; }
.dp-legal-toc-list a.is-active .dp-legal-toc-num { color: inherit; opacity: 1; }

@media only screen and (min-width: 1024px) {
  /* No desktop o sumário é sempre visível e acompanha o scroll; o summary
     vira um rótulo comum (o <details> continua aberto pelo atributo `open`). */
  .dp-legal-toc {
    position: sticky;
    top: var(--space-9);
    max-height: calc(100vh - var(--space-10));
    overflow-y: auto;
  }
  .dp-legal-toc-title { pointer-events: none; }
  .dp-legal-toc-title::after { display: none; }
}

/* -------- Documento --------------------------------------------------- */
.dp-legal-doc {
  max-width: 46rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: var(--glass-tint);
  padding: var(--space-7) var(--space-6);
}

@media only screen and (max-width: 767px) {
  .dp-legal-doc { padding: var(--space-5) var(--space-4); }
}

.dp-legal-section + .dp-legal-section {
  margin-top: var(--space-7);
  padding-top: var(--space-7);
  border-top: 1px solid var(--border-hairline);
}

.dp-legal-h2 {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--fluid-24);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  color: var(--text-strong);
  text-wrap: balance;
}
.dp-legal-num {
  flex: 0 0 auto;
  color: var(--brand-accent-vivid);
  opacity: 0.8;
}

.dp-legal-p { margin: 0 0 var(--space-4); }
.dp-legal-p:last-child { margin-bottom: 0; }
.dp-legal-p strong { color: var(--text-strong); font-weight: var(--weight-medium); }

/* Marcador em ouro no lugar do disco padrão. */
.dp-legal-list {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.dp-legal-list li {
  position: relative;
  padding-left: var(--space-5);
  color: var(--text-body);
  font-size: var(--fluid-16);
  line-height: var(--lh-relaxed);
}
.dp-legal-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-circle);
  background: var(--brand-accent-vivid);
  opacity: 0.75;
}
.dp-legal-list strong { color: var(--text-strong); font-weight: var(--weight-medium); }

.dp-legal-mail { color: var(--brand-accent-vivid); }

/* "Última atualização: ..." no fim do documento. */
.dp-legal-updated {
  margin-top: var(--space-6);
  color: var(--text-muted);
  font-size: var(--fluid-14);
}

.dp-legal-back {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-hairline);
}
.dp-legal-back a { color: var(--text-muted); text-decoration: none; }
.dp-legal-back a:hover { color: var(--brand-accent-vivid); }

/* =========================================================================
   EXCLUSÃO DE CONTA — o pouco que a página exclusao-conta.html precisa além
   do documento legal: passos numerados, o formulário e o painel de
   confirmação do mailto:. Só tokens do DS, nenhuma cor crua.
   ========================================================================= */

/* Passos do caminho in-app — numeral em mono/ouro, no espírito do
   .dp-legal-list (que usa marcador redondo). */
.dp-del-steps {
  list-style: none;
  counter-reset: dp-del-step;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.dp-del-steps li {
  counter-increment: dp-del-step;
  position: relative;
  padding-left: var(--space-6);
  color: var(--text-body);
  font-size: var(--fluid-16);
  line-height: var(--lh-relaxed);
}
.dp-del-steps li::before {
  content: counter(dp-del-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-size: var(--fluid-14);
  color: var(--brand-accent-vivid);
  opacity: 0.8;
}
.dp-del-steps strong { color: var(--text-strong); font-weight: var(--weight-medium); }

/* -------- Formulário --------------------------------------------------- */
.dp-del-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: var(--space-5) 0;
}
.dp-del-optional { color: var(--text-muted); font-weight: var(--weight-normal); }

/* Único controle sem componente .ds-*: o checkbox de ciência. */
.dp-del-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--text-body);
  font-size: var(--fluid-14);
  line-height: var(--lh-relaxed);
  cursor: pointer;
}
.dp-del-check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.1em;
  height: 1.1em;
  margin-top: 0.15em;
  accent-color: var(--brand-accent);
  cursor: pointer;
}
.dp-del-check strong { color: var(--text-strong); font-weight: var(--weight-medium); }

/* -------- Painel de confirmação (revelado pelo JS) --------------------- */
.dp-del-status {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: var(--glass-tint-strong);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.dp-del-status-msg {
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text-body);
  font-family: var(--font-mono);
  font-size: var(--fluid-14);
  line-height: var(--lh-relaxed);
  white-space: pre-wrap;
  overflow-x: auto;
}

.dp-del-status-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* -------- Envio manual (fallback sempre visível) ----------------------- */
.dp-del-manual {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-hairline);
}

/* Feedback do data-copy do DS (initCopy marca data-copied por ~1,2s). */
.dp-del-status [data-copy][data-copied="true"]::after,
.dp-del-manual [data-copy][data-copied="true"]::after {
  content: " ✓ copiado";
  color: var(--brand-support);
}

/* =========================================================================
   IMPRESSÃO — o Google Play e usuários costumam salvar estes documentos em
   PDF; imprime só o texto, em preto no branco, sem navbar/sumário/rodapé.
   ========================================================================= */
@media print {
  body::before,
  .dp-nav-header,
  .ds-drawer,
  .dp-legal-toc,
  .dp-legal-switch,
  .dp-legal-back,
  .dp-del-form,
  .dp-del-status,
  .dp-del-manual [data-copy],
  .ds-footer { display: none !important; }

  .dp-legal-page { background: #fff; }
  .dp-legal-doc,
  .dp-legal-main { max-width: none; padding: 0; border: 0; background: none; }
  .dp-legal-head { margin-bottom: 1.5rem; }
  .dp-legal-section { break-inside: auto; }
  .dp-legal-h2 { break-after: avoid; }

  .ds-heading,
  .dp-legal-h2,
  .dp-legal-p,
  .dp-legal-lede,
  .dp-legal-list li,
  .dp-del-steps li,
  .dp-legal-num,
  .dp-legal-mail,
  .dp-legal-eyebrow,
  .dp-legal-doc strong,
  .dp-legal-lede strong { color: #000 !important; }
}