/**
 * iDi Atlas — Contenido enriquecido (`.idi-rico`)
 * ─────────────────────────────────────────────────────────────────────────
 * Tipografía para cualquier bloque de HTML que escriba una persona: el
 * `the_content()` de una página, la descripción de un programa, el cuerpo de
 * una noticia, la política de privacidad, el texto de una sección.
 *
 * POR QUÉ EXISTE
 * El preflight de Tailwind deja `<p>` sin margen y `<ul>`/`<ol>` sin viñetas, y
 * en la suite NO está el plugin @tailwindcss/typography: las clases `prose`,
 * `prose-slate` y `prose-lg` que llevaban las plantillas NO se compilan y por
 * tanto nunca hicieron nada. Sin estas reglas, un cuerpo de texto con dos
 * párrafos y una lista sale como un bloque corrido y sin puntos.
 *
 * POR QUÉ NO SE AÑADIÓ `typography` Y SE ESCRIBIÓ ESTO
 *   1. `prose` inyecta grises LITERALES (`--tw-prose-body: #334155`…). Toda la
 *      suite repinta por tokens `--idi-*` y `.idi-surface-dark` los remapea;
 *      esos literales serían una capa de color que los kits no pueden tocar.
 *   2. `prose` fija `max-width: 65ch`. Varias plantillas lo llevaban sin el
 *      `max-w-none` que lo anula, así que activarlo estrechaba bloques que hoy
 *      están a ancho completo.
 *
 * REGLA AL EDITAR: todo color sale de `--idi-*`, nunca literal. Así los kits lo
 * repintan y, dentro de `.idi-surface-dark`, los tokens ya apuntan a la familia
 * `on-primary`. Un literal aquí sería tinta oscura sobre un hero oscuro.
 *
 * ÁMBITO: se encola en TODO el frontend (IDI_Hub_Central::enqueue_rich_content),
 * porque los sitios de uso están repartidos entre el tema y tres plugins. No
 * pinta nada por su cuenta: solo actúa dentro de un `.idi-rico`.
 *
 * Nació como `.idi-seccion-rico` en el motor de páginas por secciones y se
 * generalizó al descubrir que resolvía exactamente el mismo problema en las
 * plantillas que usaban `prose` en vano.
 *
 * @since idi-hub-central 1.2.0
 */

/* `:where()` a propósito: especificidad CERO. Son las únicas propiedades que
   la clase pone sobre el propio contenedor, y ahí sí compiten con las utilidades
   que ya llevan varias plantillas (`leading-relaxed` = 1.625). Como esta hoja
   se imprime DESPUÉS del compilado, un `.idi-rico` normal (0,1,0) empataría con
   la utilidad y ganaría por orden, pisando una decisión explícita de la
   plantilla. Con `:where()` el 1.7 es solo el valor por defecto de quien no
   pide nada.

   `overflow-wrap` hereda, así que puesto aquí cubre todo el contenido. Sin él,
   una URL pegada en el cuerpo —cosa de todos los días en un sitio de programas—
   desborda su caja y arrastra la PÁGINA entera: medido en un banco con el CSS
   real, 455 px de documento sobre una pantalla de 375. El español da palabras
   largas de sobra sin necesidad de una URL. `break-word` y no `anywhere`: el
   corte solo se aplica cuando la palabra no cabe de ninguna forma, en vez de
   partir agresivamente en cuanto se acaba el renglón. */
:where(.idi-rico) {
  line-height: 1.7;
  overflow-wrap: break-word;
}

/* El margen de los extremos lo decide el contenedor, no el contenido. */
.idi-rico > *:first-child { margin-top: 0; }
.idi-rico > *:last-child  { margin-bottom: 0; }

.idi-rico p {
  margin: 0 0 1em;
}

.idi-rico h2,
.idi-rico h3,
.idi-rico h4 {
  margin: 1.6em 0 0.6em;
  font-weight: 700;
  line-height: 1.3;
  color: var(--idi-text-main, inherit);
}

.idi-rico h2 { font-size: 1.5em; }
.idi-rico h3 { font-size: 1.25em; }
.idi-rico h4 { font-size: 1.1em; }

/* El preflight pone list-style:none. Se restaura aquí y no globalmente para no
   tocar los menús y listas de navegación del resto del sitio. */
.idi-rico ul,
.idi-rico ol {
  margin: 0 0 1em;
  padding-left: 1.5em;
}

.idi-rico ul { list-style: disc; }
.idi-rico ol { list-style: decimal; }

.idi-rico li { margin-bottom: 0.4em; }
.idi-rico li > ul,
.idi-rico li > ol { margin-top: 0.4em; }

.idi-rico strong,
.idi-rico b { font-weight: 700; }

.idi-rico em,
.idi-rico i { font-style: italic; }

/* `--idi-accent-ink` y no `--idi-accent`: el segundo es el token de RELLENO y no
   garantiza contraste como texto. Dentro del ámbito oscuro, `-ink` ya se
   recalcula contra el primario. */
/* El enlace se acerca un punto a la tinta del cuerpo en vez de usar
   `--idi-accent-ink` puro.
   Por qué: ese token lo calcula el contrato contra BLANCO, y los kits no pintan
   sobre blanco — folio usa papel #f2eedf, cantera #f2f1ec. Medido sobre la
   página real, el acento por defecto daba 4.16:1 en folio, 4.27 en cantera y
   glass y 4.30 en nivel: cuatro de seis kits por debajo de AA por unas décimas.
   El color-mix conserva el tono de marca y recupera el contraste sin que cada
   kit tenga que rescatar los enlaces por su cuenta. */
.idi-rico a {
  color: color-mix(in srgb, var(--idi-accent-ink, currentColor) 78%, var(--idi-text-main, #0f172a));
  text-decoration: underline;
  text-underline-offset: 2px;
}

.idi-rico a:hover {
  text-decoration-thickness: 2px;
}

.idi-rico blockquote {
  margin: 1.2em 0;
  padding-left: 1.2em;
  border-left: 3px solid var(--idi-border, currentColor);
}

/* La cita de una reseña ya ES el <blockquote>: ahí el filete y la sangría
   sobran, porque la tarjeta ya la enmarca.
   OJO — no poner `margin: 0` aquí. Este selector (0,1,1) le gana a la utilidad
   `mb-6` (0,1,0) de la plantilla de reseñas, y la cita queda pegada al nombre
   de quien la firma. El margen lo decide la plantilla, no esta regla. */
blockquote.idi-rico {
  padding-left: 0;
  border-left: 0;
}

.idi-rico img {
  max-width: 100%;
  height: auto;
  border-radius: 0.75rem;
}

.idi-rico iframe {
  max-width: 100%;
  border: 0;
  border-radius: 0.75rem;
}

/* El envoltorio que pone IDI_Rich_Content::render() lleva la proporción del
   vídeo en un `aspect-ratio` inline; el iframe la rellena. Sin esto, al encoger
   el ancho en un teléfono el alto seguía siendo el del atributo `height` y el
   reproductor salía con bandas negras. */
.idi-rico .idi-embed {
  position: relative;
  width: 100%;
  margin: 0 0 1.5em;
  border-radius: 0.75rem;
  overflow: hidden;
}

.idi-rico .idi-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.idi-rico hr {
  margin: 2em 0;
  border: 0;
  border-top: 1px solid var(--idi-border-soft, currentColor);
}

/* ── Lo que el editor de WordPress pega y antes no cubría nadie ─────────── */

/* La tabla se envuelve para que en móvil desborde ELLA y no la página. El
   `display:block` del envoltorio es lo que activa el scroll; la tabla de dentro
   se queda `table`.

   `.wp-block-table` es la clase que pone Gutenberg y solo cubre lo que se pega
   desde ahí. El editor inline del constructor NO es Gutenberg: sus tablas —las
   que llegan copiadas de una hoja de cálculo o de Word— venían desnudas y se
   llevaban por delante la página entera (718 px de documento sobre 375 px de
   pantalla, medido). `.idi-tabla-scroll` lo pone IDI_Rich_Content::render() al
   imprimir, así que cubre a las dos. */
.idi-rico .wp-block-table,
.idi-rico figure.wp-block-table,
.idi-rico .idi-tabla-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.idi-rico table {
  width: 100%;
  margin: 0 0 1.5em;
  border-collapse: collapse;
  /* Sin esto una tabla con muchas columnas se comprime hasta ser ilegible. */
  min-width: 20rem;
}

.idi-rico th,
.idi-rico td {
  padding: 0.6em 0.8em;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--idi-border-soft, currentColor);
}

.idi-rico th {
  font-weight: 700;
  color: var(--idi-text-main, inherit);
}

.idi-rico caption {
  margin-bottom: 0.6em;
  color: var(--idi-text-muted, inherit);
  font-size: 0.9em;
  text-align: left;
}

/* `code` sin fondo propio: un literal aquí se vería mal en el ámbito oscuro, y
   `--idi-primary-tint` ya es el tinte de superficie que cada kit define. */
.idi-rico code {
  padding: 0.15em 0.4em;
  border-radius: 0.25rem;
  background: var(--idi-primary-tint, transparent);
  font-size: 0.9em;
}

.idi-rico pre {
  margin: 0 0 1.5em;
  padding: 1em 1.2em;
  border-radius: 0.75rem;
  background: var(--idi-primary-tint, transparent);
  overflow-x: auto;
}

/* Dentro de un bloque preformateado el fondo ya lo pone el `pre`. */
.idi-rico pre code {
  padding: 0;
  background: none;
  font-size: inherit;
}

.idi-rico figure {
  margin: 1.5em 0;
}

.idi-rico figcaption {
  margin-top: 0.6em;
  color: var(--idi-text-muted, inherit);
  font-size: 0.9em;
  text-align: center;
}