/* ============================================================
   Aviso de consentimento (LGPD) -- ver js/consentimento.js

   Arquivo SEPARADO e com paleta PRÓPRIA. Até a v118 ele também rodava
   nas 33 páginas do guia, que têm <style> inline e um conjunto
   diferente de variáveis (--text/--muted contra --txt/--fraco) --
   depender de qualquer uma das duas quebraria na outra. Hoje só o app
   usa, mas a independência fica: é o que permite levar este aviso pra
   qualquer página do site sem arrastar o styles.css inteiro junto.

   E é arquivo em vez de <style> injetado pelo JS porque a CSP do app
   usa `style-src 'self'` sem 'unsafe-inline' -- um <style> criado por
   script seria bloqueado, e a folga necessária pra permitir enfraquece
   a política inteira.
   ============================================================ */

#consentimento {
  --cons-fundo: #ffffff;
  --cons-txt: #14181c;
  --cons-fraco: #5b6770;
  --cons-linha: rgba(12, 20, 26, 0.14);
  --cons-campo: #eef1f3;
  --cons-verde: #0f7a45;
  --cons-verde-txt: #ffffff;

  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1600; /* acima da tela de carregamento (1000) e do brasão (1400) */
  display: flex;
  justify-content: center;
  padding: 12px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  pointer-events: none;
  transform: translateY(115%);
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.3, 1);
}

#consentimento.visivel {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  #consentimento {
    transition: none;
  }
}

@media (prefers-color-scheme: dark) {
  #consentimento {
    --cons-fundo: #191e24;
    --cons-txt: #eef2f5;
    --cons-fraco: #97a2ac;
    --cons-linha: rgba(255, 255, 255, 0.12);
    --cons-campo: #232a31;
    --cons-verde: #2bd576;
    --cons-verde-txt: #06210f;
  }
}

/* O app deixa escolher o tema à mão (ver configurarAparencia em
   js/script.js) e escreve data-theme no <html>. A escolha explícita
   tem que vencer o sistema nos DOIS sentidos, senão quem põe o app no
   claro com o celular no escuro vê o aviso na cor errada. */
:root[data-theme="light"] #consentimento {
  --cons-fundo: #ffffff;
  --cons-txt: #14181c;
  --cons-fraco: #5b6770;
  --cons-linha: rgba(12, 20, 26, 0.14);
  --cons-campo: #eef1f3;
  --cons-verde: #0f7a45;
  --cons-verde-txt: #ffffff;
}

:root[data-theme="dark"] #consentimento {
  --cons-fundo: #191e24;
  --cons-txt: #eef2f5;
  --cons-fraco: #97a2ac;
  --cons-linha: rgba(255, 255, 255, 0.12);
  --cons-campo: #232a31;
  --cons-verde: #2bd576;
  --cons-verde-txt: #06210f;
}

#consentimento-caixa {
  pointer-events: auto;
  width: 100%;
  max-width: 520px;
  background: var(--cons-fundo);
  color: var(--cons-txt);
  border: 1px solid var(--cons-linha);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 80vh;
  overflow-y: auto;
}

#consentimento-titulo {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cons-txt);
}

#consentimento-texto {
  margin: 0;
  font-size: 0.9rem;
  color: var(--cons-fraco);
}

/* ---- Ações ----
   Os dois botões dividem a linha em partes IGUAIS, e é o ponto
   principal deste arquivo: consentimento só vale se recusar for tão
   fácil quanto aceitar. "Recusar" como link cinza miúdo ao lado de um
   botão verde grande é consentimento viciado -- a diferença entre os
   dois aqui é de cor, não de tamanho nem de destaque. */
#consentimento-acoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

#consentimento-acoes button {
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 12px 10px;
  border-radius: 11px;
  cursor: pointer;
  border: 1px solid var(--cons-linha);
  background: var(--cons-campo);
  color: var(--cons-txt);
  transition: filter 0.15s ease;
}

/* O seletor precisa do #consentimento-acoes na frente, e não é
   preciosismo: a regra acima é `#consentimento-acoes button` (um id +
   um tipo), que VENCE um `#btn-consentimento-aceitar` sozinho (um id).
   Sem isto o botão de aceitar sai cinza igual ao de recusar -- pego na
   tela, não no papel. */
#consentimento-acoes #btn-consentimento-aceitar {
  background: var(--cons-verde);
  color: var(--cons-verde-txt);
  border-color: transparent;
}

#consentimento-acoes button:hover {
  filter: brightness(1.08);
}

#consentimento-acoes button:active {
  filter: brightness(0.92);
}

/* ---- Rodapé ---- */
/* Um filho só desde a v118 (o "escolher o que permitir" saiu junto
   com o AdSense): centralizado, e não empurrado pra um canto. */
#consentimento-rodape {
  display: flex;
  justify-content: center;
  font-size: 0.8rem;
}

#consentimento-rodape a {
  color: var(--cons-fraco);
  font-size: 0.8rem;
}

#consentimento :focus-visible {
  outline: 2px solid var(--cons-verde);
  outline-offset: 2px;
}