/* A base de uso no celular vem primeiro: alvos de toque, campos de 16px e
   tipografia mínima. Ela mora em um arquivo só para não nascer tela sem ela. */
@import url('/mobile.css');

/* Mapa de conexões da página principal.
   O canvas se vira com a rede; aqui ficam a moldura, o cartão de hover e a
   faixa de baixo, que é o caminho do celular e da leitura por teclado. */

.mapa-secao { margin: 46px 0 0; }
.mapa-secao[hidden] { display: none; }

.mapa-quadro {
  position: relative;
  border: 1px solid var(--border-soft, #1d222a);
  border-radius: 16px;
  overflow: hidden;
  /* O brilho quente atrás da rede dá profundidade sem competir com os nós. */
  background:
    radial-gradient(680px 380px at 50% 42%, rgba(201, 162, 39, .09), transparent 72%),
    var(--surface, #171a20);
}

/* Altura por viewport, com teto: a rede precisa de área para não virar um
   emaranhado, mas não pode empurrar o resto da página para fora da primeira
   tela num monitor grande. */
#mapa-temas {
  display: block;
  width: 100%;
  height: clamp(340px, 52vh, 520px);
  touch-action: manipulation;
  /* Nada aqui dentro e clicavel: o cursor nao pode prometer o que a animacao
     nao faz. A acao mora no botao da faixa, fora do canvas. */
  cursor: default;
}

/* ---------- cartão do hover ---------- */

.mapa-cartao {
  position: absolute;
  z-index: 3;
  width: 210px;
  background: rgba(12, 13, 16, .97);
  border: 1px solid var(--border, #262b34);
  border-radius: 11px;
  padding: 11px 12px;
  pointer-events: none; /* o cartão não pode roubar o hover do próprio nó */
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
}
.mapa-cartao[hidden] { display: none; }

.mapa-cartao .topo { display: flex; align-items: center; gap: 9px; }
.mapa-cartao img, .mapa-cartao .sem-foto {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  object-fit: cover; background: var(--surface-2, #1e222a);
}
.mapa-cartao .sem-foto {
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-faint, #6b7484); font-size: 14px; font-weight: 600;
}
.mapa-cartao b {
  display: block; color: var(--ink, #e8eaf0);
  font-size: 13.5px; font-weight: 640; letter-spacing: -.01em;
}
.mapa-cartao small { display: block; color: var(--accent, #c9a227); font-size: 11.5px; margin-top: 1px; }
.mapa-cartao .temas {
  margin-top: 8px; color: var(--ink-dim, #9aa3b2);
  font-size: 12px; line-height: 1.45;
}
.mapa-cartao .dica {
  margin-top: 7px; padding-top: 7px;
  border-top: 1px solid var(--border-soft, #1d222a);
  color: var(--ink-faint, #6b7484); font-size: 11.5px; line-height: 1.4;
}

/* ---------- faixa de baixo ---------- */

/* No celular não existe hover, então esta faixa é a interface de verdade: diz
   qual tema está aceso e traz o botão que abre a listagem. */
.mapa-faixa {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  min-height: 40px; padding: 10px 14px;
  border-top: 1px solid var(--border-soft, #1d222a);
  background: rgba(0, 0, 0, .22);
}
.mapa-faixa b { color: var(--ink, #e8eaf0); font-size: 14px; font-weight: 640; }
.mapa-faixa .dica { color: var(--ink-faint, #6b7484); font-size: 12.5px; }
.mapa-faixa .ver {
  margin-left: auto;
  background: var(--accent, #c9a227); color: #14161b;
  border-radius: 8px; padding: 7px 14px;
  font-size: 12.5px; font-weight: 640; text-decoration: none;
  /* 40px de alvo: abaixo disso o dedo erra. */
  min-height: 34px; display: inline-flex; align-items: center;
}
.mapa-faixa .ver:hover { filter: brightness(1.06); }

.mapa-legenda {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-top: 10px; color: var(--ink-faint, #6b7484); font-size: 12px;
}
.mapa-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.mapa-legenda i {
  width: 11px; height: 11px; border-radius: 50%; font-style: normal;
  border: 1px solid rgba(154, 163, 178, .55);
}
.mapa-legenda i.bloqueado { border-style: dashed; }
.mapa-legenda i.nucleo {
  border-color: var(--accent, #c9a227);
  background: rgba(201, 162, 39, .18);
}

@media (max-width: 620px) {
  #mapa-temas { height: clamp(300px, 62vh, 420px); }
  .mapa-cartao { width: 180px; }
  .mapa-faixa .ver { margin-left: 0; width: 100%; justify-content: center; }
}