/* Dashboard Phishing/UFG — folha de estilo.
   Derivada do dashboard face85. Tudo em variáveis: ajustes de cor e espaçamento
   acontecem aqui, num lugar só, sem tocar em HTML nem JavaScript. */

/* Identidade visual.
 *
 * Extraída em 2026-10-07 de:
 *  - ufg.br (CSS ufg2-*.css e marca-ufg.svg):
 *      #0072B9 — azul da marca UFG (hexágonos do logo);
 *      #0081D0 — azul de links e destaques do portal;
 *      #444444 / #666666 sobre branco — texto do portal;
 *      Lato — família tipográfica do portal.
 *  - ww2.inf.ufg.br/~portfolio/dAurora.html (portfólio do grupo):
 *      fundo #f9f9f9 com cartões brancos de sombra leve e cantos de 8px;
 *      marca dAurora em degradê turquesa (#2bb5c4) → laranja (#ff6a00).
 *
 * O azul UFG é a cor de ênfase (links, aba ativa, conceitos). O degradê da
 * dAurora aparece só como faixa sob o cabeçalho: é marca, não código de
 * dados — usá-lo em barras inventaria uma escala que não existe.
 */

:root {
  /* Institucionais */
  --ufg-azul: #0072b9;
  --ufg-azul-link: #0081d0;
  --ufg-azul-escuro: #0b3a5e;
  --aurora-turquesa: #2bb5c4;
  --aurora-laranja: #ff6a00;

  /* Superfícies — fundo cinza-claro com cartões brancos, como a dAurora */
  --bg: #f6f7f9;
  --surface: #ffffff;
  --alt: #eef1f4;
  --ink: #1f2328;
  --soft: #444444;
  --faint: #6b6f75;
  --line: #dde1e6;
  --line-b: #e9ecef;

  /* Acento = azul UFG */
  --acc: #0072b9;
  --acc-s: #e5f1fa;
  --ok: #2f6b46;
  --ok-s: #e6f1ea;
  --warn: #8a5a15;
  --warn-s: #f7efdf;
  --crit: #b3261e;
  --crit-s: #fbe9e7;
  --laranja: #c45200;          /* laranja da dAurora escurecido p/ texto (4,8:1) */
  --laranja-s: #fff0e5;

  /* Categorias nominais — azul UFG primeiro, depois tons que o acompanham. */
  --a1: #0072b9;
  --a2: #0b3a5e;
  --a3: #1f8a96;
  --a4: #3d5a80;
  --a5: #c45200;
  --a6: #3f6b3a;
  --a7: #5c3a7e;
  --a8: #8a5a15;
  --a9: #7a3b2e;
  --a10: #43474d;

  --radius: 6px;
  --serif: "Lato", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "Menlo", "Monaco", ui-monospace, Consolas, monospace;
  --sombra: 0 1px 3px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .04);
}

/* Modo escuro: mantém a identidade, com o azul clareado o bastante para
   contrastar sobre fundo escuro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14171b; --surface: #1c2025; --alt: #252a30;
    --ink: #e8eaed; --soft: #b9bec5; --faint: #8b9199;
    --line: #313840; --line-b: #282e35;
    --acc: #5db3ec; --acc-s: #14293a;
    --ok: #85bd97; --ok-s: #1d2e24;
    --warn: #d8ae5f; --warn-s: #332815;
    --crit: #f08a80; --crit-s: #3a1f1d;
    --laranja: #ff9a52; --laranja-s: #3a2416;
    --a1: #5db3ec; --a2: #8fb3d3; --a3: #5cc6cf; --a4: #8ea6c8; --a5: #ff9a52;
    --a6: #8fbd86; --a7: #b99be0; --a8: #d8ae5f; --a9: #e39a86; --a10: #a9adb4;
    --sombra: none;
  }
}
:root[data-theme="dark"] {
  --bg: #14171b; --surface: #1c2025; --alt: #252a30;
  --ink: #e8eaed; --soft: #b9bec5; --faint: #8b9199;
  --line: #313840; --line-b: #282e35;
  --acc: #5db3ec; --acc-s: #14293a;
  --ok: #85bd97; --ok-s: #1d2e24;
  --warn: #d8ae5f; --warn-s: #332815;
  --crit: #f08a80; --crit-s: #3a1f1d;
  --laranja: #ff9a52; --laranja-s: #3a2416;
  --a1: #5db3ec; --a2: #8fb3d3; --a3: #5cc6cf; --a4: #8ea6c8; --a5: #ff9a52;
  --a6: #8fbd86; --a7: #b99be0; --a8: #d8ae5f; --a9: #e39a86; --a10: #a9adb4;
  --sombra: none;
}

* { box-sizing: border-box; }

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

a { color: var(--acc); }

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

header {
  background: var(--surface);
  padding: .9rem 1.5rem .7rem;
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: var(--sombra);
}
/* Faixa com o degradê da dAurora sob o cabeçalho. Pseudo-elemento em vez de
   border-image: fica sobre a sombra e não altera a altura medida em --topo. */
header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
  background: linear-gradient(90deg, var(--aurora-turquesa), var(--ufg-azul) 45%, var(--aurora-laranja));
}

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

.logos { display: flex; align-items: center; flex-shrink: 0; }
.logos img { display: block; height: 42px; width: auto; }
.logos .logo-escuro { display: none; }
/* No escuro, a versão branca oficial da marca (a mesma que o portal usa no
   modo de alto contraste), em vez de inverter as cores do logo. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logos .logo-claro { display: none; }
  :root:not([data-theme="light"]) .logos .logo-escuro { display: block; }
}
:root[data-theme="dark"] .logos .logo-claro { display: none; }
:root[data-theme="dark"] .logos .logo-escuro { display: block; }

.marca {
  font-size: 1.12rem; font-weight: 900; letter-spacing: -.01em;
  line-height: 1.2; color: var(--ufg-azul-escuro);
  border-left: 1px solid var(--line); padding-left: 1rem;
}
.marca .marca-fina { font-weight: 400; color: var(--soft); }
.marca small { display: block; font-size: .74rem; color: var(--faint); font-weight: 400; letter-spacing: 0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .marca { color: var(--ink); }
}
:root[data-theme="dark"] .marca { color: var(--ink); }

@media (max-width: 720px) {
  .marca { border-left: none; padding-left: 0; font-size: 1rem; }
  .logos img { height: 34px; }
}

/* A barra de cobertura fica no cabeçalho — visível em TODAS as telas.
   Com 2 de 23 artigos, qualquer distribuição sem ela passa por retrato. */
.cobertura {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--laranja);
}
.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(--laranja); }

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

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

nav.abas button {
  font-family: var(--serif);
  font-size: .9rem;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--soft);
  padding: .45rem .8rem;
  cursor: pointer;
  margin-bottom: -.7rem;
}
nav.abas button:hover { background: var(--alt); color: var(--ink); }
nav.abas button[aria-selected="true"] {
  color: var(--acc);
  border-bottom-color: var(--acc);
  font-weight: 700;
}

/* ------------------------------------------------------------------ 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;
}

/* `align-items: start` impede que o painel curto seja esticado até a altura do
   painel alto ao lado — o de anos ficava com metade da caixa vazia porque o de
   áreas, com 15 linhas, define a altura da linha do grid. */
.colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: start; }
@media (max-width: 860px) { .colunas { grid-template-columns: 1fr; } }

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

/* Rótulo em coluna fixa. Serve a rótulos CURTOS e previsíveis (nomes de zona
   retórica); categorias de nome longo usam .barra-item, abaixo. */
.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; }

/* Rótulo em linha própria, acima da barra: é o que permite exibir inteiros os
   nomes longos das subáreas do CNPq (até 49 caracteres). O rótulo QUEBRA em
   vez de truncar — `white-space: normal` desfaz o nowrap herdado de .nome. */
.barra-item { margin-bottom: .55rem; font-size: .85rem; }
.barra-item .nome {
  display: block; color: var(--soft); margin-bottom: .15rem;
  white-space: normal; overflow: visible; line-height: 1.25;
}
.barra-item .barra-medida { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .6rem; }
.barra-item .n { font-family: var(--mono); font-size: .78rem; color: var(--faint); min-width: 2rem; text-align: right; }

/* Anos em barras horizontais. O rótulo do ano tem largura fixa e conhecida
   (4 dígitos), então a coluna fixa não corta nada. Anos sem artigo mapeado
   simplesmente não aparecem — a lista é de anos presentes, não uma série
   contínua, e por isso não sugere continuidade onde não há. */
.ano-linha { display: grid; grid-template-columns: 2.6rem 1fr auto; align-items: center; gap: .6rem; margin-bottom: .3rem; }
.ano-rot { font-family: var(--mono); font-size: .76rem; color: var(--soft); }
.ano-linha .n { font-family: var(--mono); font-size: .78rem; color: var(--faint); min-width: 2rem; text-align: right; }

/* ------------------------------------------------------------ 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;
  /* minmax deixa a coluna do nome crescer ate caber: em 11rem fixos,
     "Comportamento Organizacional" e "Desenvolvimento Econômico" eram
     cortados. A barra ao lado cede o espaco, que e o canal impreciso. */
  grid-template-columns: 1rem minmax(11rem, max-content) 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(--acc); }

.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; }

/* `display: flex` sobrepõe o `[hidden] { display: none }` do navegador: o
   acordeão marcava hidden=true e mesmo assim o bloco continuava ocupando a
   página inteira — o tema parecia não recolher. A regra [hidden] abaixo tem de
   vir depois, e vencer, para que o atributo volte a valer. */
.tema-conceitos {
  padding: .3rem 0 .7rem 1.55rem;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.tema-conceitos[hidden] { display: none; }

/* Duas linhas, não três colunas.
   Antes, título e referência disputavam a mesma linha em colunas fixas, e o
   título de um artigo — que pode passar de 100 caracteres — era cortado no
   meio de uma palavra. Agora o título ocupa a primeira linha inteira (podendo
   quebrar em duas) e a referência fica embaixo, hierarquicamente subordinada
   a ele. Nada é truncado. */
.tema-conceito {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "nome grau"
    "def  def";
  align-items: baseline;
  column-gap: .8rem;
  row-gap: .1rem;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-left: 2px solid var(--line);
  padding: .4rem .6rem;
  cursor: pointer;
  font-family: var(--serif);
}
.tema-conceito:hover { background: var(--acc-s); border-left-color: var(--acc); }
.tema-conceito + .tema-conceito { border-top: 1px solid var(--line-b); }

/* O título quebra em até duas linhas; além disso, reticências. Um título de
   250 caracteres empurraria o resto da lista para fora da tela. */
.tc-nome {
  grid-area: nome;
  font-size: .85rem; color: var(--acc); line-height: 1.35;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
/* Segunda linha: autor · área. Sem nowrap — é ela que estava cortando
   "Administração de Setores E…". Em tela estreita quebra, não trunca. */
.tc-def {
  grid-area: def;
  font-size: .76rem; color: var(--faint); line-height: 1.3;
  white-space: normal; overflow: visible;
}
.tc-grau {
  grid-area: grau;
  font-family: var(--mono); font-size: .7rem; color: var(--faint);
  white-space: nowrap; justify-self: end;
}
/* A área do conhecimento vinha colada ao autor separada por "·". Como marca
   fraca, ela se distingue melhor por um traço vertical discreto do que por
   mais um ponto no meio do texto. */
.tc-area {
  margin-left: .5rem; padding-left: .5rem;
  border-left: 1px solid var(--line);
  color: var(--soft);
}

@media (max-width: 700px) {
  .tema-cabeca { grid-template-columns: 1rem 1fr auto; }
  .tema-cabeca .barra-trilho { display: none; }
  /* .tc-def NÃO é mais ocultado aqui: no layout de duas linhas ela carrega o
     autor e a área, que são justamente o que identifica o artigo. Como está em
     linha própria, cabe na tela estreita sem disputar espaço com o título. */
}

/* -------------------------------------------------------------------- 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(--alt); color: var(--soft); border: 1px solid var(--line); }
.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;
}

/* Mesma convenção para as CATEGORIAS cuja definição vem do template (tipos de
   relação, aspectos modais, zonas, confiança): o pontilhado avisa que há uma
   definição formal atrás do rótulo. Nos selos, que já têm fundo próprio, só o
   cursor muda — um sublinhado dentro da pílula sujaria a forma. */
.com-def { border-bottom: 1px dotted var(--faint); cursor: help; }
/* Selo com dica de procedência: só o cursor muda — a pílula já tem fundo
   próprio e um sublinhado dentro dela sujaria a forma. */
.selo.com-dica { cursor: help; }
/* Valor de contexto que leva à lista filtrada (território, setor). O ponteiro
   distingue do que apenas informa: sem isso, o leitor clica em tudo e só
   algumas coisas respondem. */
.barra-item .nome.clicavel { cursor: pointer; }
.barra-item .nome.clicavel:hover { color: var(--acc); border-bottom-color: var(--acc); }
.selo-zona, .selo-conf, .selo-aspecto, .zona-chip, .seta[title] { cursor: help; }
.calor th[scope="col"] .com-def { border-bottom: none; }
.calor th[scope="col"][title] { 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); }

/* Os estilos de .selo-perfil / .perfil saíram com o perfil epistêmico:
   critério calculado na exportação, sem campo no template. */

/* 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; }

/* Referência bibliográfica clicável. É um <button> por acessibilidade (foco e
   teclado), mas herda a aparência do texto que substituiu — um botão de
   formulário no meio da citação quebraria a linha. O pontilhado segue a
   convenção já usada para "há mais aqui". */
.ref-artigo {
  font: inherit; color: inherit; background: none; border: none;
  padding: 0; cursor: pointer;
  border-bottom: 1px dotted var(--faint);
}
.ref-artigo:hover { color: var(--acc); border-bottom-color: var(--acc); }
.ref-artigo:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* Selo de tema clicável: mantém a pílula, ganha ponteiro. */
.selo-clicavel {
  font: inherit; border: none; cursor: pointer;
  font-family: var(--mono); font-size: .7rem;
}
.selo-clicavel:hover { filter: brightness(.94); text-decoration: underline; }
.selo-clicavel:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }

/* A linha de "artigos com temas em comum" reúne DOIS artigos: o container não
   navega (não haveria alvo único), só os botões dentro dele. Sem isto o
   cursor prometeria um clique que não existe. */
.lista-item-estatico { cursor: default; }
.lista-item-estatico:hover { background: none; }
.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; }
/* `max-width` impede que um <select> com opcoes longas ("Crescimento -
   Flutuações e Planejamento Econômico (1)") defina sua propria largura e
   empurre a pagina para fora da viewport no celular. */
.filtros select { max-width: 100%; }
.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); }

/* Limpar filtros: presente apenas quando há filtro ativo (o JS controla o
   `hidden`). Tratado como ação secundária — contorno, não preenchimento: a
   ação principal da barra é filtrar, não desfazer. */
.filtros .limpar {
  font-family: var(--serif); font-size: .84rem;
  padding: .35rem .6rem; border: 1px solid var(--acc);
  border-radius: 4px; background: var(--surface); color: var(--acc);
  cursor: pointer;
}
.filtros .limpar:hover { background: var(--acc-s); }
.filtros .limpar[hidden] { display: none; }

/* ------------------------------------------------------------------ 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);
}
/* Autoria e licenca: presentes sem competir com o conteudo do rodape. */
.licenca { display: inline-block; margin-top: .4rem; font-size: .68rem; }

/* ------------------------------------------------- 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; }
/* Os blocos de contexto são estreitos (grid de 17rem) e alguns valores são
   longos — "Abordagem Pós-Keynesiana de Economia Regional" tem 45 caracteres.
   O rótulo em linha própria de .barra-item já resolve; aqui só se reduz o
   corpo do texto para o bloco menor. */
.contexto-bloco .barra-item { font-size: .8rem; margin-bottom: .45rem; }

.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(--a2); 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); }

/* Portas de entrada da tela de conceitos (estado sem busca nem filtro). */
.portas h3 { font-size: .9rem; margin: .9rem 0 .15rem; }
.portas h3:first-child { margin-top: 0; }
.portas .rotulo { margin-bottom: .45rem; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip {
  font-size: .78rem; color: var(--ink); text-align: left;
  background: var(--alt); border: 1px solid var(--line);
  border-radius: 999px; padding: .2rem .65rem; cursor: pointer;
}
.chip:hover { background: var(--surface); border-color: var(--acc); }
.chip-conceito { font-family: var(--mono); font-size: .72rem; }
.chip-n { color: var(--faint); margin-left: .3rem; }
.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: max(300px, min(480px, calc(100vh - var(--topo, 7rem) - 20rem))); }
@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: #0b4f80; --seq-forte-ink: #ffffff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --seq: #5db3ec; --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); }

/* ================================================================
   Acréscimos do Phishing/UFG
   ================================================================ */

/* Cartões com a sombra leve da dAurora. */
.painel, .kpi { box-shadow: var(--sombra); }
.kpi b { color: var(--ufg-azul-escuro); }
.kpi b small { font-size: .8rem; color: var(--faint); font-weight: 400; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kpi b { color: var(--acc); }
}
:root[data-theme="dark"] .kpi b { color: var(--acc); }

/* Aviso de amostra: laranja da dAurora, porque é cautela, não erro. */
.aviso-amostra {
  background: var(--laranja-s);
  border: 1px solid color-mix(in oklab, var(--laranja) 35%, transparent);
  border-left: 4px solid var(--laranja);
  color: var(--ink);
  font-size: .86rem;
  border-radius: var(--radius);
  padding: .7rem .9rem;
  margin-bottom: 1.2rem;
}
.aviso-amostra:empty { display: none; }

/* --------------------------------------------- estatuto (anotado) */

/* Uma cor por estatuto, a MESMA no selo (texto sobre fundo tingido), na borda
   esquerda do cartão, na barra do Panorama e na aresta do grafo. Antes eram
   três cores para cinco valores (Hipotética = Investigada, Negada =
   Inconclusiva) e borda tracejada/pontilhada de 3px, que se apagava ao lado do
   selo. Agora: borda sólida de 4px na cor do selo.
   Escolha das cores: verde (afirmada) e vermelho (negada) nos extremos; âmbar
   para o que é suposto; violeta para o que é só perguntado; cinza-ardósia para
   a ausência de resultado. Texto do selo >= 4,5:1 sobre o próprio fundo, nos
   dois temas. No grafo o traço (cheio/tracejado/pontilhado) é mantido como
   segundo canal, para quem não distingue as cores. */
:root {
  --est-afirmada: #2a7a4b;     --est-afirmada-s: #e5f3ea;
  --est-hipotetica: #965200;   --est-hipotetica-s: #fcefdc;
  --est-investigada: #5a45b0;  --est-investigada-s: #eeebfa;
  --est-negada: #c0262d;       --est-negada-s: #fbe7e7;
  --est-inconclusiva: #5b6470; --est-inconclusiva-s: #eceff2;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --est-afirmada: #7cc99a;     --est-afirmada-s: #1b3125;
    --est-hipotetica: #e9b765;   --est-hipotetica-s: #392a14;
    --est-investigada: #b3a6f2;  --est-investigada-s: #2a2545;
    --est-negada: #f28b84;       --est-negada-s: #3d1f1e;
    --est-inconclusiva: #aeb6c1; --est-inconclusiva-s: #2a2f36;
  }
}
:root[data-theme="dark"] {
  --est-afirmada: #7cc99a;     --est-afirmada-s: #1b3125;
  --est-hipotetica: #e9b765;   --est-hipotetica-s: #392a14;
  --est-investigada: #b3a6f2;  --est-investigada-s: #2a2545;
  --est-negada: #f28b84;       --est-negada-s: #3d1f1e;
  --est-inconclusiva: #aeb6c1; --est-inconclusiva-s: #2a2f36;
}

.selo-est { cursor: help; font-weight: 700; }
.selo-est-afirmada     { background: var(--est-afirmada-s);     color: var(--est-afirmada); }
.selo-est-hipotetica   { background: var(--est-hipotetica-s);   color: var(--est-hipotetica); }
.selo-est-investigada  { background: var(--est-investigada-s);  color: var(--est-investigada); }
.selo-est-negada       { background: var(--est-negada-s);       color: var(--est-negada); }
.selo-est-inconclusiva { background: var(--est-inconclusiva-s); color: var(--est-inconclusiva); }

.evidencia[class*="evidencia-"] { border-left-width: 4px; border-left-style: solid; }
.evidencia-afirmada     { border-left-color: var(--est-afirmada); }
.evidencia-hipotetica   { border-left-color: var(--est-hipotetica); }
.evidencia-investigada  { border-left-color: var(--est-investigada); }
.evidencia-negada       { border-left-color: var(--est-negada); }
.evidencia-inconclusiva { border-left-color: var(--est-inconclusiva); }

.barra-fill.est-afirmada     { background: var(--est-afirmada); }
.barra-fill.est-hipotetica   { background: var(--est-hipotetica); }
.barra-fill.est-investigada  { background: var(--est-investigada); }
.barra-fill.est-negada       { background: var(--est-negada); }
.barra-fill.est-inconclusiva { background: var(--est-inconclusiva); }
.barra-item.clicavel { cursor: pointer; border-radius: 4px; }
.barra-item.clicavel:hover { background: var(--alt); }

/* Legenda sob o grafo: amostra de traço com a cor e o estilo da aresta. */
.leg-traco { display: inline-block; width: 1.6rem; height: 0; vertical-align: middle; margin: 0 .2rem 0 .6rem; border-top: 2.5px solid; }
.leg-traco:first-child { margin-left: 0; }
.leg-afirmada     { border-top-color: var(--est-afirmada); }
.leg-hipotetica   { border-top: 2.5px dashed var(--est-hipotetica); }
.leg-investigada  { border-top: 2.5px dashed var(--est-investigada); }
.leg-negada       { border-top: 2.5px dotted var(--est-negada); }
.leg-inconclusiva { border-top: 2.5px dotted var(--est-inconclusiva); }

/* Logo dAurora ao lado da UFG: mesma altura visual do bloco de texto da
   marca UFG (o hexágono ocupa 42px, a palavra "UFG" ~30px). */
.logos { gap: .8rem; }
.logos .divisor { width: 1px; height: 30px; background: var(--line); }
.logos .logo-daurora { height: 30px; width: auto; border-radius: 5px; }
@media (max-width: 720px) { .logos .logo-daurora { height: 24px; } }

/* ------------------------------------------- cartão de evidência */

.evidencia .interpretacao .rot-inline {
  font-family: var(--mono); font-size: .64rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--faint); margin-right: .3rem; font-style: normal;
}
.evidencia .interpretacao.obs { color: var(--faint); }
.selo-ator { background: var(--laranja-s); color: var(--laranja); cursor: help; }
.selo-secao {
  background: none; color: var(--faint); white-space: normal;
  max-width: 22rem; overflow: hidden; text-overflow: ellipsis;
}
.selo-tipo { background: var(--acc-s); color: var(--acc); }
.selo-aguardando { background: var(--laranja-s); color: var(--laranja); }
.selo-palavra { background: var(--alt); color: var(--soft); }

/* ------------------------------------------------------- artigos */

.codigo {
  font-family: var(--mono); font-size: .72rem; color: var(--faint);
  margin-right: .25rem; letter-spacing: .02em;
}
.lista-aguardando .titulo { color: var(--soft); }
.resumo-extraido { font-size: .92rem; margin: 0 0 .7rem; }
.palavras { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .8rem; }
details.abstract { margin-top: .4rem; font-size: .86rem; }
details.abstract summary { cursor: pointer; color: var(--acc); font-size: .82rem; }
details.abstract p, .abstract-texto { color: var(--soft); font-size: .88rem; line-height: 1.6; }
.zonas-indice { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .4rem; }
.zonas-indice a { text-decoration: none; }
.grafo.grafo-alto { height: 560px; }
@media (max-width: 700px) { .grafo.grafo-alto { height: 420px; } }

/* ------------------------------------------------ anatomia do ataque */

.anatomia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
  align-items: start;
}
.anat-col { margin-bottom: 0; border-top: 4px solid var(--a1); padding-top: .8rem; }
/* Uma cor por pergunta, do turquesa ao laranja da dAurora: as colunas se
   distinguem sem legenda, e a última (defesa) fecha no azul UFG. */
.anat-obtem   { border-top-color: var(--a3); }
.anat-imita   { border-top-color: var(--a4); }
.anat-explora { border-top-color: var(--a5); }
.anat-visa    { border-top-color: var(--a9); }
.anat-mitiga  { border-top-color: var(--a1); }
.anat-verbo {
  font-family: var(--mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .09em; color: var(--faint); margin: 0; cursor: help;
}
.anat-pergunta { margin: .1rem 0 .7rem; font-size: 1rem; line-height: 1.3; }
.anat-item {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "nome n" "outros outros";
  width: 100%; text-align: left; background: none; border: none;
  border-left: 2px solid var(--line); padding: .35rem .55rem; cursor: pointer;
  font-family: var(--serif); color: var(--ink);
}
.anat-item + .anat-item { border-top: 1px solid var(--line-b); }
.anat-item:hover, .anat-item:focus-visible { background: var(--acc-s); border-left-color: var(--acc); }
.anat-nome { grid-area: nome; font-size: .88rem; color: var(--acc); line-height: 1.3; }
.anat-n { grid-area: n; font-family: var(--mono); font-size: .78rem; color: var(--soft); padding-left: .5rem; }
.anat-outros { grid-area: outros; font-size: .72rem; color: var(--faint); line-height: 1.3; }
.anat-rodape {
  display: block; width: 100%; margin-top: .7rem; padding: .4rem 0 0;
  border: none; border-top: 1px solid var(--line-b); background: none;
  font-family: var(--mono); font-size: .7rem; color: var(--faint); text-align: left; cursor: pointer;
}
.anat-rodape:hover { color: var(--acc); }

footer a { color: var(--acc); }

/* ------------------------------------------- afirmação com várias menções */

/* Faixa lateral com a composição dos estatutos (segmentos proporcionais,
   cores --est-*). Uma afirmação só-Afirmada tem faixa verde inteira. */
.evidencia.afirmacao { position: relative; border-left: 1px solid var(--line); padding-left: 1.15rem; }
.evidencia.afirmacao::before {
  content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 5px;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--faixa, var(--est-afirmada));
}
.afirmacao-resumo {
  display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
  font-family: var(--mono); font-size: .72rem; color: var(--faint); margin: -.1rem 0 .55rem;
}
.aviso-misto { color: var(--laranja); border-bottom: 1px dotted var(--laranja); cursor: help; }
.ocorrencia { margin: 0; }
.ocorrencia + .ocorrencia { margin-top: .7rem; padding-top: .7rem; border-top: 1px dashed var(--line); }
.ocorrencia-marcada { border-left: 3px solid var(--line); padding-left: .6rem; }
.ocorrencia-afirmada     { border-left-color: var(--est-afirmada); }
.ocorrencia-hipotetica   { border-left-color: var(--est-hipotetica); }
.ocorrencia-investigada  { border-left-color: var(--est-investigada); }
.ocorrencia-negada       { border-left-color: var(--est-negada); }
.ocorrencia-inconclusiva { border-left-color: var(--est-inconclusiva); }
.mais-ocorrencias { margin-top: .6rem; }
.mais-ocorrencias > summary {
  cursor: pointer; font-size: .8rem; color: var(--acc); list-style-position: inside;
  padding: .2rem 0;
}
.mais-ocorrencias[open] > summary { margin-bottom: .6rem; }
.mais-ocorrencias .ocorrencia:first-of-type { margin-top: 0; padding-top: .7rem; border-top: 1px dashed var(--line); }
.selo-repetido { background: var(--laranja-s); color: var(--laranja); cursor: help; }

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

.grafo-controles { align-items: center; flex-wrap: wrap; }
.grafo-contagem { flex: 1 1 100%; margin-bottom: .1rem; font-family: var(--mono); font-size: .7rem; color: var(--faint); }
.grafo-info {
  display: flex; flex-wrap: wrap; gap: .3rem .7rem; align-items: baseline;
  margin-top: .45rem; padding: .45rem .6rem; min-height: 2.2rem;
  background: var(--alt); border-radius: var(--radius); font-size: .8rem;
}
.grafo-info .gi-dica { color: var(--faint); }
.grafo-info .gi-nome { color: var(--acc); }
.grafo-info .gi-def { color: var(--soft); flex: 1 1 18rem; line-height: 1.35; }
.grafo-info .gi-acoes { display: flex; gap: .4rem; flex-wrap: wrap; }
.grafo-info button {
  font-family: var(--serif); font-size: .78rem; cursor: pointer;
  background: var(--surface); color: var(--acc); border: 1px solid var(--acc);
  border-radius: 4px; padding: .15rem .55rem;
}
.grafo-info button:hover { background: var(--acc-s); }