/* Las reglas del contenido que escribe administración en el CMS.

   ESTE ARCHIVO LO USAN DOS: las páginas del sitio, y el editor del panel.
   Por eso está separado de propio.css. Que sean el mismo archivo es lo que
   hace que quien escribe vea, mientras escribe, lo que va a ver el que
   entre a la página. Si se duplicaran, se desincronizarían el primer día.

   La tipografía se pide acá además de en el <head> porque el editor dibuja
   su contenido en un marco aparte, que no hereda nada de la página. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

body.contenido-cms { font-family: Manrope, system-ui, sans-serif; margin: 16px; }

/* ─── El contenido que escribe administración en el CMS ────────────────────
   Todo lo que sale del editor va envuelto en `.contenido-cms`, y estas reglas
   le dan la forma del diseño nuevo a las etiquetas sueltas: títulos, párrafos,
   listas, enlaces, tablas e imágenes.

   POR QUÉ ACOTADO A UNA CLASE Y NO SUELTO: el contenido del CMS es HTML que
   escribió gente distinta a lo largo de los años. Si estas reglas fueran
   globales, cualquier cosa rara guardada ahí adentro se derramaría sobre el
   resto del sitio. Así, lo que pase queda adentro del recuadro.

   Lo que esto NO puede arreglar es el `style=` en línea: un `font-family`
   escrito adentro del contenido le gana a cualquier hoja. Esas páginas hay que
   limpiarlas a mano, y están contadas en PAGINAS-DE-CONTENIDO.md. */
.contenido-cms { font-size: 17px; line-height: 1.75; color: var(--text, #223); }

.contenido-cms h2 { font-size: clamp(24px, 2.2vw, 32px); margin: 36px 0 12px; }
.contenido-cms h3 { font-size: 21px; margin: 28px 0 10px; }
.contenido-cms h4 { font-size: 18px; margin: 24px 0 8px; }
.contenido-cms :is(h2, h3, h4):first-child { margin-top: 0; }

.contenido-cms p { margin: 0 0 17px; max-width: 66ch; }
.contenido-cms :is(ul, ol) { padding-left: 22px; margin: 0 0 20px; max-width: 66ch; }
.contenido-cms li { margin-bottom: 6px; }

/* LOS ENLACES, COMO EN EL RESTO DEL SITIO: negrita y subrayado.

   Hasta el 20/10/2026 acá sólo cambiaban de color y se subrayaban al pasar
   el mouse. El cuerpo de las demás páginas, en cambio, los trae en negrita
   y subrayados —es `.prose-section a` de `que-es-aadi.css`, la hoja del
   prototipo—, así que el contenido del CMS era la excepción y no se notaba
   porque casi no tiene enlaces.

   Se vio en `conveniosreci`, que tiene uno solo: FILAIE quedaba como texto
   de otro color y nadie adivinaba que se podía apretar.

   LAS MEDIDAS SON LAS DE AQUELLA REGLA, a propósito: 600 de peso, 1px de
   raya y 4 de separación, engordando a 2px al pasar el mouse. Si algún día
   el prototipo cambia su estilo de enlace, los dos lugares tienen que
   moverse juntos. */
.contenido-cms a {
	color: var(--action);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}
.contenido-cms a:hover { text-decoration-thickness: 2px; }

.contenido-cms img { max-width: 100%; height: auto; border-radius: var(--radius-card, 8px); }

/* Las tablas del contenido viejo traen anchos fijos y se salen de la pantalla
   en el teléfono. El envoltorio con scroll propio es lo único que las hace
   convivir con un diseño que se adapta, sin tener que rehacerlas. */
.contenido-cms table { width: 100%; max-width: 100%; border-collapse: collapse; margin: 0 0 24px; display: block; overflow-x: auto; }
.contenido-cms :is(td, th) { border: 1px solid var(--border); padding: 10px 12px; text-align: left; vertical-align: top; }
.contenido-cms th { background: var(--surface-soft); font-weight: 700; }

/* Restos del diseño viejo que vienen dentro del contenido guardado: en la hoja
   nueva no existen, así que quedan como bloques sueltos. Se les da un mínimo
   de aire para que no queden pegados. */
.contenido-cms :is(.item_row, .title_block, .description_block) { margin-bottom: 18px; }
.contenido-cms .title_block :is(p, strong) { font-size: 21px; font-weight: 800; color: var(--brand); }