/*
 * Estilos del plugin: el botón flotante de WhatsApp y el mapa.
 *
 * Usan los colores del tema (theme.json) y, si el tema no los define, un
 * valor de respaldo: el botón se ve bien con cualquier tema.
 * Al tocar esta hoja, subir TECREO_CORE_VERSION en el archivo
 * principal del plugin.
 */

/* Botón flotante de WhatsApp: siempre a mano en el celular. */
.whatsapp-flotante {
	position: fixed;
	z-index: 999;
	inset-block-end: calc(1rem + env(safe-area-inset-bottom, 0px));
	inset-inline-end: calc(1rem + env(safe-area-inset-right, 0px));
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 3.25rem;
	padding: 0.75rem 1.15rem;
	border-radius: 999px;
	background-color: var(--wp--preset--color--accion, #0b6e4f);
	box-shadow: 0 0.35rem 1.25rem rgb(0 0 0 / 0.25);
	color: var(--wp--preset--color--accion-contraste, #ffffff);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
}

.whatsapp-flotante:hover {
	background-color: var(--wp--preset--color--contraste, #1c1c1c);
	color: var(--wp--preset--color--base, #ffffff);
}

/* Foco visible sobre cualquier fondo: anillo oscuro con borde claro. */
.whatsapp-flotante:focus-visible {
	outline: 3px solid var(--wp--preset--color--contraste, #1c1c1c);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--wp--preset--color--base, #ffffff);
}

.whatsapp-flotante__icono {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
}

@media print {
	.whatsapp-flotante {
		display: none;
	}
}

/* Mapa de Google: ancho completo y proporción fija, sin saltos al cargar. */
.mapa-negocio iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	border: 0;
	border-radius: var(--wp--custom--radio, 0.5rem);
}

.mapa-negocio__enlace {
	margin-block: 0.5rem 0;
}