/* Dashboard FACE/UFMG 85 anos — folha de estilo.
   Tudo em variáveis: a aprovação vai pedir ajustes de cor e espaçamento, e eles
   devem acontecer aqui, num lugar só, sem tocar em HTML nem JavaScript. */

/* Identidade visual FACE/UFMG.
 *
 * Extraída do site oficial (face.ufmg.br) em 2026-08-14:
 *  - #C8102E — vermelho institucional, cor de link e de botão no CSS do site
 *    (templates/g5_hydrogen/.../hydrogen_11.css). É o vermelho oficial da UFMG.
 *  - #C90C0F — vermelho dos arquivos de logo (face.png, ufmg.fw.png). Difere
 *    ligeiramente do CSS; usado só onde o logo encosta em fundo colorido, para
 *    a barra do logo não brigar com a da interface.
 *  - #162733 — azul-petróleo escuro da navegação principal.
 *  - #722829 — bordô do menu lateral e do showcase.
 *  - #444444 sobre #FFFFFF — corpo de texto do site.
 *  - Roboto — família tipográfica do site.
 *
 * O dashboard será acessado por link a partir do site da FACE, então herda
 * essa paleta para não parecer um sistema de terceiros.
 */

:root {
  /* Institucionais */
  --face-vermelho: #c8102e;
  --face-vermelho-logo: #c90c0f;
  --face-azul: #162733;
  --face-azul-claro: #28475d;
  --face-bordo: #722829;

  /* Superfícies — o site usa branco puro com texto #444444 */
  --bg: #ffffff;
  --surface: #ffffff;
  --alt: #f0f2f4;
  --ink: #222222;
  --soft: #444444;
  --faint: #767676;
  --line: #dddddd;
  --line-b: #ebebeb;

  /* Acento = vermelho institucional */
  --acc: #c8102e;
  --acc-s: #fbe9ec;
  --ok: #2f6b46;
  --ok-s: #e8f0ea;
  --warn: #8a5a15;
  --warn-s: #f7efdf;
  --crit: #a3161b;
  --crit-s: #fae7e8;

  /* Áreas do conhecimento — vermelho institucional primeiro, depois neutros
     que o acompanham sem competir. */
  --a1: #c8102e;
  --a2: #162733;
  --a3: #722829;
  --a4: #28475d;
  --a5: #8a5a15;

  --radius: 3px;              /* o site usa 0.1875rem nos botões */
  --serif: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --mono: "Menlo", "Monaco", ui-monospace, Consolas, monospace;
}

/* Modo escuro: o site institucional não tem, mas o dashboard pode ser aberto à
   noite ou num monitor de instalação. Mantém-se a identidade — o vermelho é
   clareado apenas o bastante para contrastar sobre fundo escuro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17181a; --surface: #1f2124; --alt: #26282c;
    --ink: #e9e7e5; --soft: #b6b2ae; --faint: #8a8681;
    --line: #34373b; --line-b: #2b2e31;
    --acc: #ef5b6e; --acc-s: #3a1a1f;
    --ok: #85bd97; --ok-s: #1f2e24;
    --warn: #d8ae5f; --warn-s: #332815;
    --crit: #e8817f; --crit-s: #38201f;
    --a1: #ef5b6e; --a2: #7fa8c4; --a3: #c98c8a; --a4: #6f9ab5; --a5: #d8ae5f;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  line-height: 1.6;
}

/* ---------------------------------------------------------------- cabeçalho */

header {
  background: var(--surface);
  /* A barra vermelha sob o cabeçalho ecoa o elemento gráfico dos dois logos
     institucionais, onde uma barra vermelha sublinha o nome. */
  border-bottom: 3px solid var(--face-vermelho);
  padding: .9rem 1.5rem .7rem;
  position: sticky;
  top: 0;
  z-index: 20;
}

.topo {
  max-width: 78rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
}

.logos { display: flex; align-items: center; gap: .9rem; flex-shrink: 0; }
.logos img { display: block; height: 38px; width: auto; }
.logos .divisor { width: 1px; height: 30px; background: var(--line); }

/* Os logos são pretos sobre transparente; no modo escuro ficariam invisíveis.
   Inverter preserva a barra vermelha em tom próximo do original. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logos img { filter: invert(1) hue-rotate(180deg); }
}

.marca {
  font-size: .98rem; font-weight: 500; letter-spacing: -.01em;
  line-height: 1.25; padding-left: .2rem;
  border-left: 1px solid var(--line); padding-left: 1rem;
}
.marca small { display: block; font-size: .73rem; color: var(--faint); font-weight: 400; }

@media (max-width: 720px) {
  .marca { border-left: none; padding-left: 0; }
  .logos img { height: 30px; }
}

/* A barra de cobertura fica no cabeçalho — visível em TODAS as telas.
   Sem ela, "2 artigos em Contábeis" lê-se como retrato da área. */
.cobertura {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--warn);
}
.cobertura .trilho {
  width: 120px; height: 7px; border-radius: 4px;
  background: var(--alt); border: 1px solid var(--line); overflow: hidden;
}
.cobertura .preenchido { height: 100%; background: var(--warn); }

/* -------------------------------------------------------------------- abas */

nav.abas {
  max-width: 78rem;
  margin: .8rem auto 0;
  display: flex;
  gap: .3rem;
  flex-wrap: wrap;
}

nav.abas button {
  font-family: var(--serif);
  font-size: .88rem;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--soft);
  padding: .45rem .8rem;
  cursor: pointer;
  margin-bottom: -.7rem;   /* encosta na barra vermelha do cabeçalho */
}
nav.abas button:hover { background: var(--alt); color: var(--ink); }
nav.abas button[aria-selected="true"] {
  color: var(--face-vermelho);
  border-bottom-color: var(--face-vermelho);
  font-weight: 500;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) nav.abas button[aria-selected="true"] { color: var(--acc); border-bottom-color: var(--acc); }
}

/* ------------------------------------------------------------------ layout */

main { max-width: 78rem; margin: 0 auto; padding: 1.5rem; }
.tela[hidden] { display: none; }

h2 { font-size: 1.3rem; margin: 0 0 .3rem; font-weight: 600; letter-spacing: -.01em; }
h3 { font-size: 1rem; margin: 1.6rem 0 .5rem; font-weight: 600; }
.sub { color: var(--faint); font-size: .86rem; margin: 0 0 1.2rem; }

.rotulo {
  font-family: var(--mono); font-size: .67rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--faint); margin: 0 0 .5rem;
}

/* ------------------------------------------------------------------- cards */

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .7rem; margin-bottom: 1.6rem; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem .9rem; }
.kpi b { display: block; font-family: var(--mono); font-size: 1.5rem; font-weight: 600; line-height: 1.1; }
.kpi span { font-size: .74rem; color: var(--faint); }

.painel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin-bottom: 1.2rem;
}

.colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 860px) { .colunas { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ barras */

.barra-linha { display: grid; grid-template-columns: 11rem 1fr auto; align-items: center; gap: .6rem; margin-bottom: .4rem; font-size: .85rem; }
.barra-linha .nome { color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-trilho { background: var(--alt); border-radius: 3px; height: 15px; overflow: hidden; }
.barra-fill { height: 100%; background: var(--a1); border-radius: 3px; }
.barra-linha .n { font-family: var(--mono); font-size: .78rem; color: var(--faint); min-width: 2rem; text-align: right; }

/* Barras de ano lado a lado — com lacunas visíveis, nunca uma linha contínua */
/* A coluna precisa de altura própria: sem `height: 100%`, a altura percentual
   da barra resolve contra "auto" e vira zero — o gráfico saía só com rótulos. */
.anos { display: flex; align-items: flex-end; gap: 3px; height: 130px; margin-top: .5rem; }
.ano-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .25rem; }
.ano-bar { width: 100%; background: var(--a1); border-radius: 2px 2px 0 0; min-height: 2px; }
.ano-rot { font-family: var(--mono); font-size: .62rem; color: var(--faint); writing-mode: vertical-rl; }

/* ------------------------------------------------------------ temas (acordeão)

   Dois níveis: o tema abre revelando os conceitos que agrupa; o conceito é que
   navega. Antes o clique no tema pulava para o primeiro conceito da lista, o
   que atravessava o tema em vez de mostrá-lo. */

.tema-bloco { border-bottom: 1px solid var(--line-b); }

.tema-cabeca {
  display: grid;
  grid-template-columns: 1rem 11rem 1fr auto;
  align-items: center;
  gap: .55rem;
  width: 100%;
  background: none;
  border: none;
  padding: .45rem .3rem;
  cursor: pointer;
  font-family: var(--serif);
  font-size: .86rem;
  color: var(--ink);
  text-align: left;
}
.tema-cabeca:hover { background: var(--alt); }
.tema-cabeca[aria-expanded="true"] { font-weight: 500; }
.tema-cabeca[aria-expanded="true"] .barra-fill { background: var(--face-vermelho); }

.tema-seta { color: var(--faint); font-size: .7rem; }
.tema-cabeca .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--soft); }
.tema-cabeca[aria-expanded="true"] .nome { color: var(--ink); }
.tema-cabeca .barra-trilho { display: block; background: var(--alt); border-radius: 3px; height: 13px; overflow: hidden; }
.tema-cabeca .barra-fill { display: block; height: 100%; background: var(--a2); border-radius: 3px; }
.tema-cabeca .n { font-family: var(--mono); font-size: .76rem; color: var(--faint); min-width: 1.8rem; text-align: right; }

.tema-conceitos {
  padding: .3rem 0 .7rem 1.55rem;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.tema-conceito {
  display: grid;
  grid-template-columns: minmax(8rem, 14rem) 1fr auto;
  align-items: baseline;
  gap: .6rem;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-left: 2px solid var(--line);
  padding: .35rem .5rem;
  cursor: pointer;
  font-family: var(--serif);
}
.tema-conceito:hover { background: var(--acc-s); border-left-color: var(--face-vermelho); }
.tc-nome { font-size: .85rem; color: var(--acc); }
.tc-def { font-size: .76rem; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-grau { font-family: var(--mono); font-size: .7rem; color: var(--faint); white-space: nowrap; }

@media (max-width: 700px) {
  .tema-cabeca { grid-template-columns: 1rem 1fr auto; }
  .tema-cabeca .barra-trilho { display: none; }
  .tema-conceito { grid-template-columns: 1fr auto; }
  .tc-def { display: none; }
}

/* -------------------------------------------------------------------- busca */

.busca { position: relative; margin-bottom: 1rem; }
.busca input {
  width: 100%; font-family: var(--serif); font-size: .95rem;
  padding: .6rem .9rem; border: 1px solid var(--line);
  border-radius: 20px; background: var(--surface); color: var(--ink);
}
.busca input:focus { outline: 2px solid var(--acc-s); border-color: var(--acc); }

.sugestoes {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 15;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); margin-top: .25rem; max-height: 17rem;
  overflow-y: auto; box-shadow: 0 4px 14px rgba(0,0,0,.09);
}
.sugestoes:empty { display: none; }
.sugestoes button {
  display: block; width: 100%; text-align: left; background: none;
  border: none; border-bottom: 1px solid var(--line-b);
  padding: .5rem .8rem; font-family: var(--serif); font-size: .87rem;
  color: var(--ink); cursor: pointer;
}
.sugestoes button:hover { background: var(--acc-s); }
.sugestoes .grau { font-family: var(--mono); font-size: .7rem; color: var(--faint); float: right; }
.sugestoes .sug-nome { display: inline-block; }
/* A definição na sugestão evita escolher entre termos próximos no escuro. */
.sugestoes .sug-def {
  display: block; font-size: .76rem; color: var(--faint);
  margin-top: .15rem; line-height: 1.35;
}

/* ------------------------------------------------------------------ selos */

.selo {
  display: inline-block; font-family: var(--mono); font-size: .68rem;
  padding: .12em .5em; border-radius: 3px; white-space: nowrap;
}
.selo-tema { background: var(--acc-s); color: var(--acc); }
.selo-area { background: var(--alt); color: var(--soft); }
.selo-zona { background: var(--ok-s); color: var(--ok); }
.selo-conf { background: var(--alt); color: var(--faint); }
.selo-causal { background: var(--warn-s); color: var(--warn); }

/* ---------------------------------------------- estatuto epistêmico

   A mesma relação causal significa coisas diferentes conforme a zona: em
   Resultado o estudo demonstrou; em Objetivo apenas se propôs a investigar.
   São 43 contra 10 no corpus — sem distinção visual, as 10 seriam lidas como
   achados da produção da FACE. */

.selo-est { font-weight: 500; }
.selo-est-demonstrada { background: var(--ok-s); color: var(--ok); }
.selo-est-investigada { background: var(--warn-s); color: var(--warn); }
.selo-est-contextual  { background: var(--alt); color: var(--faint); }

/* A barra lateral do cartão repete o estatuto: quem varre a lista percebe a
   diferença sem ler o selo. */
.evidencia-demonstrada { border-left-color: var(--ok); }
.evidencia-investigada { border-left-color: var(--warn); border-left-style: dashed; }
.evidencia-contextual  { border-left-color: var(--line); }

/* Conceito com definição disponível: sublinhado pontilhado, convenção de
   "há mais informação aqui". O texto vem no title. */
.conceito-def {
  border-bottom: 1px dotted var(--faint);
  cursor: help;
}

/* ------------------------------------------------- perfil e aspecto

   Aspecto modal (natureza do conceito) e perfil epistêmico (onde ele vive no
   argumento) são camadas ortogonais ao tema: Topic agrupa por assunto, estes
   classificam por natureza e por função. */

.selo-aspecto { background: var(--alt); color: var(--soft); border: 1px solid var(--line); }

.selo-perfil { font-weight: 500; }
.selo-perfil-achado       { background: var(--ok-s);   color: var(--ok); }
.selo-perfil-instrumental { background: var(--acc-s);   color: var(--acc); }
.selo-perfil-objeto       { background: var(--warn-s); color: var(--warn); }
.selo-perfil-transversal  { background: var(--alt);    color: var(--soft); }
.selo-perfil-misto,
.selo-perfil-contextual,
.selo-perfil-lacuna       { background: var(--alt);    color: var(--faint); }

.perfil { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.perfil-detalhe { font-family: var(--mono); font-size: .73rem; color: var(--faint); }

/* Distribuição por zona do conceito: mostra a base do perfil, e informa mesmo
   quando a amostra é pequena demais para classificar. */
.zonas-mini { display: flex; gap: .35rem; flex-wrap: wrap; }
.zona-chip {
  font-family: var(--mono); font-size: .7rem; color: var(--faint);
  background: var(--alt); border-radius: 3px; padding: .1em .45em;
}
.zona-chip b { color: var(--soft); }

.conceito-def-inline { color: var(--faint); font-size: .76rem; }

/* Barra de confiança: só a fração de alta confiança é preenchida. */
.conf-trilho { background: var(--warn-s); }
.conf-alta { height: 100%; background: var(--ok); border-radius: 3px; }

/* -------------------------------------------------------------- evidência */

.evidencia {
  border: 1px solid var(--line);
  border-left: 3px solid var(--acc);
  border-radius: var(--radius);
  padding: .75rem .9rem;
  margin-bottom: .7rem;
  background: var(--surface);
}
.evidencia .trecho { font-size: .9rem; margin: 0 0 .5rem; }
.evidencia .trecho::before { content: "“"; color: var(--faint); }
.evidencia .trecho::after { content: "”"; color: var(--faint); }
.evidencia .interpretacao {
  font-size: .82rem; color: var(--soft); margin: .4rem 0 .5rem;
  padding-left: .7rem; border-left: 2px solid var(--line-b);
}
.evidencia .rodape { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; font-size: .78rem; color: var(--faint); }
.evidencia .fonte { font-family: var(--mono); font-size: .74rem; }
.evidencia .relacao { font-size: .84rem; margin-bottom: .4rem; }
.evidencia .relacao b { color: var(--acc); }
.evidencia .seta { color: var(--warn); font-style: italic; }

/* ---------------------------------------------------------------- listas */

.lista-item {
  border-bottom: 1px solid var(--line-b);
  padding: .6rem 0;
  cursor: pointer;
}
.lista-item:hover { background: var(--alt); }
.lista-item .titulo { font-size: .92rem; margin-bottom: .15rem; }
.lista-item .meta-linha { font-size: .78rem; color: var(--faint); display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* ------------------------------------------------------------------ grafo */

.grafo {
  width: 100%; height: 520px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
}
.grafo-dica { font-size: .76rem; color: var(--faint); margin-top: .4rem; text-align: center; }

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

.filtros { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; align-items: center; }
.filtros select, .filtros label {
  font-family: var(--serif); font-size: .84rem;
  padding: .35rem .5rem; border: 1px solid var(--line);
  border-radius: 4px; background: var(--surface); color: var(--ink);
}
.filtros label { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }
.filtros .contagem { margin-left: auto; font-family: var(--mono); font-size: .78rem; color: var(--faint); }

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

.aviso {
  background: var(--warn-s); border: 1px solid var(--warn);
  border-radius: var(--radius); padding: .6rem .8rem;
  font-size: .82rem; color: var(--warn); margin-bottom: 1rem;
}
.vazio { color: var(--faint); font-size: .88rem; padding: 1.5rem; text-align: center; }

/* ------------------------------------------------------------------ voltar */

.voltar {
  background: none; border: none; color: var(--acc);
  font-family: var(--serif); font-size: .85rem; cursor: pointer;
  padding: 0; margin-bottom: .8rem;
}
.voltar:hover { text-decoration: underline; }

footer {
  max-width: 78rem; margin: 2rem auto 0; padding: 1rem 1.5rem 2rem;
  border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: .72rem; color: var(--faint);
}

/* ------------------------------------------------- contexto do estudo

   Campos de SOURCE do template. Na ficha do artigo, só aparecem as linhas com
   valor: "Não Especificado" é removido no exportador, porque na tela é ruído. */

.contexto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem 1.4rem; }
.contexto-bloco h4 { font-size: .82rem; font-weight: 500; margin: 0 0 .4rem; color: var(--soft); }
.contexto-bloco h4 small { font-family: var(--mono); font-weight: 400; font-size: .7rem; color: var(--faint); margin-left: .3rem; }
.contexto-bloco .barra-linha { grid-template-columns: 9rem 1fr auto; font-size: .8rem; }

.ficha { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: .2rem 0 .8rem; font-size: .84rem; }
.ficha dt { color: var(--faint); font-size: .78rem; padding-top: .1rem; }
.ficha dd { margin: 0; display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; }
@media (max-width: 560px) { .ficha { grid-template-columns: 1fr; } .ficha dt { padding-top: .4rem; } }

.selo-teoria { background: var(--alt); color: var(--face-bordo); border: 1px solid var(--line); }

/* ------------------------------------------------ explorar outras redes

   Navegação facetada abaixo do grafo do conceito. Facetas (tema, natureza)
   com contorno; sugestões como tags com o motivo em texto — a cor não carrega
   significado sozinha. Tags só por natureza (vínculo mais fraco) em tom mais
   apagado. */
.redes { margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--line-b); }
.redes .rotulo { margin-bottom: .45rem; }
.facetas, .tags-rede { display: flex; flex-wrap: wrap; gap: .35rem; }
.facetas { margin-bottom: .5rem; }
.faceta {
  font-family: var(--mono); font-size: .72rem; color: var(--acc);
  background: var(--surface); border: 1px solid var(--acc); border-radius: 999px;
  padding: .15rem .6rem; cursor: pointer;
}
.faceta small { color: var(--faint); margin-left: .25rem; }
.faceta:hover { background: var(--acc-s); }
.tag-rede {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0;
  text-align: left; background: var(--alt); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .25rem .55rem; cursor: pointer;
  font-family: var(--serif); max-width: 100%;
}
.tag-rede:hover, .tag-rede:focus-visible { background: var(--acc-s); border-color: var(--acc); }
.tag-rede .tr-nome { font-size: .8rem; color: var(--ink); line-height: 1.25; }
.tag-rede .tr-motivo { font-family: var(--mono); font-size: .64rem; color: var(--faint); }
.tag-rede.tag-natureza .tr-nome { color: var(--soft); }

/* ------------------------------------------------------ grafo fixo na tela

   Na tela do conceito, o grafo fica ao lado das evidências, que são longas.
   Fixo (sticky) abaixo do cabeçalho, ele continua visível enquanto se lê a
   coluna de evidências. `align-self: start` é obrigatório: item de grid esticado
   até a altura da linha não tem para onde "grudar". --topo vem do JS. */
.colunas > .painel-grafo {
  position: sticky;
  top: calc(var(--topo, 7rem) + .8rem);
  align-self: start;
}
.painel-grafo .grafo { height: min(480px, calc(100vh - var(--topo, 7rem) - 17rem)); }
@media (max-width: 860px) {
  .colunas > .painel-grafo { position: static; }
  .painel-grafo .grafo { height: 420px; }
}

.grafo-controles { display: flex; gap: .4rem; justify-content: flex-end; margin-bottom: .4rem; }
.grafo-controles button {
  font-family: var(--serif); font-size: .76rem; color: var(--soft);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .15rem .6rem; cursor: pointer;
}
.grafo-controles button:hover { background: var(--alt); color: var(--ink); }

/* ------------------------------------------------ tabela de calor (aspectos)

   Rampa sequencial de um tom só (azul institucional), 5 faixas por mistura
   com a superfície. Contraste do número na célula medido em cada faixa, nos
   dois temas: >= 4,9:1. Nas faixas 4-5 o texto inverte (branco no claro,
   quase preto no escuro, onde a rampa clareia). */
:root { --seq: #28475d; --seq-forte-ink: #ffffff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --seq: #7fa8c4; --seq-forte-ink: #111111; }
}
.q1 { background: color-mix(in oklab, var(--seq) 15%, var(--surface)); }
.q2 { background: color-mix(in oklab, var(--seq) 32%, var(--surface)); }
.q3 { background: color-mix(in oklab, var(--seq) 50%, var(--surface)); }
.q4 { background: color-mix(in oklab, var(--seq) 76%, var(--surface)); }
.q5 { background: color-mix(in oklab, var(--seq) 92%, var(--surface)); }

.calor-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.calor-rolagem { overflow-x: auto; margin: .6rem 0 .2rem; }
table.calor { border-collapse: separate; border-spacing: 2px; font-size: .8rem; }
table.calor thead th { vertical-align: bottom; padding: 0 0 .3rem; font-weight: 400; }
table.calor thead th span {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--mono); font-size: .7rem; color: var(--soft); white-space: nowrap;
}
table.calor tbody th {
  text-align: left; font-weight: 400; padding: .25rem .8rem .25rem 0;
  min-width: 15rem; max-width: 22rem; line-height: 1.25;
}
table.calor tbody th small { display: block; font-size: .7rem; color: var(--faint); }
table.calor tbody th button {
  background: none; border: none; padding: 0; font: inherit; color: var(--acc);
  cursor: pointer; text-align: left;
}
table.calor tbody th button:hover { text-decoration: underline; }
table.calor td { width: 2.9rem; height: 2.1rem; padding: 0; text-align: center; border-radius: 3px; }
table.calor td.q0 { background: var(--alt); opacity: .45; }
table.calor td button {
  width: 100%; height: 100%; min-height: 2.1rem; border: none; background: none; cursor: pointer;
  font-family: var(--mono); font-size: .76rem; color: var(--ink);
}
table.calor td.q4 button, table.calor td.q5 button { color: var(--seq-forte-ink); }
table.calor td button:hover, table.calor td button:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
table.calor td.total { font-family: var(--mono); font-size: .74rem; color: var(--faint); padding-left: .5rem; text-align: left; }
table.calor thead th.total span { color: var(--faint); }
table.calor tr.linha-ref th { font-weight: 600; }
table.calor tr.linha-ref td:not(.total) { box-shadow: inset 0 -2px 0 var(--line); }

.legenda-calor { display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: center; font-size: .74rem; color: var(--faint); }
.legenda-calor .lg-titulo { color: var(--soft); }
.legenda-calor .lg-item { display: inline-flex; align-items: center; gap: .3rem; }
.legenda-calor i { display: inline-block; width: 1.1rem; height: .8rem; border-radius: 2px; }

/* ------------------------------------------------------- temas e paginação */
.tema-resumo { font-family: var(--mono); font-size: .74rem; color: var(--faint); margin: .2rem 0 .5rem; }
.busca-curta {
  font-family: var(--serif); font-size: .84rem; padding: .35rem .6rem;
  border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink); min-width: 12rem;
}
.mais {
  display: block; width: 100%; margin-top: .6rem; padding: .45rem;
  background: var(--alt); border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--serif); font-size: .82rem; color: var(--soft); cursor: pointer;
}
.mais:hover { color: var(--ink); background: var(--acc-s); }