/* =====================================================================
   Comunidad (solo comunidad.html). Reutiliza tarjetas, botones y filtros de panel.css.
   ===================================================================== */

.community-head { margin-bottom: 28px; }
.community-intro { margin: 10px 0 0; color: var(--gray-300); max-width: 60ch; }
.community-own {
  display: inline-block;
  margin: 16px 0 0;
  padding: 8px 14px;
  border: 1px solid var(--gray-700);
  border-radius: 6px;
  color: var(--gray-300);
  font-size: 0.9rem;
}
.community-own[hidden] { display: none; }

/* Filtros */
.community-filters {
  display: flex;
  align-items: center;
  gap: 12px 20px;
  flex-wrap: wrap;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(20, 20, 20, 0.85);
}
.community-search { flex: 1 1 280px; max-width: 420px; }
.community-search input { width: 100%; }

.community-bar { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 18px 0 12px; }
.community-count { margin: 0; color: var(--gray-300); }

/* Rejilla de tarjetas */
.members {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.members .empty { grid-column: 1 / -1; padding: 24px 0; }

.member { display: flex; flex-direction: column; gap: 14px; }
.member--own { border-top-color: var(--gray-300); }
.member-top { display: flex; gap: 14px; align-items: center; min-width: 0; }
.member-avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: var(--gray-700);
  color: var(--gray-100);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  overflow: hidden;
}
.member-avatar img { width: 100%; height: 100%; object-fit: cover; }
.member-id { min-width: 0; }
.member-name {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--gray-100);
  word-break: break-word;
}
.member-verified { height: 20px; width: auto; }
.tag--own { border-color: var(--gray-300); color: var(--gray-100); font-size: 0.7rem; }
.member-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0 0; font-size: 0.85rem; color: var(--gray-500); }
.member-meta a { color: var(--gold); }
.member-meta a:hover { color: var(--gold-light); }
.member-own-text { margin: 0; color: var(--gray-500); font-size: 0.9rem; }

.member-tags { display: flex; gap: 6px; flex-wrap: wrap; }

.member-stats { display: flex; gap: 28px; margin: 0; }
.member-stats dt { color: var(--gray-500); font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.member-stats dd { margin: 2px 0 0; color: var(--gray-100); font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; }

/* Naves: tres huecos iguales con el plano dorado y el nombre debajo */
.member-ships {
  list-style: none;
  margin: 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--gray-800);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.member-ship { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.member-ship .ship-hex { max-width: 100%; }   /* hexágono dorado: styles.css */
.member-ship-name { color: var(--gray-500); font-size: 0.75rem; text-align: center; line-height: 1.2; }

/* Acciones: mensaje destacado, reportar discreto (a la derecha, gris, sin borde) */
.member-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin-top: auto; padding-top: 4px; }
.member-top .btn-report { margin: -6px -8px 0 auto; align-self: flex-start; flex-shrink: 0; }
.member-request { margin: 0; padding: 8px 10px; border-left: 2px solid var(--gold); background: rgba(201, 162, 39, 0.06); color: var(--gray-100); font-size: 0.88rem; }
.member-request[hidden] { display: none; }
/* Amistad */
.friend-ctl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.friend-ctl .btn-sm { padding: 7px 12px; }
.friend-state { color: var(--gray-300); font-size: 0.85rem; }
.friend-state.is-friend { color: var(--gold-light); font-family: var(--font-display); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.82rem; }
.friend-state:focus { outline: none; }
.member-actions .btn-gold { padding: 8px 16px; font-size: 0.85rem; }
.btn-report {
  padding: 4px 2px;
  border: none;
  background: none;
  color: var(--gray-500);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}
.btn-report { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 4px; font-size: 1rem; }
.btn-report::before { content: "⚑"; }
.btn-report.is-reported { color: #e05a5a; }
.btn-report:hover:not(:disabled) { color: #e05a5a; }
.btn-report:focus-visible { outline: 2px solid var(--gray-100); outline-offset: 2px; border-radius: 3px; }
.btn-report:disabled { cursor: default; opacity: 0.7; }


@media (max-width: 760px) {
  .community-search { max-width: none; flex-basis: 100%; }
  .members { grid-template-columns: 1fr; }
}
.community-friends[hidden] { display: none; }


/* Especialidad principal: su color arriba (el de su tipo de operación) y su icono en la etiqueta */
.member.has-main { border-top-color: var(--t); }
.member-main { display: inline-flex; align-items: center; gap: 6px; border-color: color-mix(in srgb, var(--t, var(--gold)) 70%, transparent); }
.member-main-ico { width: 16px; height: 16px; object-fit: contain; }
.member-main-ico[hidden] { display: none; }