/* Woju Floating Buttons — front-end */
.wfb {
	--wfb-size: 56px;
	--wfb-x: 20px;
	--wfb-y: 20px;
	--wfb-main: #25D366;
	--wfb-gap: 12px;
	--wfb-ease: cubic-bezier(.2, .8, .2, 1);
	position: fixed;
	bottom: calc(var(--wfb-y) + env(safe-area-inset-bottom, 0px));
	z-index: 99990;
	display: flex;
	flex-direction: column;
	gap: var(--wfb-gap);
	font-family: inherit;
	line-height: 1.3;
	pointer-events: none; /* solo los hijos reciben clics */
}
.wfb > * { pointer-events: auto; }
.wfb--right { right: var(--wfb-x); align-items: flex-end; }
.wfb--left  { left: var(--wfb-x);  align-items: flex-start; }

.wfb *, .wfb *::before, .wfb *::after { box-sizing: border-box; }

/* Dispositivos */
@media (min-width: 768px) { .wfb--devices-mobile { display: none; } }
@media (max-width: 767px) { .wfb--devices-desktop { display: none; } }

/* ---------- Lista de botones ---------- */
.wfb-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wfb-gap);
}
.wfb--right .wfb-list { align-items: flex-end; }
.wfb--left  .wfb-list { align-items: flex-start; }

.wfb-item {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
}
.wfb--left .wfb-item { flex-direction: row-reverse; }

/* Modo expandible: oculto hasta abrir, aparece en cascada */
.wfb--expandable .wfb-list {
	position: absolute;
	bottom: calc(var(--wfb-size) + var(--wfb-gap));
	pointer-events: none;
}
.wfb--right.wfb--expandable .wfb-list { right: 0; }
.wfb--left.wfb--expandable  .wfb-list { left: 0; }
.wfb--expandable .wfb-item {
	opacity: 0;
	transform: translateY(16px) scale(.6);
	transition: opacity .2s ease, transform .3s var(--wfb-ease);
	visibility: hidden;
}
.wfb--expandable.is-open .wfb-list { pointer-events: auto; }
.wfb--expandable.is-open .wfb-item {
	opacity: 1;
	transform: none;
	visibility: visible;
}
/* Cascada: el más cercano al botón principal aparece primero */
.wfb--expandable.is-open .wfb-item:nth-last-child(1) { transition-delay: 0s; }
.wfb--expandable.is-open .wfb-item:nth-last-child(2) { transition-delay: .04s; }
.wfb--expandable.is-open .wfb-item:nth-last-child(3) { transition-delay: .08s; }
.wfb--expandable.is-open .wfb-item:nth-last-child(4) { transition-delay: .12s; }
.wfb--expandable.is-open .wfb-item:nth-last-child(5) { transition-delay: .16s; }
.wfb--expandable.is-open .wfb-item:nth-last-child(n+6) { transition-delay: .2s; }

/* Botones */
.wfb-btn,
.wfb-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--wfb-size);
	height: var(--wfb-size);
	border-radius: 50%;
	border: 0;
	padding: 0;
	color: #fff;
	cursor: pointer;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .18), 0 1px 3px rgba(0, 0, 0, .12);
	transition: transform .2s var(--wfb-ease), box-shadow .2s ease;
	-webkit-tap-highlight-color: transparent;
}
.wfb-btn { background: var(--wfb-color, #333); }
.wfb-toggle { background: var(--wfb-main); }

.wfb-btn:hover,
.wfb-toggle:hover { transform: scale(1.07); box-shadow: 0 6px 20px rgba(0, 0, 0, .22); }
.wfb-btn:focus-visible,
.wfb-toggle:focus-visible { outline: 3px solid var(--wfb-main); outline-offset: 3px; }

.wfb-btn svg,
.wfb-toggle svg { width: 46%; height: 46%; }

/* Íconos de imagen propia */
.wfb-btn img,
.wfb-toggle img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}
.wfb-btn--image { background: transparent; overflow: hidden; }

/* Etiquetas */
.wfb-label {
	background: #fff;
	color: #1d1d1f;
	font-size: 13px;
	font-weight: 500;
	padding: 6px 12px;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
	white-space: nowrap;
}
/* En modo apilado la etiqueta solo aparece al pasar el cursor (en escritorio) */
@media (hover: hover) {
	.wfb--stacked .wfb-label,
	.wfb--single .wfb-label {
		opacity: 0;
		transform: translateX(8px);
		transition: opacity .2s ease, transform .2s ease;
		pointer-events: none;
	}
	.wfb--left.wfb--stacked .wfb-label,
	.wfb--left.wfb--single .wfb-label { transform: translateX(-8px); }
	.wfb--stacked .wfb-item:hover .wfb-label,
	.wfb--single .wfb-item:hover .wfb-label { opacity: 1; transform: none; }
}
@media (hover: none) {
	.wfb--stacked .wfb-label,
	.wfb--single .wfb-label { display: none; }
}

/* ---------- Botón principal (+ / X) ---------- */
.wfb-toggle__open,
.wfb-toggle__close {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	overflow: hidden;
	transition: transform .3s var(--wfb-ease), opacity .2s ease;
}
.wfb-toggle__close { opacity: 0; transform: rotate(-90deg) scale(.5); }
.wfb.is-open .wfb-toggle__open  { opacity: 0; transform: rotate(90deg) scale(.5); }
.wfb.is-open .wfb-toggle__close { opacity: 1; transform: none; }
.wfb.is-open .wfb-toggle { background: #3a3a3c; }

.wfb-toggle__tip {
	position: absolute;
	bottom: 50%;
	transform: translateY(50%);
	background: #1d1d1f;
	color: #fff;
	font-size: 13px;
	padding: 6px 10px;
	border-radius: 6px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
}
.wfb--right .wfb-toggle__tip { right: calc(100% + 10px); }
.wfb--left  .wfb-toggle__tip { left: calc(100% + 10px); }
@media (hover: hover) {
	.wfb:not(.is-open) .wfb-toggle:hover .wfb-toggle__tip { opacity: 1; }
}

/* Indicador de notificación cuando la burbuja se contrae */
.wfb-toggle.has-badge::after,
.wfb--single .wfb-btn.has-badge::after,
.wfb--stacked .wfb-item:last-child .wfb-btn.has-badge::after {
	content: "1";
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 10px;
	background: #ff3b30;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
	border: 2px solid #fff;
	animation: wfb-pop .35s var(--wfb-ease);
}

/* Pulso suave en el botón principal */
.wfb-toggle.has-badge,
.wfb-btn.has-badge { animation: wfb-pulse 2.4s ease-in-out infinite; }

/* ---------- Burbuja de bienvenida ---------- */
.wfb-welcome {
	position: relative;
	width: min(290px, calc(100vw - var(--wfb-x) * 2));
	background: #fff;
	color: #1d1d1f;
	border-radius: 16px;
	padding: 14px 16px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .16), 0 2px 6px rgba(0, 0, 0, .08);
	cursor: pointer;
	transform-origin: bottom right;
	opacity: 0;
	transform: translateY(10px) scale(.85);
	transition: opacity .25s ease, transform .35s var(--wfb-ease);
}
.wfb--left .wfb-welcome { transform-origin: bottom left; }
.wfb-welcome[hidden] { display: none; }
.wfb-welcome.is-visible { opacity: 1; transform: none; }

/* Colita apuntando al botón */
.wfb-welcome::after {
	content: "";
	position: absolute;
	bottom: -6px;
	width: 14px;
	height: 14px;
	background: #fff;
	transform: rotate(45deg);
	border-radius: 2px;
}
.wfb--right .wfb-welcome::after { right: calc(var(--wfb-size) / 2 - 7px); }
.wfb--left  .wfb-welcome::after { left: calc(var(--wfb-size) / 2 - 7px); }

.wfb-welcome__close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 24px;
	height: 24px;
	padding: 4px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #8e8e93;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.wfb-welcome__close:hover { background: #f2f2f7; color: #1d1d1f; }
.wfb-welcome__close svg { width: 16px; height: 16px; }

.wfb-welcome__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-right: 20px;
}
.wfb-welcome__avatar {
	position: relative;
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--wfb-main);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.wfb-welcome__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}
.wfb-welcome__avatar svg { width: 22px; height: 22px; }
.wfb-welcome__dot {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #34c759;
	border: 2px solid #fff;
}
.wfb-welcome__who { display: flex; flex-direction: column; min-width: 0; }
.wfb-welcome__who strong { font-size: 14px; font-weight: 600; }
.wfb-welcome__who small { font-size: 12px; color: #34c759; }
.wfb-welcome__text {
	margin: 10px 0 0;
	font-size: 14px;
	color: #3a3a3c;
}

/* ---------- Animaciones ---------- */
@keyframes wfb-pop {
	0% { transform: scale(0); }
	70% { transform: scale(1.2); }
	100% { transform: scale(1); }
}
@keyframes wfb-pulse {
	0%, 100% { box-shadow: 0 4px 14px rgba(0, 0, 0, .18), 0 0 0 0 rgba(0, 0, 0, .15); }
	50% { box-shadow: 0 4px 14px rgba(0, 0, 0, .18), 0 0 0 10px rgba(0, 0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.wfb *, .wfb *::before, .wfb *::after {
		animation: none !important;
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
	}
}

@media print { .wfb { display: none !important; } }