/* ENAPOR Konekta — «Próxima fase»: o que ainda não funciona aparece esbatido, com os dados demonstrativos do conceito visual, e
   um selo que diz porquê (a dica: «Precisa do Agente JUP», «Fase 2 — alertas»). Quem o monta é o nucleo.js (KN.proxima,
   KN.itemProximo e KN.paginaProxima); esta folha só o desenha.

     <div class="proxima">                      (um cartão, um painel; com .proxima-item, uma linha ou um botão)
       <div class="proxima-corpo" inert>…</div>
       <span class="proxima-selo" tabindex="0" data-dica="Precisa do Agente JUP">Próxima fase</span>
     </div>

   O selo fica FORA do corpo: o `inert` tira o corpo ao rato e ao teclado (e ao leitor de ecrã), e o selo tem de continuar a
   poder mostrar a dica. Um ecrã inteiro leva, um a seguir ao outro, a faixa e o corpo:

     <div class="proxima-faixa"><strong>Próxima fase</strong><span>Fase 2 — alertas</span></div>
     <div class="proxima-corpo" inert>…</div> */

.proxima { position: relative; }
/* o pointer-events é para os navegadores sem `inert`: lá, o corpo ao menos não responde ao rato */
.proxima-corpo { opacity: 0.5; filter: grayscale(0.4); user-select: none; pointer-events: none; }

.proxima-selo {
  position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.4em; padding: 0.15rem 0.65rem; border-radius: 999px;
  background: #E8F0FE; color: var(--ativo); border: 1px solid var(--azul-claro);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; cursor: help;
}
.proxima-selo::before { content: ""; width: 0.45em; height: 0.45em; border-radius: 50%; background: var(--azul); }
/* a dica: aparece por baixo do selo, ao passar o rato ou ao dar-lhe o foco */
.proxima-selo[data-dica]::after {
  content: attr(data-dica); position: absolute; right: 0; top: calc(100% + 0.4rem); width: max-content; max-width: 16rem;
  padding: 0.4rem 0.65rem; border-radius: var(--raio-peq); background: var(--marinho); color: #fff;
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0; white-space: normal; box-shadow: var(--sombra-alta);
  opacity: 0; visibility: hidden; transform: translateY(-0.2rem); pointer-events: none;
  transition: opacity var(--dur-rapida), transform var(--dur-rapida), visibility var(--dur-rapida);
}
.proxima-selo[data-dica]:hover::after, .proxima-selo[data-dica]:focus-visible::after { opacity: 1; visibility: visible; transform: none; }

/* uma linha ou um botão: o selo vai no fim dela, em vez de no canto */
.proxima-item { display: flex; align-items: center; gap: 0.6rem; }
.proxima-item > .proxima-corpo { flex: 1; min-width: 0; }
.proxima-item > .proxima-selo { position: relative; top: auto; right: auto; flex: none; }

/* um ecrã inteiro: a faixa de cima diz que é demonstração */
.proxima-faixa {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.7rem; margin-bottom: 1rem; padding: 0.7rem 1rem;
  border: 1px solid var(--azul-claro); border-left: 3px solid var(--azul); border-radius: var(--raio-peq);
  background: var(--correr-fundo); color: var(--texto);
}
.proxima-faixa strong { color: var(--ativo); }

@media (prefers-reduced-motion: reduce) {
  .proxima-selo[data-dica]::after { transform: none; }
}