/**
 * El botón flotante de contacto.
 *
 * Mismas medidas que el componente de los storefronts, que es de donde
 * salió el diseño: burbuja grande de 56 px, las de la pila de 48, 12 px
 * entre una y otra, y la etiqueta del nombre a un costado solo al pasar el
 * mouse.
 *
 * Los colores salen de las variables que imprime HC_Ajustes. Cada var()
 * lleva su respaldo igual, para que un sitio donde la hoja se sirva de una
 * caché vieja —sin el <style> de las variables— no muestre un botón
 * transparente.
 */

.hc-boton {
	position: fixed;
	bottom: var(--hc-separacion, 20px);
	z-index: 9998;
	display: flex;
	flex-direction: column;
	/* Ancla todo al borde: sin esto el contenedor se ensancha con la
	   etiqueta más larga y empuja el botón hacia adentro cada vez que se
	   abre la pila. */
	align-items: flex-end;
}

.hc-boton--derecha { right: var(--hc-separacion, 20px); }

.hc-boton--izquierda {
	left: var(--hc-separacion, 20px);
	align-items: flex-start;
}

/* Donde hay una barra fija abajo (el checkout de Happy Checkout), el botón
   sube para no taparle el "Continuar". La barra mide ~69 px y se le suma la
   separación elegida, así que el botón queda siempre por encima aunque se
   lo agrande. */
.hc-boton--subido { bottom: calc(69px + var(--hc-separacion, 20px)); }

/* --- La burbuja ---------------------------------------------------------- */
.hc-burbuja {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--hc-tamano, 64px);
	height: var(--hc-tamano, 64px);
	padding: 0;
	border: 0;
	border-radius: 9999px;
	background: var(--hc-color, #212e42);
	color: var(--hc-texto, #fff);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
	cursor: pointer;
	text-decoration: none;
	transition: transform .2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.hc-burbuja:hover { transform: scale(1.05); }

.hc-burbuja:focus-visible {
	outline: 2px solid var(--hc-color, #212e42);
	outline-offset: 2px;
}

.hc-burbuja--whatsapp {
	background: var(--hc-whatsapp, #25D366);
	color: #fff;
}

/* Las proporciones del botón del storefront: la burbuja chica era 48 sobre
   56 (0,857) y cada ícono la mitad de su burbuja. Expresadas en calc() en
   vez de en píxeles, el tamaño se cambia en un solo lugar y todo lo demás
   acompaña. */
.hc-burbuja--chica {
	width: calc(var(--hc-tamano, 64px) * 0.857);
	height: calc(var(--hc-tamano, 64px) * 0.857);
}

.hc-icono {
	display: block;
	width: calc(var(--hc-tamano, 64px) * 0.5);
	height: calc(var(--hc-tamano, 64px) * 0.5);
}

.hc-burbuja--chica .hc-icono {
	width: calc(var(--hc-tamano, 64px) * 0.428);
	height: calc(var(--hc-tamano, 64px) * 0.428);
}

/* --- La pila desplegable -------------------------------------------------- */
.hc-opciones {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
	margin-bottom: 12px;
	opacity: 0;
	transform: translateY(8px);
	/* pointer-events y no display:none: display corta la transición y la
	   pila aparecería de golpe. */
	pointer-events: none;
	transition: opacity .2s ease-out, transform .2s ease-out;
}

.hc-boton--izquierda .hc-opciones { align-items: flex-start; }

.hc-boton[data-hc-abierto="true"] .hc-opciones {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* --- La etiqueta con el nombre -------------------------------------------- */
/* pointer-events:none para que no se interponga con el clic al ícono: es
   más ancha que la burbuja y se la comería. */
.hc-etiqueta {
	position: absolute;
	right: 100%;
	margin-right: 12px;
	padding: 4px 10px;
	border-radius: 6px;
	background: var(--hc-color, #212e42);
	color: var(--hc-texto, #fff);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1);
	transition: opacity .2s ease;
}

.hc-boton--izquierda .hc-etiqueta {
	right: auto;
	left: 100%;
	margin-right: 0;
	margin-left: 12px;
}

.hc-burbuja:hover .hc-etiqueta,
.hc-burbuja:focus-visible .hc-etiqueta {
	opacity: 1;
}

/* En pantallas táctiles no hay hover: la etiqueta nunca se vería y además
   se queda "pegada" después de tocar. El aria-label sigue estando, así que
   no se pierde información para quien usa lector de pantalla. */
@media (hover: none) {
	.hc-etiqueta { display: none; }
}

/* --- El cruce de íconos del disparador ------------------------------------ */
.hc-disparador .hc-icono {
	position: absolute;
	transition: transform .2s ease, opacity .2s ease;
}

/* La cruz va un poco más chica que el globo: es un trazo más simple y al
   mismo tamaño se ve más pesada. Es la misma relación que en el original
   (24 sobre 28). */
.hc-disparador .hc-icono--cerrar {
	width: calc(var(--hc-tamano, 64px) * 0.428);
	height: calc(var(--hc-tamano, 64px) * 0.428);
	transform: rotate(-45deg) scale(0);
	opacity: 0;
}

.hc-boton[data-hc-abierto="true"] .hc-icono--soporte {
	transform: rotate(45deg) scale(0);
	opacity: 0;
}

.hc-boton[data-hc-abierto="true"] .hc-icono--cerrar {
	transform: rotate(0) scale(1);
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.hc-burbuja,
	.hc-opciones,
	.hc-etiqueta,
	.hc-disparador .hc-icono {
		transition: none;
	}

	.hc-burbuja:hover { transform: none; }
}