/* ═══ Foro (R-43) ═════════════════════════════════════════════════════
   Portada (categorías), categoría (hilos y nuevo hilo), hilo (mensajes,
   respuesta, moderación) y búsqueda. Compone los bloques de base.css
   (card, badge, callout, field, dialog) y el texto con formato de
   rich-text.css.
   Colores con la regla de la rareza: STAFF azul, VIP dorado, avisos sin
   leer en naranja (lo tuyo pendiente), la página actual en dorado (como la
   sección actual del menú). Lo demás, blanco o gris.
   Mobile-first a 390 px: nada se sale de la pantalla (citas, links largos
   e imágenes se achican o cortan línea). */

/* ── Estructura común ─────────────────────────────────────────────── */
.forum-back {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  margin-top: var(--space-xs);
}

.forum-toolbar,
.forum-thread-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}
.forum-toolbar { margin-top: var(--space-md); }
.forum-thread-tools { margin-top: var(--space-md); }
.forum-thread-tools .forum-toolbar { margin-top: 0; }

.forum-section { margin-top: var(--space-lg); }

/* Etiqueta neutra (fijado, cerrado, oculta): no es un distintivo de rareza */
.forum-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3xs) var(--space-xs);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xs);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-label);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Portada: categorías ──────────────────────────────────────────── */
.forum-categories {
  display: grid;
  gap: var(--space-md);
}
.forum-category {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-xs);
}
.forum-category:hover { background: var(--color-surface-raised); }
.forum-category__name { overflow-wrap: anywhere; }
.forum-category__link {
  color: inherit;
  text-decoration: none;
}
/* Toda la tarjeta lleva a la categoría; el link es uno solo (el título) */
.forum-category__link::after {
  content: '';
  position: absolute;
  inset: 0;
}
.forum-category__meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.forum-category__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

/* ── Lista de hilos (categoría y resultados de búsqueda) ───────────── */
.forum-threads {
  display: grid;
  gap: var(--space-xs);
}
.forum-thread {
  position: relative;
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
}
.forum-thread:hover { background: var(--color-surface-raised); }
.forum-thread--pinned { border-left: var(--accent-border-width) solid var(--color-border-control); }
.forum-thread__main {
  display: grid;
  gap: var(--space-2xs);
  min-width: 0;
}
.forum-thread__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}
.forum-thread__title {
  font-size: var(--font-size-heading-sm);
  overflow-wrap: anywhere;
}
.forum-thread__link {
  color: inherit;
  text-decoration: none;
}
.forum-thread__link::after {
  content: '';
  position: absolute;
  inset: 0;
}
.forum-thread__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--font-size-md);
  overflow-wrap: anywhere;
}
.forum-thread__meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  overflow-wrap: anywhere;
}
.forum-thread__replies {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.forum-thread__count {
  color: var(--color-data);
  font-family: var(--font-display);
  font-size: var(--font-size-heading-sm);
  font-weight: var(--font-weight-heavy);
  font-variant-numeric: tabular-nums;
}

/* ── Paginador: links reales, la página actual en dorado ──────────── */
.forum-pager { margin-block: var(--space-sm); }
.forum-pager__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
}
.forum-pager__link {
  display: inline-grid;
  place-items: center;
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  padding: 0 var(--space-xs);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}
.forum-pager__link:hover { border-color: var(--color-data); }
.forum-pager__link[aria-current="page"] {
  border-color: var(--color-valuable-border);
  color: var(--color-valuable);
}
.forum-pager__gap { color: var(--color-text-muted); }

/* ── Hilo: encabezado, moderación y aviso de cerrado ──────────────── */
/* Los títulos de hilo son largos: un escalón menos que el h1 de una sección */
.forum-thread-title { font-size: var(--font-size-heading-xl); }

.forum-moderation {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.forum-locked { margin-top: var(--space-md); }

/* ── Mensajes ─────────────────────────────────────────────────────── */
.forum-posts {
  display: grid;
  gap: var(--space-sm);
}
.forum-post {
  display: grid;
  gap: var(--space-sm);
  min-width: 0;
  padding: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
/* El mensaje entero cambia, no solo el distintivo: en un hilo largo se nota quién habla */
.forum-post--staff { border-left: var(--accent-border-width) solid var(--color-data); }
.forum-post--vip { border-left: var(--accent-border-width) solid var(--color-valuable-border); }
.forum-post--deleted {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-style: italic;
}
/* El mensaje al que lleva un link (#post-N o un aviso) */
.forum-post--highlight { border-color: var(--color-data); }

.forum-post__header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-sm);
}
.forum-post__author {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  min-width: 0;
}
.forum-post__name {
  font-weight: var(--font-weight-bold);
  overflow-wrap: anywhere;
}
.forum-post__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.forum-post__permalink {
  display: inline-grid;
  place-items: center;
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  color: var(--color-text-muted);
  text-decoration: none;
}
.forum-post__permalink:hover { color: var(--color-data); }

/* Imágenes, citas y links largos no pueden ensanchar la página a 390 px */
.forum-post__body,
.forum-editor__preview { min-width: 0; }
.forum-post__body .rich-img,
.forum-editor__preview .rich-img { max-width: 100%; }
.forum-post__body .rich-img img,
.forum-editor__preview .rich-img img {
  width: auto;
  max-height: var(--post-image-max-height);
  border: 1px solid var(--color-border);
}
.forum-post__body .rich-quote__head,
.forum-editor__preview .rich-quote__head { flex-wrap: wrap; }

.forum-post__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  margin-inline: calc(-1 * var(--space-sm));
}
/* Acción de texto: discreta pero de 44 px para el dedo */
.forum-post__action {
  min-height: var(--touch-target);
  padding: 0 var(--space-sm);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text-muted);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}
.forum-post__action:hover { background: var(--color-surface-raised); color: var(--color-text); }
.forum-post__action:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
/* Ya lo agradeciste: verde, lo bueno */
.forum-post__action[aria-pressed="true"] { color: var(--color-success); }
.forum-post__thanks {
  padding: 0 var(--space-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.forum-edit {
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}

/* ── Escribir: nuevo hilo y respuesta ─────────────────────────────── */
.forum-composer__hint {
  margin: var(--space-xs) 0 var(--space-sm);
  color: var(--color-text-muted);
}
.forum-composer__guest {
  display: grid;
  gap: var(--space-xs);
  justify-items: start;
}
.forum-composer__form { margin-top: var(--space-sm); }

/* ── Editor: barra de formato, vista previa y @menciones ──────────── */
.forum-editor {
  display: grid;
  gap: var(--space-xs);
  min-width: 0;
}
.forum-editor__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}
.forum-editor__tool {
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  padding: 0 var(--space-sm);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-md);
}
.forum-editor__tool:hover { border-color: var(--color-data); }
.forum-editor__tool:disabled { opacity: var(--opacity-disabled); cursor: progress; }
.forum-editor__tool--preview[aria-pressed="true"] {
  border-color: var(--color-data);
  color: var(--color-data);
}
.forum-editor__preview {
  min-height: var(--textarea-min-height);
  padding: var(--space-sm);
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}
.forum-editor__mentions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}
.forum-editor__mention {
  min-height: var(--touch-target);
  padding: 0 var(--space-sm);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-data);
  font-weight: var(--font-weight-semibold);
}

/* ── Búsqueda ─────────────────────────────────────────────────────── */
.forum-search__row {
  display: flex;
  gap: var(--space-xs);
}
.forum-search__row .field__control { flex: 1; min-width: 0; }
.forum-search__results { margin-top: var(--space-lg); }
/* El término encontrado, en azul (es un dato), sin fondo de resaltador */
.forum-search__match {
  background: none;
  color: var(--color-data);
  font-weight: var(--font-weight-bold);
}

/* ── Avisos (diálogo) ─────────────────────────────────────────────── */
.forum-notifications__body {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}
.forum-notifications__read-all { justify-self: start; }
.forum-notifications__empty { color: var(--color-text-muted); }
.forum-notifications__list {
  display: grid;
  border-top: 1px solid var(--color-border);
}
.forum-notification {
  display: block;
  min-height: var(--touch-target);
  padding: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--font-size-md);
  text-decoration: none;
  overflow-wrap: anywhere;
}
a.forum-notification:hover { background: var(--color-surface-raised); }
.forum-notification strong,
.forum-notification em { color: var(--color-text); }
/* Sin leer: lo tuyo pendiente, en naranja */
.forum-notification--unread {
  background: var(--color-attention-surface);
  border-left: var(--accent-border-width) solid var(--color-attention);
}
.forum-notification__date {
  display: block;
  margin-top: var(--space-3xs);
  font-size: var(--font-size-sm);
}

@media (min-width: 700px) {
  .forum-categories { grid-template-columns: repeat(2, 1fr); }
  /* Las respuestas a la derecha, como columna de números */
  .forum-thread {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-md);
  }
  .forum-thread__replies {
    display: grid;
    justify-items: end;
  }
  .forum-thread__count { font-size: var(--font-size-heading-md); }
  .forum-post { padding: var(--space-md) var(--space-lg); }
}

@media (min-width: 1100px) {
  .forum-categories { grid-template-columns: repeat(3, 1fr); }
}