/* Amigos, perfis de outras pessoas, privacidade e exclusão de conta (js/social/*.mjs). Só variáveis do projeto: vale no tema claro e no escuro. */

/* texto de apoio (dicas e avisos): menor, cor discreta */
.soc-dica{margin:6px 0 0;font-size:.88rem;line-height:1.45;color:var(--mut);overflow-wrap:anywhere}
.soc-dica a,.vazia .soc-dica a{color:var(--roxo);font-weight:700}
.soc-rodape{margin:18px 0 0}
#bPrivacidade .chk{margin-top:8px}
#bPrivacidade .soc-dica{margin:8px 0 0 26px}

/* busca por nome de usuário */
.soc-busca{display:grid;gap:8px;max-width:520px}
.soc-busca .row input{flex:1;min-width:0}
.soc-res{margin-top:14px}
.soc-res>.soc-dica{margin:0 0 8px}

/* seções de Meus Amigos e do perfil de outra pessoa */
.soc-secao{margin:0 0 22px}
.soc-secao h3{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:1.2rem;line-height:1.25}
.soc-secao h3:focus{outline:none}
.soc-secao h3:focus-visible{outline:3px solid var(--roxo);outline-offset:3px;border-radius:8px}
.soc-n{display:inline-grid;place-items:center;min-width:1.7em;height:1.7em;padding:0 .5em;border-radius:999px;background:var(--roxo-soft);color:var(--roxo);font:700 .78rem/1 var(--f-body)}

/* uma pessoa por cartão: foto + nome (link para o perfil) e os botões */
.soc-lista{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:760px}
.soc-cartao{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;background:var(--card);border:1.5px solid var(--bd);border-radius:16px;padding:12px 14px}
.soc-quem{display:flex;align-items:center;gap:12px;flex:1 1 220px;min-width:0;color:var(--fg);text-decoration:none;border-radius:12px}
.soc-quem:hover .soc-nome{text-decoration:underline;text-underline-offset:3px}
.soc-quem .av{width:48px;height:48px;font-size:1.1rem}
.soc-nome{font-weight:700;font-size:1.02rem;line-height:1.25;overflow-wrap:anywhere;min-width:0}
.soc-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.soc-det{font-size:.84rem;line-height:1.3;color:var(--mut)}
.soc-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.soc-acoes .botao{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 14px;border-radius:12px;font-weight:700;text-decoration:none;font-size:.98rem}
.soc-estado{font-size:.88rem;font-weight:700;color:var(--verde)}

/* perfil de outra pessoa */
.soc-perfil{margin:0 0 18px}
.soc-eu .quemsou h3{font-size:1.5rem;overflow-wrap:anywhere}
.soc-eu .soc-acoes{margin-top:2px}
.soc-pins-n{margin:0;font-size:1.05rem}
.soc-pins-n b{font-size:1.4rem;color:var(--roxo)}
.soc-dash:empty{display:none}

/* Mural: nome e foto de quem comentou (link para o perfil) */
.mp-c-quem{display:inline-flex;align-items:center;gap:7px;min-width:0;color:inherit;text-decoration:none;border-radius:10px}
a.mp-c-quem:hover .mp-c-n{text-decoration:underline;text-underline-offset:3px}
.mp-c-quem .mp-c-av{width:26px;height:26px;font-size:.75rem}
.mp-c-cab .mp-c-n{overflow-wrap:anywhere}
.mp-ciente{margin:0;white-space:pre-line;overflow-wrap:anywhere;line-height:1.5}

@media (max-width:480px){
  .soc-cartao{padding:12px}
  .soc-acoes{width:100%}
  .soc-acoes button,.soc-acoes .botao{flex:1 1 140px}
  .soc-estado{flex:1 1 100%}
  .soc-eu .quemsou{flex-basis:100%}
}

/* abas do perfil (Perfil, Dashboard, Pins, Meus Amigos): no celular encolhem para caber sem rolagem lateral */
@media (max-width:480px){
  .abas{gap:0}
  .abas a{flex:1 1 auto;min-width:0;padding:10px 6px;text-align:center;font-size:.9rem}
}