/* Websy · Botón de WhatsApp
 * Los colores y el redondeo vienen del panel como variables CSS
 * (--wsy-wa-fondo, --wsy-wa-texto, --wsy-wa-radio).
 */
.wsy-wa-wrap { margin: 16px 0; }

.wsy-wa-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 28px;
	background: var(--wsy-wa-fondo, #faf6ef);
	color: var(--wsy-wa-texto, #111111);
	border-radius: var(--wsy-wa-radio, 14px);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: filter .2s ease, transform .2s ease;
}

.wsy-wa-boton.wsy-wa-full { display: flex; width: 100%; }

.wsy-wa-boton:hover,
.wsy-wa-boton:focus {
	color: var(--wsy-wa-texto, #111111);
	text-decoration: none;
	filter: brightness(.96);
}

.wsy-wa-boton:focus-visible { outline: 2px solid #25D366; outline-offset: 3px; }

.wsy-wa-icono { flex: 0 0 auto; }

@media (prefers-reduced-motion: reduce) {
	.wsy-wa-boton { transition: none; }
}

/* =========================================================
 * BOTÓN FLOTANTE
 * Variables: --wsy-wa-f-fondo, --wsy-wa-f-color, --wsy-wa-f-inferior,
 * --wsy-wa-f-lateral, --wsy-wa-f-tamano
 * ========================================================= */
.wsy-wa-flotante {
	position: fixed;
	bottom: calc(var(--wsy-wa-f-inferior, 20px) + env(safe-area-inset-bottom, 0px));
	z-index: 99990;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: var(--wsy-wa-f-tamano, 60px);
	min-width: var(--wsy-wa-f-tamano, 60px);
	padding: 0;
	background: var(--wsy-wa-f-fondo, #25d366);
	color: var(--wsy-wa-f-color, #ffffff);
	border-radius: 999px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
	font-family: inherit;
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
	animation: wsy-wa-entrada .5s ease .6s backwards; /* backwards: al terminar no bloquea el transform del hover */
}
.wsy-wa-flotante.wsy-wa-lado-derecha   { right: var(--wsy-wa-f-lateral, 20px); }
.wsy-wa-flotante.wsy-wa-lado-izquierda { left:  var(--wsy-wa-f-lateral, 20px); }

.wsy-wa-flotante:hover,
.wsy-wa-flotante:focus {
	color: var(--wsy-wa-f-color, #ffffff);
	text-decoration: none;
	transform: translateY(-2px) scale(1.04);
	box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
}
.wsy-wa-flotante:focus-visible { outline: 3px solid #128c7e; outline-offset: 3px; }

.wsy-wa-f-icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--wsy-wa-f-tamano, 60px);
	height: var(--wsy-wa-f-tamano, 60px);
}
.wsy-wa-f-svg { display: block; }

/* Con texto: píldora (icono + texto). */
.wsy-wa-flotante.wsy-wa-con-texto { padding-right: 22px; }
.wsy-wa-flotante.wsy-wa-lado-izquierda.wsy-wa-con-texto { flex-direction: row; }
.wsy-wa-f-texto { white-space: nowrap; }

/* Pulso de atención. */
.wsy-wa-flotante.wsy-wa-pulso::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--wsy-wa-f-fondo, #25d366);
	z-index: -1;
	animation: wsy-wa-pulso 2.2s ease-out 1.5s infinite;
}

@keyframes wsy-wa-entrada {
	from { opacity: 0; transform: translateY(20px) scale(.85); }
	to   { opacity: 1; transform: none; }
}
@keyframes wsy-wa-pulso {
	0%   { transform: scale(1);   opacity: .55; }
	70%  { transform: scale(1.35); opacity: 0; }
	100% { transform: scale(1.35); opacity: 0; }
}

/* Visibilidad por dispositivo (mobile-first, escritorio desde 768px). */
.wsy-wa-flotante.wsy-wa-disp-escritorio { display: none; }
@media (min-width: 768px) {
	.wsy-wa-flotante.wsy-wa-disp-escritorio { display: inline-flex; }
	.wsy-wa-flotante.wsy-wa-disp-movil { display: none; }
}

/* Vista previa en el panel del admin. */
.wsy-wa-flotante.wsy-wa-preview {
	position: relative;
	bottom: auto; left: auto; right: auto;
	display: inline-flex !important;
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	.wsy-wa-flotante { animation: none; transition: none; }
	.wsy-wa-flotante.wsy-wa-pulso::before { animation: none; display: none; }
}

@media print {
	.wsy-wa-flotante { display: none !important; }
}