/* ==========================================================================
   WA Asistente IA — botón flotante de WhatsApp
   ========================================================================== */

:root {
	--waia-size-base: 64px;
	--waia-x-base: 24px;
	--waia-y-base: 24px;
	--waia-size: var(--waia-size-base);
	--waia-x: var(--waia-x-base);
	--waia-y: var(--waia-y-base);
	--waia-accent: #25d366;
	--waia-accent-soft: rgba(37, 211, 102, 0.42);
	--waia-z: 99990;
}

.waia-widget {
	position: fixed;
	bottom: var(--waia-y);
	z-index: var(--waia-z);
	width: var(--waia-size);
	height: var(--waia-size);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	line-height: 1.35;
	-webkit-font-smoothing: antialiased;
}

.waia-pos-br { right: var(--waia-x); }
.waia-pos-bl { left: var(--waia-x); }

/* Geometría de las ondas: se ajusta al círculo real de cada icono
   para que la onda salga del borde de la burbuja y no de la caja. */
.waia-widget {
	--waia-ring-x: 0%;
	--waia-ring-y: 0%;
	--waia-ring-s: 100%;
}

.waia-style-icono.waia-icono-robot {
	--waia-ring-x: 0.5%;
	--waia-ring-y: 0%;
	--waia-ring-s: 99%;
}

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

.waia-btn {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 28%; /* la burbuja tiene colita: el foco no debe recortarla */
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
	animation: waia-respira 3.6s ease-in-out infinite;
	will-change: transform;
}

.waia-btn:hover,
.waia-btn:focus-visible {
	transform: scale(1.09);
	animation-play-state: paused;
}

.waia-btn:active { transform: scale(0.96); }

.waia-btn:focus-visible {
	outline: 3px solid var(--waia-accent);
	outline-offset: 4px;
}

.waia-icono {
	position: relative;
	z-index: 3;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0; /* se respeta la silueta original del icono */
	background: none;
	object-fit: contain;
	box-shadow: none;
	filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.22));
	transition: filter 0.28s ease;
}

.waia-btn:hover .waia-icono,
.waia-btn:focus-visible .waia-icono {
	filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.28));
}

/* Variante: círculo de color sólido con el icono dentro */
.waia-style-circulo .waia-btn {
	border-radius: 50%;
	background: var(--waia-accent);
	background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.22), rgba(0, 0, 0, 0.08));
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}

.waia-style-circulo .waia-icono {
	width: 62%;
	height: 62%;
	margin: 19%;
	filter: none;
}

/* --------------------------------------------------------------------------
   Ondas — invitación muy sutil a tocar el botón
   -------------------------------------------------------------------------- */

.waia-onda {
	position: absolute;
	top: var(--waia-ring-y, 0%);
	left: var(--waia-ring-x, 0%);
	width: var(--waia-ring-s, 100%);
	height: var(--waia-ring-s, 100%);
	z-index: 1;
	display: block;
	border-radius: 50%;
	background: var(--waia-accent-soft);
	opacity: 0;
	pointer-events: none;
	animation: waia-onda 3.6s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
	will-change: transform, opacity;
}

.waia-onda-2 {
	background: transparent;
	box-shadow: 0 0 0 2px var(--waia-accent-soft);
	animation-name: waia-onda-anillo;
	animation-delay: 1.5s;
}

/* Halo fijo que respira detrás del botón */
.waia-brillo {
	position: absolute;
	top: calc(var(--waia-ring-y, 0%) - 7%);
	left: calc(var(--waia-ring-x, 0%) - 7%);
	width: calc(var(--waia-ring-s, 100%) + 14%);
	height: calc(var(--waia-ring-s, 100%) + 14%);
	z-index: 0;
	display: block;
	border-radius: 50%;
	background: radial-gradient(circle, var(--waia-accent-soft) 0%, rgba(0, 0, 0, 0) 68%);
	opacity: 0.35;
	pointer-events: none;
	animation: waia-halo 3.6s ease-in-out infinite;
}

/* Intensidad de la onda */
.waia-onda-marcada .waia-onda { animation-duration: 2.4s; opacity: 0; }
.waia-onda-marcada .waia-onda-2 { animation-delay: 1s; }
.waia-onda-marcada .waia-brillo { opacity: 0.55; }

.waia-onda-off .waia-onda,
.waia-onda-off .waia-brillo { display: none; }
.waia-onda-off .waia-btn { animation: none; }

@keyframes waia-onda {
	0%   { transform: scale(0.94); opacity: 0; }
	18%  { opacity: 0.38; }
	100% { transform: scale(1.85); opacity: 0; }
}

@keyframes waia-onda-anillo {
	0%   { transform: scale(0.98); opacity: 0; }
	15%  { opacity: 0.6; }
	100% { transform: scale(1.62); opacity: 0; }
}

@keyframes waia-respira {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.045); }
}

@keyframes waia-halo {
	0%, 100% { transform: scale(1); opacity: 0.28; }
	50%      { transform: scale(1.12); opacity: 0.5; }
}

/* --------------------------------------------------------------------------
   Globo "Asistente IA"
   -------------------------------------------------------------------------- */

.waia-globo {
	position: absolute;
	bottom: calc(100% + 16px);
	z-index: 4;
	display: flex;
	flex-direction: column;
	gap: 2px;
	box-sizing: border-box;
	width: max-content;
	max-width: min(268px, calc(100vw - 2 * var(--waia-x) - 12px));
	padding: 13px 34px 13px 16px;
	border-radius: 16px;
	background: #ffffff;
	color: #1f2a30;
	box-shadow: 0 12px 30px rgba(15, 34, 45, 0.18), 0 2px 6px rgba(15, 34, 45, 0.08);
	opacity: 0;
	transform: translateY(8px) scale(0.96);
	transform-origin: bottom right;
	pointer-events: none;
	transition: opacity 0.24s ease, transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1), visibility 0.24s;
	visibility: hidden;
}

.waia-pos-br .waia-globo { right: 0; }
.waia-pos-bl .waia-globo { left: 0; transform-origin: bottom left; }

.waia-globo-titulo {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1px;
	color: #0f2a1d;
}

.waia-punto {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--waia-accent);
	box-shadow: 0 0 0 0 var(--waia-accent-soft);
	animation: waia-punto 2.2s ease-out infinite;
}

@keyframes waia-punto {
	0%   { box-shadow: 0 0 0 0 var(--waia-accent-soft); }
	70%  { box-shadow: 0 0 0 7px rgba(0, 0, 0, 0); }
	100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

.waia-globo-texto {
	font-size: 14px;
	font-weight: 400;
	color: #46555e;
}

.waia-globo-pico {
	position: absolute;
	bottom: -6px;
	width: 14px;
	height: 14px;
	border-radius: 3px;
	background: #ffffff;
	transform: rotate(45deg);
}

.waia-pos-br .waia-globo-pico { right: calc(var(--waia-size) / 2 - 7px); }
.waia-pos-bl .waia-globo-pico { left: calc(var(--waia-size) / 2 - 7px); }

.waia-globo-cerrar {
	position: absolute;
	top: 7px;
	right: 7px;
	display: none;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #8b9aa3;
	cursor: pointer;
	line-height: 0;
	transition: background 0.2s ease, color 0.2s ease;
}

.waia-globo-cerrar:hover { background: #eef2f4; color: #46555e; }

/* Estados visibles: hover del widget, foco del botón o apertura automática */
@media (hover: hover) and (pointer: fine) {
	.waia-widget:hover .waia-globo {
		opacity: 1;
		visibility: visible;
		transform: translateY(0) scale(1);
		pointer-events: auto;
	}
}

.waia-btn:focus-visible + .waia-globo,
.waia-globo.waia-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

.waia-globo.waia-visible .waia-globo-cerrar { display: block; }

/* --------------------------------------------------------------------------
   Responsive y accesibilidad
   -------------------------------------------------------------------------- */

@media (max-width: 782px) {
	.waia-widget {
		--waia-size: min(58px, var(--waia-size-base));
		--waia-x: min(16px, var(--waia-x-base));
		--waia-y: min(16px, var(--waia-y-base));
	}

	.waia-globo { padding: 11px 32px 11px 14px; }
	.waia-globo-texto { font-size: 13.5px; }
	.waia-no-movil { display: none; }
}

@media print {
	.waia-widget { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	.waia-btn,
	.waia-onda,
	.waia-brillo,
	.waia-punto {
		animation: none !important;
	}

	.waia-globo { transition: opacity 0.15s linear; }
	.waia-brillo { opacity: 0.3; }
}