/* TBM WhatsApp
   Criterio de movimiento: skill «movimiento-fajardos».
   Solo transform y opacity. Nada por encima de 300 ms. Hover restringido a
   punteros finos. Las preferencias del sistema se respetan aquí mismo.

   El color y los márgenes llegan desde los ajustes como variables. */

.tbm-wa {
	--tbm-wa-verde: #25d366;
	--tbm-wa-margen-x: 20px;
	--tbm-wa-margen-y: 20px;
	--tbm-wa-ease: cubic-bezier(0.23, 1, 0.32, 1);

	position: fixed;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	gap: 10px;

	opacity: 0;
	transition: opacity .25s var(--tbm-wa-ease), transform .25s var(--tbm-wa-ease);
}

.tbm-wa--visible { opacity: 1; transform: none; }

/* Posiciones ------------------------------------------------------------- */

/* La burbuja se apila arriba o abajo según la esquina, y entra desde el lado
   del botón: si algo aparece, debe salir de donde está su origen. */

.tbm-wa--abajo-derecha,
.tbm-wa--abajo-izquierda {
	bottom: var(--tbm-wa-margen-y);
	flex-direction: column;
	transform: translateY(10px) scale(.95);
}

.tbm-wa--arriba-derecha,
.tbm-wa--arriba-izquierda {
	top: var(--tbm-wa-margen-y);
	flex-direction: column-reverse;
	transform: translateY(-10px) scale(.95);
}

.tbm-wa--abajo-derecha,
.tbm-wa--arriba-derecha {
	right: var(--tbm-wa-margen-x);
	align-items: flex-end;
}

.tbm-wa--abajo-izquierda,
.tbm-wa--arriba-izquierda {
	left: var(--tbm-wa-margen-x);
	align-items: flex-start;
}

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

.tbm-wa__boton {
	width: 56px;
	height: 56px;
	flex: 0 0 auto;
	border: 0;
	border-radius: 50%;
	background: var(--tbm-wa-verde);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
	transition: filter .16s ease, transform .1s var(--tbm-wa-ease);
	-webkit-tap-highlight-color: transparent;
}

/* La señal se da al presionar, no al soltar. */
.tbm-wa__boton:active { transform: scale(.94); }

.tbm-wa__boton:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
	box-shadow: 0 0 0 6px rgba(0, 0, 0, .25);
}

/* El hover solo donde hay puntero real: en táctil deja el botón «pegado»
   con el estado activo tras el toque. Se oscurece con filter en vez de con
   un color fijo, para que funcione con cualquier color de marca. */
@media (hover: hover) and (pointer: fine) {
	.tbm-wa__boton:hover { filter: brightness(.92); }
}

.tbm-wa__boton svg { display: block; }

/* Burbuja ---------------------------------------------------------------- */

.tbm-wa__burbuja {
	position: relative;
	max-width: 260px;
	padding: 14px 16px 14px 16px;
	background: #fff;
	color: #23282d;
	font-size: 14px;
	line-height: 1.45;
	border-radius: 12px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .16);

	opacity: 0;
	transform: translateY(6px);
	transition: opacity .2s var(--tbm-wa-ease), transform .2s var(--tbm-wa-ease);
}

.tbm-wa--arriba-derecha .tbm-wa__burbuja,
.tbm-wa--arriba-izquierda .tbm-wa__burbuja { transform: translateY(-6px); }

.tbm-wa__burbuja--visible { opacity: 1; transform: none; }

.tbm-wa__burbuja-texto {
	margin: 0 16px 0 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.45;
	color: inherit;
}

/* Botón de llamada a la acción dentro de la burbuja. */
.tbm-wa__cta {
	display: inline-block;
	margin-top: 12px;
	padding: 8px 16px;
	border: 0;
	border-radius: 6px;
	background: var(--tbm-wa-verde);
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	font-family: inherit;
	line-height: 1.2;
	cursor: pointer;
	transition: filter .16s ease, transform .1s var(--tbm-wa-ease);
}

.tbm-wa__cta:active { transform: scale(.97); }
.tbm-wa__cta:focus-visible { outline: 2px solid var(--tbm-wa-verde); outline-offset: 2px; }

@media (hover: hover) and (pointer: fine) {
	.tbm-wa__cta:hover { filter: brightness(.92); }
}

.tbm-wa__cerrar {
	position: absolute;
	top: 6px;
	right: 8px;
	border: 0;
	background: none;
	color: #9aa0a6;
	font-size: 20px;
	line-height: 1;
	padding: 2px 6px;
	cursor: pointer;
	border-radius: 4px;
}

.tbm-wa__cerrar:hover { color: #23282d; }
.tbm-wa__cerrar:focus-visible { outline: 2px solid var(--tbm-wa-verde); outline-offset: 1px; }

/* Móvil ------------------------------------------------------------------ */

@media (max-width: 640px) {
	.tbm-wa__boton { width: 52px; height: 52px; }
	.tbm-wa__burbuja { max-width: calc(100vw - 90px); }
}

/* Preferencias del sistema ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	/* Se conserva el fundido, se quita el desplazamiento. */
	.tbm-wa,
	.tbm-wa--abajo-derecha,
	.tbm-wa--abajo-izquierda,
	.tbm-wa--arriba-derecha,
	.tbm-wa--arriba-izquierda,
	.tbm-wa__burbuja { transform: none; transition: opacity .2s ease; }
	.tbm-wa__boton:active,
	.tbm-wa__cta:active { transform: none; }
}

@media (prefers-contrast: more) {
	.tbm-wa__boton { border: 2px solid #000; }
	.tbm-wa__burbuja { border: 1px solid #000; box-shadow: none; }
}

@media print {
	.tbm-wa { display: none; }
}