/* ══ Grafo social: Configuración → Seguidores y modal de listas del perfil público ══

   POR QUE ESTE ARCHIVO EXISTE Y NO VIVE EN app.css:
   el marcado social lo pintan DOS bases distintas —`base.html` (app privada) y
   `perfil_public_base.html` (perfil público, que NO extiende base.html y no carga
   app.css)—. Mientras estas reglas vivieron en app.css, el perfil público tenía el
   HTML y el JS correctos pero ni una regla: los contadores salían con el estilo por
   defecto del navegador (cajas blancas) y el modal se pintaba como un div normal
   1600px por debajo del scroll, así que el clic "no hacía nada".

   REGLA: toda plantilla que use clases `soc-*` o `button.stat-box` tiene que
   enlazar ESTE archivo. Lo vigila `SocialCssLlegaATodasLasBasesTests`. */

.soc-tabs { display:flex; gap:6px; border-bottom:1px solid var(--border); margin-bottom:14px; }
.soc-tab { background:none; border:none; padding:8px 12px; color:var(--text-muted);
  font-size:.82rem; border-bottom:2px solid transparent; cursor:pointer; }
/* --cyan, no --accent: ese token no existe en tema.css y el subrayado de la
   pestaña activa caía a currentColor (blanco) en vez de al cian de la marca. */
.soc-tab.active { color:var(--text-main); border-bottom-color:var(--cyan); font-weight:700; }
.soc-panel { display:none; }
.soc-panel.active { display:block; }
.soc-lista { display:flex; flex-direction:column; gap:8px; }
.soc-fila { display:flex; align-items:center; gap:10px; padding:8px;
  border:1px solid var(--border); border-radius:10px; }
.soc-avatar { width:36px; height:36px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.soc-nombre { flex:1; font-size:.84rem; color:var(--text-main); text-decoration:none; }
.soc-acciones { display:flex; gap:6px; flex-wrap:wrap; }
.soc-vacio { font-size:.78rem; color:var(--text-muted); padding:14px; text-align:center; }

/* Los contadores de seguidores son <button> para que respondan a teclado y lector
   de pantalla; sin este reset heredan el chrome gris del navegador. */
button.stat-box { background:none; border:none; padding:0; cursor:pointer; font:inherit; color:inherit; }
button.stat-box:hover .stat-val,
button.stat-box:focus-visible .stat-val { color:var(--cyan-hover); }
button.stat-box:hover .stat-lbl,
button.stat-box:focus-visible .stat-lbl { color:var(--text-main); }
button.stat-box:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px; }

.soc-modal { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:1080;
  display:flex; align-items:center; justify-content:center; padding:16px; }
.soc-modal[hidden] { display:none; }
.soc-modal-caja { background:var(--bg-elevated); border:1px solid var(--border);
  border-radius:14px; width:min(420px, 100%); max-height:70vh; overflow:auto; padding:14px; }
.soc-modal-cab { display:flex; justify-content:space-between; align-items:center;
  font-weight:700; margin-bottom:10px; }
.soc-modal-cab button { background:none; border:none; color:var(--text-muted); cursor:pointer; }
@media (max-width: 480px) {
  .soc-fila { flex-wrap:wrap; }
  .soc-nombre { flex-basis:100%; }
  .soc-acciones { width:100%; justify-content:flex-end; }
}