/**
 * Estilos públicos - Botones Mesón del Barro
 */

:root {
	/* Easing físico tipo "muelle" (spring) para rebote de botones */
	--bmb-spring-easing: linear(0, 0.016 0.5%, 0.06 1%, 0.226 2%, 1.116 5.4%, 1.375 6.6%, 1.527 7.7%, 1.565 8.2%, 1.585 8.8%, 1.581 9.3%, 1.559 9.8%, 1.458 10.9%, 0.937 14.3%, 0.784 15.5%, 0.693 16.6%, 0.67 17.1%, 0.657 17.7%, 0.671 18.7%, 0.729 19.8%, 1.042 23.3%, 1.13 24.5%, 1.182 25.6%, 1.201 26.7%, 1.192 27.7%, 1.156 28.8%, 0.977 32.2%, 0.925 33.4%, 0.894 34.5%, 0.882 35.6%, 0.887 36.6%, 0.907 37.7%, 1.045 42.4%, 1.069 44.5%, 1.059 46.3%, 0.979 50.9%, 0.96 53.4%, 0.966 55.3%, 1.013 59.9%, 1.024 62.3%, 0.986 71.2%, 1.008 79.9%, 0.995 88.9%, 1);
}

/* Contenedor principal flotante */
#bmb-floating-container {
	position: fixed;
	z-index: var(--bmb-z-index);
	box-sizing: border-box;
	transition: all 0.3s ease;
	max-width: var(--bmb-max-width);
	width: auto;
}

/* Alineaciones horizontales y verticales básicas */
.bmb-buttons-inner {
	display: flex;
	gap: var(--bmb-gap);
	box-sizing: border-box;
}

#bmb-floating-container.bmb-layout-vertical .bmb-buttons-inner {
	flex-direction: column;
}

#bmb-floating-container.bmb-layout-horizontal .bmb-buttons-inner {
	flex-direction: row;
}

/* Posicionamiento en pantalla */
#bmb-floating-container.bmb-position-bottom-right {
	right: var(--bmb-side-offset);
	bottom: var(--bmb-bottom-offset);
}

#bmb-floating-container.bmb-position-bottom-left {
	left: var(--bmb-side-offset);
	bottom: var(--bmb-bottom-offset);
}

/* Ajustes de ordenamiento flex según la posición */
#bmb-floating-container.bmb-position-bottom-right.bmb-layout-vertical .bmb-buttons-inner {
	align-items: flex-end;
}

#bmb-floating-container.bmb-position-bottom-left.bmb-layout-vertical .bmb-buttons-inner {
	align-items: flex-start;
}

/* Estilo individual de cada botón */
.bmb-button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	text-decoration: none;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
	cursor: pointer;
	outline: none;
	border: none;
	
	/* Transición fallback + spring */
	transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
	transition-timing-function: var(--bmb-spring-easing);
}

.bmb-button:hover {
	transform: scale(1.16) translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22), 0 4px 6px rgba(0, 0, 0, 0.1);
}

.bmb-button:active {
	transform: scale(0.95);
}

/* Centrar el icono (SVG o IMG) dentro del botón */
.bmb-icon-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	pointer-events: none;
}

.bmb-icon-wrapper svg {
	width: 100%;
	height: 100%;
	display: block;
}

.bmb-icon-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* Tooltip (Etiqueta descriptiva al pasar el ratón) */
.bmb-tooltip {
	position: absolute;
	background: rgba(15, 23, 42, 0.95);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	color: #ffffff;
	padding: 6px 12px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s, visibility 0.25s, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	pointer-events: none;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	z-index: 10;
}

/* Posición del tooltip según orientación de los botones */
/* Caso 1: Posición derecha, disposición vertical -> Tooltip a la izquierda */
#bmb-floating-container.bmb-position-bottom-right.bmb-layout-vertical .bmb-tooltip {
	right: 125%;
	top: 50%;
	transform: translateY(-50%) translateX(10px);
}

#bmb-floating-container.bmb-position-bottom-right.bmb-layout-vertical .bmb-button:hover .bmb-tooltip {
	opacity: 1;
	visibility: visible;
	transform: translateY(-50%) translateX(0);
}

/* Caso 2: Posición izquierda, disposición vertical -> Tooltip a la derecha */
#bmb-floating-container.bmb-position-bottom-left.bmb-layout-vertical .bmb-tooltip {
	left: 125%;
	top: 50%;
	transform: translateY(-50%) translateX(-10px);
}

#bmb-floating-container.bmb-position-bottom-left.bmb-layout-vertical .bmb-button:hover .bmb-tooltip {
	opacity: 1;
	visibility: visible;
	transform: translateY(-50%) translateX(0);
}

/* Caso 3: Disposición horizontal (Cualquier lado) -> Tooltip arriba centrado */
#bmb-floating-container.bmb-layout-horizontal .bmb-tooltip {
	bottom: 125%;
	left: 50%;
	transform: translateX(-50%) translateY(10px);
}

#bmb-floating-container.bmb-layout-horizontal .bmb-button:hover .bmb-tooltip {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

/* ==========================================================================
   Comportamiento en Dispositivos Móviles
   ========================================================================== */

@media (max-width: 767px) {
	/* Si está activo el comportamiento de ancho completo */
	#bmb-floating-container.bmb-mobile-full-width {
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		max-width: none !important;
		padding: 10px 16px !important;
		background: rgba(255, 255, 255, 0.92);
		backdrop-filter: blur(15px);
		-webkit-backdrop-filter: blur(15px);
		box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.08);
		border-top: 1px solid rgba(0, 0, 0, 0.05);
	}

	#bmb-floating-container.bmb-mobile-full-width .bmb-buttons-inner {
		flex-direction: row !important; /* Siempre en fila en barra horizontal */
		justify-content: center;
		align-items: center;
		width: 100%;
		max-width: var(--bmb-max-width); /* Limitar hasta el máximo deseado */
		margin: 0 auto;
		gap: var(--bmb-gap);
	}

	#bmb-floating-container.bmb-mobile-full-width .bmb-button {
		flex: 1;
		height: 46px; /* Altura más compacta y cómoda para móviles */
		border-radius: 8px !important; /* Bordes amigables para botones de barra */
		box-shadow: none; /* Eliminar sombra individual para fundir con la barra */
	}

	/* Ocultar tooltip en barra móvil porque es táctil y tiene poco espacio */
	#bmb-floating-container.bmb-mobile-full-width .bmb-tooltip {
		display: none !important;
	}

	/* Si se decide conservar en la esquina en móvil, ajustar un poco el offset si es necesario */
	#bmb-floating-container.bmb-mobile-corner {
		/* Mantener offset variables */
	}
}

/* Desactivar animaciones físicas para usuarios con accesibilidad prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
	.bmb-button {
		transition: none !important;
		transform: none !important;
	}
}