/* MiMoto — Botón WhatsApp v1.0.0 */

.mbw {
	--mbw-color: #0F6E56;
	--mbw-x: 20px;
	--mbw-y: 20px;
	--mbw-size: 58px;
}

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

.mbw--flotante {
	position: fixed;
	bottom: var(--mbw-y);
	z-index: 9998;
	line-height: 0;
}

.mbw--flotante.mbw--izquierda { left: var(--mbw-x); }
.mbw--flotante.mbw--derecha   { right: var(--mbw-x); }

.mbw--flotante .mbw__enlace {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	width: var(--mbw-size);
	height: var(--mbw-size);
	padding: 0;
	border-radius: 999px;
	background: var(--mbw-color);
	color: #ffffff;
	text-decoration: none;
	box-shadow: 0 6px 20px rgba(8, 13, 20, .28);
	overflow: hidden;
	white-space: nowrap;
	box-sizing: border-box;
	transition: width .25s ease, transform .2s ease, box-shadow .2s ease, gap .25s ease, padding .25s ease;
}

.mbw--flotante .mbw__enlace:hover,
.mbw--flotante .mbw__enlace:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(8, 13, 20, .38);
	color: #ffffff;
}

.mbw__enlace:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 2px;
}

.mbw .mbw-icono {
	width: calc(var(--mbw-size) * .56);
	height: calc(var(--mbw-size) * .56);
	flex: 0 0 auto;
	display: block;
}

/* Texto oculto por defecto en el flotante (solo lectores de pantalla). */
.mbw--flotante .mbw__texto {
	max-width: 0;
	opacity: 0;
	font-size: .92rem;
	font-weight: 600;
	line-height: 1;
	overflow: hidden;
	transition: max-width .25s ease, opacity .2s ease;
}

/* El texto aparece al pasar el mouse (solo en dispositivos con puntero fino). */
@media (hover: hover) and (pointer: fine) {
	.mbw--flotante .mbw__enlace:hover,
	.mbw--flotante .mbw__enlace:focus-within {
		width: auto;
		padding: 0 20px 0 16px;
		gap: 10px;
	}
	.mbw--flotante .mbw__enlace:hover .mbw__texto,
	.mbw--flotante .mbw__enlace:focus-within .mbw__texto {
		max-width: 260px;
		opacity: 1;
	}
}

/* Modo "texto siempre visible". */
.mbw--flotante.mbw--con-texto .mbw__enlace {
	width: auto;
	padding: 0 20px 0 16px;
	gap: 10px;
}
.mbw--flotante.mbw--con-texto .mbw__texto {
	max-width: 260px;
	opacity: 1;
}

/* ---------- Botón en línea (shortcode) ---------- */

.mbw--inline {
	display: inline-block;
	line-height: 0;
}

.mbw--inline .mbw__enlace {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 20px;
	border-radius: 999px;
	background: var(--mbw-color);
	color: #ffffff;
	text-decoration: none;
	font-weight: 600;
	font-size: .95rem;
	line-height: 1.2;
	box-shadow: 0 2px 8px rgba(8, 13, 20, .18);
	transition: filter .2s ease, transform .2s ease;
}

.mbw--inline .mbw__enlace:hover,
.mbw--inline .mbw__enlace:focus-visible {
	filter: brightness(1.12);
	transform: translateY(-1px);
	color: #ffffff;
}

.mbw--inline .mbw-icono {
	width: 20px;
	height: 20px;
}

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

@media (max-width: 600px) {
	.mbw--flotante {
		--mbw-size: 54px;
		--mbw-x: 14px;
		bottom: calc(var(--mbw-y) + env(safe-area-inset-bottom, 0px));
	}
	/* En móvil el texto no se despliega: solo el círculo. */
	.mbw--flotante.mbw--con-texto .mbw__enlace {
		width: var(--mbw-size);
		padding: 0;
		gap: 0;
	}
	.mbw--flotante.mbw--con-texto .mbw__texto {
		max-width: 0;
		opacity: 0;
	}
}

/* ---------- Accesibilidad e impresión ---------- */

@media (prefers-reduced-motion: reduce) {
	.mbw .mbw__enlace { transition: none; }
	.mbw .mbw__enlace:hover { transform: none; }
}

@media print {
	.mbw--flotante { display: none !important; }
}