/* ==========================================================================
   Conclave dos Dados
   Folha de estilo unica. Sem dependencias externas, sem build step.

   Linguagem visual do redesenho de setembro de 2026, definida no arquivo
   "Conclave dos Dados v3": forum retro de papel timbrado. Papel bege com
   tramas horizontais, paineis de cantos vivos com borda de 1px, sombra dura
   deslocada 3px, verde-petroleo nas barras de titulo e ambar como unica cor
   de acao.

   As tres regras deste ciclo, que valem para tudo o que for escrito aqui:

   1. RAIO ZERO. Nenhum `border-radius` fora de tres excecoes que o proprio
      desenho abre: a bolinha de estado, o contador de avisos e o avatar
      redondo. Se voce estiver prestes a arredondar um painel, um botao ou
      um campo, pare.
   2. SOMBRA DURA. A profundidade e um retangulo solido deslocado
      (`3px 3px 0`), nunca um desfoque. O brilho interno de 1px no alto e a
      esquerda e o que da o relevo de tela antiga.
   3. SEM GRADIENTE. A unica repeticao de cor no site e a trama de 4px do
      fundo. Nada de `radial-gradient`, nada de capa com brasa.

   Duas familias e mais nenhuma: Chivo nos titulos, rotulos e numeros;
   Verdana (do sistema) no corpo. Serifada continua proibida.

   Nada de style= inline: a CSP em src/lib/seguranca.js declara
   `style-src 'self'`, entao todo o desenho mora neste arquivo.
   ========================================================================== */

@font-face {
  font-family: "Chivo";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fontes/chivo-var-latin.woff2") format("woff2");
  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: "Chivo";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fontes/chivo-var-latin-ext.woff2") format("woff2");
  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;
}

/* --------------------------------------------------------------------------
   Tokens
   O tema so troca valores aqui; nenhuma regra de componente tem variante por
   tema. O tema escuro nao inventa uma segunda linguagem: e o mesmo papel, a
   mesma trama e o mesmo verde-petroleo, com a tinta e o papel trocados de
   lado.
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Papel e paineis */
  --papel: #e3dbc6;           /* fundo da cena */
  --painel: #fbf7ec;          /* interior de .caixa, .tabela, .mesa */
  --painel-alt: #f2ebda;      /* cartao dentro de painel */
  --faixa-alt: #efe8d6;       /* barra de titulo clara, rodape, filtros */
  --luz: #fffdf5;             /* brilho interno e fundo sob o cursor */
  --zebra: #f4eee0;           /* linha par de tabela */

  /* Linhas */
  --linha: #b3a88c;           /* borda de painel */
  --linha-fraca: #c6bca4;     /* borda de cartao interno */
  --linha-tenue: #e0d7c0;     /* divisor entre linhas de lista */

  /* Tinta */
  --tinta: #2e2820;
  --tinta-media: #4a4235;
  --tinta-fraca: #5f5647;

  /* Verde-petroleo: barras de titulo, numeros de destaque, marca */
  --verde: #2c5f5c;
  --verde-borda: #1e4341;
  --verde-tinta: #f4efe0;     /* texto sobre preenchimento de --verde */
  --verde-fraco: #d9e6e2;     /* texto secundario sobre --verde */
  --verde-realce: #f4e3c2;    /* link em destaque sobre --verde */

  /* Ambar: a unica cor de acao */
  --ouro: #e8b24c;
  --ouro-forte: #f2c469;      /* hover do preenchimento ambar */
  --ouro-borda: #a8802f;
  --ouro-tinta: #3a2d16;      /* texto sobre preenchimento de --ouro */
  --ouro-texto: #8a6a1f;      /* ambar legivel como texto sobre papel */

  /* Ferrugem: link sob o cursor, alerta, fixado */
  --ferrugem: #a4552b;
  --vinho: #8d2b3a;
  --sobre-vinho: #ffffff;
  --mata: #4f8a70;            /* estado bom: em jogo, online */
  --icone-inativo: #8c8370;
  --restrita: #f6ecec;        /* fundo de linha de categoria restrita */

  /* Trama do papel: a unica repeticao de cor do site */
  --tramas: repeating-linear-gradient(0deg, rgba(255, 255, 255, .5) 0 1px, transparent 1px 4px);

  /* Relevo */
  --relevo: inset 1px 1px 0 var(--luz), 3px 3px 0 rgba(90, 78, 58, .18);
  --relevo-raso: inset 1px 1px 0 var(--luz);
  --relevo-baixo: inset 1px 1px 0 var(--luz), 2px 2px 0 rgba(90, 78, 58, .2);
  --afundado: inset 2px 2px 0 rgba(90, 78, 58, .12);

  --largura: 1060px;
  --display: "Chivo", "Trebuchet MS", sans-serif;
  --corpo: Verdana, Geneva, Tahoma, sans-serif;
}

[data-tema="escuro"] {
  color-scheme: dark;

  --papel: #1e1b16;
  --painel: #2a251e;
  --painel-alt: #231f19;
  --faixa-alt: #241f19;
  --luz: rgba(255, 255, 255, .06);
  --zebra: #262119;

  --linha: #4d4438;
  --linha-fraca: #3f382e;
  --linha-tenue: #383127;

  --tinta: #ece3d0;
  --tinta-media: #cdc2aa;
  --tinta-fraca: #9c9280;

  --verde: #2c5f5c;
  --verde-borda: #17332f;
  --verde-tinta: #f4efe0;
  --verde-fraco: #cfe0dc;
  --verde-realce: #f4e3c2;

  --ouro: #e8b24c;
  --ouro-forte: #f2c469;
  --ouro-borda: #8a6524;
  --ouro-tinta: #2b2010;
  --ouro-texto: #dfae52;

  --ferrugem: #d98d5c;
  --vinho: #c8586a;
  --sobre-vinho: #23120f;
  --mata: #6fb18f;
  --icone-inativo: #7d7462;
  --restrita: #2e211f;

  --tramas: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 4px);

  --relevo: inset 1px 1px 0 var(--luz), 3px 3px 0 rgba(0, 0, 0, .38);
  --relevo-raso: inset 1px 1px 0 var(--luz);
  --relevo-baixo: inset 1px 1px 0 var(--luz), 2px 2px 0 rgba(0, 0, 0, .34);
  --afundado: inset 2px 2px 0 rgba(0, 0, 0, .28);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 0 40px;
  min-height: 100vh;
  background-color: var(--papel);
  background-image: var(--tramas);
  color: var(--tinta);
  font-family: var(--corpo);
  font-size: 13px;
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 0;
  text-wrap: pretty;
}

h1 { font-size: 28px; }
h2 { font-size: 19px; }
h3 { font-size: 16px; letter-spacing: -.01em; font-weight: 700; }
h4 { font-size: 13.5px; letter-spacing: 0; font-weight: 700; }

p { margin: 0 0 10px; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--verde);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover { color: var(--ferrugem); }

/* O foco e um retangulo ambar solido: combina com a moldura dura do resto. */
:focus-visible {
  outline: 2px solid var(--ouro-borda);
  outline-offset: 1px;
}

b, strong { font-weight: bold; }
em { font-style: italic; }
hr { border: 0; border-top: 1px solid var(--linha-tenue); margin: 14px 0; }

img { max-width: 100%; }

code, kbd, samp, pre {
  font-family: var(--corpo);
  font-size: .95em;
}

input, textarea, select, button { font-family: var(--corpo); }

/* `hidden` e o jeito do HTML de dizer "isto nao esta na pagina agora", e o
   navegador o aplica com a regra mais fraca que existe — qualquer `display:`
   de componente ganha dele sem querer. Como a previa da mensagem esconde e
   mostra campo e barra por este atributo, ele precisa vencer. */
[hidden] { display: none !important; }

.oculto-visual {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  background: var(--ouro);
  color: var(--ouro-tinta);
  border: 1px solid var(--ouro-borda);
  padding: 9px 16px;
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-decoration: none;
}
.pular:focus { left: 8px; top: 8px; }

.sprite-oculto { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --------------------------------------------------------------------------
   Icones
   O sprite e tracado, herda currentColor. Nada de emoji.
   -------------------------------------------------------------------------- */

.icone { width: 16px; height: 16px; flex: none; }
.icone-mini { width: 13px; height: 13px; flex: none; }
.icone-grande { width: 20px; height: 20px; flex: none; }
.svg-traco { stroke: currentColor; fill: none; }

/* --------------------------------------------------------------------------
   Estrutura
   Uma largura so para o site inteiro. O desenho nao tem bloco que sangre de
   ponta a ponta, entao `.pagina-aberta` existe apenas para nao quebrar quem
   ainda passa layout: 'aberto'.
   -------------------------------------------------------------------------- */

.faixa {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 14px;
}

.pagina {
  max-width: var(--largura);
  margin: 14px auto 0;
  padding: 0 14px;
}

/* Dentro da pagina a faixa ja esta centralizada: nao repete margem nem recuo. */
.pagina .faixa,
.pagina-aberta .faixa { max-width: none; padding: 0; }

.faixa-conteudo { display: block; }

/* --------------------------------------------------------------------------
   Barra de sessao
   A tira verde-petroleo que abre a pagina: o lema a esquerda, quem esta
   logado e os atalhos de conta a direita.
   -------------------------------------------------------------------------- */

.barra-sessao {
  background: var(--verde);
  color: var(--verde-fraco);
  border-bottom: 2px solid var(--verde-borda);
}

.barra-sessao .faixa {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 11.5px;
  letter-spacing: .02em;
}

.barra-lema { margin-right: auto; }
.barra-sessao b { color: var(--verde-realce); }
.barra-sessao a { color: var(--verde-fraco); }
.barra-sessao a:hover { color: var(--verde-realce); }
.barra-sessao .em-linha { display: inline; }

.barra-sep {
  opacity: .5;
  user-select: none;
}

/* Botao de texto puro na barra: o "sair" precisa ser <button> por causa do
   POST com CSRF, mas nao pode parecer botao. */
.barra-acao {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-size: 11.5px;
  letter-spacing: .02em;
  color: var(--verde-fraco);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.barra-acao:hover { color: var(--verde-realce); }

/* Item da barra que e so icone: sol/lua do tema e o sino de avisos. Sem
   sublinhado, e com area de clique de verdade em vez do tamanho do glifo. */
.barra-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2px;
  text-decoration: none;
  color: var(--verde-fraco);
}
.barra-icone:hover { color: var(--verde-realce); }
.barra-icone .icone { stroke: currentColor; fill: none; }

/* O contador cavalga o canto do icone, como aviso costuma ser. */
.barra-icone .contador {
  position: absolute;
  top: -4px;
  right: -7px;
}
.barra-sessao .tem-aviso { color: var(--verde-realce); }

/* --------------------------------------------------------------------------
   Topo
   Painel da marca com o campo de busca colado no botao "ir".
   -------------------------------------------------------------------------- */

/* O painel da marca tem de nascer na MESMA largura util dos paineis de
   conteudo. `.faixa` e `.pagina` limitam a 1060px e ainda gastam 14px de recuo
   de cada lado, entao o conteudo real mede 1032px; se o painel do topo fosse
   desenhado sobre a `.faixa` inteira ele mediria 1060 e sobraria 14px para
   fora dos dois lados — que era o desalinhamento visivel entre o cabecalho, o
   rodape e todo o resto. Por isso o recuo fica no `.topo` e o painel fica na
   `.faixa` de dentro. Mesma coisa no rodape. */
.topo {
  max-width: var(--largura);
  margin: 16px auto 0;
  padding: 0 14px;
}

.topo .faixa {
  max-width: none;
  margin: 0;
  background: var(--painel);
  border: 1px solid var(--linha);
  box-shadow: var(--relevo);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.marca {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-right: auto;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.marca:hover { color: inherit; }

/* O losango ambar do desenho vira o dado do sprite dentro da mesma caixa. */
.marca-icone {
  width: 44px;
  height: 44px;
  flex: none;
  padding: 11px;
  background: var(--verde);
  border: 1px solid var(--verde-borda);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .25);
  color: var(--ouro);
  stroke: currentColor;
  fill: none;
}

.marca-texto { display: block; min-width: 0; }

.marca-texto strong {
  display: block;
  font-family: var(--display);
  font-weight: 900;
  font-size: 27px;
  letter-spacing: -.02em;
  line-height: 1;
}

.marca-texto small {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--tinta-fraca);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Busca do topo: campo e botao formam uma peca so, sem folga no meio. */
.busca-topo {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.busca-topo input {
  font-size: 12px;
  padding: 7px 9px;
  width: 168px;
  background: var(--luz);
  border: 1px solid var(--linha);
  border-right: 0;
  box-shadow: var(--afundado);
  color: var(--tinta);
}
.busca-topo input::placeholder { color: var(--tinta-fraca); }
.busca-topo input:focus-visible { outline-offset: -2px; }

.busca-topo button {
  cursor: pointer;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 7px 14px;
  background: var(--ouro);
  color: var(--ouro-tinta);
  border: 1px solid var(--ouro-borda);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5);
}
.busca-topo button:hover { background: var(--ouro-forte); }

/* --------------------------------------------------------------------------
   Menu
   Abas de fichario: a ativa cresce um pixel para baixo e engole a borda do
   painel que vem em seguida.
   -------------------------------------------------------------------------- */

.menu {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  margin: 10px 0 0;
}

.menu a {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 9px 18px;
  text-decoration: none;
  background: var(--linha-tenue);
  color: var(--tinta-fraca);
  border: 1px solid var(--linha);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .6);
  position: relative;
  z-index: 1;
}
.menu a:hover { background: var(--luz); color: var(--tinta); }

.menu a.ativo {
  background: var(--painel);
  color: var(--verde);
  border-bottom-color: var(--painel);
  margin-bottom: -1px;
  z-index: 2;
}

/* Bloco de conta do topo, quando aparece fora da barra de sessao. */
.conta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.botao-topo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  padding: 5px 9px;
  font-size: 11.5px;
  text-decoration: none;
  color: var(--tinta-fraca);
  background: var(--faixa-alt);
  border: 1px solid var(--linha-fraca);
  box-shadow: var(--relevo-raso);
  cursor: pointer;
}
.botao-topo:hover { background: var(--luz); color: var(--tinta); }
.botao-topo .icone { stroke: currentColor; fill: none; }
.botao-topo.destaque {
  background: var(--ouro);
  border-color: var(--ouro-borda);
  color: var(--ouro-tinta);
  font-weight: bold;
}
.botao-topo.destaque:hover { background: var(--ouro-forte); color: var(--ouro-tinta); }

/* Contador de avisos: uma das tres excecoes de raio do projeto. */
.contador {
  min-width: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--ferrugem);
  color: #fff;
  font-size: 9.5px;
  font-weight: bold;
  line-height: 16px;
  text-align: center;
}
.tem-aviso { border-color: var(--ferrugem); }

/* O alternador mostra so o icone do tema que esta em vigor. */
.tema-escuro { display: none; }
[data-tema="escuro"] .tema-claro { display: none; }
[data-tema="escuro"] .tema-escuro { display: inline; }

/* --------------------------------------------------------------------------
   Trilha
   A tira de "voce esta aqui", presa embaixo das abas.
   -------------------------------------------------------------------------- */

.trilha {
  margin: 0;
  border: 1px solid var(--linha);
  border-top: 3px solid var(--verde);
  background: var(--painel);
  box-shadow: var(--relevo);
  padding: 8px 14px;
  font-size: 11.5px;
  color: var(--tinta-fraca);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.trilha a { color: var(--verde); }
.trilha a:hover { color: var(--ferrugem); }
/* O ultimo passo da trilha e o titulo da discussao, que pode ser uma frase
   inteira: ele quebra em vez de empurrar a barra para fora da tela. */
.trilha b, .trilha strong { color: var(--tinta); min-width: 0; overflow-wrap: anywhere; }
.trilha .icone-mini { color: var(--linha); stroke: currentColor; fill: none; }
.trilha-aqui { margin-left: auto; }

/* --------------------------------------------------------------------------
   Painel de numeros
   Quatro celulas lado a lado logo abaixo da trilha.
   -------------------------------------------------------------------------- */

.numeros, .painel-numeros {
  margin-top: 10px;
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
}

.numeros > div, .painel-numeros > div {
  flex: 1 1 140px;
  /* Sem isto o `min-width: auto` do item flex trava no min-content do rotulo e
     a tira estoura a tela em telefone estreito. */
  min-width: 0;
  background: var(--painel-alt);
  border: 1px solid var(--linha-fraca);
  box-shadow: var(--relevo-raso);
  padding: 9px 13px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.numeros b, .painel-numeros b {
  font-family: var(--display);
  font-weight: 900;
  font-size: 19px;
  color: var(--verde);
}

.numeros span, .painel-numeros span {
  font-size: 11.5px;
  color: var(--tinta-fraca);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Blocos
   `.caixa` e o painel de papel. `.secao-titulo` e o cabecalho de pagina em
   painel proprio. `.painel-titulo` e a barra verde presa ao topo de um
   painel.
   -------------------------------------------------------------------------- */

.secao { margin-top: 14px; }
.secao:first-child { margin-top: 0; }

.caixa {
  background: var(--painel);
  border: 1px solid var(--linha);
  box-shadow: var(--relevo);
  padding: 16px 18px;
}

.caixa-nua {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.caixa-erro { border-color: var(--vinho); border-top: 3px solid var(--vinho); }

.papel { background: var(--painel); }

/* Cabecalho de pagina: titulo grande a esquerda, acao ambar a direita. */
.secao-titulo {
  margin-top: 14px;
  background: var(--painel);
  border: 1px solid var(--linha);
  box-shadow: var(--relevo);
  padding: 20px 22px;
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.secao-titulo:first-child { margin-top: 0; }

/* O nivel do titulo decide o tamanho do cabecalho: h1 e o titulo da pagina,
   que o desenho manda vir grande e sozinho; h2 e cabecalho de secao interna
   ("Mesas" no indice do forum, "Ultimas mensagens" no perfil) e vem em corpo
   menor, senao a pagina fica com dois titulos gritando o mesmo tom. */
.secao-titulo h1,
.secao-titulo h2 {
  font-weight: 900;
  margin-right: auto;
}

.secao-titulo h1 { font-size: 28px; letter-spacing: -.025em; }
.secao-titulo h2 { font-size: 19px; letter-spacing: -.015em; }
.secao-titulo:has(h2) { padding: 13px 16px; }

.secao-titulo p { margin: 6px 0 0; font-size: 12.5px; color: var(--tinta-fraca); }

/* O icone do cabecalho de pagina some: no desenho o titulo se sustenta
   sozinho e o icone competia com a marca do topo. */
.secao-titulo .icone-grande { display: none; }

.secao-titulo .acoes { margin-left: auto; }

.acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.acoes a { font-size: 12px; }

/* Barra verde presa ao topo de um painel. */
.painel-titulo {
  background: var(--verde);
  color: var(--verde-tinta);
  border-bottom: 1px solid var(--verde-borda);
  padding: 7px 14px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.painel-titulo > :first-child { margin-right: auto; }
.painel-titulo a {
  color: var(--verde-realce);
  font-size: 11.5px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: normal;
}
.painel-titulo a:hover { color: #fff; }

/* Variante clara da barra de titulo, para paineis de apoio. */
.painel-titulo-claro {
  background: var(--faixa-alt);
  color: var(--tinta);
  border-bottom: 1px solid var(--linha-fraca);
  font-size: 11.5px;
}
.painel-titulo-claro a { color: var(--verde); }

/* Painel com barra: o corpo nao repete o recuo do titulo. */
.painel {
  background: var(--painel);
  border: 1px solid var(--linha);
  box-shadow: var(--relevo);
}
.painel-corpo { padding: 14px; }

/* Dentro de um painel que ja tem moldura, a tabela e a grade de fichas
   perdem a sua: duas bordas encostadas viram uma linha grossa e suja. */
.painel > .tabela {
  margin-top: 0;
  border: 0;
  box-shadow: none;
}
.painel-corpo > .mesas,
.painel-corpo > .filtros { margin-top: 0; }
.painel-corpo > .vazio {
  margin-top: 0;
  border: 0;
  box-shadow: none;
  background: none;
  padding: 16px;
}

/* Lista de atalhos da coluna de apoio: cada item abre com o chevron do
   desenho, desenhado em ::before para nao virar texto selecionavel. */
.atalhos li { gap: 6px; }
.atalhos li::before {
  content: "\00BB";
  color: var(--linha);
  flex: none;
}

/* --------------------------------------------------------------------------
   Capa da home
   Nao ha mais capa dramatica: o desenho abre com um painel de boas-vindas do
   mesmo papel de todo o resto.
   -------------------------------------------------------------------------- */

.capa { display: block; margin: 0; }

.capa .faixa { display: block; }

.capa-texto { padding: 26px 26px 24px; }

.capa-sobrelinha {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.capa-texto h1 {
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -.025em;
  margin: 0 0 12px;
}
.capa-texto h1 em { font-style: normal; color: var(--verde); }

.capa-resumo {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--tinta-media);
  max-width: 56ch;
  margin: 0 0 20px;
}

.capa-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Botoes
   Um botao ambar por tela, no maximo. O resto e o botao de papel.
   -------------------------------------------------------------------------- */

.botao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 11px 20px;
  background: var(--faixa-alt);
  color: var(--tinta);
  border: 1px solid var(--linha);
  box-shadow: var(--relevo-baixo);
}
.botao:hover { background: var(--luz); color: var(--tinta); }
.botao:active { box-shadow: var(--relevo-raso); transform: translate(2px, 2px); }
.botao .icone { stroke: currentColor; fill: none; color: var(--verde); }
.botao:hover .icone { color: var(--ferrugem); }

.botao-primario,
.botao-acao {
  background: var(--ouro);
  color: var(--ouro-tinta);
  border-color: var(--ouro-borda);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .55), 2px 2px 0 rgba(90, 78, 58, .25);
}
.botao-primario:hover,
.botao-acao:hover { background: var(--ouro-forte); color: var(--ouro-tinta); }
.botao-primario .icone,
.botao-primario:hover .icone,
.botao-acao .icone,
.botao-acao:hover .icone { color: var(--ouro-tinta); }

.botao-mini {
  padding: 7px 13px;
  font-size: 11px;
  letter-spacing: .05em;
  gap: 6px;
}

/* Botao que carrega um estado ligado — "Acompanhando", hoje o unico. O verde
   preenchido diz que a coisa esta ativa sem precisar de uma segunda palavra. */
.botao-ligado {
  background: var(--verde);
  color: var(--verde-tinta);
  border-color: var(--verde-borda);
}
.botao-ligado:hover { background: var(--verde-borda); color: var(--verde-tinta); }
.botao-ligado .icone,
.botao-ligado:hover .icone { color: var(--verde-tinta); }
.botao-mini .icone { width: 14px; height: 14px; }

.botao-perigo {
  background: var(--vinho);
  color: var(--sobre-vinho);
  border-color: var(--vinho);
}
.botao-perigo:hover { background: var(--vinho); color: var(--sobre-vinho); filter: brightness(1.15); }
.botao-perigo .icone,
.botao-perigo:hover .icone { color: var(--sobre-vinho); }

.botao[disabled], .botao[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: var(--relevo-raso);
}

.em-linha { display: inline-flex; }

.linha-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.acoes-rapidas { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* --------------------------------------------------------------------------
   Avisos
   -------------------------------------------------------------------------- */

.aviso {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  padding: 10px 14px;
  font-size: 12.5px;
  border: 1px solid var(--linha-fraca);
  border-left: 4px solid var(--verde);
  background: var(--faixa-alt);
  color: var(--tinta);
  box-shadow: var(--relevo-raso);
}
.aviso .icone { stroke: currentColor; fill: none; }
.aviso-ok { border-left-color: var(--mata); }
.aviso-ok .icone { color: var(--mata); }
.aviso-erro { border-left-color: var(--vinho); background: var(--restrita); }
.aviso-erro .icone { color: var(--vinho); }
.aviso-texto { flex: 1 1 auto; min-width: 0; }
.aviso-link { margin-left: auto; }

.faixa-aviso { padding-top: 0; }

.avisos { display: grid; gap: 3px; }

/* --------------------------------------------------------------------------
   Estado da mesa
   O desenho marca o estado com uma bolinha colorida e o rotulo em versalete.
   A bolinha e a segunda excecao de raio do projeto.
   -------------------------------------------------------------------------- */

.estado {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  font-weight: bold;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}
.estado em { font-style: normal; }

.estado::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: none;
  background: var(--icone-inativo);
  border: 1px solid rgba(46, 40, 32, .35);
}

.estado-ativa::before { background: var(--mata); }
.estado-recrutando::before { background: var(--ouro); }
.estado-pausada::before { background: var(--linha); }
.estado-encerrada::before { background: var(--icone-inativo); }

/* Carimbo: a forma grande do estado, uma vez por ficha de mesa. */
.carimbo {
  display: inline-block;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 12px;
  background: var(--verde);
  color: var(--verde-tinta);
  border: 1px solid var(--verde-borda);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .2);
}

/* --------------------------------------------------------------------------
   Selo e dica
   Estado que cabe num icone nao vira palavra escrita. A dica abre no hover e
   no foco de teclado.
   -------------------------------------------------------------------------- */

.selo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: none;
  background: var(--faixa-alt);
  border: 1px solid var(--linha-fraca);
  box-shadow: var(--relevo-raso);
  color: var(--tinta-fraca);
}
.selo .icone-mini { width: 12px; height: 12px; }
.selo-ouro { background: var(--ouro); border-color: var(--ouro-borda); color: var(--ouro-tinta); }
.selo-vinho { background: var(--restrita); border-color: var(--vinho); color: var(--vinho); }

.dica-alvo { position: relative; }

.dica-alvo::after {
  content: attr(data-dica);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  z-index: 40;
  white-space: nowrap;
  font-family: var(--corpo);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: normal;
  padding: 5px 9px;
  background: var(--verde);
  color: var(--verde-tinta);
  border: 1px solid var(--verde-borda);
  box-shadow: 2px 2px 0 rgba(90, 78, 58, .25);
  opacity: 0;
  pointer-events: none;
}
.dica-alvo:hover::after,
.dica-alvo:focus-visible::after { opacity: 1; }
.dica-esquerda::after { left: 0; transform: none; }

.dica { font-size: 11px; color: var(--tinta-fraca); }

/* --------------------------------------------------------------------------
   Fichas de mesa
   -------------------------------------------------------------------------- */

/* O `min(272px, 100%)` e o que impede a trilha de 272px de estourar a tela num
   telefone mais estreito do que uma ficha. */
.mesas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(272px, 100%), 1fr));
  gap: 12px;
  margin-top: 12px;
}
.mesas-duas { grid-template-columns: repeat(auto-fill, minmax(min(272px, 100%), 1fr)); }

.mesa {
  background: var(--painel);
  border: 1px solid var(--linha);
  box-shadow: var(--relevo);
  padding: 17px 18px;
  display: grid;
  gap: 10px;
  align-content: start;
}
.mesa:hover { border-color: var(--verde); }

/* Ficha dentro de um painel: cartao mais claro, sem sombra dura. */
.painel-corpo .mesa {
  background: var(--painel-alt);
  border-color: var(--linha-fraca);
  box-shadow: var(--relevo-raso);
  padding: 15px 16px;
  gap: 9px;
}
.painel-corpo .mesa:hover { background: var(--luz); border-color: var(--verde); }

.mesa-topo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.mesa-topo h3 { flex: 1 1 100%; }

.mesa-topo h3 a {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.015em;
  text-decoration: none;
  color: var(--tinta);
}
.mesa-topo h3 a:hover { color: var(--ferrugem); text-decoration: underline; }

/* O estado sobe para cima do nome, como no desenho. */
.mesa-topo .estado { order: -1; flex: 1 1 100%; }

.mesa-sistema { font-size: 11.5px; color: var(--tinta-fraca); }

.mesa-corpo p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--tinta-media);
}

.mesa-dados {
  border-top: 1px dashed var(--linha-fraca);
  padding-top: 9px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--tinta-fraca);
}
.mesa-dados > div { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.mesa-dados .icone { width: 13px; height: 13px; stroke: currentColor; fill: none; color: var(--linha); }
.mesa-dados a { color: var(--tinta); }
.mesa-dados a:hover { color: var(--ferrugem); }
.vagas { font-weight: bold; color: var(--tinta); }

.mesa-linha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mesa-linha .icone-mini { color: var(--tinta-fraca); }

/* --------------------------------------------------------------------------
   Filtros
   Fichas de filtro numa tira clara. A ativa e verde solido.
   -------------------------------------------------------------------------- */

/* A tira e uma pilha de linhas, nao um amontoado unico: cada criterio ocupa
   a sua e para de empurrar o vizinho. Antes era um so `flex-wrap` com rotulo,
   cinco fichas de situacao, separador, rotulo e uma ficha por sistema — com o
   cadastro crescendo, aquilo quebrava em quatro linhas de altura irregular e
   ninguem achava onde um criterio terminava e o outro comecava. */
.filtros {
  margin-top: 12px;
  display: grid;
  gap: 8px;
  background: var(--faixa-alt);
  border: 1px solid var(--linha-fraca);
  box-shadow: var(--relevo-raso);
  padding: 9px 12px;
}

.filtros-linha {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.rotulo {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.filtro {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: bold;
  text-decoration: none;
  padding: 6px 12px;
  background: var(--luz);
  color: var(--tinta-fraca);
  border: 1px solid var(--linha);
  box-shadow: var(--relevo-raso);
}
.filtro:hover { background: var(--painel); color: var(--tinta); }

.filtro.ativo {
  background: var(--verde);
  color: var(--verde-tinta);
  border-color: var(--verde-borda);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .2);
}

.conta-mini { font-weight: normal; opacity: .75; }

/* Campo de filtro: mesma ficha do `.filtro`, mas escrevivel. `max-width` para
   um sistema de nome comprido nao esticar a linha inteira. */
.filtro-campo {
  font-family: var(--corpo);
  font-size: 11.5px;
  font-weight: bold;
  padding: 6px 10px;
  max-width: 260px;
  background: var(--luz);
  color: var(--tinta);
  border: 1px solid var(--linha);
  box-shadow: var(--relevo-raso);
}
.filtro-campo:hover { background: var(--painel); }

/* O botao existe para quem esta sem JavaScript. Quando conclave.js roda, ele
   marca o formulario de pronto e o botao sai de cena, porque a troca da opcao
   ja envia. Mesmo arranjo da barra do editor, de cabeca para baixo. */
.filtro-pronto .filtro-botao { display: none; }

/* --------------------------------------------------------------------------
   Tabelas
   Painel com barra verde de titulos. Zebra clara, linha sob o cursor em
   papel claro.
   -------------------------------------------------------------------------- */

.tabela {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  background: var(--painel);
  border: 1px solid var(--linha);
  box-shadow: var(--relevo);
}

.tabela caption {
  caption-side: top;
  text-align: left;
  background: var(--faixa-alt);
  border-bottom: 1px solid var(--linha-fraca);
  padding: 8px 14px;
  font-size: 11.5px;
  color: var(--tinta-fraca);
}

.tabela thead th {
  background: var(--verde);
  color: var(--verde-tinta);
  border-bottom: 1px solid var(--verde-borda);
  padding: 7px 14px;
  text-align: left;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tabela tbody td {
  padding: 13px 14px;
  border-top: 1px solid var(--linha-tenue);
  vertical-align: top;
}
.tabela tbody tr:first-child td { border-top: 0; }
.tabela tbody tr:nth-child(even) td { background: var(--zebra); }
.tabela tbody tr:hover td { background: var(--luz); }

.tabela th.estreita, .tabela td.estreita { width: 1%; white-space: nowrap; }

.num {
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  color: var(--tinta);
}
.num-data {
  font-family: var(--corpo);
  font-weight: normal;
  font-size: 11.5px;
  color: var(--tinta-fraca);
}
.zero { color: var(--icone-inativo); font-weight: normal; }

.titulo-linha { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.titulo-linha a {
  font-size: 13px;
  font-weight: bold;
  text-decoration: none;
  color: var(--tinta);
}
.titulo-linha a:hover { color: var(--ferrugem); text-decoration: underline; }
.titulo-linha .icone-mini { color: var(--ferrugem); stroke: currentColor; fill: none; }

.linha-meta { margin: 2px 0 0; font-size: 11px; color: var(--tinta-fraca); }
.linha-meta a { color: var(--tinta-fraca); }
.linha-meta a:hover { color: var(--ferrugem); }

.celula-sistema { font-size: 11.5px; color: var(--tinta-fraca); }
.celula-mestre { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; }
.celula-mestre .icone { width: 13px; height: 13px; stroke: currentColor; fill: none; color: var(--linha); }

.vazio {
  margin: 12px 0 0;
  background: var(--painel);
  border: 1px dashed var(--linha);
  box-shadow: var(--relevo-raso);
  padding: 22px;
  text-align: center;
  font-size: 12.5px;
  color: var(--tinta-fraca);
}
.tabela .vazio { border: 0; box-shadow: none; background: none; padding: 8px 0; text-align: left; }

/* --------------------------------------------------------------------------
   Categorias do forum
   O icone da categoria mora numa caixinha de 26px, como no desenho.
   -------------------------------------------------------------------------- */

.categoria-linha { display: flex; align-items: center; gap: 13px; }

.categoria-linha .icone,
.categoria-linha .icone-grande {
  width: 26px;
  height: 26px;
  flex: none;
  padding: 5px;
  background: var(--luz);
  border: 1px solid var(--linha-fraca);
  box-shadow: var(--relevo-raso);
  color: var(--verde);
  stroke: currentColor;
  fill: none;
}
.categoria-linha .icone { padding: 6px; color: var(--icone-inativo); }

.categoria-linha > div { min-width: 0; }

.nome-categoria { display: block; }
.nome-categoria a {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  color: var(--tinta);
}
.nome-categoria a:hover { color: var(--ferrugem); text-decoration: underline; }

.categoria-linha p,
.descricao-categoria {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--tinta-fraca);
}

.linha-fixada .categoria-linha .icone-grande { color: var(--ferrugem); border-color: var(--ferrugem); }
.linha-restrita td { background: var(--restrita); }
.linha-restrita .categoria-linha .icone-grande { color: var(--vinho); border-color: var(--vinho); }
.linha-filha td:first-child { padding-left: 38px; }

/* Etiqueta de estado de categoria: "fixo", "privado". */
.marcador {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: bold;
  background: var(--faixa-alt);
  color: var(--tinta-fraca);
  border: 1px solid var(--linha-fraca);
  padding: 2px 7px;
}
.marcador-vinho { background: var(--restrita); color: var(--vinho); border-color: var(--vinho); }
.marcador .icone-mini { stroke: currentColor; fill: none; }

/* --------------------------------------------------------------------------
   Discussao
   -------------------------------------------------------------------------- */

.cabecalho-topico,
.cabecalho-mesa {
  margin-top: 12px;
  background: var(--painel);
  border: 1px solid var(--linha);
  box-shadow: var(--relevo);
  padding: 18px 20px;
}

/* A ficha da mesa aninha .cabecalho-mesa dentro de .cabecalho-topico. Moldura
   dentro de moldura vira caixa dupla: a de dentro perde a sua e vira so a
   linha do titulo com o carimbo ao lado. */
.cabecalho-topico .cabecalho-mesa {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.cabecalho-topico .titulo-linha,
.cabecalho-mesa .titulo-linha { align-items: center; gap: 10px; }

.cabecalho-topico h1,
.cabecalho-mesa h1 { font-size: 26px; }

.cabecalho-topico .icone-grande,
.cabecalho-mesa .icone-grande { color: var(--ferrugem); stroke: currentColor; fill: none; }

.meta {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--linha-fraca);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--tinta-fraca);
}
.meta .icone-mini { color: var(--linha); stroke: currentColor; fill: none; }
.meta a { color: var(--tinta-fraca); }
.meta a:hover { color: var(--ferrugem); }

.mensagem {
  margin-top: 12px;
  background: var(--painel);
  border: 1px solid var(--linha);
  box-shadow: var(--relevo);
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr);
  /* Pular para #m412 (citacao, aviso, resultado de busca) nao pode colar a
     mensagem no topo da janela — dois dedos de respiro dizem que ela comeca
     ali. */
  scroll-margin-top: 14px;
}

.mensagem-autor {
  background: var(--painel-alt);
  border-right: 1px solid var(--linha-fraca);
  padding: 16px 14px;
  display: grid;
  gap: 7px;
  justify-items: center;
  text-align: center;
  align-content: start;
  font-size: 11px;
  color: var(--tinta-fraca);
}

.mensagem-autor .nome {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  color: var(--tinta);
  text-decoration: none;
  word-break: break-word;
}
.mensagem-autor .nome:hover { color: var(--ferrugem); }

/* A ficha do autor — "Mensagens", "Membro desde" — mora numa <dl>, e a <dl>
   crua do navegador nao cabe numa coluna centrada de 172px: ela vem com margem
   de 1em em cima e embaixo, e cada <dd> nasce com 40px de recuo a esquerda. O
   resultado era o rotulo centrado e o valor empurrado para a direita dele, com
   um vao no meio da coluna. Aqui a lista vira uma grade propria: rotulo em
   versalete miudo, valor logo abaixo, os dois no mesmo eixo do nome. */
.mensagem-autor dl {
  width: 100%;
  margin: 2px 0 0;
  padding-top: 9px;
  border-top: 1px solid var(--linha-tenue);
  display: grid;
  gap: 2px;
}
.mensagem-autor dt {
  font-family: var(--display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}
/* Espaco entre um par e o seguinte, e nao entre rotulo e valor do mesmo par. */
.mensagem-autor dt ~ dt { margin-top: 8px; }
.mensagem-autor dd {
  margin: 0;
  font-size: 12px;
  color: var(--tinta-media);
}

.mensagem-cabecalho {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 16px;
  background: var(--faixa-alt);
  border-bottom: 1px solid var(--linha-fraca);
  font-size: 11px;
  color: var(--tinta-fraca);
}
.mensagem-cabecalho .numero {
  margin-left: auto;
  font-weight: bold;
  color: var(--verde);
  text-decoration: none;
}
.mensagem-cabecalho .numero:hover { color: var(--ferrugem); }

.mensagem-corpo {
  padding: 16px;
  color: var(--tinta-media);
  overflow-wrap: break-word;
  min-width: 0;
}
.mensagem-corpo p { margin: 0 0 12px; }

/* --------------------------------------------------------------------------
   TEXTO FORMATADO
   Tudo que sai de src/lib/text.js cai aqui: corpo de mensagem, apresentacao de
   perfil, cronica de mesa e o texto guardado no registro de moderacao. Um
   lugar so, e nao um por tela, porque a marcacao e a mesma nos quatro.

   O que manda nesta secao e o fluxo de leitura, nao a densidade: medida de
   linha limitada, respiro entre blocos e diferenca clara de peso entre secao,
   corpo e aparte. Mensagem grande sem isso vira parede.
   -------------------------------------------------------------------------- */

.texto {
  font-size: 13px;
  line-height: 1.8;
  color: var(--tinta-media);
  overflow-wrap: break-word;
}

/* Medida. Linha comprida demais faz o olho perder a volta na quebra; 68ch da
   por volta de 75 caracteres, que e onde a leitura corrida se sustenta. Tabela,
   figura e codigo ficam de fora — sao largura de dado, nao de leitura. */
.texto p,
.texto ul,
.texto ol,
.texto blockquote,
.texto .sumario { max-width: 68ch; }

/* Com uma caixa de apoio flutuando, a medida ja e dada pelo espaco que sobra ao
   lado dela. Manter as duas contas espremeria o texto numa coluna de dois dedos,
   que e o oposto do que a medida existe para fazer. */
.texto:has(.aparte-lado) p,
.texto:has(.aparte-lado) ul,
.texto:has(.aparte-lado) ol { max-width: none; }

/* A caixa de apoio flutua; sem isto ela vazaria para fora da mensagem. */
.texto::after { content: ""; display: block; clear: both; }

.texto > :first-child { margin-top: 0; }
.texto > :last-child { margin-bottom: 0; }

.texto p { margin: 0 0 13px; }
.texto ul, .texto ol { margin: 0 0 13px; padding-left: 22px; }
.texto li { margin-bottom: 5px; }
.texto li > ul, .texto li > ol { margin: 5px 0 0; }
.texto li > p { margin: 0 0 6px; }
.texto img { display: block; max-width: 100%; height: auto; }
.texto hr { margin: 20px 0; }
.texto mark { background: var(--ouro); color: var(--ouro-tinta); padding: 0 3px; }
.texto del { color: var(--tinta-fraca); }

/* Secao. A mensagem comeca em h2 — h1 e o titulo da discussao. */
.texto .secao {
  font-family: var(--display);
  color: var(--tinta);
  line-height: 1.3;
  scroll-margin-top: 14px;
}
.texto h2.secao {
  font-size: 16.5px;
  margin: 24px 0 9px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--linha-tenue);
}
.texto h3.secao { font-size: 14.5px; margin: 20px 0 8px; }
.texto h4.secao {
  font-size: 12.5px;
  margin: 18px 0 7px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tinta-fraca);
}
.texto .secao:first-child { margin-top: 0; }

/* A ancora so aparece sob o cursor: ela e endereco, nao enfeite. Continua
   alcancavel pelo teclado, e por isso reaparece no foco. */
.ancora {
  margin-left: 7px;
  font-size: .78em;
  color: var(--linha);
  text-decoration: none;
  opacity: 0;
}
.secao:hover .ancora { opacity: 1; }
.ancora:focus { opacity: 1; color: var(--ferrugem); }

/* Sumario: nasce sozinho quando a mensagem passa de tres secoes. */
.sumario {
  margin: 0 0 18px;
  padding: 11px 15px;
  background: var(--faixa-alt);
  border: 1px solid var(--linha);
  border-left: 4px solid var(--verde);
  box-shadow: var(--relevo-raso);
}
.sumario-rotulo {
  font-family: var(--display);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--tinta-fraca);
  margin: 0 0 7px;
}
.sumario ol { margin: 0; padding-left: 19px; font-size: 12px; max-width: none; }
.sumario li { margin-bottom: 3px; }
.sumario li::marker { color: var(--tinta-fraca); }
.sumario-n2 { margin-left: 16px; }

/* Apartes: nota, aviso, apoio, dobra e colunas.
   A classe de fora e `aparte`, e nao `caixa`, porque `.caixa` e o painel do
   site inteiro — herdar aquele nome daria moldura de painel a toda nota. */
.aparte {
  margin: 0 0 16px;
  padding: 12px 15px;
  background: var(--painel-alt);
  border: 1px solid var(--linha-fraca);
  box-shadow: var(--relevo-raso);
}
.aparte-titulo {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tinta-fraca);
  margin: 0 0 7px;
}
.aparte-corpo > :last-child { margin-bottom: 0; }

.aparte-nota { border-left: 4px solid var(--verde); }
.aparte-nota .aparte-titulo { color: var(--verde); }
.aparte-aviso { border-left: 4px solid var(--vinho); background: var(--restrita); }
.aparte-aviso .aparte-titulo { color: var(--vinho); }

/* Apoio: sai para o lado quando ha lado, e vira bloco comum quando nao ha. */
.aparte-lado { border-left: 4px solid var(--ouro-borda); }
.aparte-lado .aparte-titulo { color: var(--ouro-texto); }
@media (min-width: 760px) {
  .aparte-lado { float: right; width: 44%; margin: 4px 0 14px 20px; }
}

/* Dobra: o que fecha o que e longo. O <details> e nativo — sem JavaScript. */
.aparte-dobra { padding: 0; }
.aparte-dobra > summary {
  cursor: pointer;
  padding: 9px 15px;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  color: var(--tinta);
  background: var(--faixa-alt);
  border-bottom: 1px solid transparent;
}
.aparte-dobra > summary:hover { color: var(--ferrugem); }
.aparte-dobra[open] > summary { border-bottom-color: var(--linha-fraca); }
.aparte-dobra > .aparte-corpo { padding: 12px 15px; }

.aparte-colunas { background: none; border: 0; box-shadow: none; padding: 0; }
@media (min-width: 700px) {
  .aparte-colunas > .aparte-corpo { columns: 2; column-gap: 26px; }
  /* Quem nao pode partir ao meio e o ITEM, nao a lista: proibir a quebra do
     filho direto faria a lista inteira ficar numa coluna so — que e o mesmo que
     nao ter duas colunas. */
  .aparte-colunas li,
  .aparte-colunas figure,
  .aparte-colunas blockquote { break-inside: avoid; }
  .aparte-colunas > .aparte-corpo > :first-child { margin-top: 0; }
  .aparte-colunas ul, .aparte-colunas ol { margin-bottom: 0; }
}

/* Citacao. A assinatura mora no pe do balao, e nao num paragrafo acima dele. */
.texto blockquote {
  margin: 0 0 16px;
  padding: 11px 15px;
  background: var(--painel-alt);
  border: 1px solid var(--linha-fraca);
  border-left: 4px solid var(--verde);
  box-shadow: var(--relevo-raso);
  font-size: 12.5px;
  color: var(--tinta-fraca);
}
.texto blockquote > :last-child { margin-bottom: 0; }
.texto blockquote blockquote { margin-top: 10px; background: none; box-shadow: none; }
.citacao-fonte {
  margin-top: 9px;
  padding-top: 7px;
  border-top: 1px solid var(--linha-tenue);
  font-size: 11.5px;
  color: var(--tinta-fraca);
}

/* Codigo */
.texto code {
  background: var(--painel-alt);
  border: 1px solid var(--linha-fraca);
  padding: 1px 5px;
  font-size: 12px;
}
.bloco-codigo { margin: 0 0 16px; }
.codigo-lingua {
  display: block;
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  background: var(--faixa-alt);
  border: 1px solid var(--linha-fraca);
  border-bottom: 0;
  padding: 4px 12px;
}
.texto pre {
  margin: 0;
  padding: 12px 14px;
  overflow-x: auto;
  background: var(--painel-alt);
  border: 1px solid var(--linha-fraca);
  box-shadow: var(--afundado);
  font-size: 12px;
  line-height: 1.6;
}
.texto pre code { border: 0; padding: 0; background: none; }

/* Lista de marcar. A caixinha e desenhada em CSS: o sprite nao ganhou icone
   novo, e nao ha <input> porque isto e leitura, nao formulario. */
.texto li.tarefa { list-style: none; margin-left: -20px; }
.tarefa-marca {
  position: relative;
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 8px;
  border: 1px solid var(--linha);
  background: var(--luz);
}
.tarefa-feita { color: var(--tinta-fraca); }
.tarefa-feita > .tarefa-marca { background: var(--verde); border-color: var(--verde-borda); }
.tarefa-feita > .tarefa-marca::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0;
  width: 3px;
  height: 7px;
  border: solid var(--verde-tinta);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Figura: a imagem anexada colocada no meio do texto, com legenda. */
.figura { margin: 0 0 16px; }
.figura a {
  display: inline-block;
  line-height: 0;
  background: var(--painel-alt);
  border: 1px solid var(--linha);
  box-shadow: var(--relevo-baixo);
}
.figura figcaption {
  margin-top: 7px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--tinta-fraca);
  max-width: 60ch;
}
.figura-ausente { font-size: 11.5px; color: var(--vinho); font-style: italic; }

/* Tabela dentro de texto: a rolagem e do involucro, nunca da pagina. */
.tabela-rolagem { overflow-x: auto; margin: 0 0 16px; }
.tabela-texto { margin: 0; font-size: 12.5px; min-width: 320px; }
.tabela-texto .col-centro { text-align: center; }
.tabela-texto .col-dir { text-align: right; }

.autor { font-weight: bold; color: var(--tinta); }
.mencao { font-weight: bold; color: var(--verde); }

.removido, .lapide {
  background: var(--restrita);
  border: 1px dashed var(--vinho);
  box-shadow: none;
  padding: 14px 16px;
  font-size: 12px;
  color: var(--tinta-fraca);
}
.lapide-motivo { font-style: italic; color: var(--vinho); }

.anexos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.anexos a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  padding: 5px 10px;
  background: var(--faixa-alt);
  border: 1px solid var(--linha-fraca);
  box-shadow: var(--relevo-raso);
  text-decoration: none;
  color: var(--tinta);
}
.anexos a:hover { background: var(--luz); color: var(--ferrugem); }

.acao-corpo { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 16px 14px; }

.acao-dobra {
  appearance: none;
  cursor: pointer;
  font-size: 11px;
  padding: 4px 10px;
  background: var(--faixa-alt);
  color: var(--tinta-fraca);
  border: 1px solid var(--linha-fraca);
  box-shadow: var(--relevo-raso);
}
.acao-dobra:hover { background: var(--luz); color: var(--tinta); }
.acao-dobra-perigo { color: var(--vinho); border-color: var(--vinho); }

.nao-lido { font-weight: bold; }
.lido { color: var(--tinta-fraca); }

/* Lista de discussoes acompanhadas. Mesma familia de linha da lista de avisos:
   texto a esquerda, acao na ponta, sem moldura por item. */
.acompanhadas { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.acompanhadas li {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 14px;
  background: var(--painel);
  border: 1px solid var(--linha-fraca);
  box-shadow: var(--relevo-raso);
}
.acompanhadas li:hover { background: var(--luz); }
.acompanhada-texto { flex: 1 1 auto; min-width: 0; }
.acompanhada-texto .linha-meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.acompanhada-titulo {
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--tinta);
  text-decoration: none;
}
.acompanhada-titulo:hover { color: var(--ferrugem); }
.acompanhada-motivo {
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--verde);
}
.preferencia-frase { margin: 0; font-size: 12.5px; color: var(--tinta-media); }
.marca-nao-lido {
  width: 7px;
  height: 7px;
  flex: none;
  background: var(--ouro);
  border: 1px solid var(--ouro-borda);
  display: inline-block;
}

/* --------------------------------------------------------------------------
   Formularios
   Campos afundados: a sombra interna e o que diz "escreva aqui".
   -------------------------------------------------------------------------- */

.formulario {
  margin-top: 12px;
  background: var(--painel);
  border: 1px solid var(--linha);
  box-shadow: var(--relevo);
  padding: 18px 20px;
  display: grid;
  gap: 14px;
}
.formulario-estreito { max-width: 460px; }
.formulario-compacto { padding: 14px 16px; gap: 10px; }

/* `align-content: start` e o que impede o campo de esticar quando o vizinho de
   `.campos-lado` e mais alto (por ter uma linha de ajuda embaixo): sem isso a
   grade distribui a sobra nas linhas automaticas e um <select> da dupla nasce
   mais alto que o outro. */
.campo { display: grid; gap: 5px; align-content: start; }

.campo > label,
.rotulo-campo {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

/* Rotulo de caixa de marcar e frase, nao etiqueta de campo: ele fica ao lado
   da caixa e precisa ser lido como texto corrido. */
.campo > label.escolha,
.campo > label.checkbox {
  font-family: var(--corpo);
  font-size: 12.5px;
  font-weight: normal;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tinta);
}

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="password"],
.campo input[type="number"],
.campo input[type="url"],
.campo input[type="date"],
.campo input[type="search"],
.campo select,
.campo textarea,
.campo-fixo {
  width: 100%;
  font-family: var(--corpo);
  font-size: 13px;
  padding: 8px 10px;
  background: var(--luz);
  color: var(--tinta);
  border: 1px solid var(--linha);
  box-shadow: var(--afundado);
}
.campo textarea { line-height: 1.7; resize: vertical; min-height: 120px; }
.campo-alto textarea { min-height: 220px; }
.campo-curto { max-width: 190px; }
.campo-mini { max-width: 110px; }
.campo-fixo { background: var(--painel-alt); color: var(--tinta-fraca); }

.campo small,
.campo .dica { font-size: 11px; color: var(--tinta-fraca); }

.campos-lado { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.campos-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12.5px;
}
.checkbox input { margin-top: 2px; flex: none; accent-color: var(--verde); }
.checkbox label { font-family: var(--corpo); text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--tinta); }

.acoes-formulario {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 4px;
  border-top: 1px dashed var(--linha-fraca);
  margin-top: 2px;
}

/* Grupo de campos.
   Os formularios do painel agrupam campos em `.caixa` com um
   `<span class="rotulo">` como primeira filha ("Identificacao", "Descricao",
   "Zona de risco"). Sem tratamento isso virava uma caixa lisa com os campos
   colados uns nos outros e um rotulo solto no alto — que e o "espalhado" do
   formulario de mesa. Aqui o rotulo vira a barra de titulo do grupo (sangrando
   ate as bordas pelo recuo negativo) e o resto vira grade com respiro. */
.caixa:has(> .rotulo:first-child) {
  padding: 0 16px 16px;
  display: grid;
  gap: 14px;
  align-content: start;
}

.caixa > .rotulo:first-child {
  margin: 0 -16px;
  padding: 8px 16px;
  background: var(--faixa-alt);
  border-bottom: 1px solid var(--linha-fraca);
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta);
}

/* Um formulario dentro de um grupo ja esta emoldurado pelo grupo. */
.caixa > .formulario,
.caixa > .formulario-compacto {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

/* Grupo de risco: a barra fica vinho, para a acao destrutiva se anunciar antes
   de a pessoa chegar no botao. */
.caixa-risco > .rotulo:first-child {
  background: var(--restrita);
  border-bottom-color: var(--vinho);
  color: var(--vinho);
}
.caixa-risco { border-color: var(--vinho); }

.erro-formulario, .perigo { color: var(--vinho); font-size: 12px; }

.definicoes { display: grid; gap: 8px; margin: 0; font-size: 12.5px; }
.definicoes dt {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}
.definicoes dd { margin: 0 0 6px; }

/* --------------------------------------------------------------------------
   Colunas e lateral
   A proporcao do desenho: conteudo 1.55, apoio 1.
   -------------------------------------------------------------------------- */

.colunas {
  margin-top: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.lateral {
  background: var(--painel);
  border: 1px solid var(--linha);
  box-shadow: var(--relevo);
}

.lateral h3 {
  background: var(--faixa-alt);
  color: var(--tinta);
  border-bottom: 1px solid var(--linha-fraca);
  padding: 7px 14px;
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.lateral > :not(h3) { margin: 0; padding: 12px 14px; }
.lateral p { font-size: 12.5px; color: var(--tinta-media); }

.lateral ul { list-style: none; display: grid; gap: 7px; }

.lateral li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}
.lateral li .icone-mini { color: var(--verde); }
.lateral li .num { margin-left: auto; font-size: 12px; }

.lateral .botao { margin-top: 10px; }

/* --------------------------------------------------------------------------
   Painel admin
   -------------------------------------------------------------------------- */

.admin-menu {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.admin-menu a {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 8px 14px;
  text-decoration: none;
  background: var(--faixa-alt);
  color: var(--tinta-fraca);
  border: 1px solid var(--linha-fraca);
  box-shadow: var(--relevo-raso);
}
.admin-menu a:hover { background: var(--luz); color: var(--tinta); }
.admin-menu a.ativo,
.admin-menu a.atual {
  background: var(--verde);
  color: var(--verde-tinta);
  border-color: var(--verde-borda);
}

.abas { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 12px; }
.abas a {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 8px 14px;
  text-decoration: none;
  background: var(--faixa-alt);
  color: var(--tinta-fraca);
  border: 1px solid var(--linha-fraca);
}
.abas a.ativo { background: var(--verde); color: var(--verde-tinta); border-color: var(--verde-borda); }

.grupo-permissoes {
  margin-top: 12px;
  background: var(--painel-alt);
  border: 1px solid var(--linha-fraca);
  box-shadow: var(--relevo-raso);
  padding: 12px 14px;
}
.grupo-permissoes > h4 {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  margin-bottom: 8px;
}
.permissao { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; margin-bottom: 10px; }
.permissao input { accent-color: var(--verde); margin-top: 2px; flex: none; }

/* A explicacao de uma permissao e uma linha propria, nao um rabicho.
   `.dica` e um <span> — inline por natureza — e por isso a explicacao vinha
   correndo atras do rotulo, na mesma linha, sem separacao visivel: "Anexar
   imagens Vale para mensagem e para primeira mensagem de discussao." Com
   vinte e quatro permissoes uma embaixo da outra, era o que fazia a lista
   parecer um paragrafo picado. */
.permissao > label { display: grid; gap: 2px; }
.permissao > label > .dica { display: block; line-height: 1.5; }

/* Ajuda que se abre. O texto e util uma vez e atrapalha nas outras noventa:
   fechado, ocupa uma linha; aberto, explica tudo. */
.dobra-ajuda > summary {
  cursor: pointer;
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dobra-ajuda > summary::-webkit-details-marker { display: none; }
.dobra-ajuda > summary::before {
  content: "+";
  font-size: 14px;
  line-height: 1;
  color: var(--verde);
}
.dobra-ajuda[open] > summary::before { content: "\2013"; }
.dobra-ajuda > summary:hover { color: var(--tinta); }

.ajuda-corpo { margin-top: 12px; display: grid; gap: 10px; }
.ajuda-corpo .definicoes dd { margin: 0 0 10px; color: var(--tinta-media); }

/* Seletor de cor e a caixa que o desliga, lado a lado: sem a segunda nao ha
   como dizer "sem cor", porque <input type="color"> nao tem estado vazio. */
.campo-cor { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.campo-cor input[type="color"] {
  width: 52px;
  height: 32px;
  padding: 2px;
  flex: none;
  background: var(--luz);
  border: 1px solid var(--linha);
  box-shadow: var(--relevo-raso);
  cursor: pointer;
}
.campo-cor .escolha { display: flex; align-items: center; gap: 7px; font-size: 12px; }

/* --------------------------------------------------------------------------
   Perfil e avatar
   O avatar redondo e a terceira e ultima excecao de raio do projeto.
   -------------------------------------------------------------------------- */

.perfil-topo {
  margin-top: 12px;
  background: var(--painel);
  border: 1px solid var(--linha);
  box-shadow: var(--relevo);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.avatar, .avatar-inicial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  overflow: hidden;
  border-radius: 999px;
  background: var(--verde);
  color: var(--verde-tinta);
  border: 1px solid var(--verde-borda);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .25);
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  object-fit: cover;
}

.avatar-topo { width: 20px; height: 20px; font-size: 10px; }
.avatar-lista { width: 26px; height: 26px; font-size: 11px; }
.avatar-perfil { width: 64px; height: 64px; font-size: 24px; }

/* `.avatar-atual` e o involucro da foto na pagina da conta, nao um tamanho de
   avatar: dentro dele vao a imagem e o paragrafo que explica o recorte. Estava
   agrupado com `.avatar-perfil` na regra de cima, entao herdava 64x64 e
   prendia o paragrafo numa coluna de 64px que vazava por cima do formulario
   de envio e da caixa seguinte. Aqui ele volta a ser o que e: uma linha com a
   foto de um lado e o texto do outro. */
.avatar-atual {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}

.avatar-atual > p { flex: 1 1 240px; margin: 0; }

.perfil-avatar { flex: none; }

.mensagem-autor .avatar,
.mensagem-autor .avatar-inicial { width: 48px; height: 48px; font-size: 19px; }

.nome { font-weight: bold; }

/* Etiqueta de cargo. A cor vem de /css/cargos.css pela classe cargo-<id>. */
.cargo {
  display: inline-block;
  font-size: 9.5px;
  font-weight: bold;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 2px 7px;
  background: var(--faixa-alt);
  border: 1px solid currentColor;
}

/* --------------------------------------------------------------------------
   Editor de mensagem
   A barra nasce escondida e so aparece quando public/js/conclave.js marca o
   editor como pronto.
   -------------------------------------------------------------------------- */

.editor { display: grid; gap: 0; }

.editor-barra { display: none; }

.editor-pronto .editor-barra {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
  background: var(--faixa-alt);
  border: 1px solid var(--linha);
  border-bottom: 0;
  box-shadow: var(--relevo-raso);
  padding: 6px 8px;
}

/* Todo botao da barra tem a mesma altura, venha ele com letra, com sinal ou
   com icone. Sem isto o botao de link — o unico com <svg> — nascia mais alto e
   mais largo que os vizinhos: o icone e uma caixa de 13px sentada na linha de
   base, e a descida da fonte ainda se somava a ela. Alinhar por flex e travar a
   entrelinha tira a linha de base da conta, e a altura passa a ser uma so. */
.editor-barra button {
  appearance: none;
  cursor: pointer;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  height: 23px;
  min-width: 23px;
  padding: 0 9px;
  background: var(--luz);
  color: var(--tinta-fraca);
  border: 1px solid var(--linha-fraca);
}
/* O icone acompanha a altura da letra dos vizinhos, nao a propria. */
.editor-barra button .icone-mini { width: 12px; height: 12px; }
.editor-barra button:hover { background: var(--painel); color: var(--tinta); }

.editor-divisor {
  width: 1px;
  height: 18px;
  background: var(--linha-fraca);
  margin: 0 3px;
}

/* Os grupos da barra: marcacao de linha, blocos que organizam, coisas que se
   inserem. Eles existem para a barra crescida continuar legivel — vinte botoes
   em fila unica sao vinte botoes que ninguem le. */
.editor-grupo { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
/* A previa fica na ponta oposta: ela nao escreve no campo, ela mostra o campo. */
.editor-grupo-fim { margin-left: auto; }
.editor-previa-botao { color: var(--ouro-texto); }

/* Com a previa aberta, os botoes de marcacao escreveriam num campo fora de
   vista. Some com eles e deixa so o que traz de volta. */
.editor-barra-previa .editor-grupo:not(.editor-grupo-fim),
.editor-barra-previa .editor-divisor { display: none; }

.editor-previa {
  border: 1px solid var(--linha);
  border-top: 0;
  background: var(--painel);
  box-shadow: var(--relevo-raso);
  padding: 12px 14px 14px;
}
.editor-previa-rotulo {
  font-family: var(--display);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--tinta-fraca);
  margin: 0 0 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--linha-tenue);
}

/* O lugar da imagem que ainda nao subiu: em previa o arquivo esta no
   formulario, nao no servidor. Tracejada porque nao e conteudo, e promessa. */
.figura-marca {
  border: 1px dashed var(--linha);
  background: var(--painel-alt);
  padding: 14px;
  text-align: center;
}
.figura-marca-aviso {
  margin: 0;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--tinta-fraca);
}
.figura-marca figcaption { text-align: center; max-width: none; }
.figura-marca.figura-ausente { border-color: var(--vinho); }

/* A ajuda nasce fechada. A legenda que ficava sempre visivel abaixo do campo
   repetia, em letra miuda, o que a barra faz com um clique. */
.editor-guia { margin-top: 8px; font-size: 11.5px; color: var(--tinta-fraca); }
.editor-guia > summary {
  cursor: pointer;
  display: inline-block;
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tinta-fraca);
}
.editor-guia > summary:hover { color: var(--ferrugem); }
.editor-guia-corpo {
  margin-top: 8px;
  padding: 12px 14px;
  background: var(--painel-alt);
  border: 1px solid var(--linha-fraca);
  box-shadow: var(--relevo-raso);
}
.editor-guia dl { margin: 0; display: grid; gap: 3px; }
.editor-guia dt { margin-top: 8px; color: var(--tinta); line-height: 1.9; }
.editor-guia dt:first-child { margin-top: 0; }
.editor-guia dd { margin: 0; line-height: 1.6; }
.editor-guia code {
  background: var(--luz);
  border: 1px solid var(--linha-tenue);
  padding: 1px 5px;
  font-size: 11px;
  color: var(--tinta-media);
}

.editor-anexo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--tinta-fraca);
}

/* --------------------------------------------------------------------------
   Escolhas em lista e acoes de conta
   -------------------------------------------------------------------------- */

.escolhas { display: grid; gap: 3px; margin-top: 10px; }
.escolhas-largas { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }

.escolha {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  background: var(--painel-alt);
  border: 1px solid var(--linha-fraca);
  box-shadow: var(--relevo-raso);
  font-size: 12.5px;
}
.escolha:hover { background: var(--luz); }
.escolha input { accent-color: var(--verde); flex: none; }
.escolha-travada { opacity: .55; }

.acoes-conta {
  margin-top: 14px;
  display: grid;
  gap: 3px;
}

/* --------------------------------------------------------------------------
   Dobra de cargos
   O seletor de cargos do painel de membros. E um <details>: fechado mostra os
   cargos que a conta tem; aberto, o painel flutua por cima da tabela em vez de
   esticar a linha. Sem isso, um site com uma dezena de cargos ganhava uma
   coluna de caixas de marcar do tamanho da pagina.
   -------------------------------------------------------------------------- */

.dobra-cargos { position: relative; }

.dobra-cargos > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 30px;
  min-width: 160px;
  padding: 5px 26px 5px 10px;
  background: var(--luz);
  border: 1px solid var(--linha);
  box-shadow: var(--afundado);
}
.dobra-cargos > summary::-webkit-details-marker { display: none; }
.dobra-cargos > summary:hover { border-color: var(--verde); }

/* A seta e um triangulo de borda, nao um icone novo: e afordancia de controle,
   do mesmo tipo que o <select> do navegador desenha sozinho. */
.dobra-cargos > summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 9px;
  margin-top: -2px;
  border: 4px solid transparent;
  border-top-color: var(--tinta-fraca);
}
.dobra-cargos[open] > summary { border-color: var(--verde); }
.dobra-cargos[open] > summary::after {
  margin-top: -6px;
  border-top-color: transparent;
  border-bottom-color: var(--verde);
}

/* O painel e uma coluna: so a lista de cargos rola. O botao de salvar fica
   preso embaixo — com uma dezena de cargos ele sairia da vista junto com a
   lista, e o painel viraria um formulario sem jeito visivel de confirmar. */
.dobra-painel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 3px);
  left: 0;
  min-width: 260px;
  max-width: 340px;
  max-height: 320px;
  display: flex;
  flex-direction: column;
  background: var(--painel);
  border: 1px solid var(--linha);
  box-shadow: var(--relevo);
}

.dobra-painel > .formulario-compacto {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0;
  padding: 0;
  gap: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.dobra-painel .escolhas {
  margin: 0;
  padding: 10px;
  overflow-y: auto;
  min-height: 0;
}

.dobra-painel .botao {
  margin: 0;
  flex: none;
  justify-content: center;
  border: 0;
  border-top: 1px solid var(--linha-fraca);
  box-shadow: none;
  background: var(--faixa-alt);
}
.dobra-painel .botao:hover { background: var(--luz); }

/* Perto da borda direita da tabela o painel abre para a esquerda, senao ele
   sairia da tela nas ultimas colunas. */
.tabela td:last-child .dobra-painel,
.tabela td:nth-last-child(2) .dobra-painel { left: auto; right: 0; }

/* --------------------------------------------------------------------------
   Busca, avisos, paginacao e pedido de vaga
   -------------------------------------------------------------------------- */

.busca-pagina { margin-top: 12px; }

.busca-linha {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.busca-linha input {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  padding: 11px 13px;
  background: var(--luz);
  color: var(--tinta);
  border: 1px solid var(--linha);
  border-right: 0;
  box-shadow: var(--afundado);
}
.busca-linha .botao { box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5); }

.resultados { display: grid; gap: 3px; margin-top: 12px; }

.resultados > li, .resultado {
  list-style: none;
  background: var(--painel);
  border: 1px solid var(--linha);
  box-shadow: var(--relevo-raso);
  padding: 13px 15px;
}
.resultados > li:hover { background: var(--luz); }

.resultado-meta { font-size: 11px; color: var(--tinta-fraca); margin-top: 3px; }
.resultado-trecho { font-size: 12.5px; color: var(--tinta-media); margin-top: 6px; }
.resultado-trecho mark { background: var(--ouro); color: var(--ouro-tinta); }

.paginacao {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
}

.paginacao a, .paginacao-inerte, .paginacao-elipse {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 32px;
  justify-content: center;
  padding: 6px 10px;
  font-size: 11.5px;
  font-weight: bold;
  text-decoration: none;
  background: var(--painel);
  color: var(--tinta-fraca);
  border: 1px solid var(--linha);
  box-shadow: var(--relevo-raso);
}
.paginacao a:hover { background: var(--luz); color: var(--tinta); }

.paginacao .atual, .paginacao .ativo {
  background: var(--verde);
  color: var(--verde-tinta);
  border-color: var(--verde-borda);
}

.paginacao-elipse, .paginacao-inerte {
  opacity: .5;
  border-style: dashed;
  box-shadow: none;
}

.paginacao-passo .icone-mini { stroke: currentColor; fill: none; }
.paginacao-conta { margin-left: auto; font-size: 11px; color: var(--tinta-fraca); font-weight: normal; }

.pedidos { display: grid; gap: 3px; margin-top: 12px; }

.pedido {
  background: var(--painel-alt);
  border: 1px solid var(--linha-fraca);
  box-shadow: var(--relevo-raso);
  padding: 13px 15px;
  display: grid;
  gap: 8px;
}
.pedido-quem { display: flex; align-items: center; gap: 9px; font-size: 12.5px; flex-wrap: wrap; }
.pedido-recado { font-size: 12.5px; color: var(--tinta-media); }

/* --------------------------------------------------------------------------
   Ajustes pontuais
   As classes abaixo eram atributos style="" nos templates. A politica de nao
   ter estilo inline (a CSP) e o que as trouxe para ca.
   -------------------------------------------------------------------------- */

.miudo { font-size: 11.5px; color: var(--tinta-fraca); }
/* `.texto` mora agora na secao TEXTO FORMATADO, junto com o resto do que sai
   do formatador — a regra estava aqui embaixo, longe dos blocos que ela rege,
   e por isso mandava sozinha numa medida diferente da do resto. */
.largura-livre { max-width: none; }
.estreita { width: 1%; white-space: nowrap; }
.direita { text-align: right; }
.espaco-acima { margin-top: 12px; }
.espaco-acima-md { margin-top: 18px; }
.espaco-acima-lg { margin-top: 26px; }
.espaco-abaixo { margin-bottom: 12px; }

.erro-codigo {
  font-family: var(--display);
  font-weight: 900;
  font-size: 64px;
  line-height: 1;
  color: var(--verde);
  letter-spacing: -.04em;
}

/* --------------------------------------------------------------------------
   Rodape
   -------------------------------------------------------------------------- */

.rodape {
  max-width: var(--largura);
  margin: 22px auto 0;
  padding: 0 14px;
}

.rodape .faixa {
  max-width: none;
  margin: 0;
  background: var(--faixa-alt);
  border: 1px solid var(--linha-fraca);
  box-shadow: var(--relevo-raso);
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.rodape strong {
  font-family: var(--display);
  font-size: 13px;
  color: var(--tinta);
}
.rodape .miudo { max-width: 52ch; line-height: 1.6; margin-top: 2px; }

.rodape-links { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; }

/* --------------------------------------------------------------------------
   Responsivo
   Abaixo de 900px as duas colunas viram uma. Abaixo de 620px as colunas
   estreitas das tabelas somem, e a barra do topo se empilha.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .colunas { grid-template-columns: minmax(0, 1fr); }
  .campos-lado, .campos-tres { grid-template-columns: minmax(0, 1fr); }
  .mensagem { grid-template-columns: minmax(0, 1fr); }
  .mensagem-autor {
    border-right: 0;
    border-bottom: 1px solid var(--linha-fraca);
    grid-auto-flow: column;
    justify-items: start;
    align-items: center;
    justify-content: start;
    gap: 10px;
    padding: 10px 14px;
    text-align: left;
  }
  .mensagem-autor .avatar,
  .mensagem-autor .avatar-inicial { width: 28px; height: 28px; font-size: 12px; }
  /* Deitada, a ficha perde a regra de cima e vira pares em linha, separados do
     nome por um fio vertical. */
  .mensagem-autor dl {
    width: auto;
    margin: 0;
    padding: 2px 0 2px 12px;
    border-top: 0;
    border-left: 1px solid var(--linha-tenue);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 5px;
  }
  .mensagem-autor dt ~ dt { margin: 0 0 0 10px; }
  .mensagem-autor dd { font-size: 11px; }
}

@media (max-width: 700px) {
  .topo .faixa { gap: 12px; }
  .marca-texto strong { font-size: 22px; }
  .busca-topo { width: 100%; }
  .busca-topo input { width: 100%; flex: 1 1 auto; }
  .secao-titulo { padding: 16px 16px; }
  .secao-titulo h1, .secao-titulo h2 { font-size: 23px; }
  .capa-texto { padding: 20px 18px; }
  .capa-texto h1 { font-size: 27px; }
}

@media (max-width: 620px) {
  body { font-size: 12.5px; }
  .esconde-mobile { display: none; }
  .menu a { flex: 1 1 auto; text-align: center; padding: 9px 10px; }
  .barra-sessao .faixa { gap: 8px; font-size: 11px; }
  .barra-lema { flex: 1 1 100%; margin-right: 0; }
  .rodape .faixa { flex-direction: column; align-items: flex-start; }
  .trilha-aqui { display: none; }
  .tabela tbody td { padding: 11px 12px; }
  .linha-filha td:first-child { padding-left: 26px; }
}