/* ==========================================================================
   SCOLA — F1 · Botón flotante de WhatsApp.

   Hoja propia y sin depender de los tokens de `.scola-eh`: este botón sale en
   TODAS las páginas, también en las de Elementor, que no tienen ese scope.

   Sobre el color: el verde de marca #25D366 con el glifo blanco da 1.98:1,
   insuficiente incluso para un gráfico (mínimo 3:1). Se usa el teal oscuro de
   WhatsApp #075E54, que da 7.67:1 con blanco y además convive con la paleta
   mocha del sitio, donde un verde neón desentonaría.
   ========================================================================== */

.scola-wa {
	--wa:       #075E54;
	--wa-hover: #128C7E;

	position: fixed;
	right: clamp(16px, 4vw, 28px);

	/* En móvil, por encima de la barra del navegador y del área segura del
	   dispositivo. Sin esto el botón queda medio tapado en iPhone. */
	bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(16px, 4vw, 28px));

	z-index: 9998;   /* por debajo de un modal (9999), por encima del contenido */

	display: inline-flex;
	align-items: center;
	gap: 10px;

	/* Alto fijo: el botón no refluye ni empuja nada, así que no hay layout
	   shift. Al ser `fixed` tampoco entra en el flujo del documento. */
	height: 56px;
	padding: 0 20px;
	box-sizing: border-box;

	background: var(--wa);
	color: #FFFFFF;
	border-radius: 999px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);

	font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.01em;
	text-decoration: none;

	transition: background-color .18s ease, transform .18s ease;
}

/* El reset de enlaces de editorial-home.css usa :where(), especificidad cero,
   así que este color gana. Se declara igualmente por si el tema pisa el color
   de los enlaces: es un control, no un enlace de texto. */
.scola-wa:link,
.scola-wa:visited { color: #FFFFFF; }

.scola-wa:hover,
.scola-wa:focus-visible {
	background: var(--wa-hover);
	color: #FFFFFF;
	transform: translateY(-2px);
}

/* Foco visible de verdad: anillo blanco con halo oscuro, para que se vea tanto
   sobre el fondo mocha como sobre la crema. */
.scola-wa:focus-visible {
	outline: 3px solid #FFFFFF;
	outline-offset: 3px;
	box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.45);
}

.scola-wa__icono {
	width: 26px;
	height: 26px;
	flex: 0 0 26px;
	fill: currentColor;
	display: block;
}

/* Pantallas estrechas: solo el icono. El texto accesible sigue en aria-label,
   así que un lector de pantalla no pierde nada. */
@media (max-width: 560px) {
	.scola-wa {
		width: 56px;
		padding: 0;
		justify-content: center;
		gap: 0;
	}
	.scola-wa__texto {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.scola-wa { transition: none; }
	.scola-wa:hover,
	.scola-wa:focus-visible { transform: none; }
}

/* Que no tape el CTA de cierre.
   Las páginas de segmento y los artículos terminan con su llamada a la acción
   centrada abajo; en móvil el botón flotante caía justo encima. Se le reserva
   sitio en lugar de moverlo: el botón tiene que estar donde la gente lo busca. */
.scola-seg__cierre,
.scola-art__related,
.scola-blog__pagination {
	padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 561px) {
	.scola-seg__cierre,
	.scola-art__related,
	.scola-blog__pagination {
		padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
	}
}

/* Mientras el banner de cookies esté puesto, el botón se aparta.
   El banner es `position: fixed; left:16px; right:16px; bottom:16px`, así que en
   móvil ocupa exactamente esta esquina: el botón le caía encima y tapaba
   "ACCEPT ALL". Comprobado en el navegador a 375 px, no deducido.

   Se oculta en vez de subirlo porque la altura del banner cambia según el
   idioma y según si está desplegado el detalle de categorías: cualquier número
   que pusiera aquí sería una suposición que se rompe sola. Y un diálogo de
   consentimiento merece la atención primero; en cuanto se acepta o se rechaza,
   el botón vuelve.

   `:has()` no está en navegadores muy viejos. Si no lo entiende, no aplica la
   regla y el botón simplemente se queda donde estaba: se degrada a lo de antes,
   no a algo peor. */
body:has(#scola-consent.is-visible) .scola-wa {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* Al imprimir no pinta nada. */
@media print {
	.scola-wa { display: none; }
}