/**
 * ECN — Capa "neón" (2026-08-31)
 *
 * La portada, el Observatorio y las landings comerciales pasan a negro
 * profundo con rojo neón. Es la capa tech del 2026-08-27 llevada al cuerpo,
 * no una paleta nueva: los tokens ya existían.
 *
 * Por qué se revierte el turquesa del 29: las referencias que aprobó
 * Alexander —dossier y piezas de campaña— son negro y rojo neón, y un medio
 * que se anuncia en negro no puede recibir al lector en turquesa sobre hueso.
 * El argumento del 29 seguía siendo cierto (un rojo repetido doce veces por
 * pantalla deja de señalar) pero la solución no era cambiar de color: era
 * cambiar de superficie. Sobre negro el rojo es luz, y la jerarquía la marcan
 * el brillo y el tamaño, no el tono.
 *
 * ---- Dos cosas que hay que saber antes de tocar esta hoja ----
 *
 * 1. LOS CONTEXTOS SE DECLARAN CON :is(), NO UNO POR UNO.
 *    La primera versión repetía la lista en cada regla y se coló el olvido de
 *    `single-ecn_indicador` en la mitad de ellas: la ficha de indicador salió
 *    con la caja blanca y los títulos de widget invisibles. Con `:is()` la
 *    lista vive en un sitio y añadir un contexto es añadirlo ahí.
 *
 * 2. HAY QUE ENTRAR POR #content.
 *    `style.css` pinta las cajas con `#content .container-wrapper`, que es
 *    (1,1,0). Un ID gana a cualquier número de clases, así que una regla por
 *    clases sueltas no lo alcanza por mucho que se encadene. Lo mismo con los
 *    titulares de tarjeta, que `ecn-bloques.css` pinta con tres clases.
 *
 * Los selectores salieron de inspeccionar el DOM de producción. Dos cosas que
 * no eran obvias: la portada es una PÁGINA (`page-id-1030`), no el índice del
 * blog; y `.container-wrapper` es a la vez la columna del contenido y CADA
 * widget de la barra lateral, por eso se tratan por separado.
 *
 * El CUERPO DE LA NOTA NO SE TOCA: se lee en claro. Un texto largo sobre
 * negro cansa, y la nota es donde el lector se queda. La cabecera tampoco: el
 * logo lleva "EC" en negro y no se recolorea (regla dura del manual), así que
 * sobre negro media marca desaparecería.
 *
 * Carga después de ecn-child, así que gana por orden y no hace falta ningún
 * !important. Quitar su línea en functions.php devuelve el sitio al fondo
 * claro sin tocar nada más.
 */

/* =====================================================================
 * 1. El lienzo
 * ================================================================== */

body:is(.home, .category-32, .single-ecn_indicador, .ecn-landing) {
	background-color: var(--ecn-negro-profundo);
	/* Halo de esquina sobre retícula de 28 px. Hubo un tercer trazo diagonal
	 * imitando las líneas de circuito de las piezas; se quitó tras verlo
	 * renderizado, porque daba haces anchos en vez de trazos finos. */
	background-image:
		var(--ecn-tech-halo),
		var(--ecn-tech-reticula);
	background-size:
		auto,
		var(--ecn-tech-reticula-tam);
	color: var(--ecn-blanco);
}

/* En la portada la columna no se sustituye por otra caja: las tarjetas ya dan
 * toda la estructura, y una caja dentro de otra sobre negro se lee a ventana
 * de aplicación. */
body.home #content article.container-wrapper {
	background: transparent;
	box-shadow: none;
	border: 0;
	padding-inline: 0;
}

/* En el Observatorio y las landings sí es una caja: ahí el contenido es una
 * ficha o un archivo, no una portada de tarjetas sueltas.
 *
 * Sin restringir a `article`: el archivo de categoría envuelve el listado en
 * un <div class="container-wrapper"> y el título de sección en un <header>.
 * Con `article` se quedaban los dos en blanco y todo su texto, ya invertido a
 * blanco, desaparecía. */
body:is(.category-32, .single-ecn_indicador, .ecn-landing) #content .container-wrapper {
	background: var(--ecn-superficie-tech);
	border: var(--ecn-neon-borde);
	box-shadow: none;
}

/* =====================================================================
 * 2. Texto sobre el lienzo
 * El neón NUNCA es color de texto sobre claro (no cumple contraste). El
 * titular es blanco; el acento lo dan el borde y el brillo, no la letra.
 * ================================================================== */

body:is(.home, .category-32, .single-ecn_indicador, .ecn-landing) #content :is(
	.entry-content .wp-block-post .wp-block-post-title,
	.entry-content .wp-block-post .wp-block-post-title a,
	.wp-block-post-title,
	.wp-block-post-title a,
	.entry-title,
	.entry-title a,
	.post-title,
	.post-title a,
	.ecn-seccion-titulo,
	h1, h2, h3, h4
) {
	color: var(--ecn-blanco);
}

body:is(.home, .category-32, .single-ecn_indicador) #content :is(
	.entry-content .wp-block-post .wp-block-post-title a:hover,
	.wp-block-post-title a:hover,
	.wp-block-post-title a:focus-visible,
	.post-title a:hover
) {
	color: var(--ecn-neon);
}

body:is(.home, .category-32, .single-ecn_indicador, .ecn-landing) #content :is(
	.wp-block-post-excerpt__excerpt,
	.wp-block-post-date,
	.wp-block-post-date a,
	.wp-block-post-date time,
	.post-excerpt,
	.post-meta,
	.post-meta a,
	.entry-content > p,
	#breadcrumb,
	#breadcrumb a,
	#breadcrumb span.current,
	.breadcrumbs,
	.breadcrumbs a
) {
	color: var(--ecn-tech-texto-suave);
}

/* La medida del hueco publicitario ("728×90") iba en gris prensa: sobre el
 * lienzo se queda en 4,1:1, por debajo del mínimo. */
body:is(.home, .category-32, .single-ecn_indicador, .ecn-landing) .ecn-casa__medida {
	color: var(--ecn-tech-texto-suave);
}

/* =====================================================================
 * 3. Tarjetas de portada
 * Contorno atenuado en reposo, brillo al acercarse. Es el gesto que más se
 * repite en las piezas de campaña.
 * ================================================================== */

body.home #content .wp-block-post-template > li.wp-block-post {
	background: var(--ecn-superficie-tech);
	border: var(--ecn-neon-borde);
	border-radius: var(--ecn-radio-borde);
	padding: var(--ecn-sp-4);
	transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

body.home #content .wp-block-post-template > li.wp-block-post:hover,
body.home #content .wp-block-post-template > li.wp-block-post:focus-within {
	border: var(--ecn-neon-borde-vivo);
	box-shadow: var(--ecn-neon-glow);
	transform: translateY(-2px);
}

/* La apertura no lleva caja: es la foto la que manda. Una tarjeta alrededor
 * de la nota principal la iguala a las secundarias. */
body.home #content .ecn-apertura .wp-block-post-template > li.wp-block-post {
	background: transparent;
	border-color: transparent;
	padding-inline: 0;
}

body.home #content .ecn-apertura .wp-block-post-template > li.wp-block-post:hover {
	transform: none;
	box-shadow: none;
	border-color: transparent;
}

/* Etiqueta de categoría: vuelve al rojo de marca (C1 del sistema visual).
 * Una sola etiqueta por tarjeta y sobre negro, así que ya no se repite
 * doce veces sobre blanco, que era el problema que motivó el turquesa. */
body.home #content .wp-block-post .wp-block-post-terms a {
	color: var(--ecn-blanco);
	background: var(--ecn-rojo);
}

/* =====================================================================
 * 4. Barra lateral
 * Cada widget ES un .container-wrapper, así que la regla del punto 1 lo
 * dejaría claro. Aquí se le da su superficie.
 * ================================================================== */

body:is(.home, .category-32, .single-ecn_indicador) #content .container-wrapper.widget {
	background: var(--ecn-superficie-tech);
	border: var(--ecn-neon-borde);
	box-shadow: none;
}

body:is(.home, .category-32, .single-ecn_indicador) #content .widget :is(
	.widget-title,
	.widget-title a,
	h1, h2, h3, h4,
	li a,
	p,
	.wp-block-latest-posts__post-title
) {
	color: var(--ecn-blanco);
}

body:is(.home, .category-32, .single-ecn_indicador) #content .widget .widget-title {
	border-bottom-color: var(--ecn-tech-linea);
}

/* Cualquier enlace del widget, no solo los de lista: la "Política de
 * Privacidad" del boletín es un <a> suelto dentro de un párrafo y se quedaba
 * en negro sobre la superficie oscura. Se excluye el botón, que tiene su
 * propio relleno claro y ya contrasta. */
body:is(.home, .category-32, .single-ecn_indicador) #content .widget
	a:not(.wp-block-button__link):not(.wp-element-button) {
	color: var(--ecn-blanco);
}

body:is(.home, .category-32, .single-ecn_indicador) #content .widget :is(
	time,
	.wp-block-latest-posts__post-date
) {
	color: var(--ecn-tech-texto-suave);
}

body:is(.home, .category-32, .single-ecn_indicador) #content .widget li a:hover {
	color: var(--ecn-neon);
}

/* Los componentes del Observatorio no aparecen aquí a propósito: su superficie
 * oscura es parte de la definición del componente (ecn-components.css y el CSS
 * del plugin), no de esta capa. Se reconocen igual dentro de una nota clara,
 * que es justo lo que sustituye al azul que certificaba el dato.
 */

/* =====================================================================
 * 5. Anuncio de casa y espacios publicitarios
 * Sobre negro el hueco no puede ser una caja blanca: sería lo más brillante
 * de la pantalla, y es espacio todavía no vendido.
 * ================================================================== */

body:is(.home, .category-32, .single-ecn_indicador, .ecn-landing) :is(
	.ecn-espacio-publicitario,
	.ecn-franja-publicitaria
) {
	background: transparent;
	border: 1px dashed var(--ecn-neon-suave);
}

body:is(.home, .category-32, .single-ecn_indicador, .ecn-landing) :is(
	.ecn-espacio-publicitario,
	.ecn-franja-publicitaria
)::before {
	color: var(--ecn-tech-texto-suave);
}

/* =====================================================================
 * 6. Móvil
 * ================================================================== */

/* En escritorio la columna va sin margen lateral para que las tarjetas ocupen
 * todo el ancho. En el teléfono eso deja el titular y el sumario pegados al
 * borde de la pantalla: sin la caja blanca que antes marcaba el límite, no
 * queda nada que separe el texto del canto del cristal. */
@media (max-width: 767px) {
	body.home #content article.container-wrapper {
		padding-inline: var(--ecn-sp-4);
	}
}

/* La caja blanca tras el logo vivía aquí. Se retira el 2026-08-31: la cabecera
 * entera pasó a negra y el logo tiene ya su versión en negativo, así que la
 * placa clara sobraba. El logo sigue sin redibujarse — solo cambia de variante,
 * y esa decisión y su porqué están en style.css, junto a la cabecera.
 */