/* ============================================================
   Documento legal — aviso de privacidade e aceite LGPD
   ============================================================
   Saiu de `core/templates/core/includes/legal_document_styles.html`, onde eram
   285 linhas de `<style>` embutido incluídas por duas telas. O conteúdo veio
   como estava, de propósito: é documento jurídico, e reescrever o CSS por gosto
   arriscaria a apresentação de um texto que tem valor legal.

   O que NÃO pode mudar aqui, e por quê:

   `.content-wrapper` precisa continuar com `max-height` e `overflow-y: auto`.
   O aceite só habilita depois que a pessoa rola até o fim, e a detecção é
   `scrollTop + clientHeight >= scrollHeight - 50` no próprio container. Se ele
   deixar de rolar, a conta fica verdadeira desde o primeiro instante e a
   exigência de leitura desaparece sem erro nenhum na tela, num fluxo que existe
   justamente para registrar que a pessoa leu.
   ============================================================ */

/* Os `src:url()` abaixo são relativos a ESTE arquivo, como no `tokens.css`.
   Estavam escritos com `{%% static %%}` porque este bloco vivia dentro de um
   template; ao virar folha de estilo a tag ficou literal, e o
   `ManifestStaticFilesStorage` do `collectstatic` tentou resolvê-la como nome de
   arquivo. Derrubou o deploy de 21/08: o container não subiu e produção
   respondeu 502. */
@font-face{
  font-family:"Atkinson Hyperlegible Next";
  src:url("./fonts/atkinson/AtkinsonHyperlegibleNext-Normal-latin.fe43d3268c0a.woff2") format("woff2");
  font-weight:200 800;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Atkinson Hyperlegible Next";
  src:url("./fonts/atkinson/AtkinsonHyperlegibleNext-Normal-latin-ext.592a99bc98c0.woff2") format("woff2");
  font-weight:200 800;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  --bg-main:#141415;
  --bg-card:#1a1a1e;
  --bg-panel:#0d151be0;
  --color-text:#f5f6fa;
  --color-text-muted:#b5b6b8;
  --primary:#ff9000;
  --primary-dark:#ff7100;
  --planejai-amber:#ef8f1d;
  --planejai-amber-deep:#c85b16;
  --planejai-teal:#78d1c0;
  --planejai-bone:#f3ecdf;
  --border-dark:#232325;
  --border-soft:#ffffff14;
  --shadow-card:0 20px 60px rgba(0,0,0,.38);
}

*{margin:0;padding:0;box-sizing:border-box}
body.legal-page-body{
  font-family:"Atkinson Hyperlegible Next",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at top left, rgba(255,144,0,.14), transparent 30%),
    radial-gradient(circle at top right, rgba(120,209,192,.12), transparent 26%),
    linear-gradient(180deg, #111214 0%, #17191e 55%, #121316 100%);
  min-height:100vh;
  padding:20px;
  line-height:1.7;
  color:var(--color-text);
}

.privacy-container{
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 26%),
    radial-gradient(circle at 100% 0, rgba(255,144,0,.08), transparent 24%),
    var(--bg-card);
  border:1px solid var(--border-soft);
  border-radius:24px;
  box-shadow:var(--shadow-card);
  max-width:960px;
  width:100%;
  margin:0 auto;
  overflow:hidden;
  /* Entrada por transição a partir de `@starting-style`, e não por keyframes:
     transição pode ser interrompida e some inteira sob movimento reduzido. */
  opacity:1;
  transform:none;
  /* Entrada: ease-out forte nas duas propriedades, abaixo do teto de 300 ms. */
  transition:opacity 240ms cubic-bezier(.23,1,.32,1), transform 240ms cubic-bezier(.23,1,.32,1);
}
@starting-style{
  .privacy-container{opacity:0;transform:translateY(12px)}
}

.header{
  background:
    radial-gradient(circle at top right, rgba(255,144,0,.18), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
    #14161b;
  color:var(--color-text);
  padding:36px 42px 30px;
  text-align:center;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.header h1{
  font-size:2.2rem;
  font-weight:800;
  /* Tracking é específico do tamanho: título grande pede negativo. */
  letter-spacing:-0.02em;
  line-height:1.1;
  margin-bottom:10px;
  color:var(--planejai-bone);
}

.header p{
  font-size:1rem;
  color:var(--color-text-muted);
  font-weight:600;
}

.content-wrapper{
  padding:36px 40px;
  max-height:60vh;
  overflow-y:auto;
  /* Rolagem suave de 4 000 px é movimento de tela inteira; sob movimento
     reduzido ela vira salto, no fim do arquivo. */
  scroll-behavior:smooth;
  background:linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,255,255,0)), transparent;
}

.content-wrapper::-webkit-scrollbar{width:10px}
.content-wrapper::-webkit-scrollbar-track{background:#17191f;border-radius:10px}
.content-wrapper::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, var(--planejai-amber), var(--planejai-amber-deep));
  border-radius:10px;
}

/* Doze títulos em laranja preenchido eram doze acentos: com o acento em tudo,
   nada se destaca. O título fica em osso e só o numeral leva a cor. */
.content h2{
  color:var(--planejai-bone);
  font-size:1.3rem;
  font-weight:700;
  line-height:1.25;
  letter-spacing:-0.005em;
  margin-top:34px;
  margin-bottom:12px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.content h2 .legal-num{
  color:var(--primary);
  font-weight:800;
  margin-right:.5em;
  font-variant-numeric:tabular-nums;
}

.content h2:first-child{margin-top:0}
.content p,.content li{font-size:1.02rem;line-height:1.65;color:var(--color-text-muted);max-width:68ch}
/* Alinhado à esquerda: justificado em tela abre rios entre as palavras. */
.content p{margin-bottom:14px;text-align:left}
.content strong{color:var(--planejai-bone);font-weight:700}
.content ul{margin-left:24px;margin-bottom:16px}
.content li{margin-bottom:8px}
.legal-intro{
  font-size:1.06rem!important;
  margin-bottom:24px!important;
  color:var(--planejai-bone)!important;
}

.highlight-box{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)), #1d2027;
  border:1px solid rgba(255,255,255,.08);
  border-left:4px solid var(--primary);
  padding:18px 22px;
  margin:20px 0;
  border-radius:14px;
}
.highlight-box.warning{
  background:linear-gradient(180deg, rgba(239,143,29,.06), rgba(200,91,22,.04)), #1d1717;
  border-left-color:var(--planejai-amber-deep);
}
.highlight-box.success{
  background:linear-gradient(180deg, rgba(120,209,192,.08), rgba(120,209,192,.03)), #161f20;
  border-left-color:var(--planejai-teal);
}

.checklist,.prohibited-list{list-style:none;margin-left:0}
.checklist li,.prohibited-list li{padding-left:26px;position:relative;margin-bottom:8px}
/* Marcadores desenhados, não emoji: emoji muda de forma por sistema e não
   respeita a cor do tema. */
.checklist li::before{content:"";position:absolute;left:0;top:.55em;width:12px;height:12px;border-radius:50%;background:var(--planejai-teal)}
.prohibited-list li::before{content:"";position:absolute;left:0;top:.5em;width:12px;height:12px;border-radius:2px;background:var(--planejai-amber-deep)}

.contact-info{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)), #171a21;
  border:1px solid rgba(255,255,255,.08);
  padding:18px 20px;
  border-radius:14px;
  margin:16px 0;
}
.contact-info p{margin-bottom:8px;text-align:left}
.contact-info a{color:var(--planejai-teal);text-decoration:none}
.contact-info a:hover{text-decoration:underline}

.footer{
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)),
    #13161b;
  padding:32px 40px 40px;
  border-top:1px solid rgba(255,255,255,.08);
}

.acceptance{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)), #171a21;
  border:1px solid rgba(255,144,0,.35);
  border-radius:18px;
  padding:24px;
  margin-bottom:24px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.acceptance h3{
  color:var(--planejai-bone);
  font-size:1.25rem;
  margin-bottom:16px;
  font-weight:800;
}
.acceptance ul{list-style:none;margin-left:0}
.acceptance li{margin-bottom:2px;font-size:.98rem;color:var(--color-text-muted)}
.acceptance-check-label{
  display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  padding:10px;margin:0 -10px;border-radius:10px;line-height:1.5;
  transition:background-color 160ms ease,color 160ms ease;
}
.acceptance-check-label:has(input:checked){color:var(--planejai-bone)}
@media (hover:hover) and (pointer:fine){
  .acceptance-check-label:hover{background:rgba(255,255,255,.04)}
}
/* Caixa desenhada sobre tokens: o alvo sobe de 18 para 24px (WCAG 2.5.8) e o
   contorno passa dos 3:1 da 1.4.11, o que o `accent-color` nativo não garante. */
.acceptance-checkbox{
  appearance:none;
  -webkit-appearance:none;
  width:24px;height:24px;flex:0 0 24px;margin-top:1px;
  border:2px solid rgba(255,255,255,.34);
  border-radius:7px;
  background:transparent;
  display:grid;place-items:center;
  cursor:pointer;
  transition:border-color 160ms ease,background-color 160ms ease;
}
.acceptance-checkbox::after{
  content:"";width:12px;height:7px;
  border:0 solid #1a1a1e;border-width:0 0 3px 3px;
  transform:rotate(-45deg) scale(.6);opacity:0;
  transition:opacity 160ms ease,transform 160ms cubic-bezier(.23,1,.32,1);
}
.acceptance-checkbox:checked{background:var(--primary);border-color:var(--primary)}
.acceptance-checkbox:checked::after{opacity:1;transform:rotate(-45deg) scale(1) translate(1px,-1px)}
.acceptance-check-label span{display:block;line-height:1.5}

.metadata{
  font-size:.84rem;
  color:var(--color-text-muted);
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;gap:18px;flex-wrap:wrap;
  font-variant-numeric:tabular-nums;
}
.metadata b,.metadata strong{color:var(--planejai-bone);font-weight:600}
.metadata p{margin:0}

.button-group{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn{
  flex:1;
  min-width:220px;
  padding:15px 24px;
  font-size:1rem;
  font-weight:700;
  border:1px solid transparent;
  border-radius:12px;
  cursor:pointer;
  /* Propriedades nomeadas, nunca `all`; pressão com `:active`. */
  transition:background-color 220ms ease,color 220ms ease,border-color 220ms ease,box-shadow 160ms ease,transform 120ms cubic-bezier(.23,1,.32,1);
  text-decoration:none;
  text-align:center;
  display:inline-block;
  font-family:inherit;
}
.btn:active{transform:scale(.97)}
.btn-primary{
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color:#1a1a1e;
  box-shadow:0 10px 28px rgba(255,113,0,.22);
}
.btn-primary:disabled{
  background:rgba(255,255,255,.06);
  color:var(--color-text-muted);
  border-color:rgba(255,255,255,.34);
  cursor:not-allowed;
  box-shadow:none;
  transform:none;
}
.btn-secondary{
  background:transparent;
  color:var(--planejai-bone);
  /* 3:1 sobre o cartão: contorno de controle (1.4.11). */
  border-color:rgba(255,255,255,.34);
}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover:not(:disabled){box-shadow:0 14px 32px rgba(255,113,0,.3)}
  .btn-secondary:hover{background:rgba(255,255,255,.05)}
}

/* A dica do botão: texto quieto, sem laranja preenchido e sem laço. O laranja
   é de ação, e o aviso não age; o `pulse` infinito ficava piscando em cima de
   texto que a pessoa lê. */
.scroll-notice{
  margin:10px 0 0;
  font-size:.9rem;
  color:var(--color-text-muted);
  min-height:1.3em;
  opacity:0;
  transition:opacity 220ms ease;
}
.scroll-notice.active{opacity:1}

.legal-error{
  background:rgba(239,68,68,.1);
  border:1px solid rgba(239,68,68,.35);
  border-radius:12px;
  padding:16px;
  margin-bottom:16px;
  color:#fecaca;
  font-size:.9rem;
}

@media (max-width:768px){
  .header{padding:26px 20px}
  .header h1{font-size:1.7rem}
  .header p{font-size:.92rem}
  .content-wrapper{padding:24px 20px;max-height:50vh}
  .footer{padding:24px 20px 28px}
  .button-group{flex-direction:column}
  .btn{min-width:100%}
  .content h2{font-size:1.2rem}
  .content p,.content li{font-size:.95rem}
}

/* ============================================================
   Aceite em duas colunas: sumário fixo à esquerda, documento à direita.
   Só a tela de aceite usa `.aceite`; a política pública continua no cartão
   único acima.
   ============================================================ */
.privacy-container.aceite{
  max-width:1120px;
  background:none;
  border:0;
  box-shadow:none;
  border-radius:0;
  overflow:visible;
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:28px;
  align-items:start;
}
.aceite__lado{position:sticky;top:20px}
.aceite__rotulo{
  font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--primary);font-weight:700;margin-bottom:8px;
}
.aceite__lado h1{
  font-size:1.7rem;line-height:1.1;letter-spacing:-0.02em;font-weight:800;
  color:var(--planejai-bone);margin-bottom:6px;text-wrap:balance;
}
.aceite__sub{color:var(--color-text-muted);font-size:.95rem;margin-bottom:18px}
.aceite__sumario ol{list-style:none;margin:0;display:grid;gap:2px}
.aceite__sumario a{
  display:flex;gap:10px;align-items:baseline;
  padding:7px 10px;border-radius:9px;
  color:var(--color-text-muted);text-decoration:none;
  font-size:.9rem;line-height:1.3;
  border:1px solid transparent;
  /* O marcador troca dezenas de vezes numa leitura: quase imperceptível. */
  transition:color 120ms ease,border-color 120ms ease,background-color 120ms ease;
}
.aceite__num{font-variant-numeric:tabular-nums;color:var(--primary);font-weight:700;min-width:1.6em}
/* Item atual se marca por contorno; laranja preenchido fica para a ação. */
.aceite__sumario a[aria-current="true"]{
  color:var(--planejai-bone);
  border-color:rgba(255,144,0,.55);
  background:rgba(255,144,0,.06);
}
.aceite__sumario a.is-lida{color:var(--planejai-bone)}
@media (hover:hover) and (pointer:fine){
  .aceite__sumario a:hover{background:rgba(255,255,255,.04)}
}
.aceite__estado{
  margin-top:16px;font-size:.86rem;color:var(--color-text-muted);
  font-variant-numeric:tabular-nums;
}
.aceite__estado b{color:var(--planejai-bone);font-weight:600}

.aceite__cartao{
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 26%),
    var(--bg-card);
  border:1px solid var(--border-soft);
  border-radius:22px;
  box-shadow:var(--shadow-card);
  overflow:hidden;
  min-width:0;
}
/* Progresso de leitura: transform 1:1 com a rolagem, sem transição. */
.aceite__progresso{height:3px;background:rgba(255,255,255,.08);overflow:hidden}
.aceite__progresso i{
  display:block;height:100%;background:var(--primary);
  transform-origin:left;transform:scaleX(0);
}
.aceite .content-wrapper{max-height:calc(100vh - 140px);min-height:320px;padding:30px 40px}
.aceite .footer{padding:22px 40px 28px}
.aceite .acceptance{
  background:none;border:0;border-radius:0;padding:0;margin-bottom:18px;box-shadow:none;
}
.aceite .acceptance h3{font-size:1.08rem;letter-spacing:-0.005em;margin-bottom:10px}

@media (max-width:900px){
  .privacy-container.aceite{grid-template-columns:1fr;gap:16px}
  .aceite__lado{position:static}
  .aceite__sumario{display:none}
  .aceite .content-wrapper{max-height:55vh;padding:24px 20px}
  .aceite .footer{padding:20px 20px 24px}
}

/* Movimento reduzido é menos movimento, não ausência de transição: sai o que
   desloca (entrada do cartão, pressão do botão, visto da caixa, rolagem suave);
   ficam cor, contorno e opacidade, que ajudam a compreensão. */
@media (prefers-reduced-motion:reduce){
  .privacy-container{transition:opacity 200ms ease;transform:none}
  .btn{transition:background-color 220ms ease,color 220ms ease,border-color 220ms ease}
  .btn:active{transform:none}
  .acceptance-checkbox::after{transition:opacity 160ms ease;transform:rotate(-45deg) scale(1) translate(1px,-1px)}
  .content-wrapper{scroll-behavior:auto}
}