/* O estilo do fórum. Serviço por rota própria (`armadilhas/083`) — com
   DEBUG=0 o Django não serve estático e não há nginx atrás do Traefik. */
:root {
  --tinta: #1b1b1f;
  --tinta-fraca: #5c5c66;
  --papel: #ffffff;
  --fundo: #f6f6f8;
  --linha: #e3e3e8;
  --destaque: #4f46e5;
  --aviso: #b45309;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.faixa {
  background: var(--papel);
  border-bottom: 1px solid var(--linha);
  padding: 14px 20px;
}
.faixa a { color: inherit; text-decoration: none; font-weight: 600; }
/* ── A BARRA DO SITE (apps/core/menu.py) ──────────────────────────────────
   Decisao do mantenedor em 31/08/2026, olhando o site: "quero um menu que
   seja padrao para todo o site, que fique sempre no topo e sempre no mesmo
   lugar em todas as paginas".

   IDENTICA a da celula `funil`, de proposito, e por isso escrita com cores
   proprias em vez das variaveis desta folha: a barra nao pertence a esta
   area, ela e do site. Numa tela de fundo escuro ela e a unica peca clara, e
   e justamente isso que a torna reconhecivel de longe.

   ACIMA de tudo, inclusive da faixa com o nome desta area, e GRUDADA no topo
   (`position: sticky`): o aluno nao precisa rolar de volta para achar o
   caminho. O `z-index` existe porque ela passa POR CIMA do conteudo ao rolar. */
.barra-do-site {
  position: sticky; top: 0; z-index: 20;
  background: #fff; border-bottom: 1px solid #e4e4e7;
}
.barra-do-site .menu-topo {
  display: flex; gap: 4px; overflow-x: auto;
  width: 100%; max-width: 780px; margin: 0 auto; padding: 8px 20px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.barra-do-site .menu-topo::-webkit-scrollbar { display: none; }
.barra-do-site .menu-topo a {
  flex: 0 0 auto; padding: 6px 12px; border-radius: 8px;
  color: #1a1a1a; text-decoration: none;
  font-size: 15px; font-weight: 600; white-space: nowrap;
}
.barra-do-site .menu-topo a:hover,
.barra-do-site .menu-topo a:focus { background: #ececef; }

.quem { float: right; color: var(--tinta-fraca); font-size: 14px; font-weight: 400; }
main { max-width: 780px; margin: 0 auto; padding: 24px 20px 60px; }
h1 { font-size: 24px; margin: 0 0 4px; }
h2 { font-size: 18px; margin: 0 0 4px; }
.sub { color: var(--tinta-fraca); margin: 0 0 24px; }
.cartao {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 12px;
}
.cartao a { color: var(--tinta); text-decoration: none; }
.cartao a:hover { color: var(--destaque); }
.etiqueta {
  display: inline-block;
  font-size: 12px;
  color: var(--tinta-fraca);
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: 1px 9px;
  margin-left: 6px;
}
.mensagem { border-left: 3px solid var(--linha); }
.mensagem .autor { font-weight: 600; font-size: 14px; }
/* ── A ETIQUETA DE NÍVEL (apps/core/etiquetas.py) ─────────────────────────
   "Nv 7 · Modelador" ao lado de quem escreveu. Ela usa a cor de destaque, e
   não a cinza de `.etiqueta`, porque as duas dizem coisas diferentes: aquela
   marca o ESTADO da mensagem (fora do ar, editada, resposta aceita) e some
   quando o estado passa; esta é uma conquista de quem escreveu, e é o único
   lugar do fórum onde o progresso do aluno aparece para quem não foi
   procurá-lo em `/conquistas`.

   Discreta de propósito: 12px e fundo lavado. O nome de quem falou continua
   sendo a informação mais forte da linha, e um selo gritando ao lado dele
   inverteria isso — a conversa é do aluno, não do placar. */
.mensagem .nivel {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--destaque);
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  padding: 1px 9px;
  margin-left: 6px;
  white-space: nowrap;
}
.mensagem .quando { color: var(--tinta-fraca); font-size: 13px; }
.mensagem .texto { margin-top: 8px; white-space: pre-wrap; }
.vazio {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: var(--aviso);
  border-radius: 12px;
  padding: 18px;
}
.migalha { font-size: 14px; margin-bottom: 12px; }
.migalha a { color: var(--tinta-fraca); }

/* ESCREVER — a caixa de abrir conversa e a de responder. */
.escrever { margin-top: 28px; }
.escrever h2 { margin-bottom: 12px; }
.escrever label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin: 12px 0 4px;
}
.escrever input,
.escrever textarea {
  width: 100%;
  font: inherit;
  color: inherit;
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: 8px;
  padding: 10px 12px;
}
.escrever textarea { resize: vertical; min-height: 110px; }
.areas-para-escrever { border: 0; padding: 0; margin: 0 0 18px; }
.areas-para-escrever legend { font-weight: 600; padding: 0; }
.areas-para-escrever label {
  display: block;
  margin-top: 10px;
  cursor: pointer;
}
.areas-para-escrever input { width: auto; margin-right: 8px; }
.areas-para-escrever strong { display: inline; }
.areas-para-escrever span { display: block; margin: 3px 0 0 26px; color: var(--tinta-fraca); }
.escrever input:focus,
.escrever textarea:focus {
  outline: 2px solid var(--destaque);
  outline-offset: 1px;
  background: var(--papel);
}
.escrever button, .botao {
  display: inline-block;
  margin-top: 14px;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--destaque);
  border: 0;
  border-radius: 8px;
  padding: 10px 20px;
  text-decoration: none;
  cursor: pointer;
}
.escrever button:hover, .botao:hover { filter: brightness(1.1); }
/* O recado que aparece NO LUGAR do formulário quando a pessoa não pode
   escrever. Não é erro — é explicação —, então não usa a cor de alarme. */
.recado { border-left: 3px solid var(--destaque); margin-top: 28px; }
.recado p { margin: 6px 0 0; color: var(--tinta-fraca); }
.erro {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0 0 4px;
}

/* AS FERRAMENTAS DO ADMINISTRADOR. Ficam dobradas (`<details>`) de propósito:
   quem modera também é quem lê, e uma tela coberta de botões de moderação é uma
   tela em que a conversa deixou de ser o assunto. A cor é a de aviso, e não a de
   destaque, para o olho separar "isto muda o site" de "isto é o site". */
.ferramentas {
  background: var(--papel);
  border: 1px dashed var(--aviso);
  border-radius: 12px;
  padding: 12px 16px;
  margin: 16px 0 24px;
}
.ferramentas > summary,
.ferramentas-mini > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  color: var(--aviso);
}
.ferramentas .escrever { margin-top: 12px; }
.ferramentas h2 { font-size: 16px; }
.ferramentas-mini {
  margin-top: 12px;
  border-top: 1px solid var(--linha);
  padding-top: 10px;
}
.ferramentas-mini > summary { font-size: 13px; }
.ferramentas-mini .escrever { margin-top: 8px; }

.escrever select {
  width: 100%;
  font: inherit;
  color: inherit;
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: 8px;
  padding: 10px 12px;
}
.escrever select:focus {
  outline: 2px solid var(--destaque);
  outline-offset: 1px;
  background: var(--papel);
}

/* Uma fileira de botões pequenos, cada um dentro do próprio formulário: é o que
   faz cada ação viajar por POST, com o token de CSRF junto. */
.linha-de-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.linha-de-botoes form { margin: 0; }
button.mini {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--aviso);
  background: var(--papel);
  border: 1px solid var(--aviso);
  border-radius: 8px;
  padding: 6px 14px;
  cursor: pointer;
}
button.mini:hover { background: #fffbeb; }

/* O que está fora do ar continua na tela de quem modera, e tem de PARECER fora
   do ar: sem esta marca, o administrador leria a mensagem removida como se ela
   ainda estivesse publicada. */
.mensagem.fora-do-ar { opacity: 0.6; border-left-color: var(--aviso); }

/* A BUSCA. A caixa mora na faixa do topo, em todas as páginas: procurar é o
   gesto que a pessoa faz de qualquer lugar do fórum. */
.procurar { display: flex; gap: 8px; margin-top: 10px; }
.procurar input {
  flex: 1;
  min-width: 0;
  font: inherit;
  color: inherit;
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: 8px;
  padding: 8px 12px;
}
.procurar input:focus {
  outline: 2px solid var(--destaque);
  outline-offset: 1px;
  background: var(--papel);
}
.procurar button {
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--destaque);
  border: 0;
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
}
.procurar button:hover { filter: brightness(1.1); }
/* Existe para quem usa leitor de tela: o rótulo do campo precisa estar escrito
   em algum lugar, mesmo quando o desenho o dispensa. */
.somente-leitor {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.achado .texto { margin-top: 8px; color: var(--tinta-fraca); }
.achado mark { background: #fef08a; color: inherit; padding: 0 2px; border-radius: 3px; }
.paginas {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  font-size: 14px;
  color: var(--tinta-fraca);
}
.paginas a { color: var(--destaque); text-decoration: none; font-weight: 600; }

/* "TEM COISA NOVA". A etiqueta de novidade usa a cor de DESTAQUE, e não a
   neutra das outras: ela é a única da tela que convida a clicar. */
.novidade {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: var(--destaque);
  border-radius: 999px;
  padding: 1px 9px;
  margin-left: 6px;
}
.ja-vi { display: flex; justify-content: flex-end; margin-bottom: 10px; }

@media (max-width: 520px) {
  main { padding: 16px 14px 40px; }
  .quem { float: none; display: block; margin-top: 4px; }
  .escrever button, .botao { width: 100%; text-align: center; }
  .linha-de-botoes form, button.mini { width: 100%; }
}

/* =========================================================================
   O MASCOTE DA CAIXA DE ESCREVER
   =========================================================================
   Um tijolo que gira, como uma peça na mesa giratória do Blender. Escolha do
   mantenedor em 31/08/2026, entre quatro desenhos que ele viu animados lado a
   lado. Ele vive ao lado de "Abrir uma conversa" e de "Responder" — as duas
   telas em que o aluno CRIA alguma coisa aqui dentro. A marcação mora em
   `templates/forum/_mascote.html`, com o porquê da forma.

   Ele é ROXO, e não laranja, apesar de o laranja ser a cor de um objeto
   selecionado no Blender: nesta folha o laranja (`--aviso`) já tem dono, e o
   dono é "isto muda o site" — as ferramentas da escola. Um mascote laranja na
   caixa de escrever do aluno diria, sem querer, que aquilo ali é botão de
   administrador.

   TODA a animação está aqui, e não em atributos de marcação, por um motivo
   prático: é o que deixa o `prefers-reduced-motion` desligá-la de uma vez, no
   fim desta seção. Quem sente enjoo com movimento na tela pede isso ao sistema
   uma vez e o site inteiro obedece.
   ========================================================================= */
.escrever .cabeca {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
/* O `h2` já tinha margem de baixo pela regra do `.escrever`; dentro da linha
   do mascote ela viraria um degrau entre o desenho e o texto. */
.escrever .cabeca h2 { margin: 0; }

/* A CAIXA DE PERSPECTIVA. Sem ela o cubo gira "chapado": as faces mudam de
   largura, mas nada se aproxima do olho, e o efeito lê como origami.

   A conta dos tamanhos, para quem for mexer: girando, a diagonal do cubo passa
   na frente e a perspectiva a aumenta. Com cubo de 24px e perspectiva de 180,
   o ponto mais largo da volta dá ~38px — cabe nos 44px da caixa. Aumentar o
   cubo sem aumentar a caixa faz o tijolo encostar no título. */
.mascote {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  perspective: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mascote-cubo {
  width: 24px;
  height: 24px;
  position: relative;
  transform-style: preserve-3d;
  animation: mascote-gira 7s linear infinite;
}
/* Sete segundos por volta: devagar o bastante para não puxar o olho de quem
   está escrevendo. O `linear` é de propósito — mesa giratória não acelera nem
   freia, e qualquer `ease` aqui faz o tijolo parecer que hesita. */
@keyframes mascote-gira {
  from { transform: rotateX(-18deg) rotateY(0deg); }
  to   { transform: rotateX(-18deg) rotateY(360deg); }
}
.mascote-face {
  position: absolute;
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  border: 1px solid rgba(27, 27, 31, .18);
}
/* As quatro laterais em duas tintas alternadas: é o contraste entre elas que
   deixa a volta VISÍVEL. Com as quatro iguais, o cubo giraria e pareceria
   parado — a silhueta de um cubo em rotação muda pouco. */
.mascote-f1, .mascote-f3 { background: var(--destaque); }
.mascote-f2, .mascote-f4 { background: #4038c9; }
.mascote-f1 { transform: translateZ(12px); }
.mascote-f2 { transform: rotateY(90deg) translateZ(12px); }
.mascote-f3 { transform: rotateY(180deg) translateZ(12px); }
.mascote-f4 { transform: rotateY(-90deg) translateZ(12px); }
/* O topo é a face que o aluno reconhece de longe: quatro studs, como uma peça
   de montar. É o mais claro dos seis porque a luz da cena vem de cima. */
.mascote-topo {
  background: #7d76ef;
  transform: rotateX(90deg) translateZ(12px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  place-items: center;
  gap: 2px;
  padding: 4px;
}
.mascote-topo i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #b0abf7;
}
.mascote-base { background: #2e2894; transform: rotateX(-90deg) translateZ(12px); }

/* ELE REPARA EM VOCÊ. Assim que o cursor entra em qualquer campo do
   formulário, o tijolo acelera e acende — a mesma borda de luz que o Blender
   põe no objeto selecionado. É o único jeito de o desenho responder ao que a
   pessoa está fazendo sem uma linha de JavaScript. */
.escrever:focus-within .mascote-cubo { animation-duration: 2.8s; }
.escrever:focus-within .mascote { filter: drop-shadow(0 0 5px rgba(79, 70, 229, .5)); }

/* Quem pede menos movimento ao sistema recebe o tijolo PARADO — e parado numa
   pose de três quartos, não na de frente. De frente ele seria um quadrado
   chapado, e jogaria fora a única coisa que este desenho tem a dizer. */
@media (prefers-reduced-motion: reduce) {
  .mascote-cubo,
  .escrever:focus-within .mascote-cubo {
    animation: none;
    transform: rotateX(-18deg) rotateY(-32deg);
  }
}

/* O RODAPÉ (apps/core/rodape.py), 31/08/2026 — a mesma peça do site público,
   com as cores desta casa. Fora do <main> e por isso com a largura dele
   repetida aqui: sem isso, num monitor largo, a assinatura ficaria colada nas
   bordas enquanto o conteúdo acima segue centrado. */
.rodape {
  max-width: 780px;
  margin: 0 auto;
  padding: 24px 20px 40px;
  border-top: 1px solid var(--linha);
  color: var(--tinta-fraca);
  font-size: 14px;
  text-align: center;
}
.rodape .marca { margin: 0 0 4px; font-weight: 600; color: var(--tinta); }
.rodape .descricao { margin: 0 0 16px; }
.rodape .links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
  margin: 0 0 16px;
}
.rodape .links a { color: var(--tinta-fraca); text-decoration: none; }
.rodape .links a:hover,
.rodape .links a:focus { color: var(--destaque); text-decoration: underline; }
.rodape .direitos { margin: 0; }