/* ==========================================================================
   legal.css — documentos oficiais do GT-IoTEdu
   (Política de Privacidade, Termos de Uso)

   Mesmo tema escuro do restante do site. O que dá o peso de documento
   formal aqui não é a cor, e sim a estrutura: bloco de metadados, sumário,
   seções numeradas, tabelas com régua e uma folha de estilo de impressão.
   ========================================================================== */

:root {
  /* superfícies — mesmas convenções do index.html (slate-800/60, slate-900/40) */
  --legal-surface:      rgba(30, 41, 59, .6);
  --legal-surface-soft: rgba(15, 23, 42, .45);

  /* texto */
  --legal-ink:        #cbd5e1;  /* texto corrente   (slate-300) */
  --legal-ink-strong: #f1f5f9;  /* títulos          (slate-100) */
  --legal-ink-soft:   #94a3b8;  /* metadados, apoio (slate-400) */

  /* linhas e destaques */
  --legal-rule:       #334155;  /* bordas           (slate-700) */
  --legal-rule-soft:  #1e293b;  /* bordas internas  (slate-800) */
  --legal-accent:     #60a5fa;  /* links e numeração (blue-400) */
  --legal-flag:       #f87171;  /* pendências        (red-400)  */
}

/* ---------- trilha de navegação ---------------------------------------- */

.legal-breadcrumb {
  max-width: 56rem;
  margin: 0 auto 1rem;
  padding: 0 .25rem;
  font-size: .8rem;
  color: #94a3b8;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.legal-breadcrumb a { color: #cbd5e1; text-decoration: none; }
.legal-breadcrumb a:hover { color: var(--legal-accent); }
.legal-breadcrumb .current { color: #f1f5f9; font-weight: 600; }

/* ---------- a folha do documento ---------------------------------------- */

.legal-sheet {
  max-width: 56rem;
  margin: 0 auto;
  background: var(--legal-surface);
  color: var(--legal-ink);
  border: 1px solid var(--legal-rule);
  border-radius: 14px;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .6);
  padding: clamp(1.75rem, 4vw, 4rem);
  line-height: 1.75;
}

.legal-sheet a { color: var(--legal-accent); text-decoration: underline; text-underline-offset: 2px; }
.legal-sheet a:hover { color: #93c5fd; text-decoration-thickness: 2px; }

.legal-sheet strong { color: var(--legal-ink-strong); font-weight: 600; }

.legal-sheet code {
  background: rgba(15, 23, 42, .7);
  border: 1px solid var(--legal-rule);
  border-radius: 4px;
  padding: .05em .4em;
  font-size: .86em;
  color: #93c5fd;
  word-break: break-word;
}

/* ---------- aviso de rascunho (remover ao publicar a versão final) ------ */

.legal-draft {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  background: rgba(251, 146, 60, .1);
  border: 1px solid rgba(251, 146, 60, .35);
  border-left: 4px solid #fb923c;
  border-radius: 8px;
  padding: .9rem 1.1rem;
  margin-bottom: 2.5rem;
  font-size: .9rem;
  color: #fed7aa;
}
.legal-draft strong { color: #fdba74; }
.legal-draft svg { width: 20px; height: 20px; flex: none; color: #fb923c; margin-top: .15rem; }

/* ---------- cabeçalho do documento ------------------------------------- */

.legal-head { border-bottom: 2px solid var(--legal-rule); padding-bottom: 1.75rem; }

.legal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0 0 .9rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--legal-accent);
}
.legal-eyebrow svg { width: 15px; height: 15px; }

.legal-head h1 {
  margin: 0;
  font-size: clamp(1.85rem, 4.5vw, 2.6rem);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
}

.legal-lede {
  margin: .9rem 0 0;
  font-size: 1.05rem;
  color: var(--legal-ink-soft);
  max-width: 44rem;
}

.legal-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.1rem 1.75rem;
  margin: 2rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--legal-rule);
}
.legal-meta div { margin: 0; }
.legal-meta dt {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--legal-ink-soft);
  margin-bottom: .25rem;
}
.legal-meta dd { margin: 0; font-size: .9rem; font-weight: 600; color: var(--legal-ink-strong); }
/* sem caixa aqui: numa coluna estreita a borda do <code> quebra no meio da palavra */
.legal-meta dd code {
  background: none;
  border: 0;
  padding: 0;
  font-weight: 500;
  font-size: .82rem;
  color: #93c5fd;
}

/* ---------- sumário ----------------------------------------------------- */

.legal-toc {
  background: var(--legal-surface-soft);
  border: 1px solid var(--legal-rule);
  border-radius: 10px;
  padding: 1.35rem 1.6rem;
  margin: 2.5rem 0;
}
.legal-toc h2 {
  margin: 0 0 .75rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--legal-ink-soft);
}
.legal-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
  columns: 2;
  column-gap: 2rem;
}
.legal-toc li { counter-increment: toc; break-inside: avoid; margin: .3rem 0; font-size: .9rem; }
.legal-toc li::before {
  content: counter(toc) ".";
  display: inline-block;
  min-width: 1.6rem;   /* cabe o "10." sem colar no texto */
  padding-right: .35rem;
  color: var(--legal-ink-soft);
  font-variant-numeric: tabular-nums;
}
.legal-toc a { color: var(--legal-ink); text-decoration: none; }
.legal-toc a:hover { color: var(--legal-accent); text-decoration: underline; }

@media (max-width: 640px) { .legal-toc ol { columns: 1; } }

/* ---------- corpo ------------------------------------------------------- */

.legal-body section { margin-top: 2.75rem; scroll-margin-top: 6rem; }

.legal-body h2 {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  margin: 0 0 .9rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--legal-rule);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #fff;
}
.legal-body h2 .num {
  flex: none;
  min-width: 1.9rem;
  height: 1.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(96, 165, 250, .15);
  border: 1px solid rgba(96, 165, 250, .4);
  color: var(--legal-accent);
  font-size: .85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.legal-body h3 {
  margin: 1.9rem 0 .5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #e2e8f0;
}

.legal-body p { margin: 0 0 1rem; }
.legal-body ul, .legal-body ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.legal-body li { margin: .4rem 0; }
.legal-body li::marker { color: var(--legal-ink-soft); }

/* destaque de parágrafo importante */
.legal-callout {
  background: var(--legal-surface-soft);
  border: 1px solid var(--legal-rule);
  border-left: 3px solid var(--legal-accent);
  border-radius: 0 8px 8px 0;
  padding: .9rem 1.2rem;
  margin: 1.25rem 0;
}

/* ---------- tabelas ----------------------------------------------------- */

.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-size: .9rem;
}
.legal-table th, .legal-table td {
  border: 1px solid var(--legal-rule);
  padding: .6rem .75rem;
  text-align: left;
  vertical-align: top;
}
.legal-table thead th {
  background: rgba(15, 23, 42, .6);
  font-weight: 700;
  color: var(--legal-ink-strong);
}
.legal-table tbody th {
  background: rgba(15, 23, 42, .45);
  font-weight: 600;
  color: var(--legal-ink-strong);
  white-space: nowrap;
}
.legal-table tbody tr:hover td { background: rgba(148, 163, 184, .05); }

/* tabelas largas rolam dentro de si; a página nunca rola na horizontal */
@media (max-width: 720px) {
  .legal-table { display: block; overflow-x: auto; white-space: nowrap; }
  .legal-table td, .legal-table th { white-space: normal; min-width: 9rem; }
}

/* ---------- pendências (vermelho) --------------------------------------- */

.pendente {
  color: var(--legal-flag);
  font-weight: 700;
  background: rgba(248, 113, 113, .12);
  border: 1px dashed rgba(248, 113, 113, .55);
  border-radius: 4px;
  padding: .05em .4em;
  /* quando o trecho quebra em duas linhas, cada pedaço fecha a própria borda */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.pendente-bloco {
  color: #fca5a5;
  font-weight: 600;
  background: rgba(248, 113, 113, .1);
  border: 1px dashed rgba(248, 113, 113, .45);
  border-radius: 6px;
  padding: .7rem 1rem;
  margin: 0 0 1.1rem;
  font-size: .9rem;
}

/* ---------- rodapé do documento ----------------------------------------- */

.legal-foot {
  margin-top: 3.5rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--legal-rule);
  font-size: .85rem;
  color: var(--legal-ink-soft);
}
.legal-foot p { margin: 0 0 .3rem; }
.legal-foot strong { color: var(--legal-ink-strong); }
.legal-foot-sub { font-size: .8rem; }

/* ---------- impressão ---------------------------------------------------- */
/* Documento impresso sai em papel: inverte para claro e tira a moldura. */

@media print {
  nav, body > footer, .legal-breadcrumb, .legal-draft { display: none !important; }

  body { background: #fff !important; color: #000 !important; }
  main { padding: 0 !important; }

  .legal-sheet {
    background: #fff;
    color: #1e293b;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    max-width: none;
  }
  .legal-sheet a { color: #000; text-decoration: none; }
  .legal-sheet strong,
  .legal-head h1,
  .legal-body h2,
  .legal-body h3,
  .legal-meta dd,
  .legal-foot strong { color: #0f172a; }
  .legal-lede, .legal-meta dt, .legal-foot { color: #475569; }
  .legal-eyebrow { color: #1d4ed8; }

  .legal-sheet code { background: #f1f5f9; border-color: #e2e8f0; color: #0f172a; }
  .legal-head, .legal-body h2, .legal-meta, .legal-foot { border-color: #cbd5e1; }

  .legal-toc, .legal-callout { background: #f8fafc; border-color: #e2e8f0; }
  .legal-toc a { color: #1e293b; }
  .legal-body h2 .num { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }

  .legal-table th, .legal-table td { border-color: #cbd5e1; }
  .legal-table thead th, .legal-table tbody th { background: #f1f5f9; color: #0f172a; }

  .pendente, .pendente-bloco { background: #f5f5f5; border-color: #999; color: #000; }

  .legal-body section { break-inside: auto; }
  .legal-body h2, .legal-body h3 { break-after: avoid; }
  .legal-table { break-inside: avoid; }
}