/* =============================================================================
   TO PRO JOGO - termos.css: Termos de Uso, Politica de Privacidade e a caixa
   de aceite do cadastro
   =============================================================================

   Carregada por termos.html, privacidade.html e cadastro.html. Usa so os
   tokens do app.css e do novo.css (var(--txt), var(--ink-800)...), entao
   troca junto com o tema claro e o escuro. Todo nome comeca com "lg-"
   (legal) ou "tpj-aceite", para nunca casar com nada das outras telas.
   ========================================================================== */

/* ---- A caixa "Li e aceito" do cadastro --------------------------------------- */
.campo.tpj-aceite{ margin-top:4px; }
html[data-visual="novo"] .campo label.tpj-aceite-linha,
.campo label.tpj-aceite-linha{ display:flex; align-items:flex-start; gap:12px; margin:0; cursor:pointer;
  font-size:14px; letter-spacing:0; text-transform:none; font-weight:500; color:var(--txt); }
html[data-visual="novo"][data-tema] .campo.tpj-aceite input[type="checkbox"],
.campo.tpj-aceite input[type="checkbox"]{
  -webkit-appearance:auto; appearance:auto; flex:none; width:22px; height:22px; min-height:0; margin:1px 0 0; padding:0;
  border:0; border-radius:6px; background:none; box-shadow:none; accent-color:var(--brand-txt, var(--brand)); cursor:pointer; }
html[data-visual="novo"][data-tema] .campo.tpj-aceite .tpj-aceite-texto,
.campo.tpj-aceite .tpj-aceite-texto{ font-size:14px; line-height:1.5; font-weight:500; color:var(--txt); letter-spacing:-.005em; text-transform:none; }
.tpj-aceite-texto a{ color:var(--brand-txt, var(--brand)); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.campo.tpj-aceite.invalido .tpj-aceite-linha input[type="checkbox"]{ outline:2px solid var(--live,#D70015); outline-offset:2px; }

/* ---- As paginas legais -------------------------------------------------------- */
body.lg-corpo{ padding:0; background:var(--ink-900); color:var(--txt); }
.lg{ width:100%; max-width:760px; margin:0 auto; padding:0 16px calc(48px + env(safe-area-inset-bottom)); }
@media (min-width:720px){ .lg{ padding:0 28px 64px; } }
.lg-topo{ position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:calc(12px + env(safe-area-inset-top)) 16px 12px; background:var(--barra); border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); }
.lg-topo .logo{ font-size:18px; }
.lg-topo nav{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.lg-topo nav a{ font-size:13.5px; font-weight:600; color:var(--txt); padding:7px 12px; border-radius:999px; }
.lg-topo nav a[aria-current="page"]{ background:var(--ink-700); }

.lg-cab{ padding:28px 0 6px; }
.lg-cab h1{ font-size:clamp(28px, 7vw, 40px); line-height:1.08; font-weight:800; letter-spacing:-.04em; color:var(--txt); }
.lg-versao{ margin-top:8px; font-size:13px; color:var(--dim); }

.lg-mvp{ margin:18px 0 8px; padding:16px 18px; border-radius:18px; background:var(--ink-800); box-shadow:var(--sombra-leve,none);
  border-left:4px solid var(--brand); font-size:14.5px; line-height:1.6; color:var(--txt); }
.lg-mvp b{ display:block; font-size:15.5px; margin-bottom:4px; }

.lg-indice{ margin:18px 0 6px; padding:14px 18px; border-radius:18px; background:var(--ink-800); box-shadow:var(--sombra-leve,none); }
.lg-indice p{ font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-bottom:8px; }
.lg-indice ol{ margin:0; padding-left:20px; display:grid; gap:4px; }
.lg-indice a{ font-size:14px; font-weight:600; color:var(--brand-txt, var(--brand)); }

.lg section{ padding-top:26px; scroll-margin-top:72px; }
.lg h2{ font-size:20px; line-height:1.25; font-weight:800; letter-spacing:-.025em; color:var(--txt); margin-bottom:10px; }
.lg h3{ font-size:16px; font-weight:700; color:var(--txt); margin:16px 0 6px; }
.lg p, .lg li{ font-size:15.5px; line-height:1.7; color:var(--txt); }
.lg p + p{ margin-top:10px; }
.lg section ul, .lg section ol{ padding-left:22px; margin:8px 0; display:grid; gap:6px; }
.lg a{ color:var(--brand-txt, var(--brand)); text-decoration:underline; text-underline-offset:2px; }
.lg a[href^="https://wa.me/"]{ white-space:nowrap; }
.lg-fonte{ margin-top:10px; padding:10px 14px; border-radius:12px; background:var(--ink-700); font-size:13.5px !important; line-height:1.6 !important; color:var(--dim) !important; }
.lg-fonte b{ color:var(--txt); }
.lg-tabela{ width:100%; border-collapse:collapse; margin:10px 0; font-size:14px; }
.lg-tabela th, .lg-tabela td{ text-align:left; vertical-align:top; padding:9px 10px; border-bottom:1px solid var(--line); line-height:1.5; color:var(--txt); }
.lg-tabela th{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); font-weight:800; }
@media (max-width:560px){
  .lg-tabela, .lg-tabela tbody, .lg-tabela tr, .lg-tabela td{ display:block; width:100%; }
  .lg-tabela thead{ display:none; }
  .lg-tabela tr{ padding:10px 0; border-bottom:1px solid var(--line); }
  .lg-tabela td{ border:0; padding:3px 0; }
  .lg-tabela td::before{ content:attr(data-r) ": "; font-weight:700; color:var(--dim); }
}
.lg-aviso-fim{ margin-top:30px; padding:14px 16px; border-radius:16px; background:var(--ink-800); box-shadow:var(--sombra-leve,none); font-size:14px !important; color:var(--dim) !important; }
.lg-pe{ margin-top:28px; padding-top:18px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:8px 18px; font-size:14px; }
.lg-pe a{ font-weight:600; }