/**
 * Burbuja de WhatsApp flotante en toda la web (v1.17.3).
 * ============================================================================
 * Pedido explícito de Irvin: "moderno y limpio" — círculo verde de marca,
 * sin bordes duros ni sombra pesada, con un anillo de pulso MUY sutil (no
 * el efecto "parpadeo" agresivo típico de estos botones) para que se note
 * sin sentirse ruidoso. En escritorio, al pasar el cursor se expande a una
 * píldora con el texto "Escríbenos" — mismo lenguaje que
 * [bpc_whatsapp_boton texto="..."] pero resuelto solo con CSS (max-width +
 * opacity en vez de mostrar/ocultar), para que la transición se sienta
 * suave en vez de un salto brusco.
 *
 * Bloque obligatorio de tamaño base de .bpc-icon duplicado aquí (mismo
 * patrón que CUALQUIER CSS público que use bpc_icon() — ver el bug
 * histórico #4 documentado en el proyecto: sin esto, el ícono SVG sale
 * gigante porque esas reglas solo viven por defecto en panel.css).
 */
.bpc-icon { width: 20px; height: 20px; flex-shrink: 0; }

.bpc-wa-flotante {
	--bpc-wa-verde: #25d366;
	--bpc-wa-verde-oscuro: #1ebd5a;

	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 999998;
	display: inline-flex;
	align-items: center;
	height: 60px;
	padding: 0;
	border-radius: 999px;
	background: var(--bpc-wa-verde);
	color: #fff;
	text-decoration: none;
	box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35), 0 2px 8px rgba(15, 23, 42, 0.12);
	overflow: hidden;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, padding 0.3s ease;
	animation: bpc-wa-entrada 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
	animation-delay: 0.4s;
}
/* Defensa contra estilos genéricos de <a>/<button> que el tema/WooCommerce
   del cliente pueda aplicar a cualquier enlace del sitio (mismo mecanismo
   documentado en el bug histórico #10 — border/outline con !important). */
.bpc-wa-flotante,
.bpc-wa-flotante:hover,
.bpc-wa-flotante:visited {
	border: 0 !important;
	outline: 0 !important;
	-webkit-appearance: none;
	appearance: none;
}
.bpc-wa-flotante:focus-visible {
	outline: 2px solid #fff !important;
	outline-offset: 3px;
}
.bpc-wa-flotante:hover {
	background: var(--bpc-wa-verde-oscuro);
	box-shadow: 0 10px 30px rgba(37, 211, 102, 0.45), 0 4px 14px rgba(15, 23, 42, 0.16);
	transform: translateY(-2px);
	padding-right: 20px;
}

.bpc-wa-flotante__icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	flex-shrink: 0;
}
.bpc-wa-flotante__icono .bpc-icon {
	width: 30px;
	height: 30px;
}

.bpc-wa-flotante__texto {
	font-size: 14.5px;
	font-weight: 600;
	white-space: nowrap;
	max-width: 0;
	margin-left: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-width 0.3s ease, margin-left 0.3s ease, opacity 0.2s ease 0.05s;
}
.bpc-wa-flotante:hover .bpc-wa-flotante__texto,
.bpc-wa-flotante:focus-visible .bpc-wa-flotante__texto {
	max-width: 140px;
	margin-left: 10px;
	opacity: 1;
}

/* Anillo de pulso — una sola onda muy espaciada (2.8s, delay de 1.2s antes
   de la primera) en vez del parpadeo constante y agresivo típico de estos
   botones; se apaga en reposo casi de inmediato para no distraer. */
.bpc-wa-flotante__anillo {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	border: 2px solid var(--bpc-wa-verde);
	opacity: 0;
	pointer-events: none;
	animation: bpc-wa-pulso 2.8s ease-out infinite;
	animation-delay: 1.4s;
}

@keyframes bpc-wa-pulso {
	0% { transform: scale(1); opacity: 0.5; }
	70% { opacity: 0; }
	100% { transform: scale(1.35); opacity: 0; }
}
@keyframes bpc-wa-entrada {
	from { transform: translateY(16px) scale(0.9); opacity: 0; }
	to   { transform: translateY(0) scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.bpc-wa-flotante { animation: none; }
	.bpc-wa-flotante:hover { transform: none; }
	.bpc-wa-flotante__anillo { display: none; }
}

/* En pantallas angostas: burbuja más chica, más cerca de la esquina, y sin
   el texto al pasar el cursor (en touch no hay hover real — dejarlo
   siempre oculto evita que ocupe espacio de más sobre el contenido). */
@media (max-width: 600px) {
	.bpc-wa-flotante {
		right: 16px;
		bottom: 16px;
		height: 54px;
	}
	.bpc-wa-flotante:hover {
		padding-right: 0;
	}
	.bpc-wa-flotante__icono {
		width: 54px;
		height: 54px;
	}
	.bpc-wa-flotante__icono .bpc-icon {
		width: 27px;
		height: 27px;
	}
	.bpc-wa-flotante__texto {
		display: none;
	}
}