/*
 * Fórum da E4T — base visual (cores, tipografia, medidas). Usado pelo fórum E pelo painel de controle.
 *
 * As cores seguem o tema padrão do Invision Community 5: uma cor "base" (tom 260, azulado) gera 6 tons de
 * fundo (--base-1..6) e 6 tons de texto (--contraste-1..6) pela fórmula OKLCH; trocar --base-h, --primaria
 * ou --secundaria muda o fórum inteiro. Claro/escuro: atributo data-esquema="claro|escuro" no <html>.
 * Regra da casa: nos outros arquivos, use só estas variáveis (nada de cor solta).
 */

/* ---------- Ajustes do tema (o futuro editor de tema muda só isto) ---------- */
:root {
  --claro-primaria: hsl(220 85% 50%);
  --claro-secundaria: hsl(220 49% 13%);
  --claro-base-l: 100;
  --claro-base-c: 30;
  --claro-base-h: 260;
  --escuro-primaria: hsl(215 85% 50%);
  --escuro-secundaria: hsl(215 18% 26%);
  --escuro-base-l: 30;
  --escuro-base-c: 20;
  --escuro-base-h: 260;

  --tam-fonte: 14;                 /* px: tamanho base do texto (o Invision usa 14) */
  --tam-conteudo: 1.1em;           /* texto dos posts (110%) */
  --largura-max: 1500px;
  --largura-lateral: 350px;
  --raio-design: 8px;
  --borda-design: 1px;
  --sombra-design: 2;              /* 0 a 6 */
  --raio-avatar: calc(50% + 3px);  /* avatares redondos; troque para 6px para quadrados */
  --altura-cabecalho: 100px;
  --altura-cabecalho-2: 50px;
  --altura-cabecalho-movel: 60px;
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --fonte-codigo: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --fonte-icones: "Font Awesome 6 Free";
}

/* ---------- Tons gerados (claro) ---------- */
:root, [data-esquema="claro"] {
  color-scheme: light;
  --primaria: var(--claro-primaria);
  --secundaria: var(--claro-secundaria);
  --b-l: calc(var(--claro-base-l) / 100);
  --b-c: calc(var(--claro-base-c) / 100);
  --b-h: var(--claro-base-h);
  --b-c-escuro: calc(var(--b-c) * 100 / 30);
  --b-c-claro: calc(var(--b-c-escuro) * var(--b-l));
  --base-1: oklch(calc(80% + 20% * var(--b-l)) calc(5% * var(--b-c-escuro) - 5% * var(--b-c-claro)) var(--b-h));
  --base-2: oklch(calc(77% + 22% * var(--b-l)) calc(6% * var(--b-c-escuro) - 5% * var(--b-c-claro)) var(--b-h));
  --base-3: oklch(calc(73% + 23% * var(--b-l)) calc(7% * var(--b-c-escuro) - 5% * var(--b-c-claro)) var(--b-h));
  --base-4: oklch(calc(68% + 21% * var(--b-l)) calc(9% * var(--b-c-escuro) - 5% * var(--b-c-claro)) var(--b-h));
  --base-5: oklch(calc(65% + 22% * var(--b-l)) calc(12% * var(--b-c-escuro) - 5% * var(--b-c-claro)) var(--b-h));
  --base-6: oklch(calc(60% + 20% * var(--b-l)) calc(14% * var(--b-c-escuro) - 5% * var(--b-c-claro)) var(--b-h));
  --contraste-1: oklch(calc(40% + 10% * var(--b-l)) calc(var(--b-c) * 46%) var(--b-h));
  --contraste-2: oklch(calc(37% + 9% * var(--b-l)) calc(var(--b-c) * 46%) var(--b-h));
  --contraste-3: oklch(calc(34% + 9% * var(--b-l)) calc(var(--b-c) * 41%) var(--b-h));
  --contraste-4: oklch(calc(28% + 5% * var(--b-l)) calc(var(--b-c) * 36%) var(--b-h));
  --contraste-5: oklch(calc(21% + 5% * var(--b-l)) calc(var(--b-c) * 27%) var(--b-h));
  --contraste-6: oklch(15% calc(var(--b-c) * 17%) var(--b-h));

  --cor-texto: var(--contraste-3);
  --cor-suave: var(--contraste-1);
  --cor-forte: var(--contraste-6);
  --cor-link: var(--contraste-6);
  --fundo-corpo: var(--base-3);
  --fundo-caixa: var(--base-1);
  --borda-caixa: var(--base-4);
  --cab1-fundo: var(--contraste-4);
  --cab1-texto: var(--base-1);
  --cab2-fundo: var(--contraste-5);
  --cab2-texto: var(--base-1);
  --cabmovel-fundo: var(--base-1);
  --cabmovel-texto: var(--contraste-5);
  --rodape-fundo: var(--contraste-4);
  --rodape-texto: var(--base-4);

  --positivo: hsl(120 82% 36%);
  --positivo-suave: hsl(120 64% 96%);
  --negativo: hsl(0 65% 50%);
  --negativo-suave: hsl(0 72% 95%);
  --alerta: hsl(24 95% 32%);
  --alerta-suave: hsl(40 90% 94%);
  --moderado: hsl(0 50% 30%);
  --fundo-moderado: hsl(0 50% 95%);
  --fundo-entrada: var(--fundo-1);
  --sombra-caixa: oklch(10% calc(var(--b-c) * 20%) var(--b-h) / min(.15, calc(var(--sombra-design) * .025))) 0px calc(5px + var(--sombra-design) * 1px) calc(10px + var(--sombra-design) * 3px) calc(var(--sombra-design) * -1px);
  --sombra-menu: hsl(0 0% 0% / 12%) 0 0 0 1px, hsl(0 0% 0% / .25) 0 20px 50px, hsl(0 0% 0% / .2) 0 13px 13px -13px;
  --fundo-menu: var(--fundo-1);
  --fundo-dica: oklch(10% calc(var(--b-c) * 30%) var(--b-h) / 85%);
}

/* ---------- Tons gerados (escuro) ---------- */
[data-esquema="escuro"] {
  color-scheme: dark;
  --primaria: var(--escuro-primaria);
  --secundaria: var(--escuro-secundaria);
  --b-l: calc(var(--escuro-base-l) / 100);
  --b-c: calc(var(--escuro-base-c) / 100);
  --b-h: var(--escuro-base-h);
  --base-1: oklch(calc(15% + 15% * var(--b-l)) calc(var(--b-c) * 1.75% * 4 + 10% * var(--b-c) * var(--b-l)) var(--b-h));
  --base-2: oklch(calc(19% + 19% * var(--b-l)) calc(var(--b-c) * 3% * 4 + 10% * var(--b-c) * var(--b-l)) var(--b-h));
  --base-3: oklch(calc(23% + 23% * var(--b-l)) calc(var(--b-c) * 4% * 4 + 10% * var(--b-c) * var(--b-l)) var(--b-h));
  --base-4: oklch(calc(27% + 27% * var(--b-l)) calc(var(--b-c) * 4.75% * 4 + 10% * var(--b-c) * var(--b-l)) var(--b-h));
  --base-5: oklch(calc(31% + 31% * var(--b-l)) calc(var(--b-c) * 6% * 4 + 10% * var(--b-c) * var(--b-l)) var(--b-h));
  --base-6: oklch(calc(34% + 34% * var(--b-l)) calc(var(--b-c) * 6.75% * 4 + 10% * var(--b-c) * var(--b-l)) var(--b-h));
  --contraste-1: oklch(calc(50% + 20% * var(--b-l)) calc(var(--b-c) * 9% * 4) var(--b-h));
  --contraste-2: oklch(calc(60% + 15% * var(--b-l)) calc(var(--b-c) * 6.75% * 4) var(--b-h));
  --contraste-3: oklch(calc(70% + 10% * var(--b-l)) calc(var(--b-c) * 5% * 4) var(--b-h));
  --contraste-4: oklch(calc(80% + 5% * var(--b-l)) calc(var(--b-c) * 3.5% * 4) var(--b-h));
  --contraste-5: oklch(calc(90% + 3% * var(--b-l)) calc(var(--b-c) * 1.75% * 4) var(--b-h));
  --contraste-6: oklch(100% 0% var(--b-h));

  --cor-texto: var(--contraste-4);
  --cor-suave: var(--contraste-2);
  --cor-forte: var(--contraste-6);
  --cor-link: var(--contraste-6);
  --fundo-corpo: var(--base-1);
  --fundo-caixa: var(--base-2);
  --borda-caixa: var(--base-3);
  --cab1-fundo: var(--base-3);
  --cab1-texto: var(--contraste-6);
  --cab2-fundo: var(--base-4);
  --cab2-texto: var(--contraste-5);
  --cabmovel-fundo: var(--base-2);
  --cabmovel-texto: var(--contraste-5);
  --rodape-fundo: var(--base-2);
  --rodape-texto: var(--contraste-4);

  --positivo: hsl(150 60% 45%);
  --positivo-suave: hsl(150 72% 15%);
  --negativo: hsl(0 65% 63%);
  --negativo-suave: hsl(0 72% 15%);
  --alerta: hsl(27 80% 63%);
  --alerta-suave: hsl(30 40% 16%);
  --moderado: hsl(350 30% 85%);
  --fundo-moderado: hsl(350 23% 20%);
  --fundo-entrada: var(--fundo-4);
  --sombra-menu: inset hsl(0 0% 100% / 10%) 0 0 0 1px, hsl(0 0% 0% / 90%) 0 0 0 1px, hsl(0 0% 0% / 60%) 0 20px 100px;
  --fundo-menu: var(--fundo-3);
  --fundo-dica: oklch(50% calc(var(--b-c) * 1%) var(--b-h) / 85%);
}

/* ---------- Tons derivados (iguais nos dois esquemas) ---------- */
:root, [data-esquema] {
  --fundo-1: var(--fundo-caixa);
  --fundo-2: color-mix(in oklch, var(--fundo-caixa), var(--base-6) 10%);
  --fundo-3: color-mix(in oklch, var(--fundo-caixa), var(--base-6) 32%);
  --fundo-4: color-mix(in oklch, var(--fundo-caixa), var(--base-6) 50%);
  --fundo-5: color-mix(in oklch, var(--fundo-caixa), var(--base-6) 80%);
  --fundo-6: var(--base-6);
  --fundo-hover: color-mix(in srgb, var(--cor-texto) 6%, transparent);
  --cor-primaria: var(--primaria);
  --texto-sobre-primaria: #fff;
  --texto-sobre-secundaria: #fff;
  --primaria-escura: color-mix(in srgb, var(--primaria), black 20%);
  --primaria-clara: color-mix(in srgb, var(--primaria), white 20%);
  --rem: calc(1rem / 16 * var(--tam-fonte));
  --esp-1: calc(var(--rem) * .5);
  --esp-2: var(--rem);
  --esp-3: calc(var(--rem) * 2);
  --esp-4: calc(var(--rem) * 3.5);
  --esp-bloco: calc(var(--rem) * 1.5);
  --margem-lateral: clamp(15px, 3vw, 40px);
  --raio-pequeno: min(var(--raio-design), 6px);
}
[data-esquema="escuro"] { --cor-primaria: oklch(from var(--primaria) max(l, .7) c h); }
[data-esquema="claro"], :root { --cor-primaria-texto: oklch(from var(--primaria) min(l, .5) c h); }
[data-esquema="escuro"] { --cor-primaria-texto: oklch(from var(--primaria) max(l, .7) c h); }

/* ---------- Reset ---------- */
*, ::before, ::after { margin: 0; padding: 0; box-sizing: border-box; min-width: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; accent-color: var(--primaria); }
img, svg, video { max-width: 100%; height: auto; vertical-align: middle; border: 0; }
h1, h2, h3, h4, h5, h6 { font: inherit; }
b, strong { font-weight: bolder; }
ul, ol, menu { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
input, textarea, select, button { font: inherit; color: inherit; background: none; border: 0; line-height: inherit; }
button, [type="submit"], summary, label[for] { cursor: pointer; }
summary::-webkit-details-marker { display: none; }
textarea { display: block; width: 100%; resize: vertical; }
:focus { outline-color: transparent; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
[hidden] { display: none !important; }
::placeholder { color: inherit; opacity: .55; }

body {
  font-family: var(--fonte);
  font-size: var(--rem);
  line-height: 1.5;
  color: var(--cor-texto);
  background: var(--fundo-corpo);
  min-height: 100vh;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--cor-link); text-decoration: none; }
a:hover { color: var(--cor-primaria-texto); }
code, kbd, pre { font-family: var(--fonte-codigo); font-size: .92em; }
::selection { background: color-mix(in srgb, var(--primaria) 30%, transparent); }

.so-leitor { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular-conteudo { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--primaria); color: #fff; padding: .8em 1.2em; border-radius: 0 0 6px 0; }
.pular-conteudo:focus { left: 0; color: #fff; }

/* ---------- Botões ---------- */
.botao {
  --b-fundo: transparent;
  --b-texto: var(--cor-texto);
  --b-borda: transparent;
  --b-hover: color-mix(in srgb, var(--b-fundo), #fff 15%);
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .7em 1.2em; border-radius: 8px; border: 1px solid var(--b-borda);
  background: var(--b-fundo); color: var(--b-texto);
  font-weight: 600; line-height: 1.2; text-align: center; white-space: nowrap;
  transition: background-color .15s, border-color .15s, box-shadow .15s, transform .1s;
  user-select: none; -webkit-user-select: none; position: relative;
}
.botao:hover { background: var(--b-hover); color: var(--b-texto); }
.botao:active { transform: translateY(1px); }
.botao[disabled], .botao.desativado { opacity: .5; pointer-events: none; }
.botao--primario { --b-fundo: var(--primaria); --b-texto: var(--texto-sobre-primaria); }
.botao--secundario { --b-fundo: var(--secundaria); --b-texto: var(--texto-sobre-secundaria); }
.botao--suave {
  --b-fundo: var(--fundo-1); --b-texto: var(--cor-texto);
  --b-borda: color-mix(in srgb, var(--cor-texto) 20%, transparent);
  --b-hover: color-mix(in srgb, var(--cor-texto) 4%, var(--fundo-1));
  box-shadow: hsl(0 0% 0% / .06) 0 2px 3px; background-clip: padding-box;
}
.botao--herdar {
  --b-texto: currentColor;
  --b-fundo: color-mix(in srgb, currentColor 10%, transparent);
  --b-hover: color-mix(in srgb, currentColor 16%, transparent);
}
.botao--perigo { --b-fundo: var(--negativo); --b-texto: #fff; }
.botao--texto { --b-texto: var(--cor-suave); padding-inline: .6em; --b-hover: var(--fundo-hover); }
.botao--pequeno { font-size: .88em; padding: .5em .9em; border-radius: 6px; }
.botao--grande { font-size: 1.08em; padding: .9em 1.5em; }
.botao--largo { width: 100%; }
.botao .fa-solid, .botao .fa-regular { font-size: .95em; }
.grupo-botoes { display: flex; flex-wrap: wrap; gap: .5em; align-items: center; }

/* ---------- Formulários ---------- */
.entrada, .selecao, textarea.entrada {
  width: 100%; display: block;
  padding: .7em 1em; border-radius: min(var(--raio-design), .4em);
  border: 1px solid color-mix(in srgb, var(--cor-texto) 30%, transparent);
  background: var(--fundo-entrada); color: var(--cor-forte);
  box-shadow: hsl(0 0% 0% / .06) 0 2px 1px inset;
  transition: border-color .15s, box-shadow .15s;
}
.entrada:hover, .selecao:hover { border-color: color-mix(in srgb, var(--cor-texto) 60%, transparent); }
.entrada:focus, .selecao:focus { border-color: var(--primaria); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaria) 22%, transparent); outline: none; }
.entrada--erro { border-color: var(--negativo) !important; }
.selecao {
  appearance: none; -webkit-appearance: none; padding-inline-end: 2.4em; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.2em) 55%, calc(100% - .85em) 55%;
  background-size: .35em .35em, .35em .35em; background-repeat: no-repeat;
}
.entrada--curta { max-width: 12em; }
.entrada--cor { padding: .2em; height: 2.6em; width: 4em; cursor: pointer; }
.caixa-marcar { display: inline-flex; align-items: flex-start; gap: .6em; cursor: pointer; line-height: 1.4; }
.caixa-marcar input { width: 1.15em; height: 1.15em; margin-top: .1em; flex: 0 0 auto; }

.formulario { display: grid; gap: 1.4em; }
.campo { display: grid; gap: .45em; }
.campo__rotulo { font-weight: 600; color: var(--cor-forte); }
.campo__rotulo .obrigatorio { color: var(--negativo); margin-left: .2em; }
.campo__ajuda { color: var(--cor-suave); font-size: .92em; }
.campo__erro { color: var(--negativo); font-size: .92em; font-weight: 500; display: flex; gap: .4em; align-items: baseline; }
.campo__erro::before { content: "\f06a"; font-family: var(--fonte-icones); font-weight: 900; }

/* Formulário em linhas (rótulo à esquerda), como o painel do Invision */
.form-linhas { display: grid; }
.form-linha { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: .5em 2em; padding: 1.2em var(--esp-bloco); border-bottom: 1px solid var(--fundo-3); }
.form-linha:last-child { border-bottom: 0; }
.form-linha > .campo__rotulo { padding-top: .6em; }
.form-linha__campo { display: grid; gap: .45em; max-width: 640px; }
.form-secao { padding: .9em var(--esp-bloco); background: var(--fundo-2); border-bottom: 1px solid var(--fundo-3); font-weight: 600; color: var(--cor-forte); font-size: 1.05em; }
.form-rodape { padding: 1.2em var(--esp-bloco); border-top: 1px solid var(--fundo-3); background: var(--fundo-2); display: flex; gap: .6em; justify-content: center; border-radius: 0 0 var(--raio-design) var(--raio-design); }
@media (max-width: 760px) {
  .form-linha { grid-template-columns: minmax(0, 1fr); }
  .form-linha > .campo__rotulo { padding-top: 0; }
}

/* ---------- Caixas ---------- */
/* Símbolo da E4T no lugar do ícone (1.0.2): SVG embutido; o tema pode trocar as cores pelas variáveis. */
.logo__icone--e4t { background: none; padding: 0; overflow: hidden; }
.logo-e4t { display: block; width: 100%; height: 100%; }
.logo-e4t__fundo { fill: var(--logo-e4t-cor, #2f006b); }
.logo-e4t__placa { fill: var(--logo-e4t-placa, #fff); }

.caixa {
  background: var(--fundo-caixa);
  border: var(--borda-design) solid var(--borda-caixa);
  border-radius: var(--raio-design);
  box-shadow: var(--sombra-caixa);
}
.caixa__cabecalho {
  display: flex; align-items: center; flex-wrap: wrap; gap: .6em 1em;
  padding: 1em 1.2em; font-size: 1.4em; font-weight: 600; color: var(--cor-forte);
  border-bottom: 1px solid var(--fundo-4);
  border-radius: calc(var(--raio-design) - 1px) calc(var(--raio-design) - 1px) 0 0;
}
.caixa__cabecalho a { color: inherit; }
.caixa__cabecalho-extra { margin-inline-start: auto; font-size: var(--rem); font-weight: 500; }
.caixa__corpo { padding: var(--esp-bloco); }
.caixa__rodape { padding: 1em var(--esp-bloco); border-top: 1px solid var(--fundo-3); }
.caixa + .caixa { margin-top: var(--esp-bloco); }

/* ---------- Avisos ---------- */
.aviso {
  display: flex; gap: .8em; align-items: flex-start;
  padding: 1em 1.2em; border-radius: var(--raio-design);
  background: var(--fundo-2); color: var(--cor-forte); border: 1px solid var(--fundo-4);
  line-height: 1.5;
}
.aviso::before { font-family: var(--fonte-icones); font-weight: 900; content: "\f05a"; font-size: 1.1em; line-height: 1.4; }
.aviso--sucesso { background: var(--positivo-suave); border-color: color-mix(in srgb, var(--positivo) 35%, transparent); }
.aviso--sucesso::before { content: "\f058"; color: var(--positivo); }
.aviso--erro { background: var(--negativo-suave); border-color: color-mix(in srgb, var(--negativo) 35%, transparent); }
.aviso--erro::before { content: "\f071"; color: var(--negativo); }
.aviso--alerta { background: var(--alerta-suave); border-color: color-mix(in srgb, var(--alerta) 35%, transparent); }
.aviso--alerta::before { content: "\f071"; color: var(--alerta); }
.aviso--info::before { color: var(--cor-primaria-texto); }
.aviso-flutuante { position: fixed; z-index: 50; left: 50%; top: 1em; transform: translateX(-50%); width: min(560px, calc(100vw - 2em)); box-shadow: var(--sombra-menu); animation: aviso-entra .35s ease-out; }
.aviso-flutuante.saindo { animation: aviso-sai .3s ease-in forwards; }
@keyframes aviso-entra { from { opacity: 0; transform: translate(-50%, -12px); } }
@keyframes aviso-sai { to { opacity: 0; transform: translate(-50%, -12px); } }

/* ---------- Selos (badges) ---------- */
.selo {
  display: inline-flex; align-items: center; gap: .35em;
  font-size: max(.78em, 11px); font-weight: 600; line-height: 1.6;
  padding: 0 .6em; border-radius: 4px; vertical-align: middle; white-space: nowrap;
  background: var(--fundo-3); color: var(--cor-forte);
}
.selo--positivo { background: var(--positivo); color: #fff; }
.selo--negativo { background: var(--negativo); color: #fff; }
.selo--primario { background: var(--primaria); color: #fff; }
.selo--alerta { background: var(--alerta); color: #fff; }
.selo--oculto { background: var(--fundo-moderado); color: var(--moderado); }
.selo-icone { display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; font-size: .78em; background: var(--fundo-3); color: var(--cor-forte); }
.selo-icone--fixado { background: var(--positivo); color: #fff; }
.selo-icone--trancado { background: var(--fundo-6); color: #fff; }
.selo-icone--oculto { background: var(--negativo); color: #fff; }

/* ---------- Avatares ---------- */
.avatar {
  --tam: 40px;
  width: var(--tam); height: var(--tam); flex: 0 0 auto;
  border-radius: var(--raio-avatar); object-fit: cover; display: inline-grid; place-items: center;
  background: var(--fundo-3); overflow: hidden; vertical-align: middle;
  font-size: calc(var(--tam) * .45); font-weight: 600; color: #fff; text-transform: uppercase; line-height: 1;
}
.avatar--mini { --tam: 24px; }
.link-avatar { flex: 0 0 auto; } /* a foto nunca encolhe numa linha flexível */
.avatar--p { --tam: 32px; }
.avatar--m { --tam: 48px; }
.avatar--g { --tam: 90px; }
.avatar--gg { --tam: 130px; }
.avatar--letra.c0 { background: #d6455b; } .avatar--letra.c1 { background: #c2410c; } .avatar--letra.c2 { background: #a16207; }
.avatar--letra.c3 { background: #4d7c0f; } .avatar--letra.c4 { background: #15803d; } .avatar--letra.c5 { background: #0f766e; }
.avatar--letra.c6 { background: #0e7490; } .avatar--letra.c7 { background: #1d4ed8; } .avatar--letra.c8 { background: #4338ca; }
.avatar--letra.c9 { background: #7e22ce; } .avatar--letra.c10 { background: #a21caf; } .avatar--letra.c11 { background: #be185d; }

/* Nome colorido pelo grupo */
.nome-grupo { font-weight: 600; }
.cor-grupo { color: var(--cor-grupo, inherit); }

/* ---------- Tabelas ---------- */
.tabela { width: 100%; }
.tabela th { text-align: left; font-weight: 600; color: var(--cor-suave); font-size: .85em; text-transform: uppercase; letter-spacing: .02em; padding: .9em 1em; border-bottom: 1px solid var(--fundo-4); background: var(--fundo-2); white-space: nowrap; }
.tabela td { padding: .85em 1em; border-bottom: 1px solid var(--fundo-3); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover td { background: var(--fundo-hover); }
.tabela .direita { text-align: right; }
.tabela .centro { text-align: center; }
.rolavel { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Menus suspensos ---------- */
.menu-ancora { position: relative; display: inline-block; }
.menu {
  position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; min-width: 220px;
  background: var(--fundo-menu); color: var(--cor-texto); border-radius: var(--raio-design);
  box-shadow: var(--sombra-menu); padding: .4em; display: none;
  font-size: var(--rem); font-weight: 400; text-transform: none; letter-spacing: 0; text-align: left;
  animation: menu-abre .15s ease-out;
}
.menu--esquerda { right: auto; left: 0; }
.menu.aberto { display: block; }
@keyframes menu-abre { from { opacity: 0; transform: translateY(-4px); } }
.menu__item, .menu form button {
  display: flex; align-items: center; gap: .7em; width: 100%;
  padding: .6em .9em; border-radius: 5px; color: var(--cor-texto); text-align: left; white-space: nowrap;
}
.menu__item:hover, .menu form button:hover { background: var(--fundo-hover); color: var(--cor-forte); }
.menu__item i, .menu form button i { width: 1.2em; text-align: center; opacity: .75; }
.menu__titulo { padding: .6em .9em .3em; font-size: .78em; font-weight: 700; text-transform: uppercase; color: var(--cor-suave); letter-spacing: .03em; }
.menu__separador { height: 1px; background: var(--fundo-4); margin: .4em 0; }
.menu__perigo, .menu form button.menu__perigo { color: var(--negativo); }

/* ---------- Diálogos ---------- */
.dialogo {
  border: 0; padding: 0; margin: auto; max-width: min(560px, calc(100vw - 2em)); width: 100%;
  background: var(--fundo-caixa); color: var(--cor-texto); border-radius: var(--raio-design);
  box-shadow: 0 5px 55px hsl(0 0% 0% / 40%), 0 7px 24px -12px hsl(0 0% 0% / 70%);
}
.dialogo::backdrop { background: hsl(0 0% 0% / .5); backdrop-filter: blur(2px); }
.dialogo[open] { animation: dialogo-abre .2s ease-out; }
@keyframes dialogo-abre { from { opacity: 0; transform: scale(.96); } }
.dialogo__cabecalho { display: flex; align-items: center; padding: 1em 1.2em; font-size: 1.2em; font-weight: 600; color: var(--cor-forte); border-bottom: 1px solid var(--fundo-4); }
.dialogo__fechar { margin-left: auto; font-size: 1.1em; width: 2em; height: 2em; border-radius: 50%; display: grid; place-items: center; color: var(--cor-suave); }
.dialogo__fechar:hover { background: var(--fundo-hover); }
.dialogo__corpo { padding: 1.2em; max-height: 70vh; overflow: auto; }
.dialogo__rodape { padding: 1em 1.2em; border-top: 1px solid var(--fundo-3); display: flex; justify-content: flex-end; gap: .5em; background: var(--fundo-2); border-radius: 0 0 var(--raio-design) var(--raio-design); }

/* ---------- Dicas (tooltips) ---------- */
[data-dica] { position: relative; }
[data-dica]:hover::after, [data-dica]:focus-visible::after {
  content: attr(data-dica); position: absolute; z-index: 40; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%);
  background: var(--fundo-dica); color: #fff; font-size: 12px; font-weight: 500; line-height: 1.3; padding: .45em .7em; border-radius: 5px;
  white-space: nowrap; pointer-events: none; text-transform: none; letter-spacing: 0; backdrop-filter: blur(4px);
}

/* ---------- Utilidades ---------- */
.suave { color: var(--cor-suave); }
.forte { color: var(--cor-forte); }
.pequeno { font-size: .88em; }
.texto-perigo { --b-texto: var(--negativo); color: var(--negativo); }
.texto-alerta { color: var(--alerta); }
.negrito { font-weight: 600; }
.centro { text-align: center; }
.flex { display: flex; align-items: center; gap: .6em; }
.flex-quebra { display: flex; flex-wrap: wrap; align-items: center; gap: .6em; }
.empurra { margin-left: auto; }
.mt-1 { margin-top: var(--esp-1); } .mt-2 { margin-top: var(--esp-2); } .mt-3 { margin-top: var(--esp-3); }
.mb-2 { margin-bottom: var(--esp-2); }
.vazio { padding: 3em 1.5em; text-align: center; color: var(--cor-suave); }
.vazio i { font-size: 2.6em; opacity: .35; display: block; margin-bottom: .4em; }
.cortar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empilha > * + * { margin-top: var(--esp-bloco); }

/* ---------- Prefixos dos tópicos (fórum e painel) ---------- */
.prefixo { display: inline-flex; align-items: center; font-size: max(.72em, 11px); font-weight: 600; line-height: 1.7; padding: 0 .55em; border-radius: 4px; white-space: nowrap; vertical-align: middle; color: #fff; background: var(--primaria); }
a.prefixo:hover { color: #fff; filter: brightness(1.08); }
.titulo-pagina h1 .prefixo { font-size: 13px; vertical-align: .35em; }
.prefixo--primario { background: var(--primaria); }
.prefixo--cinza { background: hsl(220 9% 46%); }
.prefixo--vermelho { background: hsl(0 72% 47%); }
.prefixo--laranja { background: hsl(25 90% 47%); }
.prefixo--amarelo { background: hsl(45 95% 52%); color: hsl(40 60% 14%); }
a.prefixo--amarelo:hover { color: hsl(40 60% 14%); }
.prefixo--oliva { background: hsl(70 45% 36%); }
.prefixo--verde { background: hsl(140 60% 34%); }
.prefixo--verde-claro { background: hsl(100 50% 82%); color: hsl(110 50% 18%); }
a.prefixo--verde-claro:hover { color: hsl(110 50% 18%); }
.prefixo--azul-claro { background: hsl(200 85% 85%); color: hsl(205 70% 22%); }
a.prefixo--azul-claro:hover { color: hsl(205 70% 22%); }
.prefixo--azul { background: hsl(210 80% 48%); }
.prefixo--azul-escuro { background: hsl(225 70% 40%); }
.prefixo--roxo { background: hsl(270 55% 50%); }
.prefixo--rosa { background: hsl(330 70% 52%); }
.prefixo--destaque { background: hsl(18 95% 50%); }

/* ---------- Tags dos tópicos (fórum e painel) ---------- */
.tags { display: flex; flex-wrap: wrap; gap: .35em; list-style: none; margin: .4em 0 0; padding: 0; }
.tag { display: inline-flex; align-items: center; gap: .35em; padding: .15em .6em; border-radius: 99px; background: var(--fundo-3); color: var(--cor-texto); font-size: .85em; font-weight: 500; }
.tag i { font-size: .8em; opacity: .6; }
.tag:hover { background: color-mix(in srgb, var(--primaria) 14%, transparent); color: var(--cor-primaria-texto); }
.tags--pequenas { margin-top: .15em; }
.tags--pequenas .tag { font-size: .78em; padding: .05em .55em; }

/* ---------- Anúncios do topo (Announcements) ---------- */
.anuncios { display: grid; gap: .6em; margin-bottom: var(--esp-2); }
.anuncio {
  --a-fundo: color-mix(in srgb, var(--primaria) 9%, var(--fundo-caixa)); --a-borda: color-mix(in srgb, var(--primaria) 30%, transparent);
  --a-texto: var(--cor-forte); --a-icone: var(--primaria);
  display: flex; align-items: flex-start; gap: 1em; padding: 1em 1.2em; overflow: hidden;
  border: 1px solid var(--a-borda); border-radius: var(--raio-design); background: var(--a-fundo); color: var(--a-texto);
  box-shadow: var(--sombra-caixa); animation: anuncio-entra .4s cubic-bezier(.2, .7, .2, 1) both;
  transition: height .35s ease, opacity .25s ease, transform .35s ease, padding .35s ease, margin .35s ease;
}
.anuncio--sucesso { --a-fundo: var(--positivo-suave); --a-borda: color-mix(in srgb, var(--positivo) 35%, transparent); --a-icone: var(--positivo); }
.anuncio--alerta { --a-fundo: var(--alerta-suave); --a-borda: color-mix(in srgb, var(--alerta) 35%, transparent); --a-icone: var(--alerta); }
.anuncio--erro { --a-fundo: var(--negativo-suave); --a-borda: color-mix(in srgb, var(--negativo) 35%, transparent); --a-icone: var(--negativo); }
.anuncio--neutro { --a-fundo: var(--fundo-caixa); --a-borda: var(--borda-caixa); --a-icone: var(--cor-suave); --a-texto: var(--cor-texto); }
.anuncio--destaque { --a-fundo: linear-gradient(120deg, var(--primaria), color-mix(in oklch, var(--primaria), hsl(280 80% 55%) 45%)); --a-borda: transparent; --a-texto: #fff; --a-icone: #fff; }
.anuncio--escuro { --a-fundo: var(--secundaria); --a-borda: transparent; --a-texto: #fff; --a-icone: hsl(45 100% 65%); }
.anuncio__icone { font-size: 1.35em; color: var(--a-icone); margin-top: .1em; flex: 0 0 auto; }
.anuncio__corpo { flex: 1 1 auto; min-width: 0; }
.anuncio__titulo { display: block; font-weight: 700; font-size: 1.05em; margin-bottom: .2em; }
.anuncio .anuncio__texto, .anuncio .anuncio__texto a { color: inherit; } /* .texto-rico (forum.css) vem depois e pintaria o texto */
.anuncio .anuncio__texto a { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); font-weight: 600; }
.anuncio .anuncio__texto a:hover { text-decoration-color: currentColor; }
.anuncio__fechar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: inherit; opacity: .65; transition: opacity .15s, background-color .15s, transform .15s; }
.anuncio__fechar:hover { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); transform: rotate(90deg); }
.anuncio--saindo { opacity: 0; transform: translateX(24px); padding-block: 0; margin-block: -.3em; border-width: 0; }
@keyframes anuncio-entra { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- Conquistas: medalhas e níveis (desenho próprio; a paleta abaixo é a única cor solta, como a dos avatares) ---------- */
.cor-conquista-bronze { --cq1: #f0b27a; --cq2: #8c4a1c; }
.cor-conquista-prata { --cq1: #f1f5f9; --cq2: #7b8a99; }
.cor-conquista-ouro { --cq1: #ffe58a; --cq2: #c07f00; }
.cor-conquista-azul { --cq1: #7cb4ff; --cq2: #1d4ed8; }
.cor-conquista-verde { --cq1: #7be29a; --cq2: #15803d; }
.cor-conquista-ciano { --cq1: #7deaf8; --cq2: #0e7490; }
.cor-conquista-roxo { --cq1: #c9a8ff; --cq2: #6d28d9; }
.cor-conquista-rosa { --cq1: #ffa3d1; --cq2: #be185d; }
.cor-conquista-vermelho { --cq1: #ff9a9a; --cq2: #b91c1c; }
.cor-conquista-laranja { --cq1: #ffc27d; --cq2: #c2410c; }
.cor-conquista-cinza { --cq1: #d5dbe2; --cq2: #56616d; }
.cor-conquista-escuro { --cq1: #7b8494; --cq2: #111827; }
.medalha { --tam: 40px; position: relative; display: inline-grid; place-items: center; width: var(--tam); height: var(--tam); flex: 0 0 auto; vertical-align: middle; }
.medalha--p { --tam: 24px; } .medalha--m { --tam: 40px; } .medalha--g { --tam: 64px; } .medalha--gg { --tam: 96px; }
.medalha--imagem { object-fit: contain; filter: drop-shadow(0 2px 3px hsl(0 0% 0% / .25)); transition: transform .2s; }
.medalha__forma {
  position: relative; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden;
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background: linear-gradient(145deg, var(--cq1) 0%, var(--cq2) 75%);
  transition: transform .25s cubic-bezier(.2, .7, .2, 1.4);
}
.medalha__forma::before {
  content: ""; position: absolute; inset: 9%; clip-path: inherit;
  background: linear-gradient(330deg, var(--cq1), var(--cq2) 70%); opacity: .9;
}
.medalha__forma::after {
  content: ""; position: absolute; inset: -50%; background: linear-gradient(115deg, transparent 40%, hsl(0 0% 100% / .55) 50%, transparent 60%);
  transform: translateX(-60%); transition: transform .6s ease;
}
.medalha__forma i { position: relative; z-index: 1; color: #fff; font-size: calc(var(--tam) * .38); filter: drop-shadow(0 1px 1px hsl(0 0% 0% / .45)); }
.medalha:hover .medalha__forma { transform: scale(1.08) rotate(-4deg); }
.medalha:hover .medalha__forma::after { transform: translateX(60%); }
.medalha--imagem:hover { transform: scale(1.08) rotate(-4deg); }

.nivel-selo { --tam: 32px; display: inline-grid; place-items: center; width: var(--tam); height: var(--tam); border-radius: 50%; flex: 0 0 auto;
  background: radial-gradient(circle at 30% 25%, var(--cq1), var(--cq2) 75%); color: #fff; font-size: calc(var(--tam) * .45);
  box-shadow: inset 0 0 0 2px hsl(0 0% 100% / .35), 0 1px 3px hsl(0 0% 0% / .3); vertical-align: middle; }
.nivel-selo i { filter: drop-shadow(0 1px 1px hsl(0 0% 0% / .4)); }
.nivel-selo--p { --tam: 22px; } .nivel-selo--m { --tam: 32px; } .nivel-selo--g { --tam: 64px; } .nivel-selo--gg { --tam: 96px; }
.nivel-selo--imagem { background: none; box-shadow: none; object-fit: contain; border-radius: 0; }

.caixa-marcar small.campo__ajuda { display: block; margin-top: .15em; }