/**
 * PIA — Capa "señal" (la capa oscura de Primicia IA)
 *
 * La portada, el Radar de modelos y las landings comerciales van sobre negro
 * neural con cian de señal. El cuerpo de la nota NO se toca: se lee en claro,
 * porque un texto de mil palabras sobre negro cansa y la nota es donde el
 * lector se queda. La cabecera tampoco está aquí: es oscura en todas las
 * páginas y por eso vive en style.css.
 *
 * Heredada de ecn-neon.css (ECN, 2026-08-31). Dos cosas que hay que saber
 * antes de tocarla:
 *
 * 1. LOS CONTEXTOS SE DECLARAN CON :is(), NO UNO POR UNO. La lista vive en
 *    un sitio y añadir un contexto es añadirlo ahí. Contextos:
 *      body.home                        → portada
 *      body.post-type-archive-pia_modelo → /modelos/ (el Radar)
 *      body.single-pia_modelo           → ficha de un modelo
 *      body.tax-pia_lab                 → archivo por laboratorio
 *      body.pia-landing                 → landings comerciales
 *      body.archive / .search / .error404 → categorías, etiquetas, autor,
 *                                          búsqueda y 404 (2.1.3)
 *
 * 2. HAY QUE ENTRAR POR #content. style.css pinta las cajas con
 *    `#content .container-wrapper` (1,1,0); un ID gana a cualquier número
 *    de clases.
 *
 * Carga después de style.css, 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, .archive, .search, .error404, .post-type-archive-pia_modelo, .single-pia_modelo, .tax-pia_lab, .pia-landing) {
	background-color: var(--pia-negro);
	/* 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(--pia-halo),
		var(--pia-reticula);
	background-size:
		auto,
		var(--pia-reticula-tam);
	color: var(--pia-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 Radar 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(.post-type-archive-pia_modelo, .single-pia_modelo, .tax-pia_lab, .pia-landing) #content .container-wrapper {
	background: var(--pia-superficie);
	border: var(--pia-borde-senal);
	box-shadow: none;
}

/* =====================================================================
 * 2. Texto sobre el lienzo
 * El titular es blanco; el acento lo dan el borde y el brillo, no la letra.
 * Sobre el negro el cian sí cumple contraste (9,6:1), así que aquí puede
 * ser texto: kickers, hover y cifras.
 * ================================================================== */

body:is(.home, .archive, .search, .error404, .post-type-archive-pia_modelo, .single-pia_modelo, .tax-pia_lab, .pia-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,
	.pia-seccion-titulo,
	h1, h2, h3, h4
) {
	color: var(--pia-blanco);
}

body:is(.home, .archive, .search, .error404, .post-type-archive-pia_modelo, .single-pia_modelo, .tax-pia_lab) #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(--pia-cian);
}

body:is(.home, .archive, .search, .error404, .post-type-archive-pia_modelo, .single-pia_modelo, .tax-pia_lab, .pia-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(--pia-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, .archive, .search, .error404, .post-type-archive-pia_modelo, .single-pia_modelo, .tax-pia_lab, .pia-landing) .pia-casa__medida {
	color: var(--pia-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(--pia-superficie);
	border: var(--pia-borde-senal);
	border-radius: var(--pia-radio-borde);
	padding: var(--pia-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(--pia-borde-senal-vivo);
	box-shadow: var(--pia-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 .pia-apertura .wp-block-post-template > li.wp-block-post {
	background: transparent;
	border-color: transparent;
	padding-inline: 0;
}

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

/* Kicker de categoría sobre el lienzo: cian como texto (C1). Sobre claro iba
 * en cian oscuro; aquí el cian de marca contrasta de sobra. */
body.home #content .wp-block-post .wp-block-post-terms a {
	color: var(--pia-cian);
}

body.home #content .wp-block-post.category-ultima-hora .wp-block-post-terms a {
	color: var(--pia-ambar);
}

/* ---- Portada como índice de entradas (mientras no exista la página de
 * bloques). Jannah envuelve el listado en .mag-box > .container-wrapper, que
 * style.css pinta de blanco: con los titulares ya en blanco quedaban
 * invisibles. La caja se vuelve transparente y cada entrada pasa a tarjeta
 * sobre superficie, el mismo gesto que las tarjetas de bloques. */
body:is(.home, .archive, .search) #content .mag-box .container-wrapper {
	background: transparent;
	box-shadow: none;
	border: 0;
	padding-inline: 0;
}

body:is(.home, .archive, .search) #content .posts-items > li.post-item {
	background: var(--pia-superficie);
	border: var(--pia-borde-senal);
	border-radius: var(--pia-radio-borde);
	padding: var(--pia-sp-4);
	margin-block-end: var(--pia-sp-4);
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

body:is(.home, .archive, .search) #content .posts-items > li.post-item:hover {
	border: var(--pia-borde-senal-vivo);
	box-shadow: var(--pia-glow);
}

body:is(.home, .archive, .search) #content .post-item .post-excerpt,
body:is(.home, .archive, .search) #content .post-item .post-meta,
body:is(.home, .archive, .search) #content .post-item .post-meta a {
	color: var(--pia-tech-texto-suave);
}

body:is(.home, .archive, .search) #content .post-item .more-link.button {
	background: transparent;
	color: var(--pia-cian);
	border: 1px solid var(--pia-cian-suave);
}

body:is(.home, .archive, .search) #content .post-item .more-link.button:hover {
	background: var(--pia-cian);
	color: var(--pia-negro);
}

/* =====================================================================
 * 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, .archive, .search, .error404, .post-type-archive-pia_modelo, .single-pia_modelo, .tax-pia_lab) #content .container-wrapper.widget {
	background: var(--pia-superficie);
	border: var(--pia-borde-senal);
	box-shadow: none;
}

body:is(.home, .archive, .search, .error404, .post-type-archive-pia_modelo, .single-pia_modelo, .tax-pia_lab) #content .widget :is(
	.widget-title,
	.widget-title a,
	h1, h2, h3, h4,
	li a,
	p,
	.wp-block-latest-posts__post-title
) {
	color: var(--pia-blanco);
}

body:is(.home, .archive, .search, .error404, .post-type-archive-pia_modelo, .single-pia_modelo, .tax-pia_lab) #content .widget .widget-title {
	border-bottom-color: var(--pia-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, .archive, .search, .error404, .post-type-archive-pia_modelo, .single-pia_modelo, .tax-pia_lab) #content .widget
	a:not(.wp-block-button__link):not(.wp-element-button) {
	color: var(--pia-blanco);
}

body:is(.home, .archive, .search, .error404, .post-type-archive-pia_modelo, .single-pia_modelo, .tax-pia_lab) #content .widget :is(
	time,
	.wp-block-latest-posts__post-date
) {
	color: var(--pia-tech-texto-suave);
}

body:is(.home, .archive, .search, .error404, .post-type-archive-pia_modelo, .single-pia_modelo, .tax-pia_lab) #content .widget li a:hover {
	color: var(--pia-cian);
}

/* Los componentes del Radar no aparecen aquí a propósito: su superficie
 * oscura es parte de la definición del componente (pia-components.css y
 * radar.css del plugin), no de esta capa. Se reconocen igual dentro de una
 * nota clara: es la superficie y la procedencia lo que certifica 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, .archive, .search, .error404, .post-type-archive-pia_modelo, .single-pia_modelo, .tax-pia_lab, .pia-landing) :is(
	.pia-espacio-publicitario,
	.pia-franja-publicitaria
) {
	/* 2.0.1: sin punteado. El hueco es una tarjeta flotante que la pieza
	 * llena de borde a borde (pix-inmersivo.css, sección 7). */
	background: var(--pia-negro);
	border: 0;
}

body:is(.home, .archive, .search, .error404, .post-type-archive-pia_modelo, .single-pia_modelo, .tax-pia_lab, .pia-landing) :is(
	.pia-espacio-publicitario,
	.pia-franja-publicitaria
)::before {
	color: var(--pia-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(--pia-sp-4);
	}
}