/* Efeitos partilhados: néon, vidro e realce de linha.

   Gramática trazida do projeto Sardal (frontend/src/styles/effects.css):
   um só acento conduz tudo, exposto como --neon-rgb, e as receitas são
   números validados uma vez e reutilizados — nunca reinventados caso a
   caso. Os parâmetros por tema estão em css/tokens.css.

   O que o Sardal faz e que aqui se mantém:
   - o néon muda QUATRO coisas ao mesmo tempo (anel, fundo tintado, brilho,
     cor do texto), porque é o conjunto que lê como "isto está aceso";
   - a intensidade do brilho codifica hierarquia (o botão principal brilha
     mais do que uma pill de navegação);
   - há uma variante só-texto, para links onde uma caixa ficaria pesada;
   - prefers-reduced-motion desliga as transições, não os estados.

   O que muda, e porquê: o acento é o azul 215deg que o produto usa, não o
   do Sardal. A app tem uma regra de cor (ver tokens.css) em que os dados
   são donos do verde->ambar->vermelho do custo; um segundo acento punha o
   brilho a competir com o significado do preço.

   E daí sai a restrição que mantém os dois sistemas separados: o brilho é
   linguagem de CHROME, nunca de dados. Brilha o que se clica. Não brilham
   o número do preço nem a sua barra de custo, os hexágonos, a legenda do
   heatmap nem os pontos de estado das tomadas. */

/* ── Néon em controlos de contorno (ghost): a receita completa ───────────── */
.neon-hover {
  transition: background-color 0.2s var(--ease-out), border-color 0.2s var(--ease-out),
    box-shadow 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.neon-hover:hover,
.neon-hover:focus-visible {
  border-color: rgba(var(--neon-rgb), var(--neon-ring));
  background-color: rgba(var(--neon-rgb), var(--neon-tint));
  box-shadow: 0 0 0 1px rgba(var(--neon-rgb), 0.45), var(--neon-glow);
  color: var(--neon-ink);
}

/* ── Néon no botão cheio (o acento já é o fundo) ──────────────────────────
   O botão principal do mapa ("Mais baratos") é preenchido com o acento, por
   isso não pode receber a receita de contorno: tintar o fundo por cima do
   próprio acento clarearia o botão em vez de o acender. Aqui o fundo
   mantém-se e o que acende é o halo à volta — e este é o elemento que
   brilha mais forte de toda a app, por ser a ação principal. */
.neon-solid {
  transition: background-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.neon-solid:hover,
.neon-solid:focus-visible {
  background-color: var(--color-accent-hover);
  box-shadow: 0 0 0 1px rgba(var(--neon-rgb), 0.55), var(--neon-glow-strong);
}

/* ── Pill de navegação acesa ──────────────────────────────────────────────
   Para o item ativo/sob o rato da barra inferior e do menu. Brilho mais
   contido que o do botão principal, de propósito: navegação não compete com
   a ação principal. */
.neon-pill {
  transition: background-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out),
    color 0.2s var(--ease-out);
}
.neon-pill:hover,
.neon-pill:focus-visible,
.neon-pill.is-on,
.neon-pill[aria-expanded="true"] {
  background-color: rgba(var(--neon-rgb), var(--neon-tint));
  color: var(--neon-ink);
  box-shadow: var(--neon-glow);
}

/* ── Néon só no texto ─────────────────────────────────────────────────────
   Para links de texto simples, onde uma caixa à volta ficaria pesada: a cor
   e o brilho vão para as próprias letras. */
.neon-text-hover {
  transition: color 0.2s var(--ease-out), text-shadow 0.2s var(--ease-out);
}
.neon-text-hover:hover,
.neon-text-hover:focus-visible {
  color: var(--neon-ink);
  text-shadow: 0 0 8px rgba(var(--neon-rgb), 0.55), 0 0 20px rgba(var(--neon-rgb), 0.3);
}

/* ── Vidro ────────────────────────────────────────────────────────────────
   Painéis translúcidos sobre o mapa: o mapa continua a ler-se por trás, o
   que diz ao utilizador que o painel está em cima do sítio e não noutro
   ecrã. O fio de borda clara é o que separa o painel do mapa quando o tile
   por baixo é claro — sombra sozinha desaparece aí. */
.glass {
  background: rgba(var(--glass-rgb), var(--glass-alpha));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  box-shadow: 0 18px 50px -24px rgba(10, 24, 28, 0.45);
}

/* Sem suporte de backdrop-filter o painel ficaria translúcido sem desfocar,
   e o mapa leria-se através do texto — aí volta a ser opaco. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--color-bg-elevated); }
}

/* ── Realce de linha numa lista ───────────────────────────────────────────
   Para linhas de resultados: tinte leve e um empurrão de 2px, em vez de
   elevar (uma linha dentro de uma lista não flutua). */
.row-hover {
  transition: background-color 0.18s var(--ease-out), transform 0.18s var(--ease-out);
}
.row-hover:hover,
.row-hover:focus-visible {
  background-color: rgba(var(--neon-rgb), calc(var(--neon-tint) * 0.6));
  transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
  .row-hover,
  .row-hover:hover,
  .row-hover:focus-visible {
    transform: none;
  }
}