/* ==========================================================================
   50 · CONTRATO DE PROSA
   --------------------------------------------------------------------------
   El archivo más importante para los artículos.

   ── LO QUE HAY DE VERDAD EN PRODUCCIÓN ────────────────────────────────────
   Medido sobre los 76 artículos publicados el 2026-09-05:

     · CERO bloques de Gutenberg. El plugin `classic-editor` está activo y los
       76 artículos son HTML pelado del editor clásico.
     · 306 <h2>, 277 <h3>, 46 <h4>, 571 <li>.
     · 331 <img> con width fijo y clases clásicas (alignnone, aligncenter,
       wp-image-N, size-full).
     · 225 <a> envolviendo una imagen: es lo que usa Simple Lightbox.
     · 122 <iframe> CRUDOS con width="560" height="315" — 93 de YouTube,
       21 de Power BI y 8 de Genially. No son bloques `embed`, así que
       `responsive-embeds` no los toca: se desbordan si no se arreglan aquí.
     · 59 .fasc-button del plugin forget-about-shortcode-buttons, CON COLOR
       EN LÍNEA (#ff0000, #34a166).
     · CERO tablas. CERO shortcodes. Un solo <blockquote>.

   ── LA ESTRATEGIA ─────────────────────────────────────────────────────────
   Se estiliza el CONTENEDOR a nivel de elemento, no cada tipo de bloque. Así
   una imagen, un vídeo o un incrustado quedan bien aunque lleguen dentro de
   algo que todavía no existe. Es la respuesta al requisito de «futuros
   assets», y la razón de que este archivo cubra a la vez el HTML clásico de
   hoy y las clases wp-block-* de mañana: si algún día se retira
   `classic-editor`, no hay que reescribir nada.
   ========================================================================== */

/* ==========================================================================
   LA REJILLA
   --------------------------------------------------------------------------
   Tres columnas nombradas —content, wide, full— que resuelven alignwide y
   alignfull sin una línea de JavaScript. Todo hijo directo cae en `content`
   salvo que pida lo contrario.
   ========================================================================== */

.p2080-prose {
	display: grid;
	grid-template-columns:
		[full-start] minmax(var(--space-3), 1fr)
		[wide-start] minmax(0, calc((var(--w-container) - var(--w-prose)) / 2))
		[content-start] min(100% - var(--space-3) * 2, var(--w-prose)) [content-end]
		minmax(0, calc((var(--w-container) - var(--w-prose)) / 2)) [wide-end]
		minmax(var(--space-3), 1fr) [full-end];
	row-gap: var(--space-3);
}

.p2080-prose > * {
	grid-column: content;
	min-width: 0;
}

.p2080-prose > .alignwide {
	grid-column: wide;
}

.p2080-prose > .alignfull {
	grid-column: full;
}

/* Variante para ir dentro de un `.container--article`: una sola columna, que hace
   a la vez de las tres. Es la de los artículos (decisión 060): el contenedor ya
   pone el ancho y los márgenes, y el texto arranca en el mismo borde que el título. */
.p2080-prose--fill {
	grid-template-columns: [full-start wide-start content-start] minmax(0, 1fr) [content-end wide-end full-end];
}

/* ==========================================================================
   TIPOGRAFÍA DEL ARTÍCULO
   ========================================================================== */

/* Los titulares necesitan aire por encima, que se suma al row-gap. El primero
   no lo lleva: dejaría un hueco al empezar el artículo. */
.p2080-prose > :is(h2, h3, h4, h5, h6) {
	margin-block-start: var(--space-3);
}

.p2080-prose > :first-child {
	margin-block-start: 0;
}

.p2080-prose h2 {
	font-size: var(--fs-h2);
}

.p2080-prose h3 {
	font-size: var(--fs-h3);
}

.p2080-prose h4 {
	font-size: var(--fs-lead);
}

/* Longitud de línea de 50-75 caracteres: norma de marca. La marca el ancho de
   la columna `content`, no una regla de aquí. En los artículos la marca
   `--w-article`, algo más ancha (decisión 060). */
.p2080-prose p {
	line-height: 1.7;
}

.p2080-prose :is(ul, ol) {
	padding-inline-start: var(--space-4);
}

.p2080-prose li {
	line-height: 1.7;
}

.p2080-prose li::marker {
	color: var(--c-accent);
}

/* ==========================================================================
   EL CONTRATO DE MEDIOS
   --------------------------------------------------------------------------
   Aquí está la clave del requisito de «futuros assets»: se enumeran los
   ELEMENTOS, no los bloques. Cualquier cosa que llegue mañana envuelta en un
   bloque desconocido ya sale bien, porque por dentro sigue siendo un <img>,
   un <video> o un <iframe>.
   ========================================================================== */

.p2080-prose :is(img, video, figure, .wp-block-embed__wrapper) {
	border-radius: var(--radius-media);
}

.p2080-prose img {
	/* Los 331 <img> traen width y height fijos del editor clásico. */
	max-width: 100%;
	height: auto;
	box-shadow: var(--shadow-media);
}

.p2080-prose figure {
	margin: 0;
}

.p2080-prose :is(figcaption, .wp-caption-text) {
	margin-block-start: var(--space-1);
	color: var(--c-muted);
	font-size: var(--fs-small);
	line-height: 1.5;
	text-align: center;
}

/* ── Imágenes enlazadas (Simple Lightbox) ──────────────────────────────────
   225 imágenes van dentro de un <a> que apunta al archivo grande. Ese enlace
   NO debe heredar el subrayado ni el color de los enlaces de texto.
   ────────────────────────────────────────────────────────────────────────── */

.p2080-prose a:has(> img) {
	display: inline-block;
	text-decoration: none;
}

.p2080-prose a > img {
	transition: transform var(--t-base), box-shadow var(--t-base);
}

@media (prefers-reduced-motion: no-preference) {
	.p2080-prose a:hover > img {
		transform: scale(1.01);
		box-shadow: var(--shadow-card-hover);
	}
}

/* ── Incrustados ───────────────────────────────────────────────────────────
   Los 122 <iframe> del contenido son CRUDOS, con width="560" height="315"
   escritos en el atributo. Sin esto se salen de la columna en móvil.

   La proporción 16:9 se aplica SOLO a los de vídeo. Power BI y Genially son
   paneles con su propia altura: forzarlos a 16:9 los recortaría.
   ────────────────────────────────────────────────────────────────────────── */

.p2080-prose iframe {
	width: 100%;
	max-width: 100%;
	border: 0;
	border-radius: var(--radius-media);
}

.p2080-prose iframe:is(
	[src*="youtube.com"],
	[src*="youtu.be"],
	[src*="vimeo.com"]
) {
	aspect-ratio: 16 / 9;
	height: auto;
}

/* ── Herramientas BETA ─────────────────────────────────────────────────────
   Las páginas /dcma/ y /analizador-xer/ (y sus versiones EN) son un iframe a
   un HTML estático subido a la mediateca. Vienen escritos así:

       <iframe src="…/uploads/2025/03/….html" width="100%" height="800px">

   `height="800px"` NO es un valor válido para el atributo, que espera un
   entero. El navegador lo descarta, y sin una regla de alto el panel colapsa a
   los 150px por defecto del iframe. Hoy lo tapa Themify; sin esto, las cuatro
   páginas quedarían inservibles al cambiar de tema.

   El selector va por la ruta de subida y no por la extensión: describe la
   intención —una herramienta alojada por nosotros— y deja fuera YouTube,
   Power BI y Genially, que son externos y traen su propia altura.
   ────────────────────────────────────────────────────────────────────────── */

.p2080-prose iframe[src*="/wp-content/uploads/"] {
	height: var(--h-tool-embed);
}

/* El editor clásico envuelve el iframe en un <p>. Es ese párrafo el que sale a
   la columna ancha: un panel no se usa bien en los 720px de la prosa. */
.p2080-prose > p:has(> iframe[src*="/wp-content/uploads/"]) {
	grid-column: wide;
}

/* ==========================================================================
   BOTONES DENTRO DEL CONTENIDO
   --------------------------------------------------------------------------
   Dos orígenes, un solo aspecto:
     · .fasc-button — los 59 del plugin forget-about-shortcode-buttons.
     · .wp-block-button__link — por si algún día se escribe con bloques.

   Ambos se alían al CTA del tema en lugar de reimplementarlo, igual que el
   destello se define una sola vez en 40-components.css.

   ── SOBRE EL !important ───────────────────────────────────────────────────
   Los .fasc-button traen el color escrito en el atributo style del propio
   contenido: `style="background-color: #ff0000; color: #ffffff;"`. Un estilo
   en línea gana a cualquier hoja de estilos, así que sin !important los
   botones seguirían saliendo rojos y verdes ajenos a la paleta.

   No contradice la invariante 3: esos style="" están en el CONTENIDO de la
   base de datos, no en las plantillas del tema. Y no contradice la
   invariante 1: aquí no se escribe ningún literal, solo se pisan los que ya
   venían en el HTML con los tokens de theme.json.
   ========================================================================== */

.p2080-prose :is(.fasc-button, .wp-block-button__link) {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	padding: 11px 26px;
	border: 1px solid transparent;
	border-radius: var(--radius-button);
	background-color: var(--c-cta) !important;
	background-image: var(--g-cta);
	color: var(--c-cta-text) !important;
	font-family: inherit;
	font-size: var(--fs-body);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	box-shadow: var(--shadow-cta);
	overflow: hidden;
	transition: transform var(--t-base), box-shadow var(--t-base),
		background-color var(--t-base), border-color var(--t-base), color var(--t-base);
}

/* La misma inversión que el .btn--cta de 40-components.css: fondo blanco,
   filo Burnt y letra Ember Ink. Se repite aquí porque estos botones vienen del
   contenido y no pueden llevar la clase del tema — pero los VALORES son los
   mismos alias, así que no hay dos definiciones del color que mantener. */
.p2080-prose :is(.fasc-button, .wp-block-button__link):hover,
.p2080-prose :is(.fasc-button, .wp-block-button__link):focus-visible {
	transform: translateY(-2px);
	background-image: none;
	background-color: var(--c-cta-bg-hover) !important;
	border-color: var(--c-cta-line-hover);
	color: var(--c-cta-text-hover) !important;
	box-shadow: var(--shadow-cta-hover);
}

.p2080-prose .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

/* El destello del CTA también en el contenido. Definido en 40-components.css
   como @keyframes p2080-shimmer: aquí solo se reutiliza. */
@media (prefers-reduced-motion: no-preference) {
	.p2080-prose :is(.fasc-button, .wp-block-button__link)::after {
		content: "";
		position: absolute;
		inset-block-start: -10%;
		inset-inline-start: 0;
		width: 60%;
		height: 120%;
		background-image: linear-gradient(
			to right,
			transparent 0%,
			var(--shimmer-highlight) 50%,
			transparent 100%
		);
		transform: translateX(-200%);
		animation: p2080-shimmer var(--shimmer-duration) ease-in-out infinite;
		pointer-events: none;
	}
}

/* ==========================================================================
   CITAS
   ========================================================================== */

.p2080-prose :is(blockquote, .wp-block-quote) {
	margin: 0;
	padding-inline-start: var(--space-3);
	border-inline-start: 3px solid var(--c-accent);
	color: var(--c-heading);
	font-size: var(--fs-lead);
	font-style: italic;
}

.p2080-prose :is(blockquote, .wp-block-quote) cite {
	display: block;
	margin-block-start: var(--space-1);
	color: var(--c-muted);
	font-size: var(--fs-small);
	font-style: normal;
	font-weight: 600;
}

.p2080-prose .wp-block-pullquote {
	padding: var(--space-4);
	border-block: 2px solid var(--c-accent);
	border-inline: 0;
	text-align: center;
}

/* ==========================================================================
   CÓDIGO
   El resaltado lo pone Enlighter; aquí solo el código suelto y en línea.
   Las sobreescrituras de Enlighter viven en 70-enlighter.css.
   ========================================================================== */

.p2080-prose :is(pre, .wp-block-code) {
	overflow-x: auto;
	padding: var(--space-3);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-media);
	background-color: var(--c-bg-sunken);
	font-size: var(--fs-small);
	line-height: 1.6;
	tab-size: 4;
}

.p2080-prose :not(pre) > code {
	padding: 2px 6px;
	border-radius: 4px;
	background-color: var(--c-bg-sunken);
	color: var(--c-accent-hover);
}

/* ==========================================================================
   TABLAS
   --------------------------------------------------------------------------
   Hoy no hay ninguna en los 76 artículos, pero el editor las ofrece y en
   cuanto alguien escriba una tiene que salir bien. Reutiliza el aspecto de
   .table de 40-components.css sin duplicar sus reglas: solo añade el scroll,
   que en el contenido no puede pedirse a mano con un envoltorio.
   ========================================================================== */

.p2080-prose :is(table, .wp-block-table) {
	display: block;
	overflow-x: auto;
	font-size: var(--fs-small);
}

.p2080-prose :is(th, td) {
	padding: 10px var(--space-2);
	border-block-end: 1px solid var(--c-border);
	text-align: start;
}

.p2080-prose thead th {
	background-color: var(--c-bg-sunken);
	color: var(--c-heading);
	font-weight: 700;
}

/* ==========================================================================
   SEPARADORES Y VARIOS
   ========================================================================== */

.p2080-prose :is(hr, .wp-block-separator) {
	height: 1px;
	margin-block: var(--space-3);
	border: 0;
	background: linear-gradient(
		to right,
		transparent,
		var(--c-forest),
		var(--c-ember),
		transparent
	);
	opacity: 0.5;
}

/* Enlaces del cuerpo: subrayado fino que engorda al pasar por encima. Se
   excluyen los que envuelven imágenes y los que ya son botones. */
.p2080-prose a:not(:has(> img), .fasc-button, .wp-block-button__link) {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.p2080-prose a:not(:has(> img), .fasc-button, .wp-block-button__link):hover {
	text-decoration-thickness: 2px;
}