/*
 * Mapea el HTML que produce TipTap al maquetado del prototipo.
 *
 * El editor genera etiquetas desnudas (<p>, <h3>, <ul>) sin clases, mientras
 * que el diseño del detalle de carrera depende de `.lead-copy`, `.sub-green` y
 * `.check-list`. Este archivo hace ese puente, acotado a `.contenido-rich`
 * para no alcanzar al resto del sitio.
 *
 * Los valores están copiados de iuc.css (líneas 36-40), que NO se toca. Si
 * alguno cambia allá, hay que replicarlo acá — es el costo de no poder poner
 * clases en el HTML del editor.
 *
 * Lo que no se puede mapear: `.destacado` (párrafo resaltado) es una decisión
 * por párrafo y TipTap no tiene cómo marcarla sin una extensión propia.
 */

.contenido-rich p {
  font-size: 0.98rem;
  line-height: 1.7;
}

.contenido-rich h2,
.contenido-rich h3 {
  color: var(--iuc-green);
  font-weight: 700;
  font-size: 1.15rem;
  margin-top: 3rem;
  margin-bottom: 1rem;
}

.contenido-rich ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.contenido-rich ul > li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.4rem 0;
  font-size: 0.98rem;
}

/* El ícono de check no puede venir del editor: lo pone el CSS. */
.contenido-rich ul > li::before {
  content: "\f26a";
  font-family: "bootstrap-icons";
  color: var(--iuc-green);
  font-size: 1.05rem;
  line-height: 1.5;
  flex-shrink: 0;
}

/*
 * Lista ordenada y cita.
 *
 * El prototipo no tiene ninguna de las dos: su cuerpo está escrito a mano y
 * sólo usa párrafos, subtítulos y la check-list. Pero la toolbar de
 * `RichTextEditor` ofrece los botones "Lista ordenada" (`toggleOrderedList`) y
 * "Cita" (`toggleBlockquote`), y los dos tags sobreviven `sanitizeRichHtml()`
 * — están en su `allowedTags`.
 *
 * O sea que un editor puede producirlos usando la herramienta como está
 * diseñada. Sin estas reglas quedaban con el estilo por defecto del navegador,
 * visiblemente distinto del resto del cuerpo y sin ningún error que lo avise.
 *
 * Es la diferencia con el párrafo `.destacado`, que sigue sin mapear: ese el
 * editor no puede generarlo, así que no hay nada roto que arreglar.
 */

.contenido-rich ol {
  padding-left: 1.4rem;
  margin-bottom: 0;
}

/* Sin `display: flex`, a diferencia del `ul`: el número lo pone el navegador
   como marcador de lista y un contenedor flex lo suprimiría. */
.contenido-rich ol > li {
  padding: 0.4rem 0;
  font-size: 0.98rem;
  line-height: 1.7;
}

.contenido-rich ol > li::marker {
  color: var(--iuc-green);
  font-weight: 700;
}

.contenido-rich blockquote {
  border-left: 3px solid var(--iuc-green);
  padding-left: 1.1rem;
  margin: 1.5rem 0;
  font-size: 0.98rem;
  line-height: 1.7;
}

/*
 * Segundo mapeo: el cuerpo de una noticia.
 *
 * Mismo problema que `.contenido-rich` y otra solución, porque el diseño del
 * detalle de noticia usa otras clases con otros valores: `.nota-sub` para los
 * subtítulos y `.nota-cita` para las citas. Los valores están copiados de
 * iuc.css (líneas 435-448), que NO se toca — si cambian allá, hay que
 * replicarlos acá.
 *
 * `.nota-cuerpo p` ya lo define iuc.css, así que acá no se repite.
 */

.nota-cuerpo h2,
.nota-cuerpo h3 {
  color: var(--iuc-green);
  font-weight: 700;
  font-size: 1.3rem;
  margin: 2.5rem 0 1rem;
}

.nota-cuerpo blockquote {
  border-left: 3px solid var(--iuc-green);
  margin: 2.25rem 0;
  padding: 0.25rem 0 0.25rem 1.75rem;
  color: var(--iuc-blue);
  font-size: 1.3rem;
  line-height: 1.55;
  font-weight: 500;
}

/*
 * La lista va con viñeta común, y es la única divergencia deliberada respecto
 * de `.contenido-rich`.
 *
 * Allá un `<ul>` se renderiza como check-list, con un tilde verde por ítem,
 * porque en la página de carrera enumera requisitos y lo que el programa
 * incluye. En una noticia, una enumeración cualquiera con tildes verdes
 * afirma algo que el texto no dice.
 */
.nota-cuerpo ul,
.nota-cuerpo ol {
  padding-left: 1.4rem;
  margin-bottom: 1.4rem;
}

.nota-cuerpo li {
  margin-bottom: 0.5rem;
}

.nota-cuerpo ol > li::marker {
  color: var(--iuc-green);
  font-weight: 700;
}

/*
 * Tercer mapeo: el cuerpo de una página institucional (`/[slug]`).
 *
 * Mismo problema que los dos anteriores —TipTap entrega etiquetas desnudas— y
 * una diferencia que obliga a escribir más reglas: `iuc.css` no define nada
 * para `.pagina-cuerpo`. Las páginas institucionales del prototipo
 * (`bienestar.php`, `beneficios.php`) están maquetadas a mano, con clases
 * propias de cada bloque (`.bien-texto`, `.acomp-card`, ...) que el editor no
 * puede producir. Así que este scope define también el contenedor, no sólo
 * sus hijos.
 *
 * Los valores están copiados de iuc.css (líneas 444-447: `.nota-cuerpo`,
 * `.nota-cuerpo p`, `.nota-sub` y `.nota-cita`), que NO se toca — es el mismo
 * diseño de cuerpo de lectura largo que el de la noticia. Si alguno cambia
 * allá, hay que replicarlo acá a mano: es el costo de no poder poner clases
 * en el HTML del editor.
 */

.pagina-cuerpo {
  color: #3a3a3a;
  font-size: 1rem;
  line-height: 1.8;
}

.pagina-cuerpo p {
  margin: 0 0 1.4rem;
  text-wrap: pretty;
}

.pagina-cuerpo h2,
.pagina-cuerpo h3 {
  color: var(--iuc-green);
  font-weight: 700;
  font-size: 1.3rem;
  margin: 2.5rem 0 1rem;
}

.pagina-cuerpo blockquote {
  border-left: 3px solid var(--iuc-green);
  margin: 2.25rem 0;
  padding: 0.25rem 0 0.25rem 1.75rem;
  color: var(--iuc-blue);
  font-size: 1.3rem;
  line-height: 1.55;
  font-weight: 500;
}

/*
 * La lista va con viñeta común, no con check-list.
 *
 * Es la misma divergencia deliberada que ya separa a `.nota-cuerpo` de
 * `.contenido-rich`, y por el mismo motivo: allá el tilde verde por ítem
 * afirma "esto está incluido", que es lo que corresponde cuando la lista
 * enumera los requisitos y el contenido de un programa. En una página
 * institucional —un reglamento, un instructivo, una nómina— una enumeración
 * cualquiera con tildes verdes afirma algo que el texto no dice.
 *
 * O sea: dos de los tres scopes van con viñeta y uno con check. **No es una
 * inconsistencia a emparejar**: es la misma etiqueta con dos significados
 * editoriales distintos según dónde esté.
 */
.pagina-cuerpo ul,
.pagina-cuerpo ol {
  padding-left: 1.4rem;
  margin-bottom: 1.4rem;
}

.pagina-cuerpo li {
  margin-bottom: 0.5rem;
}

.pagina-cuerpo ol > li::marker {
  color: var(--iuc-green);
  font-weight: 700;
}