/* ═══ Texto con formato (R-41) ═══════════════════════════════════════
   Lo que arma renderRichText() de app.js (noticias; más adelante el foro):
   párrafos, subtítulos, listas, links, citas, imágenes, menciones y las
   banderas que renderFlags() cambia por imágenes. Las etiquetas vienen del
   texto del autor ya escapado, por eso se estilan dentro de .rich-text y no
   con clases propias. Los nombres rich-* los pone app.js.
   Componente compartido: candidato a subir a base.css cuando el foro
   (R-43) pase a v2. */

.rich-text {
  color: var(--color-text);
  overflow-wrap: anywhere;
}
.rich-text > * + * { margin-top: var(--space-md); }
.rich-text h3 {
  font-size: var(--font-size-heading-md);
  line-height: var(--line-height-heading);
}
.rich-text ul {
  padding-left: var(--space-lg);
  list-style: disc;
}
.rich-text li + li { margin-top: var(--space-2xs); }
.rich-text a {
  color: var(--color-data);
  font-weight: var(--font-weight-semibold);
}
.rich-text a:hover { color: var(--color-text); }

/* Imagen dentro del texto: link a la imagen completa */
.rich-img { display: inline-block; }
.rich-img img { border-radius: var(--radius-md); }

/* Cita (con el encabezado "autor, ver mensaje" que arma el botón Citar del foro) */
.rich-quote {
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface);
  border-left: var(--accent-border-width) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
}
.rich-quote__head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-xs);
  margin-bottom: var(--space-2xs);
  font-size: var(--font-size-sm);
}
.rich-quote__author {
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
}
.rich-quote__body { display: block; }

.rich-mention {
  color: var(--color-data);
  font-weight: var(--font-weight-semibold);
}

/* Bandera dentro de un texto (renderFlags): Windows no dibuja las emoji.
   Va en línea con el texto; base.css pone las imágenes en bloque. */
.rich-flag {
  display: inline-block;
  width: var(--flag-width);
  height: var(--flag-height);
  border-radius: var(--radius-xs);
  vertical-align: middle;
}