/*
 * Piscinas Athena · Botón de contacto unificado (versión 1 · columna con etiquetas)
 * Sustituye a .pa-contact-shortcuts. Un solo botón que abre Llamar, WhatsApp y Asistente.
 * El asistente es el chat de n8n ya existente: su botón redondo se oculta y se abre desde aquí.
 */

.pa-contacto {
	--pac-size: 60px;
	--pac-item: 52px;
	--pac-gap: 12px;
	--pac-edge: 24px;
	--pac-navy: var(--pa-navy, #152a4e);
	--pac-cyan: var(--pa-cyan, #1fb6e9);
	--pac-cyan-2: #03b1ff;
	--pac-wa: #25d366;
	--pac-green: var(--pa-green, #2ecc71);
	position: fixed;
	right: var(--pac-edge);
	bottom: var(--pac-edge);
	z-index: 10000000; /* por encima del contenedor del chat de n8n (9999999) */
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 14px;
	font-family: "Josefin Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	pointer-events: none;
}
.pa-contacto *,
.pa-contacto *::before,
.pa-contacto *::after { box-sizing: border-box; }

/* Velo suave detrás del menú abierto */
.pa-contacto__velo {
	position: fixed;
	inset: 0;
	background: rgba(1, 15, 52, .16);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, visibility .2s;
	pointer-events: none;
}
.pa-contacto.is-open .pa-contacto__velo { opacity: 1; visibility: visible; pointer-events: auto; }

/* Opciones (orden en el HTML: Llamar, WhatsApp, Asistente → el asistente queda abajo, junto al botón) */
.pa-contacto__menu {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--pac-gap);
	margin: 0 calc((var(--pac-size) - var(--pac-item)) / 2) 0 0;
	padding: 0;
	list-style: none;
}
.pa-contacto__item {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: none !important;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(18px) scale(.5);
	transition: opacity .22s ease, transform .3s cubic-bezier(.2, .9, .3, 1.3), visibility .3s;
	transition-delay: calc(var(--i, 0) * 55ms);
}
.pa-contacto.is-open .pa-contacto__item {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
}
.pa-contacto__icono {
	display: grid;
	place-items: center;
	flex: none;
	width: var(--pac-item);
	height: var(--pac-item);
	border-radius: 50%;
	color: #fff;
	box-shadow: 0 6px 18px rgba(21, 42, 78, .24);
	transition: transform .18s ease, box-shadow .18s ease;
}
.pa-contacto__icono svg { width: 24px; height: 24px; fill: currentColor; }
.pa-contacto__item--tel .pa-contacto__icono { background: var(--pac-navy); color: var(--pac-cyan-2); }
.pa-contacto__item--wa .pa-contacto__icono { background: var(--pac-wa); }
.pa-contacto__item--chat .pa-contacto__icono { background: var(--pac-cyan); }
.pa-contacto__etiqueta {
	background: #fff;
	color: var(--pac-navy);
	padding: 9px 14px 7px;
	border-radius: 12px;
	box-shadow: 0 6px 20px rgba(21, 42, 78, .18);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease;
}
.pa-contacto__item:hover .pa-contacto__etiqueta,
.pa-contacto__item:focus-visible .pa-contacto__etiqueta { background: var(--pac-navy); color: #fff; }
.pa-contacto__item:hover .pa-contacto__icono { transform: translateY(-1px); box-shadow: 0 9px 22px rgba(21, 42, 78, .3); }
.pa-contacto__item:focus-visible { outline: none; }
.pa-contacto__item:focus-visible .pa-contacto__icono { outline: 3px solid rgba(31, 182, 233, .45); outline-offset: 3px; }

/* Botón principal */
.pa-contacto__boton {
	position: relative;
	display: grid;
	place-items: center;
	width: var(--pac-size);
	height: var(--pac-size);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--pac-cyan);
	color: #fff;
	cursor: pointer;
	pointer-events: auto;
	box-shadow: 0 8px 24px rgba(14, 134, 200, .38);
	transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
	-webkit-tap-highlight-color: transparent;
}
.pa-contacto__boton:hover { transform: translateY(-1px); }
.pa-contacto__boton:active { transform: scale(.96); }
.pa-contacto__boton:focus-visible { outline: 3px solid rgba(31, 182, 233, .45); outline-offset: 3px; }
.pa-contacto__iconos { position: relative; width: 28px; height: 28px; }
.pa-contacto__iconos svg {
	position: absolute;
	inset: 0;
	width: 28px;
	height: 28px;
	fill: currentColor;
	opacity: 0;
	transform: translateY(10px) scale(.7);
	transition: opacity .3s ease, transform .35s ease;
}
.pa-contacto__iconos svg.is-visible { opacity: 1; transform: none; }
.pa-contacto__cerrar {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 26px;
	height: 26px;
	opacity: 0;
	transform: rotate(-90deg) scale(.6);
	transition: opacity .3s ease, transform .35s ease;
}
.pa-contacto__punto {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 13px;
	height: 13px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--pac-green);
	transition: opacity .2s ease;
}

/* Blindaje frente a los estilos globales de <button> del tema y del kit de Elementor
 * (fondo azul marino en :hover/:focus, bordes, relleno). */
.pa-contacto .pa-contacto__boton,
.pa-contacto .pa-contacto__boton:hover,
.pa-contacto .pa-contacto__boton:focus,
.pa-contacto .pa-contacto__boton:active {
	background: var(--pac-cyan);
	color: #fff;
	border: 0;
	padding: 0;
	border-radius: 50%;
	text-transform: none;
	box-shadow: 0 8px 24px rgba(14, 134, 200, .38);
}
.pa-contacto .pa-contacto__item,
.pa-contacto .pa-contacto__item:hover,
.pa-contacto .pa-contacto__item:focus,
.pa-contacto .pa-contacto__item:active {
	background: transparent;
	color: inherit;
	border: 0;
	padding: 0;
	border-radius: 0;
	box-shadow: none;
	text-transform: none;
}

/* Menú abierto o chat abierto: el botón pasa a cerrar (X) */
.pa-contacto.is-open .pa-contacto__boton,
.pa-contacto.is-open .pa-contacto__boton:hover,
.pa-contacto.is-open .pa-contacto__boton:focus,
html.athena-chat-abierto .pa-contacto .pa-contacto__boton,
html.athena-chat-abierto .pa-contacto .pa-contacto__boton:hover,
html.athena-chat-abierto .pa-contacto .pa-contacto__boton:focus { background: var(--pac-navy); box-shadow: 0 8px 24px rgba(21, 42, 78, .35); }
.pa-contacto.is-open .pa-contacto__iconos svg,
html.athena-chat-abierto .pa-contacto__iconos svg { opacity: 0 !important; transform: rotate(90deg) scale(.6) !important; }
.pa-contacto.is-open .pa-contacto__cerrar,
html.athena-chat-abierto .pa-contacto__cerrar { opacity: 1; transform: none; }
.pa-contacto.is-open .pa-contacto__punto,
html.athena-chat-abierto .pa-contacto__punto { opacity: 0; }

/* Chat abierto: la ventana del chat tapa al resto; el menú no se muestra */
html.athena-chat-abierto .pa-contacto__menu,
html.athena-chat-abierto .pa-contacto__velo { display: none; }

/* Si el chat no ha cargado, el menú se queda con Llamar y WhatsApp */
.pa-contacto.sin-chat .pa-contacto__item--chat { display: none; }

/* Paneles de la web abiertos (menú móvil, carrito…): se oculta, como los botones anteriores */
body.ath-panel-abierto .pa-contacto { display: none; }

/* ── Integración con el chat de n8n ──
 * Solo cuando el botón está activo (clase puesta por el JS): el botón redondo de n8n
 * sigue en el DOM para abrir/cerrar el chat, pero invisible y del tamaño de nuestro
 * botón, de modo que la ventana del chat se coloca justo encima de él. */
html.pa-contacto-activo #n8n-chat { --chat--toggle--size: 60px; }
html.pa-contacto-activo #n8n-chat .chat-window-wrapper { pointer-events: none; }
html.pa-contacto-activo #n8n-chat .chat-window { pointer-events: auto; }
html.pa-contacto-activo #n8n-chat .chat-window-toggle {
	opacity: 0 !important;
	pointer-events: none !important;
	box-shadow: none !important;
}

@media (max-width: 480px) {
	.pa-contacto { --pac-size: 56px; --pac-item: 50px; --pac-gap: 10px; --pac-edge: 16px; }
	html.pa-contacto-activo #n8n-chat { --chat--toggle--size: 56px; }
	.pa-contacto__etiqueta { font-size: 15px; padding: 8px 12px 6px; }
	.pa-contacto__velo { background: rgba(1, 15, 52, .32); }
}

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

@media print { .pa-contacto { display: none !important; } }