/* ==========================================================================
   Cognitalk Comunidade — folha de estilo
   --------------------------------------------------------------------------
   Escrita à mão, sem Tailwind e sem etapa de build: o servidor não tem Node e
   um deploy que depende de `npm run build` quebra no dia em que a máquina de
   quem publica está diferente.

   O redesenho de 20/08/2026 mexeu SÓ neste arquivo. Todos os nomes de classe
   foram mantidos, então nenhuma view precisou mudar — e voltar atrás é trocar
   um arquivo, não refazer um deploy.

   Direção visual: superfícies calmas, contorno discreto, sombra em camada,
   raio generoso e um acento só. O contraste é reservado para o conteúdo, não
   para a moldura — numa comunidade quem tem de saltar aos olhos é o que as
   pessoas escreveram.

   Organização: tokens -> base -> estrutura -> componentes -> responsivo.
   ========================================================================== */

/* ---------- tokens ------------------------------------------------------ */

:root {
  /* A cor da marca. O admin a injeta em `:root` pela tela de Ajustes; o valor
     abaixo é só o ponto de partida de uma instalação nova. */
  --cor-primaria: #2563eb;

  /* As três variantes são DERIVADAS da cor da marca, não fixas.
     Fixá-las quebrava a personalização: com a marca em azul e as variantes em
     índigo, passar o mouse num link mudava o matiz. Estes valores são o recuo
     para navegador sem `color-mix`; o bloco @supports logo abaixo calcula os
     de verdade. */
  --cor-primaria-forte: #1d4ed8;
  --cor-primaria-clara: #eff4ff;
  --cor-primaria-borda: rgba(37, 99, 235, .28);

  /* Cinzas com uma pitada de azul: cinza puro puxa para o "cinza de escritório". */
  --fundo: #f6f7f9;
  --superficie: #ffffff;
  --superficie-2: #f2f4f7;
  --superficie-3: #e9ecf1;
  --borda: #e5e8ee;
  --borda-forte: #d3d8e2;

  --texto: #12161d;
  --texto-medio: #576073;
  /* Não clarear mais que isto. `--texto-fraco` carrega data, autor e contagem
     — é conteúdo, não decoração. Em #8b94a7 o contraste caía para 2.84, abaixo
     do mínimo de 3.0 do WCAG até para texto secundário. */
  --texto-fraco: #6e7789;

  --vip: #b4820c;
  --vip-fundo: #fdf7e7;
  --vip-borda: rgba(180, 130, 12, .28);
  --cliente: #2563eb;
  --sucesso: #12904f;
  --sucesso-fundo: #e9f8f0;
  --alerta: #c2620d;
  --alerta-fundo: #fdf3e7;
  --perigo: #d02f2f;
  --perigo-fundo: #fdecec;

  --raio-p: 8px;
  --raio: 11px;
  --raio-g: 16px;

  /* Sombra em duas camadas: uma rente para definir a borda, outra difusa para
     dar o descolamento. Uma sombra só sempre parece borrão ou parece adesivo. */
  --sombra: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --sombra-m: 0 2px 4px rgba(16, 24, 40, .04), 0 6px 16px rgba(16, 24, 40, .08);
  --sombra-g: 0 4px 8px rgba(16, 24, 40, .06), 0 18px 40px rgba(16, 24, 40, .12);

  --largura-lateral: 250px;
  --largura-direita: 292px;
  --altura-topo: 60px;

  --transicao: 140ms cubic-bezier(.4, 0, .2, 1);

  /* Pilha do sistema, sem fonte externa.
     A CSP restringe `font-src` a 'self', então uma web font exigiria abrir a
     política e mais uma requisição bloqueante. Deixar "Inter" no topo sem
     carregá-la seria pior ainda: quem a tem instalada veria uma interface,
     quem não tem veria outra. O Segoe UI Variable (Windows 11) e o SF Pro
     (macOS) são excelentes e já estão na máquina de todo mundo. */
  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI",
           Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Tema escuro. Azul-petróleo profundo em vez de cinza chapado — cinza puro no
   escuro achata tudo e a interface perde profundidade. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    /* --cor-primaria NÃO é redefinida aqui de propósito.
       O admin injeta a cor da marca em `:root`, e um seletor com :not() tem
       especificidade maior — redefinir aqui fazia a cor escolhida em Ajustes
       ser ignorada no tema escuro. Só as derivadas mudam com o tema. */

    --fundo: #0d1016;
    --superficie: #151922;
    --superficie-2: #1b202b;
    --superficie-3: #232936;
    --borda: #262c39;
    --borda-forte: #333b4c;

    --texto: #e9edf5;
    --texto-medio: #9aa4b8;
    --texto-fraco: #6b7488;

    --vip: #e0b447;
    --vip-fundo: #2a2413;
    --vip-borda: rgba(224, 180, 71, .3);
    --sucesso: #34c987;
    --sucesso-fundo: #10281d;
    --alerta: #eb9a4b;
    --alerta-fundo: #2a1e12;
    --perigo: #f27272;
    --perigo-fundo: #2c1618;

    --sombra: 0 1px 2px rgba(0, 0, 0, .3);
    --sombra-m: 0 2px 6px rgba(0, 0, 0, .34), 0 8px 20px rgba(0, 0, 0, .3);
    --sombra-g: 0 8px 22px rgba(0, 0, 0, .44), 0 22px 50px rgba(0, 0, 0, .4);
  }
}

:root[data-tema="escuro"] {
  /* Ver a nota no bloco do prefers-color-scheme: a cor da marca vem do admin. */

  --fundo: #0d1016;
  --superficie: #151922;
  --superficie-2: #1b202b;
  --superficie-3: #232936;
  --borda: #262c39;
  --borda-forte: #333b4c;

  --texto: #e9edf5;
  --texto-medio: #9aa4b8;
  --texto-fraco: #6b7488;

  --vip: #e0b447;
  --vip-fundo: #2a2413;
  --vip-borda: rgba(224, 180, 71, .3);
  --sucesso: #34c987;
  --sucesso-fundo: #10281d;
  --alerta: #eb9a4b;
  --alerta-fundo: #2a1e12;
  --perigo: #f27272;
  --perigo-fundo: #2c1618;

  --sombra: 0 1px 2px rgba(0, 0, 0, .3);
  --sombra-m: 0 2px 6px rgba(0, 0, 0, .34), 0 8px 20px rgba(0, 0, 0, .3);
  --sombra-g: 0 8px 22px rgba(0, 0, 0, .44), 0 22px 50px rgba(0, 0, 0, .4);
}

/* ---------- variantes do acento -------------------------------------------
   Calculadas a partir de --cor-primaria, para que trocar a cor da marca em
   Ajustes leve junto hover, tinta de fundo e anel de foco.

   No claro, "forte" escurece; no escuro, CLAREIA. Escurecer no escuro deixaria
   o hover mais próximo do fundo, e o link pareceria apagar ao passar o mouse.

   Tudo dentro de @supports: navegador sem `color-mix` fica com os valores fixos
   declarados acima, que são coerentes entre si. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    --cor-primaria-forte: color-mix(in srgb, var(--cor-primaria) 84%, #000);
    --cor-primaria-clara: color-mix(in srgb, var(--cor-primaria) 9%, #fff);
    --cor-primaria-borda: color-mix(in srgb, var(--cor-primaria) 30%, transparent);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
      --cor-primaria-forte: color-mix(in srgb, var(--cor-primaria) 72%, #fff);
      --cor-primaria-clara: color-mix(in srgb, var(--cor-primaria) 20%, #12161d);
      --cor-primaria-borda: color-mix(in srgb, var(--cor-primaria) 42%, transparent);
    }
  }

  :root[data-tema="escuro"] {
    --cor-primaria-forte: color-mix(in srgb, var(--cor-primaria) 72%, #fff);
    --cor-primaria-clara: color-mix(in srgb, var(--cor-primaria) 20%, #12161d);
    --cor-primaria-borda: color-mix(in srgb, var(--cor-primaria) 42%, transparent);
  }
}

/* ---------- base -------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

/* O `hidden` do HTML vale display:none pela folha do navegador, mas qualquer
   regra nossa com classe (`.aviso-cookie { display:flex }`) ganha dele por
   especificidade e o elemento reaparece. Metade dos estados desta interface é
   controlada por `hidden`, então a regra precisa vir com !important. */
[hidden] { display: none !important; }

body {
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.6;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: var(--cor-primaria); text-decoration: none; transition: color var(--transicao); }
a:hover { color: var(--cor-primaria-forte); text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.28; font-weight: 660; letter-spacing: -.014em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.03rem; }

p { margin: 0 0 .85em; }
p:last-child { margin-bottom: 0; }

hr { border: 0; border-top: 1px solid var(--borda); margin: 1.4rem 0; }

code {
  font-family: var(--fonte-mono);
  font-size: .87em;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: 6px;
  padding: .12em .38em;
}

blockquote { margin: .7rem 0; padding: .3rem 0 .3rem 1rem; border-left: 3px solid var(--cor-primaria); color: var(--texto-medio); }

::selection { background: var(--cor-primaria-clara); color: var(--cor-primaria-forte); }

:focus-visible {
  outline: 2px solid var(--cor-primaria);
  outline-offset: 2px;
  border-radius: var(--raio-p);
}

/* Respeita quem pediu menos animação no sistema. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

.pular {
  position: absolute; left: -9999px;
  background: var(--superficie); color: var(--texto);
  padding: .6rem 1rem; border-radius: var(--raio); z-index: 200;
  box-shadow: var(--sombra-g);
}
.pular:focus { left: 1rem; top: .6rem; }

/* ---------- topo -------------------------------------------------------- */

.topo {
  position: sticky; top: 0; z-index: 50;
  height: var(--altura-topo);
  display: flex; align-items: center; gap: 1rem;
  padding: 0 1.15rem;
  background: color-mix(in srgb, var(--superficie) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--borda);
}
/* Navegador sem color-mix recebe a superfície opaca — degradação limpa. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .topo { background: var(--superficie); }
}

.topo-marca {
  display: flex; align-items: center; gap: .6rem;
  font-weight: 680; font-size: 1rem; color: var(--texto);
  white-space: nowrap; letter-spacing: -.02em;
}
.topo-marca:hover { text-decoration: none; color: var(--texto); }
.topo-marca .ponto {
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(140deg, var(--cor-primaria), var(--cor-primaria-forte));
  color: #fff;
  display: grid; place-items: center;
  font-size: .84rem; font-weight: 700;
  box-shadow: 0 2px 8px var(--cor-primaria-borda);
}

.topo-busca { flex: 1; max-width: 440px; position: relative; }
.topo-busca input {
  width: 100%; height: 38px;
  padding: 0 .9rem 0 2.3rem;
  border: 1px solid transparent; border-radius: 10px;
  background: var(--superficie-2); color: var(--texto);
  font-size: .9rem; font-family: inherit;
  transition: background var(--transicao), border-color var(--transicao), box-shadow var(--transicao);
}
.topo-busca input::placeholder { color: var(--texto-fraco); }
.topo-busca input:focus {
  background: var(--superficie);
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px var(--cor-primaria-borda);
  outline: none;
}
.topo-busca .lupa {
  position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
  color: var(--texto-fraco); font-size: .86rem; pointer-events: none;
}

.topo-acoes { margin-left: auto; display: flex; align-items: center; gap: .25rem; }

.icone-botao {
  position: relative;
  width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center;
  color: var(--texto-medio); background: none; border: 0; cursor: pointer;
  font-size: 1.02rem; text-decoration: none;
  transition: background var(--transicao), color var(--transicao);
}
.icone-botao:hover { background: var(--superficie-2); color: var(--texto); text-decoration: none; }

.contador {
  position: absolute; top: 4px; right: 4px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--perigo); color: #fff;
  font-size: .64rem; font-weight: 700; line-height: 17px; text-align: center;
  border: 2px solid var(--superficie);
  box-sizing: content-box;
}

/* ---------- estrutura --------------------------------------------------- */

.painel-corpo {
  display: grid;
  grid-template-columns: var(--largura-lateral) minmax(0, 1fr) var(--largura-direita);
  gap: 1.75rem;
  max-width: 1380px;
  margin: 0 auto;
  padding: 1.6rem 1.35rem 4rem;
  align-items: start;
}
.painel-corpo.sem-direita { grid-template-columns: var(--largura-lateral) minmax(0, 1fr); }

.lateral { position: sticky; top: calc(var(--altura-topo) + 1.6rem); }
.direita { position: sticky; top: calc(var(--altura-topo) + 1.6rem); }

/* ---------- barra lateral ----------------------------------------------- */

.grupo-lateral { margin-bottom: 1.5rem; }
.grupo-lateral h4 {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .075em;
  color: var(--texto-fraco); margin: 0 0 .5rem .7rem; font-weight: 700;
}

.item-lateral {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .7rem; border-radius: 9px;
  color: var(--texto-medio); font-size: .895rem; font-weight: 520;
  transition: background var(--transicao), color var(--transicao);
}
.item-lateral:hover { background: var(--superficie-2); color: var(--texto); text-decoration: none; }
.item-lateral.ativo {
  background: var(--cor-primaria-clara);
  color: var(--cor-primaria-forte);
  font-weight: 640;
}
.item-lateral .emoji { font-size: 1rem; width: 1.25rem; text-align: center; flex: none; }
.item-lateral .rotulo { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-lateral .cadeado { font-size: .76rem; color: var(--texto-fraco); flex: none; }
.item-lateral.trancado { color: var(--texto-fraco); }
.item-lateral .seta { font-size: .72rem; color: var(--texto-fraco); flex: none; transition: transform var(--transicao); }
.item-lateral.link-externo:hover .seta { color: var(--cor-primaria); transform: translate(1px, -1px); }

.lista-submenu {
  margin: .12rem 0 .3rem 1.15rem;
  padding-left: .6rem;
  border-left: 1.5px solid var(--borda);
}
.item-lateral.submenu { font-size: .85rem; padding-top: .38rem; padding-bottom: .38rem; }
.item-lateral.submenu .emoji { font-size: .88rem; }

/* ---------- cartões ----------------------------------------------------- */

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
  padding: 1.25rem 1.35rem;
  margin-bottom: 1.15rem;
}
.cartao.compacto { padding: 1rem 1.1rem; }
.cartao.sem-borda { border: 0; box-shadow: none; }

.cartao-titulo {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .075em;
  color: var(--texto-fraco); font-weight: 700; margin-bottom: .8rem;
}

/* ---------- avatar e selos ---------------------------------------------- */

.avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--cor-primaria); color: #fff;
  display: grid; place-items: center;
  font-weight: 650; font-size: .85rem; flex: none;
  overflow: hidden; text-decoration: none;
  box-shadow: 0 0 0 1px rgba(16, 24, 40, .05) inset;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.pequeno { width: 32px; height: 32px; font-size: .7rem; }
.avatar.grande { width: 92px; height: 92px; font-size: 1.7rem; border: 3px solid var(--superficie); }

.selo {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .13rem .5rem; border-radius: 999px;
  font-size: .68rem; font-weight: 650; letter-spacing: .005em;
  border: 1px solid transparent; white-space: nowrap;
  line-height: 1.5;
}
.selo-vip { background: var(--vip-fundo); color: var(--vip); border-color: var(--vip-borda); }
.selo-cliente { background: var(--cor-primaria-clara); color: var(--cor-primaria-forte); border-color: var(--cor-primaria-borda); }
.selo-livre { background: var(--superficie-2); color: var(--texto-medio); border-color: var(--borda); }
.selo-admin { background: var(--perigo-fundo); color: var(--perigo); border-color: rgba(208, 47, 47, .24); }
.selo-moderador { background: var(--cor-primaria-clara); color: var(--cor-primaria-forte); border-color: var(--cor-primaria-borda); }
.selo-patente { background: var(--superficie-2); border-color: var(--borda); }

/* ---------- publicação --------------------------------------------------- */

.post-cabecalho { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: .85rem; }
.post-autor { flex: 1; min-width: 0; }
.post-autor .nome {
  font-weight: 650; color: var(--texto); font-size: .93rem;
  display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap;
}
.post-autor .nome a { color: inherit; }
.post-autor .nome a:hover { color: var(--cor-primaria); text-decoration: none; }
.post-meta {
  font-size: .78rem; color: var(--texto-fraco);
  display: flex; gap: .35rem; flex-wrap: wrap; align-items: center;
  margin-top: .1rem;
}
.post-meta a { color: var(--texto-fraco); }
.post-meta a:hover { color: var(--cor-primaria); text-decoration: none; }

.post-titulo { font-size: 1.14rem; font-weight: 660; margin: 0 0 .5rem; letter-spacing: -.016em; }
.post-titulo a { color: var(--texto); }
.post-titulo a:hover { color: var(--cor-primaria); text-decoration: none; }

.post-corpo.resumida {
  display: -webkit-box; -webkit-line-clamp: 7; line-clamp: 7;
  -webkit-box-orient: vertical; overflow: hidden;
}

.post-imagem { margin: .9rem 0 0; border-radius: var(--raio); overflow: hidden; border: 1px solid var(--borda); }

.post-rodape {
  display: flex; align-items: center; gap: .3rem;
  margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--borda);
}

.acao-post {
  display: inline-flex; align-items: center; gap: .38rem;
  padding: .38rem .65rem; border-radius: 8px;
  background: none; border: 0; cursor: pointer;
  color: var(--texto-medio); font-size: .84rem; font-weight: 550;
  font-family: inherit; text-decoration: none;
  transition: background var(--transicao), color var(--transicao);
}
.acao-post:hover { background: var(--superficie-2); color: var(--texto); text-decoration: none; }
.acao-post.curtido { color: var(--perigo); }
.acao-post[disabled] { opacity: .45; cursor: default; }

.fixado-marca {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .68rem; font-weight: 700; color: var(--alerta);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: .5rem;
}

/* ---------- espaço em formato de lista ------------------------------------ */

.lista-posts { padding: 0; overflow: hidden; }

.linha-post {
  display: flex; align-items: center; gap: .85rem;
  padding: .95rem 1.2rem;
  border-bottom: 1px solid var(--borda);
  color: var(--texto);
  transition: background var(--transicao);
}
.linha-post:last-child { border-bottom: 0; }
.linha-post:hover { background: var(--superficie-2); text-decoration: none; }

.linha-post-corpo { flex: 1; min-width: 0; }

.linha-post-titulo {
  font-weight: 620; font-size: .945rem; color: var(--texto);
  display: flex; align-items: center; gap: .38rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color var(--transicao);
}
.linha-post:hover .linha-post-titulo { color: var(--cor-primaria); }

.linha-post-meta {
  font-size: .8rem; color: var(--texto-fraco);
  margin-top: .15rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.linha-post-meta .seta-resposta { color: var(--sucesso); font-weight: 700; }
.linha-post-meta .respondeu { color: var(--sucesso); font-weight: 550; }

.linha-post-numeros { display: flex; gap: .7rem; flex: none; font-size: .78rem; color: var(--texto-fraco); }
.fixado-mini { font-size: .78rem; flex: none; }

/* ---------- modal --------------------------------------------------------- */

.modal { position: fixed; inset: 0; z-index: 90; display: flex; }
body.com-modal { overflow: hidden; }

.modal-fundo {
  position: absolute; inset: 0;
  background: rgba(9, 11, 17, .55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.modal-caixa {
  position: relative;
  margin: auto;
  width: min(790px, calc(100% - 2rem));
  max-height: calc(100vh - 3rem);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-g);
  display: flex; flex-direction: column;
  overflow: hidden;
}

.modal-fechar {
  position: absolute; top: .75rem; right: .85rem; z-index: 2;
  width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--superficie); border: 1px solid var(--borda);
  color: var(--texto-medio); font-size: .9rem; cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}
.modal-fechar:hover { background: var(--superficie-2); color: var(--texto); }

.modal-conteudo { overflow-y: auto; padding: 1.35rem 1.4rem 1.6rem; }

/* Dentro do modal os cartões perdem a moldura: a caixa já é a moldura. */
.modal-conteudo .cartao {
  border: 0; box-shadow: none; padding: 0; margin-bottom: 1.4rem; background: none;
}
.modal-conteudo .cartao:last-child { margin-bottom: 0; }
.modal-conteudo .cartao + .cartao { border-top: 1px solid var(--borda); padding-top: 1.3rem; }

/* ---------- compositor ---------------------------------------------------- */

.compositor { display: flex; gap: .8rem; align-items: center; }
.compositor-gatilho {
  flex: 1; text-align: left;
  padding: .7rem 1rem; border-radius: 999px;
  background: var(--superficie-2); border: 1px solid transparent;
  color: var(--texto-fraco); font-size: .9rem; font-family: inherit; cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao);
}
.compositor-gatilho:hover { background: var(--superficie); border-color: var(--borda-forte); }

.compositor-form[hidden] { display: none; }
.compositor-form { margin-top: 1rem; }

/* ---------- editor rico ---------------------------------------------------- */

.editor {
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  background: var(--superficie);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.editor:focus-within { border-color: var(--cor-primaria); box-shadow: 0 0 0 3px var(--cor-primaria-borda); }

.editor-barra {
  display: flex; align-items: center; gap: .12rem; flex-wrap: wrap;
  padding: .45rem .55rem;
  background: var(--superficie-2);
  border-bottom: 1px solid var(--borda);
  border-radius: var(--raio) var(--raio) 0 0;
  position: sticky; top: var(--altura-topo); z-index: 5;
}

.editor-formato {
  width: auto; min-width: 136px; height: 33px;
  padding: 0 1.6rem 0 .6rem;
  border: 1px solid var(--borda); border-radius: 8px;
  background: var(--superficie); color: var(--texto);
  font-family: inherit; font-size: .83rem; font-weight: 550;
  cursor: pointer;
  transition: border-color var(--transicao);
}
.editor-formato:hover { border-color: var(--borda-forte); }

.editor-botao {
  width: 33px; height: 33px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 8px;
  background: none; color: var(--texto-medio);
  cursor: pointer; padding: 0;
  transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}
.editor-botao svg { width: 17px; height: 17px; display: block; }
.editor-botao:hover { background: var(--superficie); border-color: var(--borda); color: var(--texto); }
.editor-botao.ativo { background: var(--cor-primaria-clara); border-color: transparent; color: var(--cor-primaria-forte); }

.editor-separador { width: 1px; height: 20px; background: var(--borda); margin: 0 .32rem; flex: none; }

/* Sem `max-height` e sem `overflow` de propósito: a versão anterior tinha
   rolagem própria dentro de um cartão que também rolava, e o texto sumia por
   baixo da barra. Aqui a área cresce e quem rola é a página. */
.editor-area { min-height: 270px; padding: 1.2rem 1.3rem 1.5rem; outline: none; }
.editor-area.vazio::before { content: attr(data-vazio); color: var(--texto-fraco); pointer-events: none; }

.editor-aviso {
  padding: .55rem 1.05rem;
  background: var(--alerta-fundo); color: var(--alerta);
  font-size: .82rem; border-top: 1px solid var(--borda);
}
.editor-ajuda { font-size: .78rem; color: var(--texto-fraco); margin-top: .45rem; }

/* ---------- tipografia do conteúdo -----------------------------------------
   Uma regra só para o que se escreve e o que se lê. Se o editor e o post
   divergirem, a pessoa formata uma coisa e publica outra — e some a confiança
   no editor. */

.editor-area,
.post-corpo {
  font-size: .965rem;
  line-height: 1.7;
  color: var(--texto);
  overflow-wrap: break-word;
}

.editor-area > *:first-child, .post-corpo > *:first-child { margin-top: 0; }
.editor-area > *:last-child,  .post-corpo > *:last-child  { margin-bottom: 0; }

.editor-area p, .post-corpo p { margin: 0 0 1em; }

.editor-area h2, .post-corpo h2 { font-size: 1.26rem; font-weight: 680; margin: 1.7em 0 .55em; letter-spacing: -.018em; }
.editor-area h3, .post-corpo h3 { font-size: 1.1rem;  font-weight: 670; margin: 1.55em 0 .5em; letter-spacing: -.012em; }
.editor-area h4, .post-corpo h4 { font-size: 1rem;    font-weight: 670; margin: 1.45em 0 .45em; }

.editor-area ul, .editor-area ol,
.post-corpo ul, .post-corpo ol { margin: 0 0 1em; padding-left: 1.4rem; }

.editor-area li, .post-corpo li { margin: .38em 0; padding-left: .18rem; }
.editor-area li::marker, .post-corpo li::marker { color: var(--texto-fraco); }

.editor-area blockquote, .post-corpo blockquote {
  margin: 0 0 1em; padding: .15rem 0 .15rem 1.05rem;
  border-left: 3px solid var(--cor-primaria);
  color: var(--texto-medio);
}

.editor-area pre, .post-corpo pre.bloco-codigo {
  font-family: var(--fonte-mono); font-size: .85em; line-height: 1.6;
  background: var(--superficie-2); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: .9rem 1rem;
  overflow-x: auto; margin: 0 0 1em;
}

.editor-area img, .post-corpo img {
  max-width: 100%; height: auto;
  border-radius: var(--raio); border: 1px solid var(--borda);
  margin: .35rem 0 1.05em;
}

.editor-area a, .post-corpo a { text-decoration: none; font-weight: 520; }
.editor-area a:hover, .post-corpo a:hover { text-decoration: underline; }
.post-corpo .mencao { font-weight: 620; }

/* Botão de chamada dentro do post. É um <a> com cara de botão — ver a nota em
   editor.js sobre por que não é <button>. */
.editor-area .botao-post,
.post-corpo .botao-post {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .68rem 1.5rem; margin: .2rem 0;
  border-radius: 10px;
  background: var(--cor-primaria); color: #fff !important;
  font-size: .92rem; font-weight: 620; line-height: 1.4;
  text-decoration: none !important;
  box-shadow: 0 1px 3px var(--cor-primaria-borda);
  transition: background var(--transicao), box-shadow var(--transicao), transform var(--transicao);
  max-width: 100%;
}
.editor-area .botao-post:hover,
.post-corpo .botao-post:hover {
  background: var(--cor-primaria-forte);
  box-shadow: 0 3px 12px var(--cor-primaria-borda);
}
.post-corpo .botao-post:active { transform: translateY(1px); }

/* Dentro do editor ele não navega: clicar ali é para posicionar o cursor. */
.editor-area .botao-post { cursor: text; }

.editor-area hr, .post-corpo hr { margin: 1.5em 0; }

.editor-area table, .post-corpo table {
  width: 100%; border-collapse: collapse;
  margin: 0 0 1em; font-size: .9rem;
  display: block; overflow-x: auto;
}
.editor-area th, .editor-area td,
.post-corpo th, .post-corpo td { border: 1px solid var(--borda); padding: .5rem .7rem; text-align: left; }
.editor-area th, .post-corpo th { background: var(--superficie-2); font-weight: 650; }

.post-corpo figure { margin: 0 0 1.05em; }
.post-corpo figcaption { font-size: .82rem; color: var(--texto-fraco); margin-top: .4rem; }

/* Marcador de vídeo dentro do editor. No post publicado ele vira iframe. */
.editor-area .cognitalk-video,
.post-corpo .cognitalk-video {
  display: flex; align-items: center; gap: .55rem;
  margin: .7rem 0; padding: .7rem .9rem;
  border: 1px dashed var(--borda-forte); border-radius: var(--raio);
  background: var(--superficie-2);
  color: var(--texto-medio); font-size: .84rem;
  word-break: break-all;
}
.editor-area .cognitalk-video::before,
.post-corpo .cognitalk-video::before { content: "▶"; color: var(--perigo); flex: none; }

/* ---------- formulários --------------------------------------------------- */

.campo { margin-bottom: 1rem; }
.campo label { display: block; font-size: .81rem; font-weight: 620; color: var(--texto-medio); margin-bottom: .35rem; }
.campo .ajuda { font-size: .77rem; color: var(--texto-fraco); margin-top: .32rem; line-height: 1.5; }

input[type="text"], input[type="email"], input[type="password"], input[type="url"],
input[type="number"], input[type="datetime-local"], input[type="search"],
select, textarea {
  width: 100%;
  padding: .6rem .8rem;
  border: 1px solid var(--borda-forte); border-radius: 9px;
  background: var(--superficie); color: var(--texto);
  font-family: inherit; font-size: .9rem;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
input::placeholder, textarea::placeholder { color: var(--texto-fraco); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px var(--cor-primaria-borda);
}
textarea { resize: vertical; min-height: 96px; line-height: 1.6; }
input[type="file"] { font-size: .85rem; padding: .5rem; }

.linha-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: .95rem; }

.caixa-marcar { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--texto-medio); cursor: pointer; }
.caixa-marcar input { width: auto; accent-color: var(--cor-primaria); }

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .58rem 1.1rem; border-radius: 9px;
  background: var(--cor-primaria); color: #fff;
  border: 1px solid transparent; cursor: pointer;
  font-family: inherit; font-size: .885rem; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: background var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
.botao:hover {
  background: var(--cor-primaria-forte); color: #fff; text-decoration: none;
  box-shadow: 0 2px 10px var(--cor-primaria-borda);
}
.botao:active { transform: translateY(1px); }
.botao[disabled] { opacity: .5; cursor: default; box-shadow: none; transform: none; }

.botao-secundario { background: var(--superficie); color: var(--texto); border-color: var(--borda-forte); }
.botao-secundario:hover { background: var(--superficie-2); color: var(--texto); box-shadow: var(--sombra); }

.botao-perigo { background: var(--perigo); }
.botao-perigo:hover { background: var(--perigo); filter: brightness(1.08); box-shadow: 0 2px 10px rgba(208, 47, 47, .3); }

.botao-vip { background: linear-gradient(135deg, var(--vip), #d8a021); color: #fff; }
.botao-vip:hover { background: linear-gradient(135deg, #d8a021, var(--vip)); box-shadow: 0 2px 12px var(--vip-borda); }

.botao-pequeno { padding: .4rem .8rem; font-size: .81rem; }
.botao-largo { width: 100%; }

/* ---------- avisos -------------------------------------------------------- */

.aviso {
  padding: .8rem 1rem; border-radius: var(--raio);
  border: 1px solid var(--borda); background: var(--superficie-2);
  font-size: .875rem; margin-bottom: 1.1rem; line-height: 1.55;
}
.aviso-ok { border-color: rgba(18, 144, 79, .28); background: var(--sucesso-fundo); color: var(--sucesso); }
.aviso-erro { border-color: rgba(208, 47, 47, .28); background: var(--perigo-fundo); color: var(--perigo); }
.aviso-atencao { border-color: rgba(194, 98, 13, .28); background: var(--alerta-fundo); color: var(--alerta); }
.aviso-vip { border-color: var(--vip-borda); background: var(--vip-fundo); color: var(--vip); }

.aviso-cookie { display: flex; gap: .9rem; align-items: center; flex-wrap: wrap; }
.aviso-cookie p { flex: 1; min-width: 230px; margin: 0; }

/* ---------- comentários ---------------------------------------------------- */

.comentario { display: flex; gap: .75rem; padding: .9rem 0; border-top: 1px solid var(--borda); }
.comentario:first-child { border-top: 0; }
.comentario-corpo { flex: 1; min-width: 0; }
.comentario-caixa {
  background: var(--superficie-2); border: 1px solid var(--borda);
  border-radius: 13px; padding: .65rem .9rem;
}
.comentario-acoes { display: flex; gap: .15rem; margin-top: .3rem; }
.comentario-acoes .acao-post { font-size: .78rem; padding: .24rem .5rem; }
.respostas { margin-left: 2.6rem; }
.comentario.removido .comentario-caixa { color: var(--texto-fraco); font-style: italic; }

/* ---------- trancado / vip -------------------------------------------------- */

.tranca {
  text-align: center; padding: 3rem 1.5rem;
  border: 1px dashed var(--borda-forte); border-radius: var(--raio-g);
  background: var(--superficie);
}
.tranca .cadeado-grande {
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--vip-fundo); color: var(--vip);
  display: grid; place-items: center; font-size: 1.7rem; margin: 0 auto 1.1rem;
  border: 1px solid var(--vip-borda);
}
.tranca h2 { margin-bottom: .4rem; }
.tranca p { color: var(--texto-medio); max-width: 470px; margin: 0 auto .5rem; }

.lista-beneficios { list-style: none; padding: 0; margin: 1.2rem 0 0; text-align: left; max-width: 430px; }
.lista-beneficios li {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .45rem 0; font-size: .9rem; color: var(--texto-medio);
}
.lista-beneficios li::before { content: "✓"; color: var(--sucesso); font-weight: 700; flex: none; }

.grade-planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(222px, 1fr)); gap: 1.1rem; margin-bottom: 1.1rem; }

.cartao-plano {
  position: relative;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-g); box-shadow: var(--sombra);
  padding: 1.4rem 1.2rem; text-align: center;
  display: flex; flex-direction: column; gap: .55rem;
  transition: box-shadow var(--transicao), transform var(--transicao);
}
.cartao-plano:hover { box-shadow: var(--sombra-m); transform: translateY(-2px); }
.cartao-plano.destaque { border-color: var(--vip); box-shadow: 0 0 0 3px var(--vip-borda), var(--sombra-m); }
.cartao-plano h3 { margin: 0; font-size: 1.03rem; }
.cartao-plano .botao { margin-top: auto; }

.plano-fita {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--vip); color: #fff;
  font-size: .65rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: .2rem .65rem; border-radius: 999px; white-space: nowrap;
}
.plano-preco { font-size: 1.6rem; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.plano-preco span { display: block; font-size: .74rem; font-weight: 500; color: var(--texto-fraco); letter-spacing: 0; }

/* ---------- cursos ---------------------------------------------------------- */

.grade-cursos { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 1.15rem; }

.cartao-curso {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-g); overflow: hidden; box-shadow: var(--sombra);
  display: flex; flex-direction: column;
  transition: box-shadow var(--transicao), transform var(--transicao);
}
.cartao-curso:hover { box-shadow: var(--sombra-m); transform: translateY(-2px); text-decoration: none; }
.cartao-curso .capa {
  height: 128px;
  background: linear-gradient(135deg, var(--cor-primaria), #9333ea);
  display: grid; place-items: center; color: #fff; font-size: 1.9rem;
}
.cartao-curso .capa img { width: 100%; height: 100%; object-fit: cover; }
.cartao-curso .conteudo { padding: .95rem 1.05rem 1.1rem; flex: 1; display: flex; flex-direction: column; }
.cartao-curso h3 { font-size: .97rem; margin-bottom: .35rem; color: var(--texto); }
.cartao-curso p { font-size: .84rem; color: var(--texto-medio); margin-bottom: .8rem; line-height: 1.55; }

.barra-progresso { height: 6px; border-radius: 999px; background: var(--superficie-3); overflow: hidden; margin-top: auto; }
.barra-progresso span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--sucesso), #2fd48a);
  transition: width 300ms cubic-bezier(.4, 0, .2, 1);
}
.progresso-texto { font-size: .75rem; color: var(--texto-fraco); margin-top: .4rem; }

.lista-aulas { list-style: none; padding: 0; margin: 0; }
.lista-aulas li { border-bottom: 1px solid var(--borda); }
.lista-aulas li:last-child { border-bottom: 0; }
.aula-link {
  display: flex; align-items: center; gap: .7rem;
  padding: .68rem .35rem; color: var(--texto); font-size: .89rem;
  transition: color var(--transicao);
}
.aula-link:hover { text-decoration: none; color: var(--cor-primaria); }
.aula-link.ativa { color: var(--cor-primaria); font-weight: 640; }
.aula-link.trancada { color: var(--texto-fraco); }
.aula-marca {
  width: 21px; height: 21px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--borda-forte);
  display: grid; place-items: center; font-size: .64rem;
  transition: background var(--transicao), border-color var(--transicao);
}
.aula-marca.feita { background: var(--sucesso); border-color: var(--sucesso); color: #fff; }
.aula-duracao { margin-left: auto; font-size: .76rem; color: var(--texto-fraco); flex: none; }

.moldura-video { position: relative; width: 100%; padding-top: 56.25%; background: #000; border-radius: var(--raio); overflow: hidden; }
.moldura-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- eventos ---------------------------------------------------------- */

.cartao-evento { display: flex; gap: 1.1rem; align-items: flex-start; }
.data-bloco {
  width: 60px; flex: none; text-align: center;
  border: 1px solid var(--borda); border-radius: var(--raio);
  overflow: hidden; background: var(--superficie-2);
}
.data-bloco .mes {
  background: var(--cor-primaria); color: #fff;
  font-size: .63rem; font-weight: 700; text-transform: uppercase;
  padding: .2rem 0; letter-spacing: .05em;
}
.data-bloco .dia { font-size: 1.3rem; font-weight: 700; padding: .25rem 0; }

/* ---------- filtros ----------------------------------------------------------- */

.filtros { display: flex; gap: .45rem; flex-wrap: wrap; margin-bottom: 1.2rem; }

.ficha {
  --ficha-cor: var(--cor-primaria);
  display: inline-flex; align-items: center; gap: .38rem;
  padding: .38rem .82rem; border-radius: 999px;
  background: var(--superficie); border: 1px solid var(--borda);
  color: var(--texto-medio); font-size: .845rem; font-weight: 550;
  white-space: nowrap;
  transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}
.ficha:hover { border-color: var(--borda-forte); color: var(--texto); text-decoration: none; }
.ficha.ativa { background: var(--ficha-cor); border-color: var(--ficha-cor); color: #fff; font-weight: 640; }
.ficha.ativa:hover { color: #fff; }
.ficha-conta { font-size: .72rem; opacity: .75; padding: 0 .32rem; border-radius: 999px; background: rgba(127, 127, 127, .16); }

/* ---------- ranking ------------------------------------------------------------ */

.linha-ranking { display: flex; align-items: center; gap: .8rem; padding: .62rem 0; border-bottom: 1px solid var(--borda); }
.linha-ranking:last-child { border-bottom: 0; }
.posicao { width: 28px; flex: none; text-align: center; font-weight: 700; font-size: .86rem; color: var(--texto-fraco); }
.posicao.top { color: var(--vip); }
.pontos-valor { margin-left: auto; font-weight: 700; font-size: .88rem; color: var(--cor-primaria); flex: none; }

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

.tabela-caixa {
  overflow-x: auto; border: 1px solid var(--borda);
  border-radius: var(--raio); background: var(--superficie);
  box-shadow: var(--sombra);
}
table.tabela { width: 100%; border-collapse: collapse; font-size: .875rem; min-width: 640px; }
table.tabela th, table.tabela td { padding: .68rem .85rem; text-align: left; border-bottom: 1px solid var(--borda); }
table.tabela th {
  background: var(--superficie-2); font-size: .69rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--texto-fraco);
  position: sticky; top: 0;
}
table.tabela tr:last-child td { border-bottom: 0; }
table.tabela tbody tr { transition: background var(--transicao); }
table.tabela tbody tr:hover { background: var(--superficie-2); }

/* ---------- diversos ------------------------------------------------------------- */

.vazio { text-align: center; padding: 2.8rem 1rem; color: var(--texto-fraco); }
.vazio .emoji { font-size: 2.1rem; display: block; margin-bottom: .6rem; opacity: .85; }

.paginacao { display: flex; gap: .55rem; justify-content: center; margin-top: 1.4rem; }

.abas { display: flex; gap: .25rem; border-bottom: 1px solid var(--borda); margin-bottom: 1.25rem; overflow-x: auto; }
.aba {
  padding: .6rem .9rem; border-bottom: 2px solid transparent;
  color: var(--texto-medio); font-size: .885rem; font-weight: 580; white-space: nowrap;
  transition: color var(--transicao), border-color var(--transicao);
}
.aba:hover { color: var(--texto); text-decoration: none; }
.aba.ativa { color: var(--cor-primaria); border-bottom-color: var(--cor-primaria); font-weight: 640; }

.cabecalho-pagina { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.cabecalho-pagina h1 { margin: 0; }
.cabecalho-pagina .acoes { margin-left: auto; display: flex; gap: .55rem; }

.grade-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: .95rem; margin-bottom: 1.4rem; }
.numero-caixa {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: .95rem 1.05rem; box-shadow: var(--sombra);
}
.numero-caixa .valor { font-size: 1.6rem; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.numero-caixa .rotulo { font-size: .74rem; color: var(--texto-fraco); text-transform: uppercase; letter-spacing: .05em; margin-top: .1rem; }

.perfil-capa { height: 140px; border-radius: var(--raio-g) var(--raio-g) 0 0; background: linear-gradient(135deg, var(--cor-primaria), #9333ea); }
.perfil-topo { padding: 0 1.3rem 1.3rem; margin-top: -46px; }

.menu-suspenso { position: relative; }
.menu-lista {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 224px; padding: .4rem;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra-g);
}
.menu-lista[hidden] { display: none; }
.menu-lista a, .menu-lista button {
  display: flex; align-items: center; gap: .55rem; width: 100%;
  padding: .5rem .65rem; border-radius: 8px;
  background: none; border: 0; cursor: pointer;
  color: var(--texto); font-size: .875rem; font-family: inherit; text-align: left;
  transition: background var(--transicao);
}
.menu-lista a:hover, .menu-lista button:hover { background: var(--superficie-2); text-decoration: none; }
.menu-separador { height: 1px; background: var(--borda); margin: .35rem 0; }

.tela-simples { min-height: 100vh; display: grid; place-items: center; padding: 2.5rem 1rem; background: var(--fundo); }
.caixa-simples {
  width: 100%; max-width: 412px;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-g); box-shadow: var(--sombra-m); padding: 2rem 1.9rem;
}
.caixa-simples.larga { max-width: 540px; }
.rodape-simples { text-align: center; margin-top: 1.2rem; font-size: .855rem; color: var(--texto-medio); }

.escondido { display: none !important; }
.so-leitor { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.texto-fraco { color: var(--texto-fraco); }
.texto-medio { color: var(--texto-medio); }
.pequeno { font-size: .81rem; }
.centro { text-align: center; }
.flex { display: flex; align-items: center; gap: .55rem; }
.flex-fim { margin-left: auto; }
.espaco-topo { margin-top: 1.1rem; }

/* ---------- responsivo ------------------------------------------------------------ */

@media (max-width: 1140px) {
  .painel-corpo, .painel-corpo.sem-direita { grid-template-columns: var(--largura-lateral) minmax(0, 1fr); }
  .direita { display: none; }
}

@media (max-width: 840px) {
  .painel-corpo, .painel-corpo.sem-direita { grid-template-columns: minmax(0, 1fr); padding: 1rem .85rem 4.5rem; gap: 1rem; }

  /* A lateral vira gaveta, aberta pelo botão do topo. */
  .lateral {
    position: fixed; inset: var(--altura-topo) auto 0 0; z-index: 45;
    width: 272px; padding: 1.1rem .85rem; overflow-y: auto;
    background: var(--superficie); border-right: 1px solid var(--borda);
    transform: translateX(-100%); transition: transform 200ms cubic-bezier(.4, 0, .2, 1);
    box-shadow: var(--sombra-g);
  }
  .lateral.aberta { transform: translateX(0); }

  .veu { position: fixed; inset: var(--altura-topo) 0 0 0; z-index: 44; background: rgba(9, 11, 17, .45); backdrop-filter: blur(2px); }
  .veu[hidden] { display: none; }

  .topo { padding: 0 .85rem; gap: .6rem; }
  .topo-busca { max-width: none; }
  .cartao { padding: 1.05rem; border-radius: var(--raio); }
  .respostas { margin-left: 1.2rem; }

  /* A barra do editor rola na horizontal em vez de quebrar em três linhas. */
  .editor-barra { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; position: static; }
  .editor-barra::-webkit-scrollbar { display: none; }
  .editor-botao, .editor-formato { flex: none; }
  .editor-formato { min-width: 120px; }
  .editor-separador { margin: 0 .2rem; }
  .editor-area { min-height: 210px; padding: .95rem; }

  .linha-post { padding: .85rem .95rem; }
}

@media (min-width: 841px) {
  .abre-lateral { display: none; }
  .veu { display: none; }
}

@media (max-width: 620px) {
  .modal-caixa { width: 100%; max-height: 100vh; border-radius: 0; border: 0; }
  .modal-conteudo { padding: 1.1rem .95rem 1.8rem; }
}

@media (max-width: 540px) {
  .topo-marca .nome-marca { display: none; }
  .cabecalho-pagina .acoes { margin-left: 0; width: 100%; }
  .grade-cursos { grid-template-columns: 1fr; }
  .linha-post-numeros { display: none; }
}

@media print {
  .topo, .lateral, .direita, .post-rodape, .compositor, .modal { display: none; }
  .painel-corpo { display: block; padding: 0; }
  .cartao { border: 0; box-shadow: none; page-break-inside: avoid; }
}

/* --- edição de aula no admin -------------------------------------------
   A linha de edição fica fechada e abre por :target, quando clicam em
   "Editar". Sem JS de propósito: o admin roda com script-src 'self' e
   assim a tela continua funcionando mesmo se o bundle falhar. */
.linha-edicao { display: none; }
.linha-edicao:target { display: table-row; }
.linha-edicao > td {
  background: var(--fundo);
  border-left: 3px solid var(--cor-primaria);
  padding: 1.1rem 1.2rem;
}
.acoes-aula {
  display: flex;
  align-items: center;
  gap: .75rem;
  white-space: nowrap;
}
.linha-botoes {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}