/* Zona de miembro y tablón de la comunidad abierta (desde el 30/10/2026).
   Va DESPUÉS de estilo.css (el style.css de THENEXTONE): solo añade, usa sus variables. */

.zona-nav { display: flex; gap: 22px; margin-inline: auto 0; }
.zona-nav a { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.zona-nav a:hover { color: var(--white); }
@media (max-width: 640px) {
  .zona-nav { gap: 14px; }
  .zona-nav a { font-size: 12.5px; }
}

/* ── Más dentro de THENEXTONE ── */
.zona-mas { margin-top: 56px; }
.zona-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.zona-card {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 24px 22px 20px;
}
.zona-card h3 {
  font-family: var(--display); font-stretch: 118%; font-weight: 800; text-transform: uppercase;
  font-size: 19px; line-height: 1; letter-spacing: .01em; margin: 0;
}
.zona-card > p { color: var(--muted-2); font-size: 14.5px; line-height: 1.6; margin: 0; flex: 1; }
.zona-card-pie { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.zona-card-pie:empty { display: none; }
.zona-eti {
  align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--rojo-texto); background: var(--rojo-tinte);
  border-radius: 100px; padding: 5px 11px;
}
.zona-material { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.zona-material li { display: flex; flex-direction: column; gap: 3px; }
.zona-material b { color: var(--white); font-weight: 600; font-size: 14px; }
.zona-material a { color: var(--rojo-texto); text-decoration: underline; text-underline-offset: 3px; font-size: 13.5px; }

/* ── Tablón ── */
.tab-form {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 24px; margin-bottom: 40px;
}
.tab-form textarea.field { resize: vertical; min-height: 110px; font: inherit; }
.tab-radios { display: flex; gap: 18px; padding: 10px 0; }
.tab-radios label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--white); }
.tab-radios input { accent-color: var(--rojo); width: 17px; height: 17px; }
@media (max-width: 640px) { .tab-form .form-grid { grid-template-columns: 1fr; } }

.tab-mios { margin-bottom: 48px; }
.tab-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; align-items: center; }
.tab-sep { width: 1px; height: 22px; background: var(--border-2); margin: 0 6px; }
.tab-chip {
  font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer;
  background: transparent; border: 1px solid var(--border-2); border-radius: 100px; padding: 8px 14px;
}
.tab-chip:hover { color: var(--white); border-color: var(--muted-2); }
.tab-chip.is-on { color: var(--white); background: var(--rojo); border-color: var(--rojo); }

.tab-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
}
.tab-card {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 20px 20px 16px;
}
.tab-card[hidden] { display: none; }
.tab-cab { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tab-tipo {
  font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  border-radius: 100px; padding: 5px 10px;
}
.tab-ofrezco { color: var(--white); background: var(--rojo); }
.tab-busco { color: var(--rojo-texto); background: var(--rojo-tinte); }
.tab-cat { font-size: 12px; color: var(--muted-2); }
.tab-oculto { font-size: 12px; color: var(--err); }
.tab-destacado { border-color: var(--rojo); box-shadow: inset 0 0 0 1px var(--rojo); }
.tab-destacado-chip {
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--rojo-texto); margin-left: auto;
}
.tab-card h3 { font-size: 17px; line-height: 1.3; margin: 2px 0 0; color: var(--white); overflow-wrap: anywhere; }
.tab-texto {
  color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0; flex: 1;
  white-space: pre-line; overflow-wrap: anywhere;
}
.tab-enlace {
  align-self: flex-start; font-size: 13.5px; color: var(--rojo-texto);
  text-decoration: underline; text-underline-offset: 3px;
}
.tab-contacto { font-size: 13.5px; color: var(--muted); margin: 0; overflow-wrap: anywhere; }
.tab-contacto b { color: var(--white); font-weight: 600; }
.tab-pie {
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center;
  border-top: 1px solid var(--border); padding-top: 12px; margin-top: 4px;
  font-size: 12.5px; color: var(--muted-2);
}
.tab-acciones { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.tab-denunciar {
  font: inherit; font-size: 12px; color: var(--muted-2); background: none; border: 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 0;
}
.tab-denunciar:hover { color: var(--err); }
.tab-vacio { padding: 26px 0; }

/* Las <section> del sitio llevan relleno de bloque de portada: aquí no. */
.zona-mas, .tab-mios, .tab-todos { padding: 0; }
.zona-mas { margin-top: 64px; }
.tab-mios { margin: 8px 0 56px; }