.menu-usabilidad-aux {
	position: fixed;
	z-index: 777;
	top: 50%;
	right: 0;
	width: 38px; /* 2px más que el ancho de los botones, por los bordes */
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
}

@media screen and (min-width: 768px) {
	.menu-usabilidad-aux {
		width: 42px; /* 2px más que el ancho de los botones, por los bordes */
	}
}

.boton-usabilidad-aux {
	position: relative;
	width: 36px;
	height: 36px;
	color: var(--colorTextoBotonMenuUsabilidad);
	background-color: var(--colorBackgroundBotonMenuUsabilidad);
	border: 1px solid var(--colorBordeBotonUsabilidad);
	border-radius: 4px;
	margin-bottom: 10px;
	cursor: pointer;
	transition-property: all;
  transition-timing-function: ease-in-out;
	/* transition-duration: 0.15s; */ /* No se usa */
}

@media screen and (min-width: 768px) {
	.boton-usabilidad-aux {
		width: 40px;
		height: 40px;
	}
}

.boton-usabilidad-aux:hover {
	width: 160px;
	color: var(--colorTextoBotonMenuUsabilidadHover);
	background-color: var(--colorBackgroundBotonMenuUsabilidadHover);
	border: 1px solid var(--colorBordeBotonUsabilidadHover);
	margin-Left: -124px; /* 160px - 36px */
}

@media screen and (min-width: 768px) {
	.boton-usabilidad-aux:hover {
		width: 186px;
		margin-Left: -146px; /* 186px - 40px */
	}
}

.boton-usabilidad-aux img {
	width: 16px;
	height: 16px;
}

@media screen and (min-width: 768px) {
	.boton-usabilidad-aux img {
		width: 18px;
		height: 18px;
	}
}

.contenedor-icono-texto-aux {
	display: flex;
	width: 100%;
	height: 34px; /* 2 menos que boton-usabilidad-aux por los bordes */
	justify-content: center; /* Alineación horizontal */
	align-items: center; /* Alineación vertical */
	margin-left: 0;
}

@media screen and (min-width: 768px) {
	.contenedor-icono-texto-aux {
		height: 38px; /* 2 menos que boton-usabilidad-aux por los bordes */
	}
}

.contenedor-icono-texto-aux:hover {
	justify-content: flex-start;
	margin-left: 10px; /* (36px - 16px) / 2 */
}

@media screen and (min-width: 768px) {
	.contenedor-icono-texto-aux:hover {
		justify-content: flex-start;
		margin-left: 11px; /* (40px - 18px) / 2 */
	}
}

.icono-boton-usabilidad-aux {
	margin-left: 0px;
	float: left;
}

.texto-boton-usabilidad-aux {
	display: none;
	font-size: 12px; /* No debe usar el multiplicador */
	font-weight: 500;
	margin-left: 15px; /* ((36px - 16px) / 2) + 5px */
	text-align: left;
}

@media screen and (min-width: 768px) {
	.texto-boton-usabilidad-aux {
		font-size: 15px; /* No debe usar el multiplicador */
		font-weight: 600;
		margin-left: 16px; /* ((40px - 18px) / 2) + 5px */
	}
}
