/* Grupo de botones flotantes: consulta rapida por WhatsApp. */

/*
 * Mismo arreglo que los paneles: sin esto, un bloque sin "align:full" queda
 * encogido a la columna de contenido con margenes automaticos, y un
 * elemento fijo no puede vivir ahi adentro. Ver la nota larga en
 * CategoriesPanel/style.css.
 */
.ace-floating-actions {
	align-items: flex-end;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	inset-block-end: 1.25rem !important;
	inset-inline-end: 1.25rem !important;
	margin: 0 !important;
	max-width: none !important;
	position: fixed !important;
	width: auto !important;
	z-index: var(--wp--custom--layer--header, 100);
}

/*
 * Cuando la barra inferior movil esta visible, el boton se corre arriba de
 * ella para no taparla. Usa el mismo contrato que ya declara
 * MobileNav/style.css (la clase is-show-* y el alto de la barra), sin que
 * ninguno de los dos componentes necesite saber del otro.
 */
body:has(.ace-mobile-nav.is-show-always) .ace-floating-actions {
	inset-block-end: calc(var(--wp--custom--bar--bottom-nav, 3.75rem) + env(safe-area-inset-bottom, 0) + 1.25rem) !important;
}

@media (max-width: 64rem) {
	body:has(.ace-mobile-nav.is-show-1024) .ace-floating-actions {
		inset-block-end: calc(var(--wp--custom--bar--bottom-nav, 3.75rem) + env(safe-area-inset-bottom, 0) + 1.25rem) !important;
	}
}

@media (max-width: 48rem) {
	body:has(.ace-mobile-nav.is-show-768) .ace-floating-actions {
		inset-block-end: calc(var(--wp--custom--bar--bottom-nav, 3.75rem) + env(safe-area-inset-bottom, 0) + 1.25rem) !important;
	}

	.ace-floating-actions {
		inset-inline-end: 1rem !important;
	}
}

/*
 * El desplegable de "+ opciones" de MobileNav abre justo donde vive este
 * boton (mismo rincon inferior derecho). Mientras esta abierto (el propio
 * MobileNav le saca el atributo `hidden`), el boton flotante se corre mas
 * arriba para no quedar tapado. Mismo contrato sin acoplar los componentes:
 * ninguno de los dos sabe del otro, solo miran el estado del otro via CSS.
 */
body:has(.ace-mobile-nav__dropdown:not([hidden])) .ace-floating-actions {
	inset-block-end: calc(var(--wp--custom--bar--bottom-nav, 3.75rem) + env(safe-area-inset-bottom, 0) + 6.75rem + 1.25rem) !important;
}

/*
 * Boton "Volver arriba" (C12, aprobado por Adriano el 21/09/2026): vive en el
 * mismo grupo que el de WhatsApp, justo arriba de el, asi que hereda solo su
 * posicion sobre la barra inferior y el desplegable de "+ opciones". Mas chico
 * que el de WhatsApp (44px contra 56px, el minimo tactil del sitio) y blanco:
 * el verde de WhatsApp y el rojo de "Agregar" siguen siendo los unicos colores
 * fuertes. El margen lo centra sobre el circulo de WhatsApp: (56 - 44) / 2.
 * Escondido con `visibility` (y no solo con opacidad) para que ni el teclado ni
 * un lector de pantalla lleguen a el mientras no se ve. Aparece cuando view.js
 * le pone `is-visible` (una pantalla entera bajada) y se esconde mientras el
 * menu de WhatsApp esta abierto (`is-open` en el grupo).
 */
.ace-floating-actions__top {
	align-items: center;
	background-color: var(--wp--preset--color--surface, #fff);
	block-size: 2.75rem;
	border: 1px solid var(--wp--preset--color--hairline, #e2e1de);
	border-radius: 999px;
	box-shadow: 0 0.25rem 0.875rem rgb(0 0 0 / 18%);
	color: var(--wp--preset--color--contrast, #1c1c1c);
	cursor: pointer;
	display: flex;
	flex-shrink: 0;
	inline-size: 2.75rem;
	justify-content: center;
	margin-inline-end: 0.375rem;
	opacity: 0;
	padding: 0;
	transform: translateY(0.5rem);
	transition: opacity 0.2s cubic-bezier(0.25, 1, 0.5, 1), transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), visibility 0s linear 0.2s, background-color 0.15s ease-out;
	visibility: hidden;
}

.ace-floating-actions__top.is-visible {
	opacity: 1;
	transform: none;
	transition-delay: 0s;
	visibility: visible;
}

.ace-floating-actions.is-open .ace-floating-actions__top {
	opacity: 0;
	transform: translateY(0.5rem);
	visibility: hidden;
}

.ace-floating-actions__top:hover {
	background-color: var(--wp--preset--color--surface-alt, #f4f3f1);
}

.ace-floating-actions__top:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast, #1c1c1c);
	outline-offset: 3px;
}

.ace-floating-actions__top-icon {
	block-size: 1.375rem;
	inline-size: 1.375rem;
}

.ace-floating-actions__toggle {
	align-items: center;
	background-color: #25d366;
	block-size: 3.5rem;
	border: 0;
	border-radius: 999px;
	box-shadow: 0 0.375rem 1.125rem rgb(0 0 0 / 25%);
	color: #fff;
	cursor: pointer;
	display: flex;
	flex-shrink: 0;
	inline-size: 3.5rem;
	justify-content: center;
	position: relative;
	transition: transform 0.15s ease-out;
}

.ace-floating-actions__toggle:hover {
	transform: scale(1.06);
}

.ace-floating-actions__icon {
	block-size: 1.75rem;
	inline-size: 1.75rem;
	position: absolute;
	transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}

.ace-floating-actions__icon--close {
	opacity: 0;
	transform: rotate(-45deg) scale(0.5);
}

.ace-floating-actions__toggle.is-active .ace-floating-actions__icon--open {
	opacity: 0;
	transform: rotate(45deg) scale(0.5);
}

.ace-floating-actions__toggle.is-active .ace-floating-actions__icon--close {
	opacity: 1;
	transform: rotate(0) scale(1);
}

.ace-floating-actions__menu {
	align-items: flex-end;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.ace-floating-actions__menu[hidden] {
	display: none;
}

.ace-floating-actions__option {
	align-items: center;
	background-color: var(--wp--preset--color--surface, #fff);
	border-radius: 999px;
	box-shadow: 0 0.25rem 0.875rem rgb(0 0 0 / 18%);
	color: var(--wp--preset--color--contrast, #21201d);
	display: flex;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 500;
	gap: 0.5rem;
	min-block-size: var(--wp--custom--target--min, 2.75rem);
	padding-inline: 1rem;
	text-decoration: none;
	white-space: nowrap;
}

.ace-floating-actions__option:hover {
	background-color: var(--wp--preset--color--surface-alt, #f4f3f1);
}

.ace-floating-actions__option-icon {
	block-size: 1rem;
	color: #25d366;
	flex-shrink: 0;
	inline-size: 1rem;
}

@media (prefers-reduced-motion: reduce) {
	/* Sin deslizamiento: el boton solo aparece y desaparece. */
	.ace-floating-actions__top,
	.ace-floating-actions.is-open .ace-floating-actions__top {
		transform: none;
		transition-duration: 0.01ms;
	}

	.ace-floating-actions__toggle,
	.ace-floating-actions__icon {
		transition-duration: 0.01ms;
	}
}

/* El componente debe seguir visible y editable dentro de los dos editores. */
.block-editor-block-list__block .ace-floating-actions,
.elementor-editor-active .ace-floating-actions {
	inset-block-end: auto !important;
	inset-inline-end: auto !important;
	position: relative !important;
}