/* FITZONE — Etapa 3: interações da comunidade.
   Usa somente CSS nas 3 páginas; respeita modo claro e movimento reduzido. */
:root { --comunidade-brilho: #a3ef38; }

/* O brilho se forma e desaparece de forma progressiva, sem saltos. */
body.fitzone-perfis :is(.box, .publicacao, .pessoa),
body.fitzone-feed :is(.caixa-social, .post, .comentario),
body.fitzone-historias :is(.historia-card, .painel, .carousel, .vazio) {
  transition: border-color .42s ease, box-shadow .48s cubic-bezier(.22,.61,.36,1),
              transform .48s cubic-bezier(.22,.61,.36,1), background-color .42s ease;
}
@media (hover:hover) and (pointer:fine) {
  body.fitzone-perfis :is(.box, .publicacao, .pessoa):hover,
  body.fitzone-feed :is(.caixa-social, .post, .comentario):hover,
  body.fitzone-historias :is(.historia-card, .painel, .carousel, .vazio):hover {
    border-color: rgba(168,245,59,.94);
    box-shadow: 0 0 0 1px rgba(151,238,44,.28),
                0 0 19px rgba(123,218,41,.19),
                0 16px 38px rgba(0,0,0,.18);
    transform: translateY(-2px);
  }
}
/* Também destaca cartões interativos quando um link/botão recebe foco. */
body.fitzone-perfis :is(.box, .publicacao, .pessoa):focus-within,
body.fitzone-feed :is(.caixa-social, .post, .comentario):focus-within,
body.fitzone-historias :is(.historia-card, .painel, .carousel):focus-within {
  border-color: rgba(168,245,59,.84);
  box-shadow: 0 0 0 1px rgba(151,238,44,.20), 0 0 17px rgba(123,218,41,.15);
}
body.tema-claro.fitzone-perfis :is(.box, .publicacao, .pessoa):hover,
body.tema-claro.fitzone-feed :is(.caixa-social, .post, .comentario):hover,
body.tema-claro.fitzone-historias :is(.historia-card, .painel, .carousel, .vazio):hover {
  border-color:#59a316;
  box-shadow: 0 0 0 1px rgba(80,158,25,.18), 0 0 20px rgba(92,169,29,.14), 0 12px 30px rgba(35,73,19,.10);
}

/* Os números continuam na mesma posição, mas agora são botões acessíveis. */
body.fitzone-perfis .numero-interativo {
  display:block;
  text-align:left;
  color:var(--texto);
  font:inherit;
  cursor:pointer;
  appearance:none;
  transition:border-color .35s ease, box-shadow .4s ease, transform .4s ease, background-color .35s ease;
}
body.fitzone-perfis .numero-interativo span { display:block; }
body.fitzone-perfis .numero-interativo:hover,
body.fitzone-perfis .numero-interativo:focus-visible {
  border-color:var(--verde);
  box-shadow:0 0 0 1px rgba(160,237,46,.22),0 0 19px rgba(137,234,37,.23);
  transform:translateY(-2px);
}
body.fitzone-perfis .numero-interativo:focus-visible {outline:2px solid var(--verde);outline-offset:3px;}

/* Janela real (dialog) para ver os membros da rede de qualquer perfil. */
body.fitzone-perfis .modal-conexoes {
  position:fixed;
  box-sizing:border-box;
  width:min(540px,calc(100vw - 24px));
  max-width:540px;
  max-height:min(82vh,720px);
  margin:auto;
  padding:0;
  overflow:hidden;
  background:var(--painel,#101811);
  color:var(--texto,#f4fff1);
  border:1px solid rgba(151,235,47,.66);
  border-radius:22px;
  box-shadow:0 25px 100px rgba(0,0,0,.60),0 0 38px rgba(130,228,25,.13);
}
body.fitzone-perfis .modal-conexoes::backdrop {background:rgba(0,5,0,.72);backdrop-filter:blur(5px);}
body.fitzone-perfis .conexoes-cabecalho {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:23px 23px 16px;border-bottom:1px solid var(--borda,#30432c);}
body.fitzone-perfis .conexoes-cabecalho h2 {font-size:clamp(21px,4vw,26px);line-height:1.15;margin:0 0 6px;color:var(--texto);}
body.fitzone-perfis .conexoes-subtitulo {font-size:12px;line-height:1.55;color:var(--cinza);margin:0;overflow-wrap:anywhere;}
body.fitzone-perfis .conexoes-fechar {flex:0 0 39px;width:39px;height:39px;border-radius:12px;border:1px solid var(--borda);color:var(--texto);background:var(--campo);font-size:18px;cursor:pointer;transition:border-color .3s ease,background-color .3s ease;}
body.fitzone-perfis .conexoes-fechar:hover {border-color:var(--verde);background:rgba(142,220,38,.15);}
body.fitzone-perfis .conexoes-status {padding:18px 23px;color:var(--cinza);font-size:13px;line-height:1.6;}
body.fitzone-perfis .conexoes-status[hidden] {display:none;}
body.fitzone-perfis .conexoes-lista {display:grid;gap:9px;overflow-y:auto;max-height: min(55vh,460px);padding:15px 18px 20px;overscroll-behavior:contain;}
body.fitzone-perfis .conexao-pessoa {display:flex;align-items:center;gap:11px;min-width:0;border:1px solid var(--borda);border-radius:14px;background:var(--campo);padding:11px;text-decoration:none;color:var(--texto);transition:border-color .35s ease,box-shadow .4s ease,transform .4s ease;}
body.fitzone-perfis a.conexao-pessoa:hover,body.fitzone-perfis a.conexao-pessoa:focus-visible {border-color:var(--verde);box-shadow:0 0 17px rgba(140,230,30,.20);transform:translateY(-1px);}
body.fitzone-perfis .conexao-pessoa.sem-perfil {opacity:.70;}
body.fitzone-perfis .conexao-avatar {width:46px;height:46px;flex:0 0 46px;display:grid;place-items:center;border:2px solid var(--verde);border-radius:50%;background:#1a2b14;color:#b8fa59;overflow:hidden;font-weight:900;font-size:18px;}
body.fitzone-perfis .conexao-avatar img {width:100%;height:100%;object-fit:cover;display:block;}
body.fitzone-perfis .conexao-textos {min-width:0;flex:1;}
body.fitzone-perfis .conexao-textos strong {display:block;font-size:13px;overflow-wrap:anywhere;}
body.fitzone-perfis .conexao-textos small {display:block;font-size:11px;color:var(--cinza);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
body.fitzone-perfis .conexao-abrir {font-size:11px;font-weight:800;color:var(--verde);white-space:nowrap;}
body.fitzone-perfis .conexoes-mais {margin:0 auto 20px;padding:11px 16px;border:1px solid var(--verde);border-radius:999px;background:var(--campo);color:var(--texto);cursor:pointer;font-size:12px;font-weight:800;display:block;}
body.fitzone-perfis .conexoes-mais[hidden]{display:none;}
body.fitzone-perfis .conexoes-mais:hover {background:rgba(139,221,33,.16);}
@media(max-width:480px) {
 body.fitzone-perfis .conexoes-cabecalho {padding:18px 16px 13px;}
 body.fitzone-perfis .conexoes-lista {padding:10px 12px 17px;}
 body.fitzone-perfis .conexao-abrir {font-size:10px;}
}
@media(prefers-reduced-motion:reduce){
 body.fitzone-perfis :is(.box,.publicacao,.pessoa,.numero-interativo,.conexao-pessoa),
 body.fitzone-feed :is(.caixa-social,.post,.comentario),
 body.fitzone-historias :is(.historia-card,.painel,.carousel,.vazio) {transition:none!important;transform:none!important;}
}