/* Rede (T8): seguir, recomendar, avaliações de verdade e notificações. */
.social-linha { margin-top: 6px; font-size: 0.82rem; color: var(--preto-suave); }
.social-linha:empty { display: none; }

.social-recomendado { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--linha); border-radius: 14px; background: var(--fundo); }
.social-recomendado strong { display: block; font-size: 0.86rem; color: var(--preto); margin-bottom: 8px; }
.social-colegas { display: flex; flex-wrap: wrap; gap: 8px; }
.social-colega { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1px solid var(--linha); border-radius: 999px; background: transparent; font: inherit; font-size: 0.8rem; color: var(--preto); cursor: pointer; }
.social-colega:hover { background: var(--selo); }
.social-colega .avatar { width: 26px; height: 26px; font-size: 0.62rem; flex-shrink: 0; }

.social-denunciar, .social-link { margin-top: 8px; padding: 0; border: 0; background: none; font: inherit; font-size: 0.78rem; color: var(--preto-suave); text-decoration: underline; cursor: pointer; }
.social-denunciar:hover, .social-link:hover { color: var(--preto); }
.social-denuncia { margin-top: 10px; }
.social-denuncia-ok { margin-top: 8px; font-size: 0.8rem; color: var(--salvia-texto); }
.social-retirar { display: block; margin: 10px auto 0; }

.social-seguindo { margin: 18px 0; padding: 18px; border: 1px solid var(--linha); border-radius: 16px; background: var(--fundo); }
.social-seguindo h2 { font-size: 1rem; margin-bottom: 10px; }
.social-seguindo-lista { display: flex; flex-direction: column; gap: 4px; }

.social-notificacoes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.social-notificacao { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border: 1px solid var(--linha); border-radius: 14px; background: var(--fundo); }
.social-notificacao > div { flex: 1; min-width: 180px; }
.social-notificacao span { display: block; font-size: 0.9rem; color: var(--preto); }
.social-notificacao small { font-size: 0.76rem; color: var(--preto-suave); }
.social-notificacao.nao-lida { border-color: var(--ouro, var(--linha)); }
.social-notificacao.nao-lida span { font-weight: 700; }
.social-notificacao .social-link { margin-top: 0; }
#notificacoes-conteudo .linha-botoes { margin-bottom: 12px; }