/* ============================================================================
   COMUNIDAD — foro
   ----------------------------------------------------------------------------
   Se lee como un foro, no como un blog de preguntas: el listado es una tabla
   con columnas de estadísticas y última actividad, y el hilo son mensajes
   numerados con el avatar en una columna a la izquierda. Esas tres señales
   (contadores, «último mensaje» y #N) son las que hacen que alguien reconozca
   un foro de un vistazo.

   Densidad de página de datos: metadatos a 12.5px, filas apretadas, más ítems
   por pantalla. El acento se reserva a enlaces, CTA y chip activo.
   ============================================================================ */

.fo { max-width: var(--container, 1200px); margin: 0 auto; padding: var(--space-8) var(--space-6) var(--space-16); }
.fo--narrow { max-width: 820px; }

/* ── Migas ───────────────────────────────────────────────────────────────── */
.fo-bc { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); font-size: 12.5px; color: var(--ink-faint); }
.fo-bc a { color: var(--ink-faint); text-decoration: none; }
.fo-bc a:hover { color: var(--accent); }
.fo-bc span[aria-current] { color: var(--ink-soft); }
.fo-bc__sep { color: var(--border-strong); }

/* ── Cabecera ────────────────────────────────────────────────────────────── */
.fo-head { margin-bottom: var(--space-6); }
.fo-head__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.fo-head__lead { max-width: 62ch; margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }

/* Recuento de hilos y mensajes. En un foro esto es parte de la identidad de la
   página: dice de un vistazo cuánta actividad hay. */
.fo-counts {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  margin-top: var(--space-4); font-size: 13px; color: var(--ink-faint);
}
.fo-counts b { font-family: var(--font-display); font-weight: 700; color: var(--ink); }

/* ── Barra de acciones ───────────────────────────────────────────────────── */
.fo-bar {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.fo-bar__filters { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; }

/* Chip de filtro: el activo usa --accent-soft como color de ESTADO. */
.fo-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  font-size: 12.5px; font-weight: 500;
  color: var(--ink-soft); text-decoration: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 99px;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.fo-chip:hover { border-color: var(--border-strong); color: var(--ink); }
.fo-chip.is-on { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent); font-weight: 600; }

/* ── Tabla de hilos ──────────────────────────────────────────────────────── */
.fo-table {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.fo-list { margin: 0; padding: 0; list-style: none; }

.fo-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px 84px 168px;
  align-items: center;
  gap: var(--space-4);
  padding: 14px var(--space-5);
  border-bottom: 1px solid var(--border);
}
.fo-row:last-child { border-bottom: 0; }

/* Cabecera de columnas: lo que convierte una lista en una tabla de foro. */
.fo-row--head {
  padding-block: 10px;
  background: var(--surface-2);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint);
}
.fo-row--head > * { text-align: center; }
.fo-row--head > :first-child { text-align: left; }
.fo-row--head > :last-child { text-align: right; }

.fo-row--thread { transition: background var(--dur-fast) var(--ease-out); }
.fo-row--thread:hover { background: var(--surface-2); }

/* ── Celda del tema ──────────────────────────────────────────────────────── */
.fo-topic { display: flex; align-items: flex-start; gap: 12px; min-inline-size: 0; }

.fo-topic__av { inline-size: 36px; block-size: 36px; border-radius: 50%; object-fit: cover; flex: none; }
.fo-topic__av--initials {
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--ink-faint); font-size: 12px; font-weight: 600;
}

.fo-topic__main { min-inline-size: 0; }
.fo-topic__title {
  display: block; margin: 0;
  font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em;
  color: var(--ink); text-decoration: none;
}
.fo-row--thread:hover .fo-topic__title { color: var(--accent); }
.fo-topic__by { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-faint); }

/* Estado del hilo. Resuelto en --success; sin responder NO va en rojo: la
   ausencia de respuesta no es un error, solo información. */
.fo-flags { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.fo-flag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 99px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.fo-flag svg { inline-size: 11px; block-size: 11px; }
.fo-flag--solved { background: var(--success-soft); border: 1px solid var(--success-border); color: var(--success); }
.fo-flag--open { background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-faint); }

/* ── Celdas de cifras ────────────────────────────────────────────────────── */
.fo-stat { text-align: center; }
.fo-stat__n { display: block; font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.fo-stat__label { display: block; margin-top: 1px; font-size: 10.5px; color: var(--ink-faint); }

/* ── Celda de última actividad ───────────────────────────────────────────── */
.fo-last { text-align: right; font-size: 12.5px; line-height: 1.45; min-inline-size: 0; }
.fo-last__who { display: block; color: var(--ink-soft); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fo-last__when { display: block; color: var(--ink-faint); }
.fo-last--never { color: var(--ink-faint); }

/* ── Vacío ───────────────────────────────────────────────────────────────── */
.fo-empty { padding: var(--space-10) var(--space-6); text-align: center; }
.fo-empty__title { margin: 0 0 6px; font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--ink); }
.fo-empty__text { max-width: 46ch; margin: 0 auto var(--space-5); font-size: 14px; line-height: 1.6; color: var(--ink-faint); }

/* ── Paginación ──────────────────────────────────────────────────────────── */
.fo-pager { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-6); }
.fo-pager__pos { font-family: var(--font-display); font-size: 12.5px; font-weight: 600; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.fo-link { font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }
.fo-link:visited { color: var(--accent); }
.fo-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================================
   HILO
   ============================================================================ */

.fo-thread__head { margin-bottom: var(--space-5); }
.fo-thread__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.fo-thread__meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: 10px; font-size: 12.5px; color: var(--ink-faint); }
.fo-thread__meta a { color: var(--accent); text-decoration: none; }
.fo-thread__meta a:hover { text-decoration: underline; }
.fo-dot { inline-size: 3px; block-size: 3px; border-radius: 50%; background: var(--border-strong); flex: none; }

/* ── Mensaje ─────────────────────────────────────────────────────────────── */
.fo-posts { display: grid; gap: var(--space-4); margin: 0 0 var(--space-8); padding: 0; list-style: none; }

.fo-post {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
/* La respuesta aceptada se marca con el borde y un filete lateral, no con un
   fondo de color en todo el bloque: el mensaje sigue siendo texto. */
.fo-post.is-solution { border-color: var(--success-border); }
.fo-post.is-solution .fo-post__side { background: var(--success-soft); }

/* Columna del autor: la firma completa vive aquí, como en cualquier foro. */
.fo-post__side {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: var(--space-5) var(--space-3);
  text-align: center;
  background: var(--surface-2);
  border-right: 1px solid var(--border);
}
.fo-post__av { inline-size: 56px; block-size: 56px; border-radius: 50%; object-fit: cover; }
.fo-post__av--initials { display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); color: var(--ink-faint); font-size: 17px; font-weight: 600; }
.fo-post__author { font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; line-height: 1.3; }
a.fo-post__author:hover { color: var(--accent); }
.fo-post__badge { display: inline-flex; color: var(--accent); }
.fo-post__badge svg { inline-size: 13px; block-size: 13px; }
.fo-post__role { font-size: 11.5px; line-height: 1.35; color: var(--ink-faint); }

.fo-post__main { display: flex; flex-direction: column; min-inline-size: 0; }

.fo-post__top {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: 10px var(--space-5);
  border-bottom: 1px solid var(--border);
  font-size: 12.5px; color: var(--ink-faint);
}
/* El #N es la señal de foro más barata y más reconocible que existe. */
.fo-post__n {
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.fo-post__solution {
  display: inline-flex; align-items: center; gap: 5px; margin-left: auto;
  padding: 2px 9px; border-radius: 99px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--success-soft); border: 1px solid var(--success-border); color: var(--success);
}
.fo-post__solution svg { inline-size: 11px; block-size: 11px; }

.fo-post__body {
  padding: var(--space-5);
  font-size: 15px; line-height: 1.7; color: var(--ink);
  overflow-wrap: anywhere;
}
.fo-post__body a { color: var(--accent); }

.fo-post__foot {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  margin-top: auto;
  padding: 10px var(--space-5);
  border-top: 1px solid var(--border);
}

.fo-act {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 500;
  color: var(--ink-faint); text-decoration: none;
}
.fo-act svg { inline-size: 13px; block-size: 13px; }
.fo-act:hover { color: var(--accent); }
.fo-act--danger:hover { color: var(--danger); }
.fo-act:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }
.fo-act form { display: contents; }

/* ── Formularios ─────────────────────────────────────────────────────────── */
.fo-reply { scroll-margin-top: calc(var(--header-height, 68px) + 16px); }
.fo-reply__title { margin: 0 0 var(--space-4); font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--ink); }

.fo-form { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.fo-field { display: flex; flex-direction: column; gap: 6px; inline-size: 100%; }
.fo-field > label,
.fo-form legend { font-size: 12.5px; font-weight: 600; color: var(--ink); padding: 0; }
.fo-field__help { font-size: 12px; line-height: 1.45; color: var(--ink-faint); }

.fo-form input[type="text"],
.fo-form textarea {
  inline-size: 100%;
  padding: 11px 13px;
  font-family: inherit; font-size: 14.5px; line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.fo-form textarea { resize: vertical; min-block-size: 150px; }
.fo-form input[type="text"]:focus,
.fo-form textarea:focus { outline: 2px solid var(--accent-border); outline-offset: 0; border-color: var(--accent); }

/* Cebo antibot: fuera de la vista y del tabulador, pero es un input de texto
   real (los bots se saltan los hidden para no pisar tokens). */
.fo-form input[name="website"] { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.fo-form fieldset { border: 0; padding: 0; margin: 0; inline-size: 100%; }
.fo-form ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.fo-form ul label { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink); cursor: pointer; }
.fo-form input[type="radio"] { accent-color: var(--accent); inline-size: 16px; block-size: 16px; flex: none; }

.fo-form__errors { font-size: 12.5px; color: var(--danger); }
.fo-form__errors ul { list-style: disc; margin: 0; padding-left: 1.1em; gap: 0; }
.fo-field.has-error input,
.fo-field.has-error textarea { border-color: var(--danger); }

/* Aviso de «inicia sesión para responder». */
.fo-note {
  padding: var(--space-5);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-card);
  font-size: 14px; color: var(--ink-soft);
}
.fo-note a { color: var(--accent); font-weight: 600; }

/* Cita del contenido denunciado. */
.fo-quote {
  margin: 0 0 var(--space-5);
  padding: 14px var(--space-5);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 14px; line-height: 1.6; color: var(--ink-soft);
}

/* ============================================================================
   BLOQUE EN UNA LECCIÓN
   ============================================================================ */
.fo-inline { margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--border); }
.fo-inline__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.fo-inline__h2 { margin: 0; font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 24px); font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.fo-inline__list { display: grid; gap: 0; margin: 0 0 var(--space-4); padding: 0; list-style: none; border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; }
.fo-inline__item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 12px var(--space-4); border-bottom: 1px solid var(--border); background: var(--surface); }
.fo-inline__item:last-child { border-bottom: 0; }
.fo-inline__link { font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; }
.fo-inline__link:hover { color: var(--accent); }
.fo-inline__n { flex: none; font-family: var(--font-display); font-size: 12px; font-weight: 700; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.fo-inline__empty { margin: 0 0 var(--space-4); max-width: 60ch; font-size: 14px; line-height: 1.6; color: var(--ink-faint); }

/* ============================================================================
   RESPONSIVE
   Las columnas de cifras se pliegan bajo el título en vez de encogerse: en
   móvil una tabla de cuatro columnas deja el tema en dos letras por línea.
   ============================================================================ */
@media (max-width: 860px) {
  .fo { padding: var(--space-6) var(--space-4) var(--space-12); }

  .fo-row { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px var(--space-4); }
  .fo-row--head { display: none; }

  .fo-row--thread .fo-stat { display: inline-flex; align-items: baseline; gap: 5px; text-align: left; }
  .fo-row--thread .fo-stat__n { font-size: 13px; }
  .fo-meta-mobile { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding-left: 48px; }
  .fo-last { text-align: left; padding-left: 48px; }
  .fo-last__who, .fo-last__when { display: inline; }

  .fo-post { grid-template-columns: minmax(0, 1fr); }
  /* El autor pasa a una banda horizontal arriba: una columna de 132px en un
     móvil de 360 se come un tercio del ancho del mensaje. */
  .fo-post__side {
    flex-direction: row; align-items: center; gap: 10px; text-align: left;
    padding: 10px var(--space-4);
    border-right: 0; border-bottom: 1px solid var(--border);
  }
  .fo-post__av { inline-size: 36px; block-size: 36px; }
  .fo-post__av--initials { font-size: 12px; }
  .fo-post__role { display: none; }
  .fo-post__body { padding: var(--space-4); font-size: 14.5px; }
  .fo-post__top, .fo-post__foot { padding-inline: var(--space-4); }
}

@media (min-width: 861px) {
  .fo-meta-mobile { display: contents; }
}

@media (prefers-reduced-motion: reduce) {
  .fo-chip, .fo-row--thread,
  .fo-form input[type="text"], .fo-form textarea { transition: none; }
}