/*
 * Pulso Médico · Bloque de boletín · Estilos
 *
 * Archivo: wp-content/themes/Educa-Med/blocks/pulso-boletin/style.css
 * Versión: 2.1.0
 *
 * Depende de pulso-base.css.
 *
 * SOBRE WPFORMS: es el único punto del sistema donde se usa !important. El
 * motivo está documentado en el propio bloque de reglas, más abajo.
 *
 * Changelog
 * 2.1.0 — Oculto el campo señuelo antispam de WPForms, que venía visible y
 *         ocupaba una fila. Capa final de refuerzo apoyada en el ID del
 *         bloque, que gana a cualquier cadena de clases.
 * 2.0.1 — Un peldaño más de especificidad: la etiqueta del consentimiento
 *         empataba con WPForms en (0,4,2) y ganaba la suya por cargar
 *         después. Reducido el espacio entre consentimiento y desplegable.
 * 2.0.0 — Se anulan con !important las reglas que WPForms marca a su vez. Es
 *         la única vía: contra !important la especificidad no decide. Queda
 *         acotado a .pulso-boletin__formulario. Corregido además el selector
 *         de la etiqueta del consentimiento, que lleva la clase
 *         .wpforms-field-label-inline y no es un label suelto.
 * 1.4.0 — Los selectores de campo y botón incorporan el contenedor de
 *         WPForms: los suyos son «div.wpforms-container-full .wpforms-form
 *         button[type=submit]», (0,3,2), y los míos se quedaban en (0,3,1).
 *         Casilla y bloque legal bajan a 12 px.
 * 1.3.1 — La casilla de consentimiento va en línea con su texto.
 * 1.3.0 — Botón y campos rehechos con las variables de WPForms. Etiqueta del
 *         acuerdo oculta a la vista. Bloque legal plegado, ya generado por el
 *         propio bloque.
 * 1.2.0 — Desplegable de información básica de protección de datos.
 * 1.1.0 — Compone el formulario en línea.
 * 1.0.0 — Versión inicial.
 */

/* =========================================================================
 * Franja
 * ====================================================================== */

.pulso-boletin {
	background-color: var(--pulso-color-primario);
	color: var(--pulso-color-blanco);
	scroll-margin-top: calc(var(--pulso-desplazamiento, 0px) + 80px);
}

.pulso-boletin__interior {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--pulso-esp-24);
	padding-block: var(--pulso-esp-40);
}

@media (min-width: 922px) {

	.pulso-boletin__interior {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		align-items: start;
		gap: var(--pulso-esp-56);
	}
}

/* =========================================================================
 * Texto
 * ====================================================================== */

.pulso-boletin__texto {
	display: flex;
	flex-direction: column;
	gap: var(--pulso-esp-12);
}

.pulso-boletin__antetitulo {
	margin: 0;
	font-family: var(--pulso-fuente-ui);
	font-size: var(--pulso-texto-micro);
	font-weight: 700;
	letter-spacing: var(--pulso-tracking-etiqueta);
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--pulso-color-claro);
}

.pulso-boletin__titulo {
	margin: 0;
	font-family: var(--pulso-fuente-editorial);
	font-size: var(--pulso-texto-titular-l);
	font-weight: 600;
	letter-spacing: var(--pulso-tracking-titular);
	line-height: 1.15;
	color: var(--pulso-color-blanco);
}

.pulso-boletin__descripcion {
	margin: 0;
	font-family: var(--pulso-fuente-ui);
	font-size: var(--pulso-texto-menor);
	line-height: var(--pulso-interlineado-cuerpo);
	color: var(--pulso-color-claro);
}

/* =========================================================================
 * WPForms
 *
 * POR QUÉ HAY !important AQUÍ
 *
 * WPForms marca sus reglas de campo y botón con !important y las carga
 * después de la hoja del bloque. Se intentaron por orden, sin éxito:
 *
 *   1. Sus variables CSS declaradas en el contenedor del bloque. No bastan:
 *      WPForms las redefine en .wpforms-container-full, más cerca del
 *      elemento que las usa.
 *   2. Selectores de mayor especificidad, hasta (0,5,2) frente a su (0,3,2).
 *      Tampoco, porque contra !important la especificidad sola no decide.
 *
 * La solución es !important Y especificidad alta: entre dos reglas marcadas,
 * gana la más específica. Por eso los selectores de abajo repiten la cadena
 * completa del contenedor de WPForms.
 *
 * Las variables se mantienen abajo, declaradas ya en el contenedor correcto,
 * porque cubren lo que WPForms no marca. El !important se limita a lo que sí
 * marca, y siempre dentro de .pulso-boletin__formulario: no se escapa a
 * ningún otro formulario del sitio.
 *
 * Si algún día WPForms deja de usar !important, este bloque puede quitarse
 * entero y el de variables seguirá bastando.
 * ====================================================================== */

/* --- Variables, declaradas donde WPForms las lee --- */

.pulso-boletin .pulso-boletin__formulario div.wpforms-container,
.pulso-boletin .pulso-boletin__formulario div.wpforms-container-full {
	--wpforms-field-border-radius: 0px;
	--wpforms-field-border-size: 1px;
	--wpforms-field-background-color: #ffffff;
	--wpforms-field-border-color: #ffffff;
	--wpforms-field-text-color: #111111;
	--wpforms-field-size-input-height: 52px;
	--wpforms-field-size-input-spacing: 0px;
	--wpforms-field-size-font-size: 16px;
	--wpforms-field-size-padding-h: 16px;

	--wpforms-label-color: #ffffff;
	--wpforms-label-sublabel-color: #a8c4d8;
	--wpforms-label-error-color: #ffd7d7;
	--wpforms-label-size-font-size: 12px;
	--wpforms-label-size-sublabel-font-size: 12px;

	--wpforms-button-border-radius: 0px;
	--wpforms-button-border-size: 0px;
	--wpforms-button-background-color: #47799e;
	--wpforms-button-text-color: #ffffff;
	--wpforms-button-size-height: 52px;
	--wpforms-button-size-font-size: 12px;
	--wpforms-button-size-padding-h: 24px;
	--wpforms-button-size-margin-top: 0px;
}

/* --- Composición en línea ------------------------------------------------
 *
 * Correo y botón en la misma fila; consentimiento y errores a todo el ancho
 * por debajo. WPForms deja el botón fuera del contenedor de campos, así que
 * el contenedor se hace transparente con display: contents.
 */

@media (min-width: 480px) {

	.pulso-boletin__formulario .wpforms-form {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: start;
	}

	.pulso-boletin__formulario .wpforms-field-container {
		display: contents;
	}

	.pulso-boletin__formulario .wpforms-field-email {
		grid-column: 1;
		grid-row: 1;
	}

	.pulso-boletin__formulario .wpforms-submit-container {
		grid-column: 2;
		grid-row: 1;
	}

	.pulso-boletin__formulario .wpforms-field:not(.wpforms-field-email) {
		grid-column: 1 / -1;
		margin-top: var(--pulso-esp-12);
	}
}

.pulso-boletin__formulario .wpforms-container,
.pulso-boletin__formulario .wpforms-container-full {
	margin: 0;
}

.pulso-boletin__formulario .wpforms-field {
	padding: 0;
}

.pulso-boletin__formulario .wpforms-submit-container {
	margin: 0;
	padding: 0;
}

/* --- Campo de correo --- */

.pulso-boletin .pulso-boletin__formulario div.wpforms-container .wpforms-form input[type="email"],
.pulso-boletin .pulso-boletin__formulario div.wpforms-container-full .wpforms-form input[type="email"],
.pulso-boletin .pulso-boletin__formulario div.wpforms-container .wpforms-form input[type="text"],
.pulso-boletin .pulso-boletin__formulario div.wpforms-container-full .wpforms-form input[type="text"] {
	width: 100% !important;
	height: 52px !important;
	padding: 0 16px !important;
	border: 1px solid #ffffff !important;
	border-radius: 0 !important;
	background-color: #ffffff !important;
	box-shadow: none !important;
	font-family: var(--pulso-fuente-ui) !important;
	font-size: 16px !important;
	color: var(--pulso-color-tinta) !important;
}

.pulso-boletin__formulario input[type="email"]::placeholder,
.pulso-boletin__formulario input[type="text"]::placeholder {
	color: var(--pulso-color-apagado);
	opacity: 1;
}

.pulso-boletin__formulario input[type="email"]:focus-visible {
	outline: 2px solid var(--pulso-color-claro);
	outline-offset: 2px;
}

/* --- Botón --- */

.pulso-boletin .pulso-boletin__formulario div.wpforms-container .wpforms-form button[type="submit"],
.pulso-boletin .pulso-boletin__formulario div.wpforms-container-full .wpforms-form button[type="submit"],
.pulso-boletin .pulso-boletin__formulario div.wpforms-container .wpforms-form input[type="submit"],
.pulso-boletin .pulso-boletin__formulario div.wpforms-container-full .wpforms-form input[type="submit"] {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	height: 52px !important;
	padding: 0 24px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background-color: var(--pulso-color-acento) !important;
	box-shadow: none !important;
	font-family: var(--pulso-fuente-ui) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: var(--pulso-tracking-etiqueta) !important;
	text-transform: uppercase !important;
	white-space: nowrap !important;
	color: #ffffff !important;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.pulso-boletin .pulso-boletin__formulario div.wpforms-container .wpforms-form button[type="submit"]:hover,
.pulso-boletin .pulso-boletin__formulario div.wpforms-container-full .wpforms-form button[type="submit"]:hover {
	background-color: #ffffff !important;
	color: var(--pulso-color-primario) !important;
}

.pulso-boletin__formulario .wpforms-submit:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

/* --- Etiquetas de campo ---
 *
 * Se ocultan a la vista, no a los lectores de pantalla: un marcador de
 * posición no es una etiqueta accesible.
 */

.pulso-boletin .pulso-boletin__formulario div.wpforms-container .wpforms-form .wpforms-field-email > .wpforms-field-label,
.pulso-boletin .pulso-boletin__formulario div.wpforms-container-full .wpforms-form .wpforms-field-email > .wpforms-field-label,
.pulso-boletin .pulso-boletin__formulario div.wpforms-container .wpforms-form .wpforms-field-gdpr-checkbox > .wpforms-field-label,
.pulso-boletin .pulso-boletin__formulario div.wpforms-container-full .wpforms-form .wpforms-field-gdpr-checkbox > .wpforms-field-label {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* --- Casilla de consentimiento ---
 *
 * WPForms deja el input como HERMANO del label, no dentro, así que el flex
 * va en el elemento de lista. Y la etiqueta lleva la clase
 * .wpforms-field-label-inline, no es un label suelto.
 */

.pulso-boletin__formulario .wpforms-field-gdpr-checkbox ul,
.pulso-boletin__formulario .wpforms-field-checkbox ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Sin márgenes colgando: el desplegable va justo debajo. */
.pulso-boletin .pulso-boletin__formulario div.wpforms-container .wpforms-form .wpforms-field-gdpr-checkbox,
.pulso-boletin .pulso-boletin__formulario div.wpforms-container-full .wpforms-form .wpforms-field-gdpr-checkbox,
.pulso-boletin .pulso-boletin__formulario div.wpforms-container .wpforms-form .wpforms-field-gdpr-checkbox li,
.pulso-boletin .pulso-boletin__formulario div.wpforms-container-full .wpforms-form .wpforms-field-gdpr-checkbox li {
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}

.pulso-boletin__formulario .wpforms-field-gdpr-checkbox li,
.pulso-boletin__formulario .wpforms-field-checkbox li {
	display: flex;
	align-items: flex-start;
	gap: var(--pulso-esp-8);
}

.pulso-boletin .pulso-boletin__formulario div.wpforms-container .wpforms-form .wpforms-field-label-inline,
.pulso-boletin .pulso-boletin__formulario div.wpforms-container-full .wpforms-form .wpforms-field-label-inline,
.pulso-boletin .pulso-boletin__formulario div.wpforms-container .wpforms-form .wpforms-field-gdpr-checkbox li,
.pulso-boletin .pulso-boletin__formulario div.wpforms-container-full .wpforms-form .wpforms-field-gdpr-checkbox li,
.pulso-boletin .pulso-boletin__formulario div.wpforms-container .wpforms-form .wpforms-field-gdpr-checkbox li label,
.pulso-boletin .pulso-boletin__formulario div.wpforms-container-full .wpforms-form .wpforms-field-gdpr-checkbox li label,
.pulso-boletin .pulso-boletin__formulario div.wpforms-container .wpforms-form .wpforms-field-checkbox li label,
.pulso-boletin .pulso-boletin__formulario div.wpforms-container-full .wpforms-form .wpforms-field-checkbox li label {
	margin: 0 !important;
	font-family: var(--pulso-fuente-ui) !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	color: #ffffff !important;
	cursor: pointer;
}

.pulso-boletin__formulario input[type="checkbox"] {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	accent-color: var(--pulso-color-acento);
	cursor: pointer;
}

.pulso-boletin__formulario .wpforms-field-label-inline a,
.pulso-boletin__formulario .wpforms-field-gdpr-checkbox a {
	color: #ffffff;
	text-underline-offset: 3px;
}

.pulso-boletin__formulario .wpforms-required-label {
	color: var(--pulso-color-claro);
}

/* --- Mensajes --- */

.pulso-boletin .pulso-boletin__formulario div.wpforms-container .wpforms-form .wpforms-error,
.pulso-boletin .pulso-boletin__formulario div.wpforms-container-full .wpforms-form .wpforms-error {
	font-family: var(--pulso-fuente-ui) !important;
	font-size: 12px !important;
	color: #ffd7d7 !important;
}

.pulso-boletin__formulario .wpforms-confirmation-container,
.pulso-boletin__formulario .wpforms-confirmation-container-full {
	margin: 0 !important;
	padding: 16px !important;
	border: 1px solid var(--pulso-color-linea-oscura) !important;
	background-color: transparent !important;
	font-family: var(--pulso-fuente-ui);
	font-size: var(--pulso-texto-menor);
	line-height: 1.5;
	color: #ffffff !important;
}

.pulso-boletin__aviso {
	margin: var(--pulso-esp-12) 0 0;
	font-family: var(--pulso-fuente-ui);
	font-size: var(--pulso-texto-micro);
	line-height: 1.5;
	color: var(--pulso-color-claro);
}

.pulso-boletin__aviso a {
	color: var(--pulso-color-blanco);
}

/* =========================================================================
 * Información básica de protección de datos
 *
 * Va plegada: son cinco entradas y desplegadas duplican la altura de la
 * franja. La genera el propio bloque, no WPForms, cuyo saneado elimina
 * details y summary.
 * ====================================================================== */

.pulso-boletin__legal {
	margin-top: var(--pulso-esp-8);
	font-family: var(--pulso-fuente-ui);
	font-size: var(--pulso-texto-micro);
	line-height: 1.55;
	color: var(--pulso-color-claro);
}

.pulso-boletin__legal > summary {
	display: inline-block;
	padding: var(--pulso-esp-4) 0;
	list-style: none;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	color: var(--pulso-color-claro);
}

.pulso-boletin__legal > summary::-webkit-details-marker {
	display: none;
}

/* Marcador propio, para que se vea que despliega. */
.pulso-boletin__legal > summary::before {
	content: "+";
	display: inline-block;
	width: 1em;
	font-weight: 700;
	text-decoration: none;
}

.pulso-boletin__legal[open] > summary::before {
	content: "−";
}

.pulso-boletin__legal > summary:hover,
.pulso-boletin__legal > summary:focus-visible {
	color: var(--pulso-color-blanco);
}

.pulso-boletin__legal-cuerpo {
	margin: var(--pulso-esp-8) 0 0;
	padding: var(--pulso-esp-12) var(--pulso-esp-16);
	border-left: 2px solid var(--pulso-color-linea-oscura);
	max-width: 62ch;
	font-size: var(--pulso-texto-micro);
}

.pulso-boletin__legal-punto + .pulso-boletin__legal-punto {
	margin-top: var(--pulso-esp-8);
}

.pulso-boletin__legal-epigrafe {
	display: inline;
	margin: 0;
	font-weight: 700;
	color: var(--pulso-color-blanco);
}

/* El símbolo lo pone el estilo: no hay que escribirlo en cada epígrafe. */
.pulso-boletin__legal-epigrafe::after {
	content: " \00BB";
}

.pulso-boletin__legal-texto {
	display: inline;
	margin: 0 0 0 0.35em;
	color: var(--pulso-color-claro);
}

.pulso-boletin__legal-texto a {
	color: var(--pulso-color-blanco);
}

/* =========================================================================
 * Capa final
 *
 * Todo lo de abajo son refuerzos, no estilos nuevos: repiten declaraciones ya
 * hechas más arriba con selectores que ganan a cualquier cosa que WPForms
 * pueda traer, incluidas reglas propias basadas en el ID del formulario.
 *
 *   #pulso-boletin …                    lleva un ID: (1,x,y)
 *   .pulso-boletin.pulso-boletin …      clase repetida, por si el bloque
 *                                       llevara otra ancla y el ID no casara
 *
 * Si algún día se comprueba que sobra, puede quitarse esta sección entera
 * sin tocar nada más.
 * ====================================================================== */

/* --- El campo señuelo antispam viene visible ---
 *
 * WPForms inserta dos campos de texto contra el envío automático. Al segundo
 * le pone estilo en línea que lo esconde; al primero, no. Sin esto ocupa una
 * fila entera de la rejilla y separa el correo del consentimiento.
 */

.pulso-boletin__formulario .wpforms-field:has(> input[aria-hidden="true"]),
.pulso-boletin__formulario .wpforms-field:has(> label[aria-hidden="true"]) {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: 0 !important;
	overflow: hidden !important;
	clip-path: inset(50%) !important;
}

/* --- Texto del consentimiento --- */

#pulso-boletin .pulso-boletin__formulario .wpforms-field-label-inline,
#pulso-boletin .pulso-boletin__formulario .wpforms-field-gdpr-checkbox li label,
#pulso-boletin .pulso-boletin__formulario .wpforms-field-checkbox li label,
.pulso-boletin.pulso-boletin .pulso-boletin__formulario .wpforms-field-label-inline,
.pulso-boletin.pulso-boletin .pulso-boletin__formulario .wpforms-field-gdpr-checkbox li label {
	font-family: var(--pulso-fuente-ui) !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	letter-spacing: 0 !important;
	color: #ffffff !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* --- Espaciado del consentimiento --- */

#pulso-boletin .pulso-boletin__formulario .wpforms-field-gdpr-checkbox,
#pulso-boletin .pulso-boletin__formulario .wpforms-field-gdpr-checkbox ul,
#pulso-boletin .pulso-boletin__formulario .wpforms-field-gdpr-checkbox li,
.pulso-boletin.pulso-boletin .pulso-boletin__formulario .wpforms-field-gdpr-checkbox,
.pulso-boletin.pulso-boletin .pulso-boletin__formulario .wpforms-field-gdpr-checkbox ul,
.pulso-boletin.pulso-boletin .pulso-boletin__formulario .wpforms-field-gdpr-checkbox li {
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}

/* --- Etiqueta «Acuerdo RGPD», oculta a la vista --- */

#pulso-boletin .pulso-boletin__formulario .wpforms-field-gdpr-checkbox > .wpforms-field-label,
#pulso-boletin .pulso-boletin__formulario .wpforms-field-email > .wpforms-field-label,
.pulso-boletin.pulso-boletin .pulso-boletin__formulario .wpforms-field-gdpr-checkbox > .wpforms-field-label,
.pulso-boletin.pulso-boletin .pulso-boletin__formulario .wpforms-field-email > .wpforms-field-label {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}