:root{
  --fundo:#f2f5f5; --superficie:#ffffff; --superficie-2:#e9eeee;
  --tinta:#0f1a1b; --tinta-suave:#586868; --tinta-tenue:#7f9291;
  --linha:#d8e1e1; --linha-forte:#c2d0d0;
  --acento:#0e5b62; --acento-fundo:#e0eded; --acento-tinta:#0b464c;
  --sim:#1f6f43; --sim-fundo:#e2f0e7;
  --nao:#a33a2a; --nao-fundo:#f6e6e2;
  --duvida:#8a6010; --duvida-fundo:#f5ecda;
  --sombra:0 1px 2px rgba(15,26,27,.06), 0 4px 12px rgba(15,26,27,.04);
  --raio:6px;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --fundo:#0d1314; --superficie:#151e1f; --superficie-2:#1d2829;
    --tinta:#e7eeed; --tinta-suave:#9cadac; --tinta-tenue:#7d8f8e;
    --linha:#283435; --linha-forte:#374647;
    --acento:#63c3ca; --acento-fundo:#14302f; --acento-tinta:#8ad6db;
    --sim:#6cba8c; --sim-fundo:#152a1f;
    --nao:#e2907c; --nao-fundo:#2e1c18;
    --duvida:#d6ab5e; --duvida-fundo:#2b2214;
    --sombra:0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.25);
  }
}
:root[data-theme="dark"]{
  --fundo:#0d1314; --superficie:#151e1f; --superficie-2:#1d2829;
  --tinta:#e7eeed; --tinta-suave:#9cadac; --tinta-tenue:#7d8f8e;
  --linha:#283435; --linha-forte:#374647;
  --acento:#63c3ca; --acento-fundo:#14302f; --acento-tinta:#8ad6db;
  --sim:#6cba8c; --sim-fundo:#152a1f;
  --nao:#e2907c; --nao-fundo:#2e1c18;
  --duvida:#d6ab5e; --duvida-fundo:#2b2214;
  --sombra:0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--fundo); color:var(--tinta);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:var(--acento); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--acento); outline-offset:2px; border-radius:3px}
button{font:inherit; color:inherit; cursor:pointer}
.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace}
[hidden]{display:none !important}

input[type=text],input[type=password],textarea{
  font:inherit; color:var(--tinta); background:var(--superficie);
  border:1px solid var(--linha-forte); border-radius:var(--raio); padding:5px 9px;
}
input::placeholder,textarea::placeholder{color:var(--tinta-tenue)}
.btn{
  background:var(--superficie); border:1px solid var(--linha-forte);
  border-radius:var(--raio); padding:6px 12px; font-size:12.5px; font-weight:500;
}
.btn:hover{border-color:var(--acento); color:var(--acento)}
.btn[disabled]{opacity:.45; cursor:not-allowed}

/* ---------- entrada ---------- */
/* Painel escuro fixo nos dois temas: dá ao login uma identidade própria e
   faz o acento funcionar sobre fundo constante. */
:root{
  --painel:#0d4046; --painel-2:#0a3339;
  --painel-tinta:#eef6f6; --painel-suave:#a3c4c6; --painel-linha:#1c565c;
  --sobre-acento:#ffffff;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --painel:#10282b; --painel-2:#0c1f21;
    --painel-tinta:#e2efee; --painel-suave:#8fadad; --painel-linha:#1f3d3f;
    --sobre-acento:#06211f;
  }
}
:root[data-theme="dark"]{
  --painel:#10282b; --painel-2:#0c1f21;
  --painel-tinta:#e2efee; --painel-suave:#8fadad; --painel-linha:#1f3d3f;
  --sobre-acento:#06211f;
}

.entrada{min-height:100vh; display:grid; place-items:center; padding:24px}
.painel-entrada{
  display:grid; grid-template-columns:1.05fr .95fr;
  width:min(860px,100%);
  background:var(--superficie); border:1px solid var(--linha);
  border-radius:10px; box-shadow:var(--sombra); overflow:hidden;
}
@media (max-width:740px){.painel-entrada{grid-template-columns:1fr}}

.apresentacao{
  background:linear-gradient(160deg, var(--painel) 0%, var(--painel-2) 100%);
  color:var(--painel-tinta);
  padding:34px 32px; display:flex; flex-direction:column; gap:22px;
}
.sobrescrito{
  font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--painel-suave);
}
.apresentacao h1{
  font-family:Newsreader,Georgia,serif; font-weight:400; font-size:31px;
  line-height:1.12; margin:7px 0 0; letter-spacing:-.02em; text-wrap:balance;
}
.apresentacao .intro{
  margin:0; font-size:13px; line-height:1.65; color:var(--painel-suave); max-width:36ch;
}
.apresentacao .intro b{color:var(--painel-tinta); font-weight:500}

/* A escada é a ideia central da aplicação: mostrá-la aqui diz a quem entra
   o que vai encontrar, antes de escrever a password. */
.niveis{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.niveis li{display:grid; grid-template-columns:auto 1fr; gap:11px; align-items:center}
.nivel-forca{display:flex; flex-direction:column; gap:2px}
.nivel-forca span{width:12px; height:2px; background:var(--painel-linha); border-radius:2px}
.nivel-forca span.on{background:var(--acento)}
.niveis .rotulo{font-size:11.5px; line-height:1.3; color:var(--painel-suave)}
.niveis li.forte .rotulo{color:var(--painel-tinta)}

.ressalva{
  margin:0; padding-top:18px; border-top:1px solid var(--painel-linha);
  font-size:11px; line-height:1.55; color:var(--painel-suave);
}

.formulario{
  padding:34px 32px; display:flex; flex-direction:column; gap:16px;
  justify-content:center;
}
.formulario h2{
  font-family:Newsreader,Georgia,serif; font-weight:500; font-size:19px;
  margin:0; letter-spacing:-.01em;
}
.formulario .ajuda{margin:0; color:var(--tinta-suave); font-size:12.5px; line-height:1.6}
.campo{display:flex; flex-direction:column; gap:6px}
.campo label{font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-tenue)}
.campo input{width:100%; padding:9px 12px; font-size:14px}
.formulario button{
  background:var(--acento); border:1px solid var(--acento); color:var(--sobre-acento);
  border-radius:var(--raio); padding:10px 14px; font-size:13.5px; font-weight:500;
}
.formulario button:hover:not([disabled]){background:var(--acento-tinta); border-color:var(--acento-tinta)}
.erro{
  background:var(--nao-fundo); color:var(--nao); border-radius:var(--raio);
  padding:9px 12px; font-size:12.5px; line-height:1.5;
}

/* ---------- barra de topo ---------- */
.topo{
  position:sticky; top:0; z-index:20;
  background:var(--superficie); border-bottom:1px solid var(--linha);
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  padding:12px 22px;
}
.marca{display:flex; flex-direction:column; gap:1px; margin-right:auto}
.marca h1{
  font-family:Newsreader,Georgia,serif; font-weight:500; font-size:20px;
  margin:0; letter-spacing:-.01em;
}
.marca .sub{color:var(--tinta-tenue); font-size:11.5px; letter-spacing:.02em}
.campo-nome{display:flex; align-items:center; gap:8px}
.campo-nome label{color:var(--tinta-suave); font-size:12px; white-space:nowrap}
input#nome{width:170px}
.progresso-topo{display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--tinta-suave)}
.barra{width:110px; height:5px; background:var(--superficie-2); border-radius:3px; overflow:hidden}
.barra i{display:block; height:100%; background:var(--acento); width:0}

/* ---------- estrutura ---------- */
.corpo{display:grid; grid-template-columns:290px minmax(0,1fr); gap:26px; padding:22px; align-items:start}
@media (max-width:900px){.corpo{grid-template-columns:1fr; padding:16px; gap:18px}}

/* ---------- escada de zonas ---------- */
.rail{position:sticky; top:74px; display:flex; flex-direction:column; gap:14px}
@media (max-width:900px){.rail{position:static}}
.rail-titulo{
  font-size:10.5px; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--tinta-tenue); padding-left:2px;
}
.escada{display:flex; flex-direction:column; gap:2px; list-style:none; margin:0; padding:0}
.zona{
  display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:start;
  width:100%; text-align:left; background:none; border:0;
  border-left:2px solid var(--linha); padding:9px 10px; border-radius:0 var(--raio) var(--raio) 0;
}
.zona:hover{background:var(--superficie)}
.zona[aria-current="true"]{background:var(--superficie); border-left-color:var(--acento); box-shadow:var(--sombra)}
.forca{display:flex; flex-direction:column; gap:2px; padding-top:4px}
.forca span{width:13px; height:2.5px; background:var(--linha-forte); border-radius:2px}
.forca span.on{background:var(--acento)}
.zona-nome{font-size:12.5px; line-height:1.35; font-weight:500}
.zona[aria-current="true"] .zona-nome{color:var(--acento-tinta)}
.zona-conta{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--tinta-suave); font-variant-numeric:tabular-nums; padding-top:1px}
.zona-feito{font-size:10.5px; color:var(--tinta-tenue); font-family:"IBM Plex Mono",monospace}

.aviso{
  background:var(--superficie); border:1px solid var(--linha); border-left:2px solid var(--duvida);
  border-radius:0 var(--raio) var(--raio) 0; padding:11px 13px;
  font-size:12px; line-height:1.5; color:var(--tinta-suave);
}
.aviso b{color:var(--tinta); font-weight:600}

/* ---------- painel principal ---------- */
.painel{min-width:0; display:flex; flex-direction:column; gap:16px}
.cabeca h2{
  font-family:Newsreader,Georgia,serif; font-weight:500; font-size:25px;
  margin:0 0 5px; letter-spacing:-.015em; text-wrap:balance;
}
.cabeca p{margin:0; color:var(--tinta-suave); font-size:13.5px; max-width:66ch; line-height:1.6}
.filtros{display:flex; flex-wrap:wrap; gap:7px; align-items:center}
.chips{display:contents}
.chip{
  background:var(--superficie); border:1px solid var(--linha-forte); border-radius:20px;
  padding:4px 11px; font-size:12px; color:var(--tinta-suave);
}
.chip:hover{border-color:var(--acento)}
.chip[aria-pressed="true"]{background:var(--acento-fundo); border-color:var(--acento); color:var(--acento-tinta); font-weight:500}
.chip .n{font-family:"IBM Plex Mono",monospace; opacity:.65; margin-left:4px; font-size:11px}
input#procura{flex:1; min-width:180px}

/* ---------- cartões ---------- */
.lista{display:flex; flex-direction:column; gap:10px; list-style:none; margin:0; padding:0}
.cartao{
  background:var(--superficie); border:1px solid var(--linha); border-radius:var(--raio);
  border-left:3px solid var(--linha-forte); padding:14px 16px;
  display:flex; flex-direction:column; gap:10px;
}
.cartao.decidido-aceite{border-left-color:var(--sim)}
.cartao.decidido-rejeitado{border-left-color:var(--nao)}
.cartao h3{
  font-family:Newsreader,Georgia,serif; font-weight:500; font-size:16.5px; line-height:1.35;
  margin:0; letter-spacing:-.005em; text-wrap:balance;
}
.meta{color:var(--tinta-suave); font-size:12.5px}
.ids{display:flex; flex-wrap:wrap; gap:5px 14px; font-size:11.5px; overflow-x:auto}
.ids span{color:var(--tinta-tenue)}
.ids b{font-weight:500; color:var(--tinta-tenue); letter-spacing:.05em; text-transform:uppercase; font-size:10px; margin-right:4px; font-family:"IBM Plex Sans",sans-serif}
.marcas{display:flex; flex-wrap:wrap; gap:5px}
.marca-chip{
  font-size:10.5px; padding:2px 8px; border-radius:3px; font-weight:500;
  background:var(--superficie-2); color:var(--tinta-suave);
}
.marca-chip.alerta{background:var(--duvida-fundo); color:var(--duvida)}

.autores{
  font-size:12px; color:var(--tinta-tenue); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.ja-visto{
  background:var(--sim-fundo); color:var(--sim); border-radius:var(--raio);
  padding:7px 11px; font-size:12px; font-weight:500;
}

.prova{
  background:var(--superficie-2); border-radius:var(--raio); padding:11px 13px;
  display:flex; flex-direction:column; gap:8px;
}
.prova-titulo{
  font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta-tenue);
}
.prova-razao{font-size:12.5px; color:var(--tinta-suave); line-height:1.55; max-width:70ch}
.provas{display:flex; flex-direction:column; gap:9px; margin:0; padding:0; list-style:none}
.provas li{display:flex; flex-direction:column; gap:2px; padding-left:11px; border-left:1px solid var(--linha-forte)}
.autor{font-size:12.5px; font-weight:500; display:flex; flex-wrap:wrap; gap:7px; align-items:baseline}
.especie{
  font-size:10px; font-weight:500; letter-spacing:.03em;
  color:var(--tinta-tenue); background:var(--superficie);
  border:1px solid var(--linha); border-radius:3px; padding:1px 6px;
}
.ver-mais{
  align-self:flex-start; background:none; border:0; padding:2px 0;
  font-size:11.5px; font-weight:500; color:var(--acento);
  text-decoration:underline; text-underline-offset:2px;
}
.afil-scopus{font-size:11.5px}
.afil-scopus summary{
  cursor:pointer; color:var(--tinta-tenue); font-size:11px;
  font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  padding:4px 0;
}
.afil-scopus summary:hover{color:var(--acento)}
.afil-scopus .afil{font-style:normal; padding-top:4px}
.afil{font-size:12px; color:var(--tinta-suave); line-height:1.45; font-style:italic}
.onde{font-size:11.5px; color:var(--tinta-tenue)}
.mais{font-size:11.5px; color:var(--tinta-tenue)}

.decidir{display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding-top:2px}
.voto{
  border:1px solid var(--linha-forte); background:var(--superficie); border-radius:var(--raio);
  padding:6px 14px; font-size:12.5px; font-weight:500;
}
.voto.sim:hover,.voto.sim[aria-pressed="true"]{background:var(--sim-fundo); border-color:var(--sim); color:var(--sim)}
.voto.nao:hover,.voto.nao[aria-pressed="true"]{background:var(--nao-fundo); border-color:var(--nao); color:var(--nao)}
.nota{flex:1; min-width:170px; font-size:12.5px; resize:vertical; min-height:32px; max-height:120px}
.assinatura{font-size:11.5px; color:var(--tinta-tenue); width:100%}

.paginacao{display:flex; gap:10px; align-items:center; justify-content:center; padding:6px 0 20px; color:var(--tinta-suave); font-size:12.5px}
.vazio{padding:40px 0; text-align:center; color:var(--tinta-tenue); font-size:13.5px}
.estado{font-size:11.5px; color:var(--tinta-tenue); margin-top:7px}
.estado.mau{color:var(--nao)}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}

/* ---------- tabelas ---------- */
/* O contentor rola sozinho: uma tabela larga nunca empurra a página de lado. */
.envolve-tabela{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{border-collapse:collapse; width:100%; font-size:13px}
th,td{text-align:left; padding:7px 10px; border-bottom:1px solid var(--linha); vertical-align:top}
th{
  font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tinta-tenue); border-bottom-color:var(--linha-forte);
  position:sticky; top:0; background:var(--superficie);
}
tr:last-child td{border-bottom:0}
td.n{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--tinta-suave)}

/* ---------- página da base de dados ---------- */
.base{max-width:1100px; margin:0 auto; padding:26px 22px 70px; display:flex; flex-direction:column; gap:30px}
.intro-base h2,.indices h2{
  font-family:Newsreader,Georgia,serif; font-weight:500; font-size:24px;
  margin:0 0 8px; letter-spacing:-.015em;
}
.intro-base p,.indices p{margin:0; color:var(--tinta-suave); font-size:13.5px; max-width:70ch; line-height:1.6}

.fig-base{margin:0}
.fig-base svg{display:block; width:100%; height:auto; color:var(--tinta)}
.fig-base figcaption{font-size:12.5px; color:var(--tinta-tenue); margin-top:10px; max-width:70ch; line-height:1.55}
.d-caixa{fill:var(--superficie); stroke:var(--linha-forte); stroke-width:1}
.d-caixa-ac{fill:var(--acento-fundo); stroke:var(--acento); stroke-width:1.5}
.d-nome{fill:currentColor; font:500 15px "IBM Plex Mono",monospace}
.d-nome-ac{fill:var(--acento-tinta); font:500 17px "IBM Plex Mono",monospace}
.d-num{fill:var(--tinta-suave); font:400 11.5px "IBM Plex Mono",monospace}
.d-peq{fill:var(--tinta-tenue); font:400 11px "IBM Plex Sans",sans-serif}
.d-chave{fill:var(--tinta-tenue); font:500 10px "IBM Plex Mono",monospace}
.d-aresta{stroke:var(--acento); stroke-width:1.6; fill:none}
.d-aresta-fina{stroke:var(--tinta-tenue); stroke-width:1.2; fill:none; stroke-dasharray:4 3}
.d-ponta{fill:var(--tinta-tenue)}
.d-legenda{fill:var(--tinta-tenue); font:400 10.5px "IBM Plex Sans",sans-serif}

.tabela-bloco{
  background:var(--superficie); border:1px solid var(--linha);
  border-radius:var(--raio); padding:18px 20px;
  display:flex; flex-direction:column; gap:10px;
}
.tabela-cab{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap}
.tabela-cab h2{margin:0; display:flex; align-items:baseline; gap:11px; flex-wrap:wrap}
.nome-tabela{font-size:19px; font-weight:500; color:var(--acento-tinta)}
.papel{
  font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta-tenue);
}
.linhas-conta{margin-left:auto; font-size:13px; color:var(--tinta-suave); font-variant-numeric:tabular-nums}
.tabela-desc{margin:0; font-size:13px; color:var(--tinta-suave); max-width:78ch; line-height:1.6}

table.colunas{font-size:12.5px}
table.colunas th{white-space:nowrap}
.col-nome{white-space:nowrap; font-weight:500}
.col-tipo{color:var(--tinta-tenue); font-size:11px; white-space:nowrap}
.col-desc{color:var(--tinta-suave); min-width:200px}
.col-ench{width:132px}
.col-exemplo{
  color:var(--tinta-tenue); font-size:11px; max-width:200px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sinal{
  font-family:"IBM Plex Sans",sans-serif; font-size:9px; font-weight:600;
  letter-spacing:.06em; padding:1px 5px; border-radius:3px; margin-left:6px;
  vertical-align:middle;
}
.sinal.pk{background:var(--acento-fundo); color:var(--acento-tinta)}
.sinal.fk{background:var(--duvida-fundo); color:var(--duvida)}
.sinal.idx{background:var(--superficie-2); color:var(--tinta-tenue)}

.enchimento{display:flex; align-items:center; gap:8px}
.ench-barra{flex:1; height:4px; background:var(--superficie-2); border-radius:2px; overflow:hidden; min-width:44px}
.ench-barra i{display:block; height:100%; background:var(--acento)}
.ench-barra i.baixo{background:var(--duvida)}
.ench-num{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--tinta-suave); font-variant-numeric:tabular-nums}

.resumo-decisoes{display:flex; flex-wrap:wrap; gap:8px}
.resumo-decisoes span{
  background:var(--superficie-2); border-radius:3px; padding:3px 9px;
  font-size:11.5px; color:var(--tinta-suave); font-variant-numeric:tabular-nums;
}